@font-face { font-family: Aktual; src: url(../assets/fonts/aktual-500.woff2) format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: Aktual; src: url(../assets/fonts/aktual-800.woff2) format('woff2'); font-weight: 700 800; font-display: swap; }
@font-face { font-family: Aktual; src: url(../assets/fonts/aktual-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }
:root { --y: #FFF600; --y2: #FFE600; --k: #050505; --g: #2BFF88; --r: #FF3B3B; --sk: -12deg; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; font-family: Aktual, 'Helvetica Neue', Arial, sans-serif; color: #fff; user-select: none; -webkit-user-select: none; }
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 50; }
#fade.on { opacity: 1; }

/* ---------- letterbox ---------- */
#lb { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.lb { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .45s cubic-bezier(.2,.8,.2,1); }
.lb.top { top: 0; } .lb.bot { bottom: 0; }
#lb.on .lb { height: 12vh; }
#cineTitle { position: absolute; left: 0; right: 0; bottom: 3.2vh; text-align: center; font-weight: 900; letter-spacing: .32em; font-size: 1.6vw; color: var(--y); opacity: 0; transition: opacity .4s; text-shadow: 0 0 18px rgba(255,246,0,.5); }
#cineTitle.on { opacity: 1; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.bars { position: absolute; top: 2.2vh; left: 2vw; right: 2vw; display: flex; align-items: flex-start; gap: 1.2vw; }
.side { flex: 1; display: flex; align-items: flex-start; gap: .8vw; }
.side.p2 { flex-direction: row; }
.barwrap { flex: 1; }
.bar { position: relative; height: 3.1vh; min-height: 22px; background: rgba(10,10,10,.85); border: 2px solid rgba(255,255,255,.9); transform: skewX(var(--sk)); overflow: hidden; box-shadow: 0 0 0 1px #000, 0 6px 24px rgba(0,0,0,.6); }
.p2 .bar { transform: skewX(calc(-1 * var(--sk))); }
.bar .fill, .bar .trail { position: absolute; top: 0; bottom: 0; right: 0; width: 100%; transition: width .08s linear; }
.p1 .bar .fill, .p1 .bar .trail { right: 0; left: auto; }
.p2 .bar .fill, .p2 .bar .trail { left: 0; right: auto; }
.bar .fill { background: linear-gradient(180deg, #fffb80 0%, var(--y) 38%, #d9cf00 100%); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.bar .fill.low { background: linear-gradient(180deg, #ff9a9a 0%, var(--r) 40%, #b81414 100%); animation: pulse .5s infinite alternate; }
.bar .trail { background: #ff2a2a; transition: width .6s cubic-bezier(.5,0,.8,.5) .35s; }
.bar .shine { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%); background-size: 300% 100%; animation: shine 3.5s linear infinite; mix-blend-mode: overlay; }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -150% 0; } }
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.5); } }
.sub { display: flex; gap: .6vw; margin-top: .5vh; }
.p1 .sub { justify-content: flex-end; } .p2 .sub { justify-content: flex-start; }
.heat, .rage { position: relative; height: 1.3vh; min-height: 9px; width: 34%; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.5); transform: skewX(var(--sk)); overflow: hidden; }
.heat b, .rage b { position: absolute; top: 50%; transform: translateY(-50%); font-size: max(.9vh,8px); letter-spacing: .2em; z-index: 2; color: #000; padding: 0 .4vw; mix-blend-mode: normal; text-shadow: 0 0 2px rgba(255,255,255,.6); }
.hfill { position: absolute; inset: 0; width: 100%; background: linear-gradient(90deg, #ffb800, var(--y)); }
.rfill { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, #ff3b3b, #ff9a3b); }
.rage.ready { box-shadow: 0 0 14px #ff2a2a; border-color: #ff6a6a; } .rage.ready .rfill { width: 100% !important; animation: pulse .35s infinite alternate; }
.heat.on .hfill { animation: pulse .25s infinite alternate; }
.nameplate { display: flex; align-items: center; gap: .6vw; margin-top: .6vh; font-weight: 900; font-size: 2.1vh; letter-spacing: .12em; text-shadow: 0 2px 8px #000; }
.p1 .nameplate { justify-content: flex-start; } .p2 .nameplate { justify-content: flex-end; }
.nameplate img { height: 2.6vh; border-radius: 3px; }
.nameplate .hpnum { font-weight: 800; font-size: 1.5vh; color: var(--y); opacity: .85; }
.tagslot { width: 5.2vh; height: 5.2vh; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); display: grid; place-items: center; font-weight: 900; color: rgba(255,255,255,.5); font-size: 1.6vh; background: rgba(0,0,0,.5); margin-top: -.4vh; }
.timer { width: 8vw; min-width: 80px; text-align: center; margin-top: -1vh; }
.timer .t { font-weight: 900; font-size: 5.6vh; line-height: 1; color: #fff; text-shadow: 0 0 14px rgba(255,246,0,.35), 0 3px 0 #000; }
.timer .rounds { display: flex; gap: 6px; justify-content: center; margin: .4vh 0; }
.timer .rounds i { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid #fff; display: block; }
.timer .rounds i.on { background: var(--y); border-color: var(--y); }
.timer .mode { font-size: 1.2vh; letter-spacing: .3em; color: var(--y); font-weight: 800; }
#combo { position: absolute; left: 3vw; top: 24vh; opacity: 0; transform: translateX(-30px) skewX(var(--sk)); transition: opacity .2s, transform .2s; }
#combo.on { opacity: 1; transform: translateX(0) skewX(var(--sk)); }
#combo .n { font-size: 9vh; font-weight: 900; line-height: .9; color: var(--y); text-shadow: 0 0 24px rgba(255,246,0,.45), 4px 4px 0 #000; }
#combo .l { font-size: 2.4vh; font-weight: 900; letter-spacing: .3em; }
#combo .d { font-size: 1.8vh; font-weight: 800; color: #fff; opacity: .85; margin-top: .4vh; letter-spacing: .12em; }
#combo.pop .n { animation: pop .18s ease-out; }
@keyframes pop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
#moveName { position: absolute; left: 50%; top: 13vh; transform: translateX(-50%); font-weight: 900; font-size: 2vh; letter-spacing: .25em; color: #fff; opacity: 0; transition: opacity .3s; text-shadow: 0 2px 10px #000; white-space: nowrap; }
#moveName.on { opacity: .95; } #moveName b { color: var(--y); }
#finalMode { position: absolute; left: 50%; top: 18vh; transform: translateX(-50%) skewX(var(--sk)); padding: .6vh 1.4vw; background: linear-gradient(90deg, rgba(43,255,136,.9), rgba(255,59,59,.9)); color: #000; font-weight: 900; letter-spacing: .3em; font-size: 2vh; opacity: 0; transition: opacity .2s; }
#finalMode small { font-size: 1.3vh; letter-spacing: .15em; margin-left: .6vw; }
#finalMode.on { opacity: 1; animation: pulse .3s infinite alternate; }
#inputLog { position: absolute; left: 1.6vw; bottom: 9vh; display: flex; flex-direction: column-reverse; gap: 2px; font-weight: 800; font-size: 1.6vh; }
#inputLog .row { display: flex; gap: 4px; align-items: center; background: rgba(0,0,0,.55); padding: 2px 8px; border-left: 3px solid var(--y); }
#inputLog .row .f { color: #888; width: 3ch; text-align: right; margin-right: 6px; font-weight: 500; }
.btn { display: inline-grid; place-items: center; min-width: 2.3vh; height: 2.3vh; padding: 0 .3vh; border-radius: 50%; font-weight: 900; font-size: 1.3vh; color: #000; background: var(--y); }
.btn.b2 { background: #fff; } .btn.b3 { background: #47d1ff; } .btn.b4 { background: #ff5ea8; }
.arr { display: inline-block; font-size: 1.9vh; color: #fff; width: 2.2vh; text-align: center; }
#frameData { position: absolute; right: 1.6vw; bottom: 9vh; width: 22vw; min-width: 250px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,246,0,.35); padding: 1.2vh 1vw; font-size: 1.5vh; font-weight: 500; line-height: 1.7; }
#frameData h4 { font-weight: 900; color: var(--y); letter-spacing: .12em; font-size: 1.6vh; margin-bottom: .4vh; }
#frameData .r { display: flex; justify-content: space-between; } #frameData .r span:last-child { font-weight: 800; }
#frameData .pos { color: var(--g); } #frameData .neg { color: var(--r); }
#hint { position: absolute; bottom: 2vh; left: 0; right: 0; text-align: center; font-size: 1.3vh; letter-spacing: .2em; color: rgba(255,255,255,.55); font-weight: 800; }
#dmgLayer { position: absolute; inset: 0; overflow: hidden; }
.dmg { position: absolute; font-weight: 900; font-size: 3vh; color: #fff; text-shadow: 0 0 10px rgba(255,246,0,.6), 2px 2px 0 #000; animation: dmgUp .9s ease-out forwards; transform: translate(-50%,-50%); white-space: nowrap; }
.dmg.big { font-size: 5.5vh; color: var(--y); }
@keyframes dmgUp { 0% { opacity: 0; transform: translate(-50%,-30%) scale(1.8); } 15% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-160%) scale(.9); } }
.pt { position: absolute; transform: translate(-50%,-50%) skewX(var(--sk)); font-weight: 900; letter-spacing: .14em; font-size: 2.2vh; padding: .3vh .8vw; background: #000; color: var(--y); border: 1px solid var(--y); animation: ptA 1s ease-out forwards; white-space: nowrap; }
.pt.big { font-size: 3.4vh; background: var(--y); color: #000; } .pt.small { font-size: 1.5vh; background: rgba(0,0,0,.7); color: #fff; border-color: rgba(255,255,255,.5); }
.pt.gb { background: var(--r); color: #fff; border-color: #fff; font-size: 2.6vh; }
@keyframes ptA { 0% { opacity: 0; margin-top: 10px; } 12% { opacity: 1; margin-top: 0; } 75% { opacity: 1; } 100% { opacity: 0; margin-top: -30px; } }
#liq { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; opacity: 0; transition: opacity .25s; pointer-events: none; }
#liq.on { opacity: 1; }
#liq .liqtxt { font-weight: 900; font-size: 13vw; line-height: .9; letter-spacing: -.02em; color: var(--r); transform: skewX(var(--sk)); text-shadow: 0 0 40px rgba(255,40,40,.6), 6px 6px 0 #000; }
#liq.on .liqtxt { animation: slam .5s cubic-bezier(.2,1.6,.4,1); }
#liq .liqsub { font-weight: 800; letter-spacing: .5em; font-size: 1.8vw; margin-top: 1vh; color: #fff; }
@keyframes slam { 0% { transform: skewX(var(--sk)) scale(3); opacity: 0; } 100% { transform: skewX(var(--sk)) scale(1); opacity: 1; } }
#announce { position: absolute; inset: 0; display: grid; place-content: center; pointer-events: none; }
#announce .a { font-weight: 900; font-size: 10vw; color: var(--y); transform: skewX(var(--sk)); text-shadow: 0 0 40px rgba(255,246,0,.5), 6px 6px 0 #000; animation: slam .45s cubic-bezier(.2,1.6,.4,1) both; text-align: center; line-height: .95; }
#announce .a small { display: block; font-size: 2.2vw; letter-spacing: .5em; color: #fff; }
#announce .a.final { font-size: 11vw; background: linear-gradient(90deg, #2BFF88, #fff 50%, #FF3B3B); -webkit-background-clip: text; background-clip: text; color: transparent; }
#announce .a.sl { color: var(--r); font-size: 9vw; }
#toast { position: absolute; left: 50%; bottom: 14vh; transform: translateX(-50%); z-index: 40; pointer-events: none; }
#toast .tm { background: rgba(0,0,0,.85); border: 1px solid var(--y); color: #fff; font-weight: 800; font-size: 1.6vh; letter-spacing: .12em; padding: 1vh 1.6vw; margin-top: .6vh; animation: ptA 2.2s ease-out forwards; transform: skewX(var(--sk)); }

/* ---------- screens ---------- */
#screens { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.screen { position: absolute; inset: 0; pointer-events: auto; opacity: 0; transition: opacity .35s; }
.screen.on { opacity: 1; }
.stripes { position: absolute; inset: 0; background: repeating-linear-gradient(-60deg, rgba(255,246,0,.035) 0 2px, transparent 2px 22px); pointer-events: none; }
.vign { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.85) 100%); pointer-events: none; }
/* boot */
#s-boot { background: #000; display: grid; place-items: center; }
#s-boot .bootbox { text-align: center; }
#s-boot .icon { width: 15vh; height: 15vh; margin: 0 auto 3vh; animation: bootIcon 1.1s cubic-bezier(.2,1.5,.4,1) both; box-shadow: 0 0 60px rgba(255,246,0,.35); }
#s-boot .wm { height: 7vh; animation: fadeUp 1s .5s both; }
#s-boot .presents { margin-top: 2vh; letter-spacing: .6em; font-weight: 800; font-size: 1.4vh; color: rgba(255,255,255,.6); animation: fadeUp 1s .9s both; }
#s-boot .load { width: 30vw; height: 3px; background: #222; margin: 5vh auto 2vh; overflow: hidden; }
#s-boot .load i { display: block; height: 100%; width: 0; background: var(--y); transition: width .2s; }
#s-boot .press { font-weight: 900; letter-spacing: .4em; font-size: 1.8vh; color: var(--y); opacity: 0; }
#s-boot .press.on { opacity: 1; animation: blink 1.1s infinite; }
#s-boot .note { position: absolute; bottom: 3vh; left: 0; right: 0; text-align: center; font-size: 1.2vh; color: rgba(255,255,255,.35); letter-spacing: .2em; }
@keyframes bootIcon { 0% { transform: scale(.2) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: .25; } }
/* intro overlay */
#s-intro { pointer-events: auto; }
#s-intro .sub { position: absolute; left: 0; right: 0; bottom: 15vh; text-align: center; font-weight: 900; font-size: 2.4vh; letter-spacing: .5em; color: #fff; text-shadow: 0 2px 12px #000; opacity: 0; transition: opacity .6s; }
#s-intro .sub.on { opacity: 1; }
#s-intro .skip { position: absolute; right: 2vw; bottom: 2vh; font-size: 1.3vh; letter-spacing: .25em; color: rgba(255,255,255,.55); font-weight: 800; }
.logoSlam { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; opacity: 0; pointer-events: none; }
.logoSlam.on { opacity: 1; }
.logoSlam .lk { transform: skewX(var(--sk)); }
.logoSlam img { height: 9vh; filter: drop-shadow(0 0 30px rgba(255,246,0,.5)); }
.logoSlam .tf { font-weight: 900; font-size: 11vw; line-height: .85; color: #fff; letter-spacing: -.01em; text-shadow: 0 0 50px rgba(255,246,0,.45), 8px 8px 0 #000; }
.logoSlam .tf span { color: var(--y); }
.logoSlam .b1 { font-weight: 800; letter-spacing: .7em; font-size: 1.8vh; color: var(--y); margin-top: 2vh; }
.logoSlam.on .lk { animation: logoHit .7s cubic-bezier(.15,1.6,.35,1) both; }
@keyframes logoHit { 0% { transform: skewX(var(--sk)) scale(4); opacity: 0; filter: blur(20px); } 60% { opacity: 1; filter: blur(0); } 100% { transform: skewX(var(--sk)) scale(1); } }
/* title */
#s-title .logoSlam { opacity: 1; place-content: start center; padding-top: 6vh; }
#s-title .logoSlam .tf { font-size: 8.5vw; }
#s-title .press { position: absolute; bottom: 16vh; left: 0; right: 0; text-align: center; font-weight: 900; letter-spacing: .6em; font-size: 2.4vh; color: #fff; animation: blink 1.2s infinite; }
#s-title .ver { position: absolute; bottom: 2vh; right: 2vw; font-size: 1.2vh; color: rgba(255,255,255,.4); letter-spacing: .2em; font-weight: 800; }
#s-title .copy { position: absolute; bottom: 2vh; left: 2vw; font-size: 1.2vh; color: rgba(255,255,255,.4); letter-spacing: .2em; font-weight: 800; }
/* menus */
.menuL { position: absolute; left: 6vw; top: 50%; transform: translateY(-50%); width: 34vw; min-width: 340px; }
.menuL h2, .panel h2 { font-weight: 900; font-size: 1.6vh; letter-spacing: .5em; color: var(--y); margin-bottom: 2.4vh; }
.mi { position: relative; display: flex; align-items: center; justify-content: space-between; height: 6.4vh; margin: .9vh 0; padding: 0 2vw; font-weight: 900; font-size: 3vh; letter-spacing: .08em; color: rgba(255,255,255,.75); background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.25)); border-left: 4px solid transparent; transform: skewX(var(--sk)); cursor: pointer; transition: all .14s; }
.mi > * { transform: skewX(calc(-1 * var(--sk))); }
.mi .tagc { font-size: 1.3vh; letter-spacing: .25em; color: rgba(255,255,255,.45); font-weight: 800; }
.mi.sel { color: #000; background: linear-gradient(90deg, var(--y), #fffb9a); border-left-color: #fff; padding-left: 2.8vw; box-shadow: 0 0 40px rgba(255,246,0,.25); }
.mi.sel .tagc { color: rgba(0,0,0,.6); }
.mi.sel > span:first-child { color: #000; }
.mi.locked { color: rgba(255,255,255,.35); }
.mi.locked.sel { background: linear-gradient(90deg, #6d6a2a, #4a4a2a); color: #fff; }
.desc { position: absolute; right: 5vw; bottom: 9vh; width: 30vw; min-width: 300px; padding: 2vh 1.6vw; background: rgba(0,0,0,.65); border-top: 3px solid var(--y); font-size: 1.7vh; line-height: 1.6; font-weight: 500; color: rgba(255,255,255,.85); }
.desc b { color: var(--y); letter-spacing: .1em; font-weight: 900; display: block; margin-bottom: .6vh; font-size: 2vh; }
.foot { position: absolute; bottom: 2.4vh; left: 6vw; right: 5vw; display: flex; gap: 2.4vw; font-size: 1.4vh; letter-spacing: .2em; color: rgba(255,255,255,.6); font-weight: 800; }
.foot .k { color: #000; background: var(--y); padding: .1vh .6vh; margin-right: .5vw; border-radius: 3px; }
.head { position: absolute; top: 4vh; left: 6vw; right: 5vw; display: flex; justify-content: space-between; align-items: center; }
.head .tt { font-weight: 900; font-size: 4vh; letter-spacing: .05em; transform: skewX(var(--sk)); }
.head .tt span { color: var(--y); }
.head img { height: 3.2vh; opacity: .9; }
/* select */
#s-select .grid { position: absolute; left: 6vw; bottom: 12vh; display: grid; grid-template-columns: repeat(4, 11vh); gap: 1.2vh; }
.cell { width: 11vh; height: 13vh; background: rgba(15,15,15,.85); border: 2px solid rgba(255,255,255,.2); transform: skewX(var(--sk)); display: grid; place-items: center; overflow: hidden; position: relative; }
.cell img { width: 140%; transform: skewX(calc(-1 * var(--sk))); }
.cell .q { font-weight: 900; font-size: 5vh; color: rgba(255,255,255,.18); transform: skewX(calc(-1 * var(--sk))); }
.cell .cs { position: absolute; bottom: .4vh; left: 0; right: 0; text-align: center; font-size: .95vh; letter-spacing: .15em; color: rgba(255,255,255,.4); font-weight: 800; transform: skewX(calc(-1 * var(--sk))); }
.cell.sel { border-color: var(--y); box-shadow: 0 0 28px rgba(255,246,0,.5), inset 0 0 0 2px var(--y); }
.cell.sel.locked { border-color: #888; box-shadow: none; }
#s-select .bio { position: absolute; right: 5vw; top: 16vh; width: 32vw; min-width: 320px; }
#s-select .bio .nm { font-weight: 900; font-size: 9vh; line-height: .9; color: var(--y); transform: skewX(var(--sk)); text-shadow: 6px 6px 0 #000; }
#s-select .bio .tl { font-weight: 800; letter-spacing: .4em; font-size: 1.5vh; margin: 1.6vh 0 3vh; color: #fff; }
.stat { display: flex; align-items: center; gap: 1vw; margin: 1vh 0; font-weight: 800; font-size: 1.4vh; letter-spacing: .2em; }
.stat span { width: 8vw; } .stat i { flex: 1; height: 1vh; background: rgba(255,255,255,.12); transform: skewX(var(--sk)); position: relative; }
.stat i b { position: absolute; inset: 0; background: var(--y); }
#s-select .p1tag { position: absolute; left: 6vw; top: 14vh; font-weight: 900; font-size: 2vh; letter-spacing: .4em; color: #000; background: var(--y); padding: .5vh 1vw; transform: skewX(var(--sk)); }
/* vs */
#s-vs { background: #000; overflow: hidden; }
#s-vs .half { position: absolute; top: 0; bottom: 0; width: 56%; overflow: hidden; }
#s-vs .half.l { left: -3%; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); background: radial-gradient(circle at 40% 40%, #3c3a00, #0a0a00 70%); animation: inL .5s cubic-bezier(.2,1,.3,1) both; }
#s-vs .half.r { right: -3%; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); background: radial-gradient(circle at 60% 40%, #3a0d0d, #0a0000 70%); animation: inR .5s cubic-bezier(.2,1,.3,1) both; }
#s-vs .half img { position: absolute; bottom: 0; height: 100%; left: 50%; transform: translateX(-50%); }
#s-vs .half .n { position: absolute; bottom: 8vh; font-weight: 900; font-size: 8vh; transform: skewX(var(--sk)); text-shadow: 6px 6px 0 #000; }
#s-vs .half.l .n { left: 8vw; color: var(--y); } #s-vs .half.r .n { right: 8vw; color: #fff; }
#s-vs .vs { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%) skewX(var(--sk)); font-weight: 900; font-size: 18vh; color: #fff; text-shadow: 0 0 40px var(--y), 8px 8px 0 #000; animation: slam .5s .35s cubic-bezier(.2,1.6,.4,1) both; }
#s-vs .stage { position: absolute; left: 0; right: 0; bottom: 3vh; text-align: center; font-weight: 800; letter-spacing: .5em; font-size: 1.5vh; color: var(--y); }
#s-vs .tip { position: absolute; left: 0; right: 0; top: 4vh; text-align: center; font-weight: 500; font-size: 1.6vh; color: rgba(255,255,255,.7); letter-spacing: .1em; }
@keyframes inL { from { transform: translateX(-60%); } to { transform: none; } }
@keyframes inR { from { transform: translateX(60%); } to { transform: none; } }
/* panels (pause/options/movelist) */
.panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(1100px, 88vw); max-height: 86vh; background: rgba(5,5,5,.92); border: 1px solid rgba(255,246,0,.4); border-top: 4px solid var(--y); padding: 3vh 2.4vw; overflow: auto; }
.panel::-webkit-scrollbar { width: 6px; } .panel::-webkit-scrollbar-thumb { background: var(--y); }
.opt { display: flex; align-items: center; justify-content: space-between; padding: 1.1vh 1vw; margin: .3vh 0; font-weight: 800; font-size: 1.8vh; letter-spacing: .08em; border-left: 3px solid transparent; cursor: pointer; }
.opt .v { color: var(--y); font-weight: 900; min-width: 12vw; text-align: right; }
.opt .v:before { content: '◀  '; opacity: .5; } .opt .v:after { content: '  ▶'; opacity: .5; }
.opt.act .v:before, .opt.act .v:after { content: ''; }
.opt.sel { background: rgba(255,246,0,.12); border-left-color: var(--y); }
.opt.wait .v { animation: blink .6s infinite; }
.ml-cat { font-weight: 900; font-size: 1.5vh; letter-spacing: .4em; color: var(--y); margin: 2.4vh 0 .8vh; }
.ml { display: grid; grid-template-columns: 1.4fr 1.3fr .55fr .55fr .6fr .6fr; gap: .6vw; align-items: center; padding: .7vh .6vw; font-size: 1.55vh; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.07); }
.ml.h { font-weight: 900; color: rgba(255,255,255,.5); font-size: 1.2vh; letter-spacing: .2em; border: 0; }
.ml .nm { font-weight: 800; } .ml .cmd { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.ml .pl { color: rgba(255,255,255,.4); font-size: 1.2vh; }
.ml.sel { background: rgba(255,246,0,.1); }
.ml .tag { font-size: 1vh; letter-spacing: .15em; background: var(--r); color: #fff; padding: 1px 5px; margin-left: 6px; font-weight: 900; }
.ml .tag.y { background: var(--y); color: #000; }
.ctrlNote { margin-top: 2vh; font-size: 1.4vh; color: rgba(255,255,255,.6); line-height: 1.7; }
.heat{display:none!important}
.cell .cn { position: absolute; bottom: .3vh; left: 0; right: 0; text-align: center; font-size: 1.05vh; letter-spacing: .18em; color: #fff; font-weight: 900; text-shadow: 0 1px 4px #000; transform: skewX(calc(-1 * var(--sk))); }
.cell.sel .cn { color: var(--y); }

/* ---- tag team (Practice: Banger + Castro) ---- */
.team { display: flex; flex-direction: column; align-items: center; gap: .5vh; margin-top: -.6vh; }
.team .tp { position: relative; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,.35); background: #000; transition: all .25s; }
.team .tp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team .tp b { position: absolute; left: 0; right: 0; bottom: 0; font-size: max(.8vh,7px); letter-spacing: .12em; text-align: center; background: rgba(0,0,0,.7); color: #fff; padding: 1px 0; }
.team .tp.act { width: 6.4vh; height: 6.4vh; border-color: var(--y); box-shadow: 0 0 14px rgba(255,246,0,.6); }
.team .tp.ptn { width: 4.2vh; height: 4.2vh; filter: saturate(.55) brightness(.75); }
.team .tp.swap { animation: tpSwap .35s ease-out; }
@keyframes tpSwap { 0% { transform: scale(1.35); box-shadow: 0 0 30px #fff600; } 100% { transform: scale(1); } }
.pbar { display: flex; align-items: center; gap: .5vw; margin-top: .5vh; justify-content: flex-start; }
.pbar .pnm { font-weight: 900; font-size: 1.3vh; letter-spacing: .14em; color: rgba(255,255,255,.75); min-width: 7ch; }
.pbar .pb { position: relative; width: 40%; height: .9vh; min-height: 6px; background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.4); transform: skewX(var(--sk)); overflow: hidden; }
.pbar .pfill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(180deg, #fffb80, var(--y)); opacity: .8; }
.pbar .php { font-weight: 800; font-size: 1.2vh; color: var(--y); opacity: .7; }
#tagInd { margin-left: .8vw; display: flex; align-items: center; gap: .35vw; font-weight: 900; font-size: 1.4vh; letter-spacing: .2em; color: #000; background: var(--y); padding: .25vh .7vw .25vh .3vw; transform: skewX(var(--sk)); transition: all .15s; box-shadow: 0 0 10px rgba(255,246,0,.5); }
#tagInd .k { display: inline-grid; place-items: center; min-width: 2vh; height: 2vh; background: #000; color: var(--y); border-radius: 3px; font-size: 1.2vh; letter-spacing: 0; padding: 0 .2vw; }
#tagInd.off { background: rgba(120,120,120,.55); color: rgba(255,255,255,.55); box-shadow: none; }
#tagInd.off .k { color: rgba(255,255,255,.5); }
#tagInd.go { animation: pulse .2s 3 alternate; }
#tagFlash { position: absolute; left: 50%; top: 30vh; transform: translateX(-50%) skewX(var(--sk)); font-weight: 900; font-size: 4.2vh; letter-spacing: .3em; color: var(--y); text-shadow: 0 0 22px rgba(255,246,0,.7), 3px 3px 0 #000; opacity: 0; pointer-events: none; }
#tagFlash.on { animation: tagF .7s ease-out; }
@keyframes tagF { 0% { opacity: 0; transform: translateX(-50%) skewX(var(--sk)) scale(1.6); } 20% { opacity: 1; transform: translateX(-50%) skewX(var(--sk)) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
.team .tp b { display: none; }
.pbar { background: rgba(0,0,0,.55); padding: .35vh .6vw; width: fit-content; border-left: 3px solid rgba(255,246,0,.6); }
.pbar .pb { width: 14vw; min-width: 90px; }
#tagInd { font-size: 1.7vh; padding: .35vh .9vw .35vh .35vw; margin-left: 1vw; }
#tagInd .k { min-width: 2.4vh; height: 2.4vh; font-size: 1.5vh; }
.pbar .php { min-width: 4.5ch; } #tagInd { flex-shrink: 0; margin-left: 1.4vw; }

/* final fizzle banner (80% miss path) */
#announce .a.reject { font-size: 8vw; color: #FF3B3B; text-shadow: 0 0 18px rgba(255,59,59,.55), 3px 3px 0 #000; letter-spacing: .06em; }
#announce .a.reject small { display: block; font-size: 1.6vw; letter-spacing: .3em; color: #fff; text-shadow: 2px 2px 0 #000; margin-top: .4em; }

/* Ghost final: BANNED stamp */
#announce .a.banned { font-size: 11vw; color: #FF3B3B; letter-spacing: .08em; border: .12em solid #FF3B3B; padding: 0 .25em; transform: rotate(-9deg) scale(1); display: inline-block; text-shadow: 0 0 22px rgba(255,59,59,.6), 4px 4px 0 #000; box-shadow: 0 0 30px rgba(255,59,59,.45), inset 0 0 18px rgba(255,59,59,.3); animation: gban .32s cubic-bezier(.2,1.6,.4,1) both; background: rgba(10,0,0,.25); }
#announce .a.banned small { display: block; font-size: 1.5vw; letter-spacing: .28em; color: #fff; text-shadow: 2px 2px 0 #000; margin: .2em 0 .3em; }
@keyframes gban { from { transform: rotate(-9deg) scale(2.6); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }