/* Connected-tools test build: network read-out, blocked hits, combo link counts and the side-by-side demo. */
.network{display:flex;align-items:center;gap:10px;margin-top:2px;padding:6px 10px 6px 6px;border-radius:10px;background:rgba(8,11,30,.55);border:1px solid rgba(184,198,255,.14);width:max-content}
.net-tools{display:flex;gap:5px}
.net-tools img{width:26px;height:26px;object-fit:contain;background:#fff8ec;border-radius:6px;padding:3px;opacity:.22;filter:grayscale(1);transition:opacity .15s,filter .15s,transform .15s,box-shadow .15s}
.net-tools img.on{opacity:1;filter:none;transform:translateY(-2px);box-shadow:0 0 0 2px #ffd071,0 0 14px rgba(255,208,113,.6)}
#net-mult{font:900 24px/1 Satoshi,sans-serif;color:#c7cde0;min-width:52px;text-align:center}
#net-text{font-size:11px;letter-spacing:.14em;color:#aeb8d2;font-weight:600}
.network.hot #net-mult{color:#ffd071;text-shadow:0 0 18px rgba(255,208,113,.6)}
.network.blocked #net-mult{color:#ff9d8a;font-size:15px;letter-spacing:.08em}
.move-flash em{font:700 13px/1 Rubik,sans-serif;font-style:normal;letter-spacing:.12em;padding:6px 9px;border-radius:6px;margin-left:6px}
.move-flash em.blocked{background:rgba(255,120,100,.18);color:#ffb3a6;border:1px solid rgba(255,140,120,.45)}
.move-flash em.linked{background:rgba(255,208,113,.16);color:#ffe0a0;border:1px solid rgba(255,208,113,.5)}
.dmg.chip{font-size:24px;color:#aab3cc;text-shadow:0 2px 0 #222a44}
.dmg.mid{font-size:58px;color:#ffe0a0}
.score-hud em{display:block;font-style:normal;font-size:12px;letter-spacing:.16em;color:#9ff0c6;margin-top:4px;font-weight:600}
.combo .combo-net{display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.1em;color:#ffd99a;background:rgba(255,208,113,.1);border:1px solid rgba(255,208,113,.3);border-radius:5px;padding:3px 7px}
.versus-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 16px;border-radius:12px;border:1px solid rgba(255,208,113,.6);background:linear-gradient(180deg,rgba(80,58,40,.9),rgba(46,32,40,.9));color:#ffe9c0;font-weight:600;font-size:15px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.versus-btn:hover{background:linear-gradient(180deg,rgba(110,78,48,.95),rgba(60,40,46,.95))}
.versus-btn span{color:#ffd071}.versus-btn kbd{font:inherit;color:#ffd071;opacity:.75;margin-left:4px}
.embedded .combo-book{gap:14px}.embedded .combo{padding:14px 18px}.embedded .combo small{font-size:12px}

/* The overlay with two live lanes. */
.versus{position:fixed;inset:0;z-index:40;display:grid;grid-template-rows:auto minmax(0,1fr) 6px;gap:14px;padding:20px 28px 22px;background:radial-gradient(120% 90% at 50% 0%,#1b1d4a,#070918 70%)}
.versus[hidden]{display:none}
.vs-head{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between}
.vs-head h2{font:900 40px/1 Satoshi,sans-serif;margin:0;letter-spacing:-.02em}
.vs-head h2 span{color:#ffd071;font-size:28px;margin:0 8px;vertical-align:middle}
.vs-head button,.vs-result button{color:#16213a;background:#f1c375;border:0;border-radius:9px;padding:11px 16px;font-weight:600;font-size:15px}
.vs-head kbd{font:inherit;opacity:.65;margin-left:6px}
.vs-lanes{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;min-height:0}
.vs-lane{position:relative;border-radius:14px;overflow:hidden;border:2px solid rgba(184,198,255,.18);background:#070918;min-height:0}
.vs-lane.solo{border-color:rgba(255,140,120,.45)}.vs-lane.connected{border-color:rgba(255,208,113,.6)}
.vs-lane iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vs-label{position:absolute;left:16px;top:14px;z-index:2;pointer-events:none}
.vs-label b{display:block;font:900 30px/1 Satoshi,sans-serif;letter-spacing:.02em;text-shadow:0 3px 18px rgba(0,0,0,.8)}
.vs-lane.solo .vs-label b{color:#ffb3a6}.vs-lane.connected .vs-label b{color:#ffd071}
.vs-label span{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:14px;color:#dfe4f3;text-shadow:0 2px 8px #000}
.vs-label img{width:22px;height:22px;object-fit:contain;background:#fff8ec;border-radius:5px;padding:2px}
.vs-count{position:absolute;right:16px;bottom:14px;z-index:2;text-align:right;pointer-events:none}
.vs-count b{display:block;font:900 64px/1 Satoshi,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 4px 22px rgba(0,0,0,.8)}
.vs-lane.solo .vs-count b{color:#ffb3a6}.vs-lane.connected .vs-count b{color:#9ff0c6}
.vs-count span{font-size:12px;letter-spacing:.18em;color:#dfe4f3}
.vs-count small{display:block;font-size:12px;color:#aab3cc;margin-top:4px}
.vs-badge{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#0e1034;border:3px solid #ffd071;font:900 30px/1 Satoshi,sans-serif;color:#ffd071;box-shadow:0 0 40px rgba(255,208,113,.35)}
.vs-timer{background:rgba(57,69,104,.6);border-radius:3px;overflow:hidden}
.vs-timer i{display:block;height:100%;background:linear-gradient(90deg,#ffb3a6,#ffd071,#9ff0c6);transform-origin:left;transform:scaleX(0)}
.versus.running .vs-timer i{animation:vs-timer 11s linear forwards}
.vs-result{position:absolute;inset:0;z-index:5;display:none;place-content:center;justify-items:center;gap:18px;text-align:center;background:rgba(7,9,24,.86)}
.versus.done .vs-result{display:grid;animation:vs-in .4s ease-out both}
.vs-bars{display:grid;gap:16px;width:min(900px,80vw)}
.vs-bar{display:grid;grid-template-columns:150px 1fr 90px;align-items:center;gap:16px;font-size:18px;font-weight:600;text-align:left}
.vs-bar i{display:block;height:36px;border-radius:8px;width:var(--w,0%);min-width:6px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.vs-bar.solo i{background:linear-gradient(90deg,#ff8a7a,#ffb3a6)}.vs-bar.connected i{background:linear-gradient(90deg,#ffd071,#9ff0c6)}
.vs-bar b{font:900 40px/1 Satoshi,sans-serif;font-variant-numeric:tabular-nums}
.vs-result strong{font:900 64px/1 Satoshi,sans-serif;color:#ffd071;letter-spacing:-.02em;text-shadow:0 5px 0 #5b2139}
.vs-result p{margin:0;font-size:18px;color:#dfe4f3}
@keyframes vs-timer{to{transform:scaleX(1)}}
@keyframes vs-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}

/* Inside a lane: just the fight, the backlog bar and the network. */
html.versus-child,html.versus-child body{height:100%;overflow:hidden;background:#070918}
html.versus-child{--overlay:1;--book:0px}
html.versus-child .arcade{height:100vh;min-height:0;overflow:hidden;display:grid;grid-template-columns:14px minmax(0,1fr) 14px;grid-template-rows:64px auto minmax(0,1fr) 10px;padding:0}
html.versus-child .stage{grid-area:1/1/-1/-1;aspect-ratio:auto;max-height:none}
html.versus-child .scoreboard{grid-area:2/2/3/3;grid-template-columns:1fr auto 1.2fr;gap:12px}
html.versus-child .fight-area{grid-area:3/2/4/3}
html.versus-child .masthead,html.versus-child .combo-book,html.versus-child .action-bar,html.versus-child footer,html.versus-child .stage-title,html.versus-child .input-hud,html.versus-child .score-hud,html.versus-child .announcer,html.versus-child .round{display:none}
html.versus-child .player-name,html.versus-child .enemy-name{font-size:14px}
html.versus-child .chain{display:none}
html.versus-child .network{transform:scale(.9);transform-origin:left top}
html.versus-child .move-flash{font-size:20px;top:auto;bottom:16px}
html.versus-child .combo-flash{font-size:40px;top:6%}
html.versus-child .combo-flash small{display:none}
html.versus-child .stage::after{background:linear-gradient(180deg,rgba(5,7,20,.8) 0,rgba(5,7,20,0) 30%)}
html.versus-child .dmg{font-size:32px}html.versus-child .dmg.big{font-size:52px}

/* Combo breakdown: what each tool did, in order, and what is true afterwards. */
.combo-panel{position:absolute;left:50%;top:3%;width:min(1180px,96%);transform:translateX(-50%) translateY(-14px);opacity:0;pointer-events:none;
 padding:16px 20px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(18,20,54,.92),rgba(10,12,34,.88));border:1px solid rgba(255,208,113,.55);
 box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,208,113,.12) inset;transition:opacity .25s,transform .25s}
.combo-panel.show{opacity:1;transform:translateX(-50%)}
.combo-panel.out{opacity:0;transform:translateX(-50%) translateY(-8px);transition:opacity .6s,transform .6s}
.combo-panel header{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:12px}
.combo-panel header b{font:900 46px/1 Satoshi,sans-serif;color:#ffd071;letter-spacing:-.01em;text-shadow:0 4px 0 #5b2139}
.combo-panel header span{font-size:15px;letter-spacing:.12em;color:#c9d0ea;text-transform:uppercase;white-space:nowrap}
.combo-panel header em{font-style:normal;font:900 22px/1 Satoshi,sans-serif;color:#fff}
.combo-panel header i{font-style:normal;color:#ffd071;margin:0 4px}
.combo-panel header strong{font:900 30px/1 Satoshi,sans-serif;color:#ffd071;margin-left:4px}
.combo-panel ol{list-style:none;display:flex;gap:30px;margin:0;padding:0}
.combo-panel li{position:relative;flex:1;min-width:0;display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border-radius:11px;background:rgba(255,255,255,.04);
 border:1px solid color-mix(in srgb,var(--c) 55%,transparent);opacity:0;transform:translateY(8px)}
.combo-panel.show li{animation:step-in .32s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(120ms + var(--i) * 150ms)}
.combo-panel li img{flex:none;width:40px;height:40px;object-fit:contain;background:#fff8ec;border-radius:8px;padding:5px;box-shadow:0 0 18px color-mix(in srgb,var(--c) 60%,transparent)}
.combo-panel li small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c);font-weight:600}
.combo-panel li strong{display:block;font-size:17px;line-height:1.2;color:#fbf6ec;margin-top:2px}
.combo-panel li em{display:block;font-style:normal;font-size:13px;line-height:1.3;color:#b9c3dc;margin-top:4px}
.combo-panel li+li::before{content:'';position:absolute;left:-27px;top:50%;width:24px;height:3px;border-radius:2px;
 background:repeating-linear-gradient(90deg,#ffd071 0 6px,transparent 6px 10px);background-size:20px 3px;animation:flow .5s linear infinite}
.combo-panel li+li::after{content:'';position:absolute;left:-7px;top:calc(50% - 5px);border:6px solid transparent;border-left:7px solid #ffd071;border-right:0}
.combo-panel footer{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,208,113,.25);opacity:.25;transition:opacity .2s}
.combo-panel .tick{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#3a4560;color:#0d1130;font-weight:900}
.combo-panel .res{font:900 24px/1.1 Satoshi,sans-serif;color:#e9ecf7}
.combo-panel .dmg-total{margin-left:auto;font:900 34px/1 Satoshi,sans-serif;color:#ffd071}
.combo-panel.landed footer{opacity:1;animation:landed .45s ease-out both}
.combo-panel.landed .tick{background:#5fe0a0}
.combo-panel.landed .res{color:#9ff0c6}
@keyframes step-in{to{opacity:1;transform:none}}
@keyframes flow{to{background-position:20px 0}}
@keyframes landed{0%{transform:scale(.96)}40%{transform:scale(1.03)}100%{transform:none}}
html:not(.embedded) .combo-panel header b{font-size:clamp(26px,3vw,46px)}
@media (max-width:1000px),(max-height:620px){.combo-panel{top:2%;padding:10px 12px}.combo-panel ol{flex-wrap:wrap;gap:10px}.combo-panel li{flex:1 1 40%}.combo-panel li+li::before,.combo-panel li+li::after{display:none}.combo-panel header b{font-size:24px}.combo-panel header span{font-size:11px}}
html.versus-child .combo-panel{display:none}