:root { --bg:#14161c; --panel:#1e222b; --fg:#e8eaf0; --accent:#5b8cff; --bad:#ff6b6b; --muted:#8b93a7; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
h1 { margin:0; font-size:1.3rem; }
main { max-width:520px; margin:0 auto; padding:0 16px 32px; }
button, select { background:var(--panel); color:var(--fg); border:1px solid #333a48; border-radius:8px; padding:8px 12px; font-size:1rem; cursor:pointer; }
button:hover { border-color:var(--accent); }

.menu { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.card { display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px 10px; }
.card .icon { font-size:2.4rem; }
.card small { color:var(--muted); }

.toolbar { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:8px; }
.status { text-align:center; min-height:2.9em; line-height:1.45; margin-bottom:8px; }   /* room for two lines: a longer message must not push the board down (phones) */
.soon { text-align:center; color:var(--muted); margin-top:60px; line-height:1.8; }

.info { display:flex; justify-content:space-between; color:var(--muted); margin-bottom:8px; min-height:1.5em; line-height:1.45; }

/* Numpuz */
.numpuz { display:grid; grid-template-columns:repeat(var(--n),1fr); gap:8px; padding:12px; border-radius:16px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, rgba(0,0,0,0) 1px 9px),
    repeating-linear-gradient(88deg, rgba(255,220,170,.06) 0 3px, rgba(0,0,0,0) 3px 14px),
    linear-gradient(160deg, #6b4423, #4a2d14);
  box-shadow: inset 0 0 0 3px #3a2210, inset 0 4px 14px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.5); }
.tile { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:800;
  color:#4a2a10; text-shadow:0 1px 0 rgba(255,235,200,.45); border-radius:10px; cursor:pointer; user-select:none;
  background:
    repeating-linear-gradient(92deg, rgba(90,50,15,.07) 0 2px, rgba(0,0,0,0) 2px 7px),
    linear-gradient(145deg, #e2b070, #bf8140);
  box-shadow: inset 0 2px 0 rgba(255,240,210,.55), inset 0 -3px 0 rgba(90,50,15,.35), 0 3px 0 #7a4a1e, 0 6px 8px rgba(0,0,0,.45);
  transition:transform .08s, box-shadow .08s; }
.tile:active { transform:translateY(2px); box-shadow: inset 0 2px 0 rgba(255,240,210,.55), inset 0 -3px 0 rgba(90,50,15,.35), 0 1px 0 #7a4a1e, 0 2px 4px rgba(0,0,0,.45); }
.tile.hint { outline:4px solid #ffd166; outline-offset:-4px; animation:pulse 0.8s infinite alternate; }
@keyframes pulse { to { filter:brightness(1.4); } }
.tile.empty { background:rgba(0,0,0,.28); box-shadow:inset 0 3px 8px rgba(0,0,0,.6); cursor:default; }
.tile.empty:active { transform:none; }

/* Sudoku */
.sudoku { display:grid; grid-template-columns:repeat(9,1fr); border:2px solid var(--muted); }
.cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  border:1px solid #333a48; cursor:pointer; color:var(--accent); user-select:none; }
.cell.given { color:var(--fg); font-weight:700; background:var(--panel); }
.cell.bad { color:var(--bad); }
.cell.peer { background:rgba(91,140,255,.13); }
.cell.given.peer { background:#262c3d; }
.cell.same { background:rgba(255,209,102,.30); }
.cell.given.same { background:rgba(255,209,102,.34); }
.cell.sel { background:#2b3a66; }
.cell.rb { border-right:2px solid var(--muted); }
.cell.bb { border-bottom:2px solid var(--muted); }
.pad { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:12px; }

/* Nudos */
canvas.knots { width:100%; aspect-ratio:1; background:var(--panel); border-radius:12px; touch-action:none; }
.hint-text { text-align:center; color:var(--muted); }
.levels { display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:10px; }
.lvl { display:flex; flex-direction:column; align-items:center; padding:10px 4px; }
.lvl b { font-size:1.4rem; }
.lvl span { height:1.2em; color:#7bd88f; font-weight:700; }
.lvl small { color:var(--muted); }
.lvl.done { border-color:#7bd88f; }

.footer { flex-wrap:wrap; margin-top:24px; align-items:center; }
.footer span { color:var(--muted); font-size:.9rem; }
.lvl.wip { border-color:var(--accent); }

/* Warband */
canvas.game { display:block; margin:0 auto; height:min(72vh, 640px); aspect-ratio:9/16; width:auto; max-width:100%;
  background:var(--panel); border-radius:12px; touch-action:none; }
.lvl.arcade { grid-column:1 / -1; width:100%; margin-top:12px; flex-direction:column; }
.lvl.arcade b { font-size:1.2rem; }

/* Legion */
canvas.legion { display:block; margin:0 auto; height:min(64vh, 520px); aspect-ratio:360/520; width:auto; max-width:100%;
  background:var(--panel); border-radius:12px; touch-action:manipulation; }
.notice { background:#2b3a66; border:1px solid var(--accent); border-radius:10px; padding:10px 12px; margin-bottom:10px; cursor:pointer; }
.lg-deploy { display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:8px; margin:10px 0; }
.lg-unit { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; }
.lg-unit small { color:var(--muted); }
.lg-unit:disabled, .lg-row button:disabled { opacity:.45; cursor:default; }
.lg-h { margin:18px 0 8px; } .lg-h small { color:var(--muted); font-weight:400; font-size:.75rem; }
.lg-shop { display:grid; gap:8px; }
.lg-row { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--panel); border-radius:10px; padding:8px 12px; }
.lg-row small { display:block; color:var(--muted); }
.lg-row .lv { color:var(--accent); font-size:.8rem; }

/* Legion sandbox */
.sb-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:10px 0; }
.sb-grid h4 { margin:0 0 6px; }
.sb-row { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.sb-row input { width:64px; background:var(--panel); color:var(--fg); border:1px solid #333a48; border-radius:8px; padding:6px; font-size:1rem; }
.sb-check { display:block; margin:6px 0; color:var(--muted); }
.sb-presets { flex-wrap:wrap; }

.chip-label { color:var(--muted); font-size:.9rem; align-self:center; }
.chip { padding:6px 10px; border-radius:999px; opacity:.6; }
.chip.on { opacity:1; border-color:var(--accent); background:#2b3a66; }
#lg-autotypes { flex-wrap:wrap; }
.lg-mix { flex:1 1 100%; width:100%; max-width:440px; margin:0 auto; font-size:13px; color:var(--muted); }
.lg-mix summary { cursor:pointer; padding:4px 2px; text-align:center; }
.mix-row { display:flex; align-items:center; gap:8px; padding:3px 4px; }
.mix-row.off { opacity:.45; }
.mix-name { flex:0 0 110px; color:var(--fg); }
.mix-row button { width:30px; padding:2px 0; }
.mix-row b { width:1.4em; text-align:center; color:var(--fg); }
.mix-bar { flex:1; height:8px; background:rgba(255,255,255,.08); border-radius:4px; overflow:hidden; }
.mix-bar i { display:block; height:100%; background:var(--accent); }
.mix-row small { width:2.8em; text-align:right; }
.mix-reset { display:block; margin:6px auto 0; font-size:.8rem; }
.lg-field { position:relative; height:min(64vh, 520px); aspect-ratio:360/520; width:auto; max-width:100%; margin:0 auto; }
.lg-field canvas.legion { width:100%; height:100%; aspect-ratio:auto; }
/* The Next stage / Start button floats over the battlefield so showing it never moves the toolbar. */
.lg-next { position:absolute; left:50%; top:40px; transform:translateX(-50%); z-index:2; background:#2f6f4f; border-color:#4fae7f; font-weight:700; box-shadow:0 2px 10px rgba(0,0,0,.5); white-space:nowrap; }
.lg-next[hidden] { display:none; }
.lg-over { position:absolute; left:50%; top:40px; transform:translateX(-50%); z-index:2; display:flex; gap:8px; }
.lg-over[hidden] { display:none; }
.lg-over .lg-next { position:static; transform:none; }
.sb-row select { max-width:150px; background:var(--panel); color:var(--fg); border:1px solid #333a48; border-radius:8px; padding:6px; font-size:.95rem; }
.sb-seed { display:flex; align-items:center; justify-content:center; gap:8px; margin:6px 0; color:var(--muted); }
.sb-seed input { width:140px; background:var(--panel); color:var(--fg); border:1px solid #333a48; border-radius:8px; padding:6px; font-size:1rem; }
.sb-info { text-align:center; color:var(--muted); font-size:.85rem; margin:0 0 8px; }

/* Legion replays */
.sb-save { align-items:center; }
.sb-save input { flex:1 1 160px; min-width:0; background:var(--panel); color:var(--fg); border:1px solid #333a48; border-radius:8px; padding:8px; font-size:.95rem; }
.rp-list { display:grid; gap:8px; }
.rp-item { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:10px 12px; }
.rp-item small { color:var(--muted); }
.rp-scrub { width:100%; margin:8px 0; accent-color:var(--accent); }
/* Legion live unit counts: your army left, the enemy right, fixed slots so nothing shifts */
.lg-counts { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; width:min(100%, 440px); margin:6px auto 0; font-size:12px; }
.lg-counts[hidden] { display:none; }
.lg-stats { width:min(100%, 440px); margin:6px auto 0; font-size:12px; color:var(--muted); }
.lg-stats[hidden] { display:none; }
.lg-stats summary { cursor:pointer; padding:4px 2px; }
.lg-stats table { width:100%; border-collapse:collapse; margin-top:4px; }
.lg-stats th, .lg-stats td { padding:3px 6px; text-align:right; border-bottom:1px solid rgba(255,255,255,.07); }
.lg-stats th:first-child, .lg-stats td:first-child { text-align:left; }
.lg-stats tr.tot td { color:var(--fg); font-weight:600; }
.lg-stats small { opacity:.7; }
.cn-side { display:flex; flex-wrap:wrap; align-content:center; align-items:center; gap:2px 8px; padding:4px 8px; border-radius:8px; box-sizing:border-box; min-width:0; }
.cn-me  { flex:1 1 0; background:rgba(91,140,255,.13); border:1px solid rgba(91,140,255,.35); }
.cn-foe { flex:1 1 0; justify-content:flex-end; background:rgba(255,107,107,.11); border:1px solid rgba(255,107,107,.32); }
.cn-title { flex:1 0 100%; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:1.3em; }
.cn-chip { display:inline-flex; align-items:center; gap:3px; }
.cn-chip i { font-style:normal; }
.cn-chip b { min-width:1.6em; text-align:left; font-variant-numeric:tabular-nums; }
.cn-chip.zero { opacity:.3; }
.cn-me.full { border-color:rgba(255,209,102,.6); box-shadow:0 0 0 1px rgba(255,209,102,.25) inset; }
.cn-me.full .cn-title { color:#ffd166; }

/* Phones: the option bars wrap onto several rows with smaller buttons, and the battlefield is a bit shorter so the deploy buttons stay in view. */
@media (max-width: 560px) {
  .toolbar { gap:5px; }
  .toolbar button { padding:6px 9px; font-size:.82rem; }
  .lg-deploy { gap:5px; margin:6px 0; }
  .lg-field { height:min(50vh, 520px); }
}

/* Sudoku number pad: numbers that fit the selected cell are bold, the others dimmed; a number with all nine placed disappears (keeping its place). */
.pad button.cand { font-weight:800; }
.pad button.dim { opacity:.3; font-weight:400; }
.pad button.done { visibility:hidden; }
.lives { letter-spacing:2px; }

/* Sudoku notes and hints */
.cell .nt { display:grid; grid-template-columns:repeat(3,1fr); width:100%; height:100%; font-size:.66rem; line-height:1; color:var(--muted); font-weight:400; }
.cell .nt i { font-style:normal; display:flex; align-items:center; justify-content:center; }
.cell .nt i.nh { color:#ffd166; font-weight:800; }
.cell .nt i.nx { color:#ff6b6b; font-weight:800; text-decoration:line-through; }
.cell.hint { box-shadow:inset 0 0 0 2px #ffd166; }
.cell.htarget { box-shadow:inset 0 0 0 3px #4fae7f; }
#su-notes.on { background:#2b3a66; border-color:var(--accent); }
.su-hint { background:var(--panel); border:1px solid #ffd166; border-radius:10px; padding:10px 12px; margin:8px 0; font-size:.92rem; }
.su-hint[hidden] { display:none; }
.hint-tech { font-weight:700; color:#ffd166; margin-bottom:4px; }
.hint-text { color:var(--fg); line-height:1.4; }
.su-hint .toolbar { margin:8px 0 0; }
@media (max-width: 560px) { .cell .nt { font-size:.5rem; } }

/* Legion option bar: buttons grouped by what they do */
.lg-bar { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; margin:8px 0; }
.lg-group { background:rgba(255,255,255,.03); border:1px solid #2a3142; border-radius:10px; padding:6px 8px 8px; }
.lg-gl { display:block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.lg-gl small { text-transform:none; letter-spacing:0; opacity:.7; margin-left:6px; }
.lg-gb { display:flex; flex-wrap:wrap; gap:5px; }
.lg-gb button { padding:6px 10px; font-size:.86rem; flex:1 1 auto; }
.lg-gb button[hidden] { display:none; }
@media (max-width: 560px) { .lg-bar { grid-template-columns:1fr 1fr; gap:6px; } .lg-gb button { padding:6px 8px; font-size:.8rem; } }

/* Sudoku guide tab */
.su-tabs { display:flex; gap:6px; justify-content:center; margin-bottom:10px; }
.su-tabs button.on { background:#2b3a66; border-color:var(--accent); }
#su-guide[hidden], #su-play[hidden] { display:none; }
.sg-intro { color:var(--muted); font-size:.9rem; line-height:1.45; margin:0 0 10px; }
.sg-key { display:block; margin-top:4px; }
.sg-key .k1 { color:#ffd166; } .sg-key .k2 { color:#ffd166; } .sg-key .k3 { color:#ff6b6b; text-decoration:line-through; } .sg-key .k4 { color:#4fae7f; }
.sg-item { background:var(--panel); border:1px solid #2a3142; border-radius:10px; margin:8px 0; padding:0 12px; }
.sg-item summary { cursor:pointer; padding:10px 0; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sg-item p { color:var(--fg); line-height:1.45; font-size:.92rem; margin:6px 0; }
.sg-item p.sg-ex { color:var(--muted); margin-bottom:12px; }
.sg-level { font-size:.72rem; padding:2px 8px; border-radius:999px; border:1px solid #3a4258; color:var(--muted); }
.sg-level.sg-easy { color:#7bd88f; border-color:#3f7a52; } .sg-level.sg-medium { color:#ffd166; border-color:#8a7334; }
.sg-level.sg-hard { color:#ffa94d; border-color:#8a5a2a; } .sg-level.sg-expert { color:#ff6b6b; border-color:#8a3a3a; }
.board.mini { max-width:380px; margin:8px auto; pointer-events:none; }
.board.mini .cell { font-size:1rem; }
.board.mini .cell.given { font-weight:600; }

/* Legion: player-chosen battlefield size */
/* (it may be wider than the 520 px page column: it is centred on the window instead, up to the window's width) */
.lg-field.sized { width:min(var(--lg-w), calc(100vw - 32px)); max-width:none; height:auto; left:50%; transform:translateX(-50%); }
.lg-sizebox { display:flex; align-items:center; gap:6px; flex:1 1 100%; color:var(--muted); font-size:.85rem; }
.lg-sizebox input { flex:1; accent-color:var(--accent); }

/* Legion: the speed button floats over the battlefield (always in reach); the counts panel has a fixed height so nothing below it moves */
.lg-speedfab { position:absolute; bottom:50px; right:8px; z-index:3; min-width:54px; padding:6px 12px; font-weight:700; font-size:.95rem; border-radius:999px;
  background:rgba(20,23,31,.72); border-color:rgba(255,255,255,.22); backdrop-filter:blur(3px); }
.lg-speedfab:active { transform:scale(.95); }

/* Legion mode menu: while it is open only the menu (and the welcome notice) is shown */
.lg-menu-on > *:not(#lg-menu):not(#lg-notice) { display:none !important; }
.lg-menu[hidden], #lg-levels[hidden], #lg-menu-main[hidden] { display:none; }
.lg-mh { text-align:center; margin:14px 0 10px; }
.mode-card, .lv-card { display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%; text-align:left; padding:14px 16px; margin:10px 0; border-radius:12px; background:var(--panel); border:1px solid #2f3748; }
.mode-card b, .lv-card b { font-size:1.1rem; }
.mode-card span, .lv-card span { color:var(--accent); font-size:.9rem; }
.mode-card small, .lv-card small { color:var(--muted); font-size:.82rem; line-height:1.35; }
.mode-card:hover, .lv-card:hover:not([disabled]) { border-color:var(--accent); }
.mode-link { display:block; text-align:center; color:var(--muted); font-size:.85rem; margin:14px 0; text-decoration:none; }
.mode-link:hover { color:var(--fg); }
.lv-card.locked { opacity:.45; cursor:not-allowed; }
.lv-card.done { border-color:#3f7a52; }
.lv-more { text-align:center; color:var(--muted); font-size:.85rem; margin:14px 0; }
#lv-back { margin-top:6px; }

/* Sudoku levels: category tabs and a grid of 100 numbered buttons */
.su-tiers { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:6px 0 12px; }
.su-tiers button { display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 10px; min-width:76px; }
.su-tiers button small { color:var(--muted); font-size:.72rem; }
.su-tiers button.on { background:#2b3a66; border-color:var(--accent); }
.su-lvgrid { display:grid; grid-template-columns:repeat(10, 1fr); gap:5px; max-width:560px; margin:0 auto; }
.su-lvgrid .lv { position:relative; padding:8px 0; font-size:.85rem; border-radius:8px; }
.su-lvgrid .lv i { position:absolute; top:1px; right:3px; font-style:normal; font-size:.62rem; color:#7bd88f; }
.su-lvgrid .lv.done { background:#1f3b2c; border-color:#3f7a52; }
.su-lvgrid .lv.next { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.su-lvgrid .lv.cur { outline:2px solid #ffd166; }
.su-level { text-align:center; color:var(--accent); font-size:.9rem; margin:2px 0 4px; }
.su-after { justify-content:center; margin:6px 0; }
@media (max-width:480px) { .su-lvgrid { grid-template-columns:repeat(5, 1fr); } .su-lvgrid .lv { padding:11px 0; font-size:.95rem; } }
.su-after[hidden], .su-level[hidden], #su-levels[hidden], #su-play[hidden] { display:none; }
.su-lvgrid .lv.locked { opacity:.4; cursor:not-allowed; }
.su-lvgrid .lv.locked i { color:var(--muted); }
.su-tiers button.locked { opacity:.45; cursor:not-allowed; }
.su-cont { text-align:center; margin:4px 0 10px; }
.su-cont button { background:#2f6f4f; border-color:#4fae7f; font-weight:700; }

/* Main menu sections */
.menu-h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:18px 0 10px; font-size:1.15rem; }
.menu-h small { color:var(--muted); font-size:.8rem; font-weight:400; }
.menu-h:first-child { margin-top:4px; }

/* 2048 */
.g-info { display:flex; justify-content:center; gap:12px; margin-bottom:8px; }
.g-info > div { background:var(--panel); border-radius:8px; padding:6px 18px; text-align:center; min-width:96px; }
.g-info small { display:block; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.g-info b { font-size:1.3rem; }
.g2048 { position:relative; aspect-ratio:1; background:#2a2f3c; border-radius:12px; padding:10px; touch-action:none; user-select:none; max-width:480px; margin:0 auto; }
.g2048 .g-bg { position:absolute; inset:10px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.g2048 .g-bg i { background:rgba(255,255,255,.06); border-radius:8px; }
.g2048 .g-layer { position:absolute; inset:10px; }
.g-tile { position:absolute; width:calc((100% - 30px) / 4); height:calc((100% - 30px) / 4); display:flex; align-items:center; justify-content:center; border-radius:8px; font-weight:800; font-size:clamp(1.4rem, 7vw, 2.3rem);
  left:calc(var(--c) * ((100% - 30px) / 4 + 10px)); top:calc(var(--r) * ((100% - 30px) / 4 + 10px)); transition:left .12s ease, top .12s ease; color:#f9f6f2; background:#3c3a32; }
.g-tile.sm { font-size:clamp(1.1rem, 5.5vw, 1.8rem); }
.g-tile.new { animation:g-new .18s ease .1s backwards; }
.g-tile.pop { animation:g-pop .16s ease; }
.g-tile.dead { z-index:0; }
@keyframes g-new { from { transform:scale(0); } to { transform:scale(1); } }
@keyframes g-pop { 50% { transform:scale(1.18); } }
.g-tile.v2 { background:#eee4da; color:#776e65; } .g-tile.v4 { background:#ede0c8; color:#776e65; }
.g-tile.v8 { background:#f2b179; } .g-tile.v16 { background:#f59563; } .g-tile.v32 { background:#f67c5f; } .g-tile.v64 { background:#f65e3b; }
.g-tile.v128 { background:#edcf72; } .g-tile.v256 { background:#edcc61; } .g-tile.v512 { background:#edc850; }
.g-tile.v1024 { background:#edc53f; } .g-tile.v2048 { background:#edc22e; box-shadow:0 0 18px 4px rgba(237,194,46,.6); }
.g-tile.v4096, .g-tile.vbig { background:#3c3a32; box-shadow:0 0 18px 4px rgba(120,160,255,.5); }
.g-help { text-align:center; color:var(--muted); font-size:.85rem; }

/* Lights Out */
.lightsout { display:grid; grid-template-columns:repeat(var(--n),1fr); gap:8px; padding:12px; border-radius:14px; background:#1a1d27; max-width:480px; margin:0 auto; }
.lo { aspect-ratio:1; border-radius:10px; cursor:pointer; background:#2a2f3c; box-shadow:inset 0 2px 6px rgba(0,0,0,.5); transition:background .12s, box-shadow .12s; user-select:none; }
.lo.on { background:radial-gradient(circle at 35% 30%, #fff6b0, #ffd23f 55%, #e0a400); box-shadow:0 0 14px 2px rgba(255,210,63,.55), inset 0 -3px 6px rgba(160,100,0,.5); }
.lo.hint { outline:4px solid #6ad5ff; outline-offset:-4px; animation:pulse 0.8s infinite alternate; }
.lvl.locked { opacity:.4; cursor:not-allowed; }

/* Mental math quiz */
.mq-card { text-align: center; margin: 14px 0 10px; }
.mq-q { font-size: clamp(2.4rem, 12vw, 4.2rem); font-weight: 700; font-variant-numeric: tabular-nums; }
.mq-p { font-size: 1.6rem; opacity: .7; }
.mq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; margin: 0 auto; }
.mq-opt { font-size: 1.6rem; padding: 18px 8px; position: relative; font-variant-numeric: tabular-nums; }
.mq-opt kbd { position: absolute; left: 8px; top: 4px; font-size: .65rem; opacity: .5; }
.mq-opt.right { background: #2e9e4f; color: #fff; }
.mq-opt.wrong { background: #c0392b; color: #fff; }

/* Chess */
.ch-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: min(100%, 480px); aspect-ratio: 1; margin: 8px auto; border: 2px solid #444; user-select: none; touch-action: manipulation; }
.ch-board .sq { aspect-ratio: 1; min-width: 0; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: min(9vw, 46px); line-height: 1; }
.ch-board .lt { background: #eed9b6; } .ch-board .dk { background: #b58863; }
.ch-board .sq.last { box-shadow: inset 0 0 0 100px rgba(255, 220, 0, .35); }
.ch-board .sq.sel { box-shadow: inset 0 0 0 100px rgba(80, 160, 255, .5); }
.ch-board .sq.chk { box-shadow: inset 0 0 0 100px rgba(230, 40, 40, .55); }
.ch-board .sq.tgt::after { content: ''; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(0, 0, 0, .28); }
.ch-board .sq.cap::after { content: ''; position: absolute; inset: 4%; border-radius: 50%; border: 4px solid rgba(0, 0, 0, .3); }
.ch-board .pc { width: 92%; height: 92%; pointer-events: none; }
.ch-board i { position: absolute; font-size: .6rem; font-style: normal; opacity: .6; color: #222; }
.ch-board .rk { left: 2px; top: 1px; } .ch-board .fl { right: 3px; bottom: 1px; }
.ch-promo { text-align: center; min-height: 2rem; }
.ch-pp { margin: 0 4px; padding: 2px; width: 52px; height: 52px; } .ch-pp .pc { width: 100%; height: 100%; }
.warn { background: #5a3b00; border: 1px solid #c98a00; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }

/* Guiñote */
.gn-score { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .85rem; margin: 6px 0; }
.gn-trump { font-size: .85rem; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.gn-trump .gn-card { width: 34px; }
.gn-wrap { position: relative; width: min(100%, 520px); margin: 0 auto; --cw: clamp(44px, 12vw, 70px); }
.gn-table { position: relative; width: 100%; aspect-ratio: 1 / .9; background: radial-gradient(circle at 50% 50%, #23704a, #174d33); border-radius: 18px; border: 2px solid #0e3322; }
.gn-seat { position: absolute; text-align: center; font-size: .75rem; opacity: .9; }
.gn-seat.s2 { top: 3%; left: 50%; transform: translateX(-50%); } .gn-seat.s1 { right: 2%; top: 50%; transform: translateY(-50%); } .gn-seat.s3 { left: 2%; top: 50%; transform: translateY(-50%); }
.gn-seat.turn span { color: #ffd84d; font-weight: 700; }
.gn-backs { display: flex; justify-content: center; margin-top: 2px; } .gn-seat.s1 .gn-backs, .gn-seat.s3 .gn-backs { flex-direction: column; align-items: center; }
.gn-back { display: block; width: 18px; height: 26px; border-radius: 3px; background: #7a1f2b; border: 1px solid #e8d9b0; margin: 0 -4px; } .gn-seat.s1 .gn-back, .gn-seat.s3 .gn-back { margin: -10px 0; }
.gn-play { position: absolute; width: var(--cw); transition: transform .15s; }
.gn-play.s0 { left: 50%; top: 52%; transform: translateX(-50%); } .gn-play.s2 { left: 50%; top: 14%; transform: translateX(-50%); }
.gn-play.s1 { left: 58%; top: 33%; } .gn-play.s3 { left: 30%; top: 33%; }
.gn-play.win .gn-card { outline: 3px solid #ffd84d; border-radius: 6px; }
.gn-card { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.gn-won { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); background: rgba(0, 0, 0, .55); padding: 4px 10px; border-radius: 12px; font-size: .8rem; white-space: nowrap; }
.gn-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; background: rgba(10, 20, 15, .82); border-radius: 18px; line-height: 1.5; }
.gn-over[hidden] { display: none; }
.gn-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 6px; margin: 6px 0; }
.gn-hand { display: flex; justify-content: center; gap: 4px; margin: 8px 0; }
.gn-hc { width: clamp(46px, 14vw, 78px); padding: 0; background: none; border: 0; cursor: pointer; transition: transform .12s; }
.gn-hc:not(:disabled):hover { transform: translateY(-8px); }
.gn-hc.dim { opacity: .45; } .gn-hc:disabled { cursor: default; }
.gn-seat span { display: block; position: relative; z-index: 2; margin-bottom: 14px; }
.gn-seat.s2 span { margin-bottom: 2px; }

.gn-piles { display: flex; gap: 8px; justify-content: space-between; margin: 6px auto; width: min(100%, 520px); }
.gn-pile { flex: 1; display: flex; align-items: center; gap: 8px; font-size: .8rem; padding: 4px 8px; }
.gn-pile.on { outline: 2px solid #ffd84d; }
.gn-stack { display: inline-flex; min-width: 22px; } .gn-stack .gn-back { margin: 0 -10px 0 0; width: 14px; height: 20px; }
.gn-peek { position: absolute; inset: 8% 4%; background: rgba(8, 24, 16, .93); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: .85rem; z-index: 3; }
.gn-peekrow { display: flex; gap: 6px; } .gn-peekrow > div { width: calc(var(--cw) * .9); } .gn-peekrow small { display: block; font-size: .65rem; opacity: .8; }

/* Chess tabs, levels, tournament */
.ch-tabs { display: flex; gap: 6px; justify-content: center; margin: 4px 0 10px; }
.ch-tabs button.on { background: #3a5fcd; color: #fff; }
.ch-panel[hidden] { display: none; }
.ch-lv { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; max-width: 560px; margin: 0 auto 8px; }
.ch-l { position: relative; text-align: left; padding: 8px 10px; display: flex; flex-direction: column; font-size: .85rem; }
.ch-l small { opacity: .6; } .ch-l.on { outline: 2px solid #3a5fcd; } .ch-l.locked { opacity: .45; }
.ch-l .ck { position: absolute; right: 8px; top: 6px; color: #5fd16f; font-weight: 700; }
.ch-board .sq.pre { box-shadow: inset 0 0 0 100px rgba(40, 90, 220, .45); }
.ch-board .sq.hint { box-shadow: inset 0 0 0 100px rgba(60, 200, 90, .5); }
.ch-acts { justify-content: center; }
.tn-banner { text-align: center; margin: 6px 0; }
.tn-bracket { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; }
.tn-r h4 { margin: 0 0 4px; font-size: .85rem; opacity: .8; }
.tn-m { font-size: .78rem; padding: 3px 6px; border: 1px solid #2c3140; border-radius: 6px; margin-bottom: 4px; } .tn-m.me { border-color: #3a5fcd; }
.tn-m .w { color: #5fd16f; font-weight: 600; } .tn-m em { opacity: .5; font-style: normal; }

/* Nim */
.nim-board { text-align: center; margin: 10px auto; max-width: 560px; }
.nim-row { display: flex; justify-content: center; align-items: flex-end; gap: 22px; margin: 12px 0; }
.nim-blk { display: flex; gap: 6px; }
.nim-classic .nim-row { gap: 0; } .nim-classic .nim-blk { gap: 8px; }
.nim-board .st { display: block; cursor: pointer; transition: transform .1s, opacity .2s; }
.nim-classic .st { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9fb4ff, #3a5fcd); }
.nim-sticks .st { width: 12px; height: 48px; border-radius: 4px; background: linear-gradient(90deg, #d9b26a, #a8782c); }
.nim-board .st:hover { transform: translateY(-3px); }
.nim-board .st.sel { outline: 3px solid #ffd84d; outline-offset: 2px; }
.nim-board .st.bot { outline: 3px solid #ff6b6b; outline-offset: 2px; }
.nim-log { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: .8rem; opacity: .75; margin-top: 8px; }
.nim-total { font-size: 3.4rem; font-weight: 700; } .nim-total small { font-size: 1.2rem; opacity: .6; }
.nim-bar { height: 10px; background: #2a2f3d; border-radius: 6px; overflow: hidden; margin: 6px auto 12px; max-width: 420px; } .nim-bar i { display: block; height: 100%; background: #3a5fcd; transition: width .3s; }
.nim-nums { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .nim-nums button { min-width: 52px; font-size: 1.1rem; }
.nim-take[hidden] { display: none; }

/* Chess feedback */
.ch-boardwrap { position: relative; width: min(100%, 480px); margin: 0 auto; }
.ch-boardwrap .ch-board { width: 100%; margin: 8px 0; }
.ch-badge { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 4.6rem; color: #fff; opacity: 0; pointer-events: none; z-index: 5; }
.ch-boardwrap.ok .ch-badge { background: rgba(46, 158, 79, .94); animation: ch-pop 1.1s ease forwards; }
.ch-boardwrap.bad .ch-badge { background: rgba(200, 55, 45, .94); animation: ch-pop 1.1s ease forwards; }
.ch-boardwrap.ok .ch-board { animation: ch-ring-ok 1.1s ease; }
.ch-boardwrap.bad .ch-board { animation: ch-ring-bad 1.1s ease, ch-shake .4s; }
@keyframes ch-pop { 0% { opacity: 0; transform: scale(.5); } 18% { opacity: 1; transform: scale(1.12); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes ch-ring-ok { 0%, 60% { box-shadow: 0 0 0 5px #2e9e4f, 0 0 28px 6px #2e9e4f; } 100% { box-shadow: none; } }
@keyframes ch-ring-bad { 0%, 60% { box-shadow: 0 0 0 5px #c8372d, 0 0 28px 6px #c8372d; } 100% { box-shadow: none; } }
@keyframes ch-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
.ch-bd { position: relative; }
.ch-badge { line-height: 1; padding-bottom: .06em; }
.nim-clear[hidden] { display: none; }
.nim-board { touch-action: manipulation; }
/* Nim: keep the board height fixed so the buttons below never move */
.nim-sticks .nim-row { min-height: 48px; } .nim-classic .nim-row { min-height: 30px; }
.nim-log { min-height: 3.2em; align-content: flex-start; }
.nim-board { min-height: 0; }
.lightsout.big { gap: 4px; padding: 8px; } .lightsout.big .lo { border-radius: 6px; }
header #reload { margin-left: auto; } header #back { margin-left: 8px; }
.ch-board { touch-action: none; }
.ch-ghost { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -55%) scale(1.15); filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
#title { cursor: pointer; user-select: none; }
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; } #crumb { color: var(--muted); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Survivors */
.sv-wrap { position: relative; width: 100%; max-width: 900px; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #1b2a1f; }
.sv-canvas { display: block; touch-action: none; user-select: none; width: 100%; }
.sv-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; text-align: center; background: rgba(8, 14, 10, .82); }
.sv-overlay[hidden] { display: none; }
.sv-overlay h3 { margin: 0; font-size: 1.4rem; } .sv-overlay p { margin: 0; max-width: 460px; } .sv-small { opacity: .7; font-size: .85rem; }
.sv-overlay button { font-size: 1.05rem; padding: 10px 22px; }
.sv-choices { display: flex; flex-direction: column; gap: 8px; width: min(100%, 420px); }
.sv-ch { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; text-align: left; padding: 8px 12px !important; font-size: 1rem !important; }
.sv-ch .sv-ic { grid-row: 1 / 3; font-size: 1.9rem; align-self: center; text-align: center; }
.sv-ch small { color: var(--muted); }

/* Survivors home */
.sv-tabs { margin-bottom: 8px; } .sv-goldbar { text-align: center; font-size: 1.1rem; margin: 4px 0 10px; } .sv-note { color: #ff9b9b; font-size: .85rem; margin-left: 8px; }
.sv-hbody { max-width: 640px; margin: 0 auto; } .sv-hbody h4 { margin: 12px 0 6px; }
.sv-center { text-align: center; margin: 14px 0; } .sv-big { font-size: 1.2rem; padding: 12px 34px; background: #2f6f4f; border-color: #4fae7f; font-weight: 700; }
.sv-weapons { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sv-wcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px !important; text-align: center; } .sv-wcard.on { outline: 2px solid #ffd166; background: #2b3a66; } .sv-wcard.locked { opacity: .7; }
.sv-wcard .sv-ic { font-size: 1.8rem; } .sv-wcard small { color: var(--muted); font-size: .72rem; }
.sv-ups { display: flex; flex-direction: column; gap: 6px; } .sv-up { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; background: var(--panel); border-radius: 10px; padding: 8px 12px; }
.sv-up .sv-ic { font-size: 1.6rem; text-align: center; } .sv-up small { color: var(--muted); } .sv-up button { min-width: 82px; }
.sv-pips { display: flex; gap: 4px; margin-top: 4px; } .sv-pips i { width: 14px; height: 6px; border-radius: 3px; background: #2a2f3c; } .sv-pips i.on { background: #ffd166; }
.sv-stats { width: 100%; border-collapse: collapse; } .sv-stats td { padding: 8px 6px; border-bottom: 1px solid #262b38; } .sv-stats td:last-child { text-align: right; }
.sv-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .sv-gold-line { font-size: 1.2rem; color: #ffd166; }
.sv-game[hidden], .sv-home[hidden] { display: none; }

/* Snake */
.sn-wrap { width: 100%; max-width: 520px; margin: 0 auto; } .sn-canvas { display: block; margin: 0 auto; touch-action: none; border-radius: 10px; user-select: none; }
.sn-pad { display: none; flex-direction: column; align-items: center; gap: 6px; margin: 10px 0; } .sn-pad div { display: flex; gap: 6px; } .sn-pad button { width: 62px; height: 52px; font-size: 1.3rem; }
@media (pointer: coarse) { .sn-pad { display: flex; } }
.sv-unlock { color: #9be7ff; max-width: 440px; }
.sv-newitem { outline: 2px solid #ffd166; background: #3a3320 !important; } .sv-new { color: #ffd166; font-size: .8rem; margin-left: 6px; }

/* AI lab */
.al-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin: 6px 0 10px; font-size: .9rem; }
.al-view { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: flex-start; margin-bottom: 10px; } .al-vcol { text-align: center; max-width: 100%; } .al-vcol small { display: block; color: var(--muted); margin-top: 4px; }
.al-view canvas, #al-chart { display: block; margin: 0 auto; border-radius: 8px; max-width: 100%; }
.al-set { max-width: 640px; margin: 0 auto 8px; } .al-set summary { cursor: pointer; text-align: center; color: var(--muted); }
.al-legend { display: block; text-align: center; margin: 4px 0 8px; } .al-legend span { margin: 0 6px; } .al-saved { text-align: center; margin-top: 4px; }
.sv-overlay.sv-scroll { justify-content: flex-start; overflow-y: auto; }
.sv-pbox { width: min(100%, 460px); text-align: left; } .sv-pbox h4 { margin: 10px 0 4px; }
.sv-pi { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; background: rgba(255,255,255,.05); border-radius: 8px; padding: 6px 10px; margin-bottom: 5px; }
.sv-pi .sv-ic { font-size: 1.6rem; text-align: center; } .sv-pi small { display: block; color: var(--muted); } .sv-pi .sv-next { color: #9be7ff; } .sv-lv { color: #ffd166; font-size: .85rem; margin-left: 4px; }
.al-tabs { margin: 4px 0 8px; } .al-stage { max-width: 960px; margin: 0 auto; } .al-swarm { text-align: center; } .al-swarm canvas { display: block; margin: 0 auto; border-radius: 8px; max-width: 100%; }
.al-hctl { margin-top: 8px; } .al-hctl .toolbar { align-items: center; } #al-hs { width: min(320px, 60vw); } .al-hlabel { color: var(--muted); font-size: .9rem; margin-bottom: 4px; } .al-note { display: block; color: var(--muted); margin-top: 6px; }
.al-live[hidden], .al-swarm[hidden], .al-hctl[hidden] { display: none; }
.sv-dev { max-width: 640px; margin: 18px auto 0; opacity: .8; } .sv-dev summary { cursor: pointer; text-align: center; color: var(--muted); font-size: .85rem; } .sv-dev .sv-btns { margin-top: 8px; }
.sv-vol { display: inline-flex; align-items: center; gap: 6px; } .sv-vol input { width: 90px; }
.sn-wrap { position: relative; } .sn-overlay { position: absolute; inset: 0; margin: 0 auto; max-width: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(8, 12, 20, .78); border-radius: 10px; }
.sn-overlay[hidden] { display: none; } .sn-overlay h3 { margin: 0; font-size: 1.5rem; } .sn-ob { display: flex; gap: 8px; }

/* Guiñote history and replay */
.gn-hist { max-width: 560px; margin: 12px auto; padding: 10px; background: var(--panel); border-radius: 12px; } .gn-hh { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .gn-hh small { color: var(--muted); }
.gn-hlist { display: flex; flex-direction: column; gap: 5px; } .gn-hlist button { text-align: left; font-size: .85rem; }
.gn-rv { display: flex; flex-direction: column; gap: 4px; } .gn-rseat { background: rgba(255,255,255,.04); border-radius: 8px; padding: 4px 8px; } .gn-rseat.cur { outline: 1px solid #ffd84d; }
.gn-rcards { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; } .gn-mini { width: 34px; border-radius: 3px; display: block; } .gn-mc.next .gn-mini { outline: 2px solid #ff6b6b; } .gn-mc.legal .gn-mini { box-shadow: 0 0 0 2px #4fd38a; }
.gn-rtrick, .gn-rnext { margin: 8px 0; font-size: .85rem; } .gn-rtrick span { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px; } .gn-rnext .ok { color: #5fd16f; } .gn-rnext .bad { color: #ff6b6b; font-weight: 700; }
.gn-rctl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; } .gn-seedinfo { color: var(--muted); user-select: all; }

.al-guide { margin: 6px 0 2px; padding-left: 18px; font-size: 13px; color: var(--muted, #8b93a7); line-height: 1.5; }
.al-guide b { color: var(--text, #e6e9f2); }

/* Gate Gunner */
.gr-wrap { position: relative; width: 100%; max-width: 430px; margin: 0 auto; } .gr-canvas { display: block; margin: 0 auto; touch-action: none; border-radius: 12px; user-select: none; background: #0e1118; }
.gr-ov { position: absolute; inset: 0; margin: 0 auto; max-width: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; text-align: center; background: rgba(8, 12, 20, .78); border-radius: 12px; }
.gr-ov[hidden] { display: none; } .gr-ov h3 { margin: 0; font-size: 1.5rem; } .gr-ov p { margin: 0; color: var(--muted, #aab3c5); font-size: .92rem; } .gr-ob { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.beta-tag { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: #d4a017; color: #1b1608; font-size: .62rem; font-weight: 800; letter-spacing: .06em; }

/* versión pública: lo que necesita el servidor local o es de desarrollo */
#lg-replays, .sb-save, .mode-link, .sv-dev { display: none !important; }
.footer a { color: inherit; opacity: .8; margin-left: 10px; }
.lg-speedbuy { bottom: 92px; font-size: .8rem; opacity: .92; } .lg-speedbuy:disabled { opacity: .6; }