/* Play surfaces for three small puzzle games, drawn from their existing cover art. */
body.cover-play { background:var(--play-page); color:var(--play-text); color-scheme:var(--play-scheme); }
body.cover-play > main {
  width:min(calc(100% - 32px),var(--play-width)); max-width:none;
  min-height:0; margin:18px auto 36px; padding:24px 28px 27px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  border:1px solid var(--play-line); border-radius:24px;
  background:var(--play-surface); color:var(--play-text); box-shadow:var(--play-shadow);
}
body.cover-play > main .game-kicker { margin:0; color:var(--play-accent); font-size:.68rem; font-weight:850; letter-spacing:.16em; }
body.cover-play > main h1 { margin:0; color:var(--play-text); font-size:clamp(1.85rem,3vw,2.55rem); line-height:1.1; letter-spacing:-.045em; text-align:center; }
body.cover-play > main .lead { max-width:640px; margin:0 0 8px; color:var(--play-muted); font-size:.96rem; line-height:1.5; text-align:center; }
body.cover-play > main button:not(.cell):not(.tile) { min-height:42px; border:1px solid var(--play-control-line); border-radius:11px; background:var(--play-control); color:var(--play-text); padding:8px 13px; font-weight:750; box-shadow:0 2px 5px rgba(0,0,0,.06); transition:transform .12s ease,background .12s ease,box-shadow .12s ease; }
body.cover-play > main button:not(.cell):not(.tile):not(:disabled):hover { transform:translateY(-1px); border-color:var(--play-accent); box-shadow:0 5px 11px rgba(0,0,0,.11); }
body.cover-play > main button:focus-visible,body.cover-play > main .cell:focus-visible,body.cover-play > main .tile:focus-visible { outline:3px solid var(--play-focus); outline-offset:2px; }
body.cover-play > main button:not(.cell):not(.tile).on { border-color:var(--play-accent); background:var(--play-selected); color:var(--play-selected-text); }
body.cover-play > main .bar,body.cover-play > main .levels { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; }
body.cover-play > main .hud { display:flex; justify-content:center; align-items:stretch; flex-wrap:wrap; gap:8px; margin:2px 0; color:var(--play-muted); }
body.cover-play > main .hud > span,body.cover-play > main .hud-counter { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:84px; min-height:51px; padding:6px 11px; border:1px solid var(--play-control-line); border-radius:11px; background:var(--play-control); color:var(--play-muted); font-size:.69rem; font-weight:750; letter-spacing:.045em; text-transform:uppercase; }
body.cover-play > main .hud b { color:var(--play-text); font-size:1.06rem; letter-spacing:0; }
body.cover-play > main #msg { min-height:0; margin:0; color:var(--play-accent); text-align:center; font-weight:750; }
body.cover-play > main #msg:empty { display:none; }
body.cover-play > main .help { max-width:650px; margin:0; color:var(--play-muted); font-size:.86rem; line-height:1.5; text-align:center; }
body.cover-play > main .game-overview { width:min(100%,720px); margin-top:4px; border-top:1px solid var(--play-line); padding-top:12px; color:var(--play-muted); }
body.cover-play > main .game-overview summary { width:max-content; max-width:100%; cursor:pointer; color:var(--play-accent); font-size:.85rem; font-weight:750; }
body.cover-play > main .game-overview .portal-intro { max-width:690px; margin:8px 0 0; padding:0; color:var(--play-muted); font-size:.88rem; line-height:1.65; }

/* Minesweeper: bright blue bevels and clean, legible numbered squares. */
body.cover-mine {
  --play-scheme:light; --play-width:1000px; --play-page:radial-gradient(circle at 50% 1%,#d4ecff 0,#eaf6ff 430px,#f2f8fc 850px);
  --play-surface:linear-gradient(160deg,#fff,#f2f9ff); --play-text:#183e70; --play-muted:#557092;
  --play-line:#c7def4; --play-accent:#1269b5; --play-focus:#f5a737;
  --play-control:#fff; --play-control-line:#c4d9eb; --play-selected:#dcefff; --play-selected-text:#125995;
  --play-shadow:0 22px 55px rgba(31,93,153,.14);
}
body.cover-mine > main .board-viewport { width:100%; max-width:930px; overflow-x:auto; overscroll-behavior-inline:contain; padding:4px 2px 13px; scrollbar-color:#8ebce6 transparent; }
body.cover-mine > main .board-viewport:focus-visible { outline:3px solid var(--play-focus); outline-offset:2px; border-radius:15px; }
body.cover-mine > main #board {
  --cs:min(43px,max(25px,calc((min(100vw - 40px,900px) - 52px) / var(--cols))));
  width:max-content; margin:auto; padding:7px; gap:2px; border:6px solid #2e73b8; border-radius:17px;
  background:#3d82c6; box-shadow:0 11px 0 #1b518d,0 20px 28px rgba(32,90,151,.22),inset 0 3px 2px rgba(255,255,255,.32);
}
body.cover-mine > main .cell { border-radius:5px; background:linear-gradient(150deg,#d9ecff 0,#9ac8f5 47%,#6da8e3 100%); color:#173d70; box-shadow:inset 0 2px 1px #fff,inset 0 -3px 0 #5d96d1,0 1px 2px #1c5492; }
body.cover-mine > main .cell:not(.open):hover { background:linear-gradient(150deg,#f2f9ff,#aed6fc); }
body.cover-mine > main .cell.open { background:#f6fbff; box-shadow:inset 0 0 0 1px #b8d5ec; }
body.cover-mine > main .cell.mine { background:#ffe0e0; }
body.cover-mine > main .cell.boom { background:#ffaaaa; }
body.cover-mine > main .cell.wrong { background:#ffd0d0; }
body.cover-mine > main .n1 { color:#205ec6; } body.cover-mine > main .n2 { color:#16804b; } body.cover-mine > main .n3 { color:#c72e37; }
body.cover-mine > main .hud-counter { min-width:103px; }
body.cover-mine > main .hud-label { display:block; margin-bottom:1px; }
body.cover-mine > main .lcd { min-width:0; padding:0; background:none; color:#1458a5; font:800 1.4rem/1.1 ui-monospace,Menlo,monospace; }
body.cover-mine > main #face { align-self:center; min-width:51px; min-height:51px; padding:6px; border-radius:12px; background:#dceeff; font-size:1.55rem; }
body.cover-mine > main #flagmode.on { background:#ffe0dc; border-color:#eb6e65; color:#a83633; }
body.cover-mine > main .board-scroll-note { display:none; }

/* Sliding Puzzle: a cobalt tray, ivory tiles, and warm tabletop. */
body.cover-slide {
  --play-scheme:light; --play-width:750px; --play-page:radial-gradient(circle at 50% 0,#f8dca7 0,#f5ece0 470px,#f1ede8 900px);
  --play-surface:linear-gradient(155deg,#fffdf6,#fff8ea); --play-text:#173b68; --play-muted:#696d73;
  --play-line:#e1d1b4; --play-accent:#125f9b; --play-focus:#e59a22;
  --play-control:#fffdfa; --play-control-line:#d8cdbb; --play-selected:#e1effa; --play-selected-text:#125f9b;
  --play-shadow:0 22px 48px rgba(91,65,29,.17);
}
body.cover-slide > main #board {
  --s:min(510px,calc(100vw - 66px)); --gap:7px;
  --c:calc((var(--s) - 16px - var(--gap) * (var(--n) + 1)) / var(--n));
  border:8px solid #155e9d; border-radius:21px; background:linear-gradient(145deg,#2b8bd3,#155d9e);
  box-shadow:0 12px 0 #104d85,0 22px 31px rgba(23,75,124,.25),inset 0 3px 2px rgba(255,255,255,.34);
}
body.cover-slide > main .tile,body.cover-slide > main .tile.home {
  border:1px solid #e0d4b5; border-radius:10px; background:linear-gradient(155deg,#fffdf1,#f0dfbf);
  color:#113d72; font-family:Georgia,serif; font-weight:800; text-shadow:1px 1px 0 #fff;
  box-shadow:0 4px 0 #c9b28a,0 7px 11px rgba(11,58,100,.24),inset 0 2px 0 #fff;
}
body.cover-slide > main .tile:not(:disabled):hover { background:linear-gradient(155deg,#fff,#f8e9ca); }
body.cover-slide > main .bar #new { border-color:#145f9f; background:#176cae; color:#fff; }
body.cover-slide > main .hud > span:last-child { min-width:170px; font-size:.76rem; letter-spacing:0; text-transform:none; }

/* Lights Out: midnight stone, recessed dark cells, and golden lamps. */
body.cover-lights {
  --play-scheme:dark; --play-width:750px; --play-page:radial-gradient(circle at 50% 3%,#27426c 0,#132644 400px,#0b182c 850px);
  --play-surface:linear-gradient(155deg,#203a58,#10233b); --play-text:#f7eacb; --play-muted:#c5d2de;
  --play-line:#496483; --play-accent:#ffce65; --play-focus:#84d8ff;
  --play-control:#263d5a; --play-control-line:#526987; --play-selected:#715527; --play-selected-text:#fff3ce;
  --play-shadow:0 22px 55px rgba(2,14,35,.43);
}
body.cover-lights > main #board {
  --s:min(510px,calc(100vw - 66px)); gap:6px; padding:9px; border:11px solid #304865; border-radius:19px;
  background:linear-gradient(145deg,#253a57,#132640); box-shadow:0 12px 0 #0a1c31,0 23px 30px rgba(2,10,25,.46),inset 0 3px 6px rgba(0,0,0,.44);
}
body.cover-lights > main .cell:not(.on) { border:1px solid #536b86; border-radius:9px; background:linear-gradient(145deg,#334b69,#162b48); box-shadow:inset 0 2px 2px rgba(255,255,255,.1),inset 0 -3px 5px rgba(0,0,0,.3); }
body.cover-lights > main .cell.on { border:1px solid #ffdc84; border-radius:9px; background:radial-gradient(circle at 38% 28%,#fffbe3 0,#ffe083 43%,#f2aa23 93%); box-shadow:0 0 19px rgba(255,190,61,.62),inset 0 2px 6px rgba(255,255,255,.7),inset 0 -4px 6px rgba(157,86,12,.25); }
body.cover-lights > main .cell.hint { outline:3px solid #7bdcff; outline-offset:-4px; }
body.cover-lights > main #new { border-color:#e9ab41; background:#e9ac42; color:#1b2a3b; }
body.cover-lights > main .hud > span { min-width:95px; }

@media (max-width:640px) {
  body.cover-play > main { width:calc(100% - 20px); margin:10px auto 22px; padding:17px 12px 20px; border-radius:18px; gap:10px; }
  body.cover-play > main h1 { font-size:1.8rem; }
  body.cover-play > main .lead { font-size:.87rem; margin-bottom:3px; }
  body.cover-play > main button:not(.cell):not(.tile) { min-height:40px; padding:7px 10px; font-size:.85rem; }
  body.cover-play > main .hud > span,body.cover-play > main .hud-counter { min-width:76px; min-height:48px; padding:5px 8px; }
  body.cover-play > main .help { font-size:.78rem; }
  body.cover-mine > main .board-viewport { margin-inline:-2px; padding-bottom:13px; }
  body.cover-mine > main #board { --cs:min(34px,max(25px,calc((100vw - 122px) / var(--cols)))); }
  body.cover-mine > main .board-scroll-note { display:block; margin:-7px 0 0; color:var(--play-muted); font-size:.72rem; text-align:center; }
  body.cover-mine > main .board-viewport:has(#board[style*="--cols: 9"]) + .board-scroll-note { display:none; }
  body.cover-slide > main #board,body.cover-lights > main #board { --s:min(510px,calc(100vw - 62px)); }
  body.cover-lights > main #board { gap:4px; padding:5px; border-width:8px; }
}
@media (prefers-reduced-motion:reduce) {
  body.cover-play > main button:not(.cell):not(.tile) { transition:none; }
  body.cover-play > main button:not(.cell):not(.tile):hover { transform:none; }
}