/* ===== JOGOS — extensão do design system IKGA Brasil ===== */

/* Hub de jogos */
.games-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(23,20,15,.1); border:1px solid rgba(23,20,15,.1);}
.game-card{background:var(--white); padding:36px 30px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; transition:background .2s ease;}
.game-card:hover{background:var(--washi-2);}
.game-card .kanji-mini{position:absolute; top:6px; right:14px; font-family:var(--soft); font-style:italic; font-size:68px; opacity:.07; color:var(--ink); pointer-events:none; user-select:none;}
.game-card .idx{font-family:var(--mono); font-size:11px; color:var(--hanko); letter-spacing:.08em;}
.game-card h3{font-family:var(--display); font-size:19px; line-height:1.25;}
.game-card p{font-size:13.5px; color:var(--steel); line-height:1.6; flex:1;}
.game-card .best{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--tatami);}
.game-card .btn{align-self:flex-start; margin-top:4px;}

/* Área de jogo — moldura comum */
.game-wrap{background:var(--white); border:1px solid rgba(23,20,15,.1); border-radius:4px; padding:48px; position:relative; overflow:hidden;}
.game-wrap .kanji-bg{font-size:200px; opacity:.04; right:-20px; top:50%;}
.game-meta{display:flex; justify-content:center; gap:36px; margin-bottom:28px; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--steel); flex-wrap:wrap;}
.game-meta strong{color:var(--hanko); font-size:15px; letter-spacing:0; text-transform:none; font-family:var(--body); font-weight:600;}
.game-actions{display:flex; justify-content:center; gap:14px; margin-top:32px; flex-wrap:wrap;}
.game-msg{text-align:center; font-family:var(--soft); font-style:italic; font-size:17px; color:var(--ink-soft); margin-top:18px; min-height:26px;}

/* ===== Reflexo: Bloqueio e Golpe ===== */
.reflexo-stage{background:var(--ink); color:var(--washi); border-radius:4px; padding:64px 40px; text-align:center; position:relative; overflow:hidden; user-select:none;}
.reflexo-stage .kanji-bg{color:var(--washi); opacity:.06; font-size:220px;}
.reflexo-prompt{font-family:var(--display); font-size:clamp(38px,7vw,68px); letter-spacing:-.01em; position:relative;}
.reflexo-prompt.atacar{color:var(--hanko);}
.reflexo-prompt.defender{color:var(--tatami);}
.reflexo-sub{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--washi-2); margin-top:10px; opacity:.8;}
.reflexo-actions{display:flex; gap:18px; justify-content:center; margin-top:44px; flex-wrap:wrap;}
.reflexo-btn{flex:1 1 180px; max-width:220px; padding:22px 16px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:13px; border-radius:4px; cursor:pointer; border:none; transition:transform .12s ease, box-shadow .12s ease; box-shadow:3px 3px 0 rgba(0,0,0,.35);}
.reflexo-btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,.35);}
.reflexo-btn.b-atacar{background:var(--hanko); color:var(--white);}
.reflexo-btn.b-defender{background:var(--tatami); color:var(--white);}
.reflexo-btn:disabled{opacity:.4; cursor:default;}
.reflexo-flash{position:absolute; inset:0; pointer-events:none; opacity:0;}
.reflexo-flash.ok{background:rgba(75,90,69,.35); animation:flashOut .35s ease forwards;}
.reflexo-flash.bad{background:rgba(169,48,42,.35); animation:flashOut .35s ease forwards;}
@keyframes flashOut{0%{opacity:1;}100%{opacity:0;}}

/* ===== Quiz ===== */
.quiz-progress{height:4px; background:rgba(23,20,15,.1); border-radius:2px; margin-bottom:34px; overflow:hidden;}
.quiz-progress-bar{height:100%; background:var(--hanko); transition:width .3s ease; width:0%;}
.quiz-question{font-family:var(--display); font-size:clamp(19px,2.6vw,24px); margin-bottom:26px; line-height:1.35; text-align:center;}
.quiz-options{display:grid; gap:12px; max-width:520px; margin:0 auto;}
.quiz-option{text-align:left; padding:16px 20px; border:1px solid rgba(23,20,15,.18); border-radius:4px; background:var(--washi); font-family:var(--body); font-size:14.5px; color:var(--ink); cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .1s ease;}
.quiz-option:hover:not(:disabled){background:var(--washi-2); transform:translateX(2px);}
.quiz-option.correct{background:var(--tatami); color:var(--white); border-color:var(--tatami);}
.quiz-option.wrong{background:var(--hanko); color:var(--white); border-color:var(--hanko);}
.quiz-option:disabled{cursor:default;}
.quiz-result{text-align:center; padding:20px 0;}
.quiz-result .n{font-family:var(--display); font-size:56px; color:var(--hanko);}
.quiz-result .l{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--steel); margin-top:6px;}

/* ===== Memória ===== */
.mem-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:520px; margin:0 auto;}
.mem-card{aspect-ratio:1/1; cursor:pointer; perspective:700px;}
.mem-card-inner{width:100%; height:100%; position:relative; transform-style:preserve-3d; transition:transform .4s ease;}
.mem-card.flipped .mem-card-inner, .mem-card.matched .mem-card-inner{transform:rotateY(180deg);}
.mem-face{position:absolute; inset:0; backface-visibility:hidden; border-radius:6px; display:flex; align-items:center; justify-content:center; text-align:center; padding:6px;}
.mem-face.front{background:var(--ink); color:var(--obi); font-family:var(--soft); font-style:italic; font-size:26px; box-shadow:2px 2px 0 rgba(0,0,0,.15);}
.mem-face.back{background:var(--white); color:var(--ink); border:2px solid var(--hanko); transform:rotateY(180deg); font-family:var(--mono); font-size:11.5px; letter-spacing:.02em; line-height:1.3;}
.mem-card.matched .mem-face.back{border-color:var(--tatami); color:var(--tatami);}
@media(max-width:520px){.mem-grid{grid-template-columns:repeat(4,1fr); gap:8px;} .mem-face.back{font-size:9.5px;}}

/* ===== Sequência do Kata ===== */
.kata-nota{text-align:center; font-family:var(--soft); font-style:italic; font-size:13.5px; color:var(--steel); max-width:520px; margin:-8px auto 26px;}
.kata-lista{display:flex; flex-direction:column; gap:8px; max-width:480px; margin:0 auto;}
.kata-item{display:flex; align-items:center; gap:12px; padding:13px 16px; background:var(--washi); border:1px solid rgba(23,20,15,.15); border-radius:4px; font-family:var(--body); font-size:14px; transition:background .2s ease, border-color .2s ease;}
.kata-item .n{font-family:var(--mono); color:var(--hanko); font-size:12px; min-width:16px;}
.kata-item .txt{flex:1;}
.kata-item .txt b{font-family:var(--display); font-weight:600;}
.kata-item .mover{display:flex; gap:6px;}
.kata-item button{width:30px; height:30px; border:1px solid rgba(23,20,15,.2); background:var(--white); border-radius:4px; cursor:pointer; font-size:14px; line-height:1;}
.kata-item button:disabled{opacity:.3; cursor:default;}
.kata-item.correta{border-color:var(--tatami); background:rgba(75,90,69,.08);}
.kata-item.errada{border-color:var(--hanko); background:rgba(169,48,42,.06);}

/* ===== Caça-palavras ===== */
.cw-wrap{display:flex; gap:32px; flex-wrap:wrap; justify-content:center; align-items:flex-start;}
.cw-grid{display:grid; gap:2px; user-select:none;}
.cw-cell{width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; background:var(--washi); border-radius:3px; cursor:pointer; color:var(--ink); transition:background .1s ease, color .1s ease;}
.cw-cell.sel{background:var(--obi); color:var(--white);}
.cw-cell.found{background:var(--tatami); color:var(--white);}
.cw-lista{display:flex; flex-direction:column; gap:9px; min-width:170px;}
.cw-lista .titulo{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--hanko); margin-bottom:4px;}
.cw-lista .palavra{font-family:var(--mono); font-size:13px; letter-spacing:.03em; color:var(--steel);}
.cw-lista .palavra.achada{color:var(--tatami); text-decoration:line-through;}
@media(max-width:520px){.cw-cell{width:23px; height:23px; font-size:10.5px;}}

/* ===== Forca do Dojo ===== */
.forca-faixas{display:flex; gap:6px; justify-content:center; margin-bottom:26px;}
.forca-faixa{width:36px; height:14px; border-radius:2px; border:1px solid rgba(23,20,15,.25); opacity:1; transition:opacity .25s ease;}
.forca-faixa.queimada{opacity:.15;}
.forca-palavra{font-family:var(--mono); font-size:clamp(22px,5vw,32px); letter-spacing:.16em; text-align:center; margin-bottom:10px; color:var(--ink); word-break:break-all;}
.forca-dica{text-align:center; font-family:var(--soft); font-style:italic; color:var(--steel); margin-bottom:26px; font-size:14.5px;}
.forca-teclado{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:480px; margin:0 auto;}
.forca-tecla{width:33px; height:33px; border-radius:4px; border:1px solid rgba(23,20,15,.2); background:var(--white); font-family:var(--mono); font-size:13px; cursor:pointer;}
.forca-tecla.certa{background:var(--tatami); color:var(--white); border-color:var(--tatami);}
.forca-tecla.errada{background:var(--hanko); color:var(--white); border-color:var(--hanko);}
.forca-tecla:disabled{cursor:default; opacity:.55;}

/* ===== Faixa Relâmpago ===== */
.faixa-timer{font-family:var(--mono); font-size:13px; text-align:center; color:var(--steel); margin-bottom:22px; letter-spacing:.04em;}
.faixa-swatch{width:220px; height:52px; margin:0 auto 32px; border-radius:4px; box-shadow:3px 3px 0 rgba(0,0,0,.1);}
.faixa-opcoes{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:420px; margin:0 auto;}
.faixa-opcoes button{padding:16px; border:1px solid rgba(23,20,15,.18); border-radius:4px; background:var(--washi); font-family:var(--body); font-size:14px; cursor:pointer; transition:background .15s ease;}
.faixa-opcoes button:hover:not(:disabled){background:var(--washi-2);}
.faixa-opcoes button.certa{background:var(--tatami); color:var(--white); border-color:var(--tatami);}
.faixa-opcoes button.errada{background:var(--hanko); color:var(--white); border-color:var(--hanko);}
.faixa-opcoes button:disabled{cursor:default;}

/* ===== Quiz de Kanji (reaproveita .quiz-*) ===== */
.quiz-kanji-grande{font-size:64px; text-align:center; margin-bottom:28px; color:var(--ink); font-family:'Fraunces', serif;}

/* ===== Monte o Combo ===== */
.combo-nivel{text-align:center; font-family:var(--display); font-size:20px; margin-bottom:6px;}
.combo-status{text-align:center; font-family:var(--soft); font-style:italic; color:var(--steel); margin-bottom:24px; min-height:22px;}
.combo-tabuleiro{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:420px; margin:0 auto 8px;}
.combo-botao{aspect-ratio:1/1; border-radius:6px; border:none; cursor:pointer; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--white); display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; box-shadow:2px 2px 0 rgba(0,0,0,.2); transition:transform .1s ease, filter .15s ease; opacity:.85;}
.combo-botao:active{transform:translate(1px,1px);}
.combo-botao.ativo{opacity:1; filter:brightness(1.5); transform:scale(1.06);}
.combo-botao:disabled{cursor:default;}

/* ===== Adivinhe o Kata (ilustração esquemática) ===== */
.kataimg-stage{background:var(--ink); border-radius:6px; padding:22px; display:flex; justify-content:center; margin-bottom:10px;}
.kataimg-stage svg{width:170px; height:210px;}
.kataimg-nota{text-align:center; font-family:var(--soft); font-style:italic; font-size:12.5px; color:var(--steel); max-width:480px; margin:0 auto 26px;}

@media(max-width:860px){
  .games-grid{grid-template-columns:1fr;}
  .game-wrap{padding:28px 20px;}
  .reflexo-stage{padding:44px 20px;}
  .reflexo-actions{gap:12px;}
  .game-meta{gap:20px;}
  .cw-wrap{gap:20px;}
  .faixa-swatch{width:180px;}
  .faixa-opcoes{grid-template-columns:1fr;}
  .combo-tabuleiro{max-width:320px; gap:10px;}
  .tetris-area{gap:16px;}
}

/* ===== Tetris Karate ===== */
.tetris-area{display:flex; gap:28px; justify-content:center; align-items:flex-start; flex-wrap:wrap;}
.tetris-canvas-wrap{background:var(--washi); border:1px solid rgba(23,20,15,.15); border-radius:4px; padding:8px; box-shadow:2px 2px 0 rgba(0,0,0,.1); line-height:0;}
.tetris-canvas-wrap canvas{display:block; touch-action:none;}
.tetris-side{display:flex; flex-direction:column; gap:16px; min-width:140px;}
.tetris-proxima{background:var(--washi); border:1px solid rgba(23,20,15,.15); border-radius:4px; padding:10px; text-align:center;}
.tetris-proxima .titulo{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--hanko); margin-bottom:8px;}
.tetris-proxima canvas{display:block; margin:0 auto;}
.tetris-stats{font-family:var(--mono); font-size:12.5px; color:var(--steel); display:flex; flex-direction:column; gap:8px; background:var(--washi); border:1px solid rgba(23,20,15,.15); border-radius:4px; padding:14px;}
.tetris-stats strong{color:var(--ink); font-family:var(--body); font-size:16px; display:block;}
.tetris-controles{display:grid; grid-template-columns:repeat(3,48px); grid-auto-rows:48px; gap:8px; justify-content:center; margin-top:20px;}
.tetris-controles button{border:1px solid rgba(23,20,15,.2); background:var(--white); border-radius:4px; font-size:18px; cursor:pointer; box-shadow:2px 2px 0 rgba(0,0,0,.12);}
.tetris-controles button:active{transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(0,0,0,.12);}

/* ===== Quebra-cabeça de Kanji ===== */
.puzzle-canvas-wrap{display:flex; justify-content:center; margin-bottom:8px;}
.puzzle-canvas-wrap canvas{border-radius:4px; box-shadow:2px 2px 0 rgba(0,0,0,.12); cursor:pointer; touch-action:manipulation; width:100%; max-width:300px; height:auto; display:block;}