/* © 2026 Yuri Zivago Yung Grillo (尤立) · Jornada Chinesa (jornadachinesa.com.br). Todos os direitos reservados. Proibida a cópia ou republicação sem autorização. */
/* Estética chinesa dos jogos: papel de arroz, laca vermelha, dourado e caligrafia. */
.games-area {--cn-red:#a3201c;--cn-red-dark:#6e1412;--cn-gold:#c9a24a;--cn-gold-soft:#e8cf8a;--cn-paper:#fbf3e2;--cn-paper-2:#f3e6c8;--cn-ink:#2b1d14;--cn-ink-soft:#6b5643;--cn-jade:#2f7a5a;--cn-kai:"KaiTi","STKaiti","Kaiti SC","BiauKai","Noto Serif SC","Songti SC",serif;}

/* Cabeçalho de cada jogo: faixa com moldura dourada e um selo vermelho. */
.games-area .maze-intro {position:relative;border:1px solid var(--cn-gold);background:
  radial-gradient(circle at 100% 0,#c9a24a22 0 70px,transparent 71px),
  linear-gradient(120deg,var(--cn-paper),var(--cn-paper-2));color:var(--cn-ink);box-shadow:inset 0 0 0 4px var(--cn-paper),inset 0 0 0 5px #c9a24a88;}
.games-area .maze-intro h3 {font-family:var(--cn-kai);color:var(--cn-red-dark);letter-spacing:.02em;}
.games-area .maze-intro p {color:var(--cn-ink-soft);}
.games-area .maze-eyebrow {color:var(--cn-red);}

/* Botão Encerrar */
.games-area .game-quit {border-color:var(--cn-red);color:var(--cn-red);}
.games-area .game-quit:hover {background:var(--cn-red);color:#fff;}

/* Painéis dos jogos: moldura de laca vermelha com filete dourado. */
.games-area :is(.quiz-stage,.sent-stage) {background:var(--cn-paper);color:var(--cn-ink);border:2px solid var(--cn-red);border-radius:14px;
  box-shadow:inset 0 0 0 4px var(--cn-paper),inset 0 0 0 5px var(--cn-gold),0 10px 26px #6e141218;}
.games-area > .maze-hud {font-family:inherit;}

/* Forca: lanterna em vez de forca, em fundo de laca escura. */
.games-area .hangman-stage {background:linear-gradient(160deg,#3a1513,#22100e);color:#fbeeda;border:2px solid var(--cn-gold);box-shadow:inset 0 0 0 4px #22100e,inset 0 0 0 5px #c9a24a88,0 16px 40px #2b0f0d40;}
.games-area .hangman-stage .maze-hud {color:var(--cn-gold-soft);border-color:#c9a24a55;}
.games-area .hangman-content h3 {color:var(--cn-gold-soft);font-family:var(--cn-kai);}
.games-area .hangman-content small {color:#e6b8a8;}
.games-area .hangman-slots span {border-color:#c9a24a99;background:#fbf3e20f;color:#fff3dc;font-family:var(--cn-kai);}
.games-area .hangman-content form input {background:var(--cn-paper);color:var(--cn-ink);border:1px solid var(--cn-gold);}

/* Memória: costas das cartas em laca vermelha com 福 dourado; frente em papel. */
.games-area .pairs-card {background:linear-gradient(145deg,#b3261e,#7e1714);border:2px solid var(--cn-gold);color:var(--cn-gold-soft);box-shadow:inset 0 0 0 3px #7e1714,inset 0 0 0 4px #e8cf8a66;}
.games-area .pairs-back {font-family:var(--cn-kai);font-size:2rem;color:var(--cn-gold-soft);opacity:1;}
.games-area .pairs-card.open,.games-area .pairs-card.done {background:var(--cn-paper);color:var(--cn-ink);border-color:var(--cn-red);box-shadow:inset 0 0 0 3px var(--cn-paper),inset 0 0 0 4px #c9a24a99;}
.games-area .pairs-card.done {background:var(--cn-paper-2);}
.games-area .pairs-card .pairs-h {font-family:var(--cn-kai);}
.games-area .pairs-card.done .pairs-py {color:var(--cn-ink-soft);}

/* Relâmpago: pergunta em caligrafia, opções como plaquinhas de papel. */
.games-area .quiz-prompt {font-family:var(--cn-kai);color:var(--cn-red-dark);}
.games-area .quiz-sub {color:var(--cn-ink-soft);}
.games-area .quiz-option {background:#fffaf0;color:var(--cn-ink);border:2px solid #d9c08a;border-left:6px solid var(--cn-red);}
.games-area .quiz-option.is-hanzi {font-family:var(--cn-kai);}
.games-area .quiz-option:hover:not(:disabled) {border-color:var(--cn-gold);border-left-color:var(--cn-red);background:#fff4dc;}
.games-area .quiz-option.right {border-color:var(--cn-jade);border-left-color:var(--cn-jade);background:#2f7a5a1f;}
.games-area .quiz-option.wrong {border-color:var(--cn-red);background:#a3201c1a;}
.games-area .quiz-feedback {color:var(--cn-ink);}

/* Monte a frase: a frase é escrita num papel quadriculado 田字格; as peças parecem plaquinhas de madeira. */
.games-area .sent-prompt {color:var(--cn-red-dark);}
.games-area .sent-answer {border:2px solid var(--cn-red);background-color:#fffaf0;background-image:
  linear-gradient(#a3201c22 1px,transparent 1px),linear-gradient(90deg,#a3201c22 1px,transparent 1px),
  linear-gradient(#a3201c10 1px,transparent 1px),linear-gradient(90deg,#a3201c10 1px,transparent 1px);
  background-size:56px 56px,56px 56px,28px 28px,28px 28px;}
.games-area .sent-empty {color:var(--cn-ink-soft);}
.games-area .sent-piece {background:linear-gradient(#f6e7c4,#e9d29f);color:var(--cn-ink);border:1px solid #b08a4a;border-bottom:4px solid #8a6630;font-family:var(--cn-kai);}
.games-area .sent-piece:hover:not(:disabled) {border-color:var(--cn-red);border-bottom-color:var(--cn-red-dark);}
.games-area .sent-piece.ok {background:linear-gradient(#e3f1e8,#cfe6d6);border-color:var(--cn-jade);border-bottom-color:#1f5a40;}
.games-area .sent-hint p {color:var(--cn-ink-soft);}
.games-area .quiz-feedback,.games-area .pairs-result {color:inherit;}
.games-area .pairs-result h3 {font-family:var(--cn-kai);color:var(--cn-red);}
body[data-theme="escuro"] .games-area .pairs-result h3 {color:var(--cn-gold-soft);}

/* Labirinto: selo do nível HSK na tela de apresentação. */
.maze-preview-hsk {display:inline-block;margin:2px auto 0;padding:3px 10px;border:2px solid #e5232e;border-radius:6px;color:#ffb3a8;font:700 .85rem system-ui;letter-spacing:.08em;transform:rotate(-2deg);}
.maze-avatars {flex-wrap:wrap;}
/* Personagens: grade compacta; a seleção não muda o tamanho do botão (a página não pula). */
.maze-avatars {display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;}
.maze-avatars-label {align-self:center;}
.maze-avatar {flex:0 0 auto;width:92px;border:2px solid var(--border);padding:4px 4px 6px;justify-content:flex-start;}
.maze-avatar small {font-size:.68rem;line-height:1.2;text-align:center;overflow-wrap:anywhere;}
.maze-avatar[aria-pressed="true"] {border:2px solid var(--cn-red,#a3201c);background:var(--surface-alt);box-shadow:0 0 0 2px #c9a24a66;}
@media(max-width:560px){.maze-avatars {gap:6px;}.maze-avatars-label {flex-basis:100%;}.maze-avatar {width:calc((100% - 24px)/5);}.maze-avatar canvas {width:36px;height:36px;}.maze-avatar small {font-size:.58rem;}}
/* Coleção de jogos com prévias desenhadas */
.game-gallery {display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;}
.game-gallery[hidden],.game-scene[hidden] {display:none!important;}
.game-gallery .game-choice {display:flex;flex-direction:column;gap:6px;padding:10px 10px 14px;border:1px solid #c9a24a;border-radius:14px;background:linear-gradient(160deg,#fbf3e2,#f3e6c8);color:#2b1d14;text-align:left;transition:transform .15s,box-shadow .15s;}
.game-gallery .game-choice:hover {transform:translateY(-3px);box-shadow:0 10px 22px #6e141222;border-color:#a3201c;}
.game-gallery .game-choice:focus-visible {outline:3px solid #a3201c;outline-offset:2px;}
.game-preview {display:block;}
.game-preview svg {display:block;width:100%;height:auto;border-radius:10px;}
.game-gallery .game-choice strong {font-family:"KaiTi","STKaiti","Kaiti SC",serif;font-size:1.15rem;color:#6e1412;margin:4px 4px 0;}
.game-gallery .game-choice .game-desc {font-size:.86rem;color:#6b5643;margin:0 4px;}
.game-back {margin:4px 0 6px;}
@media(max-width:560px){.game-gallery {grid-template-columns:1fr 1fr;gap:8px;}.game-gallery .game-choice {padding:6px 6px 10px;}.game-gallery .game-choice strong {font-size:1rem;}.game-gallery .game-choice .game-desc {font-size:.74rem;}}
/* Avaliar as palavras da partida */
.word-review {margin:14px 0;padding:10px 14px;border:1px solid #c9a24a;border-radius:12px;background:#fbf3e2;color:#2b1d14;max-width:820px;}
.word-review summary {cursor:pointer;font-weight:700;color:#6e1412;}
.word-review .muted {color:#6b5643;font-size:.88rem;}
.word-review-row {display:grid;grid-template-columns:minmax(140px,1fr) 130px auto;gap:6px 12px;align-items:center;padding:8px 0;border-top:1px solid #e3d2a8;}
.word-review-word {display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0;}
.word-review-h {font-family:"KaiTi","STKaiti","Kaiti SC",serif;font-size:1.5rem;}
.word-review-py {color:#a3201c;}
.word-review-pt {color:#6b5643;font-size:.88rem;}
.word-review-state {color:#2f7a5a;font-weight:700;}
.word-review-acts {display:flex;flex-wrap:wrap;gap:6px;}
.word-review-acts .database-button {min-height:34px;padding:4px 10px;font-size:.84rem;}
.word-review-acts .database-button[aria-pressed="true"] {background:#a3201c;color:#fff;border-color:#a3201c;}
@media(max-width:700px){.word-review-row {grid-template-columns:1fr auto;}.word-review-acts {grid-column:1/-1;}}
/* Tela de um jogo: centralizada; rodapé com Voltar aos jogos e os botões de som. */
.game-scene {max-width:900px;margin:0 auto;}
.game-scene .maze-stage,.game-scene .hangman-stage {margin-left:auto;margin-right:auto;}
.game-scene .learning-actions:empty {display:none;}
.game-footer {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 4px;padding-top:14px;border-top:1px solid #c9a24a66;}
.game-footer .game-audio {display:flex;flex-wrap:wrap;gap:8px;}
.game-footer .game-back {margin:0;}
.games-area .quiz-stage[hidden] {display:none;}
.game-start {grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;margin:14px auto;padding:18px;max-width:520px;text-align:center;border:2px solid #a3201c;border-radius:14px;background:#fbf3e2;color:#2b1d14;box-shadow:inset 0 0 0 4px #fbf3e2,inset 0 0 0 5px #c9a24a;}
.game-start[hidden] {display:none;}
.game-start-art {width:100%;max-width:360px;}
.game-start-art svg {display:block;width:100%;height:auto;border-radius:10px;}
.game-start p {margin:0;color:#6b5643;}
/* Selo de baralho completo nos Flashcards */
.learning-card h3 .deck-complete {float:right;margin-left:10px;font-size:.82rem;font-weight:700;color:#2f7a5a;white-space:nowrap;}
/* Professor: uso dos flashcards */
.flash-usage-wrap {overflow-x:auto;margin:10px 0 18px;}
.flash-usage {width:100%;border-collapse:collapse;font-size:.92rem;}
.flash-usage th,.flash-usage td {padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;}
.flash-usage th {font-size:.8rem;color:var(--text-muted);}
.flash-usage-idle td {color:var(--text-muted);}
.flash-spark {display:inline-flex;align-items:flex-end;gap:2px;height:24px;}
.flash-spark i {display:block;width:6px;background:var(--accent);border-radius:2px;}
.flash-spark i.zero {background:var(--border);}
/* Meu progresso */
.progress-big {font-size:1.1rem;font-weight:700;}
.progress-levels {display:grid;gap:6px;margin:8px 0;}
.progress-level {display:grid;grid-template-columns:64px minmax(80px,1fr) auto;align-items:center;gap:10px;}
.progress-level progress {width:100%;height:12px;accent-color:var(--accent);}
@media(max-width:560px){.progress-level {grid-template-columns:52px 1fr;}.progress-level span {grid-column:1/-1;font-size:.85rem;}}
.game-scene .maze-avatars {gap:6px;}
.game-scene .maze-avatar {width:76px;padding:4px 2px 6px;}
.game-scene .maze-avatar small {font-size:.64rem;}
.game-footer .game-audio button {font-size:inherit;}
@media(max-width:560px){.game-scene .maze-avatar {width:calc((100% - 24px)/5);}.game-scene .maze-avatar small {font-size:.58rem;}}
/* Labirinto: inventário, botão de poder e teste de pinyin ao pegar um objeto */
.maze-hud .maze-inv {color:#ffe08a;letter-spacing:.04em;}
.maze-power {display:block;margin:10px auto 2px;min-height:44px;padding:8px 16px;border:2px solid #c9a24a;border-radius:12px;background:#3b2a6b;color:#fff3c4;font:700 .95rem system-ui;cursor:pointer;}
.maze-power:disabled {opacity:.45;cursor:default;}
.maze-power[hidden] {display:none;}
.maze-quiz {display:flex;flex-direction:column;align-items:center;gap:10px;width:min(360px,100%);}
.maze-quiz input {width:100%;min-height:44px;padding:8px 12px;border:2px solid #c9a24a;border-radius:10px;background:#fbf3e2;color:#2b1d14;font-size:1.1rem;text-align:center;}
.maze-avatar:disabled {opacity:.55;cursor:default;}
.maze-avatar[aria-pressed="true"]:disabled {opacity:1;}
/* Forca: dica e pular */
.hangman-helpers {display:flex;flex-wrap:wrap;gap:8px;margin:6px 0;}
.hangman-hint {color:#ffe08a;}
/* Telas de jogo mais largas no computador (o celular continua igual) */
.game-scene {max-width:1200px;}
.games-area .maze-stage {max-width:940px;}
.games-area .hangman-stage {max-width:1000px;}
/* Personagens: linha principal e linha dos desbloqueáveis */
.maze-avatars-wrap {display:flex;flex-direction:column;align-items:center;gap:8px;margin:10px 0 14px;}
.maze-avatars-wrap .maze-avatars {justify-content:center;margin:0;flex-wrap:wrap;}
.maze-avatars-special {align-items:center;padding:6px 10px;border:1px dashed #c9a24a;border-radius:14px;background:#fbf3e266;}
.maze-avatars-special .maze-avatar.is-special canvas {background:#3a1513;}
.maze-avatars-special.is-locked .maze-avatar {filter:grayscale(1);opacity:.5;}
.maze-lock-note {flex-basis:100%;text-align:center;color:#6b5643;font-size:.78rem;}
@media(min-width:561px){.maze-lock-note {flex-basis:auto;max-width:220px;text-align:left;}}
/* Avaliação, ranking, histórico e instruções centralizados com a tela do jogo */
.game-scene .word-review,.game-scene .game-ranking,.game-scene details.maze-history,.game-scene .games-area > details,.game-scene .pairs-result {max-width:940px;margin-left:auto;margin-right:auto;}
.game-scene .word-review-host,.game-scene .game-ranking {display:block;}
.word-review-hsk {padding:1px 7px;border:1.5px solid #e5232e;border-radius:5px;color:#a3201c;font-size:.72rem;font-weight:700;letter-spacing:.04em;}
.game-ranking .ranking-icon {width:30px;height:30px;margin-right:8px;vertical-align:middle;border-radius:8px;background:#1d3527;}

/* Jogos de rodada: Caça aos tons, Classificadores, Chengyu, Veja e escolha, Ouça e escolha */
.games-area .extra-stage {max-width:720px;margin-left:auto;margin-right:auto;}
.games-area .extra-area {display:flex;flex-direction:column;align-items:center;gap:10px;min-height:340px;}
.games-area .extra-area .quiz-options {width:100%;}
.games-area .extra-area .quiz-prompt,.games-area .extra-area .quiz-sub {margin:0;}
.games-area .extra-zh {display:block;font-family:var(--cn-kai);font-size:1.6rem;line-height:1.2;}
.games-area .extra-py {display:block;font-size:.82rem;color:var(--cn-ink-soft);}
.games-area .extra-blank {display:inline-block;min-width:1.1em;margin:0 .08em;border-bottom:3px solid var(--cn-gold);color:transparent;}
.games-area .extra-meaning {font-family:inherit;font-size:1.25rem;font-weight:700;max-width:34ch;}
.games-area .extra-pic {font-size:5.5rem;line-height:1;height:120px;display:flex;align-items:center;justify-content:center;}
.games-area .extra-pic.is-scene {font-size:1rem;height:auto;width:min(100%,320px);}
.games-area .extra-pic.is-scene svg {width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--cn-gold);}
.games-area .extra-listen {font-size:1.2rem;padding:12px 26px;}
.games-area .extra-next {margin-top:4px;}
.games-area .tone-rows {display:flex;flex-direction:column;gap:8px;width:100%;}
.games-area .tone-row {display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
.games-area .tone-syl {min-width:4.2em;font-size:1.3rem;font-weight:700;color:var(--cn-red-dark);text-align:center;}
.games-area .tone-btns {display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.games-area .tone-btn {min-width:62px;}
.games-area .tone-btn[aria-pressed="true"] {background:var(--cn-red);border-color:var(--cn-red);color:#fff;}
.games-area .extra-py[hidden] {display:none;}

/* Jogos de tabuleiro por desafio: xiangqi, weiqi e dou shou qi */
.board-area .board-rules {margin-top:8px;}
.board-area .board-rules summary,.board-area .board-legend summary {cursor:pointer;font-weight:700;color:var(--cn-red-dark);}
.board-area .board-rules ul,.board-area .board-legend-list {margin:6px 0 0;padding-left:20px;line-height:1.5;}
.board-area .board-status {min-height:1.5em;margin:6px 0;}
.board-area .board-section {margin:14px 0;padding:12px 14px;border:1px solid var(--cn-gold);border-radius:12px;background:var(--cn-paper);color:var(--cn-ink);}
.board-area .board-section h4 {margin:0 0 6px;font-family:var(--cn-kai);color:var(--cn-red-dark);font-size:1.1rem;}
.board-area .board-section .muted,.board-area .board-caps .muted {color:var(--cn-ink-soft);}
.board-area .board-list {display:flex;flex-direction:column;gap:8px;}
.board-area .board-row {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 10px;border:1px solid #e3d2a6;border-radius:10px;background:#fffaf0;}
.board-area .board-row.is-turn {border-color:var(--cn-red);box-shadow:inset 4px 0 0 var(--cn-red);}
.board-area .board-who {display:flex;flex-direction:column;min-width:0;}
.board-area .board-who small {overflow-wrap:anywhere;}
.board-area .board-row-acts {display:flex;gap:6px;}
.board-area .board-empty {margin:0;}
.board-area .board-game {max-width:940px;margin:0 auto;}
.board-area .board-players {display:flex;flex-wrap:wrap;gap:8px 18px;margin:8px 0;}
.board-area .board-player {display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid transparent;}
.board-area .board-player.is-turn {border-color:var(--cn-gold);background:var(--cn-paper);color:var(--cn-ink);}
.board-area .board-dot {width:14px;height:14px;border-radius:50%;display:inline-block;border:2px solid #0003;}
.board-area .board-turn {min-height:3em;margin:4px 0 8px;font-weight:600;}
.board-area .board-wrap {display:flex;justify-content:center;}
.board-area .board-svg {width:100%;max-width:520px;height:auto;display:block;user-select:none;-webkit-tap-highlight-color:transparent;}
.board-area .board-side {max-width:520px;margin:10px auto 0;}
.board-area .board-cap-line {display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:4px 0;}
.board-area .board-cap {display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-family:var(--cn-kai);font-size:1rem;background:#fffaf0;border:2px solid currentColor;}
.board-area .board-legend {margin-top:8px;}
/* Cores dos lados */
.side-xiangqi-0,.side-doushouqi-1 {color:#b3261e;}
.side-xiangqi-1 {color:#1f1a17;}
.side-doushouqi-0 {color:#1f5fa8;}
.side-weiqi-0 {background:#1f1a17;}
.side-weiqi-1 {background:#fdfaf2;}
.board-dot.side-xiangqi-0,.board-dot.side-doushouqi-1 {background:#b3261e;}
.board-dot.side-xiangqi-1 {background:#1f1a17;}
.board-dot.side-doushouqi-0 {background:#1f5fa8;}
/* SVG */
.board-svg .board-bg {fill:#e7c48b;}
.board-svg.is-go .board-bg {fill:#dcb36b;}
.board-svg .grid {stroke:#5b3a1a;stroke-width:1.4;}
.board-svg .star {fill:#5b3a1a;}
.board-svg .river {font-family:"KaiTi","STKaiti","Noto Serif SC",serif;font-size:22px;fill:#7a4b1d;text-anchor:middle;}
.board-svg .piece circle {fill:#fbefd2;stroke:currentColor;stroke-width:2.5;}
.board-svg .piece circle.ring {fill:none;stroke-width:1.2;}
.board-svg .piece text {fill:currentColor;font-family:"KaiTi","STKaiti","Kaiti SC","Noto Serif SC",serif;font-size:22px;font-weight:700;text-anchor:middle;dominant-baseline:central;}
.board-svg .piece.is-sel circle:first-child {stroke:#e0a100;stroke-width:4;}
.board-svg.is-dsq .piece text {font-size:24px;}
.board-svg.is-dsq .piece text.rank {font-size:11px;font-family:sans-serif;font-weight:700;}
.board-svg .cell {fill:#cfe3b0;stroke:#7a8f5a;stroke-width:1;}
.board-svg .cell.water {fill:#8ec5e8;stroke:#5b9cc6;}
.board-svg .cell.trap {fill:#e6c9a0;}
.board-svg .cell.den {fill:#d9a066;}
.board-svg .cell-label {font-size:11px;fill:#6b4a2a;text-anchor:middle;font-family:"KaiTi","Noto Serif SC",serif;pointer-events:none;}
.board-svg .stone.black {fill:#1f1a17;}
.board-svg .stone.white {fill:#fdfaf2;stroke:#8a7a66;stroke-width:1;}
.board-svg .go-last {fill:none;stroke-width:2;}
.board-svg .go-last.on-black {stroke:#fdfaf2;}
.board-svg .go-last.on-white {stroke:#1f1a17;}
.board-svg .last {fill:#f2d16b55;stroke:#c9a24a;stroke-width:1.5;pointer-events:none;}
.board-svg .target {fill:#2f7a5a;opacity:.75;}
.board-svg .hit {fill:transparent;cursor:pointer;}
.board-svg.is-dsq .cell,.board-svg.is-dsq .piece {cursor:pointer;}
.board-area .board-caps {min-height:64px;}