/* Luptătorul Suprem · web. Colours and sizes follow iOS/GameScreen.swift and iOS/CinematicMenu.swift (points = CSS px). */
@font-face { font-family: Bangers; src: url(../assets/fonts/Bangers-Regular.ttf) format('truetype'); font-display: block; }
@font-face { font-family: ArenaComic; src: url(../assets/fonts/Bangers-Regular.ttf) format('truetype'); }
:root {
  --ink: #24182F; --cream: #FFF0CD; --gold: #F0BF57; --violet: #604078; --canvas: #090B0F; --paper: #F5E8C9; --lime: #DEAD5C;
  --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);
  --comic: Bangers, ArenaComic, Impact, sans-serif; --heavy: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #090e18; overscroll-behavior: none; }
body { position: fixed; inset: 0; color: var(--paper); font-family: var(--heavy); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; -webkit-text-size-adjust: 100%; }
canvas { display: block; width: 100%; height: 100%; position: fixed; inset: 0; z-index: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button:disabled { cursor: default; }
.i { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; flex: none; }
.spacer { flex: 1 1 auto; }
.screen, .sheet { display: none; }
#ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#ui > * { pointer-events: auto; }
[hidden] { display: none !important; }

/* Cut-corner shape (CutCorner): top-left and bottom-right corners cut. Fill/stroke via pseudo-elements so text is not clipped. */
.cut { --cut: 10px; --fill: var(--ink); --stroke: transparent; --bw: 0px; position: relative; isolation: isolate; }
.cut::before, .cut::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.cut::before { inset: 0; background: var(--stroke); clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
/* Same cut on the inset box keeps the slanted edges parallel, so the stroke shows all round. */
.cut::after { inset: var(--bw); background: var(--fill); clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }

/* ComicButton */
.comic-btn { --fill: var(--violet); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 19px; color: var(--cream); font-family: var(--comic); font-size: 19px; letter-spacing: .3px; filter: drop-shadow(3px 5px 0 var(--ink)); transition: transform .1s ease-out; }
.comic-btn::before, .comic-btn::after { content: ''; position: absolute; z-index: -1; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.comic-btn::before { inset: 0; background: var(--ink); }
.comic-btn::after { inset: 3px; background: var(--fill); clip-path: polygon(6.5px 0, 100% 0, calc(100% - 6.5px) 100%, 0 100%); }
.comic-btn.primary { --fill: var(--gold); color: var(--ink); }
.comic-btn:active { transform: translateY(3px) scale(.96); }
.comic-btn.icon-only { width: 54px; height: 47px; padding: 0; font-size: 18px; }

/* ArcadeCard */
.arcade { position: relative; isolation: isolate; display: flex; align-items: center; color: var(--cream); filter: drop-shadow(2px 4px 0 var(--ink)); transition: transform .09s ease-out; text-align: left; }
.arcade::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--ink); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.arcade::after { content: ''; position: absolute; inset: 2px; z-index: -1; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  background: radial-gradient(circle, rgba(255,255,255,.16) .75px, transparent 1.1px) 0 0 / 6px 6px, linear-gradient(#8151CF, #50318B); box-shadow: inset 0 0 0 1.5px #AA87DE; }
.arcade.primary { color: var(--ink); }
.arcade.primary::after { background: radial-gradient(circle, rgba(255,255,255,.16) .75px, transparent 1.1px) 0 0 / 6px 6px, linear-gradient(#FFE66F, #FFB222); }
.arcade:active { transform: translate(2px, 3px) scale(.98); }

/* Loading */
#loading { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: #090e18; color: #cfaa6f; font: 12px system-ui; letter-spacing: 3px; text-align: center; }
.loading-card { display: grid; justify-items: center; gap: 14px; }
.loading-card img { width: min(300px, 46vw); }
.loading-card .bar { width: 220px; height: 6px; background: #24182F; overflow: hidden; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.loading-card .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #DEAD5C, #F0BF57); transition: width .2s; }
.loading-card p { margin: 0; font: 700 11px ui-monospace, Menlo, monospace; letter-spacing: 2px; color: var(--paper); }

/* ── Home ─────────────────────────────────────── */
#home.active { display: block; position: absolute; inset: 0; overflow: hidden; color: var(--cream); }
.key-art { position: absolute; inset: -6px -10px; background: linear-gradient(90deg, rgba(36,24,47,.65), rgba(36,24,47,.2) 40%, transparent 67%), linear-gradient(transparent 50%, rgba(36,24,47,.8)), url(../ui/key-art.webp) center / cover no-repeat; animation: drift 44s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(-5px, 3px); } to { transform: translate(5px, -3px); } }
.sparks { position: absolute; inset: 0; pointer-events: none; }
.sparks i { position: absolute; bottom: 0; width: 1.4px; height: 1.4px; border-radius: 50%; background: var(--gold); opacity: 0; animation: rise 22s linear infinite; }
.sparks i.big { width: 3px; height: 3px; }
@keyframes rise { 0% { transform: translateY(0); opacity: 0; } 50% { opacity: .6; } 100% { transform: translateY(-100vh); opacity: 0; } }
.home-top { position: absolute; top: 10px; left: calc(19px + var(--sl)); right: calc(19px + var(--sr)); display: flex; align-items: flex-start; gap: 10px; }
.home-top .logo { width: 24vw; height: 24vh; object-fit: contain; object-position: left top; }
.home-top .account { flex-direction: column; align-items: flex-start; gap: 0; padding: 7px 19px; line-height: 1; }
.home-top .account small { font: 900 7px var(--heavy); }
.home-top .account span { font-size: 14px; }
.home-column { position: absolute; left: calc(23px + var(--sl)); top: 32vh; width: 47vw; display: flex; flex-direction: column; gap: 9px; animation: enter .3s ease-out both; }
@keyframes enter { from { transform: translateX(-30px); opacity: 0; } }
.home-hello { display: flex; flex-direction: column; transform: rotate(-2deg); transform-origin: left; margin-bottom: 3px; line-height: 1; }
.home-hello span { font: 15px var(--comic); color: var(--gold); }
.home-hello strong { font: 400 33px var(--comic); color: var(--cream); text-shadow: 2px 3px 0 var(--violet); }
.vs-cpu { height: 69px; padding: 0 16px; gap: 13px; }
.vs-cpu .big { font-size: 30px; }
.vs-cpu .vs-text { display: flex; flex-direction: column; flex: 1; line-height: 1.05; }
.vs-cpu b { font: italic 800 31px var(--heavy); }
.vs-cpu small { font: 800 9px var(--heavy); }
.vs-cpu .chev { font-size: 23px; }
/* VS CPU and ARCADE side by side (ComicHome bigLabel). */
.home-row.modes .vs-cpu { flex: 1; min-width: 0; padding: 0 13px; gap: 10px; }
.home-row.modes .vs-cpu .big { font-size: 24px; }
.home-row.modes .vs-cpu b { font-size: clamp(19px, 3.2vw, 27px); white-space: nowrap; }
.home-row.modes .vs-cpu small { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-row { display: flex; gap: 9px; }
.home-row .card { flex: 1; height: 52px; padding: 0 12px; gap: 8px; min-width: 0; }
.home-row .card .i { font-size: 18px; }
.home-row .card span { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.home-row .card b { font: italic 800 clamp(14px, 2.1vw, 21px) var(--heavy); letter-spacing: -.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-row .card small { font: 900 6px var(--heavy); letter-spacing: .5px; }
.home-row.bottom { align-items: center; margin-top: 2px; }
.small-card { font: 14px var(--comic); padding: 6px 10px; gap: 6px; }
.difficulty { display: flex; flex-direction: column; gap: 2px; }
.difficulty > small { font: 900 6px var(--heavy); letter-spacing: 1px; color: rgba(255,240,205,.7); }
.levels { display: flex; gap: 3px; }
.levels button { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 28px; padding: 0 8px; line-height: 1; color: var(--cream); position: relative; isolation: isolate; }
.levels button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(255,240,205,.25); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.levels button::after { content: ''; position: absolute; inset: 1px; z-index: -1; background: rgba(36,24,47,.85); clip-path: polygon(4.6px 0, 100% 0, calc(100% - 4.6px) 100%, 0 100%); }
.levels button b { font: 400 12px var(--comic); }
.levels button small { font: 900 5px var(--heavy); letter-spacing: .5px; opacity: .75; }
.levels button.active { color: var(--ink); }
.levels button.active::before, .levels button.active::after { background: var(--gold); }
.home-foot { position: absolute; right: calc(24px + var(--sr)); bottom: 8px; margin: 0; font: 700 6px var(--heavy); letter-spacing: 1px; color: rgba(255,240,205,.55); pointer-events: none; }

/* ── Selection ────────────────────────────────── */
#select.active { display: block; position: absolute; inset: 0; color: var(--cream); }
.ink-panel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ink-panel polygon { fill: rgba(36,24,47,.96); }
.ink-panel line { stroke: var(--gold); stroke-width: 5px; }
.select-column { position: absolute; left: var(--sl); top: 0; bottom: 0; width: calc((100vw - var(--sl) - var(--sr)) * .41); padding: 18px 9px 18px 25px; display: flex; flex-direction: column; gap: 10px; animation: enter .35s ease-out both; }
.badge-row { display: flex; align-items: center; gap: 6px; }
.ro { font: 16px var(--comic); color: var(--ink); background: var(--gold); padding: 0 7px; }
.tiny { font: 900 8px var(--heavy); letter-spacing: 2px; }
.steps { display: flex; gap: 5px; }
.steps span { font: 17px var(--comic); padding: 4px 11px; line-height: 1; color: rgba(255,240,205,.4); background: rgba(96,64,120,.4); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.steps span.on { color: var(--ink); background: var(--gold); }
#select-title { margin: 0; font: 400 40px/0.95 var(--comic); animation: title .3s ease-out; }
@keyframes title { from { transform: translateX(-18px); opacity: 0; } }
.roster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
/* Tile: the button sways and grows as one piece; its shadow and frame are plain slanted shapes (no filter, no border cut
   by the slant), the picture is the same shape inset, so the gold frame is even on all four sides while it moves. */
.slot { display: block; position: relative; isolation: isolate; }
.slot::before { content: ''; position: absolute; inset: 0; z-index: -1; translate: 2px 3px; background: #000; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.slot .tile { display: block; padding: 2.5px; background: #000; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.slot .tile-in { display: flex; flex-direction: column; overflow: hidden; background: var(--ink); clip-path: polygon(3.6px 0, 100% 0, calc(100% - 3.6px) 100%, 0 100%); }
.slot.active .tile { background: var(--gold); }
.slot.active .tile-in { background: var(--violet); }
.slot .face { height: 57px; background-color: #49305D; background-repeat: no-repeat; }
.slot .locked { height: 57px; display: grid; place-items: center; color: rgba(255,240,205,.2); font-size: 32px; position: relative; }
.slot .locked .lock { position: absolute; right: 5px; bottom: 5px; font-size: 8px; color: var(--cream); }
.slot .label { height: 17px; display: grid; place-items: center; background: var(--ink); font: 10px var(--comic); padding: 0 3px; white-space: nowrap; overflow: hidden; }
.slot:disabled { cursor: default; }
.roster-note { margin: 0; font: 700 6px var(--heavy); color: rgba(255,240,205,.5); }
.arenas { display: flex; flex-direction: column; gap: 10px; }
.arena-item { --fill: var(--ink); --stroke: rgba(255,240,205,.3); --bw: 1px; display: flex; align-items: center; padding: 9px 12px 9px 14px; text-align: left; }
.arena-item.on { --fill: var(--violet); }
.arena-item span { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.arena-item small { font: 900 7px var(--heavy); color: var(--gold); }
.arena-item b { font: 400 18px var(--comic); line-height: 1; }
.arena-item .i { color: var(--gold); font-size: 17px; }
.next { width: 100%; font-size: 21px; }
.select-links { display: flex; gap: 17px; font: 900 9px var(--heavy); color: rgba(255,240,205,.85); }
.select-links button { display: inline-flex; align-items: center; gap: 4px; }
.select-side { position: absolute; top: 17px; bottom: 17px; right: calc(17px + var(--sr)); display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }
.select-side > * { pointer-events: auto; }
.top-box { --fill: rgba(36,24,47,.85); display: flex; align-items: center; gap: 10px; padding: 8px 14px; font: 900 10px var(--heavy); }
.top-box button { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; }
.top-box button:first-child { width: 34px; justify-content: center; font-size: 15px; }
/* A slim column at the right edge: the 3D fighter stands beside it, never behind it (user: "you can't even see the characters"). */
.name-card { --fill: rgba(36,24,47,.9); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 12px 20px 12px 14px; max-width: 250px; box-sizing: border-box; text-align: right; animation: enter-right .3s ease-out; }
@keyframes enter-right { from { transform: translateX(18px); opacity: 0; } }
.name-card h2 { margin: 0; font: 400 38px/1 var(--comic); text-shadow: 3px 3px 0 var(--ink); white-space: nowrap; max-width: 100%; }
.name-card p { margin: 0; font: 900 9px var(--heavy); letter-spacing: 1.5px; }
.name-card .power { font: 400 18px var(--comic); letter-spacing: 0; color: var(--gold); display: flex; gap: 5px; align-items: center; }
/* Strength pips and power stats (iOS FighterStrengthBars / PowerStats): real rule numbers, never invented. */
.strengths { display: flex; gap: 3px; margin: 3px 0; text-align: left; }
.strength { --tone: rgba(255,240,205,.75); width: 40px; display: flex; flex-direction: column; gap: 1.5px; }
.strength.up { --tone: var(--gold); } .strength.down { --tone: #E0675F; }
.strength small { font: 900 6px var(--heavy); letter-spacing: .4px; color: rgba(255,240,205,.7); white-space: nowrap; }
.strength span { display: flex; gap: 1.5px; }
.strength i { width: 6.5px; height: 5px; background: rgba(255,240,205,.14); clip-path: polygon(1.5px 0, 100% 0, calc(100% - 1.5px) 100%, 0 100%); }
.strength i.on { background: var(--tone); }
.strength b { font: 400 10.5px/1 var(--comic); color: var(--tone); }
.power-stats { display: grid; grid-template-columns: 100px 100px; gap: 4px 10px; margin-top: 5px; text-align: left; }
.power-stats > div { display: flex; flex-direction: column; gap: 1px; }
.power-stats p { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; margin: 0; letter-spacing: 0; }
.power-stats small { font: 900 6.5px var(--heavy); letter-spacing: .6px; color: rgba(255,240,205,.7); }
.power-stats b { font: 400 10.5px/1 var(--comic); color: var(--cream); white-space: nowrap; }
.power-stats span { height: 5px; background: rgba(255,240,205,.14); clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
.power-stats i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #D98A3C); clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
.tricolor { display: flex; gap: 4px; width: 50px; height: 4px; margin-top: 8px; }
.tricolor i { flex: 1; } .tricolor i:nth-child(1) { background: #365A9C; } .tricolor i:nth-child(2) { background: var(--gold); } .tricolor i:nth-child(3) { background: #BE4E50; }

/* ── Match ────────────────────────────────────── */
#match.active { display: block; position: absolute; inset: 0; }
#match > * { position: absolute; }
.hud-top { top: calc(10px + var(--st)); left: calc(22px + var(--sl)); right: calc(22px + var(--sr)); display: flex; align-items: flex-start; gap: 18px; pointer-events: none; transition: opacity .2s; }
.health { flex: 1; display: flex; align-items: flex-start; gap: 6px; min-width: 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.health.right { flex-direction: row-reverse; }
.portrait { flex: none; width: 39px; height: 47px; background-color: #604078; background-repeat: no-repeat; position: relative; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.portrait::after { content: ''; position: absolute; inset: 0; border: 1.5px solid var(--cream); clip-path: inherit; }
.meters { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.health.left .meters { align-items: flex-start; } .health.right .meters { align-items: flex-end; }
.meters .name { font: 19px/1.15 var(--comic); padding: 0 8px; background: rgba(36,24,47,.88); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hp { position: relative; width: 100%; height: 13px; background: var(--ink); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.hp i { position: absolute; top: 2px; bottom: 2px; width: 0; }
.health.left .hp i { left: 2px; } .health.right .hp i { right: 2px; }
.hp .lag { background: var(--cream); transition: width .45s ease-out .1s; }
.hp .now { background: linear-gradient(#D8E777, #88B36B); }
.hp.low .now { background: linear-gradient(#EFA464, #C66062); }
.meter-row { display: flex; align-items: center; gap: 6px; }
.health.right .meter-row { flex-direction: row-reverse; }
.stars { display: flex; gap: 4px; font-size: 8px; color: rgba(245,232,201,.2); }
.stars .won { color: var(--gold); }
.super-meter { position: relative; width: 118px; height: 11px; background: rgba(36,24,47,.85); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.super-meter i { position: absolute; top: 1.5px; bottom: 1.5px; width: 0; background: linear-gradient(#8FC3E8, #4E7FBF); transition: width .25s ease-out; }
.health.left .super-meter i { left: 1.5px; } .health.right .super-meter i { right: 1.5px; }
.super-meter.full { background: var(--cream); }
.super-meter.full i { background: linear-gradient(#FFF0A8, #F0BF57); }
.super-meter span { position: absolute; inset: 0; display: none; place-items: center; font: 10px/1 var(--comic); color: var(--ink); animation: glow .9s ease-in-out infinite alternate; }
.super-meter.full span { display: grid; }
@keyframes glow { from { opacity: .55; } to { opacity: 1; } }
.clock { width: 65px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.clock b { font: 900 30px/1 ui-monospace, Menlo, monospace; text-shadow: 0 2px 2px rgba(0,0,0,.35); }
.clock small { font: 700 8px ui-monospace, Menlo, monospace; letter-spacing: 1px; }
.hud-row { top: calc(70px + var(--st)); left: calc(22px + var(--sl)); right: calc(22px + var(--sr)); display: flex; align-items: center; font: 700 8px ui-monospace, Menlo, monospace; letter-spacing: 2px; pointer-events: none; }
.pause-btn { pointer-events: auto; width: 44px; height: 36px; display: grid; place-items: center; background: rgba(9,11,15,.75); border-radius: 18px; font-size: 14px; }
.demo-label { top: calc(110px + var(--st)); left: 50%; transform: translateX(-50%); margin: 0; padding: 5px 10px; border-radius: 20px; background: rgba(9,11,15,.65); font: 700 8px ui-monospace, Menlo, monospace; letter-spacing: 1px; white-space: nowrap; pointer-events: none; }
.combo { left: calc(28px + var(--sl)); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.combo b { font: 900 21px ui-rounded, "SF Pro Rounded", var(--heavy); color: var(--lime); }
.combo small { font: 700 10px var(--heavy); letter-spacing: 2px; }

/* Touch controls */
.controls { left: calc(25px + var(--sl)); right: calc(25px + var(--sr)); bottom: calc(12px + var(--sb)); display: flex; align-items: flex-end; pointer-events: none; }
.controls > * { pointer-events: auto; }
.stick { --size: 132px; width: var(--size); height: var(--size); border-radius: 50%; position: relative; flex: none; background: rgba(9,11,15,.6); box-shadow: inset 0 0 0 1px rgba(245,232,201,.2); touch-action: none; }
.stick .plus { position: absolute; inset: 0; display: grid; place-items: center; font: 200 42px system-ui; color: rgba(245,232,201,.18); pointer-events: none; }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: rgba(245,232,201,.18); box-shadow: inset 0 0 0 1px rgba(245,232,201,.3); pointer-events: none; }
.stick small { position: absolute; left: 0; right: 0; text-align: center; font: 700 7px var(--heavy); color: rgba(245,232,201,.65); pointer-events: none; }
.stick .up { top: 7%; } .stick .down { bottom: 7%; }
.buttons { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.pad-row { display: flex; gap: 9px; }
.fight { --size: 58px; width: var(--size); height: var(--size); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgba(245,232,201,.16); color: var(--paper); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 3px transparent, inset 0 0 0 4px rgba(245,232,201,.3); transition: transform .15s cubic-bezier(.3,1.6,.6,1), opacity .1s; touch-action: none; }
.fight .i { font-size: calc(var(--size) * .32); }
.fight span { font: 12px/1 var(--comic); }
.fight b { font: 900 calc(var(--size) * .3)/1 var(--heavy); width: calc(var(--size) * .36); height: calc(var(--size) * .36); border-radius: 50%; display: grid; place-items: center; background: var(--canvas); color: var(--lime); font-size: calc(var(--size) * .22); }
.fight.big { --size: 72px; color: var(--canvas); }
.fight.punch { background: var(--lime); }
.fight.kick { background: #D5AD78; }
.fight.kick b { color: #D5AD78; }
.fight.pressed { transform: scale(.94); opacity: .65; }
.power-btn { --fill: rgba(9,11,15,.9); --stroke: #EAC27C; --bw: 1px; width: 155px; height: 35px; display: flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--paper); font: 14px var(--comic); overflow: hidden; text-align: left; }
.power-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.power-btn .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(189,141,68,.5); z-index: -1; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.power-btn:disabled { --stroke: rgba(245,232,201,.2); color: rgba(245,232,201,.45); }
.super-btn { --fill: linear-gradient(#FFF0A8, #F0BF57, #D98A3C); --stroke: var(--cream); --bw: 2px; width: 155px; height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink); font: 20px var(--comic); animation: pulse .8s ease-in-out infinite alternate; }
.super-btn:disabled { opacity: .45; }
@keyframes pulse { to { transform: scale(1.06); } }
.compact .stick { --size: 112px; }
.compact .fight.small { --size: 52px; }
.compact .fight.big { --size: 64px; }
.compact .power-btn, .compact .super-btn { width: 139px; }

/* Entrance, round calls, finisher, results */
.entrance { inset: 0; pointer-events: none; }
/* Speech bubble beside the introduced fighter's head (GameScreen SpeechBubble): right of the head for side 0, left for side 1. */
.speech { position: absolute; top: 26%; left: 70%; max-width: min(300px, 36vw); padding: 11px 18px; background: #FFF8E6; border: 3px solid var(--ink); border-radius: 22px;
  transform: translate(-50%, -50%) rotate(-2deg); transform-origin: left bottom; animation: pop-in .2s ease-out; }
.speech.right-side { left: 30%; transform: translate(-50%, -50%) rotate(2deg); transform-origin: right bottom; }
.speech p { margin: 0; font: 23px/1.05 var(--comic); color: var(--ink); text-align: center; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.speech .tail { position: absolute; top: calc(100% - 5px); left: calc(20% - 23px); width: 37px; height: 24px; overflow: visible; }
.speech.right-side .tail { left: auto; right: calc(20% - 23px); transform: scaleX(-1); }
.speech .tail .fill { fill: #FFF8E6; }
.speech .tail .edge { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
@keyframes pop-in { from { scale: .6; opacity: 0; } }
/* K.O. white flash on the round-ending blow (opacity set per frame). */
.ko-flash { inset: 0; background: #fff; opacity: 0; pointer-events: none; }
/* Big hits jolt the victim's health block sideways three times (BarJolt). */
.health.jolt { animation: jolt .32s linear; }
@keyframes jolt { 8.33% { translate: 5.5px; } 16.67% { translate: 0; } 25% { translate: -4.5px; } 33.33% { translate: 0; } 41.67% { translate: 3.5px; } 50% { translate: 0; }
  58.33% { translate: -2.5px; } 66.67% { translate: 0; } 75% { translate: 1.5px; } 83.33% { translate: 0; } 91.67% { translate: -.5px; } }
/* Danger: a quarter of health or less, the bar pulses red. */
.hp::after { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: rgba(255,74,58,.18); box-shadow: inset 0 0 0 2.5px #FF4A3A; }
.hp.danger::after { animation: danger .97s ease-in-out infinite alternate; }
@keyframes danger { from { opacity: .35; } to { opacity: .95; } }
.intro-card { position: absolute; bottom: 37px; display: flex; flex-direction: column; gap: 5px; padding: 0 calc(38px + var(--sr)) 0 calc(38px + var(--sl)); animation: slide-l .2s ease-out; }
.intro-card.right { right: 0; align-items: flex-end; animation-name: slide-r; }
.intro-card.left { left: 0; align-items: flex-start; }
@keyframes slide-l { from { transform: translateX(-60px); opacity: 0; } }
@keyframes slide-r { from { transform: translateX(60px); opacity: 0; } }
.intro-card h2 { margin: 0; font: 400 37px/1 var(--comic); color: var(--gold); text-shadow: 3px 3px 0 #000; }
.intro-card p:last-child { margin: 0; font: 18px var(--comic); }
.intro-call, .round-start { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); display: flex; flex-direction: column; align-items: center; pointer-events: none; text-align: center; white-space: nowrap; }
.intro-call span, .round-start span { font: 27px/1 var(--comic); color: var(--paper); }
.round-start span { font-size: 30px; }
.intro-call b, .round-start b { font: 400 65px/1 var(--comic); color: var(--gold); text-shadow: 4px 5px 0 #000; }
.round-start b { font-size: 64px; }
.round-call { left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; white-space: nowrap; }
.round-call b { font: 400 96px/1 var(--comic); color: var(--gold); text-shadow: 5px 6px 0 var(--ink); }
.round-call.time b { font-size: 72px; color: var(--cream); }
.round-call span { --fill: rgba(36,24,47,.9); --cut: 6px; font: 22px var(--comic); padding: 3px 12px; color: var(--paper); }
/* The round winner took no damage at all: a gold stamp that slams in after the call. */
.round-call .perfect { --fill: linear-gradient(#FFF0A8, #F0BF57); --cut: 8px; font: 400 46px/1.1 var(--comic); color: var(--ink); padding: 1px 16px; }
.bonus-intro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; }
.bonus-intro span { font: 24px/1 var(--comic); color: var(--paper); }
.bonus-intro span:last-child { font-size: 18px; }
.bonus-intro b { font: 400 58px/1 var(--comic); color: var(--gold); text-shadow: 4px 5px 0 #000; }
.portrait.object { display: grid; place-items: center; color: var(--gold); font-size: 22px; }
.portrait.shadow { background-color: #000; }
.portrait.shadow > i { background-color: #6B4F8E; background-blend-mode: multiply; filter: brightness(.72); }
.finish-prompt { --fill: rgba(36,24,47,.9); --cut: 12px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-2deg); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 26px; }
.finish-prompt b { font: 400 40px/1 var(--comic); color: var(--gold); text-shadow: 3px 3px 0 #000; white-space: nowrap; }
.finish-prompt .seq { font: 18px var(--comic); color: var(--paper); }
.finisher-btn { --fill: linear-gradient(#FFF0A8, #F0BF57); display: flex; align-items: center; gap: 6px; padding: 10px 18px; font: 20px var(--comic); color: var(--ink); }
.finisher-btn:active { transform: scale(.96); }
.cinematic-title { left: 0; right: 0; bottom: calc(24px + var(--sb)); margin: 0; text-align: center; font: 30px var(--comic); color: var(--gold); text-shadow: 3px 3px 0 #000; pointer-events: none; }
.result { --fill: rgba(36,24,47,.94); --stroke: var(--gold); --bw: 2px; --cut: 15px; left: calc(25px + var(--sl)); top: 50%; transform: translateY(-50%); width: 300px; padding: 21px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--paper); font: 19px var(--comic); animation: enter .3s ease-out; }
.result small { font: 900 8px var(--heavy); letter-spacing: 1px; }
.result h2 { margin: 0; font: 400 38px/1 var(--comic); color: var(--gold); }
.result p { margin: 0; font: 23px var(--comic); }
.result .score { --fill: var(--violet); align-self: stretch; display: flex; justify-content: space-between; padding: 9px 12px; font: 20px var(--comic); }
.result .comic-btn { align-self: flex-start; }
.pause-panel { inset: 0; background: rgba(9,11,15,.75); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.pause-panel h2 { margin: 0; font: 900 34px ui-rounded, "SF Pro Rounded", var(--heavy); }
.pause-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.arena-btn { min-height: 44px; padding: 0 18px; border-radius: 8px; background: var(--lime); color: var(--canvas); font: 900 11px var(--heavy); }
.arena-btn:active { opacity: .65; }

/* Sheets */
.sheet.active { display: flex; flex-direction: column; position: absolute; inset: 0; z-index: 20; background: #0E1614; color: var(--paper); }
.sheet header { display: flex; align-items: center; justify-content: center; position: relative; min-height: 44px; padding: 0 calc(16px + var(--sr)) 0 calc(16px + var(--sl)); font: 600 15px var(--heavy); border-bottom: 1px solid rgba(255,255,255,.08); flex: none; }
.sheet header button { position: absolute; right: calc(16px + var(--sr)); color: var(--lime); font: 600 15px var(--heavy); min-height: 44px; }
.guide-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; display: flex; gap: 30px; padding: 24px calc(24px + var(--sr)) calc(24px + var(--sb)) calc(24px + var(--sl)); }
.guide-col { flex: 1; display: flex; flex-direction: column; gap: 15px; }
.guide-col h2 { margin: 0; font: 900 28px/1.05 ui-rounded, "SF Pro Rounded", var(--heavy); }
.guide-col .row { display: flex; gap: 12px; align-items: flex-start; }
.guide-col .row > b { width: 32px; flex: none; font: 900 22px var(--heavy); text-align: center; }
.guide-col h3 { margin: 0 0 3px; font: 700 13px var(--heavy); }
.guide-col p { margin: 0; font: 11px/1.35 var(--heavy); color: rgba(245,232,201,.6); }
.guide-col h4 { margin: 0; font: 700 11px ui-monospace, Menlo, monospace; letter-spacing: 2px; }
.combo-row b { display: block; font: 700 18px ui-monospace, Menlo, monospace; color: #D4E373; margin-bottom: 5px; }
.combo-row p { color: var(--paper); font-size: 12px; }
.guide-col .muted { font-size: 12px; }
.guide-col .keys { font-size: 10px; color: rgba(245,232,201,.45); }
.guide-col hr { width: 100%; border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 0; }
.guide-col .arena-btn { align-self: flex-start; }
.sheet.small.active { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 86vw); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.notice-body { padding: 18px 22px 22px; font: 13px/1.45 var(--heavy); }
.notice-body p { margin: 0; }

/* Phone held upright: the game is landscape only. */
#rotate { display: none; position: fixed; inset: 0; z-index: 50; background: var(--ink); color: var(--cream); flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 30px; }
#rotate b { font: 400 34px var(--comic); color: var(--gold); text-shadow: 3px 3px 0 #000; }
#rotate span { font: 700 12px var(--heavy); letter-spacing: 1px; opacity: .75; }
#rotate .phone { width: 46px; height: 80px; border: 4px solid var(--cream); border-radius: 10px; animation: turn 2.2s ease-in-out infinite; }
@keyframes turn { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 900px) { #rotate { display: flex; } }

/* ── Arcade screens (Arcade.swift ArcadeOverlay) ── */
.arcade-screen { display: none; position: absolute; inset: 0; z-index: 15; align-items: center; justify-content: center; color: var(--cream); background: rgba(36,24,47,.96);
  padding: 0 calc(30px + var(--sr)) 0 calc(30px + var(--sl)); }
.arcade-screen.active { display: flex; }
.arcade-screen.dim { background: rgba(36,24,47,.72); }
.arcade-screen > * { display: none; }
.arcade-screen > .on { display: flex; }
.ladder { align-items: center; gap: 28px; }
.ladder-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.kicker { font: 900 9px var(--heavy); letter-spacing: 2px; color: var(--gold); }
.tower-title { margin: 0; font: 400 56px/.86 var(--comic); color: var(--gold); text-shadow: 3px 4px 0 #000; transform: rotate(-3deg); transform-origin: left; }
.small .tower-title { font-size: 44px; }
.ladder-text p { margin: 0; font: 17px var(--comic); }
.tokens { display: flex; align-items: center; gap: 5px; }
.tokens small { font: 900 8px var(--heavy); letter-spacing: 1px; }
.tokens i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,240,205,.15); }
.tokens i.on { background: var(--gold); }
.ladder-actions { display: flex; gap: 10px; padding-top: 6px; }
.ladder-actions .comic-btn { font-size: 16px; padding: 9px 18px; }
.ladder-actions .comic-btn.primary { font-size: 22px; min-width: 170px; gap: 8px; }
.tower { display: flex; flex-direction: column; gap: 5px; width: min(300px, 38vw); }
.rung { --fill: rgba(36,24,47,.7); --stroke: rgba(255,240,205,.2); --bw: 1px; --cut: 6px; display: flex; align-items: center; gap: 9px; padding: 6px; }
.rung.current { --fill: var(--violet); --stroke: var(--gold); --bw: 2px; }
.rung.done { opacity: .6; }
.rung .face { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--violet); color: var(--gold); font-size: 20px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.rung.boss .face { background: #000; }
.rung.boss .face > i { background-color: #6B4F8E; background-blend-mode: multiply; filter: brightness(.72); }
.rung span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rung b { font: 18px/1.05 var(--comic); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rung small { font: 900 7px var(--heavy); letter-spacing: 1px; color: rgba(255,240,205,.65); }
.rung > .i { color: var(--gold); font-size: 16px; }
.small .rung { padding: 4px 6px; } .small .rung .face { width: 34px; height: 34px; } .small .rung b { font-size: 16px; }
/* More than seven rows (full roster): smaller rows, portrait frames keep the 5:6 head shape. */
.tower.tight { gap: 3px; } .tower.tight .rung { padding: 2px 6px; } .tower.tight .rung .face { width: 24px; height: 29px; } .tower.tight .rung b { font-size: 14px; }
.tower.packed { gap: 2px; } .tower.packed .rung { height: 22px; padding: 0 6px 0 8px; gap: 7px; }   /* clear of the slanted left edge */ .tower.packed .rung .face { width: 18px; height: 22px; font-size: 12px; }
.tower.packed .rung span { flex-direction: row; align-items: baseline; gap: 7px; } .tower.packed .rung b { font-size: 14px; line-height: 1; } .tower.packed .rung small { font-size: 6.5px; }
.continue, .bonus-result { flex-direction: column; align-items: center; gap: 10px; }
.big-title { font: 400 64px/1 var(--comic); color: var(--gold); text-shadow: 4px 5px 0 #000; }
.bonus-result .big-title { font-size: 54px; }
.continue .count { font: 400 110px/1 var(--comic); font-variant-numeric: tabular-nums; animation: tick 1s ease-out infinite; }
@keyframes tick { from { transform: scale(1.15); } 30% { transform: scale(1); } }
.continue .comic-btn.primary { min-width: 210px; }
.bonus-result > span { font: 18px var(--comic); }
.bonus-result .score-line { font: 400 40px/1 var(--comic); }
.bonus-result .comic-btn { font-size: 22px; min-width: 200px; gap: 8px; }
.ending { align-items: center; gap: 30px; }
.ending-portrait { --cut: 12px; --fill: #49305D; --stroke: var(--gold); --bw: 3px; width: 125px; height: 150px; flex: none; }
.ending-portrait .face { position: absolute; inset: 3px; overflow: hidden; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.ending-portrait.over { --stroke: rgba(255,240,205,.3); }
.ending-portrait.over .face > i { filter: brightness(.82); }
.ending-text { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.ending-text .tower-title { font-size: 54px; }
.ending-text p { margin: 0; font: 17px var(--comic); }
.ending-stats { display: flex; gap: 18px; font: 16px var(--comic); color: rgba(255,240,205,.8); }
.ending-text .comic-btn { font-size: 21px; min-width: 200px; }

/* Small landscape phones (height < 430pt in SwiftUI). */
.small .home-column { gap: 9px; }
.small #select-title { font-size: 29px; }
.small .select-column { gap: 10px; }
.small .slot .face, .small .slot .locked { height: 43px; font-size: 25px; }
.small .name-card h2 { font-size: 30px; }
@media (prefers-reduced-motion: reduce) { .key-art, .sparks i, .super-btn, .super-meter span { animation: none; } }

/* ── Viral sharing (js/share.js): result points, share sheet with the victory card, a friend's challenge ── */
.result .points { --fill: #3E2A50; }
.result .target { font: 17px var(--comic); color: var(--gold); }
.result .share-btn { --fill: #2F8F4E; color: var(--cream); }
.share-sheet { display: none; position: absolute; inset: 0; z-index: 30; align-items: center; justify-content: center; background: rgba(9,11,15,.72); padding: calc(10px + var(--st)) calc(12px + var(--sr)) calc(10px + var(--sb)) calc(12px + var(--sl)); }
.share-sheet.active { display: flex; animation: enter .25s ease-out; }
.share-box { --fill: #24182F; --stroke: var(--gold); --bw: 2px; --cut: 16px; width: min(560px, 100%); max-height: 100%; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 18px; color: var(--paper); text-align: center; }
.share-box h2 { margin: 0; font: 400 30px/1 var(--comic); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); }
.share-box small { font: 900 9px var(--heavy); letter-spacing: 2px; color: var(--cream); }
.share-preview { width: 100%; aspect-ratio: 1200 / 630; background: #1B1224 center/40px no-repeat; border: 2px solid var(--ink); }
.share-preview img, #challenge-card { width: 100%; display: block; aspect-ratio: 1200 / 630; object-fit: cover; }
.share-preview img:not([src]) { visibility: hidden; }
.share-status { margin: 0; font: 700 11px var(--heavy); letter-spacing: 1px; color: var(--gold); }
.share-name { display: flex; align-items: center; gap: 8px; font: 15px var(--comic); color: var(--cream); }
.share-name input { width: 170px; padding: 6px 9px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 600 15px var(--heavy); user-select: text; -webkit-user-select: text; }
.share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.share-actions.column { flex-direction: column; align-items: stretch; width: min(360px, 100%); }
.share-actions .comic-btn { font-size: 17px; text-decoration: none; }
.comic-btn.whatsapp { --fill: #25D366; color: #0B2A17; font-size: 21px; padding: 10px 26px; }
.comic-btn.whatsapp[aria-disabled] { opacity: .5; }
.share-close { font: 15px var(--comic); color: var(--lime); min-height: 36px; letter-spacing: .5px; }
.challenge #challenge-line { margin: 0; font: 600 14px var(--heavy); }
.challenge .caption { margin: 0; font: 19px var(--comic); color: var(--cream); }
.compact .share-box { gap: 6px; padding: 10px 14px; }
.compact .share-preview, .compact #challenge-card { width: 70%; }
/* Landscape phones: the card on the left, the buttons on the right, so WhatsApp is visible without scrolling. */
@media (orientation: landscape) and (max-height: 520px) {
  .share-box { width: min(860px, 100%); display: grid; grid-template-columns: 56% 1fr; column-gap: 16px; row-gap: 8px; align-items: center; justify-items: center; }
  .share-box > * { grid-column: 2; }
  #share-sheet .share-box > h2 { grid-column: 1 / -1; }
  #share-sheet .share-preview { grid-column: 1; grid-row: 2 / span 4; width: 100%; }
  .challenge .share-box:has(#challenge-card:not([hidden])) > #challenge-card { grid-column: 1; grid-row: 1 / span 7; width: 100%; }
  .challenge .share-box:has(#challenge-card[hidden]) { grid-template-columns: 1fr; width: min(480px, 100%); }
  .challenge .share-box:has(#challenge-card[hidden]) > * { grid-column: 1; }
  .share-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .compact .share-preview, .compact #challenge-card { width: 100%; }
}
/* With points and the share button the result panel gets tall: rounds + points, and rematch + menu, share a row. */
.result:has(#share-open:not([hidden])) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 330px; align-items: center; }
.result:has(#share-open:not([hidden])) > * { grid-column: 1 / -1; }
.result:has(#share-open:not([hidden])) > .score { grid-column: auto; font-size: 17px; padding: 8px 10px; }
.result:has(#share-open:not([hidden])) > .comic-btn[data-action] { grid-column: auto; justify-self: stretch; font-size: 16px; padding: 9px 10px; }
.result .share-btn { justify-self: stretch; font-size: 20px; }
#rotate-card { width: min(92vw, 520px); aspect-ratio: 1200 / 630; object-fit: cover; border: 3px solid var(--gold); box-shadow: 2.8px 4.2px 3.5px rgba(0,0,0,.32); margin-bottom: 6px; }
#rotate-challenge { font: 400 28px var(--comic); color: var(--cream); text-shadow: 2px 2px 0 #000; }

/* ══ Arcade comic style for every menu (Docs/arcade-style.md, iOS/ArcadeKit.swift) ══════════════════════════════
   Kit: .burst (injected by main.js into [data-burst]), .arcade-panel, .stamp, .tag, .pcard, .pulse, .stagger.
   Every looping animation rests at its base style, so prefers-reduced-motion simply switches them off (end of block). */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --glow { syntax: '<percentage>'; inherits: false; initial-value: 66%; }
/* Burst (ComicBurst): deep purple, 22 rays turning at 0.12 rad/s (52 s a turn), a breathing warm glow, halftone dots that
   grow away from the focus. The rays turn by animating the gradient angle, so no oversized rotating layer is needed. */
.burst { --cx: 30%; --cy: 45%; --base: #2A1640; --ray-a: rgba(240,191,87,.16); --ray-b: rgba(155,79,208,.14); --heat: rgba(232,106,44,.6); --heat-2: rgba(122,46,140,.25);
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.burst > i { --spin: 0deg; --glow: 66%;   /* Safari before 16.4 has no @property: a still burst instead of none */
  position: absolute; inset: 0; display: block;
  background: radial-gradient(ellipse var(--glow) var(--glow) at var(--cx) var(--cy), var(--heat), var(--heat-2) 55%, transparent 100%),
    repeating-conic-gradient(from var(--spin) at var(--cx) var(--cy), var(--ray-a) 0deg 9deg, transparent 9.4deg 16deg, var(--ray-b) 16.4deg 25.4deg, transparent 25.8deg 32.727deg),
    var(--base);
  /* 30 steps a second like iOS (TimelineView 1/30): half the repaints of a smooth turn, beside a live WebGL arena. */
  animation: burst-spin 52.36s steps(1571) infinite, burst-breathe 1.96s ease-in-out infinite alternate; }
.burst > i::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(0,0,0,.22) 1.2px, transparent 1.6px) 0 0 / 9px 9px, radial-gradient(circle, rgba(0,0,0,.22) 1.2px, transparent 1.6px) 4.5px 4.5px / 9px 9px;
  -webkit-mask: radial-gradient(circle at var(--cx) var(--cy), rgba(0,0,0,.15), #000 75%); mask: radial-gradient(circle at var(--cx) var(--cy), rgba(0,0,0,.15), #000 75%); }
@keyframes burst-spin { to { --spin: 360deg; } }
@keyframes burst-breathe { to { --glow: 74%; } }
.burst.warm { --base: #3A1A12; --ray-a: rgba(255,196,64,.24); --ray-b: rgba(240,120,40,.18); --heat: rgba(255,170,60,.65); --heat-2: rgba(200,70,30,.3); }
.burst.cool { --base: #1E1240; --ray-a: rgba(155,79,208,.24); --ray-b: rgba(216,53,42,.18); --heat: rgba(216,53,42,.55); --heat-2: rgba(90,40,160,.3); }

/* Panel (arcadePanel): burst in a cut-corner frame, black outline, gold inner line, black shadow (7, 9), tilted, pops in. */
.arcade-panel { --cut: 16px; position: relative; isolation: isolate; rotate: -1.2deg; animation: panel-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.arcade-panel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #000; clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); z-index: -2; }
/* Soft shadow (black 32%, offset (4, 6), blur 5; portrait cards 0.7×): main.js injects .soft-shadow into panels and cards. */
.soft-shadow { position: absolute; inset: 0; z-index: -3; pointer-events: none; translate: 4px 6px; filter: blur(2.5px); grid-area: auto !important; }
.soft-shadow > i { position: absolute; inset: 0; background: rgba(0,0,0,.32); clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.pcard > .soft-shadow { translate: 2.8px 4.2px; filter: blur(1.75px); }
/* In grid panels (result, share) a placed absolute child would measure from its grid area: keep the burst and the pinned card unplaced. */
.arcade-panel > .burst, .arcade-panel > .pcard { grid-area: auto !important; }
.arcade-panel > .burst { inset: 4px; background: var(--gold); clip-path: polygon(calc(var(--cut) - 2px) 0, 100% 0, calc(100% - var(--cut) + 2px) 100%, 0 100%); }
.arcade-panel > .burst > i { inset: 2px; clip-path: polygon(calc(var(--cut) - 3px) 0, 100% 0, calc(100% - var(--cut) + 3px) 100%, 0 100%); }
@keyframes panel-pop { from { scale: .55; rotate: -7.2deg; opacity: 0; } 60% { opacity: 1; } }

/* Stamp title (StampTitle + ComicTitle): gold Bangers, black outline and drop shadow; slams in, then a shine sweeps across
   it every 3.2 s with a small bounce. The shine is a copy of the text (data-text, kept in sync by main.js). */
.stamp { position: relative; display: inline-block; font-family: var(--comic); font-weight: 400; color: var(--gold); white-space: pre-line; rotate: -2deg;
  /* The outline and drop shadow reach past the letters; Safari crops an animated element to its box, so the box takes them
     in (padding) without moving anything (matching negative margins). */
  padding: .08em .16em .14em .08em; margin: -.08em -.16em -.14em -.08em;
  text-shadow: .0625em 0 0 #000, -.0625em 0 0 #000, 0 .0625em 0 #000, 0 -.0625em 0 #000, .0625em .0625em 0 #000, -.0625em -.0625em 0 #000, .0625em -.0625em 0 #000, -.0625em .0625em 0 #000, .083em .111em 0 #000;
  animation: stamp-in .42s cubic-bezier(.3,1.7,.55,1) .15s both, stamp-beat 3.2s ease-out .9s infinite; }
.stamp::after { content: attr(data-text); position: absolute; inset: 0; color: transparent; text-shadow: none; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.85) 50%, transparent 58%) no-repeat 130% 0 / 260% 100%; -webkit-background-clip: text; background-clip: text;
  animation: stamp-shine 3.2s linear .9s infinite; }
@keyframes stamp-in { from { scale: 2.4; rotate: -14deg; opacity: 0; } 40% { opacity: 1; } }
@keyframes stamp-beat { 0%, 13%, 100% { scale: 1; } 6% { scale: 1.045; } }
@keyframes stamp-shine { 0% { background-position: 130% 0; } 45%, 100% { background-position: -30% 0; } }
.stamp.cream { color: var(--cream); }

/* Tag: a red cut-corner label with spaced black Bangers, tilted. */
.tag { display: inline-block; padding: 3px 12px 2px; background: #D8352A; color: #000; font: 400 14px/1.1 var(--comic); letter-spacing: 2.5px; rotate: -3deg;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }

/* Portrait card (ArcadePortrait): tilted cut-corner frame, gold inset line, black outline and shadow; slides in, then
   sways like a card pinned to a wall (±1.6°, 2 px bob), out of step with its neighbour. */
.pcard { --tilt: -4deg; --cut: 12px; position: relative; isolation: isolate; flex: none; width: 120px; height: 144px; rotate: var(--tilt);
  animation: card-in .55s cubic-bezier(.3,1.4,.5,1) both, wiggle 3.7s ease-in-out .6s infinite; }
.pcard.right { --tilt: 5deg; animation-name: card-in-r, wiggle; animation-delay: 0s, -1.4s; }
.pcard::after { content: ''; position: absolute; inset: 0; background: #000; clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); z-index: -1; }
/* The gold line is the face's own background showing round a slanted inner shape (a border inside the slanted clip was cut
   away by the slant, so the line vanished down one side). The portrait inside is 5 px smaller than the face. */
.pcard > .face { position: absolute; inset: 4px; overflow: hidden; padding: 2.5px; background: var(--gold); clip-path: polygon(calc(var(--cut) - 2px) 0, 100% 0, calc(100% - var(--cut) + 2px) 100%, 0 100%); }
.pcard > .face > i { background-color: #49305D; clip-path: polygon(calc(var(--cut) - 4.5px) 0, 100% 0, calc(100% - var(--cut) + 4.5px) 100%, 0 100%); }
@keyframes card-in { from { translate: -180px 0; opacity: 0; } }
@keyframes card-in-r { from { translate: 180px 0; opacity: 0; } }
@keyframes wiggle { 0%, 100% { rotate: var(--tilt); translate: 0 0; } 25% { rotate: calc(var(--tilt) + 1.6deg); translate: 0 -2px; } 75% { rotate: calc(var(--tilt) - 1.6deg); translate: 0 2px; } }


/* Primary buttons breathe (×1.05); groups of buttons slide in 0.1 s apart. */
.pulse { animation: breathe 2.42s ease-in-out infinite; }
@keyframes breathe { 0%, 50%, 100% { scale: 1; } 25% { scale: 1.05; } }
.stagger > * { animation: slide-up .5s cubic-bezier(.3,1.4,.5,1) both; }
.stagger > :nth-child(2) { animation-delay: .1s; } .stagger > :nth-child(3) { animation-delay: .2s; } .stagger > :nth-child(4) { animation-delay: .3s; } .stagger > :nth-child(5) { animation-delay: .4s; }
.stagger > .pulse { animation: slide-up .5s cubic-bezier(.3,1.4,.5,1) both, breathe 2.42s ease-in-out .6s infinite; }
@keyframes slide-up { from { translate: 0 40px; opacity: 0; } }

/* ── 1. Versus screen before the entrance (iOS VersusSplash.swift, 2.6 s, driven by the game's intro clock in main.js) ──
   Halves in each fighter's accent colour (light at the focus, dark at the edges, white rays, a dot screen, darker top and
   bottom) meet at a diagonal gap; full-body art stands on the bottom edge at 33% / 67%, the right one mirrored. */
.versus { inset: 0; z-index: 3; overflow: hidden; pointer-events: none; background: #150833; }
.vs-half { --accent: #8A68B8; --a1: rgba(138,104,184,.95); --a2: rgba(138,104,184,.55); --dark: #3A2C4D; --fx: 22%; position: absolute; inset: 0;
  background: linear-gradient(rgba(12,4,32,.3), transparent 26%, transparent 60%, rgba(12,4,32,.82)),
    radial-gradient(circle, rgba(12,4,32,.34) 1.3px, transparent 1.7px) 0 0 / max(7px, 1.25vh) max(7px, 1.25vh),
    repeating-conic-gradient(from 0deg at var(--fx) 56%, rgba(255,255,255,.17) 0deg 3.5deg, transparent 3.6deg 12deg),
    radial-gradient(circle 55vmax at var(--fx) 56%, var(--a1), var(--a2) 50%, transparent 100%),
    var(--dark); }
.vs-half.left { clip-path: polygon(0 0, 55.4% 0, 43.4% 100%, 0 100%); }
.vs-half.right { --fx: 78%; clip-path: polygon(56.6% 0, 100% 0, 100% 100%, 44.6% 100%); }
.vs-rays { position: absolute; left: 50%; top: 46%; width: 180vh; height: 180vh; margin: -90vh 0 0 -90vh; opacity: 0; mix-blend-mode: screen;
  background: repeating-conic-gradient(rgba(255,214,107,.22) 0deg 4deg, transparent 4.1deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent); animation: vs-spin 16s linear infinite; }
@keyframes vs-spin { to { rotate: 360deg; } }
.vs-fig { position: absolute; inset: 0; }
/* 88% tall, standing 1.2% above the bottom edge so the shoes are never cut (iOS VersusSplash). */
.vs-body { --art: none; position: absolute; bottom: 1.2%; height: 88%; width: 60vh; margin-left: -30vh; isolation: isolate;
  background: var(--art) bottom center / contain no-repeat; filter: drop-shadow(1.2vh .9vh 0 rgba(12,4,32,.55)); }
.vs-fig.left .vs-body { left: 33%; }
.vs-fig.right .vs-body { left: 67%; transform: scaleX(-1); }
/* UMBRA: the player's own art tinted violet and darkened. */
.vs-body.shadow { filter: brightness(.82) drop-shadow(1.2vh .9vh 0 rgba(12,4,32,.55)); }
.vs-body.shadow::after { content: ''; position: absolute; inset: 0; background: #8A68B8; mix-blend-mode: multiply;
  -webkit-mask: var(--art) bottom center / contain no-repeat; mask: var(--art) bottom center / contain no-repeat; }
.vs-fig .pcard { position: absolute; top: 45%; width: 50vh; height: 60vh; margin: -30vh 0 0 -25vh; animation: none; }
.vs-fig.left .pcard { left: 33%; } .vs-fig.right .pcard { left: 67%; }
/* Name plates in the bottom outer corners: skewed, dark, accent and ink borders, accent style tag, outlined name, power. */
.vs-plate { position: absolute; top: 84%; white-space: nowrap; }
/* Anchored by the outer edge inside the safe area, at least 20 px from the side (a centred plate let a long name run off). */
.vs-plate.left { left: max(28px, calc(var(--sl) + 16px)); } .vs-plate.right { right: max(28px, calc(var(--sr) + 16px)); }   /* + the skew's ~7 px overhang */
.vs-plate .plate { --accent: #8A68B8; display: flex; flex-direction: column; align-items: flex-start; gap: .2vh; padding: 1.8vh 4vh; transform: skewX(-12deg);
  background: linear-gradient(#26104F, #0F0626); border: 1.2vh solid var(--accent); box-shadow: inset 0 0 0 .9vh #0C0420, 2.5vh 2.5vh 0 rgba(12,4,32,.75); }
.vs-plate.right .plate { align-items: flex-end; }
.vs-tag { font: 400 3.4vh/1.15 var(--comic); letter-spacing: 1.2px; color: #0C0420; background: var(--accent); padding: 0 .7em 0 .5em; }
.vs-plate b { font: 400 7vh/1.05 var(--comic); color: #FFF7EC; padding-right: .12em; text-shadow: .0625em 0 0 #0C0420, -.0625em 0 0 #0C0420, 0 .0625em 0 #0C0420, 0 -.0625em 0 #0C0420, .0625em .0625em 0 #0C0420, -.0625em -.0625em 0 #0C0420, .0625em -.0625em 0 #0C0420, -.0625em .0625em 0 #0C0420, .083em .111em 0 #0C0420; }
.vs-plate small { font: 400 3.4vh/1.1 var(--comic); color: #E6DCFF; padding-right: .2em; }
.vs-bolt { position: absolute; inset: 0; width: 100%; height: 100%; }
.vs-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
/* The VS: gradient letters with a thick ink outline on a red and cream explosion. */
.vs-mark { position: absolute; left: 50%; top: 42%; width: 46.5vh; height: 42vh; margin: -21vh 0 0 -23.25vh; }
.vs-mark > i { position: absolute; clip-path: polygon(50.0% 0.0%, 55.8% 20.9%, 67.2% 8.4%, 66.5% 25.3%, 85.4% 14.6%, 74.7% 33.5%, 91.6% 32.8%, 79.1% 44.2%, 100.0% 50.0%, 79.1% 55.8%, 91.6% 67.2%, 74.7% 66.5%, 85.4% 85.4%, 66.5% 74.7%, 67.2% 91.6%, 55.8% 79.1%, 50.0% 100.0%, 44.2% 79.1%, 32.8% 91.6%, 33.5% 74.7%, 14.6% 85.4%, 25.3% 66.5%, 8.4% 67.2%, 20.9% 55.8%, 0.0% 50.0%, 20.9% 44.2%, 8.4% 32.8%, 25.3% 33.5%, 14.6% 14.6%, 33.5% 25.3%, 32.8% 8.4%, 44.2% 20.9%); }
.vs-mark > .ink { inset: 0; background: #0C0420; translate: 1.2vh 1.5vh; }
.vs-mark > .red { left: 1.6%; right: 1.6%; top: 1.8%; bottom: 1.8%; background: #D8352A; }
.vs-mark > .cream { left: 12.9%; right: 12.9%; top: 13.6%; bottom: 13.6%; background: #FFF7EC; clip-path: polygon(50.0% 0.0%, 56.1% 19.1%, 67.2% 8.4%, 67.5% 23.8%, 85.4% 14.6%, 76.2% 32.5%, 91.6% 32.8%, 80.9% 43.9%, 100.0% 50.0%, 80.9% 56.1%, 91.6% 67.2%, 76.2% 67.5%, 85.4% 85.4%, 67.5% 76.2%, 67.2% 91.6%, 56.1% 80.9%, 50.0% 100.0%, 43.9% 80.9%, 32.8% 91.6%, 32.5% 76.2%, 14.6% 85.4%, 23.8% 67.5%, 8.4% 67.2%, 19.1% 56.1%, 0.0% 50.0%, 19.1% 43.9%, 8.4% 32.8%, 23.8% 32.5%, 14.6% 14.6%, 32.5% 23.8%, 32.8% 8.4%, 43.9% 19.1%); }
.vs-mark > b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 24.6vh/1 var(--comic); color: #0C0420; rotate: -6deg;
  text-shadow: .037em 0 0 #0C0420, -.037em 0 0 #0C0420, 0 .037em 0 #0C0420, 0 -.037em 0 #0C0420, .037em .037em 0 #0C0420, -.037em -.037em 0 #0C0420, .037em -.037em 0 #0C0420, -.037em .037em 0 #0C0420, 0 .061em 0 #0C0420, 0 0 .12em rgba(255,170,40,.6); }
.vs-mark > b::after { content: attr(data-text); position: absolute; inset: 0; display: grid; place-items: center; color: transparent; text-shadow: none;
  background: linear-gradient(#FFFBE0 22%, #FFE14A 42%, #FFB21F 62%, #FF7A1A 80%); -webkit-background-clip: text; background-clip: text; }

/* ── 2. Selection: the left panel is a burst with a black-and-gold slanted edge; outlined roster tiles ── */
.select-burst { position: absolute; inset: 0; clip-path: polygon(0 0, 51% 0, 42% 100%, 0 100%); pointer-events: none; isolation: isolate; }
.select-burst .burst { z-index: 0; }
.ink-panel polygon { fill: none; }
.ink-panel line { stroke: #000; stroke-width: 11px; }
.ink-panel line.gold { stroke: var(--gold); stroke-width: 4px; }
#select-title { animation: stamp-in .42s cubic-bezier(.3,1.7,.55,1) .05s both, stamp-beat 3.2s ease-out .9s infinite; transform-origin: left center; align-self: flex-start; }
/* Shadows per item, not on the container: WebKit clips a filtered container's content to its box (it cut the swaying tile). */
.arena-item, .rung { filter: drop-shadow(2px 3px 0 #000); }
.slot.active { z-index: 1; animation: tile-wiggle 2.4s ease-in-out infinite; }
@keyframes tile-wiggle { 0%, 100% { rotate: 0deg; scale: 1.04; } 25% { rotate: 2deg; scale: 1.08; } 50% { scale: 1.04; } 75% { rotate: -2deg; scale: 1.08; } }
.steps span { box-shadow: none; }
.steps span.on { animation: stamp-in .35s cubic-bezier(.3,1.7,.55,1) both; }
.arena-item { --stroke: #000; --bw: 2px; }
.arena-item.on { --stroke: var(--gold); --bw: 3px; }
/* The info card is a slim arcade panel at the right edge; the 3D fighter stands beside it. */
.name-card.arcade-panel { padding: 13px 30px 14px 18px; --cut: 14px; animation: panel-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.name-card.arcade-panel h2 { text-shadow: .0625em 0 0 #000, -.0625em 0 0 #000, 0 .0625em 0 #000, 0 -.0625em 0 #000, .07em .09em 0 #000; }
.next.pulse { transform-origin: center; }

/* ── 3. Result panel: arcade panel, the winner's portrait card pinned to its corner, stamped headline ── */
.result.arcade-panel { --cut: 16px; padding: 24px 24px 22px; animation: panel-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.result .pcard { position: absolute; top: -30px; right: -26px; width: 78px; height: 94px; --tilt: 6deg; animation-name: pop-card, wiggle; animation-duration: .5s, 3.7s; animation-delay: .25s, .8s; }
@keyframes pop-card { from { scale: .2; opacity: 0; } }
.result #result-name { font-size: 40px; line-height: 1; margin-right: 50px; }
.result .score { --stroke: #000; --bw: 2px; }

/* ── 4. Pause: a small arcade panel with PAUZĂ stamped ── */
.pause-panel { background: rgba(9,11,15,.6); }
.pause-box { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 30px 26px; }
.pause-box h2.stamp { margin: 0; font: 400 46px/1 var(--comic); }
.pause-actions .comic-btn { font-size: 19px; min-width: 150px; }

/* ── 5. Arcade screens on a burst: outlined rungs that slide in one after another, the current one sways ── */
.arcade-screen { background: none; isolation: isolate; }
.arcade-screen > .burst { display: block; }
.arcade-screen.dim > .burst { opacity: .82; }
.tower-title.stamp, .big-title.stamp { text-shadow: .0625em 0 0 #000, -.0625em 0 0 #000, 0 .0625em 0 #000, 0 -.0625em 0 #000, .0625em .0625em 0 #000, -.0625em -.0625em 0 #000, .0625em -.0625em 0 #000, -.0625em .0625em 0 #000, .083em .111em 0 #000; transform: none; rotate: -3deg; }
/* The ladder opens with a camera move (main.js ladderCamera): rows no longer slide in on their own. */
.rung { --stroke: #000; --bw: 2px; --fill: rgba(36,24,47,.92); }
.rung.current { --stroke: var(--gold); --bw: 3px; animation: rung-sway 2.6s ease-in-out 2.4s infinite; }
.tower { transform-origin: 50% 0; }
@keyframes rung-sway { 0%, 100% { rotate: 0deg; } 25% { rotate: -1.4deg; } 75% { rotate: 1.4deg; } }
.continue .count { animation: none; }
.continue .count.stamp { color: var(--cream); font-size: 120px; line-height: 1; }
.ending-portrait.pcard { width: 125px; height: 150px; --fill: none; }
.ending-portrait.over > .face > i { filter: brightness(.82) saturate(.7); }
.tokens i { box-shadow: 0 0 0 1.5px #000; }

/* ── 6. Guide and notice sheets: burst behind, Bangers headings, readable system text on dark cards ── */
.sheet { isolation: isolate; }
.sheet.active { background: #2A1640; }
.sheet header { font: 400 22px var(--comic); letter-spacing: 1px; color: var(--gold); text-shadow: 2px 2px 0 #000; border-bottom: 3px solid #000; background: rgba(20,12,30,.7); }
.sheet header button { font: 400 19px var(--comic); color: var(--gold); text-shadow: 2px 2px 0 #000; letter-spacing: .5px; }
.guide-col { background: rgba(20,12,30,.86); border: 3px solid #000; box-shadow: 4px 6px 5px rgba(0,0,0,.32); padding: 16px 18px; rotate: -.5deg; animation: slide-up .45s cubic-bezier(.3,1.4,.5,1) both; }
.guide-col + .guide-col { rotate: .6deg; animation-delay: .1s; }
.guide-col h2.stamp { font: 400 30px/1 var(--comic); letter-spacing: .5px; }
.guide-col h3 { font: 400 17px var(--comic); letter-spacing: .5px; color: var(--cream); }
.guide-col h4 { font: 400 20px var(--comic); letter-spacing: 2px; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.guide-col .row > b { color: var(--gold); text-shadow: 2px 2px 0 #000; }
.combo-row b { font: 400 22px var(--comic); letter-spacing: 1.5px; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.guide-col .arena-btn { font: 400 18px var(--comic); letter-spacing: .5px; border-radius: 0; background: var(--gold); color: var(--ink); box-shadow: 0 0 0 3px #000, 4px 5px 0 3px #000; }
.sheet.small.active { background: none; border-radius: 0; box-shadow: none; overflow: visible; }
.sheet.small header { background: none; border: 0; padding-top: 10px; }
.notice-body { color: var(--paper); text-shadow: 1px 1px 0 #000; }

/* ── 7. Loading: the logo on the burst with a pulsing bar ── */
#loading { isolation: isolate; background: #2A1640; }
#loading .loading-card { z-index: 1; }
#loading .loading-card img { filter: drop-shadow(4px 6px 0 #000); animation: panel-pop .6s cubic-bezier(.34,1.56,.64,1) both; }
#loading .bar { height: 12px; width: 240px; background: #000; padding: 2px; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); animation: breathe 1.2s ease-in-out infinite; }
#loading .bar i { clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); background: linear-gradient(90deg, #FFE66F, #F0BF57, #E86A2C); }
#loading p { font: 400 18px var(--comic); letter-spacing: 2px; color: var(--cream); text-shadow: 2px 2px 0 #000; }

/* ── 8. Share sheet and challenge: arcade panels, stamped titles, pulsing main buttons ── */
.share-box.arcade-panel { --cut: 18px; overflow: visible; padding: 18px 22px 20px; }
.share-sheet { background: rgba(9,11,15,.6); }
.share-sheet.active { animation: none; }
.share-box h2.stamp { font-size: 34px; line-height: 1; text-shadow: .0625em 0 0 #000, -.0625em 0 0 #000, 0 .0625em 0 #000, 0 -.0625em 0 #000, .0625em .0625em 0 #000, -.0625em -.0625em 0 #000, .0625em -.0625em 0 #000, -.0625em .0625em 0 #000, .083em .111em 0 #000; }
.share-preview, #challenge-card { border: 3px solid #000; box-shadow: 2.8px 4.2px 3.5px rgba(0,0,0,.32); rotate: -1deg; }
.share-name { text-shadow: 2px 2px 0 #000; }
.share-name input { border: 3px solid #000; box-shadow: 3px 4px 0 #000; }
.share-close { color: var(--gold); text-shadow: 2px 2px 0 #000; }
.challenge #challenge-line { text-shadow: 1px 1px 0 #000; }
.challenge .caption { text-shadow: 2px 2px 0 #000; }
.challenge .tag { align-self: center; }
/* Challenge title: big, with the shine (user: "Ana te provoaca! could have some nice effect"). */
#challenge-title { font-size: 40px; }

/* Phone held upright: the rotate screen is where a challenge link lands first. */
#rotate { isolation: isolate; background: #2A1640; }
#rotate > :not(.burst) { position: relative; z-index: 1; }
#rotate-challenge.stamp { font-size: 34px; }
#rotate b.stamp { font-size: 36px; }

/* Pause pops above the versus screen; nothing repaints under the rotate overlay. */
.pause-panel { z-index: 5; }
@media (orientation: portrait) and (max-width: 900px) { #ui .burst > i { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) {
  .burst > i, .arcade-panel, .stamp, .stamp::after, .pcard, .pulse, .stagger > *, .slot.active, .rung, .steps span.on, .guide-col,
  .vs-rays, #loading .bar, #loading .loading-card img, #select-title { animation: none !important; }
  .vs-flash { opacity: 0; }
}
/* The roster now has three rows (13 fighters): tighter tiles and gaps keep MAI DEPARTE and the links on screen. */
.select-column { gap: 8px; }
.slot .face, .slot .locked { height: 45px; }
.small .select-column { gap: 6px; }
.small .slot .face, .small .slot .locked { height: 33px; }
/* Short landscape phones: the stamped challenge title wraps; keep MENIUL JOCULUI on screen, and let a sheet scroll
   (auto margins centre the box but keep its top reachable) rather than cut a button off. */
.share-sheet { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; align-items: flex-start; }
.share-sheet > .share-box { margin: auto; }
.compact .share-box.arcade-panel { padding: 12px 18px 14px; row-gap: 6px; }
.compact #challenge-title, .compact .share-box h2.stamp { font-size: 29px; }
.compact .challenge .caption { font-size: 16px; }
.compact .challenge #challenge-line { font-size: 12.5px; }
.compact .share-actions .comic-btn { font-size: 15px; padding: 7px 16px; }
.compact .share-close { min-height: 30px; }

/* ── iPhone Safari in landscape (js/iosbar.js): a scrollable page so a swipe up minimises Safari's bars, then a lock ──
   The game layers stay fixed and follow the real visible height (--app-h); the pad below them gives the page room. */
html.ios-bar, html.ios-bar body { height: auto; min-height: 100%; overflow: visible; touch-action: pan-y; }
html.ios-bar body { position: relative; inset: auto; }
html.ios-bar #ui, html.ios-bar body > canvas, html.ios-bar #loading, html.ios-bar #rotate { position: fixed; top: 0; bottom: auto; height: var(--app-h, 100vh); }
#ios-pad { display: block; width: 1px; height: calc(100vh + 240px); pointer-events: none; visibility: hidden; }
html.ios-lock, html.ios-lock body { overflow: hidden; touch-action: none; }
.swipe-pill { position: fixed; z-index: 40; left: 50%; top: calc(12px + var(--st)); translate: -50% 0; display: flex; align-items: center; gap: 10px;
  padding: 7px 18px 7px 14px; background: #24182F; border: 3px solid #000; border-radius: 26px; box-shadow: 4px 6px 5px rgba(0,0,0,.32);
  font: 400 17px/1 var(--comic); letter-spacing: .5px; color: var(--gold); white-space: nowrap; touch-action: pan-y; pointer-events: auto;
  animation: panel-pop .45s cubic-bezier(.34,1.56,.64,1) both, breathe 2.42s ease-in-out .6s infinite; }
.swipe-pill b { font-weight: 400; text-shadow: 2px 2px 0 #000; }
.swipe-pill .arrow { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #24182F;
  font: 900 18px/1 var(--heavy); animation: swipe-up 1.2s ease-in-out infinite; }
.swipe-pill.home { top: calc(18px + var(--st)); font-size: 22px; padding: 10px 24px 10px 16px; }
.swipe-pill.home .arrow { width: 32px; height: 32px; font-size: 22px; }
@keyframes swipe-up { 0%, 100% { translate: 0 4px; } 50% { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .swipe-pill, .swipe-pill .arrow { animation: none; } }
/* Small landscape phones: a slightly slimmer info card leaves the 3D fighter more room. */
.small .name-card.arcade-panel { padding: 11px 28px 12px 14px; }   /* room for slanted values before the slanted gold line */
.small .strengths { gap: 2px; } .small .strength { width: 37px; }
.small .power-stats { grid-template-columns: 92px 92px; gap: 3px 8px; }

/* ── Guide: each card sizes to its own content (stretched to the visible height, the rows spilled out of the frames as
   the list scrolled); the list scrolls with momentum and does not hand the scroll on to the page (or Safari's bars). ── */
.guide-body { align-items: flex-start; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.guide-col { flex: 1 1 0; min-width: 0; }

/* ── Home: the column is anchored to a safe distance from the visible bottom, so COMENZI and the difficulty chips stay
   clear of Safari's bottom area and the home indicator; the chips get a 44 px tap area while looking the same. ── */
.home-column { top: auto; bottom: max(14px, calc(var(--sb) + 8px)); }
.home-row.bottom .small-card { min-height: 44px; padding-right: 18px; }   /* the last letter clears the slanted right edge */
.home-row.bottom .small-card::before { inset: 8px 0; }
.home-row.bottom .small-card::after { inset: 10px 2px; }
.levels button { height: 44px; }
.levels button::before { inset: 8px 0; }
.levels button::after { inset: 9px 1px; }
.difficulty { gap: 0; }
.difficulty > small { margin-bottom: -6px; }
/* Short screens (Safari's bars showing): a smaller logo and tighter rows keep the whole column on screen. */
@media (max-height: 370px) {
  .home-top .logo { height: 19vh; }
  .home-column { gap: 6px; }
  .home-hello strong { font-size: 27px; }
  .vs-cpu { height: 56px; }
  .home-row .card { height: 44px; }
}

/* Select screen: ÎNAPOI and COMENZI are comic chips in the top row, beside the RO badge. Each has a 44 px tap area; the
   drawn chip stays 28 px and negative margins keep the row's height, so the roster and MAI DEPARTE do not move. */
.badge-row { min-width: 0; }
.badge-row .tiny { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.badge-row .select-links { margin-left: auto; flex: none; display: flex; gap: 6px; font: inherit; color: var(--cream); }
.select-chip { min-height: 44px; margin-block: -12px; padding: 0 17px 0 11px; font-size: 13px; gap: 5px; }
.select-chip::before { inset: 8px 0; }
.select-chip::after { inset: 10px 2px; }
.select-chip .i { font-size: 12px; }
/* Very short screens (Safari's bars showing, height ≤ 370): tighter roster and title so MAI DEPARTE stays on screen. */
@media (max-height: 370px) {
  /* The portraits keep their height (a flatter frame would show only the top of the head); gaps and title give way. */
  .select-column { gap: 3px; padding-top: 12px; }
  #select-title { font-size: 25px; }
  .select-column .roster-note { display: none; }
}
/* Two-line ending titles: room between the lines so the second line's outline does not cover the comma under Ș. */
.ending-text .tower-title { line-height: 1.05; }
/* Champion screen after the final boss: his small card and a red stamped tag pop in at 1.1 s, then pulse gently. */
.ending-unlock { display: flex; align-items: center; gap: 10px; animation: panel-pop .5s cubic-bezier(.34,1.56,.64,1) 1.1s both, breathe 3.5s ease-in-out 1.7s infinite; }
.ending-unlock .pcard { width: 51px; height: 61px; --cut: 7px; --tilt: 4deg; animation: none; }
.ending-unlock .tag { font-size: 22px; letter-spacing: 1px; border: 3px solid #000; padding: 1px 10px; rotate: -4deg; clip-path: none; }
@media (prefers-reduced-motion: reduce) { .ending-unlock { animation: none; } }

/* ── Global leaderboard (js/leaderboard.js): CLASAMENT chip, end-screen button, submit panel and the CLASAMENT screen ── */
.home-chips { display: flex; gap: 8px; flex: none; }
.home-chips .small-card { padding-right: 18px; }
.ending-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ending-text .ending-actions .comic-btn { min-width: 0; }
.ending-text .ending-actions .comic-btn:not(.primary) { font-size: 17px; }
#arcade-board .i { width: 21px; height: 21px; }
.comic-btn[disabled] { opacity: .5; }
.comic-btn.danger { --fill: #D8352A; }
/* Not the share sheet's two-column landscape grid: one column, buttons side by side. */
#lb-submit .lb-box { display: flex; flex-direction: column; align-items: center; width: min(470px, 100%); }
#lb-submit .lb-box > * { grid-column: auto; grid-row: auto; }
#lb-submit .share-actions { flex-direction: row; align-items: center; width: auto; }
.lb-form, .lb-done { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.lb-form[hidden], .lb-done[hidden] { display: none; }
.lb-field > span { width: 66px; text-align: left; }
.lb-field input, .lb-field select { width: 210px; }
.lb-field select { padding: 6px 7px; border: 3px solid #000; box-shadow: 3px 4px 0 #000; background: var(--paper); color: var(--ink); font: 600 15px var(--heavy); border-radius: 0; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.lb-consent { display: flex; align-items: center; gap: 10px; max-width: 360px; text-align: left; cursor: pointer; }
.lb-consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lb-consent i { flex: none; position: relative; width: 44px; height: 24px; border: 3px solid #000; border-radius: 14px; background: rgba(255,240,205,.25); box-shadow: 2px 3px 0 #000; transition: background .15s; }
.lb-consent i::after { content: ''; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border: 2px solid #000; border-radius: 50%; background: var(--cream); transition: transform .15s; }
.lb-consent input:checked + i { background: var(--gold); }
.lb-consent input:checked + i::after { transform: translateX(20px); }
.lb-consent input:focus-visible + i { outline: 2px solid var(--cream); outline-offset: 2px; }
.lb-consent span { font: 700 10.5px/1.35 var(--heavy); color: rgba(255,240,205,.88); text-shadow: 1px 1px 0 #000; }
.lb-error { margin: 0; max-width: 380px; font: 800 12px/1.3 var(--heavy); color: #FF8A7A; text-shadow: 1px 1px 0 #000; }
.lb-rank { font: 400 38px/1 var(--comic); color: var(--cream); padding: 0 .15em; }
.lb-best { margin: 0; font: 400 18px var(--comic); color: var(--gold); letter-spacing: .5px; text-shadow: 2px 2px 0 #000; }
.lb-sheet .lb-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 8px calc(18px + var(--sr)) calc(8px + var(--sb)) calc(18px + var(--sl)); }
.lb-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.lb-top h2 { margin: 0; font: 400 36px/1 var(--comic); color: var(--gold); padding-right: .15em; }
.lb-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.lb-tabs button { --fill: var(--ink); position: relative; isolation: isolate; padding: 6px 13px; font: 400 15px var(--comic); color: var(--cream); letter-spacing: .4px; filter: drop-shadow(2px 3px 0 #000); }
.lb-tabs button::before, .lb-tabs button::after { content: ''; position: absolute; z-index: -1; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.lb-tabs button::before { inset: 0; background: #000; }
.lb-tabs button::after { inset: 2px; background: var(--fill); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.lb-tabs button.on { --fill: var(--gold); color: var(--ink); }
.lb-me { margin: 0; font: 400 16px var(--comic); color: var(--gold); letter-spacing: .5px; text-shadow: 2px 2px 0 #000; }
.lb-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; display: flex; flex-direction: column; gap: 6px; padding: 3px 6px 6px 3px; }
.lb-row { flex: none; display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 8px; background: rgba(20,12,30,.86); border: 2px solid #000; box-shadow: 3px 3px 0 rgba(0,0,0,.6); }
.lb-row.me { background: var(--violet); border: 3px solid var(--gold); }
.lb-pos { flex: none; width: 36px; text-align: center; font: 400 22px var(--comic); color: var(--cream); text-shadow: 2px 2px 0 #000; }
.lb-pos.top { color: var(--gold); }
.lb-face { flex: none; width: 30px; height: 36px; overflow: hidden; border: 2px solid #000; background: var(--ink); }
.lb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.lb-who b { align-self: flex-start; max-width: 100%; font: 400 19px/1.05 var(--comic); color: var(--cream); letter-spacing: .4px; white-space: nowrap; text-shadow: 2px 2px 0 #000; padding-right: .15em; }
.lb-who small { font: 700 10px var(--heavy); color: rgba(255,240,205,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-pts { flex: none; font: 400 22px var(--comic); color: var(--cream); letter-spacing: .4px; text-shadow: 2px 2px 0 #000; padding-right: .1em; }
.lb-empty { margin: auto; padding: 24px; text-align: center; font: 400 21px var(--comic); color: var(--cream); letter-spacing: .5px; text-shadow: 2px 2px 0 #000; }
.lb-note { margin: auto; padding: 24px; text-align: center; font: 800 13px var(--heavy); color: var(--cream); }
.lb-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; font: 600 10px var(--heavy); color: rgba(255,240,205,.62); }
.lb-foot > button { font: 800 11px var(--heavy); color: #FF8A7A; min-height: 30px; text-decoration: underline; text-underline-offset: 2px; }
.lb-confirm { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; background: rgba(20,12,30,.9); border: 2px solid #D8352A; color: var(--cream); font: 600 11px var(--heavy); }
.lb-confirm[hidden] { display: none; }
.lb-confirm span { flex: 1; min-width: 220px; }
.lb-confirm .comic-btn { font-size: 15px; padding: 6px 14px; }
.compact .lb-top h2 { font-size: 30px; }
.compact .lb-row { padding-block: 3px; }

/* Sheets are full arcade pages (user: the top bar and "Gata" were "completely out of style with the game"): no header bar, a gold slanted
   "ÎNCHIDE ✕" chip in the top-right corner (iOS ArcadeCloseButton), 44 px to tap, and the content moves up into the freed space. */
/* 44 px to tap; the visible slanted chip is 32 px tall (the shapes are inset, like the home chips). */
.close-chip { min-height: 44px; font-size: 17px; padding: 0 15px 0 14px; gap: 7px; rotate: -2deg; filter: drop-shadow(2px 4px 2px rgba(0,0,0,.45)); }
.close-chip b { font: 900 12px var(--heavy); }
.close-chip::before { inset: 6px 0; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.close-chip::after { inset: 9px 3px; clip-path: polygon(4.5px 0, 100% 0, calc(100% - 4.5px) 100%, 0 100%); }
.close-chip:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
#guide > .close-chip { position: absolute; z-index: 3; top: calc(8px + var(--st)); right: calc(14px + var(--sr)); }
#guide .guide-body { padding-top: 12px; }
#guide .guide-col + .guide-col { margin-top: 44px; }
#notice > .close-chip { position: absolute; z-index: 3; top: -12px; right: -8px; }
#notice .notice-body { padding-top: 16px; }
#notice .notice-body h2 { margin: 0 70px 8px 0; font: 400 28px/1 var(--comic); color: var(--gold); letter-spacing: .5px; padding-right: .15em; }
.lb-top .close-chip { flex: none; }
.lb-top .lb-tabs { margin-left: auto; }
.lb-sheet .lb-body { padding-top: calc(10px + var(--st)); }
/* Account sheet (js/account.js): Google's own sign-in button sits in a slanted gold arcade frame (its look is Google's to set). */
#account > .close-chip { position: absolute; z-index: 3; top: -12px; right: -8px; }
#account .notice-body { padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
#account .notice-body h2 { margin: 0 70px 0 0; font: 400 28px/1 var(--comic); color: var(--gold); letter-spacing: .5px; padding-right: .15em; }
#account-out, #account-in { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
#account-out[hidden], #account-in[hidden] { display: none; }
.google-frame { align-self: center; padding: 8px 12px; background: var(--gold); border: 3px solid #000; box-shadow: 4px 5px 0 #000; rotate: -1deg; min-height: 60px; min-width: 200px; display: grid; place-items: center; }
.google-frame:has(#google-button:empty) { display: none; }
.account-soon { font-weight: 700; color: var(--gold) !important; }
.account-hello { font: 400 26px/1.05 var(--comic); color: var(--cream); letter-spacing: .5px; text-shadow: 2px 2px 0 #000; padding-right: .15em; }
.account-delete { font: 800 11px var(--heavy); color: #FF8A7A; text-decoration: underline; text-underline-offset: 2px; min-height: 30px; }
#account .share-actions { flex-direction: row; align-items: center; width: auto; }