:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #101513;
  color: #fff8e7;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 50% 0%, #253c31 0, #111915 45%, #090b0a 100%); }
button { font: inherit; }

.game-shell { width: min(1180px, 100%); min-height: 100vh; margin: 0 auto; padding: 18px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; }
.topbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; font-weight: 950; text-decoration: none; }
.brand span { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(162, 255, 111, .65); background: rgba(106, 212, 101, .18); color: #dffff0; }
.mode { margin: 0 auto 0 8px; color: #c5d2be; font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.sound-toggle { min-height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.19); border-radius: 4px; background: rgba(255,255,255,.06); color: #fff8e7; font-weight: 800; cursor: pointer; }
.sound-toggle:hover { background: rgba(255,255,255,.12); }

.game-frame { position: relative; isolation: isolate; min-height: min(760px, calc(100vh - 114px)); overflow: hidden; border: 1px solid rgba(183, 255, 142, .32); border-radius: 14px; background: #10221d; box-shadow: 0 24px 70px rgba(0,0,0,.45), inset 0 0 70px rgba(63, 213, 108, .13); }
.scene, .scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vignette { pointer-events: none; position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at center, transparent 37%, rgba(4, 10, 8, .13) 63%, rgba(4, 8, 6, .72) 100%); }

.hud { position: absolute; z-index: 4; top: clamp(18px, 3vw, 30px); left: clamp(18px, 3vw, 32px); right: clamp(18px, 3vw, 32px); display: flex; justify-content: space-between; gap: 12px; pointer-events: none; }
.hud-item { min-width: 94px; text-shadow: 0 2px 10px #000; }
.hud-item span { display: block; margin-bottom: 3px; color: #d2deca; font-size: .64rem; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.hud-item strong { color: #fff9e6; font-size: clamp(1.08rem, 2vw, 1.42rem); font-weight: 950; }
.fart-hud { min-width: 148px; text-align: center; }
.fart-meter { display: inline-flex; gap: 6px; align-items: center; min-height: 19px; padding: 4px 6px; border: 1px solid rgba(207, 255, 139, .28); border-radius: 999px; background: rgba(9, 21, 14, .5); }
.fart-meter i { display: block; width: 27px; height: 10px; border: 1px solid rgba(220,255,178,.33); border-radius: 999px; background: rgba(129, 162, 94, .24); box-shadow: inset 0 0 7px rgba(0,0,0,.3); transition: background .16s ease, box-shadow .16s ease, transform .16s ease; }
.fart-meter i.is-full { background: linear-gradient(90deg, #d8ff79, #70d96b); box-shadow: 0 0 10px rgba(171, 255, 91, .55); transform: scaleY(1.12); }
.best { text-align: right; }
.lane-radar { position: absolute; z-index: 4; top: clamp(61px, 8vw, 76px); left: 50%; display: flex; gap: 5px; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.lane-radar.is-visible { opacity: 1; }
.lane-radar span { min-width: 72px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 3px; background: rgba(8, 18, 13, .68); color: #c7d7c2; font-size: .58rem; font-weight: 950; letter-spacing: .1em; text-align: center; text-shadow: 0 1px 5px #000; }
.lane-radar span.is-danger { border-color: rgba(255,117,91,.72); background: rgba(116,37,29,.8); color: #ffe0cf; box-shadow: 0 0 15px rgba(255,87,55,.2); }
.lane-radar span.is-safe { border-color: rgba(197,255,118,.72); background: rgba(47,105,55,.83); color: #edffd2; box-shadow: 0 0 15px rgba(154,255,91,.25); }

.game-message { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(5, 13, 10, .5); transition: opacity .25s ease, visibility .25s ease; }
.game-message:not(.is-visible) { opacity: 0; visibility: hidden; pointer-events: none; }
.message-card { width: min(470px, 100%); padding: clamp(26px, 5vw, 46px); border: 1px solid rgba(213,255,187,.36); border-radius: 12px; background: linear-gradient(150deg, rgba(23,51,37,.91), rgba(11,20,16,.95)); box-shadow: 0 20px 70px rgba(0,0,0,.46); text-align: center; }
.kicker { margin: 0 0 9px; color: #baff72; font-size: .72rem; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.message-card h1 { margin: 0; color: #fffbea; font-size: clamp(2.8rem, 9vw, 5.6rem); line-height: .79; letter-spacing: -.07em; }
.message-card p:not(.kicker):not(.instructions) { margin: 23px auto 0; color: #d3dfcd; max-width: 390px; line-height: 1.5; }
.start-button { width: 100%; min-height: 54px; margin-top: 26px; border: 0; border-radius: 5px; background: linear-gradient(135deg, #c1f85d, #6fda82); color: #102014; font-weight: 950; font-size: 1rem; cursor: pointer; box-shadow: 0 8px 24px rgba(113,230,107,.24); }
.start-button:hover { transform: translateY(-1px); filter: brightness(1.06); }
.instructions { margin: 14px 0 0; color: #aebea9; font-size: .76rem; font-weight: 800; }
.hit-flash { position: absolute; z-index: 3; inset: 0; pointer-events: none; opacity: 0; background: rgba(237, 92, 92, .45); transition: opacity .08s ease; }
.hit-flash.is-active { opacity: 1; }
.cue { position: absolute; z-index: 4; left: 50%; bottom: 13%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0; color: #fff8e7; font-size: clamp(.76rem, 1.7vw, .95rem); font-weight: 950; letter-spacing: .06em; text-align: center; text-shadow: 0 2px 9px #000; opacity: 0; transition: opacity .15s; }
.cue.is-visible { opacity: 1; }
.jump-button { position: absolute; z-index: 6; bottom: 18px; left: 18px; min-width: 108px; min-height: 52px; padding: 0 17px; border: 1px solid rgba(224,255,146,.66); border-radius: 7px; background: linear-gradient(145deg, rgba(177,246,87,.9), rgba(82,183,99,.88)); color: #112116; font-weight: 950; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.22); touch-action: manipulation; }
.jump-button span { display: block; font-size: .98rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .06em; }
.jump-button small { display: block; margin-top: 2px; font-size: .62rem; font-weight: 900; letter-spacing: .1em; opacity: .67; text-transform: uppercase; }
.jump-button:active { transform: translateY(2px) scale(.97); }

.mobile-controls { position: absolute; z-index: 6; right: 18px; bottom: 18px; display: flex; gap: 9px; }
.mobile-controls button { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(9,21,15,.68); color: #fff9e8; font-size: 1.6rem; font-weight: 900; cursor: pointer; backdrop-filter: blur(8px); touch-action: manipulation; }
.mobile-controls button:active { background: rgba(164,255,111,.36); transform: scale(.95); }
.footer-note { margin: 0; color: #81917d; font-size: .76rem; font-weight: 700; text-align: center; }

@media (min-width: 760px) { .mobile-controls { display: none; } }
@media (max-width: 620px) { .game-shell { padding: 10px; } .mode { display: none; } .game-frame { min-height: calc(100vh - 86px); border-radius: 10px; } .hud { top: 16px; left: 16px; right: 16px; } .hud-item { min-width: 60px; } .fart-hud { min-width: 112px; } .fart-meter i { width: 20px; } .lane-radar { top: 58px; } .lane-radar span { min-width: 58px; padding: 5px 4px; font-size: .5rem; } .message-card { padding: 28px 22px; } .footer-note { display: none; } .jump-button { bottom: 18px; left: 16px; min-width: 82px; min-height: 48px; padding: 0 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }