/* Scoped Arcade 2D graphics/guide layer — no effect on Sleddin, Arcade 3D,
   player controls, game logic or leaderboard score validation. */
/* Controller focus ring (gamepad-navigation.js) in Infin8 cyan, the design
   system's focus colour, instead of the navigation layer's neutral yellow. */
:root{--gp-focus-color:#63e6ff}
.arcade2d-access{margin:15px 0 28px;padding:0;max-width:100%;color:#eafbff;
 background:linear-gradient(118deg,#091c39ef,#21113bef);border:1px solid #52dcfa88;
 border-radius:16px;box-shadow:0 12px 36px #0005}
.arcade2d-access>summary{cursor:pointer;list-style:none;padding:14px 18px;min-height:48px;
 display:flex;align-items:center;font-weight:900;letter-spacing:.035em;color:#9df1ff}
.arcade2d-access>summary::-webkit-details-marker{display:none}
.arcade2d-access>summary::after{content:'+';margin-left:auto;font-size:22px}
.arcade2d-access[open]>summary::after{content:'−'}
.arcade2d-access>summary:focus-visible{outline:3px solid #b6a2ff;outline-offset:3px}
.arcade2d-access-body{display:grid;gap:10px;padding:2px 18px 18px}
.arcade2d-access-body>strong{font-size:clamp(.87rem,1.7vw,1rem);color:#fff}
.arcade2d-access-body>p{margin:0;line-height:1.55;color:#c7dcec;font-size:.87rem}
.arcade2d-access-option{display:flex;gap:12px;align-items:center;min-height:48px;
 padding:8px 10px;border:1px solid #526cad57;border-radius:10px;background:#101f3a9b;cursor:pointer}
.arcade2d-access-option input{width:22px;height:22px;accent-color:#62e7ff;flex:none}
.arcade2d-access-option span{display:grid;gap:3px}
.arcade2d-access-option b{font-size:.86rem}
.arcade2d-access-option small{font-size:.76rem;color:#afc5db;line-height:1.3}
.arcade2d-access-links{display:flex;gap:10px;flex-wrap:wrap}
.arcade2d-access-links a{display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;padding:8px 12px;border-radius:9px;border:1px solid #62e7ff8c;
 color:#9eefff;text-decoration:none;font-size:.84rem;font-weight:800}
.arcade2d-access-links a:hover{background:#123758}
html[data-arcade2d-clarity='on'] .game-stage canvas{filter:contrast(1.16) saturate(1.2)}
html[data-arcade2d-sharp='on'] .game-stage canvas{image-rendering:pixelated}
html[data-arcade2d-quiet='on'] .arcade2d-access,
html[data-arcade2d-quiet='on'] .game-stage{box-shadow:none}
html[data-arcade2d-quiet='on'] .game-stage::before,
html[data-arcade2d-quiet='on'] .game-stage::after{animation:none!important}
@media(prefers-reduced-motion:reduce){.arcade2d-access{box-shadow:none}}
@media(max-width:540px){.arcade2d-access{margin:9px 0 16px;border-radius:11px}
 .arcade2d-access>summary{padding:12px}.arcade2d-access-body{padding:0 12px 15px}}

/* ---------- Phone fixes (all 2D games) ---------- */
@media (max-width:540px){
 /* Six result stats need two rows on a phone; labels must not collide. */
 .run-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
 .run-summary span{letter-spacing:.04em;overflow-wrap:anywhere}
}
@media (pointer:coarse),(max-width:760px){
 /* The touch pause sits in the stage's top-left corner; keep the HUD clear of it. */
 html[data-game-state="playing"]:has(.touch-pause) .hud-row,
 html[data-game-state="paused"]:has(.touch-pause) .hud-row{left:calc(max(10px,env(safe-area-inset-left)) + 54px)}
 .game-stage .touch-pause{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;align-items:center;border-radius:50%;font-size:.54rem}
}
@media (pointer:coarse){
 /* 44 px minimum touch targets for the page furniture and trick pads. */
 .game-topbar .icon-button,.game-topbar .text-button{min-height:44px}
 .game-brand{min-height:44px}
 .trick-button{min-width:44px;min-height:44px}
 #touch-controls button{min-width:44px;min-height:44px}
}
@media (pointer:coarse),(max-width:760px){
 [data-finder-choice],#finder-hint-control{min-height:44px}
}

/* ---------- Controller prompts ---------- */
.arcade2d-pad-prompts{display:none;flex-wrap:wrap;gap:10px 18px;margin:12px 0 0;padding:12px 16px;list-style:none;
 border:1px solid #62e7ff66;border-radius:14px;background:linear-gradient(118deg,#091c39f2,#21113bf2);color:#eafbff}
.arcade2d-pad-prompts li{display:flex;align-items:center;gap:8px;font-weight:800}
.arcade2d-pad-prompts kbd{display:inline-grid;place-items:center;min-width:2.1em;height:2.1em;padding:0 .5em;border-radius:999px;
 border:2px solid #62e7ff;background:#050711;color:#9df1ff;font:900 .82em/1 system-ui,sans-serif}
.arcade2d-pad-prompts kbd[data-pad-button="a"]{border-color:#5ce6b4;color:#b6ffe3}
.arcade2d-pad-prompts kbd[data-pad-button="b"]{border-color:#ff7a9a;color:#ffd0db}
.arcade2d-pad-prompts kbd[data-pad-button="x"]{border-color:#7c9dff;color:#d3dcff}
.arcade2d-pad-prompts kbd[data-pad-button="y"]{border-color:#ffe267;color:#fff4bf}
html[data-input-device="gamepad"] .arcade2d-pad-prompts{display:flex}
.arcade2d-layout-field{display:grid;gap:6px;font-weight:800;font-size:.86rem}
.arcade2d-layout-field select{min-height:44px;padding:8px 10px;border-radius:10px;border:1px solid #62e7ff8c;background:#080d20;color:#fff;font:inherit}

/* ---------- Console / TV (10-foot) layout ----------
   html[data-arcade-layout="console"]: Xbox/PlayStation/Nintendo browsers or the
   "TV & console" setting. Designed for 1920x1080 and 1280x720 at viewing distance:
   20 px+ body text, 28 px+ HUD readouts, 56 px+ targets, 5% TV-safe margins,
   controller prompts instead of touch/mouse hints, high-contrast Infin8 panels. */
html[data-arcade-layout="console"]{--console-safe-x:5vw;--console-safe-y:5vh;--console-cyan:#63e6ff;--console-purple:#b66cff;
 --console-panel:linear-gradient(145deg,rgba(10,16,38,.97),rgba(20,10,40,.97));font-size:20px}
html[data-arcade-layout="console"] body{font-size:20px;line-height:1.5;padding:var(--console-safe-y) var(--console-safe-x);box-sizing:border-box;overscroll-behavior:none}
html[data-arcade-layout="console"] :is(.game-page,.profile-shell,.board-shell,main){width:100%;max-width:none;margin-left:0;margin-right:0}
html[data-arcade-layout="console"] :is(p,li,label,td,th,small,.overlay-note,.card-note,.game-note){font-size:max(20px,1em)}
html[data-arcade-layout="console"] :is(h1){font-size:clamp(2.6rem,4.4vw,4.4rem)}
html[data-arcade-layout="console"] :is(h2){font-size:clamp(1.9rem,3vw,3rem)}
/* Targets: 56 px minimum with generous padding for D-pad focus. */
html[data-arcade-layout="console"] :is(button,select,summary,input[type="text"],input[type="email"],input[type="password"],
 .primary-button,.secondary-button,.text-button,.icon-button,.arcade-button,a.side-link,.arcade2d-access-links a,nav a,.game-brand){
 min-height:56px;min-width:56px;font-size:20px;padding-left:20px;padding-right:20px}
html[data-arcade-layout="console"] input[type="checkbox"]{width:32px;height:32px}
html[data-arcade-layout="console"] :is(button,a,select,summary,input,[tabindex]):focus-visible{
 outline:4px solid var(--console-cyan);outline-offset:4px;box-shadow:0 0 0 10px rgba(99,230,255,.22)}
/* Touch controls and touch/mouse hints give way to controller prompts. */
html[data-arcade-layout="console"] :is(.touch-controls,#touch-controls,.touch-pause,.touch-cluster,.touch-pad,.controls-inline){display:none!important}
html[data-arcade-layout="console"] .arcade2d-pad-prompts{display:flex;font-size:22px;gap:14px 26px;padding:16px 22px}
/* HUD: 28 px+ readouts on every 2D game. */
html[data-arcade-layout="console"] .hud-chip{min-width:120px;padding:10px 14px}
html[data-arcade-layout="console"] .hud-chip span{font-size:15px}
html[data-arcade-layout="console"] .hud-chip strong{font-size:30px}
html[data-arcade-layout="console"] :is(.fight-hud,.fighter-hud,.xp-hud){font-size:28px}
html[data-arcade-layout="console"] .hud-row{top:16px;left:16px;right:16px}
/* Stage: fit the safe area, never taller than the TV. */
html[data-arcade-layout="console"]{--console-chrome:200px}
html[data-arcade-layout="console"] .game-stage{max-height:calc(100vh - 2 * var(--console-safe-y) - var(--console-chrome))}
html[data-arcade-layout="console"] .game-column{width:min(100%,calc((100vh - 2 * var(--console-safe-y) - var(--console-chrome)) * 16 / 9));margin-inline:auto}
/* High-contrast themed panels: menus, pause, results, side cards, leaderboards. */
html[data-arcade-layout="console"] :is(.overlay-card,.side-card,.profile-card,.arcade2d-access,.board-card,.leaderboard-card,.game-card){
 background:var(--console-panel);border:2px solid rgba(99,230,255,.55);box-shadow:0 0 0 1px rgba(182,108,255,.35),0 24px 60px rgba(0,0,0,.55)}
html[data-arcade-layout="console"] .overlay-card{padding:32px 40px;width:min(1100px,92%);max-width:none}
html[data-arcade-layout="console"] .run-summary strong{font-size:32px}
html[data-arcade-layout="console"] .run-summary span{font-size:16px}
html[data-arcade-layout="console"] :is(table) :is(td,th){padding:14px 16px}
/* 1280x720 TVs: keep the game header on one row. */
@media (max-width:1500px){
 html[data-arcade-layout="console"] .game-brand small{display:none}
 html[data-arcade-layout="console"] :is(.top-actions,.game-topbar nav){flex-wrap:nowrap;gap:8px}
 html[data-arcade-layout="console"] .game-topbar :is(.icon-button,.text-button,.session-chip){padding-left:14px;padding-right:14px;white-space:nowrap}
}