:root {
  --ink: #100617;
  --paper: #fff8de;
  --hot: #ff3f83;
  --acid: #d7ff44;
  --cyan: #54ecff;
  --violet: #8c5cff;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body { font-family: "Arial Black", Impact, system-ui, sans-serif; color: var(--paper); user-select: none; }
button { font: inherit; }

#game-shell { position: relative; width: 100%; height: 100%; overflow: hidden; background: #100617; isolation: isolate; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.hidden { display: none !important; }

#hud { position: absolute; inset: 0; pointer-events: none; text-transform: uppercase; }
.hud-block { position: absolute; top: 22px; min-width: 178px; padding: 9px 16px 11px; border: 3px solid var(--paper); background: #160923df; transform: skew(-4deg); box-shadow: 6px 6px 0 #0008; }
.hud-block span { display: block; color: #b6a8bd; font: 700 10px/1 system-ui, sans-serif; letter-spacing: .22em; }
.hud-block strong { display: block; margin-top: 3px; font-size: 28px; line-height: 1; letter-spacing: .04em; }
.score-block { left: 22px; border-color: var(--cyan); }
.score-block strong { color: var(--cyan); }
.combo-block { right: 22px; min-width: 130px; text-align: right; border-color: var(--acid); }
.combo-block strong { color: var(--acid); }

.hud-center { position: absolute; top: 16px; left: 50%; width: 152px; transform: translateX(-50%); text-align: center; filter: drop-shadow(4px 5px 0 #0009); }
#timer { color: var(--paper); font-size: 52px; line-height: .85; -webkit-text-stroke: 2px var(--ink); }
#timer.danger { color: var(--hot); animation: throb .45s infinite alternate; }
#round-label { display: inline-block; margin-top: 8px; padding: 4px 8px; background: var(--paper); color: var(--ink); font: 900 8px/1 system-ui, sans-serif; letter-spacing: .12em; }

.boost-wrap { position: absolute; bottom: 24px; left: 50%; width: min(360px, 48vw); transform: translateX(-50%) skew(-5deg); }
.boost-label { display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--paper); font: 900 10px/1 system-ui, sans-serif; letter-spacing: .15em; text-shadow: 2px 2px #000; }
.boost-track { height: 15px; padding: 3px; border: 2px solid var(--paper); background: #160923e6; box-shadow: 5px 5px 0 #0008; }
#boost-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--hot), #ff9e2f, var(--acid)); transition: width .08s linear; }
#boost-fill.ready { animation: boost-ready .18s infinite alternate; }

#boss-wrap { position: absolute; top: 95px; left: 50%; min-width: 260px; padding: 7px 14px; transform: translateX(-50%) skew(-4deg); border: 2px solid var(--hot); background: #1d0719dc; text-align: center; box-shadow: 5px 5px 0 #0008; }
#boss-wrap > span { color: var(--hot); font-size: 12px; letter-spacing: .2em; }
.boss-pips { display: flex; gap: 6px; margin-top: 5px; }
.boss-pips i { flex: 1; height: 6px; background: var(--hot); box-shadow: 0 0 12px var(--hot); }
.boss-pips i.empty { background: #4b2537; box-shadow: none; }

#live-callout { position: absolute; top: 30%; left: 50%; width: 90%; transform: translate(-50%, -50%) rotate(-2deg); color: var(--paper); text-align: center; font-size: clamp(28px, 6vw, 72px); line-height: .85; letter-spacing: -.04em; -webkit-text-stroke: 3px var(--ink); text-shadow: 7px 8px 0 var(--hot); opacity: 0; transition: opacity .14s, transform .14s; }
#live-callout.show { opacity: 1; transform: translate(-50%, -50%) rotate(1deg) scale(1.06); }

.screen { position: absolute; inset: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 48%, #16092335 0 30%, #100617ef 77%); }
.screen::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(112deg, transparent 0 28px, #ffffff05 29px 31px); }
.sticker { padding: 6px 12px; transform: rotate(-2deg); background: var(--acid); color: var(--ink); font: 900 11px/1 system-ui, sans-serif; letter-spacing: .2em; box-shadow: 4px 4px 0 var(--hot); }
h1 { margin: 15px 0 0; color: var(--paper); font-size: clamp(66px, 12vw, 142px); line-height: .68; letter-spacing: -.08em; transform: skew(-5deg); -webkit-text-stroke: 3px var(--ink); filter: drop-shadow(10px 11px 0 #ff3f83) drop-shadow(-5px -4px 0 #54ecff); }
h1 em { color: var(--acid); font-style: normal; }
.tagline { margin: 25px 0 16px; color: var(--cyan); font-size: clamp(14px, 2vw, 22px); letter-spacing: .32em; text-shadow: 3px 3px 0 #000; }
.rule-strip { display: grid; grid-template-columns: 165px minmax(260px, 470px) 165px; gap: 14px; align-items: stretch; width: min(850px, 94vw); }
.rule-strip > div { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; border: 2px solid #ffffff3d; background: #160923e6; box-shadow: 5px 5px 0 #0008; }
.rule-strip kbd { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--paper); background: #2c113a; color: var(--acid); font: 900 17px/1 system-ui, sans-serif; box-shadow: 0 4px 0 #0b0310; }
.rule-strip > div:last-child kbd { width: auto; min-width: 62px; padding: 0 9px; font-size: 10px; }
.rule-strip > div > span { color: #c8b7ce; font: 800 10px/1 system-ui, sans-serif; letter-spacing: .08em; }
.rule-strip .rule-main { display: block; border-color: var(--hot); transform: rotate(-.8deg); }
.rule-main b { display: block; color: var(--paper); font: 900 14px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.rule-main span { display: block; margin-top: 6px; color: #bfaec6; font: 600 11px/1.4 system-ui, sans-serif; }

.screen button { position: relative; padding: 15px 32px; border: 3px solid var(--ink); outline: 3px solid var(--paper); background: var(--hot); color: var(--paper); cursor: pointer; font-size: 17px; letter-spacing: .1em; box-shadow: 8px 8px 0 var(--cyan); transform: skew(-5deg); transition: transform .12s, box-shadow .12s, background .12s; }
.screen button:hover, .screen button:focus-visible { background: var(--acid); color: var(--ink); transform: skew(-5deg) translate(-2px, -2px); box-shadow: 11px 11px 0 var(--hot); }
.screen button:active { transform: skew(-5deg) translate(5px, 5px); box-shadow: 2px 2px 0 var(--cyan); }
.mode-buttons { display: flex; gap: 18px; margin-top: 17px; }
.mode-buttons .secondary { background: #2c113a; box-shadow: 8px 8px 0 #8c5cff; }
.tiny-row { display: flex; gap: 24px; margin-top: 21px; color: #83728a; font: 800 8px/1 system-ui, sans-serif; letter-spacing: .14em; }

#end-screen h2 { margin: 15px 0 8px; color: var(--acid); font-size: clamp(56px, 10vw, 116px); line-height: .8; letter-spacing: -.07em; transform: skew(-5deg) rotate(-1deg); -webkit-text-stroke: 3px var(--ink); text-shadow: 9px 9px 0 var(--hot); }
#end-screen { background: radial-gradient(circle at 50% 48%, #160923f2 0 42%, #100617fc 82%); }
#end-screen h2 { margin: 18px 0 20px; font-size: clamp(52px, 8vw, 92px); }
.final-score { position: relative; z-index: 1; min-width: 310px; padding: 8px 28px; border-top: 2px solid #ffffff24; border-bottom: 2px solid #ffffff24; background: #100617c9; }
.final-score span { display: block; color: var(--cyan); font: 900 10px/1 system-ui, sans-serif; letter-spacing: .24em; }
.final-score strong { display: block; font-size: clamp(36px, 6vw, 66px); line-height: 1; }
.end-stats { display: flex; gap: 10px; margin-top: 14px; }
.end-stats > div { min-width: 125px; padding: 10px 18px; border: 2px solid #ffffff26; background: #160923dc; transform: skew(-3deg); }
.end-stats b { display: block; color: var(--acid); font-size: 22px; }
.end-stats span { color: #aa98b2; font: 800 8px/1 system-ui, sans-serif; letter-spacing: .12em; }

#online-screen { overflow-y: auto; justify-content: flex-start; padding-top: max(54px, 7vh); background: radial-gradient(circle at 50% 35%, #321047f5, #100617fc 72%); }
#online-screen h2 { margin: 14px 0 8px; color: var(--cyan); font-size: clamp(48px, 8vw, 84px); line-height: .72; letter-spacing: -.06em; transform: skew(-5deg); text-shadow: 7px 7px 0 var(--hot); }
#online-status { min-height: 20px; margin: 14px 0; color: #cfbdd6; font: 700 13px/1.4 system-ui, sans-serif; }
#online-entry { display: grid; gap: 14px; width: min(420px, 88vw); }
#online-entry label { display: grid; gap: 6px; color: var(--acid); text-align: left; font: 900 10px/1 system-ui, sans-serif; letter-spacing: .16em; }
#online-entry input { width: 100%; min-width: 0; padding: 13px 14px; border: 2px solid #ffffff42; outline: none; background: #100617e8; color: var(--paper); font: 900 18px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
#online-entry input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px #54ecff2b; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
#online-entry button { padding: 12px 18px; font-size: 13px; }
#room-lobby { width: min(600px, 92vw); }
.room-label { display: block; color: #a997b1; font: 900 9px/1 system-ui, sans-serif; letter-spacing: .22em; }
#room-code { margin: 7px 0 15px; padding: 5px 18px; border: 0; outline: 0; background: none; color: var(--acid); font-size: clamp(42px, 8vw, 72px); line-height: 1; letter-spacing: .18em; box-shadow: none; transform: none; }
#room-code:hover { color: var(--cyan); background: none; box-shadow: none; transform: scale(1.03); }
#lobby-players { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.lobby-player { display: grid; grid-template-columns: 13px 1fr; gap: 8px; align-items: center; min-height: 48px; padding: 8px 10px; border: 2px solid #ffffff1e; background: #100617b8; color: #9b899f; text-align: left; font: 900 10px/1.2 system-ui, sans-serif; }
.lobby-player.live { color: var(--paper); border-color: var(--driver-color); }
.lobby-player i { width: 13px; height: 13px; border-radius: 50%; background: var(--driver-color, #392a40); box-shadow: 0 0 9px var(--driver-color, transparent); }
.lobby-player b { display: block; color: var(--acid); font-size: 8px; letter-spacing: .1em; }
#room-lobby small { display: block; margin-top: 14px; color: #88778f; font: 700 10px/1.4 system-ui, sans-serif; }
#ready-button[aria-pressed="true"] { background: var(--acid); color: var(--ink); box-shadow: 8px 8px 0 var(--hot); }
#online-screen .back-button { margin-top: 24px; padding: 7px 14px; outline: 0; border-color: #ffffff23; background: transparent; color: #8e7f96; box-shadow: none; font-size: 9px; }
#online-scoreboard { position: absolute; top: 104px; left: 22px; display: grid; gap: 4px; width: 184px; }
.online-score-row { display: grid; grid-template-columns: 9px 1fr auto; gap: 7px; align-items: center; padding: 5px 8px; border-left: 3px solid var(--driver-color); background: #100617c9; color: #baaac1; font: 800 9px/1 system-ui, sans-serif; }
.online-score-row.me { color: var(--paper); background: #2b1138e6; }
.online-score-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--driver-color); }
.online-score-row b { color: var(--acid); font-size: 13px; }
#online-ranking { display: grid; gap: 5px; width: min(420px, 88vw); margin: 4px 0 10px; }
.rank-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; padding: 7px 12px; border-left: 5px solid var(--driver-color); background: #160923e6; text-align: left; font: 900 12px/1 system-ui, sans-serif; }
.rank-row b { color: var(--acid); }
#match-menu-button { position: absolute; top: 105px; right: 22px; padding: 7px 11px; border: 2px solid #ffffff35; outline: 0; background: #100617c9; color: #aa98b2; pointer-events: auto; cursor: pointer; font: 900 9px/1 system-ui, sans-serif; letter-spacing: .14em; box-shadow: 4px 4px 0 #0008; transform: skew(-4deg); }
#match-menu-button:hover, #match-menu-button:focus-visible { border-color: var(--cyan); color: var(--paper); }
.end-actions { display: flex; gap: 18px; margin-top: 17px; }
.end-actions .secondary { background: #2c113a; box-shadow: 8px 8px 0 #8c5cff; }

#touch-hint { position: absolute; bottom: 188px; left: 50%; display: none; transform: translateX(-50%); color: #8e7f96; font: 900 9px/1 system-ui, sans-serif; letter-spacing: .14em; pointer-events: none; }
#touch-controls { position: absolute; inset: auto 0 max(22px, env(safe-area-inset-bottom)); display: none; justify-content: center; gap: 20px; padding: 0 22px; pointer-events: none; }
#touch-controls button { width: 88px; height: 88px; border: 3px solid var(--paper); border-radius: 50%; background: #160923c9; color: var(--acid); pointer-events: auto; font-size: 17px; letter-spacing: .03em; box-shadow: 6px 7px 0 #0008; touch-action: none; }
#touch-controls #touch-gas { width: 102px; height: 102px; margin-top: -14px; background: #d7ff4424; }
#touch-controls #touch-boost { color: var(--cyan); border-color: var(--cyan); }
#touch-controls button.pressed { background: var(--hot); transform: scale(.94); }

#accessibility { position: absolute; right: 10px; bottom: 8px; display: flex; gap: 6px; }
#accessibility button { padding: 5px 7px; border: 1px solid #ffffff1f; background: #1006179c; color: #8e7f96; cursor: pointer; font: 800 8px/1 system-ui, sans-serif; letter-spacing: .06em; }

@keyframes throb { to { transform: scale(1.08) rotate(2deg); } }
@keyframes boost-ready { to { filter: brightness(1.8); box-shadow: 0 0 20px var(--acid); } }

@media (max-width: 700px) {
  #touch-controls { display: flex; }
  #touch-hint { display: block; }
  #hud.hidden ~ #touch-controls, #hud.hidden ~ #touch-hint { display: none; }
  #accessibility { top: 8px; right: 8px; bottom: auto; }
  .screen { justify-content: flex-start; padding-top: max(80px, 9vh); }
  h1 { font-size: clamp(62px, 25vw, 100px); }
  .tagline { margin: 20px 0 12px; }
  .rule-strip { grid-template-columns: 1fr 1fr; width: min(94vw, 470px); }
  .rule-strip .rule-main { grid-column: 1 / -1; grid-row: 1; }
  .tiny-row { display: none; }
  .mode-buttons { flex-direction: column; gap: 12px; }
  .mode-buttons button { padding: 11px 18px; font-size: 13px; }
  .hud-block { top: 48px; min-width: 112px; padding: 7px 9px; }
  .hud-block strong { font-size: 20px; }
  .score-block { left: 8px; }
  .combo-block { right: 8px; min-width: 82px; }
  .hud-center { top: 48px; width: 80px; }
  #timer { font-size: 38px; }
  #round-label { display: none; }
  #boss-wrap { top: 97px; min-width: 210px; }
  .boost-wrap { bottom: 128px; width: 54vw; }
  .end-stats > div { min-width: 92px; padding: 9px 7px; }
  #end-screen h2 { margin-top: 28px; }
  #end-screen h2 { font-size: clamp(48px, 15vw, 70px); }
  .final-score { min-width: 260px; }
  #online-scoreboard { top: 99px; left: 8px; width: 130px; }
  #match-menu-button { top: 102px; right: 8px; }
  .online-score-row { grid-template-columns: 7px 1fr auto; padding: 4px 5px; font-size: 7px; }
  #lobby-players { grid-template-columns: repeat(2, 1fr); }
  #online-screen { padding-top: max(45px, 6vh); }
  .end-actions { flex-direction: column; gap: 12px; }
  .end-actions button { padding: 11px 18px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}