/* Classic games — shared board styles. Uses the site tokens from site.css. */

.g-board{
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr);
  gap:8px; padding:10px; margin:8px auto;
  background:#242a20; border-radius:12px;
  width:min(430px, 86vw); aspect-ratio:1/1;
}
.g-cell{ background:#2b3023; border-radius:8px; position:relative; display:grid; place-items:center; }
.g-tile{
  position:absolute; inset:0; border-radius:8px; display:grid; place-items:center;
  font-weight:800; font-size:clamp(17px,4.8vw,33px); letter-spacing:-1px;
  background:#3a4130; color:#dfe9c4;
  animation:gpop .13s ease-out;
}
@keyframes gpop{from{transform:scale(.86);opacity:.5}to{transform:scale(1);opacity:1}}
.g-tile.small{font-size:clamp(13px,3.6vw,24px)}
.v2{background:#3a4130;color:#cfdcaa}
.v4{background:#49532f;color:#e2eec0}
.v8{background:#61712f;color:#f2ffd0}
.v16{background:#7d9132;color:#f7ffdd}
.v32{background:#9cb43a;color:#161a10}
.v64{background:#b7d247;color:#161a10}
.v128{background:#cbea52;color:#161a10}
.v256{background:#d7fa63;color:#161a10}
.v512{background:#e6ff8f;color:#161a10}
.v1024{background:#efffb5;color:#161a10}
.v2048{background:#f7ffd9;color:#161a10;box-shadow:0 0 30px rgba(215,250,99,.45)}
.vbig{background:#fff;color:#161a10}

.g-actions{display:flex;gap:10px;justify-content:center;margin-top:14px}
.g-actions button{
  background:#2b3023;color:var(--fg);border:1px solid #464d38;border-radius:6px;
  padding:10px 18px;font-size:13px;
}
.g-actions button:hover{background:#3c442c}
.g-actions button.primary{background:var(--lime);color:#161a10;border-color:var(--lime);font-weight:700}
.g-actions button.primary:hover{background:#e5ff9c}
.g-pad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,52px);gap:8px;justify-content:center;margin-top:12px}
.g-pad button{background:#2b3023;color:var(--fg);border:1px solid #464d38;border-radius:8px;font-size:18px}
.g-pad button:hover{background:#3c442c}
.g-pad .up{grid-area:1/2}.g-pad .left{grid-area:2/1}.g-pad .down{grid-area:2/2}.g-pad .right{grid-area:2/3}

/* match-3 */
.m3-board{
  display:grid;grid-template-columns:repeat(8,1fr);gap:5px;padding:8px;
  background:#242a20;border-radius:12px;width:min(520px,88vw);margin:8px auto;
}
.m3-tile{
  aspect-ratio:1/1;border-radius:8px;display:grid;place-items:center;cursor:pointer;
  background:#2b3023;font-size:clamp(15px,4.3vw,28px);line-height:1;user-select:none;
  transition:transform .12s, background .12s, box-shadow .12s;
}
.m3-tile.sel{transform:scale(.9);box-shadow:inset 0 0 0 2px var(--lime);background:rgba(215,250,99,.16)}
.m3-tile.gone{animation:ggone .18s ease-in forwards}
@keyframes ggone{to{transform:scale(.2);opacity:0}}

/* sudoku */
.sd-board{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:#242a20;padding:7px;border-radius:12px;width:min(470px,88vw);margin:8px auto}
.sd-box{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#3d4432;border-radius:6px;overflow:hidden}
.sd-cell{
  aspect-ratio:1/1;display:grid;place-items:center;background:#22271c;cursor:pointer;
  font-size:clamp(15px,4.4vw,24px);font-weight:700;color:#cfdcaa;transition:background .12s;
}
.sd-cell.given{color:#f4f2e8}
.sd-cell.user{color:var(--lime)}
.sd-cell.hintv{color:#8be0a4}
.sd-cell.peer{background:#2a3120}
.sd-cell.same{background:rgba(215,250,99,.12)}
.sd-cell.sel{background:rgba(215,250,99,.28)}
.sd-cell.err{color:#ff7a6b}
.sd-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px;max-width:470px;margin-left:auto;margin-right:auto}
.sd-pad button{background:#2b3023;color:var(--fg);border:1px solid #464d38;border-radius:8px;height:50px;font-size:18px;font-weight:600}
.sd-pad button:hover{background:#3c442c}
.sd-pad button.wide{font-size:13px;font-weight:400;color:var(--muted)}

/* shared result overlay reuses .result from site.css */
.g-toast{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);
  background:#11120fe8;border:1px solid var(--line);color:var(--fg);
  padding:8px 14px;border-radius:8px;font-size:13px;opacity:0;transition:opacity .25s;pointer-events:none;
}
.g-toast.show{opacity:1}

@media(max-width:760px){
  .g-board{width:min(430px,92vw)}
  .m3-board{width:min(520px,94vw)}
  .sd-board{width:min(470px,94vw)}
}