/* Game surfaces use the materials and palette of their existing cover art. */
html[data-portal-theme] body.game-page.art-base {
  --bg:#f1e6d4; --panel:#fff9ed; --line:#dcc8aa; --text:#302b27;
  --muted:#705f50; --accent:#98552c; --ok:#247b4a; --bad:#ba4545; --accent-ink:#fff9ed;
  --game-back:radial-gradient(circle at 50% -8%,#fff9e9 0,#efdfc8 48%,#e6d0b2 100%);
  --game-panel:linear-gradient(155deg,#fffcf4,#f8eddb);
  --game-edge:#d7bd98; --game-shadow:0 22px 48px rgba(82,55,29,.19);
  --game-button:#fff8eb; --game-button-edge:#cda978; --game-button-ink:#55351e;
  background:var(--game-back); color:var(--text); color-scheme:light;
}
html[data-portal-theme] body.game-page.art-base.art-felt {
  --bg:#103e31; --panel:#185640; --line:#4f8c69; --text:#fff8e8;
  --muted:#d6e1cf; --accent:#f4cf76; --ok:#bce49d; --accent-ink:#06202e;
  --game-back:radial-gradient(circle at 50% -15%,#537e57 0,#214c3e 54%,#10372f 100%);
  --game-panel:linear-gradient(155deg,#286c4b,#124c3c);
  --game-edge:#a77d47; --game-shadow:0 24px 48px rgba(7,29,24,.35);
  --game-button:#f9edcf; --game-button-edge:#c9ad73; --game-button-ink:#45331d;
  color-scheme:dark;
}
body.game-page.art-felt .portal-crumbs ol { display:inline-flex; padding:4px 12px; border-radius:999px; background:rgba(5,28,22,.55); }
body.game-page.art-felt .portal-crumbs,body.game-page.art-felt .portal-crumbs li + li::before { color:#e6eee0; }
body.game-page.art-felt .portal-crumbs a { color:#ffd97a; }
html[data-portal-theme] body.game-page.art-base.art-sky {
  --bg:#d6efff; --panel:#f8fdff; --line:#a9d7ec; --text:#194266;
  --muted:#506f83; --accent:#096caa; --ok:#197955;
  --game-back:radial-gradient(circle at 50% -10%,#fff5d4 0,#d8f0fb 43%,#bde2f3 100%);
  --game-panel:linear-gradient(155deg,#fffdf3,#edf9ff);
  --game-edge:#a8cee1; --game-shadow:0 21px 42px rgba(31,100,143,.18);
  --game-button:#fffdfa; --game-button-edge:#8fc5df; --game-button-ink:#175678;
}
html[data-portal-theme] body.game-page.art-base.art-candy {
  --bg:#fbe8db; --panel:#fff9f1; --line:#e8bfa4; --text:#613e42;
  --muted:#876c69; --accent:#b53867; --ok:#348763;
  --game-back:radial-gradient(circle at 50% -12%,#fff2be 0,#fbe4dc 48%,#edcde2 100%);
  --game-panel:linear-gradient(155deg,#fffdf6,#fff1e9);
  --game-edge:#e4ad94; --game-shadow:0 21px 43px rgba(127,62,87,.17);
  --game-button:#fff7ec; --game-button-edge:#dfae9a; --game-button-ink:#784755;
}
html[data-portal-theme] body.game-page.art-base.art-neon {
  --bg:#101a38; --panel:#182a4c; --line:#416588; --text:#f0f7ff;
  --muted:#c0d2e5; --accent:#79dfff; --accent-ink:#06202e; --ok:#8df2ae;
  --game-back:radial-gradient(circle at 50% -15%,#345491 0,#152d55 45%,#0b1832 100%);
  --game-panel:linear-gradient(155deg,#29466e,#122642);
  --game-edge:#668fbb; --game-shadow:0 23px 50px rgba(5,16,39,.42);
  --game-button:#28476b; --game-button-edge:#7296bd; --game-button-ink:#f4faff;
  color-scheme:dark;
}
body.game-page.art-base > main {
  width:min(calc(100% - 28px),var(--game-frame-max,920px)); max-width:none;
  margin:16px auto 38px; padding:clamp(18px,3vw,32px);
  border:1px solid var(--game-edge); border-radius:25px;
  background:var(--game-panel); color:var(--text); box-shadow:var(--game-shadow);
  gap:14px;
}
body.game-page.art-base > main h1 { max-width:760px; color:var(--text); text-align:center; font-size:clamp(1.7rem,3vw,2.45rem); line-height:1.12; letter-spacing:-.04em; }
body.game-page.art-base > main .hud { gap:8px; color:var(--muted); }
body.game-page.art-base > main .hud > span {
  min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  padding:8px 13px; border:1px solid var(--line); border-radius:12px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
  font-size:.88rem; font-weight:650;
}
body.game-page.art-base > main .hud b { font-size:1.05rem; font-variant-numeric:tabular-nums; }
body.game-page.art-base > main .bar button,
body.game-page.art-base > main button:not(.cell):not(.tile):not(.pcard):not(.slot):not(.pit):not(.tube):not(.hex):not(.gm):not(.sq):not(.kc):not(.cw):not(.card):not(.pad):not(.w):not(.t) {
  border:1px solid var(--game-button-edge); border-radius:11px;
  background:var(--game-button); color:var(--game-button-ink);
  font-weight:700; box-shadow:0 3px 0 color-mix(in srgb,var(--game-button-edge) 75%,#4c3621);
}
body.game-page.art-base > main button:not(:disabled):hover { filter:brightness(1.05); }
body.game-page.art-base > main button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
body.game-page.art-base > main .help { max-width:680px; color:var(--muted); }
body.game-page.art-base > main .msg { color:var(--accent); }
body.game-page.art-base > main .msg.win { color:var(--ok); }
body.game-page.art-base > main .msg.lose { color:var(--bad); }
body.game-page.art-base > main > .portal-intro { order:30; width:100%; max-width:650px; margin:12px 0 0; padding:15px 0 0; color:var(--muted); border-top:1px solid var(--game-edge); text-align:center; font-size:.88rem; line-height:1.55; }

/* The board is the visual focus, with its own edge and depth. */
body.game-page.art-base :is(.cwgrid,.kboard,.sboard,.nboard,.pgrid,.hunt,.grid,.board,.m3,.hboard,.mboard) { box-shadow:0 12px 23px rgba(48,34,22,.2); }
body.art-2048-drop .jar,body.art-fruit-merge .jar { border:6px solid #c7b29b; border-top:0; border-radius:0 0 27px 27px; background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(205,235,244,.38)); box-shadow:inset 0 -8px 19px rgba(125,87,62,.14),0 12px 23px rgba(95,62,45,.15); }
body.art-fruit-merge .jar { border-color:#dda681; background:linear-gradient(180deg,#fff9ed,#f9e2c7); }
body.art-codeword .cwgrid,body.art-cryptogram .text { padding:12px; border:6px solid #ac7747; border-radius:15px; background:#f6e5c8; box-shadow:0 13px 23px rgba(81,47,22,.23),inset 0 1px 0 #fffae9; }
body.art-codeword .cw { background:#fff9e9; border-color:#d6b992; color:#604630; }
body.art-codeword .cw.given { background:#e8d3ab; }
body.art-cryptogram .cc { background:#fff8e8; border-color:#d7b78b; }
body.art-color-paths .pgrid,body.art-number-link .pgrid { border:8px solid #b77a41; border-radius:17px; background:#f8e4bc; box-shadow:0 13px 23px rgba(78,48,24,.24),inset 0 2px 0 #fff4dc; }
body.art-color-paths .pgrid .cell,body.art-number-link .pgrid .cell { border-color:#e0c79e; }
body.art-dominoes .table { border:8px solid #ad7645; background:radial-gradient(ellipse at 50% 15%,#d4a76d,#a97043); box-shadow:0 14px 28px rgba(64,38,24,.24),inset 0 2px 0 #f5d2a3; }
body.art-dots-and-boxes .board { background:#f8e9ca; border:9px solid #b8814d; box-shadow:0 13px 24px rgba(72,45,26,.2); }
body.art-hexa-sort .hboard { border:8px solid #b77d49; background:linear-gradient(160deg,#dcae71,#ae7443); box-shadow:0 13px 25px rgba(69,41,23,.24); }
body.art-hexa-sort .htray { border:3px dashed #be8b5c; background:#f6dfb7; }
body.art-hexa-sort .slot .hexbg { fill:#f6dfb7; stroke:#c99b6b; }
body.art-hidden-objects canvas,body.art-jigsaw canvas { border:9px solid #9e6d42 !important; border-radius:14px; box-shadow:0 13px 25px rgba(67,41,22,.25); }
body.art-kakuro .kboard,body.art-sudoku .sboard,body.art-killer-sudoku .sboard { border:9px solid #aa7749; border-radius:9px; background:#aa7749; box-shadow:0 13px 25px rgba(67,41,22,.24); }
body.art-kakuro .kc:not(.black),body.art-sudoku .sc,body.art-killer-sudoku .sc { background:#fff9e8; color:#3f3428; }
body.art-kakuro .kc.black { background:#52443a; }
body.art-nonogram .nwrap { padding:14px; border:7px solid #aa7045; border-radius:12px; background:#f5e6c9; box-shadow:0 13px 25px rgba(67,41,22,.22); }
body.art-nonogram .nc:not(.on) { background:#fffaf0; }
body.art-nonogram .nc.on { background:#d94349; }
body.art-match-3 > main { --game-frame-max:760px; background:linear-gradient(155deg,#fff8e9,#fae5d0); }
body.art-match-3 > main h1 { font-size:clamp(1.65rem,2.5vw,2rem); }
body.art-match-3 .m3 { padding:9px; gap:4px; border:9px solid #b7723c; border-radius:20px; background:linear-gradient(150deg,#672c70,#321d60); box-shadow:inset 0 3px 0 #e8ac68,inset 0 -5px 9px rgba(45,19,63,.5),0 16px 28px rgba(102,39,72,.27); }
body.art-match-3 .gm { border:1px solid #a86a9e; border-radius:9px; background:radial-gradient(circle at 34% 20%,#85548f,#4a2b72 70%); box-shadow:inset 0 2px 2px rgba(255,255,255,.22),inset 0 -3px 3px rgba(14,10,45,.38); }
body.art-match-3 .gm .g { width:78%; background:radial-gradient(circle at 34% 22%,var(--gem-light) 0,var(--gem-mid) 48%,var(--gem-dark) 100%); filter:drop-shadow(0 3px 2px rgba(23,8,48,.5)); box-shadow:inset 0 2px 2px rgba(255,255,255,.65),inset 0 -4px 3px rgba(39,18,67,.35); }
body.art-match-3 .gm.k0 .g { --gem-light:#ffb2b8; --gem-mid:#f3295a; --gem-dark:#a6124a; }
body.art-match-3 .gm.k1 .g { --gem-light:#b1eaff; --gem-mid:#218ff0; --gem-dark:#15489c; border-radius:23%; }
body.art-match-3 .gm.k2 .g { --gem-light:#d5f8a0; --gem-mid:#53c943; --gem-dark:#187d4c; }
body.art-match-3 .gm.k3 .g { --gem-light:#fff8b9; --gem-mid:#ffd646; --gem-dark:#d78516; }
body.art-match-3 .gm.k4 .g { --gem-light:#f5bdff; --gem-mid:#b54ce7; --gem-dark:#6f2bad; }
body.art-match-3 .gm.k5 .g { --gem-light:#ffdeb1; --gem-mid:#ff8a37; --gem-dark:#c63b36; }
body.art-match-3 .gm .g::after { content:""; display:block; width:50%; height:28%; margin:13% 0 0 17%; border-radius:50%; transform:rotate(-25deg); background:rgba(255,255,255,.44); filter:blur(1px); }
body.art-match-3 .gm.sel { background:#ffd985; border-color:#fff2bc; box-shadow:0 0 0 3px #ffd273,0 0 18px rgba(255,217,115,.8); }
body.art-match-3 .goal { height:12px; border-color:#d0a171; background:#e8c7a6; }
body.art-match-3 .goal-bar { background:linear-gradient(90deg,#d33f83,#fdad4d); }
body.art-memory-match #grid { padding:10px; border:7px solid #b8794c; border-radius:20px; background:#dda275; box-shadow:0 14px 25px rgba(87,47,32,.2); }
body.art-memory-match .card.down { border-color:#91b8ee; box-shadow:inset 0 2px 0 #d9f1ff,0 4px 0 #1d5da3; }
body.art-water-sort .tubes { padding:20px 10px 14px; border:8px solid #c78855; border-radius:22px; background:linear-gradient(#fdf3dd,#edc793); box-shadow:0 15px 26px rgba(94,48,39,.2); }
body.art-water-sort .tube { background:linear-gradient(90deg,rgba(255,255,255,.72),rgba(204,238,245,.42)); border-color:#9fc8cc; border-top-color:transparent; box-shadow:inset 3px 0 4px rgba(255,255,255,.6),0 5px 8px rgba(77,76,67,.12); }
body.art-word-hunt .hunt,body.art-word-groups .board { border:8px solid #aa7144; border-radius:18px; background:#d5a36d; box-shadow:0 14px 26px rgba(71,45,27,.22); }
body.art-word-hunt .hunt .t,body.art-word-groups .w { border-color:#e3c594; background:linear-gradient(145deg,#fff9e8,#f1dab2); color:#53402a; box-shadow:0 3px 0 #bd9764; }
body.art-word-hunt .hunt .t.on,body.art-word-groups .w.on { background:#e8ae49; color:#473016; }
body.art-word-ladder .ladder li,body.art-word-scramble .letters { color:#4c3b29; }
body.art-word-scramble .letters { padding:14px 20px; border:7px solid #b77b46; background:#f5dfb9; box-shadow:0 11px 21px rgba(82,49,25,.2); }
body.art-word-search .grid { border-width:8px; border-color:#b8814c; border-radius:12px; }
body.art-reversi .rboard { background:#6a472e; box-shadow:inset 0 0 0 3px #c89f65,0 14px 25px rgba(40,25,17,.27); }
body.art-reversi .sq { background:linear-gradient(145deg,#49804c,#2d673b); }
body.art-reversi .sq.ok:hover { background:#609763; }
body.art-reversi .disc.a { background:radial-gradient(circle at 36% 27%,#686e68,#111d1c 65%); }
body.art-reversi .disc.i { background:radial-gradient(circle at 36% 27%,#fff,#e0ded3 65%,#a6aa9b); }
body.art-felt .felt { border-color:#82522d; background:radial-gradient(ellipse at 50% 15%,#23804e,#0d4d32); }
body.art-mahjong-connect .mc,body.art-mahjong-solitaire .mj { border:9px solid #a36b37; border-radius:17px; background:#b88753; box-shadow:0 14px 27px rgba(48,33,19,.25); }
body.art-mancala .mboard { border:5px solid #a76936; background:linear-gradient(155deg,#c18b4e,#875527); box-shadow:inset 0 2px 0 #eac292,0 15px 26px rgba(45,29,17,.3); }
body.art-sequence-memory .pads { padding:13px; border:8px solid #8e6949; border-radius:50%; background:#382f30; box-shadow:0 14px 29px rgba(55,34,19,.27); }
body.art-typing-test .text { border:8px solid #3b5b9c; border-radius:14px; background:#17294e; box-shadow:0 14px 27px rgba(18,28,67,.34); }

/* The portal's dark setting also darkens the space around each playfield. */
html[data-portal-theme="dark"] body.game-page.art-base:is(.art-paper,.art-sky,.art-candy) {
  --bg:#171d27; --panel:#29303c; --line:#4c5460; --text:#f5ede1;
  --muted:#c5b9aa; --accent:#ffd18b; --accent-ink:#06202e; --game-back:radial-gradient(circle at 50% -10%,#384153,#1c2532 55%,#111927);
  --game-panel:linear-gradient(155deg,#353744,#222b37); --game-edge:#75675b;
  --game-shadow:0 24px 48px rgba(2,8,20,.42);
  --game-button:#3f4250; --game-button-edge:#8d7963; --game-button-ink:#fff1da;
  color-scheme:dark;
}
html[data-portal-theme="dark"] body.art-match-3 > main { background:linear-gradient(155deg,#393444,#252b39); }
html[data-portal-theme="dark"] body.art-match-3 .goal { background:#50354c; border-color:#9c6880; }

/* Games with their own layout get the same cover-led framing. */
body.art-standalone:not(.art-bubble-shooter):not(.art-tower-defense) > main {
  width:min(calc(100% - 24px),var(--standalone-width,800px)); max-width:none;
  min-height:0; margin:14px auto 32px; padding:clamp(16px,2.8vw,27px);
  border:1px solid var(--standalone-line,#a9c5d5); border-radius:22px;
  background:var(--standalone-panel,linear-gradient(155deg,#fffdf4,#e9f5fc));
  box-shadow:0 20px 42px rgba(25,64,91,.19);
}
body.art-standalone:not(.art-tower-defense) { background:var(--standalone-back,radial-gradient(circle at 50% 0,#e2f6ff,#bbdced)); }
body.art-block-puzzle { --standalone-back:radial-gradient(circle at 50% 0,#fce3b9,#e5bd8f); --standalone-panel:linear-gradient(150deg,#fff7e8,#edd1aa); --standalone-line:#bd8b55; --standalone-width:680px; }
body.art-daily-word-guess { --standalone-back:radial-gradient(circle at 50% 0,#fff5dd,#e6d1b1); --standalone-panel:linear-gradient(#fffaf0,#f4e7d1); --standalone-line:#d3b78e; --standalone-width:610px; }
body.art-four-in-a-row { --standalone-back:radial-gradient(circle at 50% 0,#d9f1ff,#b0d4ed); --standalone-panel:linear-gradient(#f9fdff,#e9f2fa); --standalone-line:#9abedc; --standalone-width:720px; }
body.art-spot-the-difference { --standalone-back:radial-gradient(circle at 50% 0,#e9f4dd,#d2dbc5); --standalone-panel:linear-gradient(#fffdf1,#e9efdc); --standalone-line:#aabd92; --standalone-width:1100px; }
body.art-brick-breaker,body.art-pong,body.art-snake { --standalone-back:radial-gradient(circle at 50% 0,#324a7a,#111e3a); --standalone-panel:linear-gradient(#283b61,#142344); --standalone-line:#5d83b9; }
body.art-robo-run,body.art-sky-hopper { --standalone-back:radial-gradient(circle at 50% 0,#e1f7ff,#a7d8f2); --standalone-panel:linear-gradient(#fffdf1,#e5f5fc); --standalone-line:#8fc6df; }
body.art-standalone:is(.art-brick-breaker,.art-pong,.art-snake) :is(.stage,canvas) { border-radius:17px; box-shadow:0 0 0 5px #3b68a1,0 14px 28px rgba(0,13,40,.38); }
body.art-standalone:is(.art-robo-run,.art-sky-hopper,.art-spot-the-difference) canvas { outline:7px solid #a6774b; border-radius:16px; box-shadow:0 14px 26px rgba(40,73,79,.23); }
body.art-bubble-shooter { --standalone-back:radial-gradient(circle at 50% 0,#dff8ff,#b0e2ec); }
body.art-bubble-shooter #wrap { padding:6px; border:7px solid #5aacc7; border-radius:21px; background:#e9fbfb; box-shadow:0 16px 32px rgba(30,95,125,.26); }
body.art-bubble-shooter #hud { padding:10px 16px; border:1px solid #8cccd8; border-radius:12px; background:#fffefa; color:#245273; }
body.art-2048 { --standalone-back:radial-gradient(circle at 50% 0,#e9f4df,#cfdbbd); --standalone-line:#a4bc94; --standalone-panel:linear-gradient(#f9fff1,#e8f1de); --standalone-width:690px; }
body.art-2048 .aurora { display:none; }
body.art-2048 .app { min-height:0; justify-content:flex-start; }
body.art-2048 .board { --cell:calc((var(--w) - 16px - var(--gap) * 5) / 4); border:8px solid #a97e51; background:#dec9a7; box-shadow:0 16px 30px rgba(68,54,35,.28),inset 0 2px 0 #fff5da; }
body.art-2048 .cells i { background:#bda686; border-radius:16%; }
body.art-2048 .face { border-radius:16%; }
html[data-portal-theme="dark"] body.art-standalone:not(.art-tower-defense) { --standalone-back:radial-gradient(circle at 50% 0,#30445c,#121d2c); }
html[data-portal-theme="dark"] body.art-standalone:not(.art-bubble-shooter):not(.art-tower-defense) > main { --standalone-panel:linear-gradient(#30394a,#202b3a); --standalone-line:#617186; color:#f6f2e9; }
html[data-portal-theme="dark"] body.art-bubble-shooter #hud { background:#24384b; border-color:#587c93; color:#f5f7ec; }
html[data-portal-theme="dark"] body.art-2048 .app { --ink:#f9f2e2; --muted:#d3c5af; --panel:#45505c; --panel-line:#6d777e; }
html[data-portal-theme="dark"] body.cover-play { --play-page:radial-gradient(circle at 50% 0,#354255,#121c2b); --play-surface:linear-gradient(#333e4e,#202c3c); --play-text:#fff3df; --play-muted:#d0c2b2; --play-line:#647283; --play-control:#39475a; --play-control-line:#758398; --play-shadow:0 22px 48px rgba(3,10,22,.4); }
html[data-portal-theme="dark"] body.cover-play.cover-slide .tile { color:#173b68; }
@media(max-width:640px) {
  body.game-page.art-base > main { width:calc(100% - 16px); margin:8px auto 22px; padding:16px 11px 21px; border-radius:18px; }
  body.game-page.art-base > main h1 { font-size:1.7rem; }
  body.game-page.art-base > main .hud > span { min-height:42px; padding:6px 9px; font-size:.78rem; }
  body.art-water-sort .tubes { padding:12px 4px; border-width:5px; }
  body.art-codeword .cwgrid,body.art-color-paths .pgrid,body.art-number-link .pgrid,body.art-match-3 .m3 { border-width:5px; padding:5px; }
  body.art-standalone:not(.art-bubble-shooter):not(.art-tower-defense) > main { width:calc(100% - 16px); margin:8px auto 22px; padding:14px 10px; border-radius:17px; }
}