/* Giao diện các trò chơi (dùng chung biến màu của index.html) */
[hidden]{display:none!important}
.center{text-align:center}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.row .btn{width:100%}
.hud{display:flex;justify-content:space-between;align-items:center;font-weight:800;margin-bottom:6px}
.gsec{margin-top:22px}
.gcard{display:block;width:100%}
.gcard:disabled{cursor:not-allowed}
.streak{background:#fff;border:2px solid var(--ink);border-radius:999px;padding:0 10px;font-weight:800;margin-right:4px;white-space:nowrap}
.top{flex-wrap:wrap}
.top>span{white-space:nowrap}
.end .btn{margin-top:10px}
.xpgain{font-size:1.5rem;font-weight:800;color:#0E8F6E;margin:6px 0}
.miss{text-align:left;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:10px 14px;margin:16px 0}
.miss ul,.miss ol{padding:0;list-style:none;margin:6px 0 0}
.miss li{padding:3px 0}
.miss h3{font-size:1.05rem}
.sent{font-size:1.6rem;line-height:1.3;margin:24px 0 12px}
.blank{display:inline-block;min-width:3.4em;border-bottom:4px solid var(--ink);color:transparent;user-select:none}
mark{background:var(--sun);color:var(--ink);padding:0 4px;border-radius:6px}
.kbd{display:inline-block;min-width:1.6em;border:2px solid currentColor;border-radius:6px;font-size:.7em;line-height:1.3;padding:0 4px;opacity:.55;margin-right:6px;text-align:center}
@media (hover:none){.kbd{display:none}}
.prog.low i{background:var(--coral)}
.combo{text-align:center;min-height:1.6em;font-weight:800;color:var(--coral)}

/* Thẻ ghi nhớ */
.fcard{min-height:280px;background:#fff;border:2px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--ink);
  padding:28px 16px;text-align:center;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:8px 0 16px}
.fcard>div{width:100%}
.fcard:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.fcard.flipped{background:#FFFBEA}
.fword{font-size:2.8rem;font-weight:800;line-height:1.1;margin:10px 0;overflow-wrap:anywhere}
.fword.sm{font-size:1.3rem;opacity:.6;margin:4px 0}
.fvi{font-size:2rem;font-weight:800;color:var(--coral);line-height:1.15}
.fex{margin-top:14px;font-size:1rem}
.bigplay{width:96px;height:96px;border-radius:50%;border:3px solid var(--ink);background:var(--sun);font-size:2.6rem;box-shadow:0 5px 0 var(--ink);cursor:pointer}
.bigplay:active{transform:translateY(5px);box-shadow:none}

/* Ô chữ, ô chọn */
.tile,.word{background:#fff;border:2px solid var(--ink);border-radius:12px;padding:8px 12px;font-weight:800;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.tile:active:not(:disabled),.word:active:not(:disabled){transform:translateY(3px);box-shadow:none}
.tile:disabled,.word:disabled{opacity:.3;cursor:default;box-shadow:none}
.tile:focus-visible,.word:focus-visible,.slot:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
.tile.sel{background:var(--sun)}
.tile.ok{background:var(--mint);opacity:.55;box-shadow:none}
.tile.bad{background:var(--coral);color:#fff}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.col{display:flex;flex-direction:column;gap:8px}
.col .tile{min-height:56px;overflow-wrap:anywhere;line-height:1.2}
.pattern{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:8px 0 14px;font-size:1.6rem;font-weight:800;min-height:2.2rem}
.pattern .ch{display:inline-block;min-width:1.1em;text-align:center;border-bottom:3px solid var(--ink)}
.pw,.sw{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:100%}
.slots,.answer{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:12px 0}
.answer{gap:8px}
.slot{width:clamp(28px,8.6vw,42px);height:50px;border:2px dashed var(--ink);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  font:800 1.5rem 'Baloo 2',system-ui,sans-serif;background:transparent;padding:0;color:var(--ink)}
.slot.full{border-style:solid;background:var(--sun);cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.slot.fixed{border:0;width:auto;min-width:14px}
.slots.good .slot.full,.answer.good{background:var(--mint)}
.slots.wrongfx .slot.full{background:var(--coral);color:#fff}
.answer{min-height:72px;border:2px dashed var(--ink);border-radius:14px;padding:10px;justify-content:flex-start;align-content:flex-start}
.answer.good{border-style:solid}
.answer.wrongfx{border-color:#C0213A}
.bank{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0}
.ltr{width:46px;height:52px;padding:0;font-size:1.4rem}
.word{font-size:1.05rem}
.tfb{font-size:1.3rem;padding:14px}

@media (prefers-reduced-motion:no-preference){
  .shake{animation:shake .35s}
  @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
  .fcard.flipped{animation:flip .25s}
  @keyframes flip{from{transform:rotateY(80deg)}to{transform:rotateY(0)}}
  .opt.ok,.tile.ok{animation:pop .25s}
  @keyframes pop{50%{transform:scale(1.04)}}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}