:root {
  color-scheme: dark;
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  background: #071018;
  color: #f5fff9;
  --mint: #73ffc1;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 15% -10%, #164c45 0, transparent 36%), radial-gradient(circle at 90% 0, #27205d 0, transparent 31%), #070d14;
  overscroll-behavior-x: none;
}
button { border: 0; color: inherit; font: inherit; cursor: pointer; }
.shell {
  width: min(760px, 100%);
  margin: auto;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; }
.header-actions { display: flex; align-items: center; gap: 6px; }
#themeToggle { min-height: 38px; padding: 8px 10px; border: 1px solid #a6ffdc2e; border-radius: 12px; background: #0c1c23d9; color: #a8c5bd; font-size: 10px; font-weight: 850; }
#themeToggle span { margin-right: 2px; color: #ffe277; font-size: 13px; }
.eyebrow { margin: 0 0 2px; color: var(--mint); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
h1 { margin: 0; font-size: clamp(22px, 6vw, 34px); line-height: 1; letter-spacing: -.04em; }
#restart { min-height: 38px; padding: 8px 12px; border: 1px solid #a6ffdc33; border-radius: 12px; background: #13252a; color: #d9fff0; font-size: 12px; font-weight: 850; }
.simulation-note { margin: 6px 0 8px; color: #8eaaa5; font-size: 9px; line-height: 1.35; }
.simulation-note b { display: inline-block; margin-right: 5px; padding: 3px 6px; border-radius: 6px; background: #ffca5d; color: #302000; font-size: 8px; letter-spacing: .08em; }
.arena-card {
  position: relative;
  overflow: hidden;
  min-height: min(75svh, 680px);
  border: 1px solid #8affe133;
  border-radius: 22px;
  background: #071a1b;
  box-shadow: 0 24px 72px #0009, 0 0 0 4px #09151c;
  isolation: isolate;
}
.arena-card::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 54px #0008; }
canvas { display: block; width: 100%; height: min(75svh, 680px); min-height: 520px; touch-action: pan-y pinch-zoom; }
.hud { position: absolute; z-index: 3; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 126px); }
.hud span { padding: 5px 7px; border: 1px solid #bdffe433; border-radius: 9px; background: #061411cc; color: #8fb8a9; font-size: 7px; backdrop-filter: blur(8px); }
.hud b { margin-left: 3px; color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.boost-state { position: absolute; z-index: 4; left: 50%; top: 14px; transform: translateX(-50%) scale(.8); padding: 6px 9px; border: 1px solid #ffe96f66; border-radius: 18px; background: #352c08cc; color: #ffec7d; font-size: 8px; font-weight: 900; letter-spacing: .13em; opacity: 0; transition: .2s; }
.boost-state.active { opacity: 1; transform: translateX(-50%) scale(1); }
.feedback { position: absolute; z-index: 5; top: 64px; left: 50%; transform: translate(-50%, -6px) scale(.9); min-width: 110px; color: #fff5a5; text-align: center; font-size: 14px; font-weight: 950; text-shadow: 0 0 15px #ffb82b; opacity: 0; pointer-events: none; transition: .2s; }
.feedback.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.ranking-card { position: absolute; z-index: 3; top: 48px; right: 9px; width: 112px; padding: 8px 9px; border: 1px solid #8affe124; border-radius: 12px; background: #071518c7; backdrop-filter: blur(8px); pointer-events: none; }
.ranking-title { display: flex; align-items: center; justify-content: space-between; }
.ranking-title h2 { margin: 0; color: #ddfff0; font-size: 9px; }
.ranking-title span { color: #ffca5d; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
ol { display: grid; gap: 2px; margin: 5px 0 0; padding: 0; list-style: none; counter-reset: rank; }
li { counter-increment: rank; display: grid; grid-template-columns: 11px 6px 1fr auto; gap: 3px; align-items: center; min-width: 0; color: #91aaa4; font-size: 8px; line-height: 1.25; }
li::before { content: counter(rank); color: #60756f; }
li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 6px var(--dot); }
.you { color: #fff; font-weight: 850; }
.out { opacity: .35; text-decoration: line-through; }
.mobile-controls { position: absolute; z-index: 4; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; display: flex; align-items: end; justify-content: space-between; pointer-events: none; }
.joystick { position: relative; width: 116px; height: 116px; border: 1px solid #94ffe150; border-radius: 50%; background: radial-gradient(circle, #19313adc 0 29%, #102329d9 30% 58%, #09171dcc 59%); touch-action: none; box-shadow: inset 0 0 24px #0008, 0 8px 30px #0007; pointer-events: auto; }
.joystick i { position: absolute; color: #6c8a84; font-size: 9px; font-style: normal; }
.joystick i:nth-child(1) { top: 7px; left: 53px; }
.joystick i:nth-child(2) { top: 51px; left: 9px; }
.joystick i:nth-child(3) { top: 51px; right: 9px; }
.joystick i:nth-child(4) { bottom: 7px; left: 53px; }
.joystick-knob { position: absolute; top: 34px; left: 34px; width: 48px; height: 48px; border: 1px solid #adffe3aa; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8fff1, var(--mint) 32%, #1aa97a); box-shadow: 0 8px 22px #0008, 0 0 22px #66ffc277; transition: transform .06s; }
.boost { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 4px 5px 0; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff0a6, #ffcf4e 42%, #db6d16); color: #321300; box-shadow: 0 7px 0 #78340d, 0 12px 26px #0008; touch-action: none; pointer-events: auto; }
.boost span { font-size: 20px; }
.boost b { font-size: 12px; }
.boost small { font-size: 7px; opacity: .72; }
.boost.active { transform: translateY(5px); box-shadow: 0 2px 0 #78340d, 0 6px 18px #0008; }
.overlay { position: absolute; z-index: 6; inset: 0; display: grid; place-content: center; justify-items: center; gap: 9px; padding: 24px; text-align: center; background: linear-gradient(#061416ba, #030a0dcc); backdrop-filter: blur(6px); }
.overlay .mini { color: var(--mint); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.overlay strong { font-size: clamp(24px, 7vw, 38px); letter-spacing: -.04em; }
.overlay > span:not(.mini) { color: #a5c2ba; font-size: 12px; }
.overlay.hidden { display: none; }
#start { min-height: 44px; margin-top: 7px; padding: 12px 24px; border-radius: 15px; background: linear-gradient(135deg, var(--mint), #53d9ff); color: #062017; font-weight: 900; box-shadow: 0 10px 34px #5dffd35c; }
.keyboard-tip { margin: 9px 0 0; text-align: center; color: #58716c; font-size: 9px; }
.absorb-pop { animation: pop .25s ease; }
@keyframes pop { 50% { filter: brightness(1.08); } }
[data-arena-theme="light"] { color-scheme: light; background: #edf5ef; }
[data-arena-theme="light"] body { background: radial-gradient(circle at 10% 0, #d7f3e9 0, transparent 34%), radial-gradient(circle at 94% 3%, #d9e1ff 0, transparent 32%), #edf5ef; }
[data-arena-theme="light"] .shell { color: #173c42; --mint: #087f78; }
[data-arena-theme="light"] .eyebrow { color: #087f78; }
[data-arena-theme="light"] #themeToggle { border-color: #2f77744a; background: #f6fffbdf; color: #225d5a; }
[data-arena-theme="light"] #themeToggle span { color: #187e75; }
[data-arena-theme="light"] #restart { border-color: #2f77744a; background: #e8f7f1; color: #225d5a; }
[data-arena-theme="light"] .simulation-note { color: #66807a; }
[data-arena-theme="light"] .arena-card { border-color: #559c9470; background: #d9ede5; box-shadow: 0 22px 60px #375c5138, 0 0 0 4px #d3e9e0; }
[data-arena-theme="light"] .arena-card::after { box-shadow: inset 0 0 54px #53756b2c; }
[data-arena-theme="light"] .hud span { border-color: #357c7440; background: #f4fffbdb; color: #53706c; box-shadow: 0 4px 12px #355f5730; }
[data-arena-theme="light"] .hud b { color: #173f3c; }
[data-arena-theme="light"] .ranking-card { border-color: #3f807945; background: #f6fffbdf; box-shadow: 0 8px 22px #335e5733; }
[data-arena-theme="light"] .ranking-title h2, [data-arena-theme="light"] .you { color: #173f3c; }
[data-arena-theme="light"] li { color: #58716d; }
[data-arena-theme="light"] .joystick { border-color: #2b736b66; background: radial-gradient(circle, #dff9efeb 0 29%, #c5e7dce8 30% 58%, #b1d7cde0 59%); box-shadow: inset 0 0 22px #35665c2b, 0 8px 28px #395f583d; }
[data-arena-theme="light"] .joystick i { color: #5f817b; }
[data-arena-theme="light"] .joystick-knob { border-color: #167c73a3; background: radial-gradient(circle at 35% 30%, #fff, #75dbc4 34%, #1a9f8e); box-shadow: 0 8px 18px #476c6554, 0 0 18px #4ccab28f; }
[data-arena-theme="light"] .overlay { background: linear-gradient(#e8f7f0d9, #cfe4dcdf); }
[data-arena-theme="light"] .overlay > span:not(.mini), [data-arena-theme="light"] .keyboard-tip { color: #607b76; }
@media (min-width: 601px) {
  .arena-card, canvas { min-height: 600px; height: min(76vh, 680px); }
  .ranking-card { width: 132px; }
}
@media (max-width: 390px) {
  .shell { padding-inline: max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right)); }
  .arena-card, canvas { min-height: 500px; height: min(74svh, 620px); }
  .ranking-card { width: 105px; }
  .mobile-controls { right: 9px; left: 9px; }
  .joystick { width: 108px; height: 108px; }
  .joystick-knob { top: 32px; left: 32px; width: 44px; height: 44px; }
  .boost { width: 74px; height: 74px; }
  #themeToggle, #restart { padding-inline: 8px; }
}