:root {
    color-scheme: dark;
    --ink: #0a0a08;
    --cream: #f2ece3;
    --hot: #f2473d;
    --cyan: #dcff4a;
    --pink: #f02d87;
    --violet: #b50e5d;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

html, body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    overscroll-behavior: none;
}

body {
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--cream);
    background:
        repeating-linear-gradient(0deg,transparent 0 4px,#ffffff08 4px 5px),
        radial-gradient(circle at 50% 15%, #28251d 0, #11110f 42%, #070706 100%);
    font-family: "Courier New", Courier, monospace;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
body.playing { touch-action: none; }

button { font: inherit; touch-action: manipulation; }
input, textarea, select {
    -webkit-user-select: text;
    user-select: text;
}

.track-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 19%;
    width: min(100%, 410px);
    margin: 7px auto 0;
    color: var(--hot);
    font-size: clamp(8px, 1.45vw, 12px);
    font-weight: 900;
}
.track-picker select {
    min-width: 0;
    flex: 1;
    padding: 4px 6px;
    border: 1px solid var(--cyan);
    color: var(--cream);
    background: #100b1b;
    font: inherit;
}

.cabinet {
    width: min(100vw, 1120px);
    padding: 10px clamp(8px, 2vw, 22px) max(8px, env(safe-area-inset-bottom));
    text-align: center;
}

.marquee {
    display: flex;
    justify-content: center;
    gap: .24em;
    margin-bottom: 8px;
    color: var(--cream);
    font-size: clamp(22px, 5vw, 54px);
    font-weight: 900;
    line-height: .88;
    letter-spacing: -.1em;
    text-shadow: 3px 3px 0 var(--hot), 6px 6px 0 #050504;
}

.marquee span:last-child { color: var(--cyan); }

.screen-shell {
    position: relative;
    width: min(100%, calc((100vh - 155px) * 16 / 9));
    margin-inline: auto;
    overflow: hidden;
    border: 5px solid #08060d;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 0 0 4px #292924, 0 0 0 6px var(--cyan), 0 14px 40px #000a, inset 0 0 25px #000;
    aspect-ratio: 16 / 9;
}

.screen-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: 7px;
    box-shadow: inset 0 0 28px #020006aa, inset 0 0 4px #fff2;
}

.canvas-stage {
    display: flex;
    width: 100%;
    height: 100%;
    background: #000;
}

.game-view {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.view-two { display: none; }

#game, #game-2 {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    object-fit: fill;
    contain: strict;
}

body.local-multiplayer .screen-shell {
    width: min(100%, calc((100vh - 155px) * 32 / 9));
    aspect-ratio: 32 / 9;
}
body.local-multiplayer .game-view {
    display: block;
    width: 50%;
}

.dom-hud {
    position: absolute;
    inset: 4px 4px auto;
    z-index: 5;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    gap: 8px;
    min-height: 52px;
    padding: 6px 8px;
    border-bottom: 2px solid #3e294b;
    color: #fff0be;
    background: #0c0814f2;
    font: 900 clamp(9px,1.05vw,14px)/1.35 "Courier New",monospace;
    letter-spacing: .02em;
    text-align: left;
    text-shadow: 1px 1px #000;
}
.dom-hud > div { display:flex; flex-direction:column; justify-content:center; }
.dom-hud strong { color:#fff8da; font:inherit; }
.dom-hud b { position:absolute; left:6px; bottom:-18px; padding:2px 5px; color:#100c1c; background:var(--cyan); font:inherit; }
.dom-hud .hud-center { align-items:center; color:var(--cyan); }
.dom-hud .hud-center .rude, .dom-hud .hud-center .rude strong { color:var(--hot); }
.dom-hud .hud-right { align-items:flex-end; }
.dom-hud.urgent [data-hud-time] { color:var(--hot); animation:blink .5s steps(2,jump-none) infinite; }

.scanlines {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: .08;
    background: repeating-linear-gradient(to bottom, transparent 0 3px, #030008 3px 4px);
}

.ui-layer {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    place-items: center;
    background: linear-gradient(#111b35e8, #321440ed);
    transition: opacity .18s steps(3), visibility .18s;
}

.ui-layer.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
[hidden] { display: none !important; }

.menu-panel {
    width: min(92%, 560px);
    max-height: 94%;
    overflow: auto;
    padding: clamp(8px, 1.8vw, 18px);
    border: 2px solid #ff315899;
    color: var(--cream);
    background: #100b1be8;
    box-shadow: 4px 4px 0 #07040d99;
}

.main-menu {
    width: min(82%, 620px);
    border: 0;
    background: transparent;
    box-shadow: none;
}

.mobile-menu-trigger { display:none; }
.mobile-menu-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:12px 0;
}
.mobile-menu-grid .arcade-button {
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:8px;
    min-height:52px;
    text-align:left;
}
.mobile-menu-grid .arcade-button span {
    color:var(--ink);
    background:var(--pink);
    padding:4px;
}

.menu-panel p { margin: 5px 0; }
.eyebrow, .keys { font-size: clamp(7px, 1.5vw, 11px); letter-spacing: .08em; }
.menu-panel h1 {
    margin: 5px 0;
    color: var(--cream);
    font-size: clamp(27px, 7vw, 68px);
    line-height: .78;
    letter-spacing: -.12em;
    text-shadow: 3px 3px 0 var(--hot), 6px 6px 0 #181126;
}
.subtitle { color: var(--cyan); font-size: clamp(7px, 1.8vw, 13px); }
.menu-panel h2 {
    margin: 0 0 12px;
    color: var(--hot);
    font-size: clamp(18px, 3.4vw, 34px);
    line-height: 1;
    text-shadow: 2px 2px 0 #08050d;
}

.insert-coin {
    color: var(--cyan);
    font-size: clamp(8px, 1.8vw, 14px);
    font-weight: 900;
    animation: blink 1s steps(2, jump-none) infinite;
}
.tap-copy { display: none; }

.menu-buttons, .gameover-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: min(100%, 410px);
    margin: 10px auto 0;
}

.arcade-button {
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #ffe6a866;
    color: var(--cream);
    background: #26173fee;
    box-shadow: 2px 2px 0 #08060d;
    font-weight: 900;
    font-size: clamp(8px, 1.5vw, 13px);
    cursor: pointer;
}
.arcade-button.primary {
    color: #140c1e;
    background: var(--cream);
    box-shadow: 3px 3px 0 var(--hot);
}
.arcade-button:active { translate: 2px 2px; box-shadow: 0 0 0 transparent; }
.arcade-button:disabled { opacity: .38; cursor: not-allowed; }

.copy-panel { font-size: clamp(8px, 1.5vw, 13px); line-height: 1.35; }
.copy-panel strong, .hot-copy, .new-high { color: var(--hot); }
.build-label, .share-status { color: var(--cyan); font-size: 9px; }

.settings-panel { display: grid; gap: 8px; }
.settings-panel label { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 12px; text-align: left; font-size: clamp(8px, 1.5vw, 13px); font-weight: 900; }
.settings-panel label > span { display: flex; justify-content: space-between; }
.settings-panel input[type="range"] { width: 100%; accent-color: var(--hot); }
.settings-panel input[type="checkbox"] { justify-self: end; width: 22px; height: 22px; accent-color: var(--hot); }

.score-list { min-height: 76px; margin: 0 0 10px; padding: 0; list-style: none; font-size: clamp(8px, 1.45vw, 12px); }
.score-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 3px 5px; text-align: left; }
.score-list li:nth-child(odd) { background: #43204c88; }
.score-list strong { color: var(--cream); }
.score-list small { color: var(--hot); font: inherit; }

.new-high { animation: blink .65s steps(2, jump-none) infinite; font-weight: 900; }
.result-grid { display: grid; grid-template-columns: 1fr auto; gap: 3px 16px; width: min(100%, 250px); margin: auto; text-align: left; font-size: clamp(8px, 1.5vw, 13px); }
.result-grid strong { color: var(--cyan); text-align: right; }
.score-form { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 10px 0; font-size: 10px; }
.score-form input { width: 92px; min-height: 30px; border: 2px solid var(--cyan); color: var(--cream); background: #07050d; padding: 5px; font: inherit; text-transform: uppercase; }
.gameover-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.gameover-actions .arcade-button { padding-inline: 4px; }
.local-winner { color: var(--cyan); font-size: clamp(13px,2.5vw,24px); font-weight:900; text-shadow:2px 2px #08050d; }
.local-results { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.local-results article { display:grid; grid-template-columns:1fr auto; gap:3px 8px; padding:8px; border:1px solid #63406f; background:#120c1d; text-align:left; }
.local-results h3 { grid-column:1/-1; margin:0 0 4px; color:var(--hot); }
.local-results strong { color:var(--cyan); }
.local-actions { grid-template-columns:1fr 1fr; max-width:360px; }

@keyframes blink { 50% { opacity: .28; } }

.touch-controls {
    display: flex;
    justify-content: space-between;
    width: min(100%, 820px);
    margin: 10px auto 0;
    gap: 30px;
}

body:not(.playing) .touch-controls { opacity: 0; pointer-events: none; }
body.local-multiplayer .solo-controls { display:none; }

.mp-touch-controls { display:none; justify-content:space-between; gap:16px; width:min(100%,960px); margin:8px auto 0; }
body.playing.local-multiplayer .mp-touch-controls { display:flex; }
.player-touch { display:flex; align-items:center; gap:5px; }
.player-touch strong { color:var(--hot); }
.player-touch button { min-width:clamp(38px,6vw,62px); min-height:42px; border:1px solid #ffe6a866; border-radius:4px; color:var(--cream); background:#26173f; box-shadow:0 3px #08060d; font:900 10px "Courier New",monospace; touch-action:none; }
.player-touch button.active { color:#100c1c; background:var(--cyan); translate:0 2px; box-shadow:0 1px #08060d; }
.player-touch button:last-child { background:var(--hot); color:#100c1c; }

.steering, .pedals { display: flex; gap: 10px; }
.touch-controls button {
    min-width: clamp(58px, 12vw, 94px);
    min-height: clamp(44px, 8vh, 64px);
    border: 2px solid #ffe6a866;
    border-radius: 6px;
    color: var(--cream);
    background: #26173fcc;
    box-shadow: 0 4px 0 #08060d;
    font-weight: 900;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}
.touch-controls button.active { color: #160d22; background: var(--cyan); translate: 0 3px; box-shadow: 0 1px 0 #08060d; }
.pedals button:last-child { color: #130c1c; background: var(--hot); }
.site-note { display:flex; justify-content:center; align-items:center; gap:8px; margin:9px 0 0; font-size:10px; font-weight:900; letter-spacing:.04em; }
.site-note a { padding:5px 8px; color:var(--ink); text-decoration:none; text-transform:uppercase; box-shadow:2px 2px 0 #000; }
.site-link { background:var(--cyan); }
.instagram-link { background:var(--pink); }
.site-note a:focus-visible { outline:3px solid var(--cream); outline-offset:2px; }
.orientation-hint { display: none; margin: 8px 0 0; color: var(--cyan); font-size: 9px; }
.portrait-controller { display: none; }

body.crt-off .scanlines, body.crt-off .screen-shell::after { display: none; }
body.crt-off #game, body.crt-off #game-2 { filter: none; }

@media (hover: hover) and (pointer: fine) and (min-height: 620px) {
    body.playing .touch-controls { opacity: .42; }
    body.playing .touch-controls:hover { opacity: 1; }
}

@media (pointer: coarse) {
    .coin-copy { display: none; }
    .tap-copy { display: inline; }
    body.playing .touch-controls { opacity: 1; }
    .arcade-button, .track-picker select { min-height:44px; }
    .track-picker select, .score-form input { font-size:16px; }
    .screen-shell { box-shadow:0 0 0 3px #292924,0 0 0 5px var(--cyan),0 7px 18px #000a; }
    .scanlines { opacity:.045; }
    .screen-shell::after { box-shadow:inset 0 0 12px #02000688; }
}

@media (orientation: portrait) and (max-width:700px) {
    body { display:block; background:#090908; }
    .cabinet {
        display:flex;
        flex-direction:column;
        width:100%;
        height:100vh;
        height:100dvh;
        min-height:100vh;
        min-height:100dvh;
        padding:max(7px,env(safe-area-inset-top)) 7px max(7px,env(safe-area-inset-bottom));
    }
    .marquee { flex:0 0 auto; margin:3px 0 8px; font-size:clamp(20px,8vw,34px); }
    .screen-shell { flex:0 0 auto; width:100%; margin:0; }
    .ui-layer { background:#0b081477; }
    .main-menu h1 { display:none; }
    .main-menu .track-picker span { display:none; }
    .main-menu .track-picker select {
        min-height:46px;
        padding-inline:12px;
        border:0;
        border-radius:13px;
        color:var(--ink);
        background:var(--cream);
        font-size:15px;
        font-weight:900;
    }
    .main-menu .menu-buttons .arcade-button.primary {
        width:min(62%,220px);
        min-height:58px;
        margin-inline:auto;
        border:0;
        border-radius:15px;
        font-size:16px;
        box-shadow:0 5px 0 #8e8780;
    }
    .touch-controls {
        flex:1 1 auto;
        display:block;
        width:100%;
        min-height:270px;
        margin:8px 0 0;
        opacity:1;
        pointer-events:auto;
    }
    .touch-controls > .landscape-controls { display:none; }
    .portrait-controller {
        position:relative;
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        height:100%;
        min-height:270px;
        padding:35px clamp(18px,7vw,32px) 48px;
        overflow:hidden;
        border:4px solid #080807;
        border-radius:24px 24px 38px 38px;
        background:
            repeating-linear-gradient(165deg,transparent 0 13px,#ffffff0c 13px 15px),
            linear-gradient(145deg,#ff4b9d 0%,#ed247d 48%,#ad0b57 100%);
        box-shadow:inset 0 5px 0 #ffb8d766,inset 0 -8px 0 #68012e99,0 6px 0 #050504;
    }
    body:not(.playing) .portrait-controller [data-control] { pointer-events:none; }
    .screen-menu-trigger { display:none; }
    .portrait-menu-trigger {
        right:auto;
        left:22px;
        bottom:22px;
        display:flex;
        pointer-events:auto;
    }
    body.menu-panel-open .portrait-menu-trigger, body.playing .portrait-menu-trigger { display:none; }
    .site-note { flex:0 0 auto; margin:10px 0 1px; }
    .site-note a { padding:4px 6px; font-size:8px; }
    body.local-multiplayer .screen-shell { width:min(100%,320px); aspect-ratio:8 / 9; }
    body.local-multiplayer .canvas-stage { flex-direction:column; }
    body.local-multiplayer .game-view { width:100%; height:50%; }
    .dom-hud { min-height:43px; padding:4px 5px; gap:4px; font-size:8px; }
    .mp-touch-controls { gap:6px; }
    .player-touch { display:grid; grid-template-columns:repeat(2,1fr); gap:4px; }
    .player-touch strong { grid-column:1/-1; }
}

@media (orientation:portrait) and (max-width:700px), (orientation:landscape) and (max-height:540px) {
    .main-menu { width:min(92%,520px); padding:10px; }
    .main-menu .eyebrow, .main-menu .subtitle, .main-menu .insert-coin { display:none; }
    .main-menu h1 { margin:0 0 12px; font-size:clamp(30px,9vw,52px); line-height:.9; }
    .main-menu .track-picker {
        flex-direction:column;
        gap:5px;
        width:min(88%,360px);
        height:auto;
        margin:0 auto 12px;
        font-size:10px;
    }
    .main-menu .track-picker select { width:100%; text-align:center; text-align-last:center; }
    .main-menu .menu-buttons { display:block; width:min(88%,360px); margin:0 auto; }
    .main-menu .menu-buttons .arcade-button { display:none; }
    .main-menu .menu-buttons .arcade-button.primary { display:block; width:100%; min-height:46px; font-size:12px; }
    .mobile-menu-trigger {
        position:absolute;
        right:10px;
        bottom:10px;
        z-index:8;
        display:flex;
        align-items:center;
        gap:5px;
        padding:7px 9px;
        border:2px solid var(--cream);
        border-radius:4px;
        color:var(--cream);
        background:var(--pink);
        box-shadow:3px 3px 0 var(--cyan);
        font:900 9px "Courier New",monospace;
        touch-action:manipulation;
    }
    .mobile-menu-trigger span { color:var(--cyan); font-size:15px; line-height:1; }
    body.playing .mobile-menu-trigger, body.menu-panel-open .mobile-menu-trigger { display:none; }
    .mobile-menu-panel { width:min(92%,520px); padding:7px; border-color:var(--cyan); background:#090908f5; }
    .mobile-menu-panel .eyebrow { display:none; }
    .mobile-menu-panel h2 { margin:0 0 4px; font-size:18px; }
    .mobile-menu-grid { gap:4px; margin:4px 0; }
    .mobile-menu-grid .arcade-button { min-height:34px; padding:3px 5px; font-size:8px; }
    .mobile-menu-grid .arcade-button span { padding:3px; }
    .mobile-menu-panel > .arcade-button { min-height:32px; padding:4px; font-size:8px; }
}

@media (orientation: portrait) and (max-width:700px) {
    .portrait-controller::before {
        content:"";
        position:absolute;
        inset:12px 18px auto;
        height:4px;
        border-radius:999px;
        background:var(--cyan);
        box-shadow:0 5px 0 var(--hot);
    }
    .dpad {
        display:grid;
        grid-template-columns:repeat(3,52px);
        grid-template-rows:repeat(3,52px);
        filter:drop-shadow(0 5px 0 #15121b);
    }
    .dpad button,.dpad i {
        min-width:0;
        min-height:0;
        width:52px;
        height:52px;
        border:0;
        border-radius:8px;
        color:#24231f;
        background:linear-gradient(145deg,#fffdf6,#beb9ac);
        box-shadow:inset 3px 3px 0 #fff,inset -3px -3px 0 #777269;
        font-size:18px;
    }
    .dpad-up { grid-column:2; grid-row:1; }
    .dpad-left { grid-column:1; grid-row:2; }
    .dpad i { grid-column:2; grid-row:2; border-radius:0; }
    .dpad-right { grid-column:3; grid-row:2; }
    .dpad-down { grid-column:2; grid-row:3; }
    .dpad button.active { color:#090908; background:var(--cyan); translate:0 2px; }
    .action-buttons { position:relative; width:145px; height:170px; }
    .action-buttons button {
        position:absolute;
        min-width:0;
        min-height:0;
        width:72px;
        height:72px;
        padding:0;
        border:3px solid #24202a;
        border-radius:50%;
        color:#171713;
        background:linear-gradient(145deg,#fffdf6,#bdb8ab);
        box-shadow:inset 3px 3px 0 #fff,inset -4px -4px 0 #716d63,0 5px 0 #11110f;
    }
    .action-buttons button.active { color:#090908; background:var(--cyan); translate:0 3px; box-shadow:inset 2px 2px #f4ffb6,0 2px #11110f; }
    .action-buttons strong { display:block; font-size:25px; line-height:1; }
    .action-buttons small { position:absolute; top:77px; left:50%; translate:-50% 0; color:#fff8ef; font-size:8px; text-shadow:1px 1px #000; }
    .action-a { top:8px; right:0; }
    .action-b { left:0; bottom:8px; }
    .controller-brand { position:absolute; left:50%; bottom:30px; translate:-50% 0; padding:3px 6px; color:#090908; background:var(--cyan); font-size:10px; font-weight:900; letter-spacing:.16em; box-shadow:3px 3px 0 var(--hot); }
    .controller-claim { position:absolute; left:50%; bottom:11px; width:100%; translate:-50% 0; color:#fff8ef; font-size:6px; font-weight:900; letter-spacing:.07em; text-shadow:1px 1px #000; }
    body:not(.playing) .touch-controls { opacity:1; pointer-events:auto; }
    .screen-menu-trigger { display:none; }
    .portrait-controller .portrait-menu-trigger {
        right:auto;
        left:22px;
        bottom:22px;
        display:flex;
        width:112px;
        min-width:112px;
        min-height:44px;
        justify-content:center;
        padding:8px 11px;
        border:2px solid var(--cream);
        border-radius:10px;
        color:var(--ink);
        background:var(--cream);
        box-shadow:3px 3px 0 var(--hot);
        font-size:11px;
        pointer-events:auto;
    }
    body.menu-panel-open .portrait-menu-trigger, body.playing .portrait-menu-trigger { display:none; }
    body.playing .orientation-hint { display:none; }
}

@media (orientation: landscape) and (max-height: 540px) {
    .cabinet { padding: 4px max(6px, env(safe-area-inset-right)) 4px max(6px, env(safe-area-inset-left)); }
    .marquee { display:none; }
    .site-note { position:fixed; z-index:10; top:50%; right:max(4px,env(safe-area-inset-right)); bottom:auto; left:auto; translate:0 -50%; margin:0; }
    .site-note .site-link { display:none; }
    .site-note .instagram-link { display:block; padding:4px 7px; font-size:8px; white-space:nowrap; opacity:.88; rotate:-90deg; }
    .screen-shell { width:min(80vw,calc((100dvh - 8px) * 16 / 9)); }
    body.local-multiplayer .screen-shell { width:min(96vw,calc(100vh * 32 / 9)); }
    .touch-controls { position: fixed; inset: 0; z-index: 8; width: 100%; margin: 0; align-items: end; padding: 0 14px max(10px, env(safe-area-inset-bottom)); pointer-events: none; }
    .touch-controls button { pointer-events:auto; opacity:.86; min-width:clamp(64px,9vw,82px); min-height:clamp(52px,15vh,66px); border-radius:14px; }
    .steering { gap:8px; }
    .pedals { gap:12px; }
    .pedals button { min-width:clamp(58px,8vw,72px); border-radius:50%; aspect-ratio:1; }
    body:not(.playing) .touch-controls button { pointer-events: none; }
    body.local-multiplayer .touch-controls { display:none; }
    body.playing.local-multiplayer .mp-touch-controls { position:fixed; inset:auto 8px max(5px,env(safe-area-inset-bottom)); z-index:9; width:auto; margin:0; pointer-events:none; }
    body.playing.local-multiplayer .player-touch button { pointer-events:auto; opacity:.78; }
    .menu-panel { max-height: 96%; padding: 7px; }
    .main-menu h1 { font-size: clamp(23px, 8vh, 42px); }
    .main-menu .eyebrow { display: none; }
    .menu-buttons { margin-top: 6px; gap: 5px; }
    .arcade-button { min-height: 25px; padding-block: 4px; }
}