/* ==========================================================================
   NitroPlayer board / puzzle / arcade / word game visuals (DESIGN)
   Boards size from the .game-area container (container-type: inline-size),
   so 100cqw = usable board width. Ids/inline px from game pages are
   overridden with !important where the page markup still hard-codes sizes.
   ========================================================================== */

:root {
    --bd-ink: #171b36;
    --bd-ink-2: #222850;
    --bd-line: rgba(18,20,42,.14);
    --sd-user: #2f62d8;
    --sd-sel: #d4ff3a;
    --wd-correct: #1f9d55;
    --wd-present: #e3a008;
    --wd-absent: #5d6177;
}
:root[data-theme="dark"] {
    --bd-line: rgba(255,255,255,.1);
    --sd-user: #8fb6ff;
    --wd-absent: #4a4f70;
}
:root[data-theme="dark"] .wd-key.absent { opacity: .45; }

/* shared: game-area children may be inline-sized legacy wrappers */
.game-area > div[style*="display:flex"] { max-width: 100%; }
.np-board-msg { font: 650 14px var(--font-body); color: var(--text-dim); text-align: center; }

/* ---------- generic pill status (used by several boards) ---------- */
.np-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--bg-panel); color: var(--text); font: 650 14px var(--font-body); }

/* ========================== SUDOKU ========================== */
#sudoku-board {
    position: relative !important; width: min(100cqw, 468px) !important; height: auto !important; aspect-ratio: 1;
    display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);
    background: var(--bg-card) !important; border: 3px solid var(--text) !important; border-radius: 14px !important;
    overflow: hidden; box-shadow: var(--shadow-2); container-type: inline-size; user-select: none; -webkit-user-select: none;
}
.sd-cell {
    position: relative; display: grid; place-items: center; cursor: pointer;
    border-right: 1px solid var(--bd-line); border-bottom: 1px solid var(--bd-line);
    font: 600 6.2cqw/1 var(--font-display); color: var(--text); transition: background .12s;
    -webkit-tap-highlight-color: transparent;
}
.sd-cell:nth-child(9n) { border-right: 0; }
.sd-cell:nth-child(n+73) { border-bottom: 0; }
.sd-cell.br { border-right: 2px solid var(--text); }
.sd-cell.bb { border-bottom: 2px solid var(--text); }
.sd-cell.given { font-weight: 800; }
.sd-cell.user { color: var(--sd-user); font-weight: 600; }
.sd-cell.peer { background: rgba(47,127,224,.07); }
.sd-cell.same { background: rgba(47,127,224,.2); }
.sd-cell.sel { background: var(--sd-sel); color: #0e1020; }
.sd-cell.conflict { color: var(--red); background: rgba(226,61,75,.12); }
.sd-cell.sel.conflict { background: #ffb4bb; }
@media (hover: hover) { .sd-cell:not(.sel):hover { background: rgba(212,255,58,.35); } }
.sd-notes { position: absolute; inset: 6%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.sd-notes span { display: grid; place-items: center; font: 600 2.1cqw/1 var(--font-body); color: var(--text-muted); }
/* number pad (div right after the board on the page) */
#sudoku-board + div { display: grid !important; grid-template-columns: repeat(10, 1fr); gap: 6px !important; width: min(100cqw, 468px); }
#sudoku-board + div .btn { min-height: 46px; padding: 0; font: 750 19px var(--font-display); border-radius: 12px; }
@media (max-width: 480px) {
    #sudoku-board + div { grid-template-columns: repeat(5, 1fr); }
}

/* ========================== MINESWEEPER ========================== */
.game-area:has(#ms-board) { overflow-x: auto; align-items: safe center; }
#ms-board {
    position: relative !important; display: grid; grid-template-columns: repeat(var(--w, 9), 1fr); grid-template-rows: repeat(var(--h, 9), 1fr);
    width: max(min(100cqw, calc(var(--w, 9) * 36px + 12px)), calc(var(--w, 9) * 24px + 12px)) !important; height: auto !important;
    aspect-ratio: var(--w, 9) / var(--h, 9);
    padding: 6px; gap: 2px; border-radius: 14px; background: var(--bd-ink); box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255,255,255,.06);
    container-type: inline-size; user-select: none; -webkit-user-select: none; box-sizing: border-box; flex: none;
}
.ms-cell {
    display: grid; place-items: center; border-radius: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent;
    font: 800 calc(100cqw / var(--w, 9) * .56)/1 var(--font-display);
}
.ms-cell.hid { background: linear-gradient(160deg, #4a5490 0%, #343c6e 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.25); transition: filter .1s, transform .08s; }
@media (hover: hover) { .ms-cell.hid:hover { filter: brightness(1.18); } }
.ms-mode { display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }
.ms-mode .btn { min-width: 84px; }
.ms-mode .btn.is-on { --b-bg: var(--ink); --b-fg: #fff; --b-bd: var(--ink); }
:root[data-theme="dark"] .ms-mode .btn.is-on { --b-bg: var(--volt); --b-fg: var(--ink); --b-bd: var(--volt); }
.ms-mode span { flex-basis: 100%; text-align: center; }
@media (pointer: coarse), (max-width: 760px) { .ms-mode { display: flex; } }
.ms-cell.hid:active { transform: scale(.94); }
.ms-cell.rev { background: #e9ecf5; box-shadow: inset 0 0 0 1px rgba(18,20,42,.05); cursor: default; }
:root[data-theme="dark"] .ms-cell.rev { background: #262b4d; }
.ms-cell.mine { background: #ff5a5f; }
.ms-cell.n1 { color: #2f7fe0; } .ms-cell.n2 { color: #1f9d55; } .ms-cell.n3 { color: #e23d4b; } .ms-cell.n4 { color: #5b3dc9; }
.ms-cell.n5 { color: #b3541e; } .ms-cell.n6 { color: #0e9aa7; } .ms-cell.n7 { color: #12142a; } .ms-cell.n8 { color: #6b7280; }
:root[data-theme="dark"] .ms-cell.n1 { color: #6fb1ff; } :root[data-theme="dark"] .ms-cell.n2 { color: #4fd18b; } :root[data-theme="dark"] .ms-cell.n3 { color: #ff7a85; }
:root[data-theme="dark"] .ms-cell.n4 { color: #b4a6ff; } :root[data-theme="dark"] .ms-cell.n7 { color: #eef0fa; }
.ms-bomb { width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6b7280 0 12%, #12142a 14%); box-shadow: 0 0 0 2px rgba(18,20,42,.25); position: relative; }
.ms-bomb::before { content: ""; position: absolute; inset: -22%; background: linear-gradient(#12142a, #12142a) center / 12% 100% no-repeat, linear-gradient(#12142a, #12142a) center / 100% 12% no-repeat; border-radius: 2px; z-index: -1; }
.ms-flag { position: relative; width: 50%; height: 62%; }
.ms-flag::before { content: ""; position: absolute; left: 22%; top: 0; bottom: 0; width: 12%; background: #e9ecf5; border-radius: 2px; }
.ms-flag::after { content: ""; position: absolute; left: 30%; top: 0; width: 70%; height: 58%; background: #ff5a36; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* ========================== 2048 ========================== */
#game-board.b2048, .game-2048 #game-board {
    position: relative !important; width: min(100cqw, 460px) !important; height: auto !important; aspect-ratio: 1;
    display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 2.6%; padding: 2.6%;
    background: var(--bd-ink) !important; border-radius: 18px !important; box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255,255,255,.06);
    container-type: inline-size; touch-action: none; user-select: none; -webkit-user-select: none;
}
.t2048 { display: grid; place-items: center; border-radius: 9%; font: 800 11cqw/1 var(--font-display); letter-spacing: -.04em; color: #fff; background: rgba(255,255,255,.06); box-shadow: inset 0 -3px 0 rgba(0,0,0,.14); }
.t2048.v0 { box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.t2048.d3 { font-size: 9cqw; } .t2048.d4 { font-size: 7.4cqw; } .t2048.d5 { font-size: 6cqw; }
.t2048.v2 { background: #eef0f8; color: #171b36; }
.t2048.v4 { background: #d9def5; color: #171b36; }
.t2048.v8 { background: #ffb36b; }
.t2048.v16 { background: #ff8a4c; }
.t2048.v32 { background: #ff5a36; }
.t2048.v64 { background: #e8392b; }
.t2048.v128 { background: #ffd45c; color: #3b2800; box-shadow: 0 0 18px rgba(255,212,92,.45), inset 0 -3px 0 rgba(0,0,0,.12); }
.t2048.v256 { background: #ffc83d; color: #3b2800; box-shadow: 0 0 22px rgba(255,200,61,.5), inset 0 -3px 0 rgba(0,0,0,.12); }
.t2048.v512 { background: #f0b400; color: #2f2000; box-shadow: 0 0 26px rgba(240,180,0,.55), inset 0 -3px 0 rgba(0,0,0,.12); }
.t2048.v1024 { background: #d4ff3a; color: #0e1020; box-shadow: 0 0 28px rgba(212,255,58,.55), inset 0 -3px 0 rgba(0,0,0,.12); }
.t2048.v2048 { background: #b8f000; color: #0e1020; box-shadow: 0 0 36px rgba(212,255,58,.8), inset 0 -3px 0 rgba(0,0,0,.12); }
.t2048.vbig { background: #7b6cff; }

/* ========================== MAHJONG ========================== */
#mj-board {
    position: relative !important; margin: 0 auto; border-radius: 16px; flex: none;
    background: radial-gradient(120% 90% at 50% 0%, #13814f 0%, #0b5537 100%);
    box-shadow: inset 0 2px 24px rgba(0,0,0,.35), var(--shadow-2); user-select: none; -webkit-user-select: none;
}
.game-area .np-legacy-area:has(#mj-board) { width: 100%; overflow: visible !important; }
.mj-tile {
    position: absolute; display: grid; place-items: center; border-radius: 12%/10%; cursor: pointer;
    background: linear-gradient(150deg, #fffef8 0%, #f6efd9 60%, #ebdfbd 100%);
    box-shadow: 1px 1px 0 #d9c99d, 2px 2px 0 #c9b582, 3px 3px 0 #b39c64, 4px 5px 8px rgba(0,0,0,.4);
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; line-height: 1;
    color: #1d2240; transition: transform .12s, filter .12s, box-shadow .12s;
    -webkit-tap-highlight-color: transparent;
}
.mj-tile.s-char { color: #b3202f; } .mj-tile.s-dot { color: #1c4fa8; } .mj-tile.s-bam { color: #18794a; } .mj-tile.s-honor { color: #1d2240; }
.mj-tile.blocked { filter: brightness(.82) saturate(.65); cursor: default; }
@media (hover: hover) { .mj-tile.free:hover { transform: translate(-1px, -2px); } }
.mj-tile.sel { background: linear-gradient(150deg, #f4ffc4, #d4ff3a); box-shadow: 0 0 0 2px #0e1020, 0 0 18px rgba(212,255,58,.8), 3px 4px 8px rgba(0,0,0,.4); transform: translate(-1px, -3px); }
#mj-remaining { font-weight: 700; }

/* ========================== CHESS PUZZLES ========================== */
#chess-board {
    position: relative !important; width: min(100cqw, 520px) !important; height: auto !important; aspect-ratio: 1;
    display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
    border: 0 !important; border-radius: 10px !important; overflow: hidden; container-type: inline-size;
    box-shadow: 0 0 0 6px var(--bd-ink), 0 0 0 7px rgba(255,255,255,.08), var(--shadow-3); margin: 8px 0;
    user-select: none; -webkit-user-select: none;
}
.cp-sq { position: relative; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cp-sq.l { background: #eee7d3; } .cp-sq.d { background: #6f915f; }
.cp-sq.sel::before { content: ""; position: absolute; inset: 0; background: rgba(212,255,58,.62); }
.cp-sq.solved::before { content: ""; position: absolute; inset: 0; background: rgba(255,200,61,.55); }
.cp-sq .co { position: absolute; font: 700 2.3cqw/1 var(--font-body); pointer-events: none; }
.cp-sq .co.f { right: 6%; bottom: 5%; } .cp-sq .co.r { left: 6%; top: 6%; }
.cp-sq.l .co { color: #6f915f; } .cp-sq.d .co { color: #eee7d3; }
.pc { position: relative; z-index: 1; font-size: 9.6cqw; line-height: 1; font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; transition: transform .12s; }
.pc.w { color: #fffdf6; text-shadow: 0 0 1px #12142a, 1px 1px 0 #12142a, -1px -1px 0 #12142a, 1px -1px 0 #12142a, -1px 1px 0 #12142a, 0 3px 4px rgba(0,0,0,.4); }
.pc.b { color: #191c2e; text-shadow: 0 0 1px rgba(255,255,255,.4), 0 3px 4px rgba(0,0,0,.4); }
.cp-sq.sel .pc { transform: scale(1.1) translateY(-3%); }
#puzzle-num { display: inline-flex; padding: 4px 12px; border-radius: 999px; background: var(--bg-panel); font: 700 12px var(--font-body) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim) !important; }
#puzzle-desc { font: 750 clamp(17px, 2.4vw, 22px)/1.25 var(--font-display) !important; color: var(--text) !important; text-align: center; }

/* ========================== BACKGAMMON ========================== */
.game-area .np-legacy-area:has(#bg-board) {
    background: linear-gradient(135deg, #6e3b1f, #4a2611) !important; border: 0 !important; border-radius: 18px !important;
    padding: clamp(8px, 2cqw, 18px) !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), inset 0 2px 12px rgba(0,0,0,.4), var(--shadow-2);
    width: min(100cqw, 700px);
}
#bg-turn { font: 650 14px var(--font-body) !important; color: #f5e3c2 !important; }
#bg-dice { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 40px; color: #f5e3c2 !important; font: 600 13px var(--font-body) !important; }
.bg-die { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(160deg, #fffdf6, #eae2cc); box-shadow: inset 0 -2px 0 rgba(0,0,0,.15), 0 3px 6px rgba(0,0,0,.35); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 5px; }
.bg-die i { width: 6px; height: 6px; border-radius: 50%; background: #171b36; place-self: center; }
.bg-die.used { opacity: .35; }
.bg-left { margin-left: 4px; opacity: .8; }
#bg-board {
    position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 13 / 9;
    background: radial-gradient(120% 90% at 50% 50%, #1d6b45, #0f4630) !important; border: 0 !important; border-radius: 10px !important;
    box-shadow: inset 0 0 0 3px #3b1d0c, inset 0 4px 18px rgba(0,0,0,.45); overflow: hidden; user-select: none; -webkit-user-select: none;
    container-type: inline-size;
}
.bg-bar { position: absolute; top: 0; bottom: 0; left: calc(600% / 13); width: calc(100% / 13); background: linear-gradient(90deg, #4a2611, #6e3b1f 50%, #4a2611); box-shadow: 0 0 10px rgba(0,0,0,.4); }
.bg-pt { position: absolute; width: calc(100% / 13); height: 44%; display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 1.5% 0; -webkit-tap-highlight-color: transparent; }
.bg-pt.top { top: 0; }
.bg-pt.bot { bottom: 0; flex-direction: column-reverse; }
.bg-pt::before { content: ""; position: absolute; inset: 0 8%; background: var(--tri, #e8d9b5); }
.bg-pt.top::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.bg-pt.bot::before { clip-path: polygon(0 100%, 100% 100%, 50% 0); }
.bg-pt.alt { --tri: #b8433a; }
.bg-pt.can::before { filter: brightness(1.25) drop-shadow(0 0 0 #d4ff3a); background: color-mix(in srgb, var(--tri, #e8d9b5) 70%, #d4ff3a); }
.bg-ck { position: relative; z-index: 1; width: 84%; aspect-ratio: 1; flex: none; border-radius: 50%; margin: -4% 0; display: grid; place-items: center; font: 800 3cqw/1 var(--font-display); }
.bg-ck.p { background: radial-gradient(circle at 35% 30%, #ff8088, #d22a3a 60%, #9e1a28); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25), 0 2px 3px rgba(0,0,0,.45); color: #fff; }
.bg-ck.a { background: radial-gradient(circle at 35% 30%, #5a6080, #1d2033 60%, #0b0d18); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15), 0 2px 3px rgba(0,0,0,.45); color: #fff; }
.bg-ck.on-bar { position: absolute; left: calc(600% / 13 + 100% / 26); transform: translateX(-50%); width: calc(84% / 13); margin: 0; }

/* ========================== SNAKE ========================== */
#snake-board {
    position: relative !important; width: min(100cqw, 480px) !important; height: auto !important; aspect-ratio: 1;
    border: 0 !important; border-radius: 16px !important; overflow: hidden; touch-action: none;
    background-color: #12162e !important;
    background-image: repeating-conic-gradient(rgba(255,255,255,.035) 0 25%, transparent 0 50%) !important;
    background-size: calc(200% / var(--g, 20)) calc(200% / var(--g, 20)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), var(--shadow-2);
}
.sn-seg { position: absolute; border-radius: 26%; background: #9be22d; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); transform: scale(.9); }
.sn-seg.head { background: #d4ff3a; transform: scale(1); box-shadow: 0 0 14px rgba(212,255,58,.6); z-index: 2; border-radius: 32%; }
.sn-seg.head::before, .sn-seg.head::after { content: ""; position: absolute; width: 22%; height: 22%; border-radius: 50%; background: #0e1020; top: 24%; }
.sn-seg.head::before { left: 20%; } .sn-seg.head::after { right: 20%; }
.sn-food { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a8a, #ff4b3a 55%, #c22618); box-shadow: 0 0 14px rgba(255,90,54,.6); animation: foodPulse 1s ease-in-out infinite; transform-origin: center; }
#snake-board + div { display: grid !important; grid-template-columns: repeat(3, 60px); grid-template-areas: ". u ." "l d r"; gap: 8px !important; justify-content: center; }
#snake-board + div .btn:nth-child(1) { grid-area: u; } #snake-board + div .btn:nth-child(2) { grid-area: l; }
#snake-board + div .btn:nth-child(3) { grid-area: d; } #snake-board + div .btn:nth-child(4) { grid-area: r; }
#snake-board + div .btn { min-width: 0; padding: 0; min-height: 50px; font-size: 18px; border-radius: 14px; }
@media (pointer: fine) { #snake-board + div { opacity: .75; } }

/* ========================== TETRIS ========================== */
#tetris-board {
    position: relative !important; width: min(calc(100cqw - 104px), 300px, max(170px, calc((100svh - 300px) / 2))) !important; height: auto !important; aspect-ratio: 1 / 2;
    background-color: #10142b !important; border-radius: 12px !important; touch-action: none;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important;
    background-size: 10% 5% !important; box-shadow: 0 0 0 4px var(--bd-ink), 0 0 0 5px rgba(255,255,255,.08), var(--shadow-2);
}
#tetris-board ~ div { min-width: 84px; }
#next-piece { width: 84px !important; height: 64px !important; background: #10142b !important; border-radius: 10px !important; box-shadow: 0 0 0 3px var(--bd-ink); }
.tt-b { position: absolute; border-radius: 3px; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.25), inset 2px 0 0 rgba(255,255,255,.12); }
.tt-ghost { position: absolute; border-radius: 3px; border: 2px dashed rgba(255,255,255,.28); }
.tt-pad { display: none; grid-template-columns: repeat(5, 1fr); gap: 8px; width: min(100cqw, 400px); margin-top: 12px; }
.tt-pad button { min-height: 52px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font: 800 20px var(--font-display); box-shadow: var(--shadow-1); touch-action: manipulation; }
.tt-pad button:active { transform: scale(.95); background: var(--bg-panel); }
@media (pointer: coarse), (max-width: 760px) { .tt-pad { display: grid; } }

/* ========================== WORDLE ========================== */
#wordle-board { display: grid; gap: 6px; justify-content: center; margin-bottom: 18px !important; --tile: clamp(40px, min(calc((100cqw - 30px) / 5), calc((100svh - 440px) / 6)), 60px); }
.wd-row { display: grid; grid-template-columns: repeat(5, var(--tile)); gap: 6px; }
.wd-row.shake { animation: wdShake .4s; }
.wd-tile {
    width: var(--tile); height: var(--tile); display: grid; place-items: center; border-radius: 10px;
    border: 2px solid var(--border-strong); background: var(--bg-card); color: var(--text);
    font: 800 calc(var(--tile) * .48)/1 var(--font-display); text-transform: uppercase; user-select: none;
}
.wd-tile.filled { border-color: var(--text-dim); animation: wdPop .12s ease-out; }
.wd-tile.correct, .wd-tile.present, .wd-tile.absent { border-color: transparent; color: #fff; }
.wd-tile.correct { background: var(--wd-correct); }
.wd-tile.present { background: var(--wd-present); }
.wd-tile.absent { background: var(--wd-absent); }
.wd-tile.reveal { animation: wdFlip .5s ease both; animation-delay: calc(var(--i) * 120ms); }
@keyframes wdPop { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes wdFlip { 0% { transform: rotateX(0); background: var(--bg-card); color: var(--text); border-color: var(--text-dim); } 49% { transform: rotateX(90deg); background: var(--bg-card); color: var(--text); border-color: var(--text-dim); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes wdShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
#wordle-kb { width: min(100cqw, 520px); display: grid; gap: 6px; }
.wd-kb-row { display: flex; gap: 5px; justify-content: center; }
.wd-key {
    flex: 1 1 0; max-width: 46px; min-width: 0; height: 56px; border: 0; border-radius: 9px; cursor: pointer;
    background: var(--bg-panel); color: var(--text); font: 750 clamp(13px, 3.6cqw, 17px) var(--font-display);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.08); transition: transform .08s, filter .12s; touch-action: manipulation; padding: 0;
}
.wd-key.wide { flex: 1.6 1 0; max-width: 74px; font-size: 12px; letter-spacing: .04em; }
.wd-key:active { transform: scale(.94); }
@media (hover: hover) { .wd-key:hover { filter: brightness(.95); } }
.wd-key.correct { background: var(--wd-correct); color: #fff; }
.wd-key.present { background: var(--wd-present); color: #fff; }
.wd-key.absent { background: var(--wd-absent); color: #fff; opacity: .85; }

/* ========================== WORD SEARCH ========================== */
#ws-board {
    position: relative !important; width: min(100cqw, 468px) !important; height: auto !important; aspect-ratio: 1;
    display: grid; grid-template-columns: repeat(var(--n, 12), 1fr); grid-template-rows: repeat(var(--n, 12), 1fr);
    padding: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-1);
    container-type: inline-size; touch-action: none; user-select: none; -webkit-user-select: none; box-sizing: border-box;
}
.ws-cell { display: grid; place-items: center; border-radius: 30%; font: 700 calc(100cqw / var(--n, 12) * .5)/1 var(--font-display); color: var(--text); cursor: pointer; transition: background .08s; }
.ws-cell.found { background: rgba(31,157,85,.16); color: var(--wd-correct); }
.ws-cell.sel { background: var(--volt); color: #0e1020; transform: scale(1.04); }
#ws-words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: min(100cqw, 520px); margin: 14px auto 0 !important; }
.ws-word { padding: 5px 12px; border-radius: 999px; background: var(--bg-panel); font: 700 12.5px var(--font-body); letter-spacing: .06em; color: var(--text); }
.ws-word.found { background: rgba(31,157,85,.14); color: var(--wd-correct); text-decoration: line-through; }
#ws-cat { color: var(--accent) !important; }

/* ========================== MEMORY MATCH ========================== */
#memory-board { width: min(100cqw, 440px) !important; max-width: none !important; gap: clamp(6px, 2cqw, 12px) !important; perspective: 900px; container-type: inline-size; }
.mm-card { position: relative; aspect-ratio: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transform-style: preserve-3d; transition: transform .35s var(--ease, ease); }
.mm-card.show { transform: rotateY(180deg); }
.mm-card.flipping { animation: mmFlip .38s var(--ease, ease) both; }
.mm-card.unflipping { animation: mmFlip .38s var(--ease, ease) reverse both; }
@keyframes mmFlip { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.mm-face { position: absolute; inset: 0; border-radius: 16%; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; }
.mm-back {
    background-color: #141836;
    background-image: radial-gradient(circle at 50% 50%, rgba(212,255,58,.22) 0 16%, transparent 17%), repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1.5px, transparent 1.5px 7px), repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 1.5px, transparent 1.5px 7px), linear-gradient(160deg, #23295a, #141836);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 3px 8px rgba(10,14,30,.25);
}
.mm-back::after { content: ""; position: absolute; inset: 9%; border-radius: 12%; border: 1px solid rgba(212,255,58,.5);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z' fill='%23d4ff3a'/%3E%3C/svg%3E") center / 34% no-repeat; }
@media (hover: hover) { .mm-card:not(.show):hover { transform: translateY(-3px); } }
.mm-front { transform: rotateY(180deg); background: linear-gradient(160deg, #fff, #f4f1e6); box-shadow: inset 0 0 0 1px rgba(18,20,42,.08), 0 3px 8px rgba(10,14,30,.18); font-size: clamp(26px, 10cqw, 48px); line-height: 1; }
.mm-card.matched .mm-front { box-shadow: inset 0 0 0 3px #1f9d55, 0 0 16px rgba(31,157,85,.35); background: linear-gradient(160deg, #f1fff4, #ddf6e4); }

/* ====================================================================
   MP-owned boards (tic-tac-toe, connect-4, checkers, reversi):
   style their existing inline-positioned DOM responsively; also offer
   classes (.ttt-cell, .c4-cell/.c4-disc, .ck-sq/.ck-piece, .rv-*)
   ==================================================================== */

/* ---- Tic-tac-toe ---- */
#ttt-board {
    position: relative !important; width: min(100cqw, 360px) !important; height: auto !important; aspect-ratio: 1;
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3%;
    padding: 3%; border-radius: 22px; background: var(--bd-ink); box-shadow: var(--shadow-2); container-type: inline-size;
}
#ttt-board > div, .ttt-cell {
    position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important;
    background: rgba(255,255,255,.06) !important; border-radius: 16% !important; display: grid !important; place-items: center;
    font: 800 20cqw/1 var(--font-display) !important; cursor: pointer; transition: background .15s, transform .1s !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
#ttt-board > div:hover, .ttt-cell:hover { background: rgba(212,255,58,.12) !important; }
#ttt-board > div:active { transform: scale(.96); }
#ttt-board > div[style*="color:#3b82f6"], .ttt-cell.x { color: #d4ff3a !important; text-shadow: 0 0 18px rgba(212,255,58,.45); }
#ttt-board > div[style*="color:#ef4444"], .ttt-cell.o { color: #ff6b8b !important; text-shadow: 0 0 18px rgba(255,107,139,.45); }
.ttt-cell.win, #ttt-board > div.win { background: rgba(212,255,58,.22) !important; }

/* ---- Connect 4 ---- */
#c4-board {
    position: relative !important; width: min(100cqw, 520px) !important; height: auto !important; aspect-ratio: 7 / 6;
    display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); gap: 2.2%; padding: 2.6% !important;
    background: linear-gradient(160deg, #2f7fe0, #1a4fb0) !important; border-radius: 22px !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -6px 0 rgba(0,0,0,.18), var(--shadow-2);
}
#c4-board > div, .c4-cell {
    position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important;
    aspect-ratio: 1; border-radius: 50% !important; cursor: pointer;
    background: #0e2a63 !important; box-shadow: inset 0 4px 8px rgba(0,0,0,.45);
}
#c4-board > div[style*="#ef4444"], .c4-cell.red, .c4-disc.red { background: radial-gradient(circle at 35% 30%, #ff8a8f, #e23d4b 55%, #a51d2a) !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), inset 0 0 0 5px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.3); }
#c4-board > div[style*="#eab308"], .c4-cell.yellow, .c4-disc.yellow { background: radial-gradient(circle at 35% 30%, #fff1a0, #ffc83d 55%, #d79a00) !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), inset 0 0 0 5px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.3); }
.c4-cell.win, #c4-board > div.win { outline: 3px solid #d4ff3a; outline-offset: 2px; }
@media (hover: hover) { #c4-board > div:hover { filter: brightness(1.2); } }

/* ---- Checkers ---- */
#checkers-board {
    position: relative !important; width: min(100cqw, 520px) !important; height: auto !important; aspect-ratio: 1;
    display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
    border: 0 !important; border-radius: 10px !important; overflow: hidden !important;
    box-shadow: 0 0 0 7px #4a2611, 0 0 0 8px rgba(255,255,255,.08), var(--shadow-3); margin: 8px 0;
}
#checkers-board > div, .ck-sq {
    position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important;
    display: flex !important; align-items: center; justify-content: center; cursor: pointer; min-width: 0; min-height: 0;
}
#checkers-board > div[style*="#deb887"], .ck-sq.l { background: #ecd9b3 !important; }
#checkers-board > div[style*="#5c4033"], .ck-sq.d { background: #8a5a3b !important; }
#checkers-board > div[style*="rgba(34,197,94"], .ck-sq.valid { background: #8a5a3b !important; box-shadow: inset 0 0 0 999px rgba(212,255,58,.38); }
#checkers-board > div[style*="rgba(59,130,246"], .ck-sq.sel { background: #8a5a3b !important; box-shadow: inset 0 0 0 999px rgba(255,200,61,.4); }
#checkers-board > div > div, .ck-piece {
    flex: 0 0 78%; width: 78% !important; min-width: 78%; height: auto !important; aspect-ratio: 1; box-sizing: border-box; border: 0 !important; border-radius: 50% !important;
    display: grid !important; place-items: center; font-size: 140% !important;
}
#checkers-board > div > div[style*="#ef4444"], .ck-piece.red { background: radial-gradient(circle at 35% 30%, #ff8a8f, #d22a3a 58%, #9e1a28) !important; box-shadow: inset 0 0 0 3px rgba(255,255,255,.2), inset 0 0 0 7px rgba(0,0,0,.12), 0 3px 4px rgba(0,0,0,.45); color: #ffe08a !important; }
#checkers-board > div > div[style*="#1a1a1a"], .ck-piece.black { background: radial-gradient(circle at 35% 30%, #5a6080, #1d2033 58%, #0b0d18) !important; box-shadow: inset 0 0 0 3px rgba(255,255,255,.14), inset 0 0 0 7px rgba(0,0,0,.2), 0 3px 4px rgba(0,0,0,.45); color: #ffe08a !important; }

/* ---- Reversi (classes for MP agent's renderer) ---- */
#reversi-board, .rv-board {
    position: relative; width: min(100cqw, 520px); aspect-ratio: 1; display: grid;
    grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: 2px; padding: 2px;
    background: #0a4a32; border-radius: 12px; box-shadow: 0 0 0 7px var(--bd-ink), var(--shadow-3); margin: 8px 0;
}
.rv-cell { position: relative; display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 0%, #17905a, #0f6b47); cursor: pointer; }
@media (hover: hover) { .rv-cell.hint:hover { background: #1aa366; } }
.rv-cell.hint::after { content: ""; width: 26%; aspect-ratio: 1; border-radius: 50%; background: rgba(212,255,58,.55); }
.rv-cell.last { box-shadow: inset 0 0 0 2px #ffc83d; }
.rv-disc { width: 80%; aspect-ratio: 1; border-radius: 50%; transition: transform .3s; }
.rv-disc.black { background: radial-gradient(circle at 35% 30%, #5a6080, #1d2033 60%, #0b0d18); box-shadow: 0 3px 4px rgba(0,0,0,.45); }
.rv-disc.white { background: radial-gradient(circle at 35% 30%, #ffffff, #e9e6dc 60%, #c7c2b2); box-shadow: 0 3px 4px rgba(0,0,0,.45); }
.rv-disc.flip { animation: rvFlip .35s ease; }
@keyframes rvFlip { 50% { transform: rotateY(90deg); } }

@media (max-width: 760px) {
    #chess-board, #checkers-board, #reversi-board, .rv-board { margin: 6px 0; }
}

/* ---------- landscape phones: board on the left, controls / lists on the right ---------- */
@media (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
    .game-area:has(#wordle-board), .game-area:has(#ws-board) { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 20px; }
    #wordle-board { margin: 0 !important; --tile: clamp(30px, calc((var(--np-fit-h, 340px) - 60px) / 6), 54px); }
    #wordle-kb { width: min(56cqw, 440px); }
    #wordle-kb .wd-key { min-height: 44px; }
    .game-area:has(#ws-board) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px; }
    .game-area:has(#ws-board) > :nth-child(2) { grid-column: 1; grid-row: 1 / span 2; }
    .game-area:has(#ws-board) > :first-child { grid-column: 2; grid-row: 1; align-self: end; }
    .game-area:has(#ws-board) > #ws-words { grid-column: 2; grid-row: 2; align-self: start; margin-top: 6px !important; }
    #ws-board { width: min(calc(var(--np-fit-h, 340px) - 40px), 58cqw) !important; }
    .game-area:has(#hangman-canvas) > div { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; row-gap: 10px !important; align-items: center; justify-items: center; }
    .game-area:has(#hangman-canvas) > div > #hangman-canvas { grid-column: 1; grid-row: 1 / span 3; width: min(200px, calc(var(--np-fit-h, 340px) - 40px)) !important; height: auto !important; }
    .game-area:has(#hangman-canvas) > div > :not(#hangman-canvas) { grid-column: 2; }
    .game-area:has(#hangman-canvas) #hangman-word { font-size: 26px !important; }
    .game-area:has(#snake-board) > div { flex-direction: row !important; justify-content: center; gap: 24px !important; }
    #snake-board { width: min(calc(var(--np-fit-h, 340px) - 40px), 62cqw) !important; }
    .game-area:has(#tetris-board) { flex-direction: row; align-items: center; justify-content: center; gap: 18px; }
    #tetris-board { width: max(140px, calc((var(--np-fit-h, 340px) - 40px) / 2)) !important; }
    .game-area:has(#tetris-board) .tt-pad { grid-template-columns: repeat(3, 58px); width: auto; margin-top: 0; }
    .game-area:has(#sudoku-board) > div { flex-direction: row !important; justify-content: center; gap: 18px !important; }
    #sudoku-board { width: min(calc(var(--np-fit-h, 340px) - 40px), 62cqw) !important; }
    #sudoku-board + div { grid-template-columns: repeat(3, 52px); width: auto; }
    #ttt-board { width: min(calc(var(--np-fit-h, 340px) - 64px), 360px) !important; }
    #game-board.b2048, .game-2048 #game-board { width: min(calc(var(--np-fit-h, 340px) - 40px), 460px) !important; }
}