:root {
  --red: #ff2a3d;
  --gold: #ffd23f;
  --cyan: #24d8ff;
  --ink: #ff2a3d;
  --ink2: #ffb02e;
  --bg: #07040d;
  --hud-font: 'Bebas Neue', 'Anton', Impact, sans-serif;
  --big-font: 'Anton', Impact, 'Arial Black', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: #fff; font-family: 'Rajdhani', system-ui, sans-serif; user-select: none; -webkit-user-select: none; }
.hidden { display: none !important; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------ overlay fx */
#overlay-fx { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
#speedlines {
  --slc: #ffffff;
  position: absolute; inset: -30%; opacity: 0; transition: opacity .15s;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 3deg, color-mix(in srgb, var(--slc) 70%, white) 3.2deg 3.6deg, transparent 3.8deg 7deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 22%, #000 58%);
  mask: radial-gradient(circle at 50% 50%, transparent 22%, #000 58%);
  mix-blend-mode: screen;
}
#speedlines.on { opacity: .85; animation: sl-spin .18s steps(2) infinite; }
@keyframes sl-spin { to { transform: rotate(4deg) scale(1.03); } }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
#letterbox i { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .22s cubic-bezier(.2,.9,.3,1); }
#letterbox i.top { top: 0; } #letterbox i.bot { bottom: 0; }
#letterbox.on i { height: 10.5vh; }

/* ------------------------------------------------------------ HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 6; font-family: var(--hud-font); }
.hud-top { position: absolute; top: 14px; left: 2.5vw; right: 2.5vw; display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start; }
.pl { display: flex; flex-direction: column; gap: 4px; }
.pl-row { display: flex; align-items: center; gap: 10px; }
.pl.p2 .pl-row { flex-direction: row-reverse; }
.portrait { width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--ink2), var(--ink) 70%); border: 3px solid #fff; display: grid; place-items: center; box-shadow: 0 0 16px var(--ink); flex: none; }
.portrait span { font-family: var(--big-font); font-size: 26px; text-shadow: 0 2px 0 #0008; }
.pl-name { font-size: 30px; letter-spacing: 3px; text-shadow: 0 2px 0 #000, 0 0 12px var(--ink); white-space: nowrap; }
.wins { display: flex; gap: 6px; margin: 0 6px; }
.wins i { width: 16px; height: 16px; transform: rotate(45deg); border: 2px solid #fff8; background: #0008; }
.wins i.on { background: var(--gold); border-color: #fff; box-shadow: 0 0 10px var(--gold); }
.hp { position: relative; height: 28px; background: #1a0f1f; border: 3px solid #fff; overflow: hidden; box-shadow: 0 4px 0 #0008, 0 0 18px #0009; }
.pl.p1 .hp { transform: skewX(-20deg); }
.pl.p2 .hp { transform: skewX(20deg); }
.hp-chip, .hp-fill { position: absolute; inset: 0; transform-origin: left center; }
.pl.p2 .hp-chip, .pl.p2 .hp-fill { transform-origin: right center; }
.hp-chip { background: linear-gradient(#ff7a85, #e0102a); }
.hp-fill { background: linear-gradient(#fffbd0 0%, #ffe25a 35%, #f5a20b 100%); }
.hp-shine { position: absolute; left: 0; right: 0; top: 2px; height: 6px; background: linear-gradient(#fff9, #fff0); }
.hp.low .hp-fill { background: linear-gradient(#ffd0b0, #ff7a2a 40%, #e0102a); animation: lowpulse .5s infinite alternate; }
@keyframes lowpulse { to { filter: brightness(1.5); } }
.hp.hurt { animation: hpshake .25s; }
@keyframes hpshake { 20% { translate: -6px 3px; } 40% { translate: 5px -2px; } 60% { translate: -3px 1px; } 80% { translate: 2px 0; } }
.hp-crit { position: absolute; right: 8px; top: 2px; font-size: 18px; color: #fff; opacity: 0; letter-spacing: 2px; }
.pl.p2 .hp-crit { right: auto; left: 8px; }
.hp-crit.on { opacity: 1; animation: blink .4s steps(2) infinite; text-shadow: 0 0 8px #f00; }
.drive { display: flex; align-items: center; gap: 8px; }
.pl.p2 .drive { flex-direction: row-reverse; }
.drive-segs { display: flex; gap: 3px; width: 62%; }
.pl.p2 .drive-segs { flex-direction: row-reverse; }
.drive-segs i { flex: 1; height: 11px; background: #0d2a19; border: 2px solid #b8ffd5aa; overflow: hidden; transform: skewX(-20deg); }
.pl.p2 .drive-segs i { transform: skewX(20deg); }
.drive-segs b { display: block; height: 100%; background: linear-gradient(#b0ffd0, #19d36a); transform-origin: left; box-shadow: 0 0 8px #3dff8a; }
.pl.p2 .drive-segs b { transform-origin: right; }
.drive-label { font-size: 18px; letter-spacing: 3px; color: #8affc0; text-shadow: 0 0 8px #3dff8a; }
.drive.burnout .drive-segs b { background: linear-gradient(#ccc, #777); box-shadow: none; }
.drive.burnout .drive-label { color: #aaa; text-shadow: none; animation: blink .5s steps(2) infinite; }
.timer { position: relative; width: 92px; height: 82px; display: grid; place-items: center; background: linear-gradient(#24152e, #0d0812); border: 3px solid #fff; clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%); }
.timer span { font-family: var(--big-font); font-size: 48px; line-height: 1; margin-top: -4px; }
.timer small { position: absolute; bottom: 6px; font-size: 13px; letter-spacing: 3px; opacity: .7; }
.timer.low span { color: #ff3d5a; }
.timer.tick span { animation: tick .3s; }
@keyframes tick { from { transform: scale(1.5); } to { transform: scale(1); } }
.hud-bottom { position: absolute; bottom: 16px; left: 2.5vw; right: 2.5vw; display: flex; justify-content: space-between; align-items: flex-end; }
.sa { display: flex; align-items: center; gap: 10px; width: 32vw; }
.sa.p2 { flex-direction: row-reverse; }
.sa-num { font-family: var(--big-font); font-size: 52px; line-height: 1; color: #fff; text-shadow: 0 0 14px var(--ink), 0 3px 0 #000; width: 40px; text-align: center; }
.sa-bars { display: flex; gap: 4px; flex: 1; }
.sa.p2 .sa-bars { flex-direction: row-reverse; }
.sa-bars i { flex: 1; height: 16px; background: #120a18; border: 2px solid #fff9; transform: skewX(-20deg); overflow: hidden; }
.sa.p2 .sa-bars i { transform: skewX(20deg); }
.sa-bars b { display: block; height: 100%; background: linear-gradient(#fff, var(--ink) 60%); transform-origin: left; }
.sa.p2 .sa-bars b { transform-origin: right; }
.sa-bars i.full { border-color: #fff; box-shadow: 0 0 12px var(--ink); animation: full 0.8s infinite alternate; }
@keyframes full { to { filter: brightness(1.6); } }
.sa-label { font-size: 16px; letter-spacing: 3px; opacity: .8; }
.sa.max .sa-num { animation: maxpulse .45s infinite alternate; }
@keyframes maxpulse { to { transform: scale(1.18); text-shadow: 0 0 30px var(--ink), 0 0 6px #fff; } }

.combo { position: absolute; top: 19vh; opacity: 0; transition: opacity .2s; text-align: left; font-family: var(--big-font); }
.combo.p1 { left: 3vw; }
.combo.p2 { right: 3vw; text-align: right; }
.combo.show { opacity: 1; }
.combo-n { font-size: 108px; line-height: .9; color: #fff; -webkit-text-stroke: 3px var(--ink); text-shadow: 0 0 24px var(--ink), 6px 6px 0 #000; font-style: italic; }
.combo-t { font-size: 34px; letter-spacing: 6px; margin-top: -6px; text-shadow: 0 0 10px var(--ink), 3px 3px 0 #000; }
.combo-d { font-family: var(--hud-font); font-size: 28px; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.combo.pop .combo-n { animation: cpop .22s cubic-bezier(.2,1.6,.4,1); }
@keyframes cpop { from { transform: scale(1.7) rotate(-6deg); filter: brightness(2.5); } }
.combo.big .combo-n { color: #fff2a0; -webkit-text-stroke-color: #ff3d00; text-shadow: 0 0 30px #ff7a00, 0 0 60px #ff0040, 6px 6px 0 #000; }

.callouts { position: absolute; top: 37vh; display: flex; flex-direction: column; gap: 4px; }
.callouts.p1 { left: 3vw; align-items: flex-start; }
.callouts.p2 { right: 3vw; align-items: flex-end; }
.callout { font-family: var(--big-font); font-size: 34px; padding: 2px 18px; transform: skewX(-14deg); background: linear-gradient(90deg, #000c, #0000); text-shadow: 3px 3px 0 #000; animation: callin .18s cubic-bezier(.2,1.4,.4,1), callout .3s 1.2s forwards; letter-spacing: 1px; }
.callouts.p2 .callout { background: linear-gradient(270deg, #000c, #0000); }
@keyframes callin { from { transform: skewX(-14deg) translateX(-60px) scale(1.4); opacity: 0; } }
@keyframes callout { to { opacity: 0; transform: skewX(-14deg) translateY(-10px); } }
.callout.counter { color: #ffb03a; }
.callout.punish { color: #ff4fd8; font-size: 40px; }
.callout.parry { color: #6dffaa; }
.callout.perfect { color: #fff; font-size: 44px; text-shadow: 0 0 18px #3dff8a, 3px 3px 0 #000; }
.callout.di { color: #ff3d5a; font-size: 40px; }
.callout.splat { color: #ffd23f; font-size: 42px; }
.callout.dr { color: #3dff8a; font-size: 26px; }
.callout.burnout { color: #bbb; }
.callout.aa { color: #24d8ff; }
.callout.rev { color: #ff9a3a; }
.callout.first { color: #ffd23f; font-size: 28px; }
.callout.combo { color: #fff2a0; font-size: 38px; }
.callout.tech { color: #9fd8ff; font-size: 28px; }
.callout.armor { color: #ff5050; font-size: 28px; }

.stylemeter { position: absolute; left: 3vw; bottom: 82px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: end; --sc: #9aa0b5; transition: opacity .3s; }
.st-letter { grid-row: span 2; font-family: var(--big-font); font-size: 64px; line-height: .9; color: var(--sc); -webkit-text-stroke: 2px #000; text-shadow: 0 0 20px var(--sc), 4px 4px 0 #000; font-style: italic; min-width: 60px; }
.st-word { font-size: 22px; letter-spacing: 4px; color: var(--sc); text-shadow: 2px 2px 0 #000; }
.st-bar { width: 140px; height: 6px; background: #0008; border: 1px solid #fff5; }
.st-bar b { display: block; height: 100%; background: var(--sc); transform-origin: left; box-shadow: 0 0 8px var(--sc); }
.stylemeter.dead { opacity: .35; }
.stylemeter.rankup .st-letter { animation: rankup .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes rankup { from { transform: scale(2.2) rotate(-12deg); filter: brightness(3); } }

.announce { position: absolute; inset: 0; display: grid; place-items: center; }
.ann { text-align: center; animation: annin .35s cubic-bezier(.15,1.5,.4,1); }
.ann.out { animation: annout .3s forwards; }
.ann-t { font-family: var(--big-font); font-size: 13vw; line-height: 1; font-style: italic; letter-spacing: .02em; color: #fff; -webkit-text-stroke: 4px #000; text-shadow: 0 0 40px var(--red), 10px 10px 0 #000; white-space: nowrap; }
.ann-s { font-family: var(--hud-font); font-size: 4vw; letter-spacing: 1vw; color: var(--gold); text-shadow: 4px 4px 0 #000; }
.ann.round .ann-t { font-size: 10vw; color: #fff; text-shadow: 0 0 40px #24d8ff, 8px 8px 0 #000; }
.ann.fight .ann-t { font-size: 17vw; background: linear-gradient(#fff6a0, #ff9b1a 50%, #ff2a3d); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 4px #000; filter: drop-shadow(10px 10px 0 #000) drop-shadow(0 0 30px #ff2a3d); }
.ann.fight { animation: fightin .45s cubic-bezier(.1,1.8,.3,1); }
@keyframes fightin { from { transform: scale(3.5); opacity: 0; filter: blur(8px); } }
.ann.ko .ann-t { font-size: 20vw; color: #ff2a3d; -webkit-text-stroke: 6px #fff; text-shadow: 0 0 60px #ff0040, 14px 14px 0 #000; }
.ann.ko { animation: koin .5s cubic-bezier(.1,1.6,.3,1), koshake .08s .5s 6; }
@keyframes koin { from { transform: scale(4) rotate(-10deg); opacity: 0; } }
@keyframes koshake { 50% { transform: translate(8px, -6px); } }
.ann.win .ann-t { color: var(--gold); text-shadow: 0 0 40px #ffb000, 10px 10px 0 #000; }
.ann.lose .ann-t { color: #8aa0ff; text-shadow: 0 0 40px #3050ff, 10px 10px 0 #000; }
.ann.cine .ann-t { font-size: 7vw; color: #fff; text-shadow: 0 0 40px var(--red), 6px 6px 0 #000; }
.ann.cine { align-self: end; margin-bottom: 14vh; }
@keyframes annin { from { transform: scale(1.8) translateX(-20vw); opacity: 0; } }
@keyframes annout { to { transform: scale(.8); opacity: 0; } }

.toasts { position: absolute; top: 120px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: linear-gradient(90deg, #2a1a00ee, #4a2a00ee); border: 2px solid var(--gold); padding: 8px 22px; text-align: center; animation: toastin .35s cubic-bezier(.2,1.5,.4,1); box-shadow: 0 0 24px #ffb00066; }
.toast b { display: block; font-size: 26px; letter-spacing: 4px; color: var(--gold); }
.toast span { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px; }
.toast.out { animation: toastout .4s forwards; }
@keyframes toastin { from { transform: translateY(-40px) scale(.8); opacity: 0; } }
@keyframes toastout { to { transform: translateY(-30px); opacity: 0; } }

.nums { position: absolute; inset: 0; overflow: hidden; }
.num { position: absolute; font-family: var(--big-font); font-size: 26px; color: #fff; -webkit-text-stroke: 1.5px #000; text-shadow: 3px 3px 0 #000; animation: numfly .9s cubic-bezier(.2,.9,.3,1) forwards; transform: translate(-50%, -50%); }
.num.l2 { font-size: 34px; color: #ffe9a0; }
.num.l3 { font-size: 44px; color: #ffd23f; }
.num.l4 { font-size: 58px; color: #ff9a3a; }
.num.c { color: #ffb03a; } .num.p { color: #ff4fd8; }
@keyframes numfly { 0% { transform: translate(-50%, -50%) scale(1.8); opacity: 1; } 20% { transform: translate(-50%, -80%) scale(1); } 100% { transform: translate(-50%, -260%) scale(.9); opacity: 0; } }

.hudscore { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); font-size: 26px; letter-spacing: 4px; text-shadow: 2px 2px 0 #000; color: #fff; }
.trainpanel { position: absolute; left: 2.5vw; bottom: 150px; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px; background: #000a; border-left: 3px solid var(--cyan); padding: 8px 14px; line-height: 1.5; }
.trainpanel b { color: var(--cyan); margin-right: 6px; }
.hint { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); font-family: 'Rajdhani', sans-serif; font-size: 15px; font-weight: 600; opacity: .7; background: #0008; padding: 4px 12px; }
.hint b { color: var(--gold); }

/* ------------------------------------------------------------ super banner */
#superbanner { position: fixed; inset: 0; pointer-events: none; z-index: 7; }
.sb { position: absolute; left: -5vw; right: -5vw; top: 58%; height: 120px; transform: skewY(-4deg); animation: sbin .25s cubic-bezier(.2,1.2,.4,1), sbout .3s .85s forwards; }
.sb.lv3 { animation: sbin .25s cubic-bezier(.2,1.2,.4,1), sbout .3s 1.1s forwards; }
.sb-stripe { position: absolute; inset: 0; background: linear-gradient(90deg, #000e 0%, var(--ink) 30%, #000e 100%); border-top: 4px solid #fff; border-bottom: 4px solid #fff; box-shadow: 0 0 40px var(--ink); }
.sb-lv { position: absolute; left: 12vw; top: 10px; font-family: var(--hud-font); font-size: 24px; letter-spacing: 8px; color: var(--gold); }
.sb-name { position: absolute; left: 12vw; top: 30px; font-family: var(--big-font); font-size: 64px; font-style: italic; white-space: nowrap; text-shadow: 5px 5px 0 #000; animation: sbname .6s cubic-bezier(.1,.9,.2,1); }
.sb-char { position: absolute; right: 12vw; bottom: 8px; font-family: var(--big-font); font-size: 90px; opacity: .25; font-style: italic; }
.sb.lv3 .sb-name { font-size: 80px; color: #fff6c0; }
@keyframes sbin { from { transform: skewY(-4deg) scaleY(0); } }
@keyframes sbout { to { transform: skewY(-4deg) scaleY(0); opacity: 0; } }
@keyframes sbname { from { transform: translateX(60vw); } }

/* ------------------------------------------------------------ screens */
#screens { position: fixed; inset: 0; z-index: 8; pointer-events: none; }
.screen { position: absolute; inset: 0; pointer-events: auto; animation: scrin .3s ease-out; }
@keyframes scrin { from { opacity: 0; } }
.foot { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-weight: 600; font-size: 15px; opacity: .65; letter-spacing: 1px; }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.press { font-family: var(--hud-font); font-size: 34px; letter-spacing: 8px; text-shadow: 0 0 20px var(--red), 3px 3px 0 #000; }
.scr-title { position: absolute; top: 4vh; left: 4vw; font-family: var(--big-font); font-size: 40px; font-style: italic; letter-spacing: 2px; text-shadow: 4px 4px 0 #000, 0 0 30px var(--red); }

.logo { position: absolute; top: 5vh; left: 4vw; font-family: var(--big-font); line-height: .82; font-style: italic; filter: drop-shadow(8px 8px 0 #000); animation: logoin .7s cubic-bezier(.15,1.4,.35,1); }
.logo .l1 { font-size: 15vh; color: #fff; -webkit-text-stroke: 3px #000; text-shadow: 0 0 30px var(--red); }
.logo .l2 { font-size: 11vh; background: linear-gradient(100deg, #ff2a3d, #ffb02e 40%, #fff 50%, #ff2a3d 60%, #ff2a3d); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #000; animation: shine 4s linear infinite; }
.logo .sub { font-family: var(--hud-font); font-size: 3.2vh; letter-spacing: 1.6vh; margin-top: 10px; font-style: normal; color: #fff; text-shadow: 0 0 10px var(--cyan); }
@keyframes shine { from { background-position: 100% 0; } to { background-position: -200% 0; } }
@keyframes logoin { from { transform: translateX(-30vw) skewX(-20deg); opacity: 0; } }
.splash .logo.big { top: 22vh; left: 50%; transform: translateX(-50%); text-align: center; animation: none; }
.splash .logo.big .l1 { font-size: 22vh; } .splash .logo.big .l2 { font-size: 16vh; }
.splash .press { position: absolute; bottom: 18vh; width: 100%; text-align: center; }

.menu { display: flex; flex-direction: column; gap: 4px; }
.mi { font-family: var(--hud-font); font-size: 40px; letter-spacing: 3px; padding: 2px 28px 2px 20px; cursor: pointer; position: relative; color: #ffffffb0; transition: color .1s, transform .1s; display: flex; align-items: baseline; gap: 14px; text-shadow: 3px 3px 0 #000; }
.mi small { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 1px; opacity: 0; transition: opacity .1s; }
.mi.sel { color: #fff; transform: translateX(14px); }
.mi.sel small { opacity: .85; }
.mi.sel::before { content: ''; position: absolute; inset: 2px -10px 2px -6px; background: linear-gradient(90deg, var(--red), #ff2a3d00); transform: skewX(-18deg); z-index: -1; animation: brush .18s ease-out; box-shadow: -8px 0 0 var(--gold); }
@keyframes brush { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.mi.dis { opacity: .3; }
.mi b { color: var(--gold); margin-left: 10px; }
.title-menu { position: absolute; left: 4vw; top: 37vh; }
.title-menu .mi { font-size: min(40px, 5.2vh); }
.profile { position: absolute; left: 4vw; bottom: 54px; width: 380px; font-family: var(--hud-font); }
.profile .lv { font-size: 26px; letter-spacing: 3px; }
.profile .lv b { font-size: 40px; color: var(--gold); }
.xpbar { height: 10px; background: #0009; border: 2px solid #fff6; margin: 4px 0; transform: skewX(-20deg); overflow: hidden; }
.xpbar b { display: block; height: 100%; background: linear-gradient(90deg, #ffb000, #fff3a0); transform-origin: left; box-shadow: 0 0 10px #ffb000; }
.pstats { font-size: 18px; letter-spacing: 2px; opacity: .8; }
.challenges { position: absolute; right: 4vw; top: 40vh; width: 360px; background: linear-gradient(90deg, #0000, #000b 20%); padding: 14px 18px; border-right: 4px solid var(--gold); }
.challenges h4, .res-chal h4 { font-family: var(--hud-font); font-size: 24px; letter-spacing: 4px; color: var(--gold); margin-bottom: 6px; font-weight: 400; }
.ch { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 16px; padding: 3px 0; border-bottom: 1px solid #ffffff18; }
.ch b { color: var(--gold); white-space: nowrap; }
.ch.done { color: #8affc0; }

/* how to / options */
.howto .tabs { position: absolute; top: 12vh; left: 4vw; right: 4vw; display: flex; gap: 6px; flex-wrap: wrap; }
.howto .tabs span { font-family: var(--hud-font); font-size: 24px; letter-spacing: 2px; padding: 4px 16px; background: #0009; transform: skewX(-15deg); opacity: .6; }
.howto .tabs span.on { background: var(--red); opacity: 1; }
.howto-body { position: absolute; top: 20vh; left: 4vw; right: 4vw; bottom: 8vh; background: #000c; padding: 24px 30px; overflow: auto; border-left: 4px solid var(--red); font-size: 18px; font-weight: 600; }
.howto-body h3 { font-family: var(--hud-font); font-size: 30px; letter-spacing: 3px; color: var(--gold); margin: 6px 0 8px; font-weight: 400; }
.howto-body h3 small { font-size: 18px; color: #fff; opacity: .7; margin-left: 10px; }
.howto-body table { border-collapse: collapse; width: 100%; }
.howto-body td { padding: 5px 8px; border-bottom: 1px solid #ffffff18; }
.howto-body td:first-child { opacity: .8; width: 50%; }
.howto-body .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.howto-body .sys p { margin-bottom: 14px; line-height: 1.35; }
.howto-body .sys b { color: var(--gold); font-family: var(--hud-font); font-size: 22px; letter-spacing: 2px; font-weight: 400; }
.howto-body i { color: #ffb03a; font-style: normal; }
.charinfo h3 { color: var(--ink) !important; }
.charinfo p { margin-bottom: 12px; opacity: .85; }
kbd { display: inline-block; min-width: 26px; padding: 1px 7px; margin: 0 2px; border: 2px solid #fff8; border-bottom-width: 4px; border-radius: 5px; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 15px; text-align: center; background: #222; }
.opt-menu { position: absolute; left: 4vw; top: 16vh; }
.opt-menu .mi { font-size: 34px; }

/* character select */
.select { background: radial-gradient(ellipse at 50% 120%, #0000 30%, #0008 80%); }
.roster { position: absolute; bottom: 7vh; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; }
.card { width: 132px; height: 170px; position: relative; cursor: pointer; transform: skewX(-8deg); background: #000c; border: 3px solid #fff4; transition: transform .12s, border-color .12s; overflow: visible; }
.card-art { position: absolute; inset: 0; background: linear-gradient(160deg, var(--ink2), var(--ink) 50%, #000 120%); opacity: .55; display: grid; place-items: center; overflow: hidden; }
.card-art span { font-family: var(--big-font); font-size: 120px; color: #fff; opacity: .9; text-shadow: 6px 6px 0 #0006; transform: skewX(8deg); }
.card-name { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-family: var(--hud-font); font-size: 30px; letter-spacing: 3px; text-shadow: 2px 2px 0 #000; transform: skewX(8deg); }
.card-style { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 700; opacity: .8; transform: skewX(8deg); }
.card.h1, .card.h2 { transform: skewX(-8deg) translateY(-14px) scale(1.06); }
.card.h1 { border-color: #ff3d5a; box-shadow: 0 0 24px #ff3d5a; }
.card.h2 { border-color: #3d8aff; box-shadow: 0 0 24px #3d8aff; }
.card.h1.h2 { border-color: #fff; }
.card.h1 .card-art, .card.h2 .card-art { opacity: 1; }
.tags { position: absolute; top: -16px; left: 0; right: 0; display: flex; justify-content: space-between; transform: skewX(8deg); }
.tags b { font-family: var(--big-font); font-size: 18px; padding: 0 8px; background: #ff3d5a; }
.tags b.t2 { background: #3d8aff; margin-left: auto; }
.tags b.lock { background: var(--gold); color: #000; }
.info { position: absolute; top: 13vh; width: 30vw; max-width: 430px; background: linear-gradient(90deg, #000d, #0006); padding: 18px 22px; border-left: 4px solid #ff3d5a; animation: infoin .25s ease-out; }
.info.p1 { left: 3vw; }
.info.p2 { right: 3vw; border-left: none; border-right: 4px solid #3d8aff; background: linear-gradient(270deg, #000d, #0006); text-align: right; }
@keyframes infoin { from { transform: translateY(-14px); opacity: 0; } }
.i-name { font-family: var(--big-font); font-size: 64px; line-height: 1; font-style: italic; color: #fff; text-shadow: 0 0 24px var(--ink), 5px 5px 0 #000; }
.i-title { font-family: var(--hud-font); font-size: 24px; letter-spacing: 4px; color: var(--gold); margin-bottom: 10px; }
.i-stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; font-family: var(--hud-font); font-size: 18px; letter-spacing: 2px; margin-bottom: 10px; }
.i-stats em { height: 8px; background: #fff2; display: block; transform: skewX(-20deg); }
.i-stats em i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #fff); transform-origin: left; }
.info.p2 .i-stats em i { transform-origin: right; }
.i-bio { font-weight: 600; font-size: 15px; opacity: .85; line-height: 1.3; margin-bottom: 10px; }
.i-pal { display: flex; gap: 8px; align-items: center; }
.info.p2 .i-pal { justify-content: flex-end; }
.i-pal i { width: 24px; height: 24px; border-radius: 50%; border: 3px solid; opacity: .7; }
.i-pal i.on { opacity: 1; transform: scale(1.25); box-shadow: 0 0 0 2px #fff; }
.i-pal i.locked { opacity: .15; }
.i-pal small { font-size: 12px; opacity: .6; font-weight: 700; }
.i-ready { margin-top: 10px; font-family: var(--big-font); font-size: 40px; color: var(--gold); text-shadow: 0 0 20px #ffb000; animation: cpop .3s cubic-bezier(.2,1.6,.4,1); }

/* VS */
.vs { background: #000; overflow: hidden; }
.vs-side { position: absolute; top: 0; bottom: 0; width: 58%; display: flex; flex-direction: column; justify-content: center; padding: 0 8vw; background: linear-gradient(135deg, var(--ink), #000 85%); }
.vs-side.left { left: -4%; clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%); animation: vsl .45s cubic-bezier(.2,1.2,.3,1); }
.vs-side.right { right: -4%; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); align-items: flex-end; text-align: right; background: linear-gradient(225deg, var(--ink), #000 85%); animation: vsr .45s cubic-bezier(.2,1.2,.3,1); }
@keyframes vsl { from { transform: translateX(-100%); } }
@keyframes vsr { from { transform: translateX(100%); } }
.vs-letter { position: absolute; font-family: var(--big-font); font-size: 70vh; opacity: .12; top: -8vh; font-style: italic; }
.vs-side.left .vs-letter { left: 4vw; } .vs-side.right .vs-letter { right: 4vw; }
.vs-name { font-family: var(--big-font); font-size: 12vh; font-style: italic; text-shadow: 8px 8px 0 #000; position: relative; }
.vs-title { font-family: var(--hud-font); font-size: 4vh; letter-spacing: 1vh; color: var(--gold); position: relative; }
.vs-lv { font-family: var(--hud-font); font-size: 3vh; letter-spacing: .6vh; opacity: .8; }
.vs-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--big-font); font-size: 26vh; font-style: italic; color: #fff; -webkit-text-stroke: 6px #000; text-shadow: 0 0 60px #ff2a3d, 12px 12px 0 #000; animation: vsmid .5s .3s cubic-bezier(.1,1.8,.3,1) both; }
@keyframes vsmid { from { transform: translate(-50%, -50%) scale(5) rotate(-20deg); opacity: 0; } }
.vs-stage { position: absolute; bottom: 7vh; width: 100%; text-align: center; font-family: var(--hud-font); font-size: 4vh; letter-spacing: 1.2vh; text-shadow: 3px 3px 0 #000; }

/* pause */
.pause { background: #000a; backdrop-filter: blur(3px); }
.pause-menu { position: absolute; left: 4vw; top: 16vh; }
.movelist { position: absolute; right: 4vw; top: 16vh; width: 440px; background: #000c; padding: 16px 20px; border-right: 4px solid var(--red); font-weight: 600; }
.movelist h4 { font-family: var(--hud-font); font-size: 28px; letter-spacing: 3px; color: var(--gold); font-weight: 400; margin-bottom: 8px; }
.movelist div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid #fff2; font-size: 15px; }
.movelist b { color: #ffb03a; white-space: nowrap; }

/* results */
.results { background: linear-gradient(90deg, #000e 0%, #0009 60%, #0000 100%); }
.res-head { position: absolute; top: 4vh; left: 4vw; font-family: var(--big-font); font-size: 12vh; font-style: italic; text-shadow: 8px 8px 0 #000; animation: logoin .5s cubic-bezier(.15,1.4,.35,1); }
.res-head.win { color: var(--gold); text-shadow: 0 0 40px #ffb000, 8px 8px 0 #000; }
.res-head.lose { color: #8aa0ff; }
.res-grade { position: absolute; top: 3vh; right: 6vw; font-family: var(--big-font); font-size: 26vh; font-style: italic; line-height: 1; -webkit-text-stroke: 6px #000; animation: stamp .45s .5s cubic-bezier(.1,1.8,.3,1) both; }
.res-grade.gS { color: #ff4fd8; text-shadow: 0 0 60px #ff4fd8, 12px 12px 0 #000; }
.res-grade.gA { color: var(--gold); text-shadow: 0 0 50px #ffb000, 12px 12px 0 #000; }
.res-grade.gB { color: #7dff6a; text-shadow: 12px 12px 0 #000; }
.res-grade.gC { color: #4fd1ff; text-shadow: 12px 12px 0 #000; }
.res-grade.gD { color: #9aa0b5; text-shadow: 12px 12px 0 #000; }
@keyframes stamp { from { transform: scale(5) rotate(20deg); opacity: 0; } }
.res-grid { position: absolute; top: 22vh; left: 4vw; display: flex; gap: 4vw; }
.res-stats { width: 380px; font-family: var(--hud-font); }
.res-stats div { display: flex; justify-content: space-between; font-size: 24px; letter-spacing: 2px; padding: 3px 0; border-bottom: 1px solid #fff2; animation: rowin .3s both; }
.res-stats div:nth-child(2) { animation-delay: .05s; } .res-stats div:nth-child(3) { animation-delay: .1s; } .res-stats div:nth-child(4) { animation-delay: .15s; }
.res-stats div:nth-child(5) { animation-delay: .2s; } .res-stats div:nth-child(6) { animation-delay: .25s; } .res-stats div:nth-child(7) { animation-delay: .3s; } .res-stats div:nth-child(8) { animation-delay: .35s; }
@keyframes rowin { from { transform: translateX(-30px); opacity: 0; } }
.res-stats b { color: var(--gold); font-weight: 400; }
.res-stats .score b { color: #fff; font-size: 30px; }
.res-side { width: 380px; }
.res-xp { font-family: var(--hud-font); }
.res-xp .lv { font-size: 26px; letter-spacing: 3px; } .res-xp .lv b { font-size: 44px; color: var(--gold); }
.res-xp .xpbar { height: 14px; }
.xpgain { font-size: 24px; color: #8affc0; letter-spacing: 2px; }
.res-lvup { margin: 10px 0; font-family: var(--big-font); font-size: 36px; color: var(--gold); text-shadow: 0 0 24px #ffb000, 4px 4px 0 #000; }
.res-lvup b { color: #fff; }
.res-lvup span { display: block; font-family: var(--hud-font); font-size: 20px; letter-spacing: 3px; color: #8affc0; }
.res-lvup.pop { animation: cpop .35s cubic-bezier(.2,1.6,.4,1); }
.res-chal { margin-top: 18px; background: #0008; padding: 10px 14px; }
.res-menu { position: absolute; left: 4vw; bottom: 9vh; }
.res-cont { position: absolute; right: 6vw; bottom: 12vh; font-family: var(--big-font); font-size: 7vh; font-style: italic; text-shadow: 0 0 30px var(--red), 6px 6px 0 #000; }
.res-cont b { color: var(--red); font-size: 12vh; margin-left: 20px; display: inline-block; }
.res-cont.tick b { animation: tick .35s; }

/* ending */
.ending { text-align: center; background: radial-gradient(ellipse at 50% 60%, #0000 30%, #000a 90%); }
.end-title { margin-top: 8vh; font-family: var(--big-font); font-size: 18vh; font-style: italic; color: var(--gold); -webkit-text-stroke: 4px #000; text-shadow: 0 0 60px var(--ink), 12px 12px 0 #000; animation: fightin .7s cubic-bezier(.1,1.8,.3,1); }
.end-name { font-family: var(--hud-font); font-size: 6vh; letter-spacing: 2vh; }
.end-score { margin-top: 44vh; font-family: var(--hud-font); font-size: 4vh; letter-spacing: .8vh; }
.end-score b { color: var(--gold); }
.end-bonus { font-family: var(--hud-font); font-size: 3vh; letter-spacing: .5vh; color: #8affc0; }
.end-unlock { font-family: var(--hud-font); font-size: 3.4vh; letter-spacing: .6vh; color: #ff4fd8; animation: blink 1s steps(2) infinite; }
.ending .press { margin-top: 2vh; }

/* ------------------------------------------------------------ wipe / loading / error */
#wipe { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
#wipe i { position: absolute; top: -20%; bottom: -20%; width: 70%; left: -90%; transform: skewX(-20deg); }
#wipe i:nth-child(1) { background: var(--red); }
#wipe i:nth-child(2) { background: #0a0610; }
#wipe i:nth-child(3) { background: var(--gold); width: 6%; }
#wipe.go i:nth-child(1) { animation: wipe .6s cubic-bezier(.7,0,.3,1); }
#wipe.go i:nth-child(2) { animation: wipe .6s .04s cubic-bezier(.7,0,.3,1); }
#wipe.go i:nth-child(3) { animation: wipe .6s .08s cubic-bezier(.7,0,.3,1); }
@keyframes wipe { 0% { left: -90%; } 45%, 55% { left: 15%; width: 90%; } 100% { left: 130%; } }
#loading { position: fixed; inset: 0; z-index: 30; display: grid; place-content: center; gap: 24px; background: var(--bg); }
.ld-logo { font-family: var(--big-font); font-size: 64px; font-style: italic; text-align: center; }
.ld-logo span { color: var(--red); }
.ld-bar { width: 300px; height: 6px; background: #fff2; overflow: hidden; }
.ld-bar b { display: block; height: 100%; width: 40%; background: var(--red); animation: ld 1s ease-in-out infinite; }
@keyframes ld { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
#err { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 40; background: #300a; border: 2px solid #f44; color: #fdd; padding: 14px 18px; font: 13px/1.4 ui-monospace, monospace; white-space: pre-wrap; max-height: 40vh; overflow: auto; }

@media (max-width: 900px) {
  .info { width: 40vw; padding: 10px; } .i-name { font-size: 40px; } .i-bio { display: none; }
  .card { width: 90px; height: 120px; } .card-art span { font-size: 80px; } .card-name { font-size: 20px; }
  .challenges { display: none; }
}