:root {
  --ink: #edf7eb;
  --muted: #94aaa0;
  --panel: #131f1c;
  --line: rgba(221, 242, 225, 0.16);
  --accent: #e9b949;
  --danger: #dd665e;
  --cool: #65b9ac;
}

* { box-sizing: border-box; }
html { background: #0b1110; }
body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 8%, rgba(101, 185, 172, .13), transparent 28rem),
    linear-gradient(135deg, #0b1110, #121916 58%, #0b1110);
  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

button { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:active { transform: translateY(2px) scale(.985); }

.prototype-shell { width: min(100%, 560px); margin: 0 auto; padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 5px 15px; }
.brand-row > div { min-width: 0; }
.eyebrow { margin: 0 0 3px; color: var(--accent); font: 800 10px/1.2 "Avenir Next", sans-serif; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(23px, 6vw, 34px); line-height: 1.05; letter-spacing: -.05em; }
.subtitle { margin: 7px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.sound-button { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(233,185,73,.32); border-radius: 14px; background: #172420; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.18); }
.sound-button svg { width: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.sound-button.muted { color: #708079; }

.arena-frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: #17221e; box-shadow: 0 22px 60px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.07); isolation: isolate; touch-action: none; }
.arena-frame::after { content:""; position:absolute; z-index:6; inset:0; border-radius:inherit; pointer-events:none; opacity:0; box-shadow:inset 0 0 54px 13px rgba(255,43,36,.9); }
.arena-frame.danger::after { animation: dangerPulse .72s ease-in-out infinite; }
#gameCanvas { display: block; width: 100%; height: 100%; background: #182722; touch-action: none; }
.screen { position: absolute; inset: 0; z-index: 5; }
[hidden] { display: none !important; }

.start-screen { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: 14px; background: radial-gradient(circle at 85% 8%, rgba(233,185,73,.12), transparent 35%), linear-gradient(145deg, #14231f, #0c1512 70%); }
.start-screen::before, .start-screen::after { content:""; position:absolute; width:84px; height:84px; border-color:rgba(101,185,172,.2); pointer-events:none; }
.start-screen::before { left:14px; top:14px; border-left:1px solid; border-top:1px solid; }
.start-screen::after { right:14px; bottom:14px; border-right:1px solid; border-bottom:1px solid; }
.cover-art { position: relative; align-self:center; justify-self:center; width:auto; max-width:100%; height:100%; max-height:460px; aspect-ratio:1; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:24px; background:#10243a; box-shadow:0 18px 36px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.12); animation:coverReveal .48s cubic-bezier(.16,1,.3,1) both; }
.cover-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mode-badge { position:absolute; top:12px; left:12px; padding:7px 10px; border:1px solid rgba(255,255,255,.24); border-radius:8px; background:rgba(8,18,29,.78); color:#fff; font:900 9px/1 "Avenir Next",sans-serif; letter-spacing:.14em; backdrop-filter:blur(7px); }
.start-copy { position: relative; z-index:1; padding: 13px 4px 3px; background:transparent; }
.start-copy > p:first-child { margin: 0 0 11px; color:#dce9df; font-size: 12px; font-weight: 800; text-align:center; }
.item-preview { display: flex; gap: 6px; margin: -2px 0 13px; overflow: hidden; }
.item-preview span { flex: 1 1 auto; padding: 5px 6px; border: 1px solid rgba(233,185,73,.22); border-radius: 5px; color: var(--accent); font-size: 7px; font-weight: 900; letter-spacing: .04em; text-align: center; }
.primary-button { width: 100%; min-height: 60px; border: 1px solid #f2cf73; border-radius: 14px; background: var(--accent); color: #1d2119; font-weight: 900; letter-spacing: .02em; box-shadow: 0 5px 0 #8e702d, inset 0 1px rgba(255,255,255,.5); }
.controls-copy { margin: 14px 4px 0; color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; }

.match-screen { display: grid; place-content: center; justify-items: center; background: rgba(8,14,12,.94); text-align: center; }
.match-screen h2 { margin: 9px 0 4px; font-size: 26px; }
.match-screen p { color: var(--muted); }
.match-kicker { margin: 20px 0 0; color: var(--accent) !important; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.radar { position: relative; width: 150px; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(101,185,172,.35); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 23px, rgba(101,185,172,.18) 24px 25px); }
.radar::before { content: ""; position: absolute; inset: 50% 0 0 50%; transform-origin: top left; background: conic-gradient(from 270deg, rgba(101,185,172,.55), transparent 24%); animation: radar 1.35s linear infinite; }
.radar i { position: absolute; width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--accent); animation: blip 1.3s ease-in-out infinite alternate; }
.radar i:nth-child(1) { left: 27%; top: 41%; }
.radar i:nth-child(2) { right: 22%; top: 28%; animation-delay: -.4s; }
.radar i:nth-child(3) { right: 34%; bottom: 24%; animation-delay: -.8s; }
.text-button { border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--muted); font-size: 12px; }

.hud { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 13px 14px 20px; background: linear-gradient(180deg, rgba(7,12,10,.88), transparent); pointer-events: none; }
.health-group { min-width: 0; }
.enemy-health { text-align: right; }
.fighter-label { display:flex; align-items:end; justify-content:space-between; gap:6px; margin-bottom:5px; }
.enemy-health .fighter-label { flex-direction:row-reverse; }
.fighter-label strong { color:#f7f2d5; font:900 11px/1 "Avenir Next",sans-serif; text-shadow:0 2px 0 rgba(0,0,0,.55); }
.hud-label { display:block; overflow:hidden; color:var(--ink); font-size:10px; font-weight:900; text-overflow:ellipsis; text-shadow:0 2px 0 rgba(0,0,0,.55); white-space:nowrap; }
.health-bar { position:relative; overflow:hidden; width:100%; height:19px; border:2px solid rgba(237,247,235,.88); border-radius:5px; background:#311e21; clip-path:polygon(0 0,100% 0,94% 100%,0 100%); box-shadow:inset 0 0 0 2px rgba(8,14,12,.7),0 3px 0 rgba(0,0,0,.42); }
.enemy-health .health-bar { clip-path:polygon(0 0,100% 0,100% 100%,6% 100%); }
.health-bar i { position:absolute; inset:0; display:block; width:100%; height:100%; transform-origin:left; }
.health-bar .health-lag { z-index:1; background:#f2c84b; transition:transform .62s cubic-bezier(.2,.8,.2,1) .16s; }
.health-bar .health-fill { z-index:2; background:linear-gradient(180deg,#a8eee0 0 44%,#4eaa9d 48% 100%); transition:transform .13s ease-out; }
.enemy-health .health-bar i { transform-origin:right; }
.enemy-health .health-bar .health-fill { background:linear-gradient(180deg,#ff9889 0 44%,#cf504b 48% 100%); }
.health-segments { position:absolute; z-index:3; inset:0; background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 2px),rgba(9,16,14,.72) calc(25% - 2px) 25%); pointer-events:none; }
.health-group.critical .health-fill { background:linear-gradient(180deg,#ffdc65 0 42%,#f0443e 47% 100%); animation:healthCritical .42s ease-in-out infinite alternate; }
.ammo-row { display: flex; gap: 3px; margin-top: 5px; }
.enemy-ammo { justify-content: flex-end; }
.ammo-row i { width: 13px; height: 5px; border-radius: 2px; background: var(--accent); transition: opacity .12s, transform .12s; }
.ammo-row i.used { opacity: .18; transform: scaleX(.65); }
.enemy-ammo i { background: #dd665e; }
.ammo-status { display: flex; align-items: baseline; justify-content: space-between; gap: 5px; margin-top: 5px; color: var(--accent); font-family: "Avenir Next", sans-serif; font-weight: 900; }
.ammo-status span { font-size: 8px; letter-spacing: .1em; }
.ammo-status strong { font-size: 12px; line-height: 1; white-space: nowrap; }
.ammo-status.reloading { color: var(--danger); }
.reload-track { height: 3px; margin-top: 4px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.1); opacity: 0; transition: opacity .12s; }
.reload-track.active { opacity: 1; }
.reload-track i { display: block; width: 100%; height: 100%; background: var(--danger); transform: scaleX(0); transform-origin: left; }
.round-clock { min-width: 56px; text-align: center; }
.round-clock strong { display: block; font: 900 23px/.8 "Avenir Next", sans-serif; }
.round-clock span { color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.round-clock small { display:block; max-width:72px; margin-top:4px; overflow:hidden; color:var(--muted); font-size:6px; font-weight:900; letter-spacing:.08em; text-overflow:ellipsis; white-space:nowrap; }

.countdown { position: absolute; z-index: 9; inset: 0; display: grid; place-items: center; background: rgba(8,14,12,.24); color: var(--ink); font-size: clamp(94px, 30vw, 160px); font-weight: 900; letter-spacing: -.08em; text-shadow: 6px 6px 0 #243b34; }
.event-banner { position: absolute; z-index: 7; left: 50%; top: 21%; min-width: 190px; padding: 10px 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(10,18,15,.84); color: var(--accent); font-size: 13px; font-weight: 900; text-align: center; transform: translateX(-50%); animation: bannerIn .25s ease-out; }

.mobile-controls { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.joystick-zone { position: absolute; inset: 0; pointer-events: none; touch-action: none; }
.joystick-base { position: absolute; left: 58px; top: calc(100% - 58px); width: 104px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(13,24,20,.4); opacity: 0; transform: translate(-50%, -50%) scale(.82); transition: opacity .08s ease-out, transform .08s ease-out; backdrop-filter: blur(3px); }
.joystick-zone.active .joystick-base { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.joystick-base i { position: absolute; left: 27px; top: 27px; width: 48px; aspect-ratio: 1; border-radius: 50%; background: rgba(237,247,235,.72); box-shadow: inset 0 1px rgba(255,255,255,.5); will-change: transform; }
.action-stack { position: absolute; right: 14px; bottom: 14px; display: grid; gap: 10px; justify-items: end; pointer-events: auto; }
.action-button { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(15,27,23,.78); backdrop-filter: blur(5px); font-weight: 900; box-shadow: inset 0 1px rgba(255,255,255,.12); }
.action-button span, .action-button small { position: relative; z-index: 2; display: block; }
.action-button small { color: var(--muted); font-size: 7px; }
.dash-button { width: 82px; height: 82px; color: var(--ink); }
.dash-button i { position: absolute; z-index: 1; inset: 0; background: conic-gradient(var(--cool) var(--cooldown, 0%), transparent 0); opacity: .35; }
.item-button { display:grid; width: 86px; min-height: 78px; padding:9px 5px 7px; place-content:center; border-color: rgba(233,185,73,.45); color: var(--accent); font-size: 8px; }
.item-button .item-icon { position:relative; z-index:2; width:42px; height:42px; margin:-6px auto -2px; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.42)); }
.item-button .item-glyph { width:25px; height:25px; margin:0 auto 2px; border:2px solid currentColor; border-radius:8px; font-size:13px; line-height:21px; }
.item-button #itemLabel { max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item-button #itemHelp { max-width:76px; margin-top:2px; overflow:hidden; color:#f4e7bb; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.item-button.empty { opacity: .5; }
.item-button.ready { animation: itemReady .65s cubic-bezier(.2,.8,.2,1) 2; }

.result-screen { display: grid; align-content: center; padding: 28px; background: rgba(8,14,12,.96); text-align: left; }
.result-kicker { margin: 0; color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.result-screen h2 { margin: 7px 0 24px; font-size: clamp(49px, 15vw, 78px); line-height: .85; letter-spacing: -.07em; }
.result-score { display: flex; align-items: end; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-score span { color: var(--muted); font-size: 10px; font-weight: 900; }
.result-score strong { font-size: 44px; line-height: .8; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 24px; }
.result-stats div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.result-stats dt { color: var(--muted); font-size: 8px; font-weight: 900; }
.result-stats dd { margin: 3px 0 0; font-size: 20px; font-weight: 900; }
.prototype-note { color: var(--muted); font-size: 9px; text-align: center; }
.record-status { min-height:18px; margin:-12px 0 12px; color:var(--cool); font-size:10px; font-weight:900; text-align:center; }

.battle-ranking { margin-top:24px; }
.ranking-card { padding:22px 18px; border:1px solid var(--line); border-radius:26px; background:linear-gradient(180deg,rgba(24,38,33,.96),rgba(12,20,17,.98)); box-shadow:0 18px 45px rgba(0,0,0,.25); }
.ranking-kicker { margin:0 0 5px; color:var(--accent); font-size:8px; font-weight:900; letter-spacing:.16em; }
.ranking-card h2 { margin:0; font-size:22px; }
.battle-record-note { margin:8px 0 16px; color:var(--muted); font-size:10px; line-height:1.5; }
.battle-record-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:18px; }
.battle-record-grid div { padding:10px 5px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.035); text-align:center; }
.battle-record-grid span { display:block; color:var(--muted); font-size:7px; font-weight:900; }
.battle-record-grid strong { display:block; margin-top:3px; color:var(--ink); font:900 18px/1 "Avenir Next",sans-serif; }
.battle-ranking-list { margin:0; padding:0; list-style:none; }
.battle-ranking-list li { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:8px; align-items:center; min-height:42px; border-top:1px solid rgba(255,255,255,.08); font-size:11px; font-weight:800; }
.battle-ranking-list .rank-position { color:var(--danger); font-weight:900; }
.battle-ranking-list .rank-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.battle-ranking-list .rank-meta { color:var(--cool); font-size:9px; text-align:right; }
.battle-ranking-list .youtube-link { display:inline-grid; width:18px; height:13px; margin-left:6px; place-items:center; border-radius:4px; background:#ff0033; color:#fff; font-size:7px; text-decoration:none; vertical-align:middle; }
.battle-ranking-list .ranking-empty { display:block; padding:16px 0; color:var(--muted); text-align:center; }

@keyframes radar { to { transform: rotate(360deg); } }
@keyframes blip { to { opacity: .25; transform: scale(.6); } }
@keyframes bannerIn { from { opacity: 0; transform: translate(-50%, -8px) scale(.96); } }
@keyframes itemReady { 50% { transform: scale(1.09); border-color: var(--accent); } }
@keyframes reloadPulse { 50% { opacity: .35; } }
@keyframes dangerPulse { 0%, 100% { opacity:.18; } 50% { opacity:.76; } }
@keyframes coverReveal { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes healthCritical { from { filter:brightness(.82); } to { filter:brightness(1.35); } }

@media (hover: hover) and (pointer: fine) {
  .mobile-controls { opacity: .72; }
  button:hover { filter: brightness(1.08); }
}

@media (max-width: 420px) {
  .prototype-shell { padding-inline: 8px; }
  .brand-row { padding-inline: 6px; }
  .arena-frame { border-radius: 24px; }
  .start-screen { gap:9px; padding:10px; }
  .cover-art { border-radius:20px; }
  .start-copy { padding: 8px 2px 2px; }
  .start-copy > p:first-child { margin-bottom:8px; font-size:11px; }
  .item-preview { margin-bottom:10px; }
  .primary-button { min-height: 54px; }
  .controls-copy { margin-top:10px; font-size:9px; }
}

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