body{background:#000}body>header,body>#status,#hud[hidden]{display:none!important}
#title-screen[hidden],#pause-screen[hidden]{display:none!important}
body.title-mode #overlay,body.pause-mode #overlay,body.title-mode #race-display,body.pause-mode #race-display{display:none!important}
/* Game windows share an arcade frame; the editor retains its own styling. */
.game-window{background:#000;color:#fff;border:0.25rem solid #fff;border-radius:0;box-shadow:0 1rem 4.375rem #000b;font-size:1.125rem;font-weight:700}
:is(#title-screen,#pause-screen,#level-dialog,#level-export-dialog) button{background:#000;color:#fff;border:0.1875rem solid #fff;border-radius:0;padding:0.8125rem 1.25rem;font:800 1.125rem var(--font-game);letter-spacing:0.0625rem;text-transform:uppercase;box-shadow:none;cursor:pointer}
:is(#title-screen,#pause-screen,#level-dialog,#level-export-dialog) button:hover{background:#232323}
:is(#title-screen,#pause-screen,#level-dialog,#level-export-dialog) button:focus-visible{outline:0.1875rem solid #fff;outline-offset:0.3125rem}
:is(#title-screen,#pause-screen,#level-dialog,#level-export-dialog) button:disabled{opacity:.45;cursor:wait}
#title-screen{position:fixed;inset:0;z-index:130;display:grid;place-items:center;isolation:isolate;color:#fff;font-size:1.125rem;font-weight:700}
.title-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0005,#0006 45%,#000b),radial-gradient(ellipse at center,#0000 10%,#0009 100%);pointer-events:none}
.title-content{position:relative;width:min(67.5rem,90vw);text-align:center}
.title-menu{position:absolute;top:calc(100% + 2rem);left:0;width:100%}
#title-logo{display:block;width:min(42.5rem,70vw,66vh);height:auto;filter:drop-shadow(0 0.9375rem 1.875rem #000b);margin:0 auto}
.title-buttons{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
#title-screen .title-buttons button{border-width:0.25rem;padding:1.0625rem 1.625rem;font-size:1.25rem;letter-spacing:0.125rem}
.title-buttons button span{margin-left:0.875rem;color:#fff;font-size:0.9375rem}
.title-credit{position:absolute;bottom:1.125rem;left:1.5rem;right:1.5rem;text-align:center;font-size:0.6875rem;line-height:1.7;color:#bcbcbc;font-weight:500;margin:0;text-shadow:0 0.0625rem 0.5rem #000}.title-credit span{margin-left:0.5rem}
#pause-screen{position:fixed;inset:0;z-index:140;background:#000b;display:grid;place-items:center;padding:1rem;overflow:auto;color:#fff}
.pause-sheet{width:min(41.25rem,100%);max-height:calc(100dvh - 2rem);overflow:auto;padding:1.625rem 1.875rem;scrollbar-color:#fff #000;scrollbar-width:thin}
#pause-heading{text-align:center;font-size:2.375rem;font-weight:800;text-transform:uppercase;letter-spacing:0.1875rem;margin:0 0 1.375rem}
#pause-graphics{display:grid;gap:0.375rem}
.menu-toggle{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.75rem;font-size:1.25rem;font-weight:800;cursor:pointer}
.menu-toggle input{position:absolute;right:0;width:4.25rem;height:2.25rem;margin:0;opacity:0;cursor:pointer}
.toggle-value{display:grid;place-items:center;flex:none;width:4.25rem;height:2.25rem;border:0.1875rem solid #fff;font-size:1rem;letter-spacing:0.0625rem;pointer-events:none}
.toggle-value::after{content:'OFF'}
.menu-toggle input:checked+.toggle-value{background:#fff;color:#000}
.menu-toggle input:checked+.toggle-value::after{content:'ON'}
.menu-toggle input:focus-visible+.toggle-value{outline:0.1875rem solid #fff;outline-offset:0.25rem}
#pause-sound{margin-top:1.125rem;padding-top:1rem;border-top:0.125rem solid #fff;display:grid;gap:0.625rem}
#pause-screen :is(#music-controls,#sfx-controls,#fullscreen-toggle,#edit-launch){position:static;transform:none;inset:auto;margin:0;z-index:auto;max-width:100%;box-shadow:none}
#pause-screen :is(#music-controls,#sfx-controls){display:grid;grid-template-columns:11.5rem minmax(0,1fr) 3.25rem;align-items:center;gap:0.75rem;width:100%;padding:0;border:0;border-radius:0;background:none;font-size:1.125rem}
#pause-screen :is(#music-controls,#sfx-controls)>label{display:none}
#pause-screen :is(#music-toggle,#sfx-mute){font-size:1rem;padding:0.625rem 0.5rem;letter-spacing:0.025rem}
#pause-screen :is(#music-volume,#sfx-volume){width:100%;min-width:0;accent-color:#fff}
#pause-screen :is(#music-level,#sfx-level){min-width:0;text-align:right;font-variant-numeric:tabular-nums}
#pause-actions,#pause-tools{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem}
#pause-actions{margin-top:1.375rem}#pause-tools{margin-top:0.625rem}
#pause-tools button{font-size:1rem}
.pause-bottom{display:flex;justify-content:center;margin-top:1.375rem}
#pause-resume{min-width:13.125rem;border-width:0.25rem;font-size:1.375rem;padding:0.8125rem 2rem}
body.pause-mode #score-hud,body.pause-mode #score-popups{visibility:hidden}
body:not(.title-mode):not(.pause-mode):not(.editing-level) #race-display{top:1.125rem}
#race-clock{border:0;box-shadow:none;border-radius:0}



/* Keep the existing title-to-level reveal continuous. */

.title-shade{opacity:var(--title-shade-opacity,1)}
#title-screen .title-content,#title-screen .title-level-row,#title-screen .title-credit{opacity:var(--title-ui-opacity,1)}
body.title-starting #title-screen{pointer-events:none}
body.title-starting .title-content{will-change:opacity}
body.title-starting #race-display{opacity:var(--title-hud-opacity,0);pointer-events:none}

/* Title composition and arrival; exit still uses the existing gameplay reveal. */
#title-screen .title-content{position:absolute;top:8vh;left:50%;transform:translateX(-50%);width:min(46.25rem,90vw);display:flex;align-items:center;flex-direction:column;gap:clamp(1rem,3vh,2rem)}
.title-logo-wrap{width:100%}
#title-screen #title-logo{width:min(38.75rem,72vw,59vh);max-height:none;margin:0 auto;transform:scale(.7);opacity:0}
#title-screen .title-menu{position:static;margin:0;width:min(22.5rem,80vw)}
#title-screen .title-buttons{display:flex;flex-direction:column;gap:0.75rem;flex-wrap:nowrap}
#title-screen .title-buttons button{width:100%;padding:0.875rem 1.375rem;min-height:3.375rem;font-size:1.25rem;opacity:0;transform:translateY(1.125rem)}
#title-screen .title-buttons button span{display:none}
#title-screen.title-revealed #title-logo{animation:title-logo-arrive .75s cubic-bezier(.2,.7,.2,1) both}
#title-screen.title-revealed .title-buttons button{animation:title-button-arrive .4s ease-out both;animation-delay:.25s}
#title-screen.title-revealed .title-buttons button:nth-child(2){animation-delay:.33s}
#title-screen.title-revealed .title-buttons button:nth-child(3){animation-delay:.41s}
#title-screen.title-revealed .title-buttons button:nth-child(4){animation-delay:.49s}
#title-screen .title-level-row{position:absolute;bottom:1.5rem;left:1.5rem;margin:0;display:block}
#title-level-current{display:none}
#title-screen .title-credit{left:11.875rem;right:1.5rem;bottom:1.5rem;text-align:right}
#pause-screen.title-options-open #pause-actions,#pause-screen.title-options-open #edit-launch{display:none}
#pause-screen.title-options-open #pause-tools{grid-template-columns:1fr}
@keyframes title-logo-arrive{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes title-button-arrive{from{opacity:0;transform:translateY(1.125rem)}to{opacity:1;transform:translateY(0)}}



@media(prefers-reduced-motion:reduce){#title-screen.title-revealed #title-logo,#title-screen.title-revealed .title-buttons button{animation-duration:.01s;animation-delay:0s}#boot-screen{transition-duration:.01s}}

/* Title shortcut shares the fullscreen action available in Options. */
#title-screen #title-fullscreen{position:absolute;top:max(1.25rem,env(safe-area-inset-top));right:max(1.5rem,env(safe-area-inset-right));z-index:2;padding:0.625rem 0.875rem;font-size:0.875rem;opacity:var(--title-ui-opacity,1)}


#title-screen.title-revealed .title-buttons button:nth-child(5){animation-delay:.57s}

/* Two texture rows painted by the title's glass marbles. */
#title-screen.logo-webgl-ready .title-content{top:5vh;width:94vw;gap:clamp(.5rem,1.5vh,1rem)}
#title-screen.logo-webgl-ready .title-logo-wrap{height:min(42vh,38vw,25rem);position:relative}
#title-intro-canvas{position:absolute;left:50%;top:0;transform:translateX(-50%);width:100vw;height:100%;pointer-events:none;display:none}
#title-screen.logo-webgl-ready #title-intro-canvas{display:block}
#title-screen.logo-webgl-ready #title-logo{display:none}
#title-screen.logo-webgl-ready .title-shade{background:linear-gradient(180deg,#000e,#000a 45%,#000b),radial-gradient(ellipse at center,#0000,#0008)}
#title-screen.logo-webgl-ready .title-buttons button{animation:none;opacity:1;transform:none}
#title-screen.logo-webgl-ready .title-menu{transition:opacity .45s ease,transform .45s ease}
/* Reset immediately when replaying the intro; only the reveal should fade. */
#title-screen.logo-intro-active .title-menu{transition:none;opacity:0;transform:translateY(.75rem);pointer-events:none}
#title-screen #title-intro-skip{position:absolute;bottom:5rem;left:50%;transform:translateX(-50%);padding:.5rem .875rem;font-size:.75rem;border-width:1px;color:#bdc9de;border-color:#657083}
#title-intro-skip[hidden]{display:none!important}
@media(max-height:700px) and (min-width:700px){
 #title-screen.logo-webgl-ready .title-menu{width:min(62rem,92vw)}
 #title-screen.logo-webgl-ready .title-buttons{display:flex;flex-direction:row;flex-wrap:wrap;gap:.6rem}
 #title-screen.logo-webgl-ready .title-buttons button{width:auto;min-width:10rem;font-size:1rem;padding:.65rem 1rem}
}
@media(max-width:600px){
 #title-screen.logo-webgl-ready .title-content{top:12vh}
 #title-screen.logo-webgl-ready .title-credit{left:1rem;right:1rem;bottom:1rem;text-align:center;font-size:.6rem}
 #title-screen.logo-webgl-ready .title-level-row{bottom:5.5rem}
 #title-screen.logo-webgl-ready .title-buttons button{min-height:2.75rem;padding:.625rem 1rem;font-size:1rem}
}
@media(prefers-reduced-motion:reduce){#title-screen.logo-webgl-ready .title-menu{transition:none}}

/* Tribute title: a readable centered stack, with natural scrolling on small screens. */
#title-screen{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow-x:hidden;overflow-y:auto;padding:clamp(52px,7vh,80px) 0 24px;gap:clamp(20px,3vh,32px)}
#title-screen .title-shade{position:fixed}
#title-screen .title-content,#title-screen.logo-webgl-ready .title-content{position:relative;top:auto;left:auto;transform:none;width:94%;flex:none;gap:4px}
.title-tribute{margin:0;font:800 clamp(34px,4.8vw,76px)/1.05 var(--font-game);letter-spacing:.08em;color:#ffdf00;-webkit-text-stroke:4px #000;paint-order:stroke fill;opacity:0}
#title-screen.title-revealed .title-tribute{animation:title-tribute-arrive .25s ease-out both}
#title-screen.logo-webgl-ready .title-logo-wrap{height:clamp(116px,20vh,14rem)}
#title-screen #title-intro-canvas{width:calc(100% / .94)}
#title-screen .title-menu,#title-screen.logo-webgl-ready .title-menu{width:100%}
#title-screen .title-buttons,#title-screen.logo-webgl-ready .title-buttons{flex-direction:row;flex-wrap:wrap;gap:10px}
#title-screen .title-buttons button,#title-screen.logo-webgl-ready .title-buttons button{width:auto;min-width:10rem;min-height:44px;padding:.8125rem 1.25rem;font-size:max(14px,1.125rem)}
#title-screen .title-credit,#title-screen.logo-webgl-ready .title-credit{position:static;flex:none;width:min(76rem,90%);margin:0 auto;text-align:center;font-size:max(10.5px,1.03125rem);line-height:1.45;color:#ddd;overflow-wrap:break-word}
.title-credit p{margin:0 0 .8em}.title-credit p:last-child{margin-bottom:0}.title-credit strong{font-weight:800;color:#fff}
#title-screen .title-level-row,#title-screen.logo-webgl-ready .title-level-row{position:static;align-self:flex-start;margin:0 0 0 5%}
#title-screen #title-intro-skip{position:fixed;top:18px;bottom:auto;left:20px;transform:none;font-size:max(12px,.75rem)}
@keyframes title-tribute-arrive{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:600px){#title-screen .title-buttons button,#title-screen.logo-webgl-ready .title-buttons button{min-width:130px}#title-screen .title-credit,#title-screen.logo-webgl-ready .title-credit{font-size:10.5px}}
@media(prefers-reduced-motion:reduce){#title-screen.title-revealed .title-tribute{animation:none;opacity:1}}

/* Startup disclaimer, followed by the original vertical title menu. */
#disclaimer-screen{position:fixed;inset:0;z-index:160;display:grid;place-items:center;padding:24px;background:#000;color:#fff}
#disclaimer-screen[hidden]{display:none!important}
.disclaimer-sheet{width:min(980px,100%);max-height:calc(100dvh - 48px);overflow-y:auto;padding:clamp(20px,3vw,40px);border:max(3px,.25rem) solid #fff;background:#000;box-shadow:none;scrollbar-color:#fff #000;scrollbar-width:thin}
#disclaimer-heading{margin:0 0 1em;text-align:center;font:800 clamp(20px,2.2vw,32px) var(--font-game);letter-spacing:.08em;line-height:1.2}
.disclaimer-copy{font:500 clamp(14px,1.125rem,20px)/1.55 var(--font-game)}
.disclaimer-copy p{margin:0 0 1em}.disclaimer-copy p:last-child{margin-bottom:0}.disclaimer-copy strong{font-weight:800}
.disclaimer-actions{margin-top:24px;text-align:center}
#disclaimer-continue{font:800 max(14px,1.125rem) var(--font-game);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#000;border:max(2px,.1875rem) solid #fff;border-radius:0;padding:13px 20px;min-height:44px;box-shadow:none}
#disclaimer-continue:hover,#disclaimer-continue:focus-visible{background:#232323;outline:none}
body.disclaimer-mode :is(#frame-info,#race-display,#score-hud,#score-popups,#edit-launch,#overlay){visibility:hidden!important}
#title-screen .title-content{order:1}
#title-screen .title-menu,#title-screen.logo-webgl-ready .title-menu{width:min(340px,80vw);margin-top:12px}
#title-screen .title-buttons,#title-screen.logo-webgl-ready .title-buttons{flex-direction:column;flex-wrap:nowrap;gap:10px}
#title-screen .title-buttons button,#title-screen.logo-webgl-ready .title-buttons button{width:100%;min-width:0}
#title-screen .title-level-row,#title-screen.logo-webgl-ready .title-level-row{order:2}
#title-screen .title-credit,#title-screen.logo-webgl-ready .title-credit{order:3;margin-top:auto;margin-bottom:0;width:min(76rem,90%);font-size:max(11px,.875rem);line-height:1.5}
#title-screen .title-credit-line{display:block;margin:0}
@media(max-width:600px){#disclaimer-screen{padding:16px}.disclaimer-sheet{max-height:calc(100dvh - 32px);padding:20px}}

/* Campaign selection follows mode selection. */
#campaign-menu{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:clamp(20px,4vw,40px);background:#000;color:#fff;border:max(3px,.25rem) solid #fff;border-radius:0}
#campaign-menu::backdrop{background:#000b}
#campaign-menu h2{margin:0 0 8px;font:800 max(22px,2rem) var(--font-game);letter-spacing:.08em;text-transform:uppercase}
#campaign-mode{color:#fff;font-size:max(14px,1.125rem);margin:0 0 24px}
#campaign-menu button{font:800 max(14px,1.125rem) var(--font-game);text-transform:uppercase;letter-spacing:.08em;background:#000;color:#fff;border:max(2px,.1875rem) solid #fff;border-radius:0;padding:13px 20px;min-height:44px;box-shadow:none}
#campaign-menu button:hover,#campaign-menu button:focus-visible{background:#232323;outline:none}
.campaign-choices{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
#campaign-menu .campaign-choices button{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;min-height:135px;padding:20px;text-align:left}
.campaign-choices strong{font-size:max(16px,1.35rem)}.campaign-choices span{font-size:max(12px,.875rem);font-weight:600;letter-spacing:0;text-transform:none;color:#fff}
@media(max-width:560px){.campaign-choices{grid-template-columns:1fr}#campaign-menu .campaign-choices button{min-height:100px;padding:16px}}


/* Original Marble Marvell title artwork, without the later tribute embellishments. */
#title-screen .title-logo-wrap{height:auto}
#title-screen #title-logo{display:block;width:min(620px,82vw,65vh);height:auto;margin:0 auto;opacity:1;transform:none;filter:none}
#title-screen.title-revealed #title-logo{animation:marvell-logo-arrive .35s ease-out both;filter:none}
@keyframes marvell-logo-arrive{0%{opacity:0;transform:translateY(6px)}20%{opacity:1}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#title-screen.title-revealed #title-logo{animation:none}}

/* Alpha-masked light stays on the logo, including its transparent letter gaps. */
#title-screen .title-logo-art{position:relative;width:fit-content;max-width:100%;margin:0 auto;isolation:isolate}
#title-screen.title-revealed #title-logo{animation:none}
#title-screen.title-revealed .title-logo-art{animation:marvell-logo-arrive .35s ease-out both}
#title-screen .title-logo-reveal,#title-screen .title-logo-glitter{position:absolute;inset:0;pointer-events:none;opacity:0;-webkit-mask-image:var(--logo-mask);mask-image:var(--logo-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#title-screen .title-logo-reveal{background:#fff}
#title-screen .title-logo-glitter{background:linear-gradient(110deg,transparent 43%,#ffffff30 46%,#fff 50%,#ffffff30 54%,transparent 57%);background-size:260% 100%;background-repeat:no-repeat;mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){#title-screen.title-revealed .title-logo-art{animation:none}#title-screen .title-logo-reveal,#title-screen .title-logo-glitter{display:none}}

/* Title layout uses a uniform 1024 x 576 (16:9) design scale.
   Center the complete logo/menu stack; edge controls follow the actual viewport. */
#title-screen{--title-unit:min(.09765625vw,.1736111111dvh);--title-margin:calc(16 * var(--title-unit));display:block;padding:0;gap:0;overflow:hidden}
#title-screen .title-content,#title-screen.logo-webgl-ready .title-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(400 * var(--title-unit));gap:calc(16 * var(--title-unit));margin:0}
#title-screen .title-logo-wrap,#title-screen.logo-webgl-ready .title-logo-wrap{height:auto;width:100%}
#title-screen #title-logo{width:100%;max-width:none}
#title-screen .title-logo-art{width:100%}
#title-screen .title-menu,#title-screen.logo-webgl-ready .title-menu{width:calc(232 * var(--title-unit));margin:0}
#title-screen .title-buttons,#title-screen.logo-webgl-ready .title-buttons{gap:calc(7 * var(--title-unit))}
#title-screen .title-buttons button,#title-screen.logo-webgl-ready .title-buttons button{min-height:calc(35 * var(--title-unit));padding:calc(8 * var(--title-unit)) calc(13 * var(--title-unit));font-size:calc(12 * var(--title-unit));border-width:calc(2.5 * var(--title-unit));letter-spacing:calc(1.25 * var(--title-unit))}
#title-screen #title-fullscreen{top:max(var(--title-margin),env(safe-area-inset-top));right:max(var(--title-margin),env(safe-area-inset-right));padding:calc(6 * var(--title-unit)) calc(9 * var(--title-unit));font-size:calc(9 * var(--title-unit));border-width:calc(2 * var(--title-unit));letter-spacing:calc(.625 * var(--title-unit))}
#title-screen .title-level-row,#title-screen.logo-webgl-ready .title-level-row{position:absolute;left:max(var(--title-margin),env(safe-area-inset-left));bottom:max(var(--title-margin),env(safe-area-inset-bottom));margin:0}
#title-screen #title-levels{padding:calc(6 * var(--title-unit)) calc(9 * var(--title-unit));font-size:calc(9 * var(--title-unit));border-width:calc(2 * var(--title-unit));letter-spacing:calc(.625 * var(--title-unit))}
#title-screen .title-credit,#title-screen.logo-webgl-ready .title-credit{position:absolute;top:auto;bottom:max(var(--title-margin),env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 208 * var(--title-unit));max-width:calc(820 * var(--title-unit));margin:0;font-size:calc(9 * var(--title-unit));line-height:1.5;text-align:center}