/* 击败小梅花 · Candy Pixel UI
   All screens inside #stage use a fixed 1280 × 720 coordinate space that scales with the window.
   Pixel frames are drawn with four hard box-shadows (notched corners) plus a hard drop. */

/* MeihuaPixel is loaded by main.js through fetchAsset, with an origin fallback. */

:root{
 color-scheme:light;
 --ink:#4b2d4f;--ink-soft:#7d5d80;--ink-faint:#b49bb3;
 --paper:#fffdf8;--cream:#fff4e6;--blush:#ffe4ee;
 --pink:#ff8db4;--pink-d:#e2588e;--pink-l:#ffc6db;
 --mint:#8fe6cf;--mint-d:#3fb69a;
 --lemon:#ffd96b;--lemon-d:#e9a93b;--lemon-l:#fff0b8;
 --sky:#9ad8ff;--sky-d:#4a9fe2;
 --lilac:#c8adff;--lilac-d:#8b69d6;
 --font:'MeihuaPixel','Microsoft YaHei','PingFang SC',sans-serif;
 --ease:cubic-bezier(.2,.9,.25,1.2);
}
*,*::before,*::after{
 box-sizing:border-box;
 --b:4px;
 /* Pixel frame: resolved per element, so --line can be overridden anywhere. */
 --pf:0 calc(-1*var(--b)) 0 0 var(--line,#4b2d4f),0 var(--b) 0 0 var(--line,#4b2d4f),calc(-1*var(--b)) 0 0 0 var(--line,#4b2d4f),var(--b) 0 0 0 var(--line,#4b2d4f);
}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
h1,h2,h3,p{margin-top:0}
h2{text-wrap:balance}
b,strong,h1,h2,h3,th{font-weight:normal}

body{
 margin:0;min-height:100dvh;display:flex;align-items:center;justify-content:center;
 font-family:var(--font);font-size:16px;font-synthesis:none;-webkit-font-smoothing:none;color:var(--ink);
 background:
  radial-gradient(circle at 50% -10%,#fff3f7 0,transparent 55%),
  conic-gradient(#ffd9e7 25%,#ffcfe0 0 50%,#ffd9e7 0 75%,#ffcfe0 0) 0 0/40px 40px;
}
::selection{background:var(--lemon);color:var(--ink)}

/* ---------- Shared controls ---------- */
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
button{
 --line:var(--ink);--fill:var(--paper);--shade:#f1ddd8;
 cursor:pointer;border:0;border-radius:0;padding:10px 16px;background:var(--fill);color:var(--ink);
 box-shadow:var(--pf),0 calc(var(--b)*2) 0 0 var(--line),inset 0 calc(-1*var(--b)) 0 0 var(--shade),inset 0 var(--b) 0 0 #ffffffb0;
 transition:transform .16s var(--ease),background .16s,box-shadow .12s,filter .16s;
}
button:hover{transform:translateY(-2px);filter:brightness(1.04)}
button:active{transform:translateY(var(--b));box-shadow:var(--pf),0 var(--b) 0 0 var(--line),inset 0 calc(-1*var(--b)) 0 0 var(--shade)}
button:disabled{cursor:default;filter:grayscale(.6);opacity:.65;transform:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px dashed var(--pink-d);outline-offset:8px}
.primary{
 --fill:var(--lemon);--shade:var(--lemon-d);
 display:flex;width:100%;align-items:center;justify-content:center;gap:14px;font-size:24px;padding:12px 18px;
 
}
.primary b{font-size:16px;color:var(--pink-d)}
.primary:hover{--fill:#ffe286}
.text-button{--fill:transparent;box-shadow:none!important;color:var(--ink-soft);padding:8px;text-decoration:underline dotted 2px;text-underline-offset:6px}
.text-button:hover{color:var(--pink-d);transform:none}
select{
 appearance:none;width:100%;height:40px;padding:0 36px 0 12px;border:0;border-radius:0;background:var(--paper);color:var(--ink);cursor:pointer;
 box-shadow:var(--pf),inset 0 calc(-1*var(--b)) 0 0 #f1ddd8;
 background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(-45deg,transparent 50%,var(--ink) 50%);
 background-size:8px 8px;background-position:calc(100% - 22px) 17px,calc(100% - 14px) 17px;background-repeat:no-repeat;
}
input{border:0;border-radius:0;background:var(--paper);box-shadow:var(--pf),inset 0 var(--b) 0 0 #f3e3e6}
kbd{
 display:inline-block;min-width:22px;padding:2px 5px 1px;margin:0 2px;text-align:center;font:12px/16px var(--font);color:var(--ink);
 background:var(--paper);box-shadow:0 0 0 2px var(--ink),0 3px 0 2px var(--ink);border-radius:0;
}
.eyebrow{margin:0 0 10px;font-size:16px;color:var(--pink-d)}

/* ---------- Cabinet ---------- */
.cabinet{width:min(1500px,96vw,calc((100dvh - 118px)*16/9));margin:14px auto}
.topbar{height:52px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 4px 8px}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--ink);white-space:nowrap;letter-spacing:2px}
.brand-mark{width:33px;height:33px;background:var(--meihua-icon,none) center/contain no-repeat;image-rendering:pixelated;animation:bob 2.4s ease-in-out infinite}
.brand em{font-style:normal;font-size:12px;line-height:16px;padding:2px 7px;color:var(--ink);text-shadow:none;background:var(--mint);box-shadow:0 0 0 2px var(--ink);transform:rotate(-4deg)}
.topbar nav{display:flex;gap:14px;align-items:center}
.topbar nav a,.topbar nav button{--b:3px;font-size:16px;padding:6px 12px;color:var(--ink);text-decoration:none;background:var(--paper)}
.topbar nav a{--line:var(--ink);display:inline-block;box-shadow:var(--pf),0 6px 0 0 var(--ink),inset 0 -3px 0 0 #f1ddd8;transition:transform .16s var(--ease)}
.topbar nav a:hover{transform:translateY(-2px)}
#fullscreenBtn{--fill:var(--sky);--shade:var(--sky-d)}

#frame{
 --line:var(--ink);--b:6px;
 width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:#fff4f7;
 box-shadow:var(--pf),0 16px 0 0 var(--ink),0 16px 0 10px #4b2d4f22;
}
#stage{position:absolute;width:1280px;height:720px;transform-origin:top left;overflow:hidden;background:#ffe6ef}
#game{position:absolute;inset:0;width:1280px;height:720px;image-rendering:pixelated}
.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px #4b2d4f24}
.cabinet[data-view=battle] .vignette{box-shadow:inset 0 0 90px #1a0d2066}
.screen{position:absolute;inset:0}

.footbar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:26px 4px 0;font-size:12px;color:var(--ink-soft)}
.footbar>span{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.footbar b{font-size:12px;color:#fff;background:var(--pink-d);padding:1px 6px;margin-right:6px;box-shadow:0 0 0 2px var(--ink)}
#secondControls b{background:var(--sky-d)}
.footbar i{font-style:normal;margin:0 6px;color:var(--pink-d)}
.footer-note{white-space:nowrap}

/* ---------- Title & character select ---------- */
#menu{animation:pop-in .5s var(--ease) both}
.titlecrest{position:absolute;left:38px;top:18px}
.titlecrest h1{
 margin:0;font-size:48px;line-height:56px;letter-spacing:6px;color:#fff;
 -webkit-text-stroke:10px var(--ink);paint-order:stroke fill;filter:drop-shadow(0 6px 0 var(--pink-d)) drop-shadow(0 4px 0 #4b2d4f40);
}
.title-ribbon{
 position:absolute;left:18px;top:64px;white-space:nowrap;font-size:16px;padding:3px 12px 2px;background:var(--lemon);color:var(--ink);
 --b:3px;box-shadow:var(--pf),0 6px 0 0 var(--ink);transform:rotate(-3deg);
}
/* 剧情: a sticker on the logo, next to the ribbon. */
.story-entry{
 position:absolute;z-index:2;left:246px;top:72px;display:flex;align-items:center;justify-content:center;gap:8px;width:112px;height:46px;
 font-size:22px;letter-spacing:2px;color:#fff;background:var(--pink);text-decoration:none;
 text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink),2px 2px var(--ink);
 box-shadow:var(--pf),0 6px 0 0 var(--ink);transform:rotate(3deg);
}
.story-entry span{font-size:13px}
.story-spark{
 position:absolute;right:-13px;top:-17px;font-style:normal;font-size:20px;color:var(--lemon);
 text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink);animation:story-twinkle 1.5s ease-in-out infinite;
}
.story-entry:hover{background:#ffa3c3}
.story-entry:active{transform:rotate(3deg) translateY(4px);box-shadow:var(--pf),0 2px 0 0 var(--ink)}
@keyframes story-twinkle{50%{opacity:.35;transform:scale(.7) rotate(25deg)}}

/* Left rail */
.mode-panel{
 position:absolute;left:34px;top:134px;width:300px;height:554px;padding:28px 18px 18px;display:flex;flex-direction:column;gap:14px;
 background:var(--paper);box-shadow:var(--pf),0 12px 0 0 var(--ink),inset 0 -6px 0 0 #fbe8ec;
}
.setup-caption{
 position:absolute;top:-16px;left:14px;font-size:16px;padding:4px 14px 3px;color:#fff;background:var(--pink-d);
 --b:3px;box-shadow:var(--pf);text-shadow:1px 0 0 #fff;
}
.tabbar{display:grid;gap:16px}
.tabbar button{
 height:44px;display:flex;align-items:center;gap:10px;padding:0 12px 0 8px;text-align:left;font-size:16px;
}
.mode-icon{display:grid;place-items:center;width:28px;height:28px;background:var(--blush);color:var(--pink-d);box-shadow:0 0 0 2px var(--ink);font-size:16px;line-height:1}
.tabbar button small{margin-left:auto;font-size:12px;color:var(--ink-soft)}
.tabbar button[aria-selected=true]{
 --fill:var(--pink);--shade:var(--pink-d);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;
}
.tabbar button[aria-selected=true] small{color:#fff;-webkit-text-stroke:0}
.tabbar button[aria-selected=true] .mode-icon{background:#fff;color:var(--pink-d);-webkit-text-stroke:0;animation:wiggle 1.6s ease-in-out infinite}
.mode-options{min-height:40px;display:flex;flex-direction:column;gap:12px}
/* Single play has no sub-options here any more (the CPU dial lives on the stage): the map preview takes the room. */
.mode-options:not(:has(>:not([hidden]))){display:none}
#teamOptions{order:-1}
.team-subtabs{gap:10px}
.team-subtabs button{font-size:12px;white-space:nowrap}
#menu[data-format=teams] .mode-panel{gap:12px;padding-top:24px}
#menu[data-format=teams] .tabbar{gap:12px}
#menu[data-format=teams] .tabbar button{height:40px}
.live-dot{width:10px;height:10px;background:var(--mint-d);box-shadow:0 0 0 2px var(--ink);animation:blink 1.2s steps(2) infinite}
.subtabs{display:flex;gap:16px;padding:0 4px}
.subtabs button{flex:1;height:36px;font-size:16px;padding:0 6px}
.subtabs button.active{--fill:var(--sky);--shade:var(--sky-d)}
/* 选择战场: one large preview of the chosen battlefield with arrows, and a strip of
   thumbnails to jump straight to one. The preview takes whatever height the rail
   has left, so more maps or more options never push the start button out. */
.map-select{display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.map-head{display:flex;align-items:center;justify-content:space-between}
#mapTitle{font-size:16px;line-height:18px;padding:2px 10px 0;white-space:nowrap;background:var(--lemon);box-shadow:0 0 0 2px var(--ink)}
.map-label,.roster-heading,.lobby-heading>span{font-size:16px;color:var(--ink)}
.map-label::before,.roster-heading>span::before,.lobby-heading>span::before{content:'✦ ';color:var(--pink-d)}
.map-view{position:relative;flex:1;min-height:52px;max-height:160px;overflow:hidden;background:#182a3b;box-shadow:0 0 0 3px var(--ink)}
.map-view canvas{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 90%}
.map-view.swap canvas{animation:map-swap .28s var(--ease)}
.map-arrow{--b:2px;position:absolute;top:calc(50% - 15px);width:26px;height:26px;padding:0;display:grid;place-items:center;font-size:12px;line-height:1}
#mapPrev{left:8px}
#mapNext{right:8px}
.map-hazards{font-size:12px;line-height:14px;text-align:center;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-strip{display:grid;grid-template-columns:repeat(var(--maps,6),minmax(0,1fr));gap:6px;padding:3px 3px 2px}
.map-strip button{padding:0;line-height:0;background:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.map-strip button:active{box-shadow:0 0 0 2px var(--ink)}
.map-strip button.active{transform:translateY(-2px);box-shadow:0 0 0 2px var(--paper),0 0 0 5px var(--mint-d)}
.map-thumb{display:block;width:100%;height:auto;aspect-ratio:16/9;image-rendering:pixelated}
.mode-panel:has(#joinArea:not([hidden])) .map-hazards{display:none}
.mode-panel:has(#joinArea:not([hidden])) .tabbar{gap:12px}
@keyframes map-swap{from{opacity:.35;transform:scale(1.06)}}
.match-rule{text-align:center;color:var(--ink-soft);font-size:12px;margin-top:auto}
.match-rule span{margin:0 6px;color:var(--pink-d)}
#startBtn{height:58px;flex:none}
#startBtn:not(:disabled){animation:nudge 2.6s ease-in-out infinite}
.or{text-align:center;font-size:12px;color:var(--ink-soft);margin:0 0 8px}
.join-row{display:flex;gap:14px;padding:0 3px}
.join-row input{--b:3px;min-width:0;flex:1;height:40px;padding:0 12px;font-size:16px;letter-spacing:4px;text-transform:uppercase;color:var(--ink)}
.join-row input::placeholder{letter-spacing:0;color:var(--ink-faint);font-size:12px}
.join-row button{--b:3px;height:40px;padding:0 14px;font-size:16px;--fill:var(--mint);--shade:var(--mint-d)}
.mode-panel:has(#joinArea:not([hidden])) .match-rule{display:none}
.mode-panel:has(#joinArea:not([hidden])) #startBtn{margin-top:auto}

/* Fighter showcase */
.selection-stage{
 position:absolute;left:366px;right:254px;top:26px;height:466px;overflow:hidden;
 background:linear-gradient(#fffaf6 0 62%,#ffe3ee 62% 100%);
 box-shadow:var(--pf),0 12px 0 0 var(--ink);
}
.selection-stage::before{
 content:'';position:absolute;inset:auto 0 0;height:38%;pointer-events:none;
 background:repeating-linear-gradient(90deg,#ffd0e1 0 40px,#ffe3ee 40px 80px);
 box-shadow:inset 0 4px 0 0 var(--ink),inset 0 10px 0 0 #fff6fa;
}
.selection-stage::after{
 content:'';position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(circle,#ffdbe8 2px,transparent 2.5px) 0 0/28px 28px;opacity:.55;
 mask:linear-gradient(#000 0 58%,transparent 62%);-webkit-mask:linear-gradient(#000 0 58%,transparent 62%);
}
.fighter-slot{
 position:absolute;z-index:1;top:14px;left:18px;width:300px;height:430px;padding:0;display:flex;flex-direction:column;align-items:center;
 background:transparent;box-shadow:none!important;color:var(--ink);--fighter-color:var(--pink);
}
#selectSlot1{left:auto;right:18px}
.fighter-slot:hover,.fighter-slot:active{transform:none;filter:none}
.slot-label{
 --b:3px;display:block;font-size:16px;line-height:20px;padding:4px 12px 3px;background:var(--paper);color:var(--ink-soft);
 box-shadow:var(--pf);transition:background .2s,color .2s
}
.fighter-slot.active .slot-label{background:var(--ink);color:#fff;animation:bob 1.4s ease-in-out infinite}
.fighter-portrait{position:relative;display:block;width:300px;height:286px;margin-top:6px;isolation:isolate}
.fighter-portrait::before{
 /* pedestal: two stacked pixel slabs in the fighter colour */
 content:'';position:absolute;left:60px;right:60px;bottom:4px;height:22px;z-index:-1;
 background:linear-gradient(var(--fighter-color) 0 55%,color-mix(in srgb,var(--fighter-color) 70%,var(--ink)) 55%);
 box-shadow:0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink),-12px 0 0 -4px var(--ink),12px 0 0 -4px var(--ink);
}
.fighter-portrait::after{
 content:'';position:absolute;left:50%;top:44%;width:340px;height:340px;margin:-170px 0 0 -170px;z-index:-2;border-radius:50%;
 background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--fighter-color) 45%,#fff) 0 9deg,transparent 9deg 18deg);
 mask:radial-gradient(circle,#000 30%,transparent 68%);-webkit-mask:radial-gradient(circle,#000 30%,transparent 68%);
 opacity:.35;transition:opacity .3s
}
.fighter-slot.active .fighter-portrait::after{opacity:.9;animation:spin 24s linear infinite}
.fighter-portrait canvas{position:absolute;left:5px;bottom:10px;width:290px;height:261px;image-rendering:pixelated;animation:idle 3.2s ease-in-out infinite}
#selectSlot1 .fighter-portrait canvas{animation-delay:-1.6s}
.fighter-slot b{
 --b:4px;margin-top:10px;font-size:32px;line-height:36px;padding:4px 20px 2px;background:var(--fighter-color);color:var(--ink);
 box-shadow:var(--pf),0 8px 0 0 var(--ink),inset 0 4px 0 0 #ffffff80;transform:rotate(-2deg);white-space:nowrap;max-width:290px;overflow:hidden;text-overflow:ellipsis;
 
}
#selectSlot1 b{transform:rotate(2deg)}
.slot-hint{margin-top:16px;font-size:12px;color:var(--ink-soft);opacity:0;transition:opacity .2s}
.fighter-slot:hover .slot-hint,.fighter-slot.active .slot-hint{opacity:1}
.slot-hint i{display:inline-block;font-style:normal;animation:bounce-y 1s ease-in-out infinite}
.selected-description{
 position:absolute;z-index:1;top:432px;left:18px;width:300px;margin:0;text-align:center;font-size:12px;color:var(--ink-soft)
}
#selectedDescription1{left:auto;right:18px}
#versusMark{position:absolute;z-index:2;left:calc(50% - 64px);top:122px;width:128px;height:128px;display:grid;place-items:center;pointer-events:none;animation:vs-pulse 1.8s ease-in-out infinite}
#versusMark::before{
 content:'';position:absolute;inset:0;background:var(--lemon);
 clip-path:polygon(50% 0,61% 22%,85% 12%,78% 38%,100% 50%,78% 62%,85% 88%,61% 78%,50% 100%,39% 78%,15% 88%,22% 62%,0 50%,22% 38%,15% 12%,39% 22%);
 filter:drop-shadow(4px 0 0 var(--ink)) drop-shadow(-4px 0 0 var(--ink)) drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 -4px 0 var(--ink));
}
#versusMark span{position:relative;font-size:48px;line-height:1;color:#fff;letter-spacing:2px;-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;filter:drop-shadow(0 6px 0 var(--pink-d))}
#menu.selection-change .fighter-slot.active .fighter-portrait canvas{animation:hop .42s var(--ease),idle 3.2s ease-in-out .42s infinite}

/* 2v2 line-up: blue team left of a slanted seam, gold team right, like the VS card.
   A seat holds you, a CPU, or a friend who joins in the room (.waiting). */
#menu[data-format=teams] .selection-stage{background:linear-gradient(100deg,#dcefff 0 calc(50% - 5px),var(--ink) calc(50% - 5px) calc(50% + 5px),#fff1c2 calc(50% + 5px))}
#menu[data-format=teams] .selection-stage::before{background:repeating-linear-gradient(90deg,#ffffff8c 0 40px,#ffffff40 40px 80px);box-shadow:inset 0 4px 0 0 var(--ink),inset 0 10px 0 0 #ffffffb0}
#menu[data-format=teams] .selection-stage::after{background-image:radial-gradient(circle,#fff 2px,transparent 2.5px);opacity:.8}
#teamSeats{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:1fr 1fr 11% 1fr 1fr;align-items:start;padding:50px 14px 0}
.team-flag{position:absolute;top:12px;--b:3px;font-size:16px;line-height:20px;padding:3px 14px 2px;box-shadow:var(--pf),0 5px 0 0 var(--ink)}
.team-flag.blue{left:18px;background:var(--sky);transform:rotate(-2deg)}
.team-flag.gold{right:18px;background:var(--lemon);transform:rotate(2deg)}
.team-seat{position:relative;min-width:0;padding:0;display:flex;flex-direction:column;align-items:center;background:transparent;box-shadow:none!important;color:var(--ink);--fighter-color:#fffdf8}
.team-seat:hover,.team-seat:active{transform:none;filter:none}
.team-seat.active{z-index:2}
.team-seat:disabled{opacity:1;filter:none}
.team-seat small{--b:3px;font-size:12px;line-height:16px;padding:3px 8px 2px;white-space:nowrap;background:var(--paper);color:var(--ink-soft);box-shadow:var(--pf);transition:background .2s,color .2s}
.team-seat:not(.waiting):hover small{background:var(--blush)}
.team-seat.active small{background:var(--ink);color:#fff;animation:bob 1.4s ease-in-out infinite}
.seat-figure{position:relative;display:block;width:100%;aspect-ratio:140/210;margin-top:4px;isolation:isolate}
.seat-figure::before{
 content:'';position:absolute;left:16%;right:16%;bottom:2px;height:14px;z-index:-1;
 background:linear-gradient(var(--fighter-color) 0 55%,color-mix(in srgb,var(--fighter-color) 70%,var(--ink)) 55%);
 box-shadow:0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink),-9px 0 0 -3px var(--ink),9px 0 0 -3px var(--ink);
}
.seat-figure::after{
 content:'';position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-2;border-radius:50%;opacity:0;transition:opacity .3s;
 background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--fighter-color) 55%,#fff) 0 9deg,transparent 9deg 18deg);
 mask:radial-gradient(circle,#000 30%,transparent 68%);-webkit-mask:radial-gradient(circle,#000 30%,transparent 68%);
}
.team-seat.active .seat-figure::after{opacity:.95}
.seat-figure canvas{position:absolute;left:50%;bottom:8px;width:166%;margin-left:-83%;image-rendering:pixelated;animation:idle 3.2s ease-in-out infinite}
.team-seat:nth-of-type(2) canvas{animation-delay:-.8s}
.team-seat:nth-of-type(3) canvas{animation-delay:-1.6s}
.team-seat:nth-of-type(4) canvas{animation-delay:-2.4s}
.team-seat:nth-of-type(n+3):not(.waiting) .seat-figure{transform:scaleX(-1)}
.seat-wait{display:none}
.team-seat.waiting canvas{display:none}
.team-seat.waiting .seat-wait{
 position:absolute;left:50%;bottom:24px;width:46%;aspect-ratio:3/4;transform:translateX(-50%);display:grid;place-items:center;
 font-style:normal;font-size:32px;color:var(--ink-faint);background:#ffffff8c;outline:3px dashed var(--ink-faint);outline-offset:-3px;animation:blink 2.4s steps(2) infinite
}
.team-seat b{
 --b:3px;margin-top:9px;max-width:94%;font-size:16px;line-height:20px;padding:3px 9px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 background:var(--fighter-color);box-shadow:var(--pf),0 5px 0 0 var(--ink),inset 0 3px 0 0 #ffffff80;transform:rotate(-2deg)
}
.team-seat:nth-of-type(even) b{transform:rotate(2deg)}
.team-seat.waiting b{color:var(--ink-faint);box-shadow:var(--pf);--line:var(--ink-faint)}
.team-vs{position:relative;z-index:3;align-self:start;margin:92px -16px 0;aspect-ratio:1;display:grid;place-items:center;pointer-events:none;animation:vs-pulse 1.8s ease-in-out infinite}
.team-vs::before{
 content:'';position:absolute;inset:0;background:var(--lemon);
 clip-path:polygon(50% 0,61% 22%,85% 12%,78% 38%,100% 50%,78% 62%,85% 88%,61% 78%,50% 100%,39% 78%,15% 88%,22% 62%,0 50%,22% 38%,15% 12%,39% 22%);
 filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink));
}
.team-vs span{position:relative;font-size:32px;line-height:1;color:#fff;-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;filter:drop-shadow(0 4px 0 var(--pink-d))}
#teamNote{position:absolute;left:0;right:0;bottom:20px;margin:0;text-align:center}
#teamNote b{--b:3px;display:inline-block;font-size:16px;line-height:20px;padding:5px 16px 4px;background:var(--paper);box-shadow:var(--pf),0 5px 0 0 var(--ink)}
#teamNote span{display:block;margin-top:14px;font-size:12px;line-height:16px;color:var(--ink-soft)}
#menu.selection-change .team-seat.active canvas{animation:hop .42s var(--ease),idle 3.2s ease-in-out .42s infinite}

/* 正在联机: a rail beside the showcase, one small card for each full online room. */
.live-board{
 position:absolute;left:1046px;right:34px;top:26px;height:466px;padding:28px 12px 10px;
 background:var(--paper);box-shadow:var(--pf),0 12px 0 0 var(--ink),inset 0 -6px 0 0 #e2f7f0;
}
.live-caption{
 position:absolute;top:-16px;left:12px;display:flex;align-items:center;gap:8px;font-size:16px;padding:4px 12px 3px;color:#fff;background:var(--mint-d);
 --b:3px;box-shadow:var(--pf);text-shadow:1px 0 0 #fff;
}
.live-caption .live-dot{background:#fff;box-shadow:0 0 0 2px var(--ink)}
.live-board.empty .live-dot{animation:none;background:#ffffff80}
.live-count{position:absolute;top:8px;right:12px;font-size:12px;color:var(--ink-soft)}
.live-list{display:flex;flex-direction:column;gap:10px;height:100%}
.live-room{--b:3px;padding:6px 8px 7px;background:#f3fcf9;box-shadow:var(--pf),0 4px 0 0 var(--ink);animation:pop-in .3s var(--ease) both}
.live-room[data-state=waiting]{background:var(--cream)}
.live-room[data-state=over]{background:var(--blush)}
.live-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.live-code{font:12px/16px var(--font);padding:1px 6px 0;letter-spacing:2px;color:var(--ink);background:var(--lemon);box-shadow:0 0 0 2px var(--ink)}
.live-state{font-size:12px;color:var(--mint-d)}
.live-room[data-state=waiting] .live-state{color:var(--ink-faint)}
.live-room[data-state=over] .live-state{color:var(--pink-d)}
.live-fight{display:flex;align-items:center;justify-content:space-between}
.live-side{display:flex;align-items:center;gap:4px}
.live-faces{display:flex}
.live-face{width:28px;height:28px;background:var(--face-color,#fff);box-shadow:0 0 0 2px var(--ink)}
.live-room.teams .live-face{width:22px;height:22px}
.live-room.teams .live-face+.live-face{margin-left:2px}
.live-room.teams .live-side:first-of-type .live-face{box-shadow:0 0 0 2px var(--sky-d)}
.live-room.teams .live-side:last-of-type .live-face{box-shadow:0 0 0 2px var(--lemon-d)}
.live-hearts{font-style:normal;font-size:16px;line-height:1;color:var(--pink-d)}
.live-room.teams .live-hearts{font-size:12px}
.live-side.lost .live-face{filter:grayscale(1);opacity:.55}
.live-vs{font-size:12px;color:var(--ink-faint)}
.live-none{margin:150px 0 8px;text-align:center;font-size:16px;line-height:22px;color:var(--ink-soft)}
.live-none::before{content:'Z z z';display:block;margin-bottom:10px;font-size:24px;letter-spacing:2px;color:var(--pink-l)}
.live-tip{display:block;margin-top:auto;text-align:center;font-size:12px;line-height:18px;color:var(--ink-faint)}
.live-board.empty .live-tip{margin-top:0}

/* Roster */
.roster-heading{position:absolute;left:366px;right:34px;top:506px;display:flex;justify-content:space-between;align-items:center}
.roster{position:absolute;left:370px;right:38px;top:552px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.roster-card{
 --line:var(--ink);--fill:var(--card-color,var(--pink));--shade:color-mix(in srgb,var(--card-color,#ff8db4) 75%,var(--ink));
 position:relative;height:134px;padding:0;display:flex;flex-direction:column;overflow:visible;text-align:left;
}
.roster-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,#ffffff66 2px,transparent 2.5px) 0 0/16px 16px;pointer-events:none}
.roster-portrait{position:relative;display:block;width:100%;height:90px;object-fit:cover;object-position:50% 0;image-rendering:pixelated}
.roster-copy{position:relative;display:block;margin-top:auto;padding:6px 8px 7px;background:var(--paper);box-shadow:0 -3px 0 0 var(--ink)}
.roster-copy b{display:block;font-size:16px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-copy small{display:block;font-size:12px;line-height:14px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.roster-symbol{position:absolute;z-index:1;top:6px;left:8px;font-size:16px;line-height:1;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.player-tag{
 position:absolute;z-index:2;top:-12px;right:-8px;font-size:12px;line-height:16px;padding:2px 7px;color:#fff;background:var(--sky-d);
 box-shadow:0 0 0 2px var(--ink);transform:rotate(6deg);
}
.roster-card:not(.selected) .player-tag:is(:empty,[data-free]),.player-tag.free{display:none}
.roster-card:hover{transform:translateY(-5px) rotate(-1deg)}
.roster-card.selected{transform:translateY(-6px);box-shadow:var(--pf),0 12px 0 0 var(--ink),0 0 0 9px var(--pink),0 0 0 12px var(--ink)}
.roster-card.selected .player-tag{background:var(--pink-d);animation:bob 1.2s ease-in-out infinite}
.roster-card.is-opponent .player-tag{background:var(--sky-d)}

/* ---------- Battle HUD ---------- */
#hud{pointer-events:none;transition:opacity .5s ease}
#hud button{pointer-events:auto}
#hud.cinematic{opacity:0}
.fighter-hud{position:absolute;top:14px;left:18px;width:486px;display:grid;grid-template-columns:72px 1fr;column-gap:14px;align-items:start}
.fighter-hud.right{left:auto;right:18px;grid-template-columns:1fr 72px}
.fighter-hud.right .hud-face{grid-column:2;grid-row:1/span 4}
.fighter-hud.right>:not(.hud-face){grid-column:1}
.hud-face{
 grid-row:1/span 4;width:72px;height:72px;margin-top:4px;image-rendering:pixelated;background:var(--face-color,#fff);
 box-shadow:0 0 0 4px var(--ink),0 8px 0 4px #2a132e66;
}
.fighter-label{display:flex;align-items:center;gap:10px;height:32px}
.right .fighter-label{flex-direction:row-reverse}
.fighter-label strong{font-size:24px;line-height:28px;white-space:nowrap;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;filter:drop-shadow(0 4px 0 #2a132e88)}
.fighter-label span{font-size:12px;line-height:16px;padding:1px 6px;color:var(--ink);background:var(--paper);box-shadow:0 0 0 2px var(--ink)}
.team-hud .fighter-hud.left .fighter-label span{background:var(--sky)}
.team-hud .fighter-hud.right .fighter-label span{background:var(--lemon)}
.fighter-hud.is-self .fighter-label span{background:var(--pink-d);color:#fff}
.health-shell{
 position:relative;height:26px;margin:2px 3px 0;background:#5a3a5f;overflow:hidden;
 --b:3px;box-shadow:var(--pf),0 6px 0 0 #2a132e88;
}
.health-shell::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 38px,#2a132e40 38px 41px);pointer-events:none}
.health,.health-lag{position:absolute;top:0;bottom:0;left:0;width:100%}
.right .health,.right .health-lag{left:auto;right:0}
.health{box-shadow:inset 0 5px 0 0 #ffffff70,inset 0 -5px 0 0 #00000026;transition:width .12s linear;z-index:1}
.health-lag{background:#fff3f7;transition:width .45s ease .35s}
.health-shell span{position:absolute;inset:0;z-index:2;text-align:center;font-size:16px;line-height:26px;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
.mana-shell{
 position:relative;height:16px;margin:10px 3px 0;background:#3c2f63;overflow:hidden;
 --b:3px;--line:var(--ink);box-shadow:var(--pf);
}
.mana{position:absolute;top:0;bottom:0;left:0;width:100%;background:var(--lilac);box-shadow:inset 0 4px 0 0 #ece3ff,inset 0 -3px 0 0 var(--lilac-d);transition:width .12s linear}
.right .mana{left:auto;right:0}
.mana-shell::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 3px),var(--ink) calc(20% - 3px) 20%);pointer-events:none}
.mana-shell span{position:absolute;inset:0;z-index:1;text-align:center;font-size:12px;line-height:16px;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
.mana-shell.low .mana{background:#9c93b8;box-shadow:inset 0 4px 0 0 #c8c2da}
.mana-shell.low{animation:low-mp 1s steps(2) infinite}
.wins{display:flex;gap:4px;margin:0 3px;height:16px}
.fighter-label .wins{margin:0 0 0 auto}
.right .fighter-label .wins{margin:0 auto 0 0}
.wins i{width:18px;height:16px;display:block;font-style:normal;background:#ffffff55;
 clip-path:polygon(0 12%,12% 0,38% 0,50% 12%,62% 0,88% 0,100% 12%,100% 50%,50% 100%,0 50%);box-shadow:inset 0 0 0 20px #2a132e55}
.wins i.on{background:var(--pink);box-shadow:none;animation:heart .5s var(--ease)}
.timer-block{position:absolute;top:10px;left:540px;width:200px;display:flex;flex-direction:column;align-items:center}
#round{font-size:12px;line-height:16px;padding:2px 10px;color:#fff;background:var(--pink-d);box-shadow:0 0 0 3px var(--ink);position:relative;z-index:1}
#timer{
 display:block;min-width:104px;margin-top:-4px;padding:8px 10px 4px;text-align:center;font-size:48px;line-height:48px;color:var(--ink);background:var(--paper);
 --b:4px;box-shadow:var(--pf),0 8px 0 0 var(--ink),inset 0 -5px 0 0 #f4dfe6;transition:background .2s,color .2s
}
#timer.hurry{background:var(--pink);color:#fff;text-shadow:3px 0 0 #fff;animation:tick .5s steps(2) infinite}
#mapName{margin-top:16px;font-size:16px;line-height:18px;color:#fff;-webkit-text-stroke:5px #2a132e;paint-order:stroke fill}
#supplyTimer{margin-top:6px;font-size:12px;line-height:16px;padding:1px 8px;color:var(--ink);background:var(--mint);box-shadow:0 0 0 2px var(--ink)}
#supplyTimer.soon{background:var(--lemon);animation:tick .4s steps(2) infinite}
#teamScore{margin-top:8px;font-size:16px;letter-spacing:2px;padding:2px 10px;background:var(--paper);box-shadow:0 0 0 3px var(--ink)}
#teamScore i{font-style:normal;color:var(--sky-d)}
#teamScore i.gold{color:var(--lemon-d)}

.skill-tray{position:absolute;bottom:22px;left:22px;display:flex;gap:14px}
.skill-tray.right{left:auto;right:22px}
.skill-box{
 --b:3px;--line:var(--ink);position:relative;width:128px;height:56px;padding:7px 8px;background:var(--paper);overflow:hidden;
 box-shadow:var(--pf),0 7px 0 0 var(--ink),inset 0 -4px 0 0 #f1ddd8;transition:transform .15s var(--ease),filter .2s
}
.skill-box b{position:relative;z-index:1;display:flex;align-items:center;gap:4px;font-size:16px;line-height:20px;white-space:nowrap}
.skill-box kbd{margin:0 4px 0 1px;min-width:20px;padding:1px 3px 0;box-shadow:0 0 0 2px var(--ink),0 2px 0 2px var(--ink);background:var(--lemon-l)}
.skill-box small{position:relative;z-index:1;display:block;margin-top:5px;font-size:12px;line-height:14px;color:var(--ink-soft);white-space:nowrap}
.skill-box .cooldown{position:absolute;inset:0;background:#4b2d4fb0;transform-origin:bottom;pointer-events:none;z-index:2;mix-blend-mode:multiply}
.skill-box.ready{background:#fff}
.skill-box.ultimate{background:var(--lemon-l)}
.skill-box.ultimate.ready{background:var(--lemon);animation:glow-ult 1.4s ease-in-out infinite}
.skill-box.finisher{background:#f6ecff}
.skill-box.finisher.available{background:var(--pink);color:#fff;animation:glow-fin .8s steps(2) infinite,fin-bob .8s var(--ease) infinite,fin-ring 1.2s linear infinite}
/* 2v2: sealed until a team is down to its last fighter. */
.skill-box.finisher.sealed{background:#3b2146;color:#b49bb3;box-shadow:var(--pf),0 7px 0 0 var(--ink),inset 0 -4px 0 0 #2a132e}
.skill-box.finisher.sealed small{color:#9a7f9d}
.skill-box.finisher.sealed kbd{background:#5a3a66;color:#b49bb3}
.skill-box.finisher.sealed::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,#ffffff12 0 6px,transparent 6px 12px)}
.skill-box.finisher.available small{color:#fff}
.skill-box.unaffordable{filter:grayscale(.7);opacity:.72}
#pauseBtn{position:absolute;bottom:26px;left:612px;width:56px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;gap:6px;--fill:var(--paper)}
#pauseBtn i{display:block;width:8px;height:20px;background:var(--ink)}
#networkBadge{position:absolute;bottom:88px;left:540px;width:200px;text-align:center;font-size:12px;line-height:16px;color:#fff;-webkit-text-stroke:4px #2a132e;paint-order:stroke fill}

.team-hud .fighter-hud{top:10px;width:430px;grid-template-columns:48px 1fr;column-gap:10px}
.team-hud .fighter-hud.right{grid-template-columns:1fr 48px}
.team-hud .fighter-hud.row-1{top:80px}
.team-hud .hud-face{width:48px;height:48px;box-shadow:0 0 0 3px var(--ink)}
.team-hud .fighter-label{height:22px;gap:8px}
.team-hud .fighter-label strong{font-size:16px;line-height:20px;-webkit-text-stroke:5px var(--ink)}
.team-hud .health-shell{height:18px;margin-top:2px}
.team-hud .health-shell span{font-size:12px;line-height:18px}
.team-hud .mana-shell{height:10px;margin-top:8px}
.team-hud .mana-shell span{display:none}
.team-hud .wins{display:none}
.fighter-hud.eliminated{opacity:.5;filter:grayscale(.8)}
.team-hud .skill-tray.self-tray{left:50%;transform:translateX(-50%);bottom:22px}
.team-hud .skill-box{width:140px}
.team-hud #pauseBtn{left:auto;right:24px;bottom:28px}
@media(pointer:coarse){.team-hud #pauseBtn{top:164px;bottom:auto}}
.team-hud #networkBadge{left:24px;bottom:34px;width:auto;text-align:left}
.team-hud #timer{font-size:32px;line-height:36px;min-width:84px}
.spectating .skill-tray{opacity:.45;filter:grayscale(.8)}
#spectatorNotice{position:absolute;bottom:104px;left:50%;transform:translateX(-50%);padding:8px 18px;font-size:16px;background:var(--paper);box-shadow:0 0 0 4px var(--ink),0 8px 0 4px var(--ink)}

#announcement{position:absolute;top:238px;left:0;right:0;display:flex;flex-direction:column;align-items:center;pointer-events:none;animation:announce .5s var(--ease) both}
#announceSub{font-size:16px;line-height:20px;padding:4px 16px 3px;margin-bottom:18px;color:var(--ink);background:var(--lemon);box-shadow:0 0 0 4px var(--ink),0 8px 0 4px var(--ink)}
#announceMain{
 font-size:96px;line-height:104px;color:#fff;letter-spacing:8px;
 -webkit-text-stroke:14px var(--ink);paint-order:stroke fill;filter:drop-shadow(0 8px 0 var(--pink-d)) drop-shadow(0 6px 0 #2a132e70)}
#announcement.minor #announceMain{font-size:64px;line-height:72px;letter-spacing:4px}

/* ---------- Battle motion ----------
   The classes here are switched by src/hud-motion.js when a number on the HUD changes.
   Animations fill backwards only, so a finished one hands the element back to its usual style. */
#hud.waiting{opacity:0;visibility:hidden;transition:opacity .16s linear,visibility 0s .16s}
#hud.arrive .fighter-hud.left{animation:hud-in-left .5s var(--ease) backwards}
#hud.arrive .fighter-hud.right{animation:hud-in-right .5s var(--ease) backwards}
#hud.arrive .fighter-hud.row-1{animation-delay:.07s}
#hud.arrive .timer-block{animation:hud-drop .5s var(--ease) .06s backwards}
#hud.arrive .skill-box{animation:hud-rise .4s var(--ease) calc(.14s + var(--i,0)*.05s) backwards}
#hud.arrive #pauseBtn{animation:hud-rise .4s var(--ease) .32s backwards}
.skill-box:nth-child(2){--i:1}
.skill-box:nth-child(3){--i:2}
.skill-box:nth-child(4){--i:3}

.fighter-hud.danger .health-shell{animation:hp-danger .7s steps(2) infinite}
.fighter-hud.danger .health-shell span{color:var(--lemon-l)}
.fighter-hud.danger .hud-face{animation:face-danger .7s steps(2) infinite}
.fighter-hud.struck{animation:hud-struck .26s linear}
.fighter-hud.struck-hard{animation:hud-struck-hard .38s linear}
.fighter-hud.struck .hud-face,.fighter-hud.struck-hard .hud-face{animation:face-hit .32s steps(3)}
.fighter-hud.struck .health,.fighter-hud.struck-hard .health{animation:bar-flash .28s steps(2)}
.fighter-hud.mended .health-shell::before,.skill-box.back::after{
 content:'';position:absolute;top:0;bottom:0;left:-60%;width:60%;z-index:2;pointer-events:none;
 background:linear-gradient(105deg,transparent 0 25%,#ffffffd9 25% 60%,transparent 60%);animation:sheen .45s linear both
}
.fighter-hud.gained .mana{animation:bar-flash .3s steps(2)}
.fighter-hud.spent .mana-shell{animation:mana-spent .28s linear}

.skill-box.used{animation:skill-used .2s linear}
.skill-box.back{animation:skill-back .36s var(--ease)}
.skill-box.back::after{z-index:3}
.skill-box.ultimate.ready.back{animation:skill-back .36s var(--ease),glow-ult 1.4s ease-in-out infinite}
.skill-box.finisher.available.call{animation:fin-call .68s var(--ease),glow-fin .8s steps(2) infinite}
.skill-box.finisher.unseal{z-index:5;animation:fin-unseal .95s var(--ease)}
.skill-box.finisher.unseal::after{content:'';position:absolute;inset:0;z-index:3;background:#fff;animation:fin-flash .5s steps(5) both}
.skill-box.finisher.available.unseal{animation:fin-unseal .95s var(--ease),glow-fin .8s steps(2) infinite}

#timer.beat{animation:timer-beat .3s var(--ease)}

/* Call-outs: every new number or word restarts its own animation. */
#announcement{animation:none}
#announceSub{animation:call-sub .3s var(--ease) backwards}
#announceMain{position:relative}
#announcement.call #announceMain{animation:announce .5s var(--ease) backwards}
#announcement.call[data-kind=count] #announceMain{animation:call-count .34s var(--ease) backwards}
#announcement.call[data-kind=go] #announceMain{animation:call-go .5s var(--ease) backwards}
#announcement.call[data-kind=ko] #announceMain{animation:call-ko .55s var(--ease) backwards}
#announcement[data-kind=ko]{top:268px}
#announcement[data-kind=ko] #announceMain{font-size:128px;line-height:136px;transform:rotate(-4deg)}
#announcement[data-kind=go] #announceMain::before,#announcement[data-kind=ko] #announceMain::before{
 content:'';position:absolute;left:-720px;right:-720px;top:20px;bottom:18px;z-index:-1;
 background:var(--lemon);box-shadow:0 -6px 0 0 var(--ink),0 6px 0 0 var(--ink);animation:call-band .6s linear both
}
#announcement[data-kind=ko] #announceMain::before{background:var(--pink);top:28px;bottom:26px}

.result-dialog h2{animation:call-count .45s var(--ease) .14s backwards}
#resultScore{animation:pop-in .4s var(--ease) .32s backwards}
.result-dialog>button{animation:hud-rise .4s var(--ease) .46s backwards}
.result-dialog>.text-button{animation-delay:.56s}

@keyframes hud-in-left{from{transform:translateX(-560px)}}
@keyframes hud-in-right{from{transform:translateX(560px)}}
@keyframes hud-drop{from{transform:translateY(-190px)}}
@keyframes hud-rise{from{transform:translateY(120px);opacity:0}}
@keyframes hud-struck{25%{transform:translate(-5px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,1px)}}
@keyframes hud-struck-hard{15%{transform:translate(-10px,4px) rotate(-.6deg)}35%{transform:translate(8px,-4px) rotate(.5deg)}55%{transform:translate(-6px,2px)}75%{transform:translate(3px,-1px)}}
@keyframes face-hit{0%{filter:brightness(3) saturate(.2)}60%{filter:brightness(1.4)}}
@keyframes face-danger{50%{box-shadow:0 0 0 4px var(--pink-d),0 8px 0 4px #2a132e66}}
@keyframes bar-flash{0%{filter:brightness(2.2) saturate(.4)}}
@keyframes hp-danger{50%{box-shadow:0 -3px 0 0 var(--pink-d),0 3px 0 0 var(--pink-d),-3px 0 0 0 var(--pink-d),3px 0 0 0 var(--pink-d),0 6px 0 0 #2a132e88}}
@keyframes sheen{to{left:110%}}
@keyframes mana-spent{30%{transform:translateY(3px)}60%{transform:translateY(-1px)}}
@keyframes skill-used{35%{transform:translateY(6px);filter:brightness(1.25)}}
@keyframes skill-back{40%{transform:translateY(-8px)}}
@keyframes fin-call{0%{transform:scale(1.45) rotate(-6deg);filter:brightness(2.4);outline:5px solid #fff;outline-offset:0}30%{transform:scale(.94) rotate(2deg);filter:none}55%{transform:scale(1.08) rotate(-1deg)}100%{outline:2px solid #fff0;outline-offset:44px}}
@keyframes fin-bob{50%{translate:0 -5px}}
@keyframes fin-ring{0%{outline:4px solid var(--pink-l);outline-offset:0}70%,100%{outline:2px solid #ffc6db00;outline-offset:22px}}
@keyframes fin-unseal{0%{transform:scale(.55) rotate(-10deg);filter:brightness(3);outline:6px solid #fff;outline-offset:0}20%{transform:scale(1.6) rotate(5deg);filter:brightness(1.6)}42%{transform:scale(.9) rotate(-2deg);filter:none}60%{transform:scale(1.12) rotate(1deg)}78%{transform:none}100%{outline:2px solid #fff0;outline-offset:64px}}
@keyframes fin-flash{to{opacity:0}}
@keyframes timer-beat{0%{transform:scale(1.22)}}
@keyframes call-sub{from{transform:translateY(-14px);opacity:0}}
@keyframes call-count{0%{transform:scale(1.9) rotate(-6deg);opacity:0}45%{opacity:1}70%{transform:scale(.92)}}
@keyframes call-go{0%{transform:scale(2.4)}50%{transform:scale(.9)}75%{transform:scale(1.06)}}
@keyframes call-ko{0%{transform:scale(3) rotate(-14deg)}35%{transform:scale(.9) rotate(-2deg)}55%{transform:scale(1.08) rotate(-5deg)}}
@keyframes call-band{0%{transform:scaleX(0)}22%{transform:scaleX(1)}72%{transform:scale(1,1)}100%{transform:scale(1,0)}}
@media(prefers-reduced-motion:reduce){
 #hud.arrive *,.fighter-hud.struck,.fighter-hud.struck-hard,.fighter-hud.danger .hud-face,.skill-box.used,.skill-box.back,.skill-box.call,.skill-box.unseal,.skill-box.finisher.available,#timer.beat,#announcement.call #announceMain,#announceMain::before{animation:none!important}
}

/* ---------- Pause, result and room ---------- */
.scrim{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#ffffff20 2px,transparent 2.5px) 0 0/24px 24px,#4b2d4f99}
.dialog,dialog{
 --line:var(--ink);position:relative;width:420px;padding:44px 34px 30px;text-align:center;color:var(--ink);background:var(--paper);border:0;border-radius:0;
 box-shadow:var(--pf),0 14px 0 0 var(--ink),inset 0 -8px 0 0 #fbe8ec;animation:pop-in .38s var(--ease) both
}
.dialog>.eyebrow,dialog form>.eyebrow{
 position:absolute;left:50%;top:-20px;transform:translateX(-50%) rotate(-2deg);margin:0;white-space:nowrap;
 padding:5px 18px 4px;font-size:16px;color:#fff;background:var(--pink-d);--b:3px;box-shadow:var(--pf),0 6px 0 0 var(--ink);text-shadow:1px 0 0 #fff
}
.dialog h2,dialog h2{font-size:32px;line-height:40px;margin:0 0 24px}
.dialog>button{width:100%;margin-top:18px}
.dialog>button:first-of-type{margin-top:0}
.dialog>.text-button{margin-top:14px}
#pause .dialog{width:380px}
#pauseSettings{--fill:var(--sky);--shade:var(--sky-d)}
.result-dialog{width:560px}
.result-dialog h2{
 font-size:48px;line-height:56px;color:#fff;margin-bottom:12px;letter-spacing:4px;
 -webkit-text-stroke:10px var(--ink);paint-order:stroke fill;filter:drop-shadow(0 6px 0 var(--pink-d))}
.result-celebration{
 background:
  radial-gradient(circle,var(--pink) 3px,transparent 3.5px) 0 0/78px 64px,
  radial-gradient(circle,var(--lemon) 3px,transparent 3.5px) 30px 22px/92px 70px,
  radial-gradient(circle,var(--mint) 3px,transparent 3.5px) 12px 40px/66px 84px,
  linear-gradient(#fff6fa 0 72%,#ffd9e8 72%);
 animation:confetti 3s linear infinite;
 display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 20px;padding:10px 12px 6px;box-shadow:0 0 0 3px var(--ink)
}
.result-celebration canvas{width:300px;height:178px;image-rendering:pixelated;flex:none}
#resultScore{font-size:48px;line-height:52px;letter-spacing:4px;white-space:nowrap}
#resultDetail{font-size:12px;line-height:20px;max-width:150px;color:var(--ink-soft);margin:8px 0 0}

#lobby{background:transparent;display:block;animation:pop-in .4s var(--ease) both}
.lobby-sidebar{
 position:absolute;left:34px;top:30px;width:330px;height:656px;padding:40px 24px 22px;background:var(--paper);
 box-shadow:var(--pf),0 12px 0 0 var(--ink),inset 0 -6px 0 0 #fbe8ec;display:flex;flex-direction:column
}
.lobby-sidebar>.eyebrow{position:absolute;top:-16px;left:18px;margin:0;padding:4px 14px 3px;font-size:16px;color:#fff;background:var(--pink-d);--b:3px;box-shadow:var(--pf);text-shadow:1px 0 0 #fff}
.lobby-sidebar h2{font-size:32px;line-height:38px;margin:0 0 10px}
.lobby-subtitle{font-size:16px;color:var(--ink-soft);margin:0 0 20px}
.room-number{position:relative;padding:16px 16px 14px;background:var(--lemon-l);box-shadow:0 0 0 3px var(--ink);outline:3px dashed var(--lemon-d);outline-offset:-10px}
.room-number>small{display:block;font-size:12px;color:var(--ink-soft)}
.room-number>div{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
#lobbyCode{font-size:48px;line-height:52px;letter-spacing:6px;color:var(--pink-d);text-shadow:3px 0 0 var(--pink-d),0 4px 0 #fff}
#copyCode{--b:3px;font-size:16px;padding:6px 12px;--fill:var(--mint);--shade:var(--mint-d)}
#lobbyMap{margin:20px 0 0;font-size:16px}
#lobbyMap::before{content:'✦ ';color:var(--pink-d)}
.network-help{font-size:12px;line-height:20px;color:var(--ink-soft);overflow-wrap:anywhere;margin:12px 0 0}
#lobbyRules{font-size:12px;line-height:20px;color:var(--ink-soft);margin:12px 0 0}
#lobbyDifficultyLabel{display:block;margin-top:14px;font-size:12px;color:var(--ink-soft)}
#lobbyDifficulty{display:block;margin-top:8px;font-size:16px;height:36px}
.cpu-seat{background:var(--lemon-l)}
.cpu-seat .seat-label b{background:var(--ink)}
.seat-copy small.cpu-level{background:var(--paper)}
#readyBtn{margin-top:auto;height:58px}
#leaveRoom{margin-top:14px;align-self:center}
.lobby-main{position:absolute;left:398px;right:34px;top:30px}
.lobby-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding:12px 18px;background:var(--paper);box-shadow:var(--pf)}
.lobby-heading small{font-size:12px;color:var(--ink-soft)}
#lobbyTeams{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.lobby-team>h3{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px;padding:4px 12px 3px;font-size:16px;color:var(--ink);background:var(--team-color);box-shadow:0 0 0 3px var(--ink)}
.lobby-team>h3 small{font-size:12px}
.lobby-seat{
 --line:var(--ink);position:relative;height:216px;margin-bottom:26px;overflow:hidden;background:var(--paper);
 box-shadow:var(--pf),0 10px 0 0 var(--ink);animation:pop-in .35s var(--ease) both
}
.lobby-seat::before{content:'';position:absolute;inset:0 0 auto;height:8px;background:var(--team-color)}
.lobby-seat.own-seat{background:#fff8e2}
.lobby-seat.own-seat::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 4px var(--lemon);pointer-events:none}
.seat-label{position:absolute;left:14px;top:20px;font-size:12px;color:var(--ink-soft)}
.seat-label b{margin-left:8px;padding:1px 6px;color:#fff;background:var(--pink-d);box-shadow:0 0 0 2px var(--ink)}
.lobby-seat canvas{position:absolute;bottom:0;left:4px;width:124px;height:160px;image-rendering:pixelated}
.seat-copy{position:absolute;left:138px;right:16px;top:56px}
.seat-copy b{display:block;font-size:24px;line-height:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seat-copy small{display:table;font-size:12px;margin:10px 0 16px;padding:1px 8px;background:var(--blush);box-shadow:0 0 0 2px var(--ink)}
.seat-copy small.ready{background:var(--mint)}
.seat-copy select{--b:3px;height:36px;font-size:16px}
.seat-empty{position:absolute;inset:36px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.seat-empty>span{font-size:32px;color:var(--ink-faint);animation:bob 1.8s ease-in-out infinite}
.seat-empty p{font-size:16px;color:var(--ink-soft);margin:0}
.seat-empty button{--b:3px;font-size:16px;padding:6px 14px;--fill:var(--sky);--shade:var(--sky-d)}
.lobby-footnote{font-size:12px;color:var(--ink-soft);margin:0;text-align:center}
.duel-lobby .lobby-seat{height:440px}
.duel-lobby .lobby-seat canvas{left:calc(50% - 110px);top:40px;width:220px;height:284px}
.duel-lobby .seat-copy{left:20px;right:20px;top:334px;text-align:center}
.duel-lobby .seat-copy small{margin:8px auto 12px}
.duel-lobby .seat-copy select{width:70%}

#toast{
 position:absolute;z-index:9;bottom:112px;left:50%;transform:translateX(-50%);max-width:640px;padding:12px 22px;text-align:center;font-size:16px;color:var(--ink);background:var(--paper);
 box-shadow:0 0 0 4px var(--ink),0 10px 0 4px var(--ink);animation:toast .35s var(--ease) both
}
#toast::after{content:'';position:absolute;left:calc(50% - 8px);bottom:-18px;width:16px;height:10px;background:var(--ink);clip-path:polygon(0 0,100% 0,50% 100%)}

/* ---------- Dialog windows (outside the scaled stage) ---------- */
dialog{position:fixed;margin:auto;width:480px;max-width:92vw;max-height:86vh;overflow:auto;text-align:left;padding:48px 30px 28px;overscroll-behavior:contain}
dialog::backdrop{background:radial-gradient(circle,#ffffff20 2px,transparent 2.5px) 0 0/24px 24px,#4b2d4fa8}
dialog form{position:static}
dialog form>.eyebrow{top:14px;position:absolute}
dialog .primary{margin-top:24px;font-size:24px}
.close{
 --b:3px;position:absolute;top:12px;right:14px;width:40px;height:40px;padding:0;font-size:24px;line-height:1;--fill:var(--pink);--shade:var(--pink-d);color:#fff;
 -webkit-text-stroke:5px var(--ink);paint-order:stroke fill
}
.setting{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 4px;font-size:16px;border-top:3px dotted var(--ink-faint)}
.setting input[type=range]{width:200px;accent-color:var(--pink-d);height:24px}
.setting input[type=checkbox]{width:24px;height:24px;margin:0;accent-color:var(--pink-d)}
.setting select{width:210px;font-size:16px}
.muted{font-size:12px;color:var(--ink-soft);margin:14px 0 0}
#helpDialog{width:760px}
table{width:100%;border-collapse:collapse;font-size:16px;margin-bottom:16px;box-shadow:0 0 0 3px var(--ink)}
td,th{padding:9px 10px;text-align:left}
th{background:var(--pink);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}
tbody tr:nth-child(2n){background:var(--blush)}
.guide-section{margin-top:12px;background:#fff;box-shadow:0 0 0 3px var(--ink)}
.guide-section summary{position:relative;list-style:none;cursor:pointer;padding:12px 44px 11px 14px;font-size:16px;background:var(--cream)}
.guide-section summary::-webkit-details-marker{display:none}
.guide-section summary::after{content:'+';position:absolute;right:12px;top:8px;width:24px;height:24px;display:grid;place-items:center;color:#fff;background:var(--pink-d);box-shadow:0 0 0 2px var(--ink)}
.guide-section[open] summary{background:var(--lemon-l)}
.guide-section[open] summary::after{content:'−';background:var(--mint-d)}
#helpDialog .guide-section p{margin:0;padding:12px 16px 16px;font-size:16px;line-height:28px;color:var(--ink)}
#helpDialog p b{color:var(--pink-d)}

/* ---------- Touch controls ---------- */
#touchControls{position:fixed;bottom:12px;left:12px;right:12px;display:flex;justify-content:space-between;z-index:8;pointer-events:none}
#touchControls>div{display:flex;gap:14px;align-items:flex-end}
#touchControls button{
 --b:3px;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;width:58px;height:52px;padding:0;font-size:16px;
 --fill:#fffdf8e6;
}
#touchControls [data-key=left],#touchControls [data-key=right]{font-size:24px}
#touchControls [data-key=jump]{--fill:var(--sky);--shade:var(--sky-d)}
#touchControls [data-key=dash]{--fill:var(--mint);--shade:var(--mint-d)}
#touchControls [data-key=attack]{--fill:var(--paper)}
#touchControls [data-key=skill]{--fill:var(--lilac);--shade:var(--lilac-d)}
#touchControls [data-key=ult]{--fill:var(--lemon);--shade:var(--lemon-d)}
#touchControls [data-key=finish]{--fill:var(--pink);--shade:var(--pink-d);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill}

/* ---------- Motion ---------- */
@keyframes pop-in{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes hop{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-18px) scale(1.03,.97)}70%{transform:translateY(0) scale(1.04,.95)}100%{transform:none}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
@keyframes bounce-y{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes vs-pulse{0%,100%{transform:scale(1) rotate(-6deg)}50%{transform:scale(1.07) rotate(-2deg)}}
@keyframes nudge{0%,86%,100%{transform:translateY(0)}90%{transform:translateY(-5px)}95%{transform:translateY(0)}}
@keyframes blink{50%{opacity:.25}}
@keyframes tick{50%{transform:translateY(-2px)}}
@keyframes heart{0%{transform:scale(.3)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes low-mp{50%{box-shadow:0 -3px 0 0 var(--pink-d),0 3px 0 0 var(--pink-d),-3px 0 0 0 var(--pink-d),3px 0 0 0 var(--pink-d)}}
@keyframes glow-ult{50%{background:#ffe99e}}
@keyframes glow-fin{50%{background:var(--pink-d)}}
@keyframes announce{0%{opacity:0;transform:scale(1.6)}60%{opacity:1;transform:scale(.94)}100%{transform:scale(1)}}
@keyframes toast{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes confetti{from{background-position:0 0,30px 22px,12px 40px,0 0}to{background-position:0 64px,30px 92px,12px 124px,0 0}}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
 .footer-note{display:none}
 .topbar{height:46px}
 .brand{font-size:16px}
 .cabinet{width:min(96vw,calc((100dvh - 108px)*16/9))}
 .footbar{font-size:12px;padding-top:22px}
}
@media(max-height:650px) and (orientation:landscape){
 .cabinet{width:min(97vw,calc((100dvh - 70px)*16/9));margin:8px auto}
 .topbar{height:40px;padding-bottom:4px}
 .brand{font-size:16px}.brand-mark{width:24px;height:24px}
 .topbar nav a,.topbar nav button{font-size:12px;padding:4px 8px}
 .footbar{display:none}
}
@media(max-width:700px) and (orientation:portrait){
 body{align-items:flex-start}
 #touchControls>div{display:grid;grid-template-columns:repeat(2,58px);gap:14px}
 .cabinet{width:calc(100% - 24px);margin:10px auto 16px}
 .topbar{height:auto;gap:8px;padding-bottom:12px;flex-wrap:wrap}
 .brand{font-size:16px}.brand-mark{width:24px;height:24px}.brand em{display:none}
 .topbar nav{gap:10px}
 .topbar nav a,.topbar nav button{font-size:12px;padding:4px 8px}
 .topbar #actionPreview{display:none}

 .cabinet[data-view=menu] #frame,.cabinet[data-view=lobby] #frame{aspect-ratio:auto;overflow:visible;--b:4px}
 .cabinet[data-view=menu] #stage,.cabinet[data-view=lobby] #stage{position:relative;width:100%;height:auto;transform:none!important;overflow:hidden}
 .cabinet:not([data-view=battle]) #game{width:100%;height:100%;object-fit:cover}

 #menu{position:relative;inset:auto;display:flex;flex-direction:column;padding:22px 16px 26px}
 .titlecrest{position:relative;left:auto;top:auto;padding-bottom:44px}
 .titlecrest h1{font-size:32px;line-height:40px;letter-spacing:3px;-webkit-text-stroke:9px var(--ink);filter:drop-shadow(0 5px 0 var(--pink-d))}
 .title-ribbon{left:4px;top:44px;font-size:12px}
 .story-entry{position:relative;left:auto;top:auto;align-self:flex-end;margin:8px 4px 18px;width:120px;height:46px;font-size:20px}

 .selection-stage{position:relative;inset:auto;height:330px;flex:none;order:1}
 .fighter-slot{width:50%;height:300px;left:0;top:10px}
 #selectSlot1{right:0}
 .slot-label{font-size:12px;line-height:16px;padding:2px 6px}
 .fighter-portrait{width:100%;height:190px}
 .fighter-portrait canvas{width:188px;height:169px;left:calc(50% - 94px);bottom:8px}
 .fighter-portrait::before{left:calc(50% - 60px);right:auto;width:120px;height:16px}
 .fighter-portrait::after{width:220px;height:220px;margin:-110px 0 0 -110px}
 .fighter-slot b{font-size:16px;line-height:20px;padding:4px 10px 2px;margin-top:8px}
 .slot-hint{display:none}
 .selected-description{top:294px;left:0;width:50%;font-size:12px}
 #selectedDescription1{right:0}
 #versusMark{top:78px;left:calc(50% - 36px);width:72px;height:72px}
 #versusMark span{font-size:24px;-webkit-text-stroke:7px var(--ink);filter:drop-shadow(0 3px 0 var(--pink-d))}
 #teamSeats{padding:40px 4px 0}
 .team-flag{top:8px;font-size:12px;line-height:16px;padding:2px 8px 1px}
 .team-seat small{font-size:10px;line-height:14px;padding:2px 4px 1px}
 .team-seat b{font-size:12px;line-height:16px;padding:2px 5px 1px;margin-top:6px}
 .team-vs{margin-top:44px}
 .team-vs span{font-size:16px;-webkit-text-stroke:5px var(--ink);filter:drop-shadow(0 2px 0 var(--pink-d))}
 .team-seat.waiting .seat-wait{font-size:16px}
 #teamNote{bottom:12px}
 #teamNote b{font-size:12px;line-height:16px;padding:4px 8px 3px;max-width:94%}
 #teamNote span{margin-top:8px;font-size:10px;line-height:14px;padding:0 8px}

 .roster-heading{position:relative;inset:auto;order:2;margin:30px 0 14px;font-size:16px}
 .roster{position:relative;inset:auto;order:3;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 18px;padding:6px 4px 0}
 .roster-card{height:120px}
 .roster-portrait{height:74px}
 .roster-copy small{display:none}

 .live-board{position:relative;inset:auto;height:auto;order:4;margin:44px 4px 0}
 .live-list{display:grid;grid-template-columns:1fr 1fr;height:auto}
 .live-none{margin:8px 0;grid-column:1/-1}
 .live-none::before{display:none}
 .live-tip{grid-column:1/-1}

 .mode-panel{position:relative;left:auto;top:auto;width:auto;height:auto;margin:44px 4px 0;order:5;gap:16px}
 .tabbar{grid-template-columns:repeat(3,1fr);gap:14px}
 .tabbar button{height:56px;flex-direction:column;justify-content:center;gap:2px;padding:4px 2px;text-align:center;font-size:12px}
 .tabbar button small{margin:0;font-size:12px}
 .mode-icon{display:none}
 .map-select{flex:none}
 .map-view{flex:none;max-height:none;aspect-ratio:21/9}
 .match-rule{margin-top:0}

 .footbar{flex-direction:column;gap:8px;text-align:center;padding-top:26px}
 .footbar>span{justify-content:center}

 #lobby{position:relative;inset:auto;display:block;padding:24px 16px 28px}
 .lobby-sidebar{position:relative;inset:auto;width:auto;height:auto;padding:36px 18px 18px}
 .lobby-sidebar h2{font-size:24px;line-height:30px}
 #lobbyCode{font-size:32px;line-height:40px}
 #readyBtn{margin-top:20px}
 .lobby-main{position:relative;inset:auto;margin-top:36px}
 .lobby-heading{flex-direction:column;align-items:flex-start;gap:6px}
 #lobbyTeams{gap:16px}
 .lobby-seat{height:262px}
 .lobby-seat canvas{left:calc(50% - 45px);width:90px;height:117px;top:40px}
 .seat-copy{left:8px;right:8px;top:160px;text-align:center}
 .seat-copy b{font-size:16px;line-height:20px;text-shadow:none}
 .seat-copy small{margin:6px 0 8px}
 .seat-copy select{height:32px;font-size:12px}
 .seat-label{left:8px;top:16px}
 .duel-lobby .lobby-seat{height:280px}
 .duel-lobby .lobby-seat canvas{width:130px;height:167px;left:calc(50% - 65px);top:36px}
 .duel-lobby .seat-copy{top:200px;left:8px;right:8px}
 .duel-lobby .seat-copy select{width:100%}

 dialog{padding:48px 18px 22px;width:calc(100% - 28px);max-width:none}
 .setting{font-size:12px;flex-wrap:wrap}
 .setting select{width:170px;font-size:12px}
 .setting input[type=range]{width:150px}
 #helpDialog{width:calc(100% - 28px)}
 #helpDialog table{font-size:12px}
 td,th{padding:7px 6px}
 #helpDialog .guide-section p{font-size:12px;line-height:22px}
 .cabinet[data-view=menu] #toast,.cabinet[data-view=lobby] #toast{position:fixed;bottom:24px;font-size:12px;max-width:90vw;width:max-content}
}
.cabinet:fullscreen{width:min(100vw,calc(100dvh*16/9));margin:auto;display:flex;flex-direction:column;justify-content:center;background:#ffd9e7}
.cabinet:fullscreen .topbar,.cabinet:fullscreen .footbar{display:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* CPU difficulty dial (src/cpu-difficulty-dial.js): a blossom on a four-stop rail, drawn straight
   onto the stage floor under the CPU fighters. The native range input stays inside it for the
   keyboard. Normal and human portraits keep their existing dimensions, position and rendering. */
.cpu-difficulty-control{position:relative;color:var(--ink);font-size:12px;line-height:14px}
.cpu-difficulty-control>label{display:flex;justify-content:center;gap:8px;margin-bottom:6px;color:var(--ink-soft)}
.cpu-difficulty-control output{color:var(--pink-d)}
.cpu-dial{position:relative;height:30px;cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.cpu-dial.dragging{cursor:grabbing}
.cpu-dial canvas{position:absolute;left:-28px;top:-28px;width:calc(100% + 56px);height:86px;image-rendering:pixelated;pointer-events:none}
.cpu-dial input,.cpu-dial #lobbyDifficulty{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}
.cpu-dial:has(input:focus-visible){outline:3px dashed var(--pink-d);outline-offset:4px}
.cpu-dial:has(input:disabled){cursor:default}
.cpu-dial:has(input:disabled) canvas{opacity:.55}
.cpu-difficulty-scale{position:relative;height:14px;margin-top:4px;color:var(--ink-faint)}
.cpu-difficulty-scale span{position:absolute;top:0;transform:translateX(-50%);padding:0 4px;white-space:nowrap;cursor:pointer;transition:color .15s}
.cpu-difficulty-scale span:hover{color:var(--ink-soft)}
.cpu-difficulty-control[data-difficulty=easy] .cpu-difficulty-scale .active{color:var(--mint-d)}
.cpu-difficulty-control[data-difficulty=normal] .cpu-difficulty-scale .active{color:var(--pink-d)}
.cpu-difficulty-control[data-difficulty=hard] .cpu-difficulty-scale .active{color:#d9552a}
.cpu-difficulty-control[data-difficulty=expert] .cpu-difficulty-scale .active{color:#b8791a}
#singleOptions{position:absolute;z-index:4;right:18px;top:396px;width:300px}
#menu[data-cpu-selection=true] #singleOptions>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#menu[data-cpu-selection=true] #selectSlot1 .slot-hint{visibility:hidden}
#menu[data-cpu-selection=true] #selectedDescription1{top:446px}
#menu[data-format=teams] #singleOptions{top:auto;bottom:16px}
#menu[data-format=teams]:has(#singleOptions:not([hidden])) #teamNote{left:16px;right:calc(50% + 52px);bottom:14px}
#menu[data-format=teams]:has(#singleOptions:not([hidden])) #teamNote b{font-size:12px;line-height:16px;padding:3px 8px;max-width:100%}
#menu[data-format=teams]:has(#singleOptions:not([hidden])) #teamNote span{margin-top:9px;font-size:12px;line-height:16px}
#lobbyDifficultyLabel{width:calc(50% - 14px);margin:0 0 18px auto;color:var(--ink);font-size:12px}

/* What the tier does to the CPU's name plate and backdrop. Each tier has its own keyframes name so
   that every change replays the pop. */
#menu[data-cpu-selection=true] #selectSlot1 b{animation:tier-normal .36s var(--ease)}
#menu[data-cpu-selection=true]:has(#singleOptions[data-difficulty=easy]) #selectSlot1 b{font-size:24px;animation-name:tier-easy}
#menu[data-cpu-selection=true]:has(#singleOptions[data-difficulty=hard]) #selectSlot1 b{animation-name:tier-hard}
#menu[data-cpu-selection=true]:has(#singleOptions[data-difficulty=hard]) #selectSlot1 .fighter-portrait::after{opacity:.8;background:repeating-conic-gradient(from 0deg,#ffb37a 0 9deg,transparent 9deg 18deg);animation:spin 16s linear infinite}
#menu[data-cpu-selection=true]:has(#singleOptions[data-difficulty=expert]) #selectSlot1 b,
#menu[data-format=teams]:has(#singleOptions[data-difficulty=expert]:not([hidden])) .team-seat.cpu b{
 color:var(--lemon);background:linear-gradient(105deg,#3b2146 0 40%,#7a4a9a 50%,#3b2146 60% 100%) 100% 0/300% 100%;
 box-shadow:var(--pf),0 8px 0 0 var(--ink),inset 0 4px 0 0 #ffffff26;animation:tier-expert .5s var(--ease),tier-shine 2.6s linear .5s infinite
}
#menu[data-cpu-selection=true]:has(#singleOptions[data-difficulty=expert]) #selectSlot1 b{font-size:36px}
#menu[data-format=teams]:has(#singleOptions[data-difficulty=expert]:not([hidden])) .team-seat.cpu b{box-shadow:var(--pf),0 5px 0 0 var(--ink),inset 0 3px 0 0 #ffffff26}
#menu[data-cpu-selection=true]:has(#singleOptions[data-difficulty=expert]) #selectSlot1 .fighter-portrait::after{opacity:.95;background:repeating-conic-gradient(from 0deg,#ffd96b 0 9deg,#d9c2ff 9deg 18deg);animation:spin 9s linear infinite}
@keyframes tier-easy{0%{scale:1.3}45%{scale:.94}}
@keyframes tier-normal{0%{scale:1.3}45%{scale:.94}}
@keyframes tier-hard{0%{scale:1.3}45%{scale:.94}}
@keyframes tier-expert{0%{scale:1.8}35%{scale:.9}60%{scale:1.08}}
@keyframes tier-shine{to{background-position:-50% 0}}

@media(max-width:700px) and (orientation:portrait){
 .selection-stage:has(#singleOptions:not([hidden])){height:392px}
 #singleOptions{right:8px;top:322px;width:calc(50% - 16px)}
 #menu[data-cpu-selection=true] #selectedDescription1{top:294px}
 #menu[data-cpu-selection=true]:has(#singleOptions[data-difficulty=easy]) #selectSlot1 b{font-size:14px}
 #menu[data-cpu-selection=true]:has(#singleOptions[data-difficulty=expert]) #selectSlot1 b{font-size:18px}
 #menu[data-format=teams] #singleOptions{top:auto;bottom:12px}
 #menu[data-format=teams]:has(#singleOptions:not([hidden])) #teamNote{left:10px;right:calc(50% + 8px);bottom:14px}
 #menu[data-format=teams]:has(#singleOptions:not([hidden])) #teamNote b{font-size:10px;line-height:14px;padding:3px 5px}
 #menu[data-format=teams]:has(#singleOptions:not([hidden])) #teamNote span{font-size:10px;line-height:14px;padding:0;margin-top:7px}
 #lobbyDifficultyLabel{width:calc(50% - 8px)}
}