/* COURTROOM DUEL — versus fighting-game. Blue corner vs red corner. */
.vs{--bl:#2B5BFF;--rd:#FF3D3D;--yel:#FFD93B;--ink:#fff;background:#05071F;color:#fff;font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700}
.vs #app{background:linear-gradient(105deg,#1237B8 0 49.5%,#fff 49.5% 50.5%,#B3121F 50.5%);}
.vs #app:before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(0,0,0,.28) 1.4px,transparent 1.6px) 0 0/9px 9px;opacity:.5;pointer-events:none}
.vs #app:after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent,rgba(0,0,0,.65));pointer-events:none}
.vs .screen{animation:fade .25s both;z-index:2}
.vs h1,.vs .bang{font-family:'Bangers',Impact,sans-serif;font-weight:400;letter-spacing:.04em}
.vs .ib{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;font-size:18px;border:2px solid rgba(255,255,255,.5)}
.vs .btn{display:inline-flex;justify-content:center;align-items:center;font-family:'Bangers';font-size:30px;letter-spacing:.06em;padding:12px 24px;background:var(--yel);color:#1B1200;border:3px solid #000;border-radius:6px;box-shadow:5px 5px 0 #000;transform:skew(-6deg);transition:transform .08s}
.vs .btn:active{transform:skew(-6deg) translate(4px,4px);box-shadow:1px 1px 0 #000}
.vs .btn.ghost{background:rgba(0,0,0,.5);color:#fff;font-size:22px;border-color:#fff;box-shadow:none}
/* title */
.vt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.vt .fi{display:flex;align-items:flex-end;gap:6px;font-size:92px;line-height:1}
.vt .fi span:first-child{transform:scaleX(-1)}.vt .vsb{font-size:54px;color:var(--yel);-webkit-text-stroke:3px #000;text-shadow:4px 4px 0 #000;margin-bottom:12px;transform:rotate(-8deg)}
.vt h1{font-size:60px;line-height:.9;color:#fff;-webkit-text-stroke:3px #000;text-shadow:5px 5px 0 #000;transform:rotate(-2deg)}
.vt p{max-width:290px;margin:0;font-size:19px;line-height:1.2;text-shadow:0 2px 0 #000}
.vt ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:18px;text-shadow:0 2px 0 #000;text-align:left}
.vt ol b{color:var(--yel);font-family:'Bangers';font-size:20px;margin-right:6px}
/* hud */
.vh{display:flex;align-items:center;gap:8px}
.vh .mid{flex:1;text-align:center;line-height:1}.vh .mid b{font-family:'Bangers';font-size:20px;letter-spacing:.08em;color:var(--yel);-webkit-text-stroke:1px #000;text-shadow:2px 2px 0 #000}.vh .mid small{display:block;font-size:12px;letter-spacing:.16em;opacity:.85}
.hp{display:flex;gap:8px;margin:12px 0 0;align-items:center}
.hp .nm{font-family:'Bangers';font-size:18px;width:72px;line-height:1;text-shadow:2px 2px 0 #000;letter-spacing:.04em}.hp .nm.r{text-align:right}
.bar{flex:1;height:22px;background:#000;border:3px solid #fff;transform:skew(-14deg);overflow:hidden;position:relative}
.bar i{display:block;height:100%;width:100%;background:linear-gradient(#FFE86B,#FFB020);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar.r{transform:skew(14deg)}.bar.r i{margin-left:auto}
.bar i.low{background:linear-gradient(#FF7A6B,#E01E1E)}
.arena{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.dh{text-align:center;margin:10px 0 0;font-size:15px;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 0 #000}
.dh h2{font-family:'Bangers';font-weight:400;letter-spacing:.05em;font-size:28px;text-transform:none;color:#fff;-webkit-text-stroke:1px #000;text-shadow:3px 3px 0 #000;margin:0}
.fighters{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:end;padding:6px 0 0;position:relative}
.side{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;min-width:0}
.say{background:#fff;color:#111;border:3px solid #000;border-radius:14px;padding:8px 10px;font-size:16.5px;line-height:1.15;font-weight:700;position:relative;box-shadow:3px 3px 0 #000;max-width:100%;animation:in .3s both}
.say:after{content:"";position:absolute;bottom:-12px;left:50%;margin-left:-8px;border:8px solid transparent;border-top-color:#000;border-bottom:0}
.say.ans{background:var(--yel)}.say small{display:block;font-family:'Bangers';letter-spacing:.06em;font-size:13px;opacity:.7}
@keyframes in{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.av{font-size:84px;line-height:1;filter:drop-shadow(0 8px 0 rgba(0,0,0,.5));transition:transform .2s;position:relative}
.side.L .av{transform:scaleX(-1)}.side.L.hit .av{animation:hitl .5s}.side.R.hit .av{animation:hitr .5s}
@keyframes hitl{20%{transform:scaleX(-1) translateX(14px) rotate(8deg);filter:brightness(2) drop-shadow(0 8px 0 rgba(0,0,0,.5))}50%{transform:scaleX(-1) translateX(-6px)}}
@keyframes hitr{20%{transform:translateX(14px) rotate(8deg);filter:brightness(2) drop-shadow(0 8px 0 rgba(0,0,0,.5))}50%{transform:translateX(-6px)}}
.side.ko .av{animation:ko 1s forwards}.side.L.ko .av{animation-name:kol}
@keyframes ko{to{transform:rotate(95deg) translateY(30px);opacity:.45;filter:grayscale(1)}}@keyframes kol{to{transform:scaleX(-1) rotate(95deg) translateY(30px);opacity:.45;filter:grayscale(1)}}
.side.win .av{animation:jump .5s ease-out 2}.side.L.win .av{animation-name:jumpl}
@keyframes jump{50%{transform:translateY(-22px)}}@keyframes jumpl{50%{transform:scaleX(-1) translateY(-22px)}}
.fx{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) rotate(-8deg);font-family:'Bangers';font-size:50px;color:var(--yel);-webkit-text-stroke:3px #000;text-shadow:4px 4px 0 #000;white-space:nowrap;z-index:6;pointer-events:none;animation:fxp 1.2s ease-out both}
.fx.ko{font-size:84px;color:#fff;-webkit-text-stroke:4px #E01E1E;text-shadow:5px 5px 0 #000}
@keyframes fxp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(3)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) rotate(-8deg) scale(1)}}
.cmd{background:rgba(0,0,0,.72);border:3px solid #fff;border-radius:10px;padding:10px;margin-top:8px}
.cmd h4{margin:0 0 6px;font-family:'Bangers';font-weight:400;font-size:18px;letter-spacing:.1em;color:var(--yel)}
.qopt{display:flex;gap:8px;align-items:center;width:100%;text-align:left;padding:9px 10px;margin-bottom:5px;border-radius:6px;background:rgba(255,255,255,.1);font-size:17px;line-height:1.1;border-left:5px solid var(--c)}
.qopt:before{content:"▶";color:var(--c);font-size:13px}.qopt .who{color:var(--c);font-weight:800;filter:brightness(1.5)}
.qopt:active{background:rgba(255,255,255,.28)}
.judge{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.jb{font-family:'Bangers';font-size:22px;letter-spacing:.05em;padding:12px 6px;border:3px solid #000;border-radius:6px;box-shadow:4px 4px 0 #000;color:#fff;transform:skew(-5deg);display:flex;flex-direction:column;align-items:center;line-height:1}
.jb .e{font-size:30px;margin-bottom:2px}.jb.L{background:var(--bl)}.jb.R{background:var(--rd)}
.jb:active{transform:skew(-5deg) translate(3px,3px);box-shadow:1px 1px 0 #000}
/* reveal */
.rv{position:absolute;left:0;right:0;bottom:0;z-index:20;background:#fff;color:#111;border-top:5px solid #000;padding:14px 16px calc(env(safe-area-inset-bottom) + 14px);animation:up .3s cubic-bezier(.2,1.1,.3,1) both}
.rv .hd{display:flex;align-items:center;gap:10px;margin-bottom:4px}.rv .hd b{font-family:'Bangers';font-size:30px;font-weight:400;letter-spacing:.05em;color:#1E9E56}.rv.bad .hd b{color:#E01E1E}.rv .hd span{margin-left:auto;font-family:'Bangers';font-size:26px;color:#000;background:var(--yel);padding:0 10px;border:3px solid #000;transform:rotate(3deg)}
.rv p{margin:6px 0;font-size:18px;line-height:1.2}.rv .why{font-size:16px;opacity:.75}
.rv .chip{display:inline-block;background:#111;color:#fff;padding:4px 10px;border-radius:4px;font-size:15px;margin:4px 0}.rv .q{background:#EEE;border-left:5px solid #000;padding:8px 10px;font-size:15px;font-weight:600;margin:6px 0}
.rv .btn{width:100%;margin-top:6px}
.over{align-items:center;text-align:center;gap:10px;justify-content:center}.over h1{font-size:60px;color:var(--yel);-webkit-text-stroke:3px #000;text-shadow:5px 5px 0 #000}
.over .big{font-family:'Bangers';font-size:84px;line-height:1;-webkit-text-stroke:3px #000;text-shadow:5px 5px 0 #000}
.over .row{display:flex;gap:10px;width:100%;margin:6px 0}.over .row div{flex:1;background:rgba(0,0,0,.6);border:3px solid #fff;border-radius:8px;padding:8px}.over .row b{display:block;font-family:'Bangers';font-size:30px;color:var(--yel);font-weight:400}.over .row small{font-size:13px;letter-spacing:.1em}
.over .acts{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:10px}
.vs.shake #app{animation:shk .3s}@keyframes shk{25%{transform:translate(-5px,2px)}50%{transform:translate(5px,-2px)}75%{transform:translate(-3px,1px)}}
@media (max-height:700px){.av{font-size:62px}.say{font-size:14.5px;padding:6px 8px}.qopt{font-size:15px;padding:7px 8px}}