/* ==========================================================================
   PLACEHOLDER GAME — delete with src/game/placeholder-game.js
   Stand-in visuals only; a real game brings its own rendering.
   ========================================================================== */
.pg{position:absolute;inset:0;overflow:hidden;background:repeating-linear-gradient(45deg,color-mix(in oklch,var(--bg) 92%,black) 0 18px,var(--bg) 18px 36px)}
.pg-grid{position:absolute;inset:0;background-image:linear-gradient(var(--env-line) 1px,transparent 1px),linear-gradient(90deg,var(--env-line) 1px,transparent 1px);background-size:48px 48px}
.pg-body{position:absolute;inset:0;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:12px;text-align:center;padding:calc(76px + var(--sa-t)) max(24px,var(--sa-r)) max(24px,var(--sa-b)) max(24px,var(--sa-l))}
.pg-kicker{margin:0;font:600 13px/1.2 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pg-title{margin:0;font:700 clamp(26px,5vw,52px)/1 var(--font-display);text-transform:var(--display-case);letter-spacing:calc(var(--display-track) * .5)}
.pg-title:focus{outline:none}
.pg-orb{width:84px;height:84px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;animation:pgpulse 2.4s ease-in-out infinite}
.pg-orb::after{content:"";width:22px;height:22px;border-radius:50%;background:var(--fg)}
@keyframes pgpulse{50%{transform:scale(1.12);border-color:var(--muted)}}
.pg-ctx{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:0;font:12px/1.4 ui-monospace,Consolas,monospace;color:var(--muted);max-width:560px}
.pg-ctx div{display:flex;gap:6px;min-width:0}.pg-ctx dt{opacity:.75}.pg-ctx dd{margin:0;color:var(--fg);overflow-wrap:anywhere}
.pg-score{margin:0;color:var(--muted)}.pg-score b{color:var(--fg);font-variant-numeric:tabular-nums}
.pg-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pg-btn{min-height:44px;padding:0 18px;border-radius:10px;border:1px dashed var(--line);background:var(--surface-2);color:var(--fg);font-weight:650}
@media (hover:hover){.pg-btn:hover{background:var(--surface-3)}}
.pg-btn-main{border-style:solid;border-color:var(--fg)}