/* Desk-at-home surfaces, lighting, props, piece presence — all 20 games */
#play.screen.game{
  position:relative;
  isolation:isolate;
  background:var(--desk-base,#d8c4a4);
  background-image:var(--desk-tex);
  background-size:cover;
  min-height:100dvh;
}
#play.screen.game::before{
  content:"";
  pointer-events:none;
  position:absolute;inset:0;
  background:
    radial-gradient(120% 70% at 18% -10%, rgba(255,248,230,.42), transparent 52%),
    linear-gradient(180deg, rgba(20,14,8,.08), transparent 28%, rgba(20,14,8,.18));
  z-index:0;
}
#play .bar,#play .wrap,#play .desk-props{position:relative;z-index:1}
#play .wrap{
  width:min(520px,100%);
  margin:0 auto;
  padding:0 12px calc(28px + env(safe-area-inset-bottom));
}
.desk-stage{
  position:relative;
  border-radius:18px;
  padding:14px 12px 16px;
  background:rgba(255,252,245,.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 18px 40px rgba(28,18,8,.22);
}
.desk-stage #stage{position:relative;z-index:2}
#play .scell,#play .pc,#play .tile,#play .mcell,#play .c2048,#play .ncell,
#play .bcell,#play .tube,#play .wcell,#play .gcell,#play .xcell,
#play .ch-sq .ch-piece,#play .mem-card,#play .dom-bone,
#play [class*="card"],#play .s-tile,#play .s-card-face{
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 3px 8px rgba(20,12,6,.18);
}
#play button:active.scell,
#play button:active.pc,
#play button:active.tile,
#play button:active.mcell,
#play .s-press{
  transform:scale(.97);
  transition:transform 140ms cubic-bezier(.2,.8,.2,1);
}
.desk-props{
  pointer-events:none;
  position:absolute;inset:0;
  z-index:0;
  overflow:hidden;
}
.desk-prop{
  position:absolute;
  opacity:.88;
  filter:drop-shadow(0 6px 10px rgba(20,12,6,.28));
}
.desk-prop svg{display:block}
#play.room-sudoku,#play.room-kenken,#play.room-cross,#play.room-nono,#play.room-mines{
  --desk-base:#e4d7c2;
  --desk-tex:
    repeating-linear-gradient(0deg, rgba(70,90,120,.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(70,90,120,.05) 0 1px, transparent 1px 22px),
    linear-gradient(#f3ead8,#e2d3b8);
}
#play.room-mahjong{
  --desk-base:#c9b07a;
  --desk-tex:
    repeating-linear-gradient(90deg, rgba(90,60,20,.12) 0 10px, rgba(210,180,110,.35) 10px 18px),
    linear-gradient(#d7c08a,#b89455);
}
#play.room-solitaire,#play.room-spider,#play.room-freecell{
  --desk-base:#1b4332;
  --desk-tex:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.06), transparent 40%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 2px, transparent 2px 7px),
    linear-gradient(#245744,#163628);
}
#play.room-words,#play.room-wordle,#play.room-anagram{
  --desk-base:#efe6d4;
  --desk-tex:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(90,130,180,.18) 27px 28px),
    linear-gradient(#f7f1e4,#e8dcc6);
}
#play.room-sort,#play.room-match{
  --desk-base:#c9a36a;
  --desk-tex:
    radial-gradient(ellipse at 50% 0, rgba(255,240,210,.25), transparent 55%),
    linear-gradient(#d4b07a,#a87a3e);
}
#play.room-g2048,#play.room-blocks{
  --desk-base:#c9b48a;
  --desk-tex:
    radial-gradient(circle at 12% 18%, rgba(90,50,20,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 64%, rgba(90,50,20,.1) 0 3px, transparent 4px),
    linear-gradient(#d8c49a,#b89a68);
}
#play.room-memory,#play.room-domino,#play.room-chess,#play.room-checkers{
  --desk-base:#7a5530;
  --desk-tex:
    repeating-linear-gradient(90deg, rgba(255,220,160,.08) 0 3px, transparent 3px 14px),
    linear-gradient(#8a6238,#5a3a1c);
}
#play.room-snake{
  --desk-base:#d6cbb4;
  --desk-tex:
    repeating-linear-gradient(0deg, rgba(40,70,40,.08) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(40,70,40,.06) 0 1px, transparent 1px 16px),
    linear-gradient(#e4dcc8,#cfc3a8);
}
body.dark #play.screen.game, body.oled #play.screen.game{
  filter:saturate(.92);
}
body.reduce .desk-prop{opacity:.55}
body.reduce #play button:active.scell,
body.reduce #play .s-press{transform:none}
@media (max-width:420px){
  .desk-prop.edge-right,.desk-prop.edge-left{transform:scale(.78);transform-origin:center}
}

/* —— Legibility on any desk surface (WCAG AA): frosted cream pill + dark ink —— */
#play .bar #playTitle,
#play .hud > span:not(:empty),
#play .wrap > .status:not(:empty),
.game.room-mahjong .mj-toolbar label{
  color:#241c14 !important;
  background:rgba(255,250,240,.86);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  border-radius:999px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 2px 8px rgba(40,28,14,.14);
}
#play .bar #playTitle{padding:4px 14px;flex:0 1 auto !important;margin-inline:auto}
#play .hud > span:not(:empty){padding:3px 10px;font-variant-numeric:tabular-nums}
#play .wrap > .status:not(:empty){width:fit-content;max-width:100%;margin-inline:auto;padding:6px 14px;border-radius:14px;box-sizing:border-box;font-weight:600}
.game.room-mahjong .mj-toolbar label{padding:4px 6px 4px 14px;display:inline-flex;align-items:center;gap:8px}
.game.room-mahjong .mj-toolbar button,
.game.room-mahjong .mj-toolbar .tool{
  color:#241c14 !important;background:rgba(255,250,240,.9) !important;
  border:1px solid rgba(60,40,20,.22) !important;opacity:1 !important;filter:none !important;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:600;
}
body.dark #play .bar #playTitle,body.oled #play .bar #playTitle,
body.dark #play .hud > span:not(:empty),body.oled #play .hud > span:not(:empty),
body.dark #play .wrap > .status:not(:empty),body.oled #play .wrap > .status:not(:empty),
body.dark .game.room-mahjong .mj-toolbar label,body.oled .game.room-mahjong .mj-toolbar label,
body.dark .game.room-mahjong .mj-toolbar button,body.oled .game.room-mahjong .mj-toolbar button{
  color:#f6efe4 !important;background:rgba(22,17,12,.82) !important;text-shadow:0 1px 0 rgba(0,0,0,.5);
  border-color:rgba(255,255,255,.14) !important;
}
/* Memory Moves/Time: readable on every desk */
.mem-hud{color:#241c14 !important}
.mem-hud > span{background:rgba(255,250,240,.88);border-radius:999px;padding:4px 12px;box-shadow:0 1px 6px rgba(40,28,14,.14);font-variant-numeric:tabular-nums}
body.dark .mem-hud,body.oled .mem-hud{color:#f6efe4 !important}
body.dark .mem-hud > span,body.oled .mem-hud > span{background:rgba(22,17,12,.82)}

/* —— Shared chrome contrast (all games, light + dark) —— */
/* frosted buttons keep dark ink even when the page text is light */
body.dark .game .tool:not(.on),body.oled .game .tool:not(.on),
body.dark .game .bar .back,body.oled .game .bar .back,
body.dark .game .bar .ghost,body.oled .game .bar .ghost,
body.dark .game .bar button:not(.on),body.oled .game .bar button:not(.on){color:#241c14}
/* active states on gold: dark ink, AA */
.game .tool.on,.game .fl-lv.on{color:#241c14!important}
.game .fl-lv.on small{color:rgba(36,28,20,.82)!important}
body.dark .fl-lv:not(.on) small,body.oled .fl-lv:not(.on) small{color:#d8ccb8}
.pad b .fl-left{color:#5c5348}
body.dark .pad b .fl-left,body.oled .pad b .fl-left{color:inherit;opacity:.85}
.fl-notes i{opacity:1}
body.dark .settings,body.oled .settings{color:#241c14}

/* —— Shared top bar: 44px tap targets (Home, difficulty, Settings) —— */
.game .bar .back,.game .bar #back{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.game .bar .select,.game .bar #difficulty{min-height:44px}
.settings{min-height:44px;min-width:44px;top:12px!important}

/* —— Home dock: "The deal" link readable (was small gold under a white glow) —— */
#dock.dock #whyLink{color:#fff4d6!important;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:3px;box-shadow:none!important;border:1px solid rgba(255,244,214,.28)!important;min-height:44px}
/* —— Muted captions: shared token darkened in stacked-ui.css; cover hard-coded fallbacks too —— */
.fl-meta,.ana-cap,.xc3 .xc-sub,.wd-head small,.nono-lv small{color:var(--s-mute)}
/* —— Felt rooms (Solitaire, FreeCell, Spider): light text on the green felt in every theme —— */
body.dark .game.room-solitaire .bar .back,body.dark .game.room-spider .bar .back,body.oled .game.room-solitaire .bar .back,body.oled .game.room-spider .bar .back,
body.dark .game.room-solitaire .tool:not(.on),body.dark .game.room-spider .tool:not(.on),body.oled .game.room-solitaire .tool:not(.on),body.oled .game.room-spider .tool:not(.on),
body.dark .game.room-solitaire .bar .ghost,body.dark .game.room-spider .bar .ghost,body.oled .game.room-solitaire .bar .ghost,body.oled .game.room-spider .bar .ghost{color:#fff8ec}
.game.room-solitaire .sol-meta b,.game.room-spider .sol-meta b{color:#ffe7a3}
.game.room-solitaire .sp-lv.on:not(.kl-win),.game.room-spider .sp-lv.on:not(.kl-win),.game.room-solitaire .sp-lv.on:not(.kl-win) span,.game.room-spider .sp-lv.on:not(.kl-win) span{color:#241c14!important}
.game.room-solitaire .sp-lv.on:not(.kl-win) .sp-pips,.game.room-spider .sp-lv.on:not(.kl-win) .sp-pips{color:#241c14!important}
.kl-opts .kl-win.on{background:rgba(0,0,0,.34)!important;color:#fff8ec!important}
.kl-opts .kl-win.on .sp-pips{color:#ffe7a3!important}
.game.room-spider .sp-stock,.game.room-solitaire .sp-stock{color:#fff8ec}
/* —— Mini Crossword: dark ink on the gold active cell in dark themes —— */
body.dark #play .xc3 .xc-board .xcell.on,body.oled #play .xc3 .xc-board .xcell.on,body.dark #play .xc3 .xc-board .xcell.on *,body.oled #play .xc3 .xc-board .xcell.on *{color:#241c14}
/* R5: Settings chip scrolls with the page instead of floating over content */
.settings{position:absolute!important}
/* R5: top bar never wraps (360px+). In a game, Settings is a 44px gear so the title keeps its room */
.settings{display:inline-flex!important;align-items:center;justify-content:center;gap:6px}
.settings .set-ic{width:16px;height:16px;flex:none}
body:has(#play.on) .settings{width:44px;height:44px;min-width:44px;padding:0!important;border-radius:50%!important}
body:has(#play.on) .settings .set-ic{width:20px;height:20px}
body:has(#play.on) .settings .set-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#play .bar{flex-wrap:nowrap!important;padding-right:max(64px,calc(56px + env(safe-area-inset-right)))!important}
#play .bar > *{flex-shrink:0}
#play .bar #playTitle{flex:0 1 auto!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#play .bar #difficulty{flex:0 1 auto;min-width:72px;max-width:110px}
@media (max-width:400px){#play .bar{gap:6px!important}#play .bar #playTitle{font-size:15px;padding:4px 10px!important}}