/* Fighting-game HUD: portraits and mirrored life bars across the top, a hit counter in the arena, arcade buttons
   along the bottom and a command list on the right. Layered over arena.css, embedded.css and network.css. */
.arcade{--hud-gold:#ffd23f;--metal:linear-gradient(180deg,#f1f4fb,#a3abc0 52%,#5d6680 54%,#c9cfdc);grid-template-rows:18px auto 10px minmax(0,1fr) auto 18px}
.embedded .arcade{grid-template-rows:20px auto 12px minmax(0,1fr) auto 20px}
.arcade .scoreboard{grid-area:2/2/3/5}
.arcade .fight-area{grid-area:4/2/5/3}
.arcade .combo-book{grid-area:4/4/5/5;align-self:start;margin-top:4px}
.arcade .action-bar{grid-area:5/2/6/3}
.arcade .masthead{grid-area:5/4/6/5;justify-content:flex-end}
.arcade footer{display:none}
[data-k=A]{--c:#3fe0c5}[data-k=B]{--c:#7fe07a}[data-k=C]{--c:#c4b2ff}[data-k=D]{--c:#ffb05c}[data-k=E]{--c:#7fb4ff}
[data-k=UP],[data-k=DOWN],[data-k=LEFT],[data-k=RIGHT]{--c:#4a5280}

/* Top bar */
.arcade .scoreboard{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:22px;align-items:start;padding:0}
.side{display:flex;align-items:flex-start;gap:14px;min-width:0}
.portrait{flex:none;width:clamp(70px,5.4vw,104px);aspect-ratio:1;padding:3px;background:var(--metal);clip-path:polygon(0 0,100% 0,100% 80%,80% 100%,0 100%);filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.p2 .portrait{clip-path:polygon(0 0,100% 0,100% 100%,20% 100%,0 80%)}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;clip-path:inherit;background:radial-gradient(circle at 50% 40%,#3b3f8a,#0d0f2c)}
.bars{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;padding-top:4px}
.plate{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.arcade .player-name,.arcade .enemy-name{display:inline-block;font:900 clamp(18px,1.45vw,28px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.04em;color:#fff;-webkit-text-stroke:1px #0b0b1a;text-shadow:0 3px 0 #0b0b1a,0 0 18px rgba(0,0,0,.6);transform:skewX(-8deg)}
.arcade .tasks{font:800 clamp(11px,.85vw,15px)/1 Rubik,sans-serif;letter-spacing:.16em;color:#ffcf9a;text-shadow:0 2px 6px #000}
.arcade .health{height:clamp(24px,2vw,38px);border:0;background:#1a0b14;transform:skewX(-20deg);overflow:hidden;
 box-shadow:0 0 0 3px #0b0b1a,0 0 0 5px #c9cfdc,0 0 0 7px #0b0b1a,0 8px 22px rgba(0,0,0,.55)}
.arcade .p1-health{transform:skewX(20deg)}
.arcade .health::after{content:'';position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(255,255,255,.4),transparent 40%,rgba(0,0,0,.28)),repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),rgba(0,0,0,.3) calc(10% - 2px) 10%)}
.arcade .health .fill{background:linear-gradient(180deg,#fff27a 0,#ffd23f 42%,#ff9f1a 100%);box-shadow:none}
.arcade .p1-health .fill{transform-origin:left center}
.arcade .health .ghost{background:#ff3b3b}
.arcade .health.low .fill{background:linear-gradient(180deg,#ffb3a0,#ff5a3c 45%,#c41d2a)}
.arcade .network{margin:0;padding:0;gap:10px;background:none;border:0;width:auto}
.net-label{font:800 11px/1 Rubik,sans-serif;font-style:italic;letter-spacing:.2em;color:#9fe7ff;text-shadow:0 2px 4px #000}
.arcade .net-tools{gap:4px;padding:3px 5px;background:#0b0b1a;transform:skewX(20deg);box-shadow:0 0 0 2px #59607a}
.arcade .net-tools img{width:clamp(22px,1.6vw,30px);height:clamp(22px,1.6vw,30px);border-radius:3px;transform:skewX(-20deg)}
.arcade .net-tools img.on{transform:skewX(-20deg) translateY(-2px)}
.arcade #net-mult{font:900 clamp(20px,1.6vw,30px)/1 Satoshi,sans-serif;font-style:italic;color:#fff;text-shadow:0 2px 0 #000}
.arcade #net-text{font-size:11px;letter-spacing:.16em}
.center{display:flex;flex-direction:column;align-items:center;gap:6px}
.arcade .round{position:relative;isolation:isolate;width:clamp(84px,6.2vw,118px);height:clamp(72px,5.3vw,100px);padding:0;background:var(--metal);box-shadow:none;
 clip-path:polygon(50% 0,100% 20%,100% 80%,50% 100%,0 80%,0 20%)}
.arcade .round::before{content:'';position:absolute;inset:4px;z-index:-1;background:radial-gradient(circle at 50% 30%,#3a44b0,#10133d 75%);clip-path:inherit}
.arcade .round span{font:800 10px/1 Rubik,sans-serif;letter-spacing:.24em;color:#cfd6f2;margin-top:6px}
.arcade .round b{font:900 clamp(32px,2.6vw,50px)/1 Satoshi,sans-serif;color:var(--hud-gold);-webkit-text-stroke:1px #2a1300;text-shadow:0 3px 0 #2a1300}
.arcade .score-hud{position:static;text-align:center}
.arcade .score-hud b{font:900 clamp(22px,1.7vw,32px)/1 Satoshi,sans-serif;letter-spacing:.05em;color:#fff;text-shadow:0 2px 0 #000,0 0 14px rgba(255,210,63,.35)}
.arcade .score-hud span{display:block;font-size:10px;letter-spacing:.24em;color:#c4cbe2;margin-top:2px}
.arcade .score-hud em{font-size:11px;margin-top:2px}

/* In the arena */
.arcade .chain{position:absolute;left:0;top:13%;display:flex;flex-direction:column;align-items:flex-start;gap:0;opacity:0;transform:translateX(-40px) skewX(-10deg);transition:opacity .12s,transform .2s cubic-bezier(.2,1.4,.4,1)}
.arcade .chain.on{opacity:1;transform:skewX(-10deg)}
.arcade .chain b,.arcade .chain.on b{font:900 clamp(64px,6vw,120px)/.9 Satoshi,sans-serif;font-style:italic;color:var(--hud-gold);-webkit-text-stroke:3px #2a0e00;text-shadow:0 6px 0 #2a0e00,0 0 30px rgba(255,180,40,.5)}
.arcade .chain span{font:900 clamp(20px,1.7vw,32px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.08em;color:#fff;-webkit-text-stroke:1px #000;text-shadow:0 3px 0 #000}
.arcade .stage-title{top:16%}
.arcade .stage-title em{display:block;margin-bottom:12px;font:900 clamp(22px,2vw,36px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.14em;background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #10122c)}
.arcade .stage-title strong{padding-right:.15em;font-style:italic;transform:skewX(-6deg);background:linear-gradient(180deg,#fffbe0,#ffe066 40%,#ff9d1f 70%,#e8401c);-webkit-background-clip:text;background-clip:text;color:transparent;
 -webkit-text-stroke:2px #1a0710;text-shadow:none;filter:drop-shadow(0 6px 0 #1a0710) drop-shadow(0 0 30px rgba(255,150,40,.4))}
.arcade .stage-title span{font-weight:700;letter-spacing:.14em;text-transform:uppercase;animation:hud-blink 1.1s steps(2) infinite}
.arcade .move-flash{top:2%;border-left:0;padding:8px 34px 8px 12px;color:#0b0b1a;text-shadow:none;font-style:italic;
 background:linear-gradient(90deg,var(--c,#65d6c0) 60%,transparent);clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}
.arcade .move-flash em.blocked,.arcade .move-flash em.linked{background:#0b0b1a;border:0;color:#fff}
.arcade .announcer b,.arcade .combo-flash,.arcade .announcer span{font-style:italic;text-shadow:none;-webkit-background-clip:text;background-clip:text;color:transparent}
.arcade .announcer b{background-image:linear-gradient(180deg,#fff,#d6dcef 45%,#7d86a6 52%,#f2f5ff);-webkit-text-stroke:3px #10122c;filter:drop-shadow(0 6px 0 #10122c)}
.arcade .announcer span,.arcade .combo-flash{background-image:linear-gradient(180deg,#fffbe0,#ffe066 35%,#ff9d1f 65%,#e8401c);-webkit-text-stroke:3px #1a0710;filter:drop-shadow(0 6px 0 #1a0710)}
.arcade .announcer span{font-size:clamp(56px,7vw,128px)}
.arcade .combo-flash small{-webkit-text-fill-color:#fff3d6;-webkit-text-stroke:0;font-style:normal}
.arcade #input-label{font:800 11px/1 Rubik,sans-serif;font-style:italic;letter-spacing:.22em}
.arcade #input-history kbd,.arcade .combo .sequence kbd{display:grid;place-items:center;width:34px;min-width:0;height:34px;padding:0;border-radius:50%;border:2px solid #0b0b1a;color:#10122c;font:900 15px/1 Satoshi,sans-serif;
 background:radial-gradient(circle at 34% 28%,#fff 0,var(--c,#4a5280) 42%,color-mix(in srgb,var(--c,#4a5280) 55%,#000) 100%);box-shadow:0 2px 0 #000}
.arcade [data-k=UP],.arcade [data-k=DOWN],.arcade [data-k=LEFT],.arcade [data-k=RIGHT]{color:#fff}

/* Arcade control panel */
.arcade .action-bar{gap:6px;padding:10px 14px;border:0;border-radius:0;background:linear-gradient(180deg,#22264a,#0c0e24);
 clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%,0 16px);box-shadow:inset 0 2px 0 rgba(255,255,255,.1),inset 0 -3px 0 rgba(0,0,0,.4)}
.arcade .action-bar>button{gap:12px;padding:6px 8px;background:none;border:0;border-radius:0}
.arcade .action-bar>button:hover{background:rgba(255,255,255,.05)}
.arcade .action-bar>button.pressed,.arcade .action-bar>button.next{background:none;transform:none;box-shadow:none}
.arcade .action-bar>button kbd{width:clamp(42px,3.2vw,58px);height:clamp(42px,3.2vw,58px);border-radius:50%;font:900 clamp(20px,1.5vw,28px)/1 Satoshi,sans-serif;color:#10122c;
 background:radial-gradient(circle at 34% 28%,#fff 0,color-mix(in srgb,var(--c) 80%,#fff) 16%,var(--c) 46%,color-mix(in srgb,var(--c) 52%,#000) 100%);
 box-shadow:0 0 0 4px #0b0b1a,0 0 0 6px #4a516f,0 6px 0 6px #05060f;transition:transform .06s,box-shadow .06s}
.arcade .action-bar>button.pressed kbd{transform:translateY(4px);box-shadow:0 0 0 4px #0b0b1a,0 0 0 6px #4a516f,0 2px 0 6px #05060f,0 0 34px 10px color-mix(in srgb,var(--c) 70%,transparent)}
.arcade .action-bar>button.next kbd{animation:hud-next .55s ease-in-out infinite alternate}
.arcade .action-bar img{width:30px;height:30px;border-radius:6px}
.arcade .action-bar>button span{font:900 16px/1.1 Satoshi,sans-serif;font-style:italic;letter-spacing:.03em;text-transform:uppercase}
.arcade .action-bar small{font:600 12px/1.2 Rubik,sans-serif;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#9aa4c4}
.arcade .direction-pad{grid-template-columns:repeat(3,34px);grid-template-rows:repeat(2,30px);gap:3px;padding:7px 9px;margin-left:6px;border-radius:14px;background:radial-gradient(circle,#2a2f55,#0c0e24);box-shadow:inset 0 0 0 2px #3a4166}
.arcade .direction-pad button{border:0;border-radius:5px;background:linear-gradient(180deg,#3a4170,#1d2147);box-shadow:0 3px 0 #05060f;color:#e8ebf7}
.arcade .direction-pad button.pressed{background:var(--hud-gold);color:#10122c;transform:translateY(2px);box-shadow:0 1px 0 #05060f}

/* Command list */
.arcade .combo-book{gap:12px}
.arcade .combo-intro h2{display:inline-block;margin:0 0 10px;padding:8px 30px 8px 14px;font:900 clamp(22px,1.8vw,32px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.06em;text-transform:uppercase;
 color:#10122c;text-shadow:none;background:linear-gradient(90deg,#ffd23f,#ff9f1a);clip-path:polygon(0 0,100% 0,90% 100%,0 100%)}
.arcade .combo-intro p{font-size:13px;color:#c6cde4}
.arcade .combo-list{gap:10px}
.arcade .combo{padding:12px 16px;border:0;border-left:4px solid var(--hud-gold);border-radius:0;box-shadow:none;background:linear-gradient(90deg,rgba(12,14,38,.94),rgba(12,14,38,.72));
 clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.arcade .combo:hover{background:linear-gradient(90deg,rgba(44,40,80,.96),rgba(30,28,62,.82))}
.arcade .combo.primed{border-left-color:#fff}
.arcade .combo.active{box-shadow:none;background:linear-gradient(90deg,rgba(120,76,20,.96),rgba(64,42,30,.86))}
.arcade .combo strong{font:900 19px/1.1 Satoshi,sans-serif;font-style:italic;letter-spacing:.05em}
.arcade .combo .sequence{gap:5px}
.arcade .combo .sequence kbd{width:30px;height:30px;font-size:14px;opacity:.6;transition:opacity .12s,box-shadow .12s}
.arcade .combo .sequence kbd.lit{opacity:1;background:radial-gradient(circle at 34% 28%,#fff 0,var(--c) 42%,color-mix(in srgb,var(--c) 55%,#000) 100%);color:#10122c;border-color:#0b0b1a;box-shadow:0 0 0 2px #fff,0 0 14px var(--c)}
.arcade [data-k=UP].lit,.arcade [data-k=DOWN].lit,.arcade [data-k=LEFT].lit,.arcade [data-k=RIGHT].lit{color:#fff}
.arcade .versus-btn{border:0;border-radius:0;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);background:linear-gradient(90deg,#c0262d,#7a1430);color:#fff;font-style:italic;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.arcade .versus-btn:hover{background:linear-gradient(90deg,#e0323a,#951a3a)}
.arcade .versus-btn span,.arcade .versus-btn kbd{color:#ffe08a}

/* System buttons */
.arcade .utility{flex-wrap:wrap;justify-content:flex-end;gap:6px}
.arcade .utility button,.embedded .arcade .utility button{padding:9px 16px;border:0;border-radius:0;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);background:#1a1e40;
 font:700 12px/1 Rubik,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#cfd6f2}
.arcade .utility button:hover{background:#2b3160}
.embedded .arcade .deck-controls{gap:6px;margin-left:0}
.embedded .arcade .deck-controls #deck-next{background:var(--hud-gold);color:#10122c}

@keyframes hud-next{to{box-shadow:0 0 0 4px #0b0b1a,0 0 0 6px var(--hud-gold),0 6px 0 6px #05060f,0 0 26px 8px rgba(255,210,63,.6)}}
@keyframes hud-blink{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.arcade .stage-title span{animation:none}}
html.versus-child .portrait,html.versus-child .p1-health,html.versus-child .p1 .plate,html.versus-child .center{display:none}

/* Compact command list: name and inputs on one line, then what it does. */
.arcade .combo-intro p,.arcade .combo .combo-logos,.arcade .book-note{display:none}
.arcade .combo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:center;padding:11px 14px}
.arcade .combo strong{grid-column:1;grid-row:1;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arcade .combo .sequence{grid-column:2;grid-row:1;margin:0;gap:3px}
.arcade .combo .sequence kbd{width:26px;height:26px;font-size:12px;border-width:2px}
.arcade .combo small{grid-column:1/-1;margin:0}
.arcade .combo .combo-net{grid-column:1/-1;justify-self:start;margin:2px 0 0}
.arcade .action-bar>button{gap:10px}
.arcade .action-bar>button kbd{width:clamp(40px,2.9vw,54px);height:clamp(40px,2.9vw,54px)}
.arcade .action-bar>button span{font-size:clamp(13px,.95vw,17px);letter-spacing:0}
.arcade .action-bar small{font-size:clamp(10px,.7vw,12px);letter-spacing:.08em}

/* Combo breakdown panel, framed like the rest of the HUD. */
.arcade .combo-panel{border-radius:0;border:0;border-top:4px solid var(--hud-gold);background:linear-gradient(180deg,rgba(14,16,44,.95),rgba(10,12,32,.88));
 clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.arcade .combo-panel header b{font-style:italic;letter-spacing:.01em;background:linear-gradient(180deg,#fffbe0,#ffe066 40%,#ff9d1f 75%);-webkit-background-clip:text;background-clip:text;color:transparent;
 -webkit-text-stroke:2px #1a0710;text-shadow:none;filter:drop-shadow(0 4px 0 #1a0710)}
.arcade .combo-panel header strong{font-style:italic;color:var(--hud-gold)}
.arcade .combo-panel li{border-radius:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
html.versus-child .arcade .scoreboard{grid-template-columns:auto minmax(0,1fr)}
@media (max-width:1700px){.arcade .action-bar img{display:none}}

/* Combo callout (replaces the breakdown card): name, each tool's step lighting up in order, then what got done. */
.arcade .combo-callout{position:absolute;left:0;top:36%;width:min(460px,36%);pointer-events:none;opacity:0}
.combo-callout.show{animation:cc-in .32s var(--lead,0ms) cubic-bezier(.2,1.3,.4,1) both}
.combo-callout.out{animation:cc-out .35s both}
.combo-callout header{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:10px}
.combo-callout header b{font:900 clamp(30px,2.6vw,50px)/.95 Satoshi,sans-serif;font-style:italic;transform:skewX(-8deg);padding-right:.15em;
 background:linear-gradient(180deg,#fffbe0,#ffe066 40%,#ff9d1f 75%,#e8401c);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #1a0710;filter:drop-shadow(0 5px 0 #1a0710)}
.combo-callout header span{padding:5px 12px;background:#0b0b1a;font:800 13px/1 Rubik,sans-serif;letter-spacing:.14em;color:#cfd6f2;transform:skewX(-12deg)}
.combo-callout header strong{color:var(--hud-gold,#ffd23f)}
.combo-callout ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.combo-callout li{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;padding:6px 22px 6px 8px;border-left:5px solid var(--c);
 background:linear-gradient(90deg,rgba(10,12,32,.92),rgba(10,12,32,.55));clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);opacity:0}
.combo-callout.show li{animation:cc-step .22s calc(var(--lead,0ms) + 140ms + var(--i) * 120ms) cubic-bezier(.2,1.3,.4,1) both}
.combo-callout li img{width:30px;height:30px;object-fit:contain;background:#fff8ec;border-radius:6px;padding:3px}
.combo-callout li span{font:900 clamp(15px,1.15vw,21px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.02em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 #000}
.combo-callout.landed li{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 40%,#0a0c20),rgba(10,12,32,.55))}
.combo-callout footer{display:flex;align-items:baseline;gap:12px;margin-top:10px;opacity:0}
.combo-callout.landed footer{animation:cc-step .25s cubic-bezier(.2,1.3,.4,1) both}
.combo-callout footer b{font:900 clamp(30px,2.4vw,46px)/1 Satoshi,sans-serif;font-style:italic;color:#ff4b3a;-webkit-text-stroke:2px #1a0710;text-shadow:0 4px 0 #1a0710}
.combo-callout footer span{font:900 clamp(16px,1.2vw,22px)/1.1 Satoshi,sans-serif;font-style:italic;color:#9ff0c6;text-shadow:0 2px 0 #000}
@keyframes cc-in{from{opacity:0;transform:translateX(-80px) skewX(-6deg)}to{opacity:1;transform:none}}
@keyframes cc-out{from{opacity:1}to{opacity:0;transform:translateX(-40px)}}
@keyframes cc-step{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}

/* Impact frames and quake when a combo connects (arena.js impactFrames). */
.stage.impact-a canvas{filter:invert(1) grayscale(1) contrast(5)}
.stage.impact-b canvas{filter:grayscale(1) contrast(6) brightness(1.35)}
.arcade.quake{animation:quake .36s steps(9)}
@keyframes quake{0%{transform:translate(0,0)}15%{transform:translate(-9px,6px)}30%{transform:translate(8px,-7px)}45%{transform:translate(-6px,-4px)}60%{transform:translate(6px,5px)}75%{transform:translate(-3px,3px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.arcade.quake{animation:none}}