
/* C0285 table-first HUD. Existing art, inputs and shared fullscreen are unchanged. */
.pinball-page{background:radial-gradient(ellipse at 15% 5%,#fffbed,transparent 58%),radial-gradient(ellipse at 90% 90%,#bed6c980,transparent 65%),#f1e8d2}
.pinball-page .arcade-head{padding:10px max(18px,4%);border-color:#8b744622;min-height:62px}
.pinball-page .arcade-head .brand{font-size:22px}.pinball-page .arcade-head .text-link{font-size:12px;min-height:44px}
.pinball-page .game-layout{display:block;width:min(1120px,94%);margin:12px auto 24px}
.pinball-page .game-heading{padding:0;display:flex;align-items:baseline;gap:20px;margin-bottom:12px}
.pinball-page .game-heading h1{font-size:34px;line-height:1.1;margin:0;white-space:nowrap}
.pinball-page .game-heading h1 em{font-style:normal;color:var(--coral)}
.pinball-page .game-heading .eyebrow{display:none}.pinball-page .game-heading .lead{font-size:13px;line-height:1.45;margin:0;color:#527166}.pinball-page .game-heading .lead br{display:none}
.pinball-page .game-intro{padding:0}.pinball-page .game-intro:empty{display:none}
body.pinball-page #game{width:100%;max-width:1000px;height:calc(100svh - 145px);min-height:400px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:48px 36px minmax(0,1fr) 52px 20px;gap:6px;padding:10px;border:1px solid #b7aa862e;border-radius:24px;background:radial-gradient(ellipse at 50% 48%,#fbf3d9,transparent 70%),linear-gradient(150deg,#e7e7cf80,#d6dec888);box-shadow:inset 0 1px #fff9e9,0 15px 45px #4c633b15;overflow:hidden;isolation:isolate}
body.pinball-page #game>.score-bar{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:8px;width:min(100%,650px);height:48px;margin:0 auto;padding:0 6px;background:#fffaecb0;border:1px solid #cbbd974f;border-radius:14px;color:#345b55;font-size:10px;line-height:1.15}
.pinball-page .score-bar p{min-width:0}.pinball-page .score-bar b{font:700 24px/1 var(--display);letter-spacing:-.025em;color:#174b4d;font-variant-numeric:tabular-nums}.pinball-page #best-kind{font-size:9px;color:#6f7d65}
body.pinball-page .score-bar .text-link{min-height:44px;min-width:44px;justify-content:center;padding:3px 10px;font-size:11px;line-height:1.15;text-align:center;border-radius:11px;border:1px solid #a89a733b;background:linear-gradient(#fffdf3,#ede2c6);text-decoration:none;flex:none}
.pinball-page .score-bar .text-link:disabled{opacity:.5}.pinball-page #full{max-width:85px}
body.pinball-page #game>.mission-strip{grid-column:1;grid-row:2;display:flex;align-items:center;gap:9px;width:min(100%,620px);height:36px;margin:0 auto;padding:0 7px;border:0;background:none;color:#305c52}
.pinball-page .mission-seal{width:24px;flex:none;display:grid;place-items:center}.pinball-page .mission-seal svg{width:24px;fill:#e8b34f;stroke:#946829;stroke-width:1.5}
.pinball-page .mission-strip>div{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px}
.pinball-page #mission-name{grid-column:1;grid-row:1;font:800 13px/1.2 var(--body);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinball-page .mission-strip .rush{grid-column:2;grid-row:1;display:flex;font-size:10px;font-weight:800;white-space:nowrap;margin:0}.pinball-page .mission-strip .rush span{font-size:inherit}
.pinball-page #mission-count{font:800 12px/1 var(--body);white-space:nowrap;flex:none}
.pinball-page .mission-strip progress{appearance:none;grid-column:1/-1;grid-row:2;display:block;width:100%;height:4px;margin-top:5px;border:0;border-radius:8px;background:#376a5622;accent-color:#428876}
.pinball-page .mission-strip progress::-webkit-progress-bar{background:#376a5622;border-radius:8px}.pinball-page .mission-strip progress::-webkit-progress-value{background:#428876;border-radius:8px}
.pinball-page #mission-hint,.pinball-page #rush-time,.pinball-page #rush-progress{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* The grid cell supplies dimensions. No legacy --table-width input is used. */
body.pinball-page #game>.canvas-wrap{grid-column:1;grid-row:3;position:relative;align-self:stretch;justify-self:stretch;container-type:size;width:100%;height:100%;min-width:0;min-height:0;margin:0;max-width:none;aspect-ratio:auto;border-radius:18px;overflow:hidden;background:transparent;box-shadow:none;isolation:isolate}
body.pinball-page #game #canvas{position:absolute;inset:0;margin:auto;display:block;width:min(100cqw,calc(100cqh * .6818181818));height:min(100cqh,calc(100cqw * 1.4666666667));max-width:100%;max-height:100%;object-fit:contain;touch-action:none;border-radius:18px;outline-offset:-5px!important;box-shadow:0 10px 28px #354b3b24}
body.pinball-page #game>.play-controls{grid-column:1;grid-row:4;display:grid;grid-template-columns:1fr minmax(80px,.72fr) 1fr;gap:9px;width:min(100%,650px);height:52px;padding:0;margin:0 auto;align-self:center}
body.pinball-page .play-controls button{min-height:48px;min-width:44px;height:48px;padding:5px 10px;border:1px solid #af9462;border-bottom:3px solid #8e6f3e;border-radius:15px;font-size:13px;line-height:1.2;background:linear-gradient(#fffbec,#eaddb9);color:#214d4d;box-shadow:inset 0 1px #fffff5,0 3px 0 #6f582e25,0 5px 10px #70623c12;touch-action:none;user-select:none;-webkit-user-select:none}
.pinball-page .play-controls #launch{background:linear-gradient(#f6d788,#d6a84f);border-color:#a97a32;color:#4b401d}
.pinball-page .play-controls button.is-held,.pinball-page .play-controls button:active:not(:disabled){transform:translateY(2px);background:#226764;color:#fff6dc;box-shadow:inset 0 2px 6px #12434455;border-color:#134948}
body.pinball-page #game>.game-status{grid-column:1;grid-row:5;width:100%;min-height:0;margin:0;text-align:center;font-size:10px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#557364}
.pinball-page .stage-overlay{background:#193f392b;backdrop-filter:none;padding:10px}.pinball-page .overlay-copy{width:min(330px,95%);max-width:330px;padding:22px 20px;border:1px solid #d2bd82;border-radius:23px;background:#fff8e9f5;box-shadow:0 15px 40px #173b372f}
.pinball-page .overlay-copy h2{font-size:29px;line-height:1.1}.pinball-page .overlay-copy p{font-size:13px;line-height:1.45;margin:10px 0 16px}
.pinball-page .overlay-copy .button{min-height:48px;padding:9px 15px;border-radius:12px;font-size:14px;background:linear-gradient(#286c63,#164c4d);border-color:#134747}
.pinball-page .quiet-start{display:block;min-height:44px;min-width:44px;width:100%;margin:6px auto 0;border:0;background:transparent;color:var(--ink);font:800 12px var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
body.pinball-page #hud-settings{grid-column:1;grid-row:6;width:min(100%,650px);margin:0 auto;border:1px solid #c5b487;border-radius:16px;background:#fff9eb;overflow:clip}
.pinball-page #hud-settings>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:8px 14px;font-size:13px;font-weight:900;cursor:pointer;list-style:none}
.pinball-page #hud-settings>summary::after{content:'+';font-size:21px;font-weight:400}.pinball-page #hud-settings[open]>summary::after{content:'-'}
.pinball-page .hud-settings-body{padding:2px 14px 14px}.pinball-page #audio-slot{min-width:0}
body.pinball-page #game .music-controls{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-content:start;gap:5px 14px;width:100%;max-width:none;margin:0;padding:8px 0 12px!important;font:12px/1.4 var(--body)!important;color:#305b51;border-bottom:1px solid #cabf9d}
body.pinball-page #game .music-controls #music-button{grid-column:1/-1;min-height:44px;min-width:44px;width:100%;font:800 12px var(--body);padding:8px 12px;border:1px solid #90a694;border-radius:12px;background:#e7edd9;color:#245447}
body.pinball-page #game .music-controls #music-button[aria-pressed=true]{background:#296b58;color:#fff9e7}
body.pinball-page #game .music-controls label{display:flex;align-items:center;gap:8px;font-size:12px;min-height:44px;min-width:0;cursor:pointer}
body.pinball-page #game .music-controls label:has(input[type=range]){grid-column:1/-1;justify-content:space-between}
body.pinball-page #game .music-controls input[type=range]{width:70%;min-height:44px;accent-color:#357863}
body.pinball-page #game .music-controls input[type=checkbox]{width:20px;height:20px;min-height:20px;flex:none;accent-color:#357863}
body.pinball-page #game .music-note{grid-column:1/-1;display:block;width:100%;max-width:none;font-size:11px;line-height:1.5}
.pinball-page #table-options>summary{min-height:48px;display:list-item;align-content:center;cursor:pointer;font-weight:800;font-size:12px;border:0;padding:8px 0}
.pinball-page .game-settings{margin:4px 0 12px}.pinball-page .game-settings fieldset{margin:8px 0}.pinball-page .game-settings legend{font-size:12px;margin-bottom:7px}
.pinball-page .skin-options{gap:5px;display:grid;grid-template-columns:repeat(3,1fr)}.pinball-page .skin-options span{min-height:44px;height:100%;display:grid;align-items:center;text-align:center;padding:6px 4px;font-size:11px;line-height:1.2;border-radius:9px}
.pinball-page .game-settings label[for]{font-size:12px;margin:10px 0 5px}.pinball-page .game-settings select,.pinball-page .game-settings input[type=range]{min-height:44px;font-size:12px;width:100%}
.pinball-page .controls-note{display:block;font-size:11px;margin:8px 0}.pinball-page .game-help{margin:12px 0 0;padding-top:8px;font-size:12px}.pinball-page .game-help summary{min-height:44px}.pinball-page .game-help ol{padding-left:20px}.pinball-page .game-note{font-size:11px}.pinball-page #forget{min-height:44px;font-size:12px}
body.pinball-page #game[data-started=true][data-paused=false]:has(#overlay[hidden]) #hud-settings{display:none}
body.pinball-page #game:not([data-started=true]),body.pinball-page #game[data-paused=true]{grid-template-rows:48px 36px minmax(180px,1fr) 52px 20px auto;overflow:auto;overscroll-behavior:contain}
body.pinball-page #game:has(#hud-settings[open]){grid-template-rows:48px 36px 230px 52px 20px auto;height:auto;min-height:calc(100svh - 145px)}
body.pinball-page #game[data-paused=true]{grid-template-rows:48px 96px 170px 52px auto auto;align-content:start}
body.pinball-page #game[data-paused=true]>.score-bar{position:sticky;top:0;z-index:8;background:#fff9e9}
body.pinball-page #game[data-paused=true]>.mission-strip{height:auto;min-height:90px;align-items:center}
.pinball-page #game[data-paused=true] .mission-strip>div{display:block}.pinball-page #game[data-paused=true] #mission-name{white-space:normal;font-size:14px}
.pinball-page #game[data-paused=true] :is(#mission-hint,#rush-time,#rush-progress){position:static!important;width:auto;height:auto;margin:4px 0 0;padding:0;clip-path:none;white-space:normal;overflow:visible;font-size:11px;line-height:1.35;display:block}
.pinball-page #game[data-paused=true] #rush-progress{height:4px;width:100%;accent-color:#b98128}.pinball-page #game[data-paused=true] #rush-progress::-webkit-progress-value{background:#b98128}
.pinball-page #game[data-paused=true] .rush{display:flex;justify-content:space-between;margin-top:7px}.pinball-page #game[data-paused=true] #rush-time{margin:0}
.pinball-page #game[data-paused=true] .overlay-copy{padding:14px 18px}.pinball-page #game[data-paused=true] .overlay-copy h2{font-size:25px}.pinball-page #game[data-paused=true] .overlay-copy p{margin:5px 0 10px;font-size:12px}
body.pinball-page #game:is(:fullscreen,.expanded),html.ka-immersive body.pinball-page #game{position:fixed;inset:0;z-index:1000;width:100%;max-width:none;height:100vh;height:100dvh;min-height:0;margin:0;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border:0;border-radius:0;overflow:hidden;background:radial-gradient(ellipse at 50% 44%,#fff5d6,#e2e5cd 85%)}
body.pinball-page #game:is(:fullscreen,.expanded)[data-paused=true],html.ka-immersive body.pinball-page #game[data-paused=true],body.pinball-page #game:is(:fullscreen,.expanded):has(#hud-settings[open]),html.ka-immersive body.pinball-page #game:has(#hud-settings[open]){overflow:auto;min-height:0}
body.pinball-page:has(#game:is(:fullscreen,.expanded)),html.ka-immersive:has(body.pinball-page){overflow:hidden;overscroll-behavior:none}
@media(min-width:950px) and (min-height:620px){
 body.pinball-page #game{grid-template-columns:minmax(0,1fr) 245px;grid-template-rows:auto auto minmax(0,1fr) auto auto;column-gap:24px;padding:16px;max-width:970px}
 body.pinball-page #game>.canvas-wrap{grid-column:1;grid-row:1/5}
 body.pinball-page #game>.score-bar{grid-column:2;grid-row:1;flex-wrap:wrap;height:auto;padding:10px;gap:8px;justify-content:space-around}.pinball-page .score-bar p{flex:1;text-align:center}
 body.pinball-page #game>.score-bar .text-link{flex:1;max-width:none}
 body.pinball-page #game>.mission-strip{grid-column:2;grid-row:2}
 body.pinball-page #game>.play-controls{grid-column:1;grid-row:5}
 body.pinball-page #game>.game-status{grid-column:2;grid-row:5;white-space:normal;line-height:1.5;align-self:center}
 body.pinball-page #game #hud-settings{grid-column:2;grid-row:3;align-self:start}
 body.pinball-page #game:not([data-started=true]),body.pinball-page #game[data-paused=true],body.pinball-page #game:has(#hud-settings[open]){grid-template-rows:auto auto minmax(0,1fr) auto auto;height:calc(100svh - 145px);min-height:450px;overflow:auto}
 body.pinball-page #game:is(:fullscreen,.expanded),html.ka-immersive body.pinball-page #game{height:100dvh;min-height:0;grid-template-columns:minmax(0,650px) 260px;justify-content:center;column-gap:28px;padding:16px 24px}
 body.pinball-page #game[data-paused=true]>.canvas-wrap{min-height:300px}
}
@media(max-width:780px){
 .pinball-page .arcade-head{padding:6px 12px;min-height:52px;gap:8px;flex-wrap:nowrap}.pinball-page .arcade-head .brand{font-size:18px}.pinball-page .arcade-head .text-link{font-size:11px}.pinball-page .arcade-head a[href='/products']{display:none}
 .pinball-page .game-layout{width:100%;margin:8px auto 16px}.pinball-page .game-heading{padding:0 14px;margin:0 0 8px}.pinball-page .game-heading h1{font-size:27px}.pinball-page .game-heading .lead{display:none}
 body.pinball-page #game{height:calc(100svh - 106px);min-height:380px;border-radius:18px;padding:6px;gap:5px;border:0;grid-template-rows:48px 36px minmax(0,1fr) 52px 18px}
 body.pinball-page #game>.score-bar{gap:5px;padding:0 5px}.pinball-page .score-bar b{font-size:22px}body.pinball-page .score-bar .text-link{padding-inline:7px;font-size:10px}
 .pinball-page #mission-name{font-size:11px}.pinball-page .mission-strip .rush{font-size:9px}.pinball-page .mission-seal{width:20px}.pinball-page .mission-seal svg{width:20px}
 .pinball-page .overlay-copy{padding:15px}.pinball-page .overlay-copy h2{font-size:25px}.pinball-page .overlay-copy p{font-size:12px;margin:7px 0 12px}
 body.pinball-page #game>.game-status{font-size:9px;line-height:18px}
 body.pinball-page #game:is(:fullscreen,.expanded),html.ka-immersive body.pinball-page #game{height:100dvh;min-height:0;padding:max(5px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
}
@media(orientation:landscape) and (max-height:619px){
 body.pinball-page #game:is(:fullscreen,.expanded),html.ka-immersive body.pinball-page #game{grid-template-columns:minmax(0,1fr) minmax(215px,34%);grid-template-rows:94px 36px minmax(0,1fr) 52px 28px;column-gap:12px;max-width:none;padding:6px 10px}
 body.pinball-page #game:is(:fullscreen,.expanded)>.canvas-wrap,html.ka-immersive body.pinball-page #game>.canvas-wrap{grid-column:1;grid-row:1/6}
 body.pinball-page #game:is(:fullscreen,.expanded)>.score-bar,html.ka-immersive body.pinball-page #game>.score-bar{grid-column:2;grid-row:1;height:auto;flex-wrap:wrap;gap:3px;padding:4px}
 body.pinball-page #game:is(:fullscreen,.expanded)>.score-bar p,html.ka-immersive body.pinball-page #game>.score-bar p{flex:1;text-align:center}
 body.pinball-page #game:is(:fullscreen,.expanded)>.score-bar .text-link,html.ka-immersive body.pinball-page #game>.score-bar .text-link{min-width:60px;flex:1;max-width:none}
 body.pinball-page #game:is(:fullscreen,.expanded)>.mission-strip,html.ka-immersive body.pinball-page #game>.mission-strip{grid-column:2;grid-row:2;height:auto}
 body.pinball-page #game:is(:fullscreen,.expanded)>.play-controls,html.ka-immersive body.pinball-page #game>.play-controls{grid-column:2;grid-row:4;gap:4px;grid-template-columns:1fr 1fr 1fr}
 body.pinball-page #game:is(:fullscreen,.expanded)>.game-status,html.ka-immersive body.pinball-page #game>.game-status{grid-column:2;grid-row:5;white-space:normal;line-height:1.35;max-height:28px}
 body.pinball-page #game:is(:fullscreen,.expanded) #hud-settings,html.ka-immersive body.pinball-page #game #hud-settings{grid-column:2;grid-row:3}
 .pinball-page .play-controls button{font-size:11px;padding:3px}
 body.pinball-page #game:is(:fullscreen,.expanded)[data-paused=true],html.ka-immersive body.pinball-page #game[data-paused=true]{grid-template-rows:94px auto auto 52px auto;align-items:start}
 body.pinball-page #game[data-paused=true]>.canvas-wrap{min-height:230px}
 .pinball-page .overlay-copy h2{font-size:23px}.pinball-page .overlay-copy p{font-size:12px}.pinball-page .overlay-copy{padding:12px}
}
@supports not (container-type:size){body.pinball-page #game #canvas{width:100%;height:100%;object-fit:contain;box-shadow:none}}
@media(prefers-reduced-motion:reduce){.pinball-page *, .pinball-page *::before,.pinball-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* A containing slot lets the actual canvas-wrap keep an exact 600:880 rectangle. */
body.pinball-page #game>.hud-table-slot{grid-column:1;grid-row:3;position:relative;container-type:size;min-width:0;min-height:0;width:100%;height:100%;align-self:stretch;justify-self:stretch}
body.pinball-page #game .hud-table-slot>.canvas-wrap{position:absolute;inset:0;margin:auto;min-width:0;min-height:0;max-width:none;max-height:none;width:min(100cqw,calc(100cqh * .6818181818));height:min(100cqh,calc(100cqw * 1.4666666667));aspect-ratio:600/880;container-type:normal;border-radius:18px;background:transparent;box-shadow:0 10px 28px #354b3b24}
body.pinball-page #game .hud-table-slot #canvas{position:static;width:100%!important;height:100%!important;aspect-ratio:auto!important;max-width:100%;max-height:100%;margin:0;border-radius:inherit;box-shadow:none;object-fit:contain}
body.pinball-page #game[data-paused=true] .hud-table-slot>.canvas-wrap{overflow:visible}
body.pinball-page #game[data-paused=true] .hud-table-slot .stage-overlay{width:min(300px,calc(100vw - 30px));left:50%;right:auto;transform:translateX(-50%);border-radius:18px}
@media(min-width:950px) and (min-height:620px){body.pinball-page #game>.hud-table-slot{grid-column:1;grid-row:1/5}body.pinball-page #game[data-paused=true]>.hud-table-slot{min-height:300px}}
@media(orientation:landscape) and (max-height:619px){body.pinball-page #game:is(:fullscreen,.expanded)>.hud-table-slot,html.ka-immersive body.pinball-page #game>.hud-table-slot{grid-column:1;grid-row:1/6}body.pinball-page #game[data-paused=true]>.hud-table-slot{min-height:230px}}

/* Pause is one scrollable settings sheet, not overlapping grid tracks. */
body.pinball-page #game[data-paused=true],body.pinball-page #game:is(:fullscreen,.expanded)[data-paused=true],html.ka-immersive body.pinball-page #game[data-paused=true]{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;overflow:auto;scroll-padding-block:64px 12px}
body.pinball-page #game[data-paused=true]>*{flex:0 0 auto;max-width:650px}
body.pinball-page #game[data-paused=true]>.score-bar{order:0;width:100%;height:54px;min-height:54px;flex-wrap:nowrap;position:sticky;top:0}
body.pinball-page #game[data-paused=true]>.score-bar p{flex:initial;text-align:left}body.pinball-page #game[data-paused=true]>.score-bar .text-link{flex:initial}
body.pinball-page #game[data-paused=true]>.mission-strip{order:1;min-height:96px;width:100%;height:auto}
body.pinball-page #game[data-paused=true]>.hud-table-slot{order:2;width:100%;height:170px;min-height:170px}
body.pinball-page #game[data-paused=true]>#hud-settings{order:3;width:100%;height:auto;max-height:none;align-self:center}
body.pinball-page #game[data-paused=true]>.play-controls{order:4;width:100%;height:52px}
body.pinball-page #game[data-paused=true]>.game-status{order:5;width:100%;height:auto;max-height:none;white-space:normal}

@media(min-width:950px) and (min-height:620px){
 body.pinball-page #game:not([data-paused=true])>.score-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px 8px;padding:12px;height:auto;min-height:117px}
 body.pinball-page #game:not([data-paused=true])>.score-bar p{grid-column:span 2;text-align:center}
 body.pinball-page #game:not([data-paused=true])>.score-bar .text-link{grid-column:span 3;width:100%;min-height:44px}
 body.pinball-page #game:not([data-paused=true])>.score-bar b{white-space:nowrap;font-size:27px;margin-top:4px}
 body.pinball-page #game:not([data-paused=true])>.mission-strip{height:auto;min-height:165px;padding:12px;align-items:flex-start;background:#fffaed70;border:1px solid #c5b78f55;border-radius:14px;gap:6px}
 .pinball-page #game:not([data-paused=true]) .mission-strip>div{display:block}
 .pinball-page #game:not([data-paused=true]) #mission-name{white-space:normal;font-size:13px}
 .pinball-page #game:not([data-paused=true]) :is(#mission-hint,#rush-time,#rush-progress){position:static!important;width:auto;height:auto;margin:6px 0 0;padding:0;clip-path:none;white-space:normal;overflow:visible;font-size:11px;line-height:1.45;display:block}
 .pinball-page #game:not([data-paused=true]) #rush-progress{width:100%;height:4px}
 .pinball-page #game:not([data-paused=true]) .rush{display:block;margin-top:10px;white-space:normal}
 .pinball-page #game:not([data-paused=true]) #rush-time{margin-top:0;font-weight:400}
}
