/* © 2026 Yuri Zivago Yung Grillo (尤立) · Jornada Chinesa (jornadachinesa.com.br). Todos os direitos reservados. Proibida a cópia ou republicação sem autorização. */
/* Estudo HSK — usa as variáveis de tema do site (claro, suave, escuro). */
.hsk .muted {color:var(--text-muted);font-size:.92rem;}
.hsk-access {margin:0 0 12px;color:var(--text-muted);}
.hsk-tabs {display:flex;gap:6px;flex-wrap:wrap;margin:0 0 4px;}
.hsk-tabs .database-button {width:auto;flex:0 0 auto;}
.hsk-tabs .database-button.on {background:var(--accent);color:var(--button-text);border-color:var(--accent);}
.hsk-bar {display:block;width:100%;height:10px;margin:6px 0 10px;accent-color:var(--accent);}
.hsk-locked {padding:8px 10px;border:1px dashed var(--border);border-radius:8px;color:var(--text-muted);margin:8px 0;}
.hsk-level {margin:8px 0;border:1px solid var(--border);border-radius:10px;padding:6px 10px;}
.hsk-level>summary {cursor:pointer;padding:6px 0;min-height:28px;}
.hsk-done {font-weight:700;margin:8px 0;}
.hsk-grid {display:flex;flex-wrap:wrap;gap:5px;margin:8px 0;align-items:flex-start;}
.hsk-chip {border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:1.08rem;line-height:1.4;cursor:pointer;user-select:none;background:var(--surface-alt);color:var(--text);}
.hsk-chip:hover,.hsk-chip:focus-visible {border-color:var(--accent);outline:2px solid transparent;box-shadow:0 0 0 2px var(--accent) inset;}
.hsk-chip.flip {flex:0 1 340px;max-width:100%;cursor:default;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"h py b" "h pt b";column-gap:10px;align-items:center;padding:6px 10px;border-color:var(--accent);}
.hsk-chip .hsk-h {grid-area:h;font-size:1.55rem;}
.hsk-chip .hsk-py {grid-area:py;font-weight:700;}
.hsk-chip .hsk-pt {grid-area:pt;font-size:.92rem;overflow-wrap:anywhere;}
.hsk-chip .hsk-b {grid-area:b;display:flex;gap:6px;}
.hsk .database-button.small {min-height:36px;min-width:40px;padding:4px 10px;}
.hsk-lh {margin:12px 0 2px;font-size:1rem;}
.hsk-row2 {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;}
.hsk-flash-card {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;min-height:230px;margin:8px 0 12px;padding:18px;border:2px solid var(--border);border-radius:14px;background:var(--surface-alt);color:var(--text);cursor:pointer;font:inherit;}
.hsk-flash-card:focus-visible {outline:3px solid var(--accent);outline-offset:2px;}
.hsk-flash-h {font-size:3.4rem;line-height:1.15;}
.hsk-flash-py {font-size:1.35rem;font-weight:700;visibility:hidden;}
.hsk-flash-pt {font-size:1.05rem;text-align:center;visibility:hidden;overflow-wrap:anywhere;}
.hsk-flash-tip {font-size:.85rem;color:var(--text-muted);}
.hsk-flash-card.flipped {border-color:var(--accent);}
.hsk-flash-card.flipped .hsk-flash-py,.hsk-flash-card.flipped .hsk-flash-pt {visibility:visible;}
.hsk-flash-card.flipped .hsk-flash-tip {visibility:hidden;}
.hsk-flash-count {color:var(--text-muted);margin:0;}
.hsk-flash-acts .database-button {flex:1 1 140px;min-height:48px;font-size:1.05rem;}
.hsk-skills {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;}
.hsk-skills .learning-card {margin:12px 0;}
.hsk-skill-head {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px;}
.hsk-skill-head h3 {margin:0;}
.hsk-skill-head label {margin:0;min-width:120px;}
.hsk-check {border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:8px 0;min-width:0;}
.hsk-check legend {padding:0 4px;font-weight:700;}
.hsk-check-row {display:flex;align-items:flex-start;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);}
.hsk-check-row:last-child {border-bottom:0;}
.hsk-check-row>span {flex:1;min-width:0;overflow-wrap:anywhere;padding-top:6px;}
.hsk-check-row>span.done {text-decoration:line-through;color:var(--text-muted);}
.hsk-box {flex:0 0 auto;width:34px;height:34px;border:2px solid var(--accent);border-radius:7px;background:var(--input-bg);color:var(--accent);font-weight:700;font-size:1.1rem;cursor:pointer;padding:0;}
.hsk-box[aria-checked="true"] {background:var(--accent);color:var(--button-text);}
.hsk-add {display:flex;gap:8px;margin:8px 0;}
.hsk-add input {flex:1;min-width:0;}
.hsk-add .database-button {flex:0 0 auto;}
.hsk .hsk-up {width:100%;margin:6px 0;}
.hsk-admin-list {display:grid;gap:12px;margin-top:12px;}
.hsk-admin-row {border:1px solid var(--border);border-radius:10px;padding:12px;display:grid;grid-template-columns:minmax(160px,1.2fr) minmax(110px,.6fr) minmax(120px,.7fr);gap:6px 14px;align-items:end;}
.hsk-admin-row[hidden] {display:none;}
.hsk-admin-row label {margin:0;}
.hsk-admin-name {align-self:center;}
.hsk-extras,.hsk-admin-sum,.hsk-admin-row .learning-actions {grid-column:1/-1;}
.hsk-extras {display:flex;flex-wrap:wrap;gap:4px 12px;border:1px solid var(--border);border-radius:8px;padding:6px 10px;margin:0;}
.hsk .hsk-extras label.hsk-extra {flex-direction:row;align-items:center;gap:5px;margin:0;min-height:36px;}
.hsk .hsk-extras input {width:20px;height:20px;padding:0;}
.hsk-admin-sum {margin:0;color:var(--text-muted);font-size:.92rem;}
.hsk-admin-row .learning-actions {margin:4px 0 0;}
.hsk-search {display:grid;gap:8px;margin-top:10px;}
.hsk-edit-row {display:grid;grid-template-columns:auto auto minmax(0,1fr) minmax(0,2fr) auto;gap:8px;align-items:center;}
.hsk-edit-row .hsk-h {font-size:1.4rem;}
.hsk-list-status p {margin:2px 0;}
.hsk-toast {position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);z-index:200;max-width:calc(100vw - 32px);padding:8px 14px;border-radius:999px;background:var(--text);color:var(--surface);font-size:.92rem;box-shadow:0 6px 18px #0004;opacity:0;transition:transform .2s,opacity .2s;pointer-events:none;}
.hsk-toast.show {transform:translate(-50%,0);opacity:1;}
.hsk-toast.error {background:var(--danger);color:#fff;}
@media(max-width:760px){
  .hsk-skills,.hsk-row2 {grid-template-columns:1fr;}
  .hsk-admin-row {grid-template-columns:1fr 1fr;}
  .hsk-admin-name {grid-column:1/-1;}
  .hsk-edit-row {grid-template-columns:auto 1fr;}
  .hsk-edit-row input,.hsk-edit-row .database-button {grid-column:1/-1;}
  .hsk-chip {font-size:1.15rem;padding:5px 10px;}
  .hsk-flash-h {font-size:3rem;}
  .hsk-tabs {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .hsk-tabs::-webkit-scrollbar {display:none;}
}
/* Celular: menu lateral em faixa rolável (uma linha), em vez de várias linhas de botões. */
@media(max-width:760px){
  #socialNavigation {flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;}
  #socialNavigation::-webkit-scrollbar {display:none;}
  #socialNavigation button {flex:0 0 auto!important;white-space:nowrap;width:auto!important;}
  body {overflow-x:hidden;}
}
.install-button[hidden] {display:none!important;}
.install-dialog {max-width:min(420px,calc(100vw - 32px));border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);padding:20px;}
.install-dialog::backdrop {background:#0007;}
.install-dialog .muted {color:var(--text-muted);font-size:.92rem;}
.install-dialog p {margin:10px 0;}
/* O estilo geral dos cartões deixa botões com 100% de largura no celular; aqui cada botão mantém seu tamanho. */
.hsk .social-card .hsk-box {width:34px;margin:0;}
.hsk .social-card .hsk-b button,.hsk .social-card .hsk-check-row .database-button,.hsk .social-card .hsk-add .database-button,.hsk .social-card .hsk-edit-row .database-button {width:auto;margin:0;}
.hsk .social-card .hsk-flash-acts .database-button {width:auto;margin:0;}
.hsk .social-card .hsk-flash-card {width:100%;margin:8px 0 12px;}
/* Flashcards: acertos seguidos e "Marcar como aprendida" */
.learning-note {color:var(--text-muted);font-size:.92rem;margin:0 0 6px;}
.learning-card-meta {color:var(--text-muted);font-size:.92rem;}
.learning-streak {font-weight:700;margin:10px 0 0;}
.learning-hsk-deck {border-left:4px solid var(--accent);}
.learning-learn {position:relative;display:inline-flex;}
.learning .learning-learn .database-button {width:auto;margin:0;}
.learning-learn-button {border-style:dashed!important;}
.learning-tip {position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);z-index:20;width:max-content;max-width:min(300px,80vw);padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--text);color:var(--surface);font-size:.86rem;line-height:1.4;box-shadow:0 6px 18px #0003;opacity:0;visibility:hidden;transition:opacity .15s;pointer-events:none;text-transform:none;}
.learning-tip::after {content:"";position:absolute;top:100%;left:50%;margin-left:-7px;border:7px solid transparent;border-top-color:var(--text);}
.learning-learn:hover .learning-tip,.learning-learn:focus-within .learning-tip {opacity:1;visibility:visible;}
@media(max-width:560px){.learning-tip {left:auto;right:0;transform:none;}.learning-tip::after {left:auto;right:24px;}}
/* Jogos: seletor de modo (turma ou treino HSK) */
.game-mode {display:flex;align-items:center;gap:8px;margin:0;}
.game-mode span {font-weight:700;}
.game-mode select {min-height:40px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--input-bg);color:var(--input-text);font:inherit;max-width:100%;}
@media(max-width:560px){.game-mode {flex:1 1 100%;}.game-mode select {flex:1;}}
/* Jogo da memória e Relâmpago */
.pairs-board {display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:10px;margin:14px 0;}
.pairs-empty {grid-column:1/-1;color:var(--text-muted);}
.pairs-card {position:relative;min-height:96px;padding:8px;border:2px solid var(--border);border-radius:12px;background:var(--accent);color:var(--button-text);cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;overflow-wrap:anywhere;transition:transform .15s;}
.pairs-card:hover:not(:disabled) {transform:translateY(-2px);}
.pairs-card:focus-visible {outline:3px solid var(--accent);outline-offset:2px;}
.pairs-back {font-size:1.6rem;font-weight:700;opacity:.85;}
.pairs-h,.pairs-t,.pairs-py {display:none;}
.pairs-card.open,.pairs-card.done {background:var(--surface);color:var(--text);border-color:var(--accent);}
.pairs-card.open .pairs-back,.pairs-card.done .pairs-back {display:none;}
.pairs-card.open .pairs-h,.pairs-card.done .pairs-h {display:block;font-size:1.9rem;}
.pairs-card.open .pairs-t,.pairs-card.done .pairs-t {display:block;font-size:.95rem;text-align:center;line-height:1.3;}
.pairs-card.done {background:var(--surface-alt);cursor:default;opacity:.9;}
.pairs-card.done .pairs-py {display:block;font-size:.8rem;color:var(--text-muted);}
.pairs-result {margin:10px 0 18px;min-height:0;}
.pairs-result h3 {margin:0 0 6px;}
.quiz-stage {margin:14px 0;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);text-align:center;}
.quiz-prompt {min-height:72px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;overflow-wrap:anywhere;}
.quiz-prompt.is-hanzi {font-size:3rem;font-weight:400;}
.quiz-sub {color:var(--text-muted);margin:2px 0 12px;}
.quiz-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.quiz-option {min-height:64px;padding:10px;border:2px solid var(--border);border-radius:12px;background:var(--surface-alt);color:var(--text);font:inherit;font-size:1.05rem;cursor:pointer;overflow-wrap:anywhere;}
.quiz-option.is-hanzi {font-size:1.7rem;}
.quiz-option:hover:not(:disabled) {border-color:var(--accent);}
.quiz-option.right {border-color:#2f8f4e;background:#2f8f4e22;}
.quiz-option.wrong {border-color:var(--danger);background:color-mix(in srgb,var(--danger) 15%,transparent);}
.quiz-feedback {min-height:1.5em;margin:12px 0 0;font-weight:700;}
.quiz-missed {margin:6px 0 12px 18px;}
@media(max-width:560px){.pairs-board {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}.pairs-card {min-height:84px;}.quiz-options {grid-template-columns:1fr;}.quiz-prompt.is-hanzi {font-size:2.6rem;}}
.learning-actions .learning-learn {align-self:stretch;}
.learning .learning-learn .database-button {height:100%;}
@media(max-width:560px){.game-selector {grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;}.game-choice {padding:12px;}.game-choice span {font-size:.8rem;margin-top:4px;}}
.games-area > .maze-hud {color:var(--text);border-color:var(--border);font-size:.9rem;padding:8px 2px 10px;}
.game-selector {grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
/* Monte a frase */
.sent-stage {margin:14px 0;padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);}
.sent-stage[hidden] {display:none;}
.sent-prompt {font-size:1.25rem;font-weight:700;text-align:center;margin:0 0 14px;}
.sent-answer {min-height:68px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:10px;border:2px dashed var(--accent);border-radius:12px;background:var(--surface-alt);}
.sent-empty {color:var(--text-muted);font-size:.9rem;}
.sent-bank {min-height:68px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:12px 4px;}
.sent-piece {min-height:46px;min-width:46px;padding:6px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:1.45rem;font-family:"KaiTi","STKaiti","Kaiti SC","Songti SC",serif;cursor:pointer;box-shadow:0 2px 0 var(--border);}
.sent-piece:hover:not(:disabled) {border-color:var(--accent);}
.sent-piece.ok {border-color:#2f8f4e;background:#2f8f4e22;}
.sent-hint p {margin:6px 0 0;text-align:center;color:var(--text-muted);}
.sent-acts {justify-content:center;}
.sent-editor {margin:18px 0;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);}
.sent-editor summary {cursor:pointer;font-weight:700;}
.sent-editor textarea {width:100%;min-height:200px;margin:8px 0;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--input-bg);color:var(--input-text);font:inherit;font-size:.95rem;}
@media(max-width:560px){.sent-piece {font-size:1.25rem;min-height:42px;}.sent-prompt {font-size:1.1rem;}}
@media(max-width:560px){.game-selector {grid-template-columns:1fr 1fr;}}
/* Labirinto: escolha de personagem, prévia do nível e histórico recolhível */
.maze-avatars {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 14px;}
.maze-avatars-label {font-weight:700;font-size:.92rem;margin-right:4px;}
.maze-avatar {display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 8px 6px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);cursor:pointer;font:inherit;}
.maze-avatar canvas {width:44px;height:44px;border-radius:10px;background:#1d3527;}
.maze-avatar small {font-size:.72rem;}
.maze-avatar[aria-pressed="true"] {border:2px solid var(--accent);background:var(--surface-alt);}
.maze-preview-tag {letter-spacing:.08em;color:#c9e4d6;font-size:.75rem;}
.maze-overlay .maze-preview-goal {font-size:clamp(1.8rem,5vw,3rem);color:#ffe6ae;font-family:"KaiTi","STKaiti","Kaiti SC",serif;}
.maze-preview-foes {font-size:.85rem!important;color:#f3c1b8;max-width:420px!important;}
details.maze-history {max-width:820px;margin:22px 0;border:1px solid var(--border);border-radius:12px;padding:8px 14px;background:var(--surface);}
details.maze-history>summary {cursor:pointer;font-weight:700;padding:6px 0;}
details.maze-history[open]>summary {margin-bottom:4px;}
.game-mode {min-width:0;max-width:100%;}
.game-mode select {min-width:0;text-overflow:ellipsis;}
@media(max-width:560px){.games-area .game-mode select,.game-mode select {width:0;flex:1 1 auto;}}
/* Estudo HSK · frases */
.hsk-sentences {display:flex;flex-direction:column;gap:6px;margin-top:10px;}
.hsk-sentence {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);}
.hsk-sentence.is-learned {background:color-mix(in srgb,#2f7a5a 10%,var(--surface));border-color:#2f7a5a66;}
.hsk-sentence-zh {font-family:"KaiTi","STKaiti","Kaiti SC",serif;font-size:1.3rem;line-height:1.4;overflow-wrap:anywhere;}
.hsk-sentence-acts {display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.hsk-sentence-acts .database-button {min-width:44px;}
.hsk-sentence-more {grid-column:1/-1;display:flex;flex-direction:column;gap:2px;padding-top:4px;border-top:1px dashed var(--border);}
.hsk-sentence-more[hidden] {display:none;}
.hsk-sentence-more .hsk-py {color:var(--accent);}
.hsk-sentence-more .hsk-pt {color:var(--text);}
.hsk-sentence-est {color:var(--text-muted);}
@media(max-width:560px){.hsk-sentence {grid-template-columns:1fr;}.hsk-sentence-acts {justify-content:flex-start;}}