/* Hallmark · component: game-frame · genre: playful · theme: Hum · states: default hover focus active disabled · contrast: pass */
/* game-frame.css — the frame around the 110 skeleton game pages
 * (docs/GAMES_DISPLAY.md §E). Linked by tools/apply-game-frame.mjs AFTER the
 * page's inline <style>, so every rule here is prefixed body[data-pip-frame]
 * (0,2,0+) and beats the inline sheet's .game-wrap / .btn / body / #status
 * rules regardless of source order.
 *
 * Contract: the stage geometry is byte-identical to the inline sheet at every
 * width — the inline literal `.game-wrap{max-width:420px;margin:0 auto;
 * padding:1rem}` stays in the page and this file never sets padding or a
 * calc() width on .game-wrap. Inner width = 100% − 32 below 452px and 388
 * from 452px, exactly what 50/110 games size their canvas from.
 *
 * Tokens only (tokens.css arrives through site.css @import). The page accent
 * (--pip-accent, set inline on <body> by the tool from theme-color) is used
 * only as the cast shadow under the stage and, at 22% under ink, as the wash
 * behind the category link. Ad-well looks live in ad-wells.css; this file only
 * positions the two wells. No @import. */

/* ---------- 1. Ground + the two derived colors ---------- */
body[data-pip-frame]{
  --pip-cast:color-mix(in oklch, var(--pip-accent, var(--color-ink)) 62%, var(--color-accent-deep));
  --pip-wash:color-mix(in oklch, var(--pip-accent, var(--color-ink)) 22%, var(--color-well));
  background-color:var(--color-paper);
  background-image:
    radial-gradient(ellipse 80% 55% at 8% -10%, var(--color-blob-1) 0 34%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 100% 0%, var(--color-blob-2) 0 32%, transparent 56%),
    radial-gradient(ellipse 60% 45% at 92% 100%, var(--color-blob-3) 0 28%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 90%, var(--color-blob-4) 0 26%, transparent 52%);
  color:var(--color-ink);
  font-family:var(--font-body);
}

/* ---------- 2. Header (sticky butter bar; game-shell appends .pip-menu-btn) ---------- */
body[data-pip-frame] .game-header{position:sticky;top:0;z-index:var(--z-nav);display:flex;align-items:center;gap:var(--space-sm);min-height:56px;padding:0 var(--page-gutter);background:var(--color-accent);border-bottom:3px solid var(--color-ink)}
body[data-pip-frame] .game-header>a{font:700 var(--text-sm)/1 var(--font-display);color:var(--color-ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding-right:8px;white-space:nowrap}
body[data-pip-frame] .game-header>a:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
body[data-pip-frame] .game-tag{flex:1;min-width:0;font:500 11px/1 var(--font-label);letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none}
/* Shell v2 (2026-09-05): game-shell.js appends .pip-bar (Full screen · Sound ·
 * Pause, 44px each, ~208px) to the header and styles it itself. At 390 the bar
 * plus "← Play in Phone" leave no room for the tag, so it shows from 640 up. */
@media (min-width:640px){
  body[data-pip-frame] .game-tag{display:block}
}

/* ---------- 3. Stage — geometry preserved (padding/max-width/margin inline literal untouched below 452) ---------- */
/* <452: full-bleed stage, ink rules top and bottom, the accent cast below.
 * Side margins stay auto so the 420px cap (viewports 421–451) stays centered
 * exactly as today; inner width = 100% − 32. */
body[data-pip-frame] .game-wrap{margin:12px auto 24px;background:var(--color-well);border-top:3px solid var(--color-ink);border-bottom:3px solid var(--color-ink);border-radius:0;box-shadow:0 8px 0 0 var(--pip-cast);overflow:hidden}
/* ≥452: a bordered card. 426 = 420 + 2×3 border (border-box) → inner 388. */
@media (min-width:452px){
  body[data-pip-frame] .game-wrap{max-width:426px;margin:20px auto 32px;border:3px solid var(--color-ink);border-radius:var(--radius-card);overflow:hidden}
}

/* ---------- 4. Title (category link back to its booth + h1) ---------- */
body[data-pip-frame] .game-title{text-align:left;display:grid;gap:4px;margin:0 0 12px}
body[data-pip-frame] .game-title p{font:500 11px/1 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink);margin:0}
/* The only place accent nears text: a 22% wash under ink. */
body[data-pip-frame] .game-title p a{display:inline-block;padding:6px 10px;margin:0 0 4px;border-radius:var(--radius-pill);background:var(--pip-wash);color:inherit;text-decoration:none;min-height:auto}
body[data-pip-frame] .game-title p a:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
body[data-pip-frame] .game-title h1{font:800 var(--text-xl)/1.1 var(--font-display);letter-spacing:-.025em;margin:0;overflow-wrap:anywhere;min-width:0}
@media (min-width:768px){
  body[data-pip-frame] .game-title h1{font-size:var(--text-2xl)}
}

/* ---------- 5. Facts (ink-edged paper chips) ---------- */
body[data-pip-frame] .facts{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px;margin:0 0 12px}
body[data-pip-frame] .facts span{font:500 var(--text-xs)/1 var(--font-body);padding:6px 10px;border:2px solid var(--color-ink);border-radius:var(--radius-pill);background:var(--color-paper-2);color:var(--color-ink);white-space:nowrap}

/* ---------- 6. HUD (mono, tabular numbers, one ink rule above) ---------- */
body[data-pip-frame] .hud{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);min-height:44px;margin:0 0 8px;padding:8px 0 0;border-top:3px solid var(--color-ink);font:500 var(--text-sm)/1.2 var(--font-label);font-variant-numeric:tabular-nums;color:var(--color-ink-2)}

/* ---------- 7. Status (dashed paper slip; INVISIBLE but present while empty, so writing then
 * clearing it never moves the board — 2026-09-05: 19 games shifted 47px on every message) ---------- */
body[data-pip-frame] #status{font:600 var(--text-sm)/1.4 var(--font-body);text-align:center;padding:8px 12px;margin:0 0 8px;border:2px dashed var(--color-rule);border-radius:var(--radius-input);background:var(--color-paper-2);min-height:calc(1.4em + 20px)}
/* Ink by default; a game's own state class (#status.good/.bad …, 36 pages)
 * keeps its feedback color because the frame lets go once a class is set. */
body[data-pip-frame] #status:not([class]){color:var(--color-ink)}
body[data-pip-frame] #status:empty{visibility:hidden}

/* ---------- 8. Game area — untouched; only breathing room and containment ---------- */
body[data-pip-frame] .game-wrap>:is(#game-canvas,#card-grid,#color-btns){margin-block:8px;max-width:100%;box-sizing:border-box}
body[data-pip-frame] #game-canvas{max-width:100%;height:auto;display:block;margin-inline:auto;border-radius:10px}
body[data-pip-frame] #card-grid{max-width:100%;box-sizing:border-box}

/* ---------- 9. Buttons (butter pill, accent-deep cast; press only) ---------- */
body[data-pip-frame] .game-wrap .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.6rem 1.2rem;border:0;border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-ink);font:700 var(--text-sm)/1 var(--font-body);text-decoration:none;cursor:pointer;box-shadow:0 4px 0 0 var(--color-accent-deep);transition:transform 160ms cubic-bezier(0.16,1,0.3,1),box-shadow 160ms cubic-bezier(0.16,1,0.3,1);touch-action:manipulation}
@media (hover:hover){
  body[data-pip-frame] .game-wrap .btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 0 var(--color-accent-deep)}
}
body[data-pip-frame] .game-wrap .btn:active{transform:translateY(2px);box-shadow:0 2px 0 0 var(--color-accent-deep)}
body[data-pip-frame] .game-wrap .btn:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
body[data-pip-frame] .game-wrap .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:0 2px 0 0 var(--color-accent-deep)}
/* The HUD's New Game button is the compact size (its inline style is stripped by the tool). */
body[data-pip-frame] .game-wrap .hud .btn{min-height:44px;padding:.55rem .95rem}
/* Action row: .pip-actions (one-line pages, rewritten by the tool) and the
 * pretty-printed pages' .btn-row are the same row. */
body[data-pip-frame] .pip-actions,
body[data-pip-frame] .btn-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0 0}

/* ---------- 10. Ad wells — position only; looks come from ad-wells.css ---------- */
body[data-pip-frame] .ad-well[data-ad-slot="leaderboard"]{margin:var(--space-md) auto;width:min(100%,728px)}
body[data-pip-frame] .ad-well[data-ad-slot="rectangle"]{margin:var(--space-lg) auto;width:min(100%,336px)}

/* ---------- 11. Footer (moved after the shelf by the tool; 44px underlined links) ---------- */
body[data-pip-frame] footer{max-width:426px;margin:var(--space-lg) auto var(--space-xl);padding:0 var(--page-gutter);font:500 var(--text-xs)/1.6 var(--font-body);color:var(--color-muted);text-align:center}
body[data-pip-frame] footer a{color:var(--color-ink);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:10px 4px}
body[data-pip-frame] footer a:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}

/* ---------- 12. Motion ---------- */
@media (prefers-reduced-motion:reduce){
  body[data-pip-frame] .game-wrap .btn{transition:none}
  body[data-pip-frame] .game-wrap .btn:hover,
  body[data-pip-frame] .game-wrap .btn:active{transform:none}
}