:root {
  --red: #ec2341;
  --red2: #ff5068;
  --ink: #0d0b17;
  --ink2: #1b1730;
  --gold: #ffd23f;
  --white: #ffffff;
  --font: "Avenir Next Condensed", "AvenirNextCondensed-Heavy", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --b: clamp(50px, 16.5vh, 86px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--white); font-family: var(--font); overscroll-behavior: none; touch-action: none; }
body { position: fixed; inset: 0; }
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; touch-action: manipulation; }
.hidden { display: none !important; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }

.screen { position: fixed; inset: 0; display: none; }
.screen.active { display: block; }
.overlay { position: fixed; inset: 0; display: none; z-index: 50; background: rgba(8, 6, 16, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: center; justify-content: center; }
.overlay.active { display: flex; }

h1, h2, .chip, .big, .start, .ready { font-weight: 800; font-style: italic; letter-spacing: 0.02em; }

/* ---------- title ---------- */
#title { z-index: 5; }
.title-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(13, 11, 23, 0.15), rgba(13, 11, 23, 0.82) 75%); }
.logo { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) skewX(-6deg); text-align: center; }
.logo h1 { margin: 0; font-size: clamp(64px, 22vh, 150px); line-height: 0.9; color: #fff; text-shadow: 0 6px 0 #0008, 0 0 40px #ec234166; -webkit-text-stroke: 2px #fff; }
.logo h1 span { color: var(--red); -webkit-text-stroke: 2px var(--red2); }
.logo .tag { margin: 6px 0 0; font-size: clamp(13px, 4vh, 22px); letter-spacing: 0.5em; font-weight: 700; opacity: 0.85; }
.logo-ring { position: absolute; left: 50%; top: 45%; width: 125%; aspect-ratio: 2.4; transform: translate(-50%, -50%) rotate(-8deg); border: 6px solid var(--red); border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; opacity: 0.9; filter: drop-shadow(0 0 12px #ec2341); animation: ringSpin 6s linear infinite; }
@keyframes ringSpin { to { transform: translate(-50%, -50%) rotate(352deg); } }
.start { position: absolute; left: 50%; bottom: calc(18% + var(--sb)); transform: translateX(-50%); font-size: clamp(18px, 5.5vh, 30px); padding: 12px 34px; background: var(--red); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); animation: pulse 1.4s ease-in-out infinite; box-shadow: 0 0 30px #ec234188; }
@keyframes pulse { 50% { transform: translateX(-50%) scale(1.06); filter: brightness(1.2); } }
.title-row { position: absolute; left: 0; right: 0; bottom: calc(5% + var(--sb)); display: flex; justify-content: center; gap: 14px; align-items: center; padding: 0 20px; }
.install-hint { font-size: 14px; opacity: 0.8; font-weight: 600; }

.chip { font-size: 14px; padding: 8px 14px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; }
.chip:active { background: rgba(255, 255, 255, 0.25); }

/* ---------- bars ---------- */
.bar { position: absolute; top: 0; left: 0; right: 0; height: calc(48px + var(--st)); padding: var(--st) calc(14px + var(--sr)) 0 calc(14px + var(--sl)); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(90deg, var(--red), #a3122a 60%, #2a0d18); box-shadow: 0 4px 0 #0005; z-index: 3; }
.bar h2 { margin: 0; font-size: clamp(18px, 6vh, 30px); transform: skewX(-8deg); text-shadow: 0 3px 0 #0006; }
.back { font-size: 36px; line-height: 1; width: 44px; height: 44px; font-weight: 700; }
.rules { background: #0004; }

/* ---------- character select ---------- */
#select { background: radial-gradient(circle at 30% 20%, #3a2350, #120d1f 60%), var(--ink); z-index: 5; }
#select::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 255, 255, 0.025) 22px 44px); }
.roster { position: absolute; top: calc(56px + var(--st)); left: calc(12px + var(--sl)); right: calc(12px + var(--sr)); height: 38%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.fcard { position: relative; overflow: hidden; border-radius: 6px; background: linear-gradient(160deg, #3a3460, #19152b); border: 2px solid #ffffff22; transform: skewX(-6deg); transition: transform 0.12s; }
.fcard img { position: absolute; left: 50%; bottom: -3%; height: 106%; transform: translateX(-50%) skewX(6deg); pointer-events: none; }
.fcard .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; font-weight: 800; font-style: italic; font-size: clamp(13px, 4.6vh, 22px); background: linear-gradient(transparent, #000c 60%); }
.fcard .ty { display: block; font-size: 0.55em; font-weight: 600; opacity: 0.75; letter-spacing: 0.08em; }
.fcard.sel { border-color: var(--p1, #ec2341); box-shadow: 0 0 0 2px var(--p1, #ec2341), 0 0 22px #ec234188; transform: skewX(-6deg) scale(1.03); }
.fcard .p1tag { position: absolute; top: 4px; right: 6px; background: var(--red); padding: 1px 8px; font-weight: 800; font-style: italic; font-size: 13px; border-radius: 3px; display: none; }
.fcard.sel .p1tag { display: block; }

.slots { position: absolute; left: calc(12px + var(--sl)); right: calc(12px + var(--sr)); bottom: calc(52px + var(--sb)); top: calc(56px + 38% + 14px + var(--st)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot { position: relative; border-radius: 6px; overflow: hidden; background: linear-gradient(180deg, var(--pc), #0006 130%); border: 2px solid #fff3; }
.slot.empty { background: #ffffff0a; border: 2px dashed #ffffff33; display: flex; align-items: center; justify-content: center; font-weight: 800; font-style: italic; font-size: 18px; color: #ffffffaa; }
.slot img { position: absolute; right: -6%; bottom: -6%; height: 112%; pointer-events: none; }
.slot .who { position: absolute; left: 8px; top: 4px; font-weight: 900; font-style: italic; font-size: clamp(16px, 5.5vh, 28px); text-shadow: 0 2px 0 #0007; }
.slot .fname { position: absolute; left: 8px; bottom: 6px; font-weight: 800; font-style: italic; font-size: clamp(12px, 4vh, 18px); text-shadow: 0 2px 0 #0008; }
.slot .lvl { position: absolute; left: 8px; top: 34%; font-size: 12px; padding: 4px 10px; }
.slot .x { position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: #0008; font-size: 16px; font-weight: 700; z-index: 2; }
.slot .pal { position: absolute; left: 8px; top: 36%; display: flex; gap: 6px; z-index: 2; }
.slot .pal button { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff8; }
.slot .pal button.on { border-color: #fff; box-shadow: 0 0 0 2px #000; transform: scale(1.15); }
.slot .tapcycle { position: absolute; inset: 0; }
.ready { position: absolute; left: 0; right: 0; bottom: 0; height: calc(44px + var(--sb)); padding-bottom: var(--sb); font-size: clamp(20px, 6.5vh, 32px); background: linear-gradient(90deg, #ff9a1f, var(--gold) 30%, #ffb21f 70%, #ff7a1f); color: #2a0d00; text-shadow: 0 1px 0 #fff8; animation: readyGlow 1.2s ease-in-out infinite; }
@keyframes readyGlow { 50% { filter: brightness(1.15); } }

/* ---------- stage select ---------- */
#stages { background: radial-gradient(circle at 70% 20%, #23305a, #0d0b17 65%); z-index: 5; }
.stage-list { position: absolute; top: calc(60px + var(--st)); bottom: calc(14px + var(--sb)); left: calc(14px + var(--sl)); right: calc(14px + var(--sr)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.scard { position: relative; border-radius: 8px; overflow: hidden; border: 2px solid #fff3; background-size: cover; background-position: center; text-align: left; transform: skewX(-4deg); }
.scard:active { transform: skewX(-4deg) scale(0.97); }
.scard .info { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; background: linear-gradient(transparent, #000d 45%); transform: skewX(4deg); }
.scard h3 { margin: 0; font-size: clamp(16px, 5.5vh, 26px); font-weight: 800; font-style: italic; }
.scard p { margin: 2px 0 0; font-size: clamp(11px, 3.4vh, 14px); opacity: 0.85; font-weight: 500; }

/* ---------- HUD ---------- */
#hud { z-index: 10; pointer-events: none; }
#hud::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.28) 100%); pointer-events: none; }
#hud .pause-btn, #hud #controls, #hud .skip { pointer-events: auto; }
.pause-btn { position: absolute; top: calc(8px + var(--st)); left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background: #0007; border: 2px solid #fff5; display: flex; align-items: center; justify-content: center; gap: 4px; }
.pause-btn span { width: 4px; height: 14px; background: #fff; border-radius: 1px; }
.skip { position: absolute; top: calc(12px + var(--st)); right: calc(14px + var(--sr)); background: #000a; }
.timer { position: absolute; top: calc(8px + var(--st)); right: calc(16px + var(--sr)); font-size: 30px; font-weight: 800; font-style: italic; text-shadow: 0 2px 0 #000, 0 0 8px #000; }

.damage-row { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(4px + var(--sb)); display: flex; gap: 6px; }
.dmg { position: relative; width: clamp(64px, 11vw, 128px); height: clamp(46px, 14vh, 64px); }
.dmg .bg { position: absolute; inset: 14% 0 0 0; border-radius: 5px; background: linear-gradient(180deg, var(--pc), #000a); opacity: 0.85; transform: skewX(-8deg); border: 1px solid #fff4; }
.dmg img { position: absolute; left: -6%; bottom: 2%; height: 92%; pointer-events: none; filter: drop-shadow(0 2px 2px #000a); }
.dmg .pct { position: absolute; right: 8%; bottom: 14%; font-size: clamp(22px, 8vh, 38px); font-weight: 900; font-style: italic; line-height: 1; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; text-shadow: 0 2px 0 #000; }
.dmg .pct small { font-size: 0.5em; }
.dmg .nm { position: absolute; right: 8%; bottom: 0; font-size: clamp(8px, 2.6vh, 11px); font-weight: 700; font-style: italic; opacity: 0.9; letter-spacing: 0.05em; }
.dmg .stocks { position: absolute; left: 40%; top: 0; display: flex; gap: 2px; }
.dmg .stocks i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); border: 1.5px solid #fff; box-shadow: 0 1px 2px #000; }
.dmg .stocks b { font-size: 11px; font-style: italic; text-shadow: 0 1px 2px #000; }
.dmg.hit .pct { animation: dmgShake 0.25s; }
.dmg.out { opacity: 0.35; filter: grayscale(1); }
@keyframes dmgShake { 0% { transform: translate(4px, -3px) scale(1.25); } 40% { transform: translate(-3px, 2px) scale(1.1); } 100% { transform: none; } }

#announce { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-style: italic; font-size: clamp(60px, 26vh, 170px); text-shadow: 0 6px 0 #000, 0 0 30px #000a; -webkit-text-stroke: 3px #000; paint-order: stroke fill; pointer-events: none; }
#announce .t { animation: annIn 0.9s cubic-bezier(.2, 1.6, .4, 1) forwards; }
#announce .t.go { color: var(--gold); }
#announce .t.game { color: #fff; animation: annGame 2s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes annIn { 0% { transform: scale(2.4) skewX(-10deg); opacity: 0; } 25% { transform: scale(1) skewX(-10deg); opacity: 1; } 80% { transform: scale(1.05) skewX(-10deg); opacity: 1; } 100% { transform: scale(1.4) skewX(-10deg); opacity: 0; } }
@keyframes annGame { 0% { transform: scale(3) skewX(-10deg); opacity: 0; } 15% { transform: scale(1) skewX(-10deg); opacity: 1; } 100% { transform: scale(1.1) skewX(-10deg); opacity: 1; } }

#zoomfx { position: absolute; inset: 0; opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 4deg, rgba(255, 255, 255, 0.35) 4deg 5deg), radial-gradient(circle, transparent 25%, rgba(0, 0, 0, 0.55) 75%); -webkit-mask: radial-gradient(circle, transparent 28%, #000 60%); mask: radial-gradient(circle, transparent 28%, #000 60%); }
#zoomfx.on { animation: zoomfx 0.75s ease-out; }
@keyframes zoomfx { 0% { opacity: 0; } 10% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
#flash.on { animation: flash 0.35s ease-out; }
@keyframes flash { 0% { opacity: 0.55; } 100% { opacity: 0; } }

#bubbles .bub { position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: radial-gradient(circle, #ffffffee, #cfd8ffcc); border: 4px solid var(--pc); overflow: hidden; box-shadow: 0 0 10px #000a; }
#bubbles .bub img { width: 120%; margin: -6% 0 0 -10%; }

/* ---------- touch controls ---------- */
#controls { position: absolute; inset: 0; }
#stickZone { position: absolute; left: 0; top: 18%; bottom: 0; width: 46%; }
#stickBase { position: absolute; left: calc(var(--sl) + 24px + var(--b) * 0.95); top: calc(100% - var(--sb) - 20px - var(--b) * 0.95); width: calc(var(--b) * 1.9); height: calc(var(--b) * 1.9); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #ffffff10 40%, #ffffff28 70%, #ffffff10); border: 2px solid #ffffff40; opacity: 0.55; pointer-events: none; transition: opacity 0.15s; }
#stickBase.active { opacity: 1; transition: none; }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c9cbe0 70%); box-shadow: 0 3px 8px #0008, inset 0 -3px 6px #0003; }

.buttons { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; }
.btn { position: absolute; width: calc(var(--s) * var(--b)); height: calc(var(--s) * var(--b)); right: calc(var(--sr) + 10px + var(--cx) * var(--b) - var(--s) * var(--b) / 2); bottom: calc(var(--sb) + 8px + var(--cy) * var(--b) - var(--s) * var(--b) / 2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 2px solid #ffffff66; box-shadow: 0 4px 10px #0007, inset 0 2px 0 #ffffff44; opacity: 0.82; transition: transform 0.05s, opacity 0.1s; touch-action: none; }
.btn.down { transform: scale(0.9); opacity: 1; filter: brightness(1.25); }
.btn.swiped { box-shadow: 0 0 0 4px #fff, 0 0 30px #fff; }
.btn svg { width: 48%; height: 48%; fill: #fff; filter: drop-shadow(0 1px 1px #0008); }
.btn .lbl { font-size: calc(var(--b) * 0.42); font-weight: 900; font-style: italic; line-height: 1; text-shadow: 0 2px 0 #0006; }
.btn .sub { font-size: calc(var(--b) * 0.11); font-weight: 700; text-align: center; line-height: 1.05; opacity: 0.9; letter-spacing: 0.03em; }
.btn .sub small { font-size: 0.85em; opacity: 0.85; }
.b-attack { --cx: 1.0; --cy: 0.85; --s: 1.32; background: radial-gradient(circle at 35% 30%, #ff6b7f, #d0142f 70%); }
.b-special { --cx: 2.28; --cy: 0.58; --s: 1.0; background: radial-gradient(circle at 35% 30%, #5fb2ff, #1554c9 70%); }
.b-jump { --cx: 0.68; --cy: 2.1; --s: 0.98; background: radial-gradient(circle at 35% 30%, #7ef0a0, #14a04a 70%); }
.b-shield { --cx: 1.78; --cy: 1.86; --s: 0.8; background: radial-gradient(circle at 35% 30%, #c79bff, #6b2fd0 70%); }
.b-grab { --cx: 2.78; --cy: 1.62; --s: 0.74; background: radial-gradient(circle at 35% 30%, #ffd36b, #d68a00 70%); }

/* ---------- overlays ---------- */
.panel { background: linear-gradient(160deg, #2a2346, #15111f); border: 2px solid #ffffff22; border-radius: 12px; padding: 18px 26px; min-width: 260px; text-align: center; max-height: calc(100% - 24px); overflow: auto; box-shadow: 0 20px 60px #000a; }
.panel h2 { margin: 0 0 12px; font-size: 30px; transform: skewX(-8deg); }
.panel.wide { max-width: min(860px, calc(100% - 24px)); text-align: left; }
.panel.wide h2 { text-align: center; }
.big { display: block; width: 100%; margin: 8px 0; padding: 12px 18px; font-size: 20px; background: var(--red); border-radius: 6px; clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); }
.big.ghost { background: #ffffff1c; }
.big:active { filter: brightness(1.2); transform: scale(0.98); }
.goal { margin: 0 0 10px; font-size: 15px; line-height: 1.35; font-weight: 500; text-align: center; }
.howto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 14px; font-size: 12.5px; line-height: 1.28; font-weight: 500; margin-bottom: 6px; }
@media (max-width: 640px) { .howto-grid { grid-template-columns: 1fr 1fr; } }
.howto-grid > div > b:first-child { display: block; color: var(--gold); font-style: italic; font-size: 14px; margin-bottom: 2px; }
.howto-grid b { color: #fff; }
.panel.wide { padding: 12px 18px; }
.panel.wide h2 { margin-bottom: 6px; font-size: 24px; }
.panel.wide .goal { font-size: 13.5px; margin-bottom: 8px; }
.panel.wide .big { max-width: 320px; margin: 6px auto 0; padding: 9px 18px; }
.howto-grid i { color: #fff; font-weight: 700; }

/* ---------- results ---------- */
#results { z-index: 6; background: #0d0b17; }
.res-bg { position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, var(--wc, #ec2341) 0%, #0d0b17 70%); opacity: 0.85; }
.res-bg::after { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 30% 50%, transparent 0 6deg, #ffffff0d 6deg 12deg); animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.res-left { position: absolute; left: var(--sl); top: 0; bottom: 0; width: 46%; display: flex; align-items: flex-end; justify-content: center; }
.res-left img { height: 96%; filter: drop-shadow(0 10px 20px #000a); animation: winIn 0.7s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes winIn { from { transform: translateX(-40px) scale(0.9); opacity: 0; } }
.res-right { position: absolute; right: calc(16px + var(--sr)); left: 46%; top: calc(14px + var(--st)); bottom: calc(10px + var(--sb)); display: flex; flex-direction: column; justify-content: center; }
.res-sub { margin: 0; font-weight: 700; letter-spacing: 0.3em; font-size: 13px; opacity: 0.85; }
#winName { margin: 0 0 8px; font-size: clamp(34px, 13vh, 72px); font-weight: 900; font-style: italic; line-height: 1; text-shadow: 0 4px 0 #0008; }
.res-table { display: grid; gap: 4px; margin-bottom: 8px; }
.res-row { display: grid; grid-template-columns: 34px 1fr 50px 50px 64px; align-items: center; gap: 6px; background: #0006; border-left: 5px solid var(--pc); padding: 4px 8px; font-size: 14px; font-weight: 600; }
.res-row .pl { font-weight: 900; font-style: italic; font-size: 18px; }
.res-row.head { background: none; border: 0; font-size: 10px; opacity: 0.7; letter-spacing: 0.1em; padding-top: 0; padding-bottom: 0; }
.res-btns { display: flex; gap: 10px; }
.res-btns .big { margin: 0; }

/* ---------- misc ---------- */
#rotate { position: fixed; inset: 0; z-index: 100; background: var(--ink); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 20px; font-weight: 700; font-size: 18px; text-align: center; padding: 30px; }
#rotate .phone { width: 44px; height: 76px; border: 4px solid #fff; border-radius: 9px; animation: rot 2s ease-in-out infinite; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 900px) { #rotate { display: flex; } }

#boot { position: fixed; inset: 0; z-index: 200; background: var(--ink); display: flex; align-items: center; justify-content: center; transition: opacity 0.4s; }
#boot.done { opacity: 0; pointer-events: none; }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 5px solid #ffffff22; border-top-color: var(--red); animation: spin 0.8s linear infinite; }