/* Layout: full-screen arena, TFT-style. The 3D canvas fills the frame; the HUD sits on its edges: round tracker (top centre),
   menu (top right: ⚙️ Settings and its panel), traits (left), players (right), shop bar with the item bench (bottom). One dark theme.
   Sizes are in rem and the root font-size follows the window (1rem = 16px at 1440x810), so the HUD grows with the screen
   the way TFT's does. Hairlines stay 1px. */
:root{
  --bg:#0b0e1a; --panel:#141a2e; --panel2:#1b2340; --line:#2a3560; --glass:rgba(12,16,32,.84);
  --fg:#e8ecff; --dim:#8b94c0; --gold:#ffc94a; --ki:#7ad0ff; --foe:#ff6a5a; --good:#5ee08a;
  --disp:'Russo One','Arial Black',sans-serif; --body:'Rubik',system-ui,sans-serif;
  --prism:linear-gradient(135deg,#8ff0ff,#e8a0ff 40%,#ffb0d8 70%,#fff2a8);   /* prismatic augments (the other tiers use their colour, --c) */
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
html{font-size:clamp(14px,min(1.111vw,1.975vh),32px)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);overflow:hidden}
#app{position:relative;width:100%;height:100%;min-height:500px;overflow:hidden;background:#141c36;user-select:none;-webkit-user-select:none;--topH:3.5rem;--shopH:9.5rem;--plW:9.5rem}
#app canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}
#app:fullscreen{min-height:0}
#ov{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:.75rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
button{font-family:var(--disp);font-size:.875rem;letter-spacing:.5px;background:var(--panel2);color:var(--fg);border:1px solid var(--line);border-radius:.5625rem;padding:.625rem .8125rem;cursor:pointer}
button:focus-visible{outline:.125rem solid var(--gold);outline-offset:.125rem}
button.primary{background:linear-gradient(180deg,#2b6cff,#1a3fb0);border-color:#4a7dff}
button.gold{color:var(--gold);border-color:#6b5a1f;background:#1c1a14}
button.danger{color:var(--foe);border-color:#6b2a22}
button:disabled{opacity:.4;pointer-events:none}
/* round tracker (top centre) and menu (top right) */
.roundbar{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:.9rem;padding:calc(.45rem + env(safe-area-inset-top,0px)) 1.2rem .525rem;border-top:0;border-radius:0 0 1.05rem 1.05rem;max-width:calc(100% - 13rem)}   /* centred, as wide as its text needs: the menu beside it is two buttons at most (⚙️, and 🏁 while spectating), so 6.5rem a side keeps it clear */
.stage{display:flex;flex-direction:column;align-items:center;line-height:1;flex:none}
.stage small{font-size:.675rem;letter-spacing:.1125rem;text-transform:uppercase;color:var(--dim)}
.stage b{font-family:var(--disp);font-weight:400;font-size:1.575rem}
.rtrack{display:flex;gap:.3rem;flex:none}
.ri{width:1.8rem;height:1.8rem;border-radius:.45rem;display:flex;align-items:center;justify-content:center;font-size:.9rem;background:#10152a;border:1px solid var(--line);opacity:.6}
.ri.done{opacity:.25}
.ri.now{opacity:1;border-color:var(--gold);background:#241d0b;box-shadow:0 0 .5rem rgba(255,201,74,.5)}
.ri.art img{width:1.1875rem;height:1.1875rem;object-fit:contain;pointer-events:none;-webkit-user-drag:none}   /* the owner's drawn round icons (art.js HUD_ART), inside the slot's own size (1.5rem on their first day, then .875rem, which the owner found too small: three quarters of the first size, the menu's and the tabs' too) */
/* the clock and the banner beside it (whose pick it is, the next rival, the fight) share one row under the round
   tracker, centred as a pair, so the banner never hangs down over the board (the camera fit keeps the board below the row) */
.clockRow{position:absolute;top:calc(4.25rem + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:5;display:flex;width:max-content;align-items:center;gap:.625rem;max-width:calc(100% - 1.5rem);pointer-events:none}
.clockRow>*{pointer-events:auto}
/* the match badge: the clock (#btnFight, .fight) at its left, then whose pick it is or the rival; the clock alone when .bare */
.turnBanner{display:flex;align-items:center;gap:.75rem;padding:.3125rem 1rem .3125rem .3125rem;border-radius:2.25rem;border:1px solid #3a4a7a;animation:turnIn .35s cubic-bezier(.2,1.3,.4,1) both;pointer-events:none;white-space:nowrap;max-width:38rem}   /* the row (.clockRow) keeps it inside the window: a percentage here would shrink it to fit itself */
.turnBanner.bare{padding:.3125rem}.turnBanner.bare>:not(.fight){display:none}
.turnBanner .av{width:2.875rem;height:2.875rem;border-radius:50%;overflow:hidden;border:.125rem solid #9fb4d8;background:#10142a;flex:none;display:flex;align-items:center;justify-content:center;font-size:1.25rem;line-height:1}   /* a face, or a sign in its place (👁 spectating, 🤜 a Clash whose rival isn't known yet) */
.turnBanner .av img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.turnBanner .who{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.turnBanner .who small{font-family:var(--disp);font-size:.625rem;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.turnBanner .who b{font-family:var(--disp);font-size:1.1875rem;color:#fff;overflow:hidden;text-overflow:ellipsis}
.turnBanner .clock{font-family:var(--disp);font-size:1rem;color:#fff;min-width:1.5rem;text-align:right;flex:none}.turnBanner .clock:empty{display:none}
/* the rival's health: a chip with a bar under the number */
.turnBanner .hp{display:inline-flex;flex-direction:column;align-items:flex-end;gap:.1875rem;min-width:3.25rem}
.turnBanner .hp b{font-size:1rem;color:#fff;text-shadow:0 1px .125rem #000}.turnBanner .hp b::after{content:" HP";font-size:.625rem;color:var(--dim);letter-spacing:.06em}
.turnBanner .hp i{display:block;width:100%;height:.3125rem;border-radius:.25rem;background:rgba(255,255,255,.12);overflow:hidden;position:relative}
.turnBanner .hp i::after{content:"";position:absolute;inset:0;width:var(--w,100%);background:linear-gradient(90deg,#ff6a5a,#ffc94a);border-radius:.25rem}
.turnBanner.mine{border-color:var(--gold);box-shadow:0 0 1.25rem rgba(255,201,74,.75);animation:turnIn .35s cubic-bezier(.2,1.3,.4,1) both,turnPulse 1s ease-in-out .35s infinite alternate}
.turnBanner.mine .av{border-color:var(--gold)}.turnBanner.mine b{color:var(--gold)}.turnBanner.mine small{color:#ffe9a8}
.turnBanner.foe{border-color:#8a2a22}.turnBanner.foe .av{border-color:#ff6a5a}.turnBanner.foe b{color:#ffd0c8}
.turnBanner.fighting{border-color:#b0483c}.turnBanner.fighting b{color:#fff}   /* a fight on: a warmer border, held still (it pulsed and glowed when this class was meant to come on, before the 2026-10-06 brief kept a normal round's badge restrained) */   /* "fighting", not "fight": that is the clock button's class (a fixed width) */
/* the clock inside the badge: a label over its seconds (or one word), rounded to the badge's left end */
.turnBanner .fight{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:10rem;min-height:2.875rem;padding:.25rem 1.25rem;line-height:1.05;box-shadow:0 0 .75rem rgba(43,108,255,.45);pointer-events:auto}
.turnBanner .fight small{font-family:var(--disp);font-size:.6875rem;letter-spacing:.1em;color:#d6e4ff;opacity:.9}
.turnBanner .fight b{font-family:var(--disp);font-size:1.375rem;color:#fff;letter-spacing:.03em}
.turnBanner .fight.soon b{color:#ff8a7a;text-shadow:0 0 .4em rgba(255,90,74,.8)}
/* the warm-up's draft (ui.js renderTurn, .pick): the badge a third bigger, since it is the only thing to read while the fighters are picked (2026-10-05) */
/* a boss mission (ui.js renderTurn): the same badge with a red-purple accent at its border and under its glass, a BOSS tag
   by the mission's line, and the boss's face pulsing once as its countdown begins (the owner's brief of 2026-10-06:
   special, never noisy: no constant pulse, no flames, no bigger badge) */
.turnBanner.boss{border-color:#8a3a7e;background-image:linear-gradient(90deg,rgba(150,40,120,.22),rgba(170,40,50,.14) 55%,rgba(170,40,50,0))}
.turnBanner.boss .av{border-color:#d0679a;box-shadow:0 0 .5rem rgba(208,103,154,.45);animation:bossPulse .8s ease-out .35s 1 both}
.turnBanner.boss .who b{color:#ffe2ea}
.turnBanner .bossTag{display:inline-block;margin-left:.375rem;padding:0 .3125rem;border-radius:.25rem;background:linear-gradient(90deg,#7a2a6e,#a8323a);color:#ffe9f0;font-size:.5625rem;letter-spacing:.12em;line-height:1.5;vertical-align:.0625rem}
@keyframes bossPulse{0%{transform:scale(1)}40%{transform:scale(1.12);box-shadow:0 0 1.25rem rgba(230,90,150,.85)}100%{transform:scale(1)}}
.turnBanner.pick{padding:.4375rem 1.375rem .4375rem .4375rem;gap:1rem;max-width:46rem}
.turnBanner.pick .av{width:3.875rem;height:3.875rem;font-size:1.625rem}.turnBanner.pick .who small{font-size:.8125rem}.turnBanner.pick .who b{font-size:1.5625rem}
.turnBanner.pick .fight{min-width:13rem;min-height:3.875rem;padding:.375rem 1.625rem}.turnBanner.pick .fight small{font-size:.875rem}.turnBanner.pick .fight b{font-size:1.8125rem}
/* the clock's colour: amber with gold seconds, whatever the phase (never the blue of a primary button) */
.turnBanner .fight{background:linear-gradient(180deg,#6a4e12,#2f2208);border:1px solid var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 .125rem .5rem rgba(0,0,0,.35)}
.turnBanner .fight small{color:#ffe9a8}.turnBanner .fight b{color:var(--gold)}
@keyframes foePulse{from{box-shadow:0 0 .5rem rgba(255,106,90,.45)}to{box-shadow:0 0 1.5rem rgba(255,106,90,.95)}}
@keyframes turnIn{from{opacity:0;transform:translateY(-.5rem) scale(.8)}to{opacity:1;transform:none}}
@keyframes turnPulse{from{box-shadow:0 0 .625rem rgba(255,201,74,.5)}to{box-shadow:0 0 1.75rem rgba(255,201,74,1)}}
.phase{font-family:var(--disp);font-size:.975rem;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:#dfe5ff}
.menu{position:absolute;top:calc(.5rem + env(safe-area-inset-top,0px));right:.625rem;z-index:5;display:flex;gap:.3125rem}
.menu button{width:2.375rem;height:2.375rem;padding:0;font-size:.9375rem;background:var(--glass);border-radius:50%;display:flex;align-items:center;justify-content:center}
.menu #setBtn{font-size:1.125rem;border-color:#6b5a1f}
.menu #musicTop{font-size:1rem}.menu #musicTop.off{opacity:.6;filter:grayscale(1)}#app.mission #musicTop,#app.duel #musicTop{display:none}   /* the music mute beside ⚙️ (ui.js renderMusic): grey while the music is off */
/* the top-right utilities (the owner's brief of 2026-10-06, the final UI pass): ⚙️'s
   drawn picture the button (art.js HUD_ART, ui.js menuIcon; the buttons' own disc and border step aside): the same box,
   the pictures at the same weight (the medallion at 2.125rem, its gems past its ring, read heavier than the gear: 1.9rem,
   a tenth less), the same quiet states: hover a touch brighter with a faint gold light, pressed a shade smaller; ⚙️ open,
   a restrained gold light and its quarter turn */
.menu #setBtn.art{width:2.25rem;height:2.25rem;background:none;border:0;box-shadow:none;overflow:visible;transition:transform .15s,filter .15s}
.menu #setBtn.art img{flex:none;object-fit:contain;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 .0625rem .1875rem rgba(0,0,0,.55));transition:transform .3s ease}
.menu #setBtn.art img{width:1.75rem;height:1.75rem}
.menu #setBtn:hover,.menu #setBtn.on{border-color:var(--gold);background:#241d0b;box-shadow:0 0 .5rem rgba(255,201,74,.5)}   /* (its emoji, while the picture is missing) */
.menu #setBtn.art:hover{background:none;box-shadow:none;filter:brightness(1.1) drop-shadow(0 0 .3rem rgba(255,201,74,.45))}
.menu #setBtn.art.on{background:none;box-shadow:none;filter:brightness(1.06) drop-shadow(0 0 .375rem rgba(255,201,74,.55))}
.menu #setBtn.art.on img{transform:rotate(45deg)}
.menu #setBtn.art:active{transform:scale(.95)}
/* trait rail, just right of the item column */
.traits{position:absolute;left:.625rem;top:calc(var(--topH) + .625rem);display:flex;flex-direction:column;gap:.25rem;z-index:3;max-height:min(var(--colH,100%),calc(100% - var(--topH) - var(--shopH) - 6.875rem));overflow-y:auto;width:fit-content;max-width:11rem;scrollbar-width:thin}   /* the Trait Stack: a column of chips as wide as its widest name (14rem of names and breakpoints until 2026-10-05); a fight folds it to the chips (presentation.js) */
.trait{display:flex;align-items:center;gap:.375rem;padding:.25rem .5625rem .25rem .3125rem;cursor:pointer;font-size:.875rem}   /* a chip: the count in its tier's hex, the icon over a dot a breakpoint, the name; its breakpoints and bonuses are on its card (ui.js renderTraitPop) */
.trait .num{flex:none;width:2rem;height:1.75rem;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:.9375rem;background:#232c4c;color:var(--dim);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.trait.on .num{background:var(--gold);color:#241a00}
.trait.tier1 .num{background:#c07a3e;color:#1c0e03}
.trait.tier2 .num{background:#cfd6e6;color:#10141f}
.trait.tier3 .num{background:linear-gradient(135deg,#ffe38a,#ffb42a);color:#241a00}
.trait .tn{font-weight:500;white-space:nowrap;max-width:6rem;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;transition:max-width .35s ease,opacity .35s ease,margin .35s ease}
.trait .bp{display:none}   /* (the chip's card shows them) */
.trait .bp b{color:var(--gold);font-weight:500}
.trait.open{border-color:#6b5a1f}
/* inspect card */
.inspect{position:absolute;right:.625rem;bottom:calc(var(--shopH) + 3rem);width:18.125rem;z-index:6;padding:.75rem;max-height:calc(100% - var(--topH) - var(--shopH) - 4rem);overflow-y:auto}   /* bottom right, over the lower end of the player column and a little up off the shop: off the board's far half, where the fight is */
.insTop{display:flex;gap:.6875rem;align-items:center;padding-right:1.125rem}
.insTop img{width:5.75rem;height:5.75rem;border-radius:.625rem;object-fit:cover;object-position:50% 15%;border:.125rem solid var(--tier,#555);background:radial-gradient(circle at 50% 30%,#2a3560,#10142a);flex:none}
.insName{font-family:var(--disp);font-size:1.1875rem;line-height:1.15}
.insStars{color:var(--gold);font-size:.875rem;letter-spacing:1px}
.tags{display:flex;gap:.25rem;flex-wrap:wrap;margin-top:.3125rem}
.tag{font-size:.6875rem;padding:.125rem .5rem;border-radius:6.1875rem;background:#232c4c;color:#c9d0f0}
.tag.enemy{background:#4a1c22;color:#ffb0a8}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.3125rem;margin:.625rem 0 .25rem;font-variant-numeric:tabular-nums}
.stat{background:#10152a;border-radius:.5rem;padding:.3125rem .25rem;text-align:center;font-size:.625rem;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.stat b{display:block;color:var(--fg);font-size:.875rem;font-family:var(--disp);font-weight:400;text-transform:none;letter-spacing:0}
.skill{display:flex;gap:.5625rem;align-items:flex-start;padding:.5rem 0 .25rem;border-top:1px solid var(--line);margin-top:.375rem}
.skill.locked img{filter:grayscale(1) brightness(.55)}.skill.locked p{opacity:.6}.skill.locked .sn small{color:#ffb86a}   /* an Awakening this star doesn't have yet (Chopper's Monster Point before 2 stars) */
.skill img{width:3.5rem;height:4.375rem;object-fit:cover;object-position:50% 20%;border-radius:.4375rem;flex:none;border:1px solid var(--line)}
.skill .sn{font-family:var(--disp);font-size:.8125rem;color:var(--ki)}
.skill .sn small{color:var(--gold);font-family:var(--body);font-size:.625rem;margin-left:.3125rem;letter-spacing:.5px;text-transform:uppercase}
.skill p{margin:.1875rem 0 0;font-size:.75rem;color:var(--dim);line-height:1.45}
.insItems{display:flex;gap:.3125rem;flex-wrap:wrap;margin-top:.5rem}
.insBtns{display:flex;gap:.375rem;margin-top:.625rem}
.insBtns button{flex:1;padding:.5625rem}
.xBtn{position:absolute;top:.375rem;right:.375rem;background:none;border:0;color:var(--dim);font-size:1.25rem;padding:.125rem .5rem;font-family:var(--body)}
@media (pointer:coarse){.overlay .box .xBtn{min-width:2.75rem;min-height:2.75rem;font-size:1.5rem;line-height:1}}   /* a finger's target on a tablet or a phone */
/* players (right): everyone's health, TFT-style */
.players{position:absolute;right:.625rem;top:calc(var(--topH) + .75rem);z-index:3;display:flex;flex-direction:column;gap:.25rem;width:var(--plW);max-height:calc(100% - var(--topH) - 1.125rem - env(safe-area-inset-bottom,0px));overflow:hidden;--plTabSize:2rem;--tile:clamp(2rem,calc((100vh - var(--topH) - var(--plTabSize) - 1rem) / 8 - 1.75rem),4.25rem)}   /* the Rival Ladder: one column of player tiles running down the right edge, past the shop's top (the shop is never wider than 70rem, so a 10rem strip is always free beside it); the portraits share the room left below the tabs so all eight rows fit */
@media (min-width:761px) and (max-width:1259px){.players{max-height:calc(100% - var(--topH) - var(--shopH) - 1.5rem);--tile:clamp(1.75rem,calc((100vh - var(--topH) - var(--shopH) - var(--plTabSize) - 2.5rem) / 8 - 1.75rem),5rem)}}   /* below 90rem at the 14px floor the shop spans the window, so the list stops above it */
.players.dmgTab{overflow-y:auto;scrollbar-width:thin}   /* the Damage tab keeps the player list's height (ui.js plH) and scrolls inside it */
/* a player row: the name, then the tile — one framed piece: the health bar along its left edge, the square portrait beside it with the health number across its top */
.pl{position:relative;align-self:flex-end;max-width:9.375rem;display:flex;align-items:center;justify-content:flex-end;gap:.375rem;min-width:0}   /* inside the strip beside the shop, so no name runs over it */
.pl .pn{flex:1;min-width:0;text-align:right;font-family:var(--disp);font-size:.75rem;line-height:1.15;text-shadow:0 1px .1875rem #000,0 0 .125rem #000;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}   /* up to two lines: the row is tall enough */
.pl .pbox{position:relative;flex:none;display:flex;flex-direction:column;border:.1875rem solid #b8413a;border-radius:.5rem;background:#10142a;overflow:hidden;box-shadow:0 .125rem .375rem rgba(0,0,0,.5)}   /* the tile: one frame round the health banner, the bar and the portrait */
.pl .prow{display:flex;height:var(--tile)}
.pl .pbar{position:relative;flex:none;width:.5rem;background:#070912;box-shadow:inset -1px 0 0 rgba(0,0,0,.7);overflow:hidden}   /* health, filling from the bottom, inside the frame */
.pl .pbar i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,#2fa84f,#8ddc5a);transition:height .4s}
.pl .av{position:relative;flex:none;height:100%;aspect-ratio:1;background:radial-gradient(circle at 50% 30%,#2a3560,#10142a);overflow:hidden}
.pl .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.pl .ptop{display:flex;align-items:center;justify-content:center;gap:.125rem;height:1.125rem;background:linear-gradient(180deg,#232a4d,#0d1124);border-bottom:1px solid rgba(0,0,0,.7);font-family:var(--disp);font-size:.8125rem;line-height:1;color:#fff;text-shadow:0 1px .125rem #000;font-variant-numeric:tabular-nums;white-space:nowrap}   /* the health banner, above the portrait inside the frame */
.pl .ptop b{font-weight:400}.pl .ptop small{font-size:.5625rem;color:var(--dim);letter-spacing:.04em}
.pl .lv{position:absolute;right:.125rem;bottom:.125rem;z-index:1;min-width:1rem;height:1rem;padding:0 .1875rem;border-radius:.5rem;background:#0b0e1a;border:1px solid var(--gold);color:var(--gold);font-family:var(--disp);font-size:.5625rem;line-height:.9375rem;text-align:center;box-shadow:0 .0625rem .25rem rgba(0,0,0,.7)}   /* the seat's level, in the portrait's corner */
.pl.cpuSeat .lv{border-color:#6b7aa0;color:#c9d4ec}
.pl.me .pbox{border-color:var(--gold);box-shadow:0 0 .625rem rgba(255,201,74,.55)}
.pl.me .ptop,.pl.me .pn{color:var(--gold)}.pl.me .pbar i{background:linear-gradient(0deg,#b8892a,#ffd54a)}
.pl.warn:not(.hurt) .pbar i{background:linear-gradient(0deg,#c9a21a,#ffe14a)}.pl.crit:not(.hurt) .pbar i{background:linear-gradient(0deg,#b02a1e,#ff5a4a)}   /* low health (ui.js HP_BAR): yellow, then red; yours too */
.pl.opp .pbox{border-color:#ff6a5a;box-shadow:0 0 0 .125rem #fff,0 0 .75rem rgba(255,106,90,.8)}
.pl.opp .pn{color:#ffd0c8}
.pl.out{opacity:.38;filter:grayscale(1)}
.pl .cpu{font-family:var(--disp);font-size:.5625rem;letter-spacing:.04em;color:#0b0e1a;background:#9fb4d8;border-radius:.25rem;padding:0 .25rem;margin-left:.25rem;vertical-align:middle}   /* a seat a CPU plays: a bot, or a player who dropped out */
.pl.cpuSeat .pbox{border-color:#6b7aa0}.pl.cpuSeat .av img{filter:saturate(.6)}
.pl.watchable{cursor:pointer}.pl.watchable:hover .pbox{box-shadow:0 0 0 .125rem #fff,0 0 .75rem rgba(159,220,255,.9)}
.pl .pk{flex:none;width:.875rem;height:.875rem;margin-right:.1875rem;border-radius:50%;font-family:var(--disp);font-size:.5rem;line-height:.8125rem;text-align:center;background:rgba(8,10,20,.86);border:1px solid var(--line);color:var(--dim);text-shadow:none}   /* the draft: pick order, ✓ once picked, at the banner's left */
.pl.picked .pk{color:#7fd48a;border-color:#2f6b3a}
.pl.turn .pk{background:var(--gold);color:#0b0e1a;border-color:#ffe08a}
.pl.turn .pbox{box-shadow:0 0 0 .125rem #fff,0 0 .875rem rgba(255,201,74,.9);animation:pickPulse 1s ease-in-out infinite alternate}
.pl.turn .pn{color:var(--gold)}
.pl .hit{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:1.25rem;font-weight:700;color:#ff4d3d;text-shadow:0 0 .375rem rgba(255,60,40,.7),0 1px .125rem #000,0 0 .25rem #000;animation:hitFloat 2.4s ease-out both;pointer-events:none}   /* a loss: the damage floats over the portrait before the health moves */
@keyframes hitFloat{0%{opacity:0;transform:translate(0,.5rem) scale(.6)}8%{opacity:1;transform:translate(0,0) scale(1.15)}30%{transform:translate(0,0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(0,-.75rem)}}
.pl.hurt .ptop{color:#ff6a5a}.pl.hurt .pbox{border-color:#c0392b;animation:hurtPill 2.4s ease-out both}.pl.hurt .pbar i{background:linear-gradient(0deg,#c0392b,#ff6a5a)}
@keyframes hurtPill{0%,30%{box-shadow:0 0 .625rem rgba(255,60,40,.8)}100%{box-shadow:none}}
@keyframes pickPulse{from{box-shadow:0 0 0 .125rem #fff,0 0 .5rem rgba(255,201,74,.6)}to{box-shadow:0 0 0 .1875rem #fff,0 0 1.125rem rgba(255,201,74,1)}}
#startOv{background:radial-gradient(ellipse 70% 55% at 50% 28%,#1d2a5e 0%,#111a3c 45%,#080b18 100%)}   /* the start screen's own backdrop, opaque (2026-10-06: a veil over the scene showed the arena or the last run's board behind it, drawn every frame; nothing is drawn behind it now, src/graphics/loop.js) */
/* the stage veil (src/graphics/presentation.js veilUp): after Play or Join it carries the start screen's backdrop on until the
   first view is in (the stage, its pictures, every figure in its model), then fades as one (REVEAL.fadeMs): no piece pops in */
.stageVeil{position:absolute;inset:0;z-index:19;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 70% 55% at 50% 28%,#1d2a5e 0%,#111a3c 45%,#080b18 100%);opacity:1;transition:opacity .42s ease}
.stageVeil.out{opacity:0;pointer-events:none}
.stageVeil .svIn{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.stageVeil b{font-family:var(--disp);font-size:1.5rem;letter-spacing:.06em;color:var(--gold);text-shadow:0 0 .75rem rgba(255,201,74,.35);animation:svPulse 1.6s ease-in-out infinite}
.stageVeil .svBar{width:12rem;height:.25rem;border-radius:.125rem;background:rgba(255,255,255,.1);overflow:hidden}
.stageVeil .svBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#b8862b,var(--gold));transition:width .25s ease}
@keyframes svPulse{50%{opacity:.6}}
/* The intro keeps the supplied artwork's logo above a 528px panel at the reference window (33rem).
   The panel scrolls with the intro on short screens; no action is clipped inside a second scroller. */
#startOv{align-items:flex-start;overflow-y:auto;overflow-x:hidden;padding:0 1rem 1.25rem;background:#101b32;isolation:isolate}
#startOv .startArt{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.9;pointer-events:none}   /* fixed: the art stays behind the start screen while it scrolls (a wide, short window), never leaving a bare band below it */
.startContent{position:relative;width:33rem;max-width:100%;margin:0 auto;z-index:1}
.startBrand{height:max(6rem,22vh,12.5vw);margin:0}   /* the room the art's own title needs above the panel: its TACTICS ends a fifth of the way down the picture (190 of 941 px), which object-fit:cover makes 20.2% of the window's height or 11.4% of its width, whichever is larger; a little more, so the panel never covers it */
.startBrand span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#startOv .startBox{width:100%;max-width:none;padding:1rem 1.5rem;border-color:#58658b;border-top-color:#af955c;border-radius:1rem;background:linear-gradient(145deg,rgba(9,15,30,.98),rgba(9,13,25,.96));box-shadow:0 .75rem 2.5rem #05091799,0 0 0 1px #070b1a88}
#startOv:not(.ready) .startBox{visibility:hidden}
#startOv .startBox::before{content:"";position:absolute;inset:-3rem -5rem;z-index:-1;background:radial-gradient(ellipse,#00000014 0%,#0000000d 55%,transparent 75%);pointer-events:none}
#startOv .startOr{height:1px;background:var(--line);margin:.75rem 0}
.capPick{margin:0 0 .875rem}
#startOv .capPick h2{font-size:1.0625rem;text-align:left;letter-spacing:.035em;margin:0 0 .625rem;text-transform:uppercase}
#startOv .capPick h2::before{content:"◎";color:var(--gold);font-size:1.5rem;vertical-align:middle;margin-right:.5rem}
.capRow{margin-bottom:.5rem}.capRow .capUni{display:block;font-size:.6875rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:#a6b5db;margin-bottom:.375rem}
.capCards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.625rem}
.overlay .box .capCards .cap{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:.375rem;width:auto;margin:0;padding:.25rem .25rem .375rem;border:.125rem solid #31456f;border-radius:.625rem;background:#0b101e;color:var(--fg);font:inherit;cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s}
.overlay .box .capCards .cap:hover{transform:translateY(-.1875rem);border-color:#9fb4d8;box-shadow:0 .25rem .75rem #0005}
.overlay .box .capCards .cap.on{border-color:var(--gold);box-shadow:0 0 .625rem #ffc94a45,inset 0 0 .5rem #ffc94a18}
.capCards .capImg{position:relative;display:block;aspect-ratio:1.3;border-radius:.375rem;overflow:hidden;background:#0b0e1a}
.capCards .capImg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;transition:transform .2s}
.capCards .cap:hover img{transform:scale(1.045)}
.capCards .capNm{font-size:.6875rem;line-height:1.2;text-align:center;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.capCheck{display:none;position:absolute;z-index:1;right:.375rem;top:.375rem;width:1.375rem;height:1.375rem;align-items:center;justify-content:center;border-radius:50%;background:var(--gold);color:#0b0e1a;font-weight:700;box-shadow:0 0 .25rem #0009}
.cap.on .capCheck{display:flex}
.capIdentity{position:absolute;bottom:0;left:0;right:0;padding:.25rem .125rem;background:#070b18df;color:#e8ecff;font-size:.5625rem;letter-spacing:.025em;opacity:0;transform:translateY(.25rem);transition:opacity .16s,transform .16s;text-align:center}
.cap:hover .capIdentity,.cap:focus-visible .capIdentity{opacity:1;transform:none}
#startOv .capHint{font-size:.625rem;line-height:1.3;color:#8895ae;margin:.625rem 0 0}
#startOv .onlineHint{position:relative;color:#b5c4e7;font-size:.8125rem;line-height:1.5;margin:0 0 .875rem}
.matchInfo{display:inline-block;position:static;margin-left:.25rem}
.matchInfo summary{display:inline-flex;width:1.25rem;height:1.25rem;align-items:center;justify-content:center;border:1px solid #53658f;border-radius:50%;font:500 .75rem Georgia,serif;cursor:pointer;list-style:none}
.matchInfo summary::-webkit-details-marker{display:none}
#startOv .matchInfo p{display:none;position:absolute;z-index:3;bottom:100%;right:0;width:min(23rem,100%);padding:.75rem;margin:0 0 .5rem;border:1px solid #53658f;border-radius:.625rem;background:#111a30;color:#d2dcf2;font-size:.75rem;box-shadow:0 .25rem 1rem #0008}
#startOv .matchInfo[open] p,#startOv .matchInfo:hover p,#startOv .matchInfo:focus-within p{display:block}
#startOv .matchSettings{border-top:1px solid #2a356099;padding-top:.875rem;margin-top:1rem}
.matchSettings>summary{display:flex;align-items:center;gap:.375rem;font-size:.6875rem;color:#a6b5db;cursor:pointer;list-style:none}
.matchSettings>summary::-webkit-details-marker{display:none}
.matchSettings>summary::before{content:"›";font-size:1rem;transition:transform .15s}
.matchSettings[open]>summary::before{transform:rotate(90deg)}
.matchSettings>summary span{margin-left:auto;color:#e8ecfa;font-size:.625rem;white-space:nowrap}
#startOv .hostRow{margin:.75rem 0 0}
#startOv .onlineForm{display:flex;align-items:flex-end;gap:.75rem;margin:0}
.nameField{flex:1;min-width:0}
.nameField>span{display:block;font-size:.6875rem;color:#c4cde4;padding-left:.75rem;margin-bottom:.0625rem}
#startOv .onlineForm input{width:100%;height:3.25rem;font:inherit;font-size:1rem;padding:.625rem .75rem;border-radius:.625rem;border:1px solid #344976;background:#080e1d;color:var(--fg)}
#startOv .onlineForm #onlineGo{flex:1.25;width:auto;min-height:3.25rem;white-space:nowrap;font-size:1.0625rem;padding:.75rem;border:.125rem solid #ffe994;border-radius:.75rem;background:linear-gradient(#ffdc54,#ffb520);color:#171106;box-shadow:0 0 1rem #ffbc344d,inset 0 0 .625rem #fff3;transition:transform .15s,box-shadow .15s,filter .15s}
#startOv .onlineForm #onlineGo:hover:not(:disabled){transform:translateY(-.125rem);filter:brightness(1.08);box-shadow:0 0 1.375rem #ffbc3480}
#startOv #soloBtn{min-height:3rem;padding:.75rem 1.25rem;background:linear-gradient(#1a2b52,#121d37);border-color:#3d568a;font-size:.8125rem}
#startOv #soloBtn::before{content:"";display:inline-block;width:1rem;height:1rem;margin-right:.625rem;vertical-align:-.1875rem;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='13' rx='3'/%3E%3Cpath d='M12 3v4M1 12v4M23 12v4M8 16h8'/%3E%3C/g%3E%3Ccircle cx='8' cy='12' r='1.5'/%3E%3Ccircle cx='16' cy='12' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
#startOv #tourBtn{width:100%;margin:1rem 0 0;padding:.25rem;background:none;border-color:transparent;font-family:var(--body);font-size:.75rem;letter-spacing:0;color:#8e9bb7;animation:none}
#startOv #tourBtn:hover{color:#e8ecff;text-decoration:underline}
#startOv :is(button,input,summary):focus-visible{outline:.125rem solid #ffe994;outline-offset:.1875rem}
#startOv #onlineName:focus-visible{outline-offset:-.1875rem}
@media (max-width:760px){
  #startOv{padding:0 .75rem 1rem}
  #startOv .startArt{object-fit:contain}
  .startBrand{height:clamp(3.5rem,12.5vw,7rem)}   /* (the art contained at the top: its title ends at 11.4% of the width) */
  #startOv .startBox{padding:1rem .875rem}
  #startOv .startBox::before{inset:-3rem -.75rem}
  .capCards{gap:.375rem}
  .capCards .capNm{font-size:.5625rem}
  .capCheck{width:1.125rem;height:1.125rem;font-size:.75rem}
  #startOv .onlineForm{flex-direction:column;align-items:stretch;gap:.75rem}
  #startOv .onlineForm #onlineGo{flex:auto;min-height:3.5rem;font-size:1.125rem}
  #startOv .onlineForm input{height:2.75rem}
}
@media (prefers-reduced-motion:reduce){#startOv *,#startOv *::before{animation:none!important;transition:none!important}.capCards .cap:hover img{transform:none}.overlay .box .capCards .cap:hover{transform:none}}
/* the Arena Select (ui.js openArenaSelect; the owner's screen of 2026-10-07): a full page over the start screen, after Play
   solo or Play online: the banner headline, the keys' hint, three cards (the picture with its number, the universe, the name,
   the subtitle and a line; the pick framed gold with its SELECTED tag; a card without a stage yet dim, COMING SOON) and a bar
   with the current arena's medallion, name and line beside Random and the gold Confirm. The pick's own picture sits soft and
   dim behind. On a phone the cards stack and the bar folds (below) */
#arenaOv{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;background:#0d1530;isolation:isolate;overflow-y:auto;overflow-x:hidden}
#arenaOv .apBg{position:absolute;inset:-1rem;width:calc(100% + 2rem);height:calc(100% + 2rem);object-fit:cover;object-position:center 40%;opacity:.6;filter:blur(.5rem) saturate(1.1);pointer-events:none}   /* the pick's own picture, soft and dim, behind the page (ui.js renderArenaPick) */
#arenaOv::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#060a16d9 0%,#0b1434a0 40%,#060a16ec 100%);pointer-events:none}
.apWrap{position:relative;z-index:1;width:min(100%,88rem);margin:0 auto;padding:1.25rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:1.125rem;min-height:100%}
.apHead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding-top:1.5rem}
.apTitle{position:relative;padding:.75rem 1.5rem .75rem 1.25rem;background:linear-gradient(100deg,#0c1328f2 0%,#101a3ae6 70%,#0c132800);border-left:.25rem solid var(--gold)}
.apTitle h1{font-family:var(--disp);font-size:clamp(1.75rem,4vw,3.125rem);line-height:.95;margin:0;letter-spacing:.02em;text-transform:uppercase;font-style:italic;color:#fff;text-shadow:0 .125rem 0 #2a3f8a,0 .375rem 1.25rem #0009}
.apTitle p{margin:.25rem 0 0;font-family:var(--disp);font-size:clamp(.8125rem,1.5vw,1.25rem);letter-spacing:.1em;text-transform:uppercase;font-style:italic;color:#fff}
.apBack{position:absolute;left:1.25rem;top:-1.625rem;width:auto;padding:.25rem .625rem;font-size:.6875rem;letter-spacing:.06em;background:#0b1024cc;border-color:#3a4a7c;color:#c9d4f3}
.apBack:hover{color:#fff;border-color:#9fb4d8}
.apKeys{display:flex;align-items:center;gap:.375rem;font-family:var(--disp);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:#e4eaff;background:#0b1024d9;border:1px solid #3a4a7c;border-radius:2rem;padding:.5rem 1rem;white-space:nowrap}
.apKeys kbd{font-size:.625rem;padding:.0625rem .375rem}.apKeys i{font-style:normal;color:var(--gold)}
.apCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;align-items:stretch;flex:1;padding:.5rem .75rem}
.apCard{position:relative;display:flex;flex-direction:column;gap:.5rem;width:auto;margin:0;padding:.625rem .625rem .875rem;border:.1875rem solid #4d5f8f;border-radius:1rem;background:linear-gradient(180deg,#131b36f2,#0a0f22f6);color:var(--fg);font:inherit;text-align:left;cursor:pointer;box-shadow:0 .5rem 1.5rem #0007;transition:transform .16s,border-color .16s,box-shadow .16s}
.apCard:hover{transform:translateY(-.25rem);border-color:#9fb4d8}
.apCard.on{border-color:var(--gold);box-shadow:0 0 1.75rem #ffc94a5c,inset 0 0 .75rem #ffc94a22;transform:scale(1.035)}
.apCard.on:hover{transform:scale(1.035) translateY(-.125rem)}
.apCard.soon{cursor:default;opacity:.72;filter:saturate(.7)}.apCard.soon:hover{transform:none;border-color:#4d5f8f}
.apCard:focus-visible{outline:.125rem solid #ffe994;outline-offset:.25rem}
.apPic{position:relative;display:block;aspect-ratio:1.64;border-radius:.625rem;overflow:hidden;background:#0b0e1a}
.apPic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.apCard:not(.soon):hover .apPic img{transform:scale(1.03)}
.apNum{position:absolute;top:.5rem;left:.5rem;font-family:var(--disp);font-size:.9375rem;line-height:1;padding:.3125rem .5rem;border-radius:.375rem;background:#0b1024e6;color:#fff;border:1px solid #3a4a7c}
.apCard.on .apNum{background:var(--gold);color:#0b0e1a;border-color:var(--gold)}
.apSelTag{position:absolute;top:.5rem;right:.5rem;display:none;font-family:var(--disp);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;padding:.3125rem .625rem;border-radius:2rem;background:#0b1024ee;color:var(--gold);border:1px solid var(--gold)}
.apCard.on .apSelTag{display:block}
.apSoon{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%) rotate(-6deg);text-align:center;font-family:var(--disp);font-size:1.125rem;letter-spacing:.2em;text-transform:uppercase;padding:.375rem 0;background:#0b1024d9;color:#dfe6ff;border-top:1px solid #6b7cab;border-bottom:1px solid #6b7cab}
.apUni{display:flex;align-items:center;gap:.4rem;font-family:var(--disp);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:#7ad0ff;margin-top:.25rem}
.apUni.dbz{color:var(--gold)}.apUni img{width:1.125rem;height:1.125rem;object-fit:contain}
.apBall{display:inline-block;width:1rem;height:1rem;border-radius:50%;background:radial-gradient(circle at 35% 32%,#fff0b0 0%,#ffb02e 38%,#e2600a 75%,#8a3400 100%);box-shadow:0 0 .25rem #ff9a1f88}
.apNm{font-family:var(--disp);font-size:clamp(1.25rem,2.1vw,1.875rem);line-height:1;text-transform:uppercase;font-style:italic;color:#fff;text-shadow:0 .125rem 0 #2a3f8a}
.apSub{font-family:var(--disp);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:#dfe6ff;padding-bottom:.5rem;border-bottom:1px solid #3a4a7c}
.apTx{margin:0;font-size:.8125rem;line-height:1.45;color:#b5c4e7}
.apBar{display:flex;align-items:center;gap:1rem;padding:.875rem 1.25rem;border:1px solid #3a4a7c;border-radius:1rem;background:#0b1024e6;box-shadow:0 .5rem 1.5rem #0007}
.apCur{flex:1;min-width:0}
.apCurLb{display:block;font-family:var(--disp);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.apCur b{display:flex;align-items:center;gap:.5rem;font-family:var(--disp);font-size:clamp(1.25rem,2.1vw,1.875rem);line-height:1.1;text-transform:uppercase;font-style:italic;color:#fff}
.apCur b img{width:1.75rem;height:1.75rem;object-fit:contain}
.apCur p{margin:.125rem 0 0;font-size:.8125rem;color:#b5c4e7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apBtns{display:flex;gap:.75rem;flex:none}
#apRandom{min-height:3.25rem;padding:.75rem 1.5rem;font-size:.9375rem;background:linear-gradient(#1a2b52,#121d37);border:.125rem solid #3d568a}
#apRandom:hover{border-color:#9fb4d8}
#apConfirm{min-height:3.25rem;padding:.75rem 1.75rem;font-size:.9375rem;background:linear-gradient(180deg,#ffd45a,#f0a81c);border:.125rem solid #ffe994;color:#1a1200;box-shadow:0 0 1rem #ffbc3466}
#apConfirm:hover:not(:disabled){transform:translateY(-.125rem);filter:brightness(1.06);box-shadow:0 0 1.375rem #ffbc3480}
@media (max-width:760px){
  .apWrap{padding:.75rem .75rem 1rem;gap:.75rem}
  .apHead{flex-direction:column;align-items:stretch;padding-top:1.5rem}.apKeys{display:none}.apTitle{padding:.625rem 1rem .625rem .875rem}.apBack{top:-1.5rem;left:.875rem}
  .apCards{grid-template-columns:1fr;gap:.75rem;padding:.25rem}.apCard.on,.apCard.on:hover{transform:none}.apPic{aspect-ratio:2.1}
  .apBar{flex-direction:column;align-items:stretch;gap:.75rem}.apBtns button{flex:1}.apCur p{white-space:normal}
}
.lobbySeats li .fav{width:1.25rem;height:1.25rem;border-radius:50%;overflow:hidden;border:1px solid #3a4a7a;flex:none;background:#10142a}.lobbySeats li .fav img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.lobbySeats{list-style:none;margin:.5rem 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.25rem .5rem}
.lobbySeats li{display:flex;align-items:center;gap:.375rem;padding:.3125rem .5rem;border:1px solid var(--line);border-radius:.375rem;background:rgba(8,10,20,.6);font-size:.8125rem}
.lobbySeats li .n{font-family:var(--disp);font-size:.6875rem;color:var(--dim);min-width:1rem}
.lobbySeats li.cpu{color:var(--dim)}.lobbySeats li.cpu .who{font-style:italic}
.lobbySeats li.me{border-color:#6b5a1f;color:var(--gold)}
.overlay .box .lobbySeats li .kick{width:auto;margin:0 0 0 auto;padding:0 .375rem;font:inherit;font-size:.875rem;line-height:1.1;border:1px solid var(--line);border-radius:.25rem;background:rgba(8,10,20,.6);color:var(--dim);cursor:pointer;flex:none}
.overlay .box .lobbySeats li .kick:hover{color:#fff;border-color:#c0392b;background:rgba(192,57,43,.5)}
#onlineStart{margin:.5rem 0 .25rem}
.hostRow{display:flex;flex-direction:column;gap:.5rem;margin:.625rem 0}
.hostRow .hs{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--fg)}
.hostRow .hs .lb{min-width:6rem;color:var(--dim)}
.hostRow .seg{display:inline-flex;border:1px solid #3a4a7a;border-radius:.5rem;overflow:hidden;background:rgba(8,10,20,.7)}
/* the choices: the overlay's generic button rule is outranked here on purpose, so the chosen one reads gold */
.overlay .box .hostRow .seg button{width:auto;margin:0;padding:.375rem .75rem;border:0;border-radius:0;background:transparent;color:var(--dim);font:inherit;font-family:var(--disp);font-size:.75rem;letter-spacing:.02em;cursor:pointer;transition:background .15s,color .15s}
.overlay .box .hostRow .seg button+button{border-left:1px solid #3a4a7a}
.overlay .box .hostRow .seg button:hover:not(:disabled):not(.on){background:rgba(255,201,74,.18);color:#fff}
.overlay .box .hostRow .seg button.on{background:var(--gold);color:#0b0e1a;font-weight:700;box-shadow:inset 0 0 .5rem rgba(255,255,255,.35)}
.overlay .box .hostRow .seg button:disabled{cursor:default}
.overlay .box .hostRow .seg button:disabled.on{background:#8c7a3a;color:#fff}
.hostRow .who{font-size:.6875rem;color:var(--dim);font-style:italic}
/* ⚙️ Settings (ui.js openSettings): a glass panel under the menu's ⚙️, in sections (Game, Sound, View, Info) headed
   in gold; each entry an icon, a short label and, for a switch or a choice, its value in gold at the right */
.setPop{position:absolute;right:.625rem;top:calc(3.25rem + env(safe-area-inset-top,0px));z-index:8;width:19rem;max-width:calc(100% - 1.25rem);max-height:calc(100% - 3.75rem - env(safe-area-inset-top,0px));overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:.25rem;padding:.25rem .625rem .625rem;border-radius:.875rem;box-shadow:0 .75rem 2rem rgba(0,0,0,.6);animation:setIn .15s ease-out}
@keyframes setIn{from{opacity:0}}
.setPop h4{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 .125rem;font-family:var(--disp);font-weight:400;font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.setPop h4::after{content:"";flex:1;height:1px;background:var(--line)}
.sGrid{display:grid;grid-template-columns:1fr 1fr;gap:.25rem}
.sItem,.sRow{display:flex;align-items:center;gap:.5rem;min-width:0;padding:.375rem .5rem;border-radius:.5rem;font-family:var(--disp);font-size:.75rem;letter-spacing:.02em;color:var(--fg)}
.sItem{width:100%;text-align:left;white-space:nowrap;background:rgba(8,10,20,.6);border:1px solid var(--line);transition:background .15s,border-color .15s}
.sItem:hover{border-color:#6b5a1f;background:rgba(255,201,74,.12)}
.sItem>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sIc{flex:none;width:1.25rem;font-style:normal;font-size:.9375rem;line-height:1;text-align:center}
.sVal{margin-left:auto;padding-left:.375rem;font-weight:400;font-size:.6875rem;color:var(--gold);white-space:nowrap}
.sItem.off .sIc{opacity:.5}.sItem.off .sVal{color:var(--dim)}   /* a switch that is off */
.sItem.lit{border-color:var(--gold);background:rgba(36,29,11,.9)}   /* the log while it is open, fullscreen while on */
.fsIc{color:var(--gold)}
#hostBtn.on span{color:var(--gold)}   /* you are the host */
#onlineBtn.on .sIc{filter:drop-shadow(0 0 .25rem rgba(255,201,74,.8))}   /* in an online game */
.sRow{padding-top:.125rem;padding-bottom:.125rem}
.sRow input[type=range]{flex:1;min-width:0;margin:0;accent-color:var(--gold)}
.sPair{margin-left:auto;display:flex;gap:.25rem}
.sPair button,.sSongs button{font-family:var(--disp);font-size:.75rem;letter-spacing:.02em;padding:.25rem .625rem;border-radius:.375rem;border:1px solid var(--line);background:rgba(8,10,20,.7);color:var(--fg)}
.sPair button{width:2.25rem;padding:.1875rem 0;font-size:.875rem}
.sSongs{display:flex;gap:.25rem;padding-left:2.25rem}   /* under Music: the songs, the one playing lit */
.sSongs button{flex:1;white-space:nowrap;font-size:.6875rem}
.sSongs button.on{background:var(--gold);color:#0b0e1a;border-color:#ffe08a}
.sPair button:hover,.sSongs button:hover:not(.on){border-color:#6b5a1f;background:rgba(255,201,74,.12)}
.hostBtns{display:flex;gap:.5rem;margin-top:.75rem}.overlay .box .hostBtns button{width:auto;flex:1;margin:0}
#continueBtn{margin-bottom:.375rem}
.lobbySeats li.away .who{opacity:.55;font-style:italic}
.onlineStatus{min-height:1.5rem;font-family:var(--disp);font-size:.875rem;color:var(--gold)}
.phase .clock{font-variant-numeric:tabular-nums;color:var(--gold)}
/* the tour: a veil with a hole over the step's element, and a card beside it */
.tourVeil{position:fixed;inset:0;z-index:40;overflow:hidden}
.tourHole{position:fixed;border-radius:.75rem;background:rgba(255,232,160,.07);box-shadow:0 0 0 200vmax rgba(3,4,10,.82),0 0 0 .25rem var(--gold),0 0 2rem .5rem rgba(255,201,74,.7),inset 0 0 1.5rem rgba(255,224,140,.45);transition:left .25s,top .25s,width .25s,height .25s;animation:tourPulse 1.4s ease-in-out infinite alternate}
@keyframes tourPulse{from{box-shadow:0 0 0 200vmax rgba(3,4,10,.82),0 0 0 .25rem var(--gold),0 0 1.25rem .25rem rgba(255,201,74,.55),inset 0 0 1rem rgba(255,224,140,.3)}to{box-shadow:0 0 0 200vmax rgba(3,4,10,.82),0 0 0 .3125rem #ffe08a,0 0 2.5rem .75rem rgba(255,201,74,.85),inset 0 0 2rem rgba(255,224,140,.55)}}
.tourLit:disabled{opacity:1}   /* the step's own button at full strength, though greyed in play (tour.js lit) */
.tourCard{position:fixed;z-index:41;padding:.875rem 1rem 1rem;border-radius:.75rem;transition:left .25s,top .25s}
.tourCard .tourStep{font-family:var(--disp);font-size:.6875rem;color:var(--dim);letter-spacing:.04em}
.tourCard h3{margin:.125rem 0 .25rem;font-family:var(--disp);font-size:1rem;color:var(--gold)}
.tourCard p{margin:0 0 .75rem;font-size:.8125rem;line-height:1.4}
.tourNav{display:flex;align-items:center;gap:.5rem}.tourNav button{font:inherit;font-size:.8125rem;padding:.375rem .875rem;border-radius:.5rem;border:1px solid var(--line);background:rgba(8,10,20,.8);color:var(--fg);cursor:pointer}
.tourNav button:disabled{opacity:.35;cursor:default}
.tourDots{flex:1;display:flex;justify-content:center;gap:.25rem}.tourDots i{width:.375rem;height:.375rem;border-radius:50%;background:#3a4a7a}.tourDots i.on{background:var(--gold)}
.tourSkip{display:block;margin:.625rem auto 0;font:inherit;font-size:.6875rem;color:var(--dim);background:none;border:0;cursor:pointer;text-decoration:underline}
.tourStart{margin-top:.5rem}
.tourStart.nudge{animation:tourNudge 1.6s ease-in-out infinite}   /* a first visit: the tour lit up until it has been taken (ui.js boot) */
@keyframes tourNudge{0%,100%{box-shadow:0 0 0 .125rem var(--ki),0 0 .75rem rgba(122,208,255,.35)}50%{box-shadow:0 0 0 .25rem var(--ki),0 0 1.5rem rgba(122,208,255,.85)}}
/* the strip over the lobby: Players, or the damage meter */
.plTabs{display:flex;align-items:center;justify-content:flex-end;gap:.25rem;margin-bottom:.125rem}
.plTab{font-family:var(--disp);font-size:.6875rem;letter-spacing:.02em;color:var(--dim);background:rgba(8,10,20,.72);border:1px solid var(--line);border-radius:.375rem;padding:.1875rem .5rem;cursor:pointer}
.plTab.on{color:var(--gold);border-color:#6b5a1f;background:rgba(20,16,8,.88)}
.plTab .ic{display:none}
/* the tabs' drawn icons (art.js TAB_ART, the owner's of 2026-10-06): the picture is the button, its own gold frame round a
   navy face, so the button's frame steps aside; the tab not on show is dimmed, the one on show lit with a gold glow */
.plTab.art{display:flex;align-items:center;justify-content:center;flex:none;width:var(--plTabSize);height:var(--plTabSize);padding:0;border:0;background:none;line-height:0;border-radius:.3125rem;opacity:.55;filter:saturate(.7) brightness(.9);transition:opacity .15s,filter .15s,box-shadow .15s}
.plTab.art .ic{display:flex;align-items:center;justify-content:center;line-height:0}
.plTab.art .tx{display:none}
.plTab.art .ic img{display:block;width:var(--plTabSize);height:var(--plTabSize);object-fit:contain;pointer-events:none;-webkit-user-drag:none}
/* Players has 11/96 transparent pixels below its art; align its visible foot with Damage. */
.plTab.art[data-tab="players"] .ic img{transform:translateY(calc(var(--plTabSize) * .115))}
.plTab.art.on{opacity:1;filter:none;box-shadow:0 0 .5rem rgba(255,201,74,.55)}
.plTab.art:hover{opacity:.9;filter:none}
.dmgHead{display:flex;align-items:center;justify-content:flex-end;gap:.25rem;margin-bottom:.125rem}
.dmgRound{font-family:var(--disp);font-size:.6875rem;color:var(--dim);text-shadow:0 1px .1875rem #000;margin-right:auto;white-space:nowrap}
.dmgSide{font-size:.625rem;color:var(--dim);background:rgba(8,10,20,.72);border:1px solid var(--line);border-radius:.375rem;padding:.125rem .375rem;cursor:pointer;max-width:5.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmgSide.on{color:#fff;border-color:#4a5a90}
.dmgRow{display:flex;align-items:center;gap:.375rem;background:rgba(8,10,20,.78);border:1px solid var(--line);border-radius:.5rem;padding:.1875rem .375rem .1875rem .1875rem}
.dmgRow .av{width:1.75rem;height:1.75rem;border-radius:50%;overflow:hidden;border:.125rem solid #4a5a90;background:#10142a;flex:none}
.dmgRow .av img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.dmgBody{display:flex;flex-direction:column;gap:.125rem;min-width:0;flex:1}
.dmgRow .dn{font-size:.6875rem;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}
.dbar{display:flex;height:.375rem;border-radius:.1875rem;background:rgba(255,255,255,.08);overflow:hidden}
.dbar i{display:block;height:100%}
.dbar .phys{background:#ff9b4a}.dbar .magic{background:#7aa8ff}.dbar .true{background:#f2f4ff}
.dmgRow .dv{font-family:var(--disp);font-size:.75rem;color:#fff;min-width:2.25rem;text-align:right;font-variant-numeric:tabular-nums}
.dmgRow.out{opacity:.5}
/* item bench: TFT's item bar, a column of square slots at the far left (on phones a row above the trait strip).
   Components are blue, finished items gold, emblems violet, the God Ki Crystal glows; the ones that forge with the
   picked-up component pulse. */
.itemBench{--slot:2.625rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem}   /* the item bench: a row in the shop panel under the cards, centred on them, the remover's tool slot first, then the item slots (a second row past a full one) */
.shopMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3125rem}.shopMid .shop{flex:none}   /* the cards over the item bench */
.itSlot{width:var(--slot);height:var(--slot);padding:0;border-radius:.375rem;font-size:calc(var(--slot)*.52);display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#2c3868,#141a2e);border:1px solid #6a78b0;box-shadow:0 .125rem .375rem rgba(0,0,0,.45);transition:transform .12s}
.itSlot.empty{background:rgba(8,11,22,.6);border-color:rgba(58,70,120,.55);box-shadow:inset 0 0 .375rem rgba(0,0,0,.65)}
.itSlot.full{border:.125rem solid var(--gold);background:linear-gradient(160deg,#5e4b1c,#1c160a)}
.itSlot.emb{border:.125rem solid #b77aff;background:linear-gradient(160deg,#4c2d7c,#170e2a)}
.itSlot.asc{border:.125rem solid #bff0ff;background:linear-gradient(160deg,#2a6a8a,#0c1a2a);box-shadow:0 0 .625rem rgba(122,208,255,.55)}
.itSlot{flex:none}.itSlot.sel{transform:translateY(-.1875rem);box-shadow:0 0 0 .125rem #fff,0 0 .875rem rgba(255,255,255,.5)}
.itSlot.can{animation:canForge .8s ease-in-out infinite alternate}
/* the item remover's tool slot: the magnet with its count in the corner; greyed once they're spent */
.itSlot.tool{position:relative;border:.125rem solid #ff8a5c;background:linear-gradient(160deg,#6a3a2a,#2a140e);font-size:calc(var(--slot)*.5)}
.itSlot.tool b{position:absolute;right:-.2rem;bottom:-.25rem;min-width:1.05rem;height:1.05rem;padding:0 .2rem;border-radius:.55rem;background:#ff8a5c;color:#2a0f06;font:700 .6875rem/1.05rem var(--body);text-align:center;box-shadow:0 .0625rem .25rem rgba(0,0,0,.6)}
.itSlot.tool.spent{filter:grayscale(1);opacity:.45;cursor:default}
.ttTag.tool{background:#4a2416;color:#ffb496}.ttIc.tool{border-color:#ff8a5c}
@keyframes canForge{from{box-shadow:0 0 0 .0625rem var(--ki)}to{box-shadow:0 0 0 .1875rem var(--ki),0 0 .875rem rgba(122,208,255,.85)}}
.itChip{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;padding:.25rem .5625rem;border-radius:.5rem;border:1px solid #4a5590;background:var(--panel2);color:var(--fg);cursor:default}
.itChip.full{border-color:#8a7430}.itChip.emb{border-color:#7a4ab0}.itChip.asc{border-color:#5aa8c8}
/* drawn item art (ui.js itemIconHtml): the whole framed icon fits its box, never cropped; emoji items stay text */
.itImg{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.ttArt{display:block;width:7rem;height:7rem;margin:0 auto .5rem;object-fit:contain;filter:drop-shadow(0 .25rem .5rem rgba(0,0,0,.55))}   /* the item's art, big, atop its tooltip */
.itChip .itImg{width:1.125rem;height:1.125rem}
.ttSub .itImg,.itTip li .itImg{display:inline-block;width:1rem;height:1rem;vertical-align:-.25rem}
/* popovers, placed by ui.js beside what they describe: the item tooltip, the recipe card, the trait card */
.itTip,.itHint,.traitPop{position:absolute;left:0;top:0;z-index:8;padding:.5rem .625rem;font-size:.75rem;line-height:1.35;background:rgba(10,13,26,.95);box-shadow:0 .375rem 1.25rem rgba(0,0,0,.55)}
.itTip,.traitPop{pointer-events:none}
.itTip{width:15.5rem;z-index:9}
.itHint{width:17.5rem;display:flex;flex-direction:column;gap:.3125rem}
.traitPop{width:15rem}
.ttHead,.ihHead{display:flex;align-items:center;gap:.4375rem}
.ttHead b{flex:1;min-width:0;font-family:var(--disp);font-weight:400;font-size:.875rem}
.ttTag{flex:none;font-size:.5625rem;letter-spacing:.5px;text-transform:uppercase;padding:.0625rem .375rem;border-radius:6.1875rem;background:#232c4c;color:#c9d0f0}
.ttTag.full{background:#3a2e10;color:var(--gold)}.ttTag.emb{background:#2e1a48;color:#d8b0ff}.ttTag.asc{background:#123040;color:#bff0ff}
.ttIc{position:relative;flex:none;width:1.5rem;height:1.5rem;border-radius:.3125rem;display:flex;align-items:center;justify-content:center;font-size:.875rem;background:#10152a;border:1px solid #6a78b0}
.ttIc.full{border-color:var(--gold)}.ttIc.emb{border-color:#b77aff}.ttIc.asc{border-color:#9fdcff}
.ttSt{margin-top:.375rem;font-weight:500;color:#fff}
.itTip p{margin:.25rem 0 0;color:#c9d0f0}
.itTip .ttTr{color:var(--dim)}.itTip .ttTr b{color:#d8b0ff;font-weight:500}
.ttOwn{margin-top:.375rem;padding-top:.3125rem;border-top:1px solid rgba(255,214,120,.22);font-size:.75rem;color:#cfd6f2}.ttOwn b{color:var(--gold)}.ttOwn .ttTag{margin-left:.25rem}   /* who has it (ui.js ownerLine) */
.ttSub{margin-top:.375rem;color:var(--dim);font-size:.6875rem}
.itTip ul{margin:.125rem 0 0;padding:0;list-style:none;font-size:.6875rem;color:#c9d0f0;line-height:1.5}
.ihHead{padding-bottom:.3125rem;border-bottom:1px solid var(--line)}
.ihHead b{display:block;font-family:var(--disp);font-weight:400;font-size:.8125rem}
.ihHead small{color:var(--dim);font-size:.6875rem}
.ihRow{display:flex;align-items:center;gap:.3125rem;opacity:.5}
.ihRow.own{opacity:1}
.ihRow .ttIc{width:1.375rem;height:1.375rem;font-size:.75rem}
.ihRow.own .ttIc:first-child::after{content:"✓";position:absolute;right:-.3125rem;bottom:-.3125rem;width:.75rem;height:.75rem;border-radius:50%;background:var(--gold);color:#241a00;font:700 .5rem/.75rem var(--body);text-align:center}
.ihRow p{margin:0;min-width:0;color:var(--dim);font-size:.6875rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ihRow b{color:var(--fg);font-weight:500}.ihRow.own b{color:var(--gold)}
.ihFoot{color:var(--dim);font-size:.625rem}
.tpHead{display:flex;align-items:baseline;gap:.375rem}
.tpHead b{font-family:var(--disp);font-weight:400;font-size:.875rem}
.tpHead small{color:var(--dim);font-size:.5625rem;text-transform:uppercase;letter-spacing:.5px}
.tpBp{color:var(--dim);font-size:.6875rem;margin-top:.125rem}.tpBp b{color:var(--gold);font-weight:500}
.traitPop p{margin:.3125rem 0 .4375rem;color:#c9d0f0}
.tpFaces{display:flex;flex-wrap:wrap;gap:.25rem}
.tpFaces span{width:1.875rem;height:1.875rem;border-radius:.375rem;overflow:hidden;border:1px solid var(--line);background:#10152a}
.tpFaces span.own{border-color:var(--gold)}
.tpFaces img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.tpFaces .off{opacity:.85}.tpFaces .off img{filter:grayscale(1) brightness(.45)}   /* members you don't own: dimmed and grey, but still recognisable */
/* shop bar (bottom), TFT format: level, odds, gold and streak over Buy XP / Reroll and the cards */
.shopbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(.375rem + env(safe-area-inset-bottom,0px));z-index:5;width:min(70rem,calc(100% - 1.5rem));display:flex;flex-direction:column;gap:.3125rem}
.shopTop{display:flex;align-items:center;gap:.625rem;font-variant-numeric:tabular-nums;min-width:0}
.shopTop>*{flex:none}
.lvl{flex:none;display:flex;flex-direction:column;align-items:center;gap:.25rem;width:3.25rem;font-family:var(--disp);font-variant-numeric:tabular-nums}   /* the level column at the shop panel's left: XP count, the gauge, the level */
.lvl .xpn{font-size:.6875rem;color:#bcd4ff;line-height:1}.lvl .lvN{font-size:.75rem;line-height:1;white-space:nowrap}.lvl b{font-weight:400;font-size:.9375rem}
.xpbar{position:relative;flex:1;min-height:1.5rem;width:.75rem;background:#0a0d18;border:1px solid var(--line);border-radius:.375rem;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:inset 0 0 .25rem rgba(0,0,0,.6)}   /* the XP gauge: vertical, at the shop panel's left beside Buy XP, filling from the bottom */
.xpbar i{display:block;width:100%;height:0;background:linear-gradient(0deg,#2f6fd0,var(--ki));transition:height .3s}
.xpn{font-size:.75rem;color:var(--dim);font-family:var(--body)}
.odds{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.0625rem .3125rem;font-size:.625rem;font-variant-numeric:tabular-nums;padding:.1875rem .25rem;background:rgba(8,10,20,.45);border:1px solid var(--line);border-radius:.5rem}   /* the shop odds, a dot and a share a cost, wrapping under the gold */
.odds span{display:flex;align-items:center;gap:.1875rem;color:#dfe5ff}
.odds i{width:.375rem;height:.375rem;border-radius:50%;background:var(--c)}
.fieldN{font-size:.75rem;color:var(--dim)}
.ecoCol{flex:none;width:6.75rem;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:.25rem}   /* the economy in one box: the lock, gold, the streak and the odds under them (2026-10-05: the odds had a column of their own), in the shop panel where the clock used to be */
.ecoCol>*{text-align:center}
.shopLock{align-self:center;width:2.25rem;height:1.625rem;padding:0;display:flex;align-items:center;justify-content:center;font-size:.9375rem;line-height:1;border-radius:.5rem;background:var(--glass);border:1px solid var(--line);color:var(--dim);filter:grayscale(.6) brightness(.9)}   /* the shop lock, above the gold: 🔓 open, 🔒 locked in gold */
.shopLock:hover{filter:none}
.shopLock.on{filter:none;border-color:var(--gold);background:linear-gradient(180deg,#3a3016,#1c160a);box-shadow:0 0 .5rem rgba(255,201,74,.55)}
.goldBig{font-family:var(--disp);font-size:.9375rem;color:var(--gold);padding:.1875rem .375rem;background:linear-gradient(180deg,#2a2414,#15120a);border:1px solid #6b5a1f;border-radius:.625rem}
.goldBig b{font-size:1.125rem;font-weight:400}
.streak{font-family:var(--disp);font-size:.8125rem;padding:.25rem .375rem;background:var(--glass);border:1px solid var(--line);border-radius:.625rem;color:var(--dim)}
.streak b{font-weight:400}
.streak.win{color:#ffa24a;border-color:#6b3a1f}.streak.loss{color:#7ad0ff;border-color:#1f456b}
/* your augments: hex icons in their tier's colour after the level and shop odds (ui.js renderAug); hover or tap for the
   tooltip. The picker's card icons (.augHex) share the hex */
.augRow{display:flex;align-items:center;gap:.25rem;padding:.1875rem .375rem;background:var(--glass);border:1px solid var(--line);border-radius:.625rem}
.augIc,.augHex{position:relative;display:flex;align-items:center;justify-content:center;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:var(--c)}
.augIc::before,.augHex::before{content:"";position:absolute;inset:.125rem;z-index:-1;clip-path:inherit;background:linear-gradient(160deg,#2c3868,#0e1326)}
.augIc{width:1.6875rem;height:1.5rem;font-size:.8125rem;cursor:default}
.augIc.prismatic,.augCard.prismatic .augHex{background:var(--prism)}
.ttIc.aug{border-color:var(--c)}
.ttTag.aug{color:var(--c);background:color-mix(in srgb,var(--c) 16%,#10152a)}
.sellTag{display:none;color:var(--foe);font-family:var(--disp);font-size:.875rem}
.shopMain{display:flex;gap:.4375rem;align-items:stretch;padding:.4375rem;background:var(--glass);border:1px solid var(--line);border-radius:.75rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.shopbar.sellzone .shopMain{outline:.1875rem dashed var(--foe);outline-offset:.1875rem;background:rgba(60,16,22,.92)}
.shopbar.sellzone .sellTag{display:inline}
#rosterGrid .card.parked{opacity:.45;filter:grayscale(.6)}#rosterGrid .card.parked .cn::after{content:" · resting";color:var(--dim)}   /* parked fighters, out of this rotation */
.sellBtn{padding:.25rem .625rem;font-size:.8125rem;background:rgba(60,16,22,.92)}.shopbar.sellzone .sellBtn{display:none}   /* phones: the picked-up fighter's Sell (ui.js) */
.sideBtns{display:flex;flex-direction:column;gap:.3125rem;width:6.25rem;flex:none}
.sideBtns button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:.25rem}
.sideBtns small{font-family:var(--body);font-size:.6875rem;opacity:.9}
.shop{flex:1;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}
.card{position:relative;height:6.25rem;border-radius:.625rem;border:.125rem solid var(--tier);background:linear-gradient(135deg,var(--tbg),#0b0f1e 80%);cursor:pointer;overflow:hidden;transition:transform .1s;color:var(--fg);min-width:0}
.shop .card{border-width:.25rem}   /* the shop's cards: a slightly thicker cost-coloured frame, easier to notice */
.card:hover{transform:translateY(-.125rem)}
.card:active{transform:scale(.97)}
.card.sold{opacity:.18;pointer-events:none;border-style:dashed}
.card.poor{filter:saturate(.35) brightness(.7)}
.card .cp{position:absolute;right:-.25rem;top:0;height:100%;width:70%;object-fit:cover;object-position:50% 12%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.card .ctr{position:absolute;left:.5rem;top:.375rem;font-size:.625rem;line-height:1.35;color:#d4daf5;text-shadow:0 1px .125rem #000;max-width:60%}
.card .cbot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.375rem;padding:.3125rem .5rem;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}
.card .cn{font-family:var(--disp);font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-shadow:0 1px .1875rem #000}
.card .cc{font-family:var(--disp);font-size:.8125rem;color:var(--gold)}
.card .own{position:absolute;right:.375rem;top:.375rem;font-size:.625rem;color:#241a00;background:var(--gold);border-radius:6.1875rem;padding:1px .375rem;font-family:var(--disp)}
/* a 2★ slot (Super Saiyan Bargain): star badge and a golden rim */
.card.star2{box-shadow:inset 0 0 0 1px #ffd84a,inset 0 0 1.25rem rgba(255,201,74,.35)}
/* an item for sale (the God Ki Crystal): its icon, glowing */
.card.shopIt{--tier:#bff0ff;--tbg:#1d4460;box-shadow:inset 0 0 1.25rem rgba(122,208,255,.35)}
.card .cIt{position:absolute;inset:.25rem 0 1.5rem;display:flex;align-items:center;justify-content:center;font-size:2.75rem;filter:drop-shadow(0 0 .5rem rgba(122,208,255,.85))}
.card .cIt .itImg{width:4rem;height:4rem}
.card .cstar{position:absolute;right:.375rem;top:.375rem;font-size:.6875rem;line-height:1.3;letter-spacing:1px;color:#241a00;background:linear-gradient(90deg,#ffe38a,#ffb42a);border-radius:6.1875rem;padding:0 .375rem;box-shadow:0 0 .5rem rgba(255,201,74,.7)}
.card.star2 .own{top:1.625rem}
.t1{--tier:#8a94ad;--tbg:#232838}.t2{--tier:#35b863;--tbg:#15301f}.t3{--tier:#3a8cff;--tbg:#132644}.t4{--tier:#b45cff;--tbg:#2c1740}.t5{--tier:#ffb02a;--tbg:#3a2a0c}
.fight{flex:none;min-width:13rem;padding:.4375rem 1.75rem;border-radius:2rem;font-size:1.125rem;letter-spacing:.04em;white-space:nowrap;box-shadow:0 .25rem 1rem rgba(0,0,0,.45),0 0 1rem rgba(43,108,255,.45)}   /* the clock: a banner at the top centre, under the round tracker (in .clockRow) */
.fight:disabled{opacity:1;cursor:default}.fight.soon{animation:soon .5s ease-in-out infinite alternate}@keyframes soon{from{filter:brightness(1)}to{filter:brightness(1.6)}}   /* the clock: never greyed, pulsing in the last seconds */
/* feed */
/* the last three seconds of planning: the clock's number flies out of the button into the middle of the board, growing,
   then swells and fades (ui.js countFlash sets --x0/--y0, the clock's offset from here); 1 is red */
.count{position:absolute;left:50%;top:44%;z-index:6;pointer-events:none;font-family:var(--disp);font-weight:700;font-size:clamp(6rem,24vmin,14rem);line-height:1;color:#fff;-webkit-text-stroke:.05em #0b0e1a;paint-order:stroke fill;
  text-shadow:0 0 .3em rgba(255,201,74,.95),0 .05em .12em rgba(0,0,0,.6);opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity}
.count.last{text-shadow:0 0 .3em rgba(255,90,74,.98),0 .05em .12em rgba(0,0,0,.6)}
.count.go{animation:countGo .95s cubic-bezier(.2,.7,.2,1) both}
@keyframes countGo{0%{opacity:0;transform:translate(calc(-50% + var(--x0,0px)),calc(-50% + var(--y0,-30vh))) scale(.16)}12%{opacity:1}
  45%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}
@keyframes countFade{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
/* fielded / allowed, big in the middle of your half while you hold a fighter in planning (ui.js renderBoardCnt); red when full */
.boardCnt{position:absolute;left:50%;top:60%;z-index:5;pointer-events:none;font-family:var(--disp);font-weight:700;font-size:clamp(3.5rem,13vmin,7rem);line-height:1;color:#fff;-webkit-text-stroke:.05em #0b0e1a;paint-order:stroke fill;
  text-shadow:0 0 .3em rgba(255,201,74,.9),0 .05em .12em rgba(0,0,0,.6);opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .2s,transform .25s cubic-bezier(.2,1.3,.4,1)}
.boardCnt.on{opacity:.92;transform:translate(-50%,-50%) scale(1)}
.boardCnt.full{color:var(--foe);text-shadow:0 0 .3em rgba(255,90,74,.9),0 .05em .12em rgba(0,0,0,.6)}
.toast{position:absolute;left:50%;bottom:calc(var(--shopH) + .875rem);transform:translateX(-50%);z-index:4;font-size:.875rem;padding:.4375rem .875rem;max-width:min(35rem,calc(100% - 2rem));text-align:center;pointer-events:none;opacity:0;transition:opacity .25s}
.toast.show{opacity:1}
.toast b,.log b{color:#fff;font-weight:500}
.logPanel{position:absolute;right:calc(var(--plW) + 1.25rem);bottom:calc(var(--shopH) + .875rem);width:min(22.5rem,calc(100% - 2rem));z-index:6;padding:.625rem}
.log{font-size:.75rem;color:var(--dim);max-height:13.75rem;overflow-y:auto;line-height:1.55}
/* unit bars */
.ub{position:absolute;width:4.75rem;transform:translate(-50%,-100%);pointer-events:none;text-align:center}
.ub .st{font-size:.6875rem;color:#d9a066;letter-spacing:1px;line-height:1;text-shadow:0 1px .125rem #000;height:.6875rem}   /* 1★ bronze; a 2★'s silver and a 3★'s gold grow (loop.js sets .s2/.s3) */
.ub.s2 .st{font-size:.875rem;height:.875rem;color:#e8f0ff;text-shadow:0 0 .25rem rgba(170,210,255,.9),0 1px .125rem #000}
.ub.s3 .st{font-size:1.0625rem;height:1.0625rem;color:#ffd54a;letter-spacing:2px;text-shadow:0 0 .375rem rgba(255,200,60,.95),0 0 .75rem rgba(255,160,0,.6),0 1px .125rem #000;animation:starGlow 1.4s ease-in-out infinite alternate}
@keyframes starGlow{from{text-shadow:0 0 .25rem rgba(255,200,60,.8),0 1px .125rem #000}to{text-shadow:0 0 .5rem rgba(255,210,80,1),0 0 1rem rgba(255,160,0,.8),0 1px .125rem #000}}
.ub.s3 .nm{color:#ffe9a8}
.ub .b{height:.4375rem;border-radius:6.1875rem;background:rgba(5,7,14,.85);overflow:hidden;margin-top:1px;border:1px solid rgba(0,0,0,.6)}
.ub .b i{display:block;height:100%}
.ub .hp i{background:var(--good)}
.ub.foe .hp i{background:var(--foe)}
.ub .sh i{background:#dfe6ff}
.ub .nm{font-size:.6875rem;color:#eef1ff;text-shadow:0 1px .125rem #000,0 0 .125rem #000;white-space:nowrap;margin-top:1px}
.ub.sel .nm{color:var(--gold)}
/* the fighter's equipped items, under its bars and over its name (src/graphics/units.js ubItems; the owner's brief of
   2026-10-06): one icon each on a small navy tile, framed in its kind's colour (a component's steel, an item's gold, an
   emblem's violet, Ascension's glowing blue: ui.js itemKind), nothing when it carries nothing. 1.25rem a tile (20px at
   1440x900, 18-27px from 1280x720 to 1920x1080, with the HUD); the selected, inspected or hovered fighter's row, and an
   item's owner while it pulses, a little brighter and bigger (.hot). The icons take the pointer: their tooltip, and a tap
   is a tap on the fighter */
.ub .ubIt{display:flex;justify-content:center;gap:.125rem;margin-top:.125rem}
.ub .ubIt[hidden]{display:none}
.ub .ubI{pointer-events:auto;cursor:pointer;flex:none;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;padding:.0625rem;box-sizing:border-box;border-radius:.25rem;
  background:linear-gradient(180deg,rgba(22,28,58,.92),rgba(8,10,24,.94));border:1px solid #7c86b4;box-shadow:0 .0625rem .1875rem rgba(0,0,0,.65);font-size:.8125rem;line-height:1;opacity:.9;transition:transform .12s,opacity .12s,box-shadow .12s}
.ub .ubI.full{border-color:#d6b04a}
.ub .ubI.emb{border-color:#b77aff;box-shadow:0 0 .25rem rgba(183,122,255,.5),0 .0625rem .1875rem rgba(0,0,0,.65)}
.ub .ubI.asc{border-color:#bff0ff;box-shadow:0 0 .3125rem rgba(122,208,255,.75),0 .0625rem .1875rem rgba(0,0,0,.65)}
.ub.hot .ubI{opacity:1;transform:scale(1.1);border-color:var(--gold);box-shadow:0 0 .3125rem rgba(255,201,74,.55),0 .0625rem .1875rem rgba(0,0,0,.65)}
.ub .ubI:hover{opacity:1;transform:scale(1.2)}
.ub.warm .ubIt{display:none}
@media (min-width:1700px){.ub .ubI{width:1.125rem;height:1.125rem}}   /* (the HUD grows with the window: a tile stays at 24px at 1920x1080, the brief's 18-24) */
/* the warm-up: the item a fighter carries floats over its head, and its bars are put away */
/* a status mark by a fighter's bar (src/graphics/cinema.js cineMark; Saibaman's Acid Spit: the target's armour broken for the
   rest of the fight): the owner's picture left of the health bar, popping in (.7, 1.05, 1 over .15 s), faded as the fight
   ends; --stH is the star badge's height above the bars, so it sits by the health bar at any star */
.ub{--stH:.6875rem}.ub.s2{--stH:.875rem}.ub.s3{--stH:1.0625rem}
.ub .ubMk{position:absolute;right:100%;margin-right:.0625rem;top:calc(var(--stH) - .42rem);width:1.375rem;height:1.375rem;background:center/contain no-repeat;opacity:.82;pointer-events:none;filter:drop-shadow(0 .0625rem .125rem rgba(0,0,0,.75));transition:opacity .4s ease}
.ub .ubMk.in{animation:ubMkPop .15s ease-out}   /* (not .pop: that is the floating numbers' class, whose offset and rise it took) */
@keyframes ubMkPop{0%{transform:scale(.7)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
.ub .ubMk.css::before{content:"🛡";display:block;text-align:center;font-size:1rem;line-height:1.375rem;filter:drop-shadow(0 0 .25rem #b6ff3a)}   /* (its picture missing: a shield glowing acid green) */
.ub .ubMk.out{opacity:0}
.ub .ci{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:.125rem;display:flex;flex-direction:column;align-items:center;gap:.125rem;white-space:nowrap;font-size:.6875rem;color:#fff4d0;animation:ciBob 1.9s ease-in-out infinite}
.ub .ciIc{width:2.75rem;height:2.75rem;display:flex;align-items:center;justify-content:center;font-size:2rem;line-height:1;filter:drop-shadow(0 .125rem .25rem rgba(0,0,0,.75)) drop-shadow(0 0 .5rem rgba(255,201,74,.6))}
.ub .ciNm{padding:.0625rem .4375rem;border-radius:6.1875rem;background:rgba(8,11,22,.82);border:1px solid rgba(255,201,74,.6);box-shadow:0 .125rem .375rem rgba(0,0,0,.5)}
.ub.warm .b,.ub.warm .kr,.ub.warm .st{display:none}
.ub.warm .nm{display:inline-flex;align-items:center;gap:.3125rem;padding:.0625rem .4375rem;border-radius:6.1875rem;background:rgba(8,11,22,.72);color:#fff}
.ubCost{display:inline-flex;align-items:center;gap:.125rem;color:var(--gold)}
@keyframes ciBob{50%{translate:0 -.3125rem}}
.pop{position:absolute;transform:translate(-50%,-100%);font-family:var(--disp);font-size:1.125rem;pointer-events:none;animation:rise .85s ease-out forwards;text-shadow:0 .125rem .1875rem #000,0 0 .125rem #000;white-space:nowrap;z-index:5}
/* your coach's sign over its head (src/graphics/coach.js coachSign): pops in, rises and fades; it follows the figure */
.coachSign{position:absolute;transform:translate(-50%,-100%);font-family:var(--disp);font-size:1.75rem;font-weight:700;pointer-events:none;text-shadow:0 .125rem .25rem #000,0 0 .1875rem #000;white-space:nowrap;z-index:5;animation:coachSign 1.1s ease-out forwards}
@keyframes coachSign{0%{opacity:0;transform:translate(-50%,-60%) scale(.4)}15%{opacity:1;transform:translate(-50%,-100%) scale(1.25)}30%{transform:translate(-50%,-100%) scale(1)}100%{opacity:0;transform:translate(-50%,-180%) scale(1)}}
@keyframes rise{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -2.5rem}}
/* the Spirit Bomb lands: the view flashes white for a moment, under the HUD (--k: how white, from FEEL.bomb.flash) */
.whiteout{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,#fff 0,#e6f4ff 45%,rgba(200,230,255,.75) 100%);animation:whiteout .6s ease-out forwards}
@keyframes whiteout{from{opacity:var(--k,.6)}to{opacity:0}}
/* ultimate splash */
.splash{position:absolute;left:0;width:min(58%,34rem);top:calc(var(--topH) + 1.75rem);height:clamp(3.75rem,11vh,5.5rem);z-index:7;pointer-events:none;display:flex;align-items:center;background:linear-gradient(90deg,rgba(24,64,150,.78),rgba(24,64,150,.78) 70%,transparent);animation:splashIn 1.15s ease forwards;overflow:hidden}   /* a slim strip over the far rows, left half of the screen, gone in a second: it never covers the fight */
.splash .big{height:132%;margin-left:max(3%,.75rem);align-self:flex-start;border-radius:.5rem;box-shadow:0 .25rem .875rem rgba(0,0,0,.5)}
.splashTxt{display:flex;flex-direction:column;margin-left:.875rem;font-family:var(--disp);text-shadow:0 .125rem .375rem #000;min-width:0}
.splashTxt span{font-size:.6875rem;letter-spacing:.2rem;color:#cfe4ff}
.splashTxt b{font-size:clamp(1.0625rem,2.6vw,1.75rem);font-weight:400;color:#fff;white-space:nowrap}
.splashFace{height:80%;margin-left:auto;margin-right:max(12%,1.5rem);border-radius:.5rem;border:.125rem solid #9fdcff}
@keyframes splashIn{0%{transform:translateX(-100%)}14%{transform:none}78%{transform:none;opacity:1}100%{transform:translateX(25%);opacity:0}}
/* the combat presentation layer (src/graphics/cinema.js): over the board and the fighters' bars, under the HUD; empty
   when idle. Its elements are reused and animated by the Web Animations API (transform and opacity only). A picture,
   when it has one (.img), fills its box; else its kind's look below stands in. A glow's picture carries its own alpha
   (tools/combat_art.py: its black made see-through), so it reads over Kami's Lookout's white floor too; the CSS looks
   that stand in for a missing one blend by screen (.screen) */
.cineL{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}#cineTop{z-index:4}   /* .cineL under the HUD; #cineTop, a move's cut-in, over the Trait Stack and the Rival Ladder (3) but under the top bar, the shop and the menus (5): the traits recede under it (#traitRow.cineDim) */
.cineL .cx{position:absolute;left:0;top:0;display:none;pointer-events:none;will-change:transform,opacity;background:center/contain no-repeat;--c:#ff5fa8}
.cineL .cx.screen{mix-blend-mode:screen}
.cineL .burst.img{-webkit-mask:radial-gradient(closest-side,#000 68%,transparent 100%);mask:radial-gradient(closest-side,#000 68%,transparent 100%)}   /* a picture pinned to a point melts at its edge whatever its art: no box ever shows (tools/combat_art.py fades its edges too) */
.cineL .burst:not(.img){background:radial-gradient(circle,#fff 0 13%,color-mix(in srgb,var(--c) 85%,#fff) 26%,transparent 60%);clip-path:polygon(50% 0,57% 33%,84% 9%,66% 41%,100% 38%,68% 55%,93% 83%,59% 66%,52% 100%,43% 68%,13% 91%,33% 59%,0 51%,32% 42%,9% 14%,42% 33%)}   /* IMPACT_BURST: a starburst */
.cineL .speed:not(.img){background:repeating-conic-gradient(from 3deg at 50% 50%,color-mix(in srgb,var(--c) 55%,#fff) 0deg .6deg,transparent .6deg 3.9deg);-webkit-mask:radial-gradient(ellipse 50% 46% at 50% 50%,transparent 58%,#000 100%);mask:radial-gradient(ellipse 50% 46% at 50% 50%,transparent 58%,#000 100%)}   /* SPEED_LINES: rays at the edges, the middle clear */
.cineL .speed.img{background-size:cover;-webkit-mask:radial-gradient(ellipse 52% 48% at 50% 50%,transparent 40%,#000 85%);mask:radial-gradient(ellipse 52% 48% at 50% 50%,transparent 40%,#000 85%)}   /* (a picture of them: the middle kept clear of the fight) */
.cineL .slash{border-radius:50%;background:linear-gradient(90deg,transparent,#fff 16%,var(--c) 62%,transparent);filter:drop-shadow(0 0 .375rem var(--c))}   /* INK_SLASH */
.cineL .flash{inset:0;background:var(--c,#fff)}.cineL .flash:not([style*="--c"]){background:#fff}   /* ENERGY_FLASH: the whole screen, briefly */
.cineL .cut{container-type:size;overflow:hidden;background-color:#14040c;background-size:cover;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);box-shadow:0 0 0 .1875rem #000}   /* TRANSFORMATION_CUTIN / a Signature's banner: a slanted band; its picture covers it */
.cineL .cut:not(.img){background-image:linear-gradient(100deg,#120008 0%,color-mix(in srgb,var(--c) 75%,#200010) 45%,#120008 100%)}
.cineL .cut .cxArt{position:absolute;left:6%;top:-8%;height:116%;aspect-ratio:1;background:center 22%/cover no-repeat;-webkit-mask:linear-gradient(90deg,#000 62%,transparent);mask:linear-gradient(90deg,#000 62%,transparent)}   /* (no picture: the fighter's own key art...) */
.cineL .cut .cxTitle{position:absolute;right:8%;top:50%;transform:translateY(-50%) skewX(-6deg);max-width:58%;font:400 34cqh/.9 'Bangers',var(--disp);letter-spacing:.03em;text-align:right;color:#fff;-webkit-text-stroke:.05em #000;paint-order:stroke;text-shadow:0 .06em 0 #000,0 0 .3em var(--c)}   /* ...and the move's name in the comic face */
.cineL .cut.big .cxTitle{font-size:30cqh}
.cineL .cut.tall{clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);background-size:cover;background-position:center 30%}   /* a portrait cut-in (Vegeta's): a tall slanted card */
.cineL .sil.img{-webkit-mask:radial-gradient(closest-side,#000 62%,transparent 100%);mask:radial-gradient(closest-side,#000 62%,transparent 100%)}   /* SILHOUETTE_REVEAL: its picture, its edges melting into the darkened fight */
.cineL .sil:not(.img){border-radius:50%;background:radial-gradient(ellipse 34% 44% at 50% 55%,rgba(18,0,10,.92) 0 60%,transparent 61%),radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--c) 75%,transparent) 0 42%,transparent 70%)}
.cineL .sfxText{display:flex;align-items:center;justify-content:center;font:400 1rem/1 'Bangers',var(--disp);letter-spacing:.04em;color:#fff;-webkit-text-stroke:.07em #000;paint-order:stroke;text-shadow:.04em .06em 0 #000,0 0 .25em var(--c);white-space:nowrap}   /* a manga sound effect: its picture, else the word */
.cineL .swirl:not(.img){border-radius:50%;background:conic-gradient(from 0deg,transparent,var(--c) 12%,transparent 26%,var(--c) 40%,transparent 54%,var(--c) 68%,transparent 82%);-webkit-mask:radial-gradient(circle,transparent 40%,#000 46% 60%,transparent 67%);mask:radial-gradient(circle,transparent 40%,#000 46% 60%,transparent 67%)}   /* a swirl round a fighter */
.cineL .ring:not(.img){border-radius:50%;border:.3125rem solid var(--c);box-shadow:0 0 1rem var(--c),inset 0 0 1rem var(--c)}   /* a ground ring */
.cineL .drift:not(.img){background:radial-gradient(circle at 28% 62%,var(--c) 0 2.5%,transparent 3.5%),radial-gradient(circle at 62% 30%,var(--c) 0 2%,transparent 3%),radial-gradient(circle at 74% 70%,#fff 0 1.5%,transparent 2.5%),radial-gradient(circle at 40% 18%,var(--c) 0 1.8%,transparent 2.8%),radial-gradient(circle at 18% 34%,#fff 0 1.2%,transparent 2.2%)}   /* petals drifting up */
#app canvas.cineGrey{filter:saturate(.35) brightness(.88)}#app canvas{transition:filter .14s}   /* an Awakening greys the fight for a moment */
.ub.formed .nm::before{content:attr(data-form);display:block;font:400 .5rem/1.2 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:#ff8ac0;text-shadow:0 1px .125rem #000}   /* a fighter in its form (Monster Point): named over its name */
/* overlays */
.overlay{position:absolute;inset:0;background:rgba(5,7,14,.88);display:flex;align-items:center;justify-content:center;z-index:20;padding:1.25rem}
.overlay .box{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:.875rem;padding:1.375rem 1.5rem;max-width:25rem}   /* relative: a box's x (.xBtn) sits in its own corner */
/* scouting: a seat's board in a card beside the player list */
.scout{position:absolute;right:calc(var(--plW) + 1.25rem);top:calc(var(--topH) + .75rem);width:min(21rem,calc(100% - var(--plW) - 2rem));z-index:6;padding:.625rem .75rem .75rem;max-height:calc(100% - var(--topH) - var(--shopH) - 2rem);overflow-y:auto;scrollbar-width:thin}
.scoutHead{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.scoutHead .av{width:2.75rem;height:2.75rem;border-radius:50%;overflow:hidden;border:.1875rem solid #b8413a;background:#10142a;flex:none}.scoutHead .av img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.scoutWho{display:flex;flex-direction:column;min-width:0;flex:1}.scoutWho b{font-family:var(--disp);font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scoutWho small{color:var(--dim);font-size:.75rem}
.scout .xBtn{position:static;flex:none}
.scoutTraits{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.5rem}
.scoutTraits .trait{padding:.125rem .5rem .125rem .25rem;grid-template-columns:1.625rem 1fr;font-size:.6875rem;cursor:default}.scoutTraits .trait .num{width:1.625rem;height:1.4375rem;font-size:.75rem}
.scoutTraits .none{color:var(--dim);font-size:.75rem}
.scoutBoard{display:grid;grid-template-columns:repeat(auto-fill,minmax(4rem,1fr));gap:.375rem}
.scoutU{position:relative;border-radius:.5rem;overflow:hidden;background:#10142a;border:1px solid var(--line);aspect-ratio:3/4}
.scoutU img.cp{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.scoutU .st{position:absolute;left:.25rem;top:.125rem;font-size:.6875rem;color:#d9a066;text-shadow:0 1px .125rem #000;letter-spacing:1px}.scoutU.s2 .st{color:#e8f0ff}.scoutU.s3 .st{color:#ffd54a;font-size:.8125rem}
.scoutU .nm{position:absolute;left:0;right:0;bottom:0;padding:.125rem .25rem;font-size:.625rem;background:linear-gradient(transparent,rgba(5,7,14,.9));color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scoutU .its{position:absolute;right:.125rem;top:.125rem;display:flex;flex-direction:column;gap:.0625rem}.scoutU .its span{width:1.125rem;height:1.125rem;border-radius:.25rem;background:rgba(8,10,20,.8);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.75rem;overflow:hidden}.scoutU .its img{width:100%;height:100%;object-fit:cover}
.scoutU.t4{border-color:#7c4dff}.scoutU.t5{border-color:#ffb300}
.scoutLabel{font-family:var(--disp);font-size:.625rem;letter-spacing:.08em;color:var(--dim);text-transform:uppercase;margin:.5rem 0 .25rem}
.scoutBench{grid-template-columns:repeat(auto-fill,minmax(3.25rem,1fr))}.scoutBench .scoutU{opacity:.9}
.scoutAugs{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.5rem}.scoutAugs span{font-size:.6875rem;padding:.125rem .375rem;border-radius:.375rem;background:rgba(8,10,20,.7);border:1px solid var(--line)}
.scoutBtns{margin-top:.5rem}.scoutBtns button{font:inherit;font-size:.75rem;padding:.25rem .625rem;border-radius:.375rem;border:1px solid var(--line);background:rgba(8,10,20,.7);color:var(--fg);cursor:pointer}
.pl.scoutable{cursor:pointer}.pl.scouted .pbox{box-shadow:0 0 0 .125rem #fff,0 0 .75rem rgba(159,220,255,.9)}
/* online, the seat whose board is on show (or followed): an eye on its portrait (ui.js renderPlayers), and the pill
   under the clock with its name and HOME (renderViewPill) */
.pl .eye{position:absolute;right:.125rem;top:.125rem;z-index:2;font-size:.75rem;line-height:1;filter:drop-shadow(0 0 .2rem rgba(0,0,0,.9));pointer-events:none}
.pl.viewing .pbox{box-shadow:0 0 0 .125rem var(--gold),0 0 .75rem rgba(255,201,74,.75)}
.viewPill{display:flex;align-items:center;gap:.5rem;padding:.3125rem .375rem .3125rem .75rem;border-radius:1.25rem;font-family:var(--disp);font-size:.75rem;letter-spacing:.04em;color:#dfe6ff;white-space:nowrap}
.viewPill b{color:var(--gold);font-weight:700;letter-spacing:.02em;max-width:9rem;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom}
.viewPill button{font:inherit;font-size:.6875rem;letter-spacing:.06em;padding:.1875rem .625rem;border-radius:1rem;border:1px solid #6b5a1f;background:rgba(20,16,8,.88);color:var(--gold);cursor:pointer}
.viewPill button:hover{background:rgba(255,201,74,.18);color:#fff}
#app.mode-combat .viewPill{font-size:.6875rem}
@media (max-width:760px){.scout{right:.625rem;left:.625rem;width:auto;top:calc(var(--topH) + 3rem)}}
/* the fight's intro: the match-up across the middle of the board, then FIGHT! */
.vs{position:absolute;left:0;right:0;top:38%;z-index:7;display:flex;align-items:center;justify-content:center;gap:1.5rem;pointer-events:none;animation:vsIn .4s cubic-bezier(.2,1.3,.4,1) both}
.vs.out{animation:vsOut .35s ease-in both}
@keyframes vsIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes vsOut{from{opacity:1}to{opacity:0;transform:scale(1.15)}}
.vsSide{display:flex;flex-direction:column;align-items:center;gap:.375rem;min-width:9rem;max-width:14rem}
.vsSide .av{width:5.5rem;height:5.5rem;border-radius:50%;overflow:hidden;border:.25rem solid var(--gold);background:#10142a;box-shadow:0 0 1.5rem rgba(255,201,74,.7)}
.vsSide .av img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.vsSide b{font-family:var(--disp);font-size:1.375rem;color:#fff;text-shadow:0 .125rem .25rem #000,0 0 .75rem rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14rem}
.vsSide small{font-family:var(--disp);font-size:.8125rem;color:#ffd0c8;text-shadow:0 1px .125rem #000}
.vsSide.me{animation:vsSlideL .45s cubic-bezier(.2,1.2,.4,1) both}.vsSide.foe{animation:vsSlideR .45s cubic-bezier(.2,1.2,.4,1) both}
.vsSide.foe .av{border-color:#ff6a5a;box-shadow:0 0 1.5rem rgba(255,106,90,.8)}
@keyframes vsSlideL{from{opacity:0;transform:translateX(-4rem)}to{opacity:1;transform:none}}@keyframes vsSlideR{from{opacity:0;transform:translateX(4rem)}to{opacity:1;transform:none}}
.vsMid{display:flex;flex-direction:column;align-items:center}
.vsWord{font-family:var(--disp);font-size:3.5rem;line-height:1;color:#ffd54a;text-shadow:0 .25rem .5rem #000,0 0 1.5rem rgba(255,160,0,.8);letter-spacing:.06em;animation:vsPulse .9s ease-in-out infinite alternate}
.vs.result .vsWord{animation:none;font-size:3rem}   /* its colours by the result: .vs.result.victory / .defeat below */
.vsSide .tag{font-family:var(--disp);font-size:.75rem;letter-spacing:.1em;padding:.125rem .5rem;border-radius:.375rem;margin-top:.125rem}
.vsSide .tag.win{background:var(--gold);color:#0b0e1a}.vsSide .tag.lose{background:#8a2a22;color:#fff}
.vs.result .vsSide.loser .av{filter:grayscale(.7) brightness(.8);box-shadow:none;border-color:#6b7aa0}
.vsWord.go{color:#fff;font-size:4.5rem;text-shadow:0 .25rem .5rem #000,0 0 2rem rgba(255,80,60,.9);animation:vsGo .5s cubic-bezier(.2,1.4,.4,1) both}
.vsMid small{font-family:var(--disp);font-size:.75rem;color:var(--dim);letter-spacing:.1em;text-shadow:0 1px .125rem #000}
/* the round's result (ui.js roundResultOn, ROUND_RESULT: its shares and times, here as --rr* on #app): VICTORY in gold,
   DEFEAT in a warm red-orange, a little glow and no panel behind; the portraits further apart, the winner always on the
   title's right and the loser on its left (a victory swaps the two sides), coming in by stages, then the title with a
   restrained scale; the board's bars and names give way and the battlefield dims a touch while it shows (#app.rr-on),
   the fighters as they are (the owner's brief of 2026-10-06, the final UI pass) */
.vs.result{animation:none;gap:3rem}
.vs.result .vsSide.me{order:1;animation:vsSlideL var(--rrSidesMs,220ms) cubic-bezier(.2,1.2,.4,1) var(--rrSidesAt,150ms) both}
.vs.result .vsSide.foe{order:3;animation:vsSlideR var(--rrSidesMs,220ms) cubic-bezier(.2,1.2,.4,1) var(--rrSidesAt,150ms) both}
.vs.result .vsMid{order:2;animation:rrTitle var(--rrTitleMs,240ms) cubic-bezier(.2,1.25,.4,1) var(--rrTitleAt,200ms) both}
.vs.result.victory .vsSide.foe{order:1;animation-name:vsSlideL}.vs.result.victory .vsSide.me{order:3;animation-name:vsSlideR}
.vs.result.out{animation:vsOut var(--rrOutMs,350ms) ease-in both}
@keyframes rrTitle{from{opacity:0;transform:scale(1.18)}to{opacity:1;transform:none}}
.vs.result.victory .vsWord{color:#ffd54a;text-shadow:0 .25rem .5rem #000,0 0 1.25rem rgba(255,184,40,.7),0 0 2.75rem rgba(255,150,30,.3)}
.vs.result.defeat .vsWord{color:#ff6448;text-shadow:0 .25rem .5rem #000,0 0 1.25rem rgba(255,84,48,.7),0 0 2.75rem rgba(255,60,30,.28)}
.ub{transition:filter .3s ease}
#app.rr-on .ub{filter:opacity(var(--rrBars,.25));transition:filter var(--rrBarsMs,120ms) ease var(--rrBarsAt,50ms)}
#app.rr-on .ub.npc{filter:opacity(var(--rrBars,.25)) drop-shadow(0 0 .25rem rgba(255,90,58,.6))}
#app.rr-on canvas{filter:brightness(var(--rrBright,.88)) saturate(var(--rrSat,.88));transition:filter var(--rrDimMs,180ms) ease var(--rrDimAt,100ms)}
@keyframes vsPulse{from{transform:scale(1)}to{transform:scale(1.12)}}@keyframes vsGo{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (max-width:760px){.vsSide .av{width:3.5rem;height:3.5rem}.vsSide b{font-size:1rem;max-width:8rem}.vsSide{min-width:0}.vsWord{font-size:2.25rem}.vs{gap:.75rem}.vs.result{gap:1.25rem}}
/* ---------- the result screen (src/ui/result.js): the end of a run ----------
   The looks by place: .rs-win (1st: gold, warm light, confetti), .rs-top (2nd-4th: silver and gold, a little confetti),
   .rs-out (5th-8th: cool, blue and violet with a crimson pill, embers rising). Each is the variables at the top of its
   rule (--rsA/--rsB/--rsC the headline's gradient, --rsGlow its glow, --rsRim the frame's edge, --rsTint the light).
   The reveal is .rs-play (its timings are RESULT.t in result.js, handed in as --t-*); the end state, and a reopen, is
   .rs-done, the plain rules below. In the art's frame sizes are cqw (its width), so the headline and the cards scale with
   it; the rest is rem like the HUD. The frame is as big as the window leaves over the panel and the buttons (--rsBelow). */
.finalOv{flex-direction:column;justify-content:flex-start;gap:.625rem;padding:1rem .75rem;background:transparent;overflow:hidden auto;animation:none;
  --rsBelow:15.25rem;--frameW:min(calc(100vw - 1.5rem),calc((100vh - var(--rsBelow)) * 1672 / 941));
  --rsA:#ffd54a;--rsB:#ff9a2a;--rsC:#7a3b00;--rsGlow:rgba(255,190,60,.6);--rsRim:rgba(255,214,120,.6);--rsTint:rgba(255,170,40,.24)}
.finalOv.rs-top{--rsA:#f6f8fd;--rsB:#c3cde2;--rsC:#47506b;--rsGlow:rgba(230,236,255,.5);--rsRim:rgba(222,230,246,.55);--rsTint:rgba(200,215,255,.16)}
.finalOv.rs-out{--rsA:#e4e9ff;--rsB:#8c9bff;--rsC:#2a2163;--rsGlow:rgba(120,110,255,.5);--rsRim:rgba(140,150,220,.5);--rsTint:rgba(90,60,200,.24)}
.rsBack{position:fixed;inset:-6%;z-index:0;pointer-events:none;background:#04060f center/cover no-repeat;filter:blur(1.25rem) brightness(.42) saturate(1.15)}   /* the art again, blurred and dark, behind everything: the screen's own backdrop (opaque: the game isn't drawn behind it once it is in, loop.js) */
.rs-out .rsBack{filter:blur(1.25rem) brightness(.3) saturate(.55)}
.finalOv::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 70% 55% at 50% 30%,var(--rsTint),transparent 70%),radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.8) 100%)}
.rsFrame{position:relative;z-index:2;flex:none;width:var(--frameW);aspect-ratio:1672/941;container-type:inline-size;margin-top:auto}   /* (auto margins: centred when there is room, from the top when it scrolls) */
.finalArt{position:absolute;inset:0;background:#0a0d1c center/cover no-repeat;border-radius:.75rem;box-shadow:0 0 3rem rgba(0,0,0,.8),0 0 0 1px var(--rsRim),0 0 2.5rem var(--rsTint);container-type:inline-size;overflow:hidden}
.rs-out .finalArt{filter:saturate(.8) brightness(.9)}
/* the rankings: each seat's card on its place in the art (art.js FINAL_SPOTS), 8th first in the reveal; yours in gold with YOU */
.finalCard{position:absolute;transform:translate(-50%,-50%) scale(var(--cardScale,1));display:flex;align-items:center;gap:.6cqw;padding:.4cqw .9cqw .4cqw .5cqw;border-radius:9cqw;background:rgba(6,8,18,.8);border:.15cqw solid rgba(255,220,120,.55);box-shadow:0 .3cqw 1.2cqw rgba(0,0,0,.7);white-space:nowrap;max-width:20cqw;backdrop-filter:blur(2px)}
@keyframes cardIn{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}to{opacity:1;transform:translate(-50%,-50%) scale(var(--cardScale,1))}}
.finalCard .av{flex:none;width:3.2cqw;height:3.2cqw;border-radius:50%;overflow:hidden;border:.2cqw solid #b8413a;background:radial-gradient(circle at 50% 30%,#2a3560,#10142a)}
.finalCard .av img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.finalCard .nm{font-family:var(--disp);font-size:1.35cqw;color:#fff;text-shadow:0 .1cqw .3cqw #000;overflow:hidden;text-overflow:ellipsis}
.finalCard .tag{font-family:var(--disp);font-size:.9cqw;color:var(--dim)}
.finalCard .you{flex:none;font-family:var(--disp);font-size:.85cqw;letter-spacing:.06em;padding:.12cqw .5cqw;border-radius:1cqw;background:var(--gold);color:#241a00}
.finalCard.me{border-color:var(--gold);box-shadow:0 0 1.5cqw rgba(255,201,74,.75),0 0 0 .15cqw rgba(255,255,255,.35)}.finalCard.me .av{border-color:var(--gold)}.finalCard.me .nm{color:var(--gold)}
.finalCard.p1{--cardScale:1.12;max-width:26cqw}.finalCard.p1 .av{width:4.4cqw;height:4.4cqw}.finalCard.p1 .nm{font-size:1.8cqw}
.finalCard.p2 .av,.finalCard.p3 .av{width:3.8cqw;height:3.8cqw}.finalCard.p2 .nm,.finalCard.p3 .nm{font-size:1.5cqw}
.finalCard.p1{border-color:#ffd54a;box-shadow:0 0 1.6cqw rgba(255,201,74,.55),0 .3cqw 1.2cqw rgba(0,0,0,.7)}.finalCard.p2{border-color:#dfe6f2}.finalCard.p3{border-color:#d08a52}   /* the podium's three in its metals */
.finalCard:is(.p4,.p5,.p6,.p7,.p8){padding-top:.25cqw;padding-bottom:.25cqw}.finalCard:is(.p4,.p5,.p6,.p7,.p8) .av{width:2.9cqw;height:2.9cqw}
.finalCard:is(.p4,.p5,.p6,.p7,.p8):not(.me){border-color:rgba(255,220,120,.45);box-shadow:0 .3cqw 1cqw rgba(0,0,0,.62)}.finalCard:is(.p4,.p5,.p6,.p7,.p8):not(.me) .nm{color:#eceef5}   /* the right column's other seats a step quieter than yours, so the eye finds your card at once (the owner, 2026-10-07: about 5-10% less border and light, not a dimming) */
.finalCard.cpuSeat .av{border-color:#6b7aa0;filter:saturate(.6)}
.finalCard.alive{border-style:dashed}
/* the headline at its place: over the art's own painted title (RESULT.title_box), on a brush stroke of its own */
.rsHead{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:flex-start;padding:.5cqw 1.8cqw 1cqw 1.2cqw;pointer-events:none;transform-origin:10% 40%}
.rsHead::before{content:"";position:absolute;inset:-.8cqw -3.8cqw -1.3cqw -1.2cqw;z-index:-1;background:linear-gradient(98deg,#05070f 0%,#080a16 94%,rgba(8,10,22,0) 100%);   /* opaque over the art's own painted title (it ends at 67% of the art's width), fading before the 4th's panel (72%) */
  clip-path:polygon(0 6%,5% 0,24% 4%,46% 0,70% 5%,92% 1%,100% 12%,97% 34%,100% 58%,95% 80%,99% 100%,74% 95%,50% 100%,27% 94%,6% 100%,0 88%)}
.rsHead::after{content:"";position:absolute;left:1cqw;right:8%;bottom:-.7cqw;height:.22cqw;border-radius:1cqw;background:linear-gradient(90deg,transparent,var(--rsA) 25%,var(--rsB) 70%,transparent)}
.rsWord{font-family:'Bangers',var(--disp);font-size:7.2cqw;line-height:.95;letter-spacing:.03em;white-space:nowrap;transform:skewX(-7deg);
  background:linear-gradient(180deg,#fffbe0 0%,var(--rsA) 32%,var(--rsB) 70%,var(--rsC) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.16cqw rgba(12,6,0,.9);filter:drop-shadow(0 .35cqw .5cqw rgba(0,0,0,.85)) drop-shadow(0 0 1.4cqw var(--rsGlow))}
.rs-win .rsHead{padding-top:.4cqw;padding-bottom:.65cqw}.rs-win .rsHead .rsWord{font-size:6.5cqw}   /* the settled victory header about 9.5% shorter, leaving more celebration art in view */
.rs-out .rsHead .rsWord{font-size:6.5cqw;line-height:6.84cqw}   /* ELIMINATED a tenth smaller at its place (the owner, 2026-10-07: the first read, without competing with the rankings), its line as tall as before so the banner still covers the art's painted title; the reveal's slam keeps its size (--iw) */
.rsRow{display:flex;align-items:center;gap:1.1cqw;margin-top:.2cqw}
.rsTitle{font-family:'Bangers',var(--disp);font-size:3cqw;line-height:1.05;letter-spacing:.05em;color:#fff;white-space:nowrap;overflow:hidden;transform:skewX(-7deg);text-shadow:0 .2cqw .3cqw #000,0 0 1cqw var(--rsGlow)}
.rsPlace{font-family:var(--disp);font-size:1.25cqw;letter-spacing:.06em;padding:.35cqw 1.1cqw;border-radius:2cqw;color:#1d1300;white-space:nowrap;background:linear-gradient(180deg,#fff3c4,var(--rsA) 45%,var(--rsB));box-shadow:0 0 1cqw var(--rsGlow),inset 0 -.15cqw 0 rgba(0,0,0,.25)}
.rs-out .rsPlace{color:#fff;background:linear-gradient(180deg,#e04a6a,#86204a);box-shadow:0 0 1cqw rgba(255,60,100,.5),inset 0 -.15cqw 0 rgba(0,0,0,.3)}
.rsSub{font-family:var(--disp);font-size:1.05cqw;letter-spacing:.32em;color:#e9d9a8;margin-top:.45cqw;text-shadow:0 1px .2cqw #000}
/* the reveal's headline, big in the middle of the screen: the same word sized to the screen (--iw, result.js), your place
   under it, rays and a burst behind; hidden but laid out at rest (result.js measures it) */
.rsIntro{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2vh;padding-bottom:16vh;pointer-events:none;visibility:hidden}
.rsIntro .rsWord{font-size:var(--iw,12vw);-webkit-text-stroke:.012em rgba(12,6,0,.9);filter:drop-shadow(0 .05em .08em rgba(0,0,0,.85)) drop-shadow(0 0 .25em var(--rsGlow))}
.rsIntro .rsPlace{font-size:calc(var(--iw,12vw) * .17);padding:.35em 1.1em;border-radius:2em;box-shadow:0 0 1.5em var(--rsGlow)}
.rsRays{position:absolute;left:50%;top:var(--ry,42%);width:130vmax;height:130vmax;transform:translate(-50%,-50%);border-radius:50%;opacity:0;
  background:repeating-conic-gradient(from 0deg,var(--rsGlow) 0deg 5deg,transparent 5deg 16deg);-webkit-mask:radial-gradient(circle,#000 6%,transparent 52%);mask:radial-gradient(circle,#000 6%,transparent 52%)}
.rs-out .rsRays{display:none}   /* (no light for a knockout: the embers carry it) */
.rsBurst{position:absolute;left:50%;top:var(--ry,42%);width:12vmin;height:12vmin;border-radius:50%;border:.5vmin solid var(--rsA);box-shadow:0 0 2vmin var(--rsGlow),inset 0 0 2vmin var(--rsGlow);transform:translate(-50%,-50%) scale(.2);opacity:0}
.rsIntro::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% var(--ry,42%),var(--rsGlow),transparent 55%);opacity:0}
.rs-play .rsIntro{visibility:visible;animation:rsLand var(--t-landMs) cubic-bezier(.55,0,.25,1) var(--t-land) both}
.rs-play .rsIntro .rsWord{animation:rsSlam .55s cubic-bezier(.2,1.5,.35,1) var(--t-slam) both}
.rs-play .rsIntro .rsPlace{animation:rsPop .45s cubic-bezier(.2,1.4,.4,1) var(--t-place) both}
.rs-play .rsRays{animation:rsRays 1.4s ease-out calc(var(--t-slam) + 120ms) both,rsSpin 18s linear infinite}
.rs-play .rsBurst{animation:rsBurst .75s ease-out calc(var(--t-slam) + 200ms) both}
.rs-play .rsIntro::after{animation:rsFlash .7s ease-out calc(var(--t-slam) + 150ms) both}
@keyframes rsLand{from{transform:none;opacity:1}65%{opacity:1}to{transform:translate(var(--lx),var(--ly)) scale(var(--lk));opacity:0}}   /* onto the headline at its place */
@keyframes rsSlam{0%{opacity:0;transform:skewX(-7deg) scale(2.6)}55%{opacity:1;transform:skewX(-7deg) scale(.93)}100%{opacity:1;transform:skewX(-7deg) scale(1)}}
@keyframes rsPop{from{opacity:0;transform:translateY(.6em) scale(.6)}to{opacity:1;transform:none}}
@keyframes rsRays{from{opacity:0}30%{opacity:.85}to{opacity:.55}}
@keyframes rsSpin{to{rotate:360deg}}
@keyframes rsBurst{from{opacity:.95;transform:translate(-50%,-50%) scale(.2)}to{opacity:0;transform:translate(-50%,-50%) scale(9)}}
@keyframes rsFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
/* the rest of the screen coming in: the backdrop over the game, then (from `land`) the art, the headline at its place,
   the cards (their delays inline), the panel and its cells, the note and the buttons */
.rs-play .rsBack,.rs-play.finalOv::before{animation:rsFade var(--t-fade) ease-out both}
.rs-play .finalArt{animation:rsArtIn .7s ease-out var(--t-land) both}
.rs-play .rsHead::before,.rs-play .rsHead::after{animation:rsFade .22s ease-out calc(var(--t-land) - 150ms) both}   /* (the banner ahead of the art, so the art's own title never shows through it) */
.rs-play .rsHead>*{animation:rsHeadIn calc(var(--t-landMs) * .5) ease-out calc(var(--t-land) + var(--t-landMs) * .7) both}   /* (as the big word lands on it) */
.rs-play .finalCard{animation:cardIn .5s cubic-bezier(.2,1.4,.4,1) both}
.rs-play .rsDock{animation:rsRise .5s cubic-bezier(.2,1,.3,1) var(--t-dock) both}
.rs-play .rsCell{animation:rsRise .45s ease-out calc(var(--t-dock) + var(--i) * var(--t-dockGap)) both}
.rs-play .finalNote,.rs-play .finalBtns{animation:rsRise .45s ease-out var(--t-btns) both}
@keyframes rsFade{from{opacity:0}to{opacity:1}}
@keyframes finalIn{from{opacity:0}to{opacity:1}}   /* (a fade the mission's result card uses too: .mEnd) */
@keyframes rsArtIn{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}
@keyframes rsHeadIn{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes rsRise{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}
/* confetti (a win, a top 4) falling twice, or embers (a knockout) rising for a while: result.js rsParticles */
.rsFx{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.rsFx i{position:absolute;left:var(--x);opacity:0}
.rsFx i.confetti{top:-6vh;width:calc(.55rem * var(--s));height:calc(.95rem * var(--s));border-radius:.1rem;background:var(--c);animation:rsConf var(--d) linear var(--dl) 2 both}
.rsFx i.ember{bottom:-4vh;width:calc(.32rem * var(--s));height:calc(.32rem * var(--s));border-radius:50%;background:var(--c);box-shadow:0 0 .6rem var(--c);animation:rsEmber var(--d) ease-out var(--dl) 3 both}
@keyframes rsConf{0%{opacity:0;transform:translate(0,0) rotate(0)}6%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translate(var(--sw),112vh) rotate(var(--r))}}
@keyframes rsEmber{0%{opacity:0;transform:translate(0,0)}15%{opacity:.85}100%{opacity:0;transform:translate(var(--sw),-72vh)}}
/* the stats panel: your place, the round, the streak, the MVP, the traits; navy glass, a gold edge, gold dividers */
.rsDock{position:relative;z-index:4;flex:none;display:grid;grid-template-columns:1.05fr .95fr .8fr 1.6fr 1.6fr;width:min(calc(100vw - 1.5rem),max(var(--frameW),60rem));
  background:linear-gradient(180deg,rgba(16,21,44,.95),rgba(6,8,18,.97));border:1px solid var(--rsRim);border-radius:.75rem;box-shadow:0 .5rem 2rem rgba(0,0,0,.6),inset 0 0 1.5rem var(--rsTint),0 0 0 .1875rem rgba(255,214,120,.07)}
.rsDock::before,.rsDock::after{content:"";position:absolute;top:-.0625rem;width:1.75rem;height:1.75rem;border-top:.125rem solid var(--rsA);pointer-events:none}.rsDock::before{left:-.0625rem;border-left:.125rem solid var(--rsA);border-top-left-radius:.75rem}.rsDock::after{right:-.0625rem;border-right:.125rem solid var(--rsA);border-top-right-radius:.75rem}   /* gold corners */
.rsCell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.5rem .625rem;min-width:0;text-align:center}
.rsCell+.rsCell::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;background:linear-gradient(180deg,transparent,var(--rsRim),transparent)}
.rsLbl{font-family:var(--disp);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:#e9d9a8;white-space:nowrap}
.rsVal{display:flex;align-items:center;gap:.5rem;color:var(--rsA)}.rsVal b{font-family:var(--disp);font-size:1.6rem;color:#fff;line-height:1;white-space:nowrap}
.rsSm{font-size:.75rem;color:#aab4d6;line-height:1.3}.rsSm em{font-style:normal;color:var(--gold);font-weight:700}
.rsI{width:1.6rem;height:1.6rem;flex:none}
.rsOrd{position:relative;display:flex;align-items:center;gap:.125rem;color:var(--rsA)}
.rsOrd b{font-family:var(--disp);font-size:2.375rem;line-height:1;background:linear-gradient(180deg,#fffbe0,var(--rsA) 40%,var(--rsB));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .125rem .25rem rgba(0,0,0,.8))}
.rsOrd sup{font-size:.45em;vertical-align:.9em}
.rsLaurel{width:1.1rem;height:2.6rem}.rsLaurel.r{transform:scaleX(-1)}
.rsOrd.crowned{padding-top:.75rem}.rsCrown{position:absolute;left:50%;top:-.125rem;transform:translateX(-50%);color:var(--rsA)}.rsCrown .rsI{width:1.125rem;height:.875rem}
.rsName{font-family:var(--disp);font-size:.875rem;color:#fff;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsMv{display:flex;align-items:center;gap:.625rem;min-width:0}
.rsPic{flex:none;width:3.5rem;height:3.5rem;border-radius:.5rem;overflow:hidden;border:.125rem solid var(--rsA);background:#10142a;box-shadow:0 0 .75rem var(--rsGlow)}.rsPic img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.rsMvT{display:flex;flex-direction:column;align-items:flex-start;gap:.125rem;min-width:0}
.rsMvT b{display:flex;align-items:center;gap:.375rem;font-family:var(--disp);font-size:1rem;color:#fff;max-width:100%}.rsMvT b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rsMvT b .rsI{width:1.1rem;height:.85rem;color:var(--gold)}
.rsStars{font-style:normal;color:var(--gold);font-size:.875rem;letter-spacing:.08em;text-shadow:0 0 .4rem rgba(255,201,74,.7)}
.rsMvT small{font-size:.75rem;color:#aab4d6;white-space:nowrap}
.rsHexes{display:flex;gap:.3125rem;flex-wrap:wrap;justify-content:center}
.rsHex{display:flex;flex-direction:column;align-items:center;gap:.125rem}
.rsHex i{display:flex;align-items:center;justify-content:center;width:2.225rem;height:2.5rem;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(180deg,#9a6a3a,#5c3a1c)}
.rsHex.t2 i{background:linear-gradient(180deg,#e2e8f2,#8792a8)}.rsHex.t3 i{background:linear-gradient(180deg,#ffe27a,#c98a0a);box-shadow:0 0 .5rem rgba(255,201,74,.6)}
.rsHex i .trIc{width:1.3375rem;margin:0}.rsHex i .trIc img{width:1.3375rem;height:1.3375rem}
.rsHex b{font-family:var(--disp);font-size:.75rem;color:#fff}
.finalOv .finalNote{position:relative;z-index:4;margin:0;line-height:1.4;color:#aab4d6;font-size:.8125rem;text-align:center;text-shadow:0 1px .25rem #000}
.finalNote .rsFlavor{font-style:italic;font-weight:500;color:#f0dca0;font-size:.9375rem}.rs-out .finalNote .rsFlavor{color:#c9d0f4}   /* your place's flavour line (RESULT.lines) */
/* the buttons: Spectate in blue (online, knocked out, while the game goes on), Play again in gold, Return to lobby in navy */
.finalBtns{position:relative;z-index:4;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:auto}
.rsBtn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-width:13.5rem;padding:.75rem 1.5rem;border-radius:.5rem;border:1px solid;font-family:var(--disp);font-size:1rem;letter-spacing:.05em;cursor:pointer;position:relative;overflow:hidden;transition:transform .12s,filter .12s,box-shadow .2s}
.rsBtn .rsI{width:1.35rem;height:1.35rem}
.rsBtn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);transition:transform .5s}
.rsBtn:hover{transform:translateY(-.125rem);filter:brightness(1.08)}.rsBtn:hover::after{transform:translateX(120%)}.rsBtn:active{transform:translateY(0)}
.rsBtn:focus-visible{outline:.1875rem solid #fff;outline-offset:.1875rem}
.rsBtn.watch{background:linear-gradient(180deg,#4a86ff,#1f45c8);border-color:#a9c6ff;color:#fff;box-shadow:0 0 1.1rem rgba(70,130,255,.55)}
.rsBtn.again{background:linear-gradient(180deg,#ffe788,#f2b21c 60%,#c98a0a);border-color:#fff1b8;color:#2a1a00;box-shadow:0 0 1.2rem rgba(255,190,40,.55)}
.rsBtn.exit{background:linear-gradient(180deg,#1d2754,#0d1430);border-color:#5d73b8;color:#dfe7ff}
.finalBtns.watching .rsBtn.again{background:linear-gradient(180deg,#2a2412,#151006);color:var(--gold);border-color:#8a6a1f;box-shadow:none}   /* (spectating first: Play again steps back) */
.rsBtn:disabled{opacity:.6;cursor:default;transform:none}
@media (prefers-reduced-motion:reduce){.rs-play *,.rs-play::before{animation:none!important}.rsFx{display:none}.rsIntro{display:none}}
/* phones: the art across the width, the panel in two columns (your place and the MVP and traits the whole width), the
   buttons stacked; the screen scrolls */
@media (max-width:760px){
  .finalOv{--frameW:calc(100vw - 1rem);padding:.75rem .5rem;gap:.5rem}
  .rsDock{grid-template-columns:1fr 1fr;width:calc(100vw - 1rem)}
  .rsCell.rsPl,.rsCell.rsMvp,.rsCell.rsTr{grid-column:1 / -1}
  .rsCell+.rsCell::before{display:none}.rsCell{border-top:1px solid rgba(255,214,120,.18)}.rsCell.rsPl{border-top:0}
  .finalBtns{flex-direction:column;width:calc(100vw - 2rem)}.rsBtn{width:100%;min-width:0}
}
@media (max-height:520px) and (min-width:761px){.finalOv{--rsBelow:12.5rem}.rsCell{padding:.375rem .5rem}.rsOrd b{font-size:1.75rem}.rsPic{width:2.75rem;height:2.75rem}}
.overlay h2{font-family:var(--disp);font-size:1.5rem;margin:0 0 .625rem;text-align:center}
.overlay p{color:var(--dim);font-size:.875rem;line-height:1.6;margin:0 0 .75rem}
.overlay ul{margin:0 0 1rem;padding-left:1.125rem;color:var(--dim);font-size:.875rem;line-height:1.7}
.overlay ul b{color:var(--fg);font-weight:500}
.overlay .box button{width:100%}
.overlay .box .xBtn{width:auto}
#helpOv .box{max-width:44rem;max-height:100%;overflow-y:auto}   /* wide enough to fit a desktop window; on phones it scrolls, "Let's go" stays reachable */
.rosterBox{position:relative;max-width:47.5rem!important;width:100%;max-height:calc(100% - 1.25rem);overflow-y:auto}
.rosterGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.375rem,1fr));gap:.5rem}
.rosterGrid .card{height:6.5rem}
.rosterGrid .card.hero{box-shadow:0 0 0 .125rem var(--gold),0 0 1.125rem rgba(255,201,74,.45)}
/* augment picker, TFT-style: three tier-coloured cards (--c, set by ui.js) over the dimmed arena, under the menus'
   overlays; Hide shrinks it to the pill under the round tracker (above the shop on phones) */
.augOv{position:absolute;inset:0;z-index:15;display:flex;overflow-y:auto;padding:1.25rem;background:radial-gradient(ellipse at 50% 45%,rgba(16,22,48,.62),rgba(5,7,14,.9) 72%);animation:augFade .2s ease-out}
.augBox{margin:auto;display:flex;flex-direction:column;align-items:center;gap:1rem}
.augBox h2{margin:0;font-family:var(--disp);font-weight:400;font-size:1.75rem;letter-spacing:.5px;text-align:center;text-shadow:0 .125rem .5rem #000}
.augBox h2 b{font-weight:400;color:var(--c)}
.augBox h2 b.prismatic,.augCard.prismatic small{background:var(--prism);-webkit-background-clip:text;background-clip:text;color:transparent}
.augBox>p{margin:-.625rem 0 .25rem;color:#aeb6de;font-size:.875rem;text-align:center;text-shadow:0 1px .25rem #000}
.augCards{display:flex;gap:1.25rem;justify-content:center}
.augCol{display:flex;flex-direction:column;align-items:center;gap:.5rem}   /* a card and, under it, its own reroll (ui.js renderAug) */
.augRr{font:400 .8125rem var(--body);padding:.375rem .875rem;border-radius:.5rem;background:var(--panel2);border:1px solid var(--line);color:var(--fg);cursor:pointer}.augRr:hover:not(:disabled){border-color:var(--gold)}.augRr:disabled{opacity:.4;cursor:default}
.augCard{position:relative;width:13.75rem;min-height:17.5rem;display:flex;flex-direction:column;align-items:center;gap:.4375rem;padding:1.625rem 1rem 1.25rem;font:400 1rem var(--body);letter-spacing:0;text-align:center;color:var(--fg);border:.125rem solid var(--c);border-radius:.875rem;
  background:radial-gradient(120% 50% at 50% 0,color-mix(in srgb,var(--c) 28%,transparent),transparent 70%),linear-gradient(180deg,#182042,#0b0f22);
  box-shadow:0 .75rem 2rem rgba(0,0,0,.6),0 0 1.25rem color-mix(in srgb,var(--c) 30%,transparent);transition:transform .15s,box-shadow .15s;animation:augIn .4s var(--d,0s) cubic-bezier(.2,.8,.3,1.15) backwards}
.augCard.prismatic{border-color:transparent;background:radial-gradient(120% 50% at 50% 0,color-mix(in srgb,var(--c) 28%,transparent),transparent 70%) padding-box,linear-gradient(180deg,#1e1a46,#0d0b24) padding-box,var(--prism) border-box}
.augCard:hover{transform:translateY(-.375rem);box-shadow:0 1rem 2.25rem rgba(0,0,0,.65),0 0 1.75rem color-mix(in srgb,var(--c) 70%,transparent)}
.augCard:active{transform:scale(.97)}
.augCard kbd{position:absolute;left:.5rem;top:.5rem}
.augHex{width:5rem;height:4.375rem;margin-bottom:.375rem;font-size:2.125rem}
.augHex::before{inset:.1875rem;background:radial-gradient(circle at 50% 30%,#34407a,#0e1330 75%)}
.augCard small{font-size:.625rem;letter-spacing:.125rem;text-transform:uppercase;color:var(--c)}
.augCard b{font-family:var(--disp);font-weight:400;font-size:1.0625rem;line-height:1.2;color:#fff}
.augCard p{margin:.125rem 0 0;font-size:.8125rem;line-height:1.45;color:#c9d0f0}
#augHide,#augReroll,#anvilHide{min-width:8.5rem;background:var(--glass);color:#dfe5ff}
.augBtns{display:flex;gap:.625rem;justify-content:center;flex-wrap:wrap}#augReroll:disabled{opacity:.45;cursor:default}   /* the reroll beside Hide: once a run */
.augCard.anvil .augHex{background:linear-gradient(160deg,#2c3868,#141a2e)}.augHex .itImg{width:68%;height:78%;object-fit:contain}   /* the anvil's component cards */
.augPill{position:absolute;left:50%;top:calc(var(--topH) + .5rem);transform:translateX(-50%);z-index:6;padding:.4375rem 1.125rem;border:.125rem solid var(--c);border-radius:6.1875rem;background:rgba(12,16,32,.92);font-size:.8125rem;white-space:nowrap;animation:augPulse 1s ease-in-out infinite alternate}
.augPill.prismatic{border-color:transparent;background:linear-gradient(rgba(12,16,32,.94),rgba(12,16,32,.94)) padding-box,var(--prism) border-box}
.augPill:hover{scale:1.05}
#app.augOn .toast{visibility:hidden}   /* the picker says it already */
@keyframes augFade{from{opacity:0}}
@keyframes augIn{from{opacity:0;translate:0 1.5rem;scale:.94}}
.augCard.rerolled{animation:augFlip .5s cubic-bezier(.2,.8,.3,1.1)}   /* a card's reroll: it alone flips over to its new augment */
@keyframes augFlip{0%{transform:perspective(40rem) rotateY(90deg);filter:brightness(1.8)}60%{transform:perspective(40rem) rotateY(-8deg);filter:brightness(1.3)}100%{transform:none;filter:none}}
@keyframes augPulse{from{box-shadow:0 0 .375rem color-mix(in srgb,var(--c) 45%,transparent)}to{box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--c) 35%,transparent),0 0 1.25rem var(--c)}}
kbd{font-family:var(--disp);font-size:.6875rem;border:1px solid var(--line);border-radius:.3125rem;padding:1px .375rem;color:var(--fg);background:#10152a}
.nogl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1.25rem;text-align:center;color:var(--dim);z-index:1}
/* phones & small windows */
@media (max-width:760px){
  html{font-size:16px}
  #app{--plW:2.875rem}
  .menu{right:.375rem;gap:.1875rem}.menu button{width:2.125rem;height:2.125rem;font-size:.8125rem}.menu #setBtn{font-size:1rem}
  /* the round tracker shares the top row with the menu, at its left: room for ⚙️ and 🏁, or for ⚙️ alone (most of the time),
     ending where the player column below ⚙️ begins. Inside, the stage stands at the left of two rows, the round icons over
     the phase line, so the phase gets the bar's width: one line for nearly every text, two at most */
  .roundbar{left:.375rem;transform:none;top:calc(.5rem + env(safe-area-inset-top,0px));padding:.25rem .625rem;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"stage track" "stage phase";column-gap:.5rem;row-gap:.125rem;border-top:1px solid var(--line);border-radius:.75rem;max-width:calc(100% - 5.5rem)}
  #app:has(#rankBtn[hidden]) .roundbar{max-width:calc(100% - var(--plW) - .625rem)}
  .stage{grid-area:stage}.rtrack{grid-area:track}
  .stage b{font-size:1rem}.stage small{font-size:.5rem}
  .ri{width:1.0625rem;height:1.0625rem;font-size:.5625rem;border-radius:.25rem}.ri.art img{width:.9rem;height:.9rem}
  .phase{grid-area:phase;font-size:.6875rem;line-height:1.15;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .setPop{right:.375rem;top:calc(var(--topH) + .375rem);max-width:calc(100% - .75rem);max-height:calc(100% - var(--topH) - .75rem)}   /* under the tracker, which is in the same row as ⚙️ here */
  /* the rival banner, slim, at the right end of the item strip's band: the remover and the first items stay in view on its left */
  .clockRow{top:calc(var(--topH) + .4375rem);left:.625rem;right:.375rem;transform:none;width:auto;max-width:none;justify-content:space-between;gap:.375rem}
  .clockRow{justify-content:flex-end}
  .turnBanner{padding:.1875rem .5rem .1875rem .1875rem;gap:.375rem;min-width:0;max-width:100%}
  .turnBanner .fight{min-width:5.5rem;min-height:2rem;padding:.125rem .625rem}.turnBanner .fight small{font-size:.5rem}.turnBanner .fight b{font-size:.9375rem}
  .turnBanner.pick{padding:.25rem .625rem .25rem .25rem;gap:.5rem}.turnBanner.pick .av{width:2.25rem;height:2.25rem}.turnBanner.pick .who small{font-size:.625rem}.turnBanner.pick .who b{font-size:1.0625rem}.turnBanner.pick .fight{min-width:6.5rem;min-height:2.5rem}.turnBanner.pick .fight small{font-size:.625rem}.turnBanner.pick .fight b{font-size:1.125rem}   /* a phone: a little bigger, within the band */
  .turnBanner .av{width:1.75rem;height:1.75rem}.turnBanner .who small{font-size:.5rem}.turnBanner .who b{font-size:.875rem}.turnBanner .hp{min-width:2.5rem;gap:.125rem}.turnBanner .hp b{font-size:.8125rem}.turnBanner .clock{font-size:.875rem}
  .traits{flex-direction:row;width:auto;left:.625rem;right:.625rem;top:calc(var(--topH) + 2.875rem);max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:.125rem}
  .trait{flex:none;grid-template-columns:1.625rem auto;padding:.1875rem .5rem .1875rem .25rem;font-size:.6875rem}
  .trait .num{width:1.625rem;height:1.4375rem;font-size:.75rem}.trait .bp{font-size:.6875rem}
  /* the players: a strip of tiles across the top, under the trait strip (the names hide), so the board keeps the whole
     width a phone held upright has; the Players / Damage tabs are two icons at its left end. The Damage tab drops down
     as a column at the right edge instead, until you switch back (the camera fit keeps the strip's own height) */
  .players{left:.375rem;right:.375rem;width:auto;top:calc(var(--topH) + 5.5rem);max-height:none;flex-direction:row;flex-wrap:nowrap;align-items:flex-end;justify-content:center;gap:.1875rem;--tile:clamp(1.5rem,calc((100vw - 3.75rem) / 8 - .6875rem),2.375rem)}
  .players.dmgTab{left:auto;right:.25rem;width:auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;max-height:calc(100% - var(--topH) - var(--shopH) - 6.5rem)}
  .pl .pn,.pl .ptop small{display:none}
  .pl{max-width:none;align-self:auto;flex:none}.pl .pk{width:.6875rem;height:.6875rem;line-height:.625rem;font-size:.4375rem;margin-right:.0625rem}
  .pl .pbox{border-width:.125rem;border-radius:.375rem}.pl .pbar{width:.25rem}
  .pl .ptop{font-size:.625rem;height:.875rem}.pl .lv{font-size:.5rem;min-width:.875rem;height:.875rem;line-height:.8125rem;right:.0625rem;bottom:.0625rem}.pl .hit{font-size:.9375rem}
  .players{--plTabSize:1.5rem}   /* (two stacked at the strip's end) */
  .plTabs{flex-direction:column;justify-content:center;align-self:stretch;gap:.125rem;margin:0}.plTab{font-size:.75rem;line-height:1;padding:.125rem .1875rem}.plTab .ic{display:inline}.plTab .tx{display:none}   /* two icons stacked at the strip's left end */
  .dmgRound{display:none}.dmgSide{font-size:.5625rem;max-width:3.5rem}
  .dmgRow{padding:.125rem .25rem .125rem .125rem;gap:.25rem}.dmgRow .dn{display:none}.dmgBody{flex:none;width:2.25rem}.dmgRow .dv{min-width:1.75rem;font-size:.625rem}
  .inspect{top:auto;bottom:calc(var(--shopH) + .5rem);left:.625rem;right:.625rem;width:auto;max-height:40%;padding:.5rem .625rem}
  /* the inspect card, compact on a phone: a smaller portrait and type, the six stats on one row, smaller move art */
  .insTop{gap:.5rem}.insTop img{width:3.5rem;height:3.5rem;border-radius:.5rem}.insName{font-size:1rem}.insStars{font-size:.75rem}
  .tags{margin-top:.1875rem;gap:.1875rem}.tag{font-size:.625rem;padding:.0625rem .375rem}
  .stats{grid-template-columns:repeat(6,1fr);gap:.1875rem;margin:.375rem 0 .125rem}.stat{font-size:.4375rem;padding:.1875rem .0625rem;letter-spacing:0}.stat b{font-size:.75rem}
  .skill{gap:.4375rem;padding:.3125rem 0 .125rem;margin-top:.25rem}.skill img{width:2.25rem;height:2.75rem;border-radius:.3125rem}
  .skill .sn{font-size:.75rem}.skill .sn small{font-size:.5625rem}.skill p{font-size:.6875rem;line-height:1.35;margin-top:.125rem}
  .insBtns{margin-top:.375rem}.insBtns button{padding:.375rem}
  /* the item bench is a row of small slots above the trait strip (the camera fit keeps the board below the strip) */
  .itemBench{--slot:2.5rem;flex-wrap:nowrap;justify-content:flex-start;gap:.1875rem;padding:.1875rem .125rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;mask-image:linear-gradient(90deg,#000 calc(100% - 1.5rem),transparent)}   /* under the cards, a strip that scrolls sideways; the fade at its end says there is more */
  .itemBench::-webkit-scrollbar{display:none}
  .itSlot.sel{transform:none}.shopMid{gap:.25rem}
  .itTip,.traitPop{width:min(15.5rem,calc(100vw - 1rem))}.itHint{width:min(17.5rem,calc(100vw - 1rem))}.ihRow p{-webkit-line-clamp:1}
  .shopTop{gap:.375rem;flex-wrap:wrap}
  .odds{gap:0 .25rem;padding:.125rem .3125rem;font-size:.5625rem}.odds i{width:.375rem;height:.375rem}
  .goldBig{padding:.125rem .625rem;font-size:.9375rem}.goldBig b{font-size:1.0625rem}.streak{padding:.25rem .4375rem;font-size:.75rem}
  .fieldN{display:none}
  .shopMain{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"mid mid mid mid" "xpv xp rr eco";gap:.4375rem;padding:.4375rem}
  .sideBtns{display:contents}
  #xpCol{grid-area:xpv;width:2.5rem;gap:.1875rem}.lvl .xpn{font-size:.5625rem}.lvl .lvN{font-size:.625rem}.lvl b{font-size:.75rem}#xpBar{width:.5rem}#btnXp{grid-area:xp}#btnReroll{grid-area:rr}.shopMid{grid-area:mid}
  .sideBtns button{flex-direction:column;gap:0;padding:.375rem .25rem;font-size:.75rem;min-width:0}.sideBtns small{font-size:.625rem}
  .fight{min-width:0;max-width:9.5rem;padding:.3125rem .75rem;font-size:.8125rem}.ecoCol{grid-area:eco;width:auto;gap:.1875rem}.shopLock{width:1.75rem;height:1.25rem;font-size:.75rem}
  .shop{gap:.3125rem}
  .card{height:5.125rem;border-width:.125rem}.shop .card{border-width:.1875rem}
  .card .ctr{display:none}
  .card .cp{width:100%;right:0;-webkit-mask-image:none;mask-image:none}
  .card .cbot{flex-direction:column;align-items:flex-start;gap:0;padding:.1875rem .3125rem}
  .card .cn{font-size:.625rem;max-width:100%}.card .cc{font-size:.625rem}
  .card .own{font-size:.5625rem;padding:0 .25rem;top:.1875rem;right:.1875rem}
  .card .cstar{font-size:.5625rem;padding:0 .25rem;top:.1875rem;left:.1875rem;right:auto}.card.star2 .own{top:.1875rem}
  .augRow{padding:.125rem .25rem;gap:.1875rem}.augIc{width:1.4375rem;height:1.25rem;font-size:.6875rem}
  /* the picker's cards stack, each a row: hex, then tier, name and text */
  .augOv{padding:.75rem}
  .augBox{width:100%;gap:.75rem}.augBox h2{font-size:1.3125rem}.augBox>p{margin-top:-.375rem;font-size:.8125rem}
  .augCards{flex-direction:column;width:100%;max-width:24rem;gap:.625rem}
  .augCard{width:auto;min-height:0;display:grid;grid-template-columns:3.75rem 1fr;grid-template-areas:"hex tier" "hex name" "hex desc";column-gap:.75rem;row-gap:.125rem;align-items:center;justify-items:start;padding:.75rem .875rem;text-align:left}
  .augCard kbd{display:none}
  .augHex{grid-area:hex;width:3.75rem;height:3.25rem;margin:0;font-size:1.5rem}
  .augCard small{grid-area:tier}.augCard b{grid-area:name;font-size:.9375rem}.augCard p{grid-area:desc;margin:0;font-size:.75rem;line-height:1.4}
  .augPill{top:auto;bottom:calc(var(--shopH) + .5rem)}
  /* a toast: small, two lines at most, just above the shop, so it never sits over the bench for long */
  .toast{bottom:calc(var(--shopH) + .3125rem);font-size:.6875rem;line-height:1.3;padding:.25rem .625rem;max-width:calc(100% - 1.25rem);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  #app.augMin .toast{bottom:calc(var(--shopH) + 3.25rem)}
  .logPanel{left:.625rem;right:.625rem;width:auto}
  .splashFace{display:none}   /* the special-move banner: half its height on a phone, the art and title with it */
  .splash{top:calc(var(--topH) + 1.5rem);width:min(70%,22rem);height:clamp(2.75rem,8vh,3.75rem)}.splash .big{height:118%;margin-left:.625rem;border-radius:.4375rem}
  .splashTxt{margin-left:.5rem}.splashTxt span{font-size:.5625rem;letter-spacing:.15rem}.splashTxt b{font-size:.9375rem}
}
/* a phone turned sideways (short and wide): the HUD at 12px to the rem and no minimum height, so the whole shop stays on
   screen; the players as tiles only (the names hide), two to a row down the right edge, all eight in view */
@media (max-height:520px) and (min-width:761px){
  html{font-size:12px}
  #app{min-height:0;--plW:5.5rem}
  .players{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start;gap:.25rem}
  .pl .pn,.pl .ptop small{display:none}
  .pl{max-width:none;align-self:auto}
  .plTabs{flex-basis:100%;gap:.125rem}.plTab{font-size:.5625rem;padding:.0625rem .25rem}
  .players.dmgTab{flex-direction:column;flex-wrap:nowrap;width:12rem}   /* the damage meter needs its width back while it shows */
}
@media (max-height:620px) and (min-width:761px){.card{height:5.25rem}.augCard{min-height:0;padding-top:1.25rem}.augHex{width:4rem;height:3.5rem;font-size:1.75rem}}
@media (prefers-reduced-motion:reduce){.tourStart.nudge{animation:none;box-shadow:0 0 0 .1875rem var(--ki)}.count.go{animation:countFade .9s both}.pop{animation-duration:.01s}.coachSign{animation:none;opacity:.9}.splash{animation-duration:.6s}.itSlot.can{animation:none;box-shadow:0 0 0 .1875rem var(--ki)}
  .augOv,.augCard{animation:none}.augPill{animation:none;box-shadow:0 0 0 .1875rem color-mix(in srgb,var(--c) 45%,transparent)}}
/* ki bar: every fighter's ultimate meter; it glows when full and while Goku charges his beam */
.ub .kr{display:flex;align-items:center;gap:.125rem;margin-top:1px}
.ub .kr[hidden]{display:none}
.ub .kr span{font:.5625rem/1 var(--disp);color:#9fdcff;text-shadow:0 1px .125rem #000,0 0 .1875rem #1a6aff;letter-spacing:.5px}
.ub .kr .b{flex:1;margin-top:0;height:.375rem}
.ub .mn{background:rgba(8,24,60,.9);border-color:rgba(122,208,255,.45)}
.ub .mn i{background:linear-gradient(90deg,#2a6aff,#7ad0ff 65%,#e8fbff)}
.ub .mn.full{border-color:#9fdcff;box-shadow:0 0 .375rem #7ad0ff}
.ub .mn.full i{animation:kiPulse .3s ease-in-out infinite alternate}
@keyframes kiPulse{from{filter:brightness(1)}to{filter:brightness(1.7)}}
.tag.gold{color:#241a00;background:linear-gradient(90deg,#ffd84a,#ffb42a);border-color:#ffd84a}

/* gold: a drawn coin (Windows 10 has no coin emoji) */
.coin{display:inline-block;width:.82em;height:.82em;border-radius:50%;vertical-align:-.08em;margin:0 .05em;background:radial-gradient(circle at 35% 30%,#fff7c8 0,#ffd84a 38%,#d49a1c 72%,#8a5a10 100%);box-shadow:inset 0 0 0 .07em rgba(120,78,10,.9),0 0 .15em rgba(255,201,74,.35)}

/* trait icons before each trait name: the drawn icon (art.js traitArt), else the emoji (ui.js TRAIT_ICON) */
.trIc{font-style:normal;display:inline-block;width:1.35em;text-align:center;margin-right:.2em;line-height:1}
.trIc img{display:inline-block;width:1.35em;height:1.35em;vertical-align:-.3em;pointer-events:none;-webkit-user-drag:none;filter:drop-shadow(0 1px .0625rem rgba(0,0,0,.6))}
/* the shop bar's tooltips: tier dots in the odds tip; icons on Buy XP and Reroll */
.oddsDot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--c);margin-right:.375rem;vertical-align:.0625rem}
#odds,.lvl,.goldBig,#streakBox{cursor:help}
.bIc{font-style:normal;margin-right:.25rem;font-size:.9em}

/* ---------- a mission (src/ui/beat.js, src/graphics/mission.js) ----------
   While one is on, #app has the class `mission`: the shop's rows, the traits, the players, the inspect card, the clock
   and the fighters' bars step aside; the boss's bar takes the clock row and the lanes the shop bar's place. The camera
   fit (src/graphics/scene.js) reads the same boxes, so the board sits between the two. */
#app.mission .shopbar>:not(.beat),#app.mission .traits,#app.mission .players,#app.mission .inspect,#app.mission #btnFight,#app.mission #turnBanner,#app.mission .augPill,#app.mission .scout,#app.mission .ub{display:none!important}
#app.mission .shopbar{width:auto;max-width:calc(100% - 1.5rem)}
#app.deckOn .shopbar{display:none}   /* the warm-up on the Grand Line deck: the shop, the item bench and the fielded count step aside (deck.js; back with planning; the camera fit uses the room, scene.js) */
#app.mission .toast{visibility:hidden}   /* the mission says what happens itself (the log keeps the lines) */
.bossBar{display:flex;align-items:center;gap:.625rem;padding:.3125rem .75rem .3125rem .3125rem;border-color:#7a3fc0;width:min(26rem,calc(100vw - 1.5rem))}
.bossBar .av{width:2.5rem;height:2.5rem;border-radius:.5rem;overflow:hidden;border:1px solid #b060ff;flex:none;background:#10152a}
.bossBar .av img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block}
.bossBar .who{display:flex;flex-direction:column;line-height:1.1;flex:none;max-width:45%}
.bossBar .who small{font-size:.5625rem;letter-spacing:.06rem;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bossBar .who b{font-family:var(--disp);font-weight:400;font-size:1.0625rem;color:#d9b6ff}
.bossHp{flex:1;min-width:4rem;height:.75rem;border-radius:.375rem;background:#0a0d18;border:1px solid var(--line);overflow:hidden}
.bossHp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7a3fc0,#c06bff);transition:width .12s}
.bossBar .clock{font-family:var(--disp);font-size:.9375rem;min-width:2.25rem;text-align:right;font-variant-numeric:tabular-nums}
/* the lanes, in the shop bar's place: your health and Ki at their left, the combo at their right, the pads under them on a touch screen */
.beat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"side mid right" "pads pads pads";gap:.5rem;width:min(31rem,calc(100vw - 1.5rem));margin:0 auto;transition:opacity .3s}
.beat.dim{opacity:0;pointer-events:none}
.beatSide{grid-area:side;display:flex;gap:.375rem;align-items:stretch}
.beatSide.right{grid-area:right;align-items:center;justify-content:center;min-width:4.5rem}
.beatGauge{position:relative;width:1.625rem;min-height:4.25rem;border-radius:.5rem;background:#0a0d18;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:.125rem}
.beatGauge i{position:absolute;left:0;right:0;bottom:0;height:100%;background:linear-gradient(180deg,#7dffa8,#1f8a52);transition:height .15s}
.beatGauge b,.beatGauge small{position:relative;font-family:var(--disp);font-weight:400;font-size:.625rem;line-height:1.2;text-shadow:0 1px .125rem #000,0 0 .125rem #000}
/* the strikes landed (pips) over the momentum bar; the judgement and a passing line over them */
.beatMid{grid-area:mid;position:relative;display:flex;flex-direction:column;justify-content:center;gap:.5rem;padding:.5rem .75rem;border-radius:.75rem;border:1px solid var(--line);background:rgba(8,11,24,.86);transition:box-shadow .2s,border-color .2s}
#app.rage .beatMid{border-color:#fff0b8;box-shadow:0 0 1.25rem rgba(255,240,184,.8)}
.beatPips{display:flex;justify-content:center;gap:.5rem}
.beatPips i{width:1.125rem;height:1.125rem;border-radius:50%;border:.125rem solid #5a6aa0;background:#10152a;transition:background .2s,box-shadow .2s}
.beatPips i.on{background:var(--gold);border-color:#fff3c0;box-shadow:0 0 .625rem rgba(255,201,74,.9)}
.beatMom{position:relative;height:1rem;border-radius:.5rem;background:#0a0d18;border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.beatMom i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#c9861a,#ffe27a);transition:width .25s}
.beatMom small{position:relative;font-family:var(--disp);font-size:.5625rem;letter-spacing:.1em;text-shadow:0 1px .125rem #000}
.beatMom.full{border-color:var(--gold);box-shadow:0 0 .75rem rgba(255,201,74,.9)}
.beatNote{position:absolute;left:0;right:0;top:-1.75rem;text-align:center;font-family:var(--disp);font-size:.9375rem;color:#ffe27a;text-shadow:0 .0625rem .25rem #000;pointer-events:none}
.beatJudge{position:absolute;left:0;right:0;top:40%;text-align:center;font-family:var(--disp);font-size:1.5rem;pointer-events:none;opacity:0;text-shadow:0 .125rem .25rem #000}
.beatJudge.show{animation:beatJudge .45s ease-out both}
.beatJudge.perfect{color:#ffe27a}.beatJudge.good,.beatJudge.great{color:#9fdcff}.beatJudge.miss{color:#ff6a5a}
@keyframes beatJudge{0%{opacity:0;transform:scale(.7)}18%{opacity:1;transform:scale(1.12)}100%{opacity:0;transform:translateY(-.75rem)}}
.beatPhase{font-family:var(--disp);font-weight:400;font-size:1.25rem;color:#cfe0ff;text-shadow:0 .125rem .25rem #000}
.beatPads{grid-area:pads;display:none;grid-template-columns:repeat(4,1fr);gap:.5rem}
.pad{font-family:var(--body);font-weight:700;font-size:1.75rem;height:4.25rem;padding:0;border-radius:.875rem;touch-action:none;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.pad small{font-size:.875rem;color:var(--dim)}
.pad.on{background:#2b6cff;border-color:#9fdcff}
.beatPads.mash .pad[data-key="0"],.beatPads.mash .pad[data-key="2"]{display:none}   /* the finale: only ← and → */
.beatPads.mash{grid-template-columns:1fr 1fr}.beatPads.mash .pad{height:5.5rem;font-size:2.25rem}
/* a strike's key over the board's middle, and its ring closing on it (ui/beat.js sets --s, the ring's size: 1 is the key's circle) */
.qte{position:absolute;left:50%;top:44%;z-index:6;width:clamp(5.5rem,16vmin,9rem);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;--s:2.7}
.qteKey{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;font-family:var(--disp);font-weight:400;font-size:clamp(2.75rem,8vmin,4.5rem);color:#fff;background:radial-gradient(circle,rgba(30,40,80,.92),rgba(10,14,30,.92));border:.25rem solid #9fb4d8;box-shadow:0 0 1.5rem rgba(0,0,0,.6);text-shadow:0 .125rem .25rem #000}
.qteArrow{position:absolute;left:0;right:0;bottom:-1.75rem;text-align:center;font-size:1.25rem;color:#cfe0ff;text-shadow:0 1px .25rem #000}
.qteRing{position:absolute;inset:0;border-radius:50%;border:.3125rem solid rgba(255,255,255,.85);transform:scale(var(--s));box-shadow:0 0 .75rem rgba(255,255,255,.4)}
.qte.open .qteRing{border-color:var(--gold);box-shadow:0 0 1.25rem rgba(255,201,74,.9)}.qte.open .qteKey{border-color:var(--gold)}
.qte.sweet .qteRing{border-color:#fff6c8;box-shadow:0 0 1.75rem #fff6c8}
.qte.hit .qteKey{animation:qteHit .45s ease-out both;border-color:var(--gold)}.qte.hit .qteRing,.qte.miss .qteRing{display:none}
.qte.miss .qteKey{animation:qteMiss .45s ease-out both;border-color:var(--foe);color:var(--foe)}
@keyframes qteHit{0%{transform:scale(1)}30%{transform:scale(1.25);box-shadow:0 0 2.5rem rgba(255,201,74,1)}100%{transform:scale(1.4);opacity:0}}
@keyframes qteMiss{0%,100%{transform:translateX(0)}20%{transform:translateX(-.5rem)}40%{transform:translateX(.5rem)}60%{transform:translateX(-.3rem)}100%{opacity:0}}
/* the finale's tug of war: your beam's share of the bar (gold) against his (violet), where they meet, the keys in turn */
.tug{position:absolute;left:50%;top:27%;z-index:6;transform:translate(-50%,-50%);width:min(30rem,calc(100% - 2rem));display:flex;flex-direction:column;gap:.375rem;padding:.625rem .875rem;border-color:var(--gold);pointer-events:none}
.tugNames{display:flex;justify-content:space-between;font-family:var(--disp);font-size:.8125rem}.tugNames b:first-child{color:var(--gold)}.tugNames b:last-child{color:#d9b6ff}
.tugBar{position:relative;height:1.375rem;border-radius:.6875rem;background:linear-gradient(90deg,#3a1a5c,#7a3fc0);border:1px solid #fff;overflow:visible}
.tugBar i{position:absolute;left:0;top:0;bottom:0;width:50%;border-radius:.6875rem 0 0 .6875rem;background:linear-gradient(90deg,#c9861a,#ffe27a);transition:width .08s linear}
.tugBar b{position:absolute;top:50%;left:50%;width:1.75rem;height:1.75rem;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff,#fff6c8 45%,rgba(255,246,200,0) 70%);transition:left .08s linear}
.tug.impact .tugBar b{border-radius:0;clip-path:polygon(50% 0,60% 28%,85% 8%,73% 39%,100% 50%,73% 61%,85% 92%,60% 72%,50% 100%,40% 72%,15% 92%,27% 61%,0 50%,27% 39%,15% 8%,40% 28%);background:radial-gradient(circle,#fff 18%,#ffd46d 60%,#e85c2e)}
.tugKeys{display:flex;align-items:center;justify-content:center;gap:1rem;font-family:var(--disp);font-size:1.75rem;color:#fff;text-shadow:0 .125rem .25rem #000}
.tugKeys kbd{font-family:var(--disp);font-size:1.125rem;padding:.25rem .625rem;border-radius:.5rem;border:.125rem solid #5a6aa0;background:#10152a;color:#cfe0ff;opacity:.5}
.tugKeys kbd.now{opacity:1;border-color:var(--gold);color:var(--gold);box-shadow:0 0 .75rem rgba(255,201,74,.9)}
.tug small{text-align:center;color:var(--dim);font-size:.75rem}
/* the item crafting minigame (ui/craft.js): a small card over the board with four lanes of falling arrows */
.craftOv{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:8;width:min(22rem,calc(100% - 2rem))}
.craftBox{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border-color:var(--gold);box-shadow:0 0 1.5rem rgba(255,201,74,.35)}
.craftHead{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.craftHead>b{font-family:var(--disp);font-weight:400;font-size:.75rem;letter-spacing:.1em;color:var(--gold)}
.craftWhat{display:flex;align-items:center;gap:.375rem;font-size:.8125rem;min-width:0}.craftWhat .itIc,.craftWhat img{width:1.75rem;height:1.75rem}
.craftLanes{position:relative;height:13rem;border-radius:.625rem;overflow:hidden;border:1px solid var(--line);background:rgba(20,14,6,.9)}
.craftLanes canvas{width:100%;height:100%;display:block}
.craftPads{display:none;grid-template-columns:repeat(4,1fr);gap:.375rem}.craftPads .pad{height:3.25rem;font-size:1.5rem}
.craftFoot{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.craftFoot small{font-size:.75rem;color:var(--dim)}.craftFoot small img,.craftFoot small .itIc{width:1.25rem;height:1.25rem;vertical-align:middle}
.craftFoot button{padding:.25rem .75rem;font-size:.75rem}
.craftOv.done .craftFoot small{color:var(--gold);font-weight:700}.craftOv.done .craftLanes{opacity:.6}
/* the big words over the board: the count-in, CLASH!, K.O. */
.beatBig{position:absolute;left:0;right:0;top:32%;text-align:center;z-index:6;pointer-events:none;font-family:var(--disp);font-size:clamp(2.5rem,9vmin,6rem);line-height:1;color:#fff;-webkit-text-stroke:.05em #0b0e1a;paint-order:stroke fill;text-shadow:0 .08em .2em rgba(0,0,0,.6);opacity:0}
.beatBig.show{animation:beatBig var(--ms,900ms) ease-out both}
.beatBig.go,.beatBig.ko{color:var(--gold)}.beatBig.ko{font-size:clamp(3.5rem,14vmin,9rem)}.beatBig.flee{color:var(--foe)}.beatBig.num{font-size:clamp(4rem,16vmin,10rem)}
.beatBig.pick{white-space:pre-line;font-size:clamp(2rem,7vmin,4.5rem);color:var(--gold);line-height:1.1}   /* a warm-up: YOUR PICK IS UP, and your name under it (ui.js renderTurn) */
@keyframes beatBig{0%{opacity:0;transform:scale(1.6)}15%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
.beatSkip{position:absolute;right:.75rem;bottom:calc(var(--shopH) + .75rem);z-index:6;padding:.375rem .75rem;font-size:.75rem;background:var(--glass)}
.beatCard{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--shopH) + .75rem);z-index:6;display:flex;flex-direction:column;align-items:center;gap:.125rem;padding:.5rem 1rem;width:max-content;max-width:min(30rem,calc(100% - 1.5rem));text-align:center;border-color:var(--gold);pointer-events:none}
.beatCard b{font-family:var(--disp);font-weight:400;font-size:.625rem;color:var(--gold);letter-spacing:.08rem}
.beatCard span{font-size:1.0625rem;font-weight:600}
.beatCard small{font-size:.75rem;color:var(--dim)}
.beatAsk{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:8;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem 1.25rem;width:max-content;max-width:min(24rem,calc(100% - 2rem));text-align:center}
.beatAsk b{font-family:var(--disp);font-weight:400;font-size:1.125rem}.beatAsk span{font-size:.875rem;color:var(--dim)}.beatAsk div{display:flex;gap:.5rem}
/* the Captain Clash's practice card (ui/duel.js): a small card under the duel bar, as the mission's tutorial card, clear of the two Captains (the step, its line, its key, Skip, FIGHT! at the end); and the waiting line over the count-in's place */
.duelTut{position:absolute;left:50%;top:calc(7.5rem + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:8;display:flex;flex-direction:column;align-items:center;gap:.125rem;padding:.5rem 1rem .375rem;width:max-content;max-width:min(30rem,calc(100% - 1.5rem));text-align:center;border-color:var(--gold)}
.duelTut b{display:flex;gap:.5rem;font-family:var(--disp);font-weight:400;font-size:.625rem;color:var(--gold);letter-spacing:.08rem}.duelTut .dTutCap{font-style:normal;color:var(--dim)}
.duelTut .dTutSay{font-size:1.0625rem;font-weight:600;line-height:1.3}
.duelTut small{font-size:.75rem;color:var(--dim)}.duelTut small:empty{display:none}
.duelTut div{display:flex;gap:.75rem;align-items:center;justify-content:center;margin-top:.25rem}
.duelTut button.primary{padding:.375rem 1.25rem}.duelTut button.quiet{background:none;border:none;color:var(--dim);font-size:.75rem;text-decoration:underline;cursor:pointer;padding:.25rem .5rem}
.dClock.prac{font-size:.875rem;letter-spacing:.08rem;color:var(--gold)}   /* PRACTICE in the clock's place while the practice is on */
.dWait{position:absolute;left:50%;top:30%;transform:translateX(-50%);z-index:6;font-family:var(--disp);font-size:1rem;color:var(--gold);text-shadow:0 .08em .2em rgba(0,0,0,.6);pointer-events:none;text-align:center;max-width:calc(100% - 2rem)}
/* a red arrow you missed: the edges of the view flash red */
#app.hurt::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 6rem 1.5rem rgba(255,60,40,.6);animation:beatHurt .35s ease-out both}
@keyframes beatHurt{from{opacity:1}to{opacity:0}}
/* speech bubbles over the figures (mission.js misSay): white, a dark outline, a tail down to the speaker; a shout's letters shake */
.bub{position:absolute;transform:translate(-50%,-100%);width:max-content;max-width:min(18rem,70vw);padding:.375rem .75rem;border-radius:1rem;background:#fff;color:#141a2e;border:.1875rem solid #141a2e;font-family:var(--disp);font-size:.9375rem;line-height:1.2;text-align:center;pointer-events:none;z-index:6;animation:bubIn .22s cubic-bezier(.2,1.5,.4,1) both;box-shadow:0 .25rem .5rem rgba(0,0,0,.35)}
.bub::after{content:"";position:absolute;left:50%;bottom:-.75rem;margin-left:-.4375rem;border:.4375rem solid transparent;border-top:.625rem solid #141a2e;border-bottom:0}
.bub.foe{border-color:#7a3fc0;color:#3a1466}.bub.foe::after{border-top-color:#7a3fc0}
.bub.shout{font-size:1.625rem;padding:.4375rem 1rem;border-radius:1.375rem;white-space:nowrap;max-width:none}
.bub.narr{max-width:min(36rem,86vw);padding:.5rem 1rem;background:rgba(14,10,26,.9);color:#ffe8c0;border-color:#ffd27a;font-family:var(--body);font-style:italic;font-size:1rem;line-height:1.3;transform:translate(-50%,-100%)}.bub.narr::after{display:none}   /* the narrator's caption (a mission's scene: src/graphics/mission.js misCaption), at the top of the board */
.bub.shout span{display:inline-block;animation:bubShake .16s infinite alternate}
.bub.shout span:nth-child(2n){animation-delay:.05s}.bub.shout span:nth-child(3n){animation-delay:.1s}
@keyframes bubIn{from{opacity:0;transform:translate(-50%,-80%) scale(.6)}to{opacity:1;transform:translate(-50%,-100%)}}
@keyframes bubShake{from{transform:translate(0,0) rotate(-3deg)}to{transform:translate(1px,-2px) rotate(3deg)}}
/* the result: the medal, how you played, the loot; the bar along the bottom is the time left before the next round */
.mEnd{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;background:rgba(6,10,24,.55);animation:finalIn .3s both}
.mEndBox{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem 1.75rem 1.5rem;max-width:min(28rem,calc(100% - 2rem));text-align:center;overflow:hidden}
.mMedal{width:6rem;height:6rem;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--disp);color:#141a2e;border:.375rem solid rgba(255,255,255,.55);box-shadow:0 .375rem 1rem rgba(0,0,0,.5),inset 0 -.5rem 1rem rgba(0,0,0,.25);animation:medalIn .6s cubic-bezier(.2,1.5,.4,1) both}
.mMedal i{font-style:normal;font-size:2rem;line-height:1}.mMedal b{font-weight:400;font-size:.75rem;letter-spacing:.08rem}
.mMedal.gold{background:radial-gradient(circle at 35% 30%,#fff3b0,#ffc94a 55%,#b9820e)}
.mMedal.silver{background:radial-gradient(circle at 35% 30%,#ffffff,#c9d2e6 55%,#7c879f)}
.mMedal.bronze{background:radial-gradient(circle at 35% 30%,#ffd9b0,#d08a4a 55%,#8a4f1e)}
@keyframes medalIn{from{opacity:0;transform:scale(.3) rotate(-25deg)}to{opacity:1;transform:none}}
.mEndBox h2{margin:.25rem 0 0;font-family:var(--disp);font-weight:400;font-size:1.5rem}
.mEndBox p{margin:0;font-size:.875rem;color:var(--dim)}
.mLoot{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:.25rem 0}
.mItem{display:flex;align-items:center;gap:.375rem;padding:.3125rem .625rem;border-radius:.625rem;background:var(--panel2);border:1px solid var(--line);font-size:1.125rem}
.mItem .itImg{width:2rem;height:2rem;object-fit:contain}.mItem b{font-weight:600;font-size:.9375rem}
.mBar{position:absolute;left:0;bottom:0;height:.1875rem;width:100%;background:var(--gold);transform-origin:left;animation:mBar linear both}
@keyframes mBar{from{transform:none}to{transform:scaleX(0)}}
@media (max-width:760px){
  .bossBar{width:auto;flex:1;min-width:0}.bossBar .av{width:2rem;height:2rem}.bossBar .who b{font-size:.9375rem}
  .beat{width:calc(100vw - 1rem);gap:.375rem}
  .beatSide.right{min-width:3.25rem}.beatPhase{font-size:.9375rem}
  .pad{height:3.75rem}
  .bub{font-size:.8125rem}.bub.shout{font-size:1.25rem}
  .beatSkip{right:.5rem;bottom:calc(var(--shopH) + .5rem)}
  .beatCard span{font-size:.9375rem}
}
/* a phone turned sideways: the HUD low and wide between the pads, two for each thumb */
@media (max-height:520px) and (min-width:761px) and (pointer:coarse){
  .beat{width:min(50rem,calc(100vw - 1rem))}
  .craftLanes{height:9rem}
}
@media (max-height:520px) and (min-width:761px){.beatSide.right{min-width:3rem}}
@media (prefers-reduced-motion:reduce){.bub.shout span{animation:none}.beatBig.show{animation:countFade var(--ms,900ms) both}.mMedal{animation:none}}
/* ---------- the Captain Clash (src/ui/duel.js, src/graphics/duel.js) ----------
   While one is on, #app has the class `duel`: as a mission's, the shop's rows, the traits, the players, the inspect card,
   the clock and the fighters' bars step aside. The duel's bars take the clock row (#duelBar), its controls the shop
   bar's place (#duelCtl), so the camera fit frames the two Captains between them. */
#app.duel .shopbar>:not(.duelCtl),#app.duel .traits,#app.duel .players,#app.duel .inspect,#app.duel #btnFight,#app.duel #turnBanner,#app.duel .augPill,#app.duel .scout,#app.duel .ub{display:none!important}
#app.duel .shopbar{width:auto;max-width:calc(100% - 1.5rem)}
#app.duel .toast{visibility:hidden}
.duelBar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.625rem;padding:.375rem .5rem;width:min(46rem,calc(100vw - 1.5rem))}
.dSide{display:flex;align-items:center;gap:.5rem;min-width:0}
.dSide.foe{flex-direction:row-reverse;text-align:right}
.dSide .av{width:2.75rem;height:2.75rem;border-radius:.625rem;overflow:hidden;flex:none;border:.125rem solid var(--gold);background:#10152a}
.dSide.foe .av{border-color:var(--foe)}
.dSide .av img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block}
.dInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1875rem}
.dNm{display:flex;align-items:baseline;gap:.375rem;white-space:nowrap;overflow:hidden}
.dSide.foe .dNm{flex-direction:row-reverse}
.dNm b{font-family:var(--disp);font-weight:400;font-size:.9375rem;color:var(--gold)}.dSide.foe .dNm b{color:#ffb3a8}
.dNm small{font-size:.625rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.dHp{position:relative;height:.8125rem;border-radius:.375rem;background:#0a0d18;border:1px solid var(--line);overflow:hidden}
.dHp i{position:absolute;top:0;bottom:0;left:0;width:100%;background:linear-gradient(90deg,#1f8a52,#7dffa8);transition:width .1s}
.dHp i.lag{background:#ff6a5a;opacity:.75;transition:none}
.dSide.foe .dHp i{left:auto;right:0;background:linear-gradient(270deg,#1f8a52,#7dffa8)}.dSide.foe .dHp i.lag{background:#ff6a5a}
.dHp.low i:not(.lag){background:linear-gradient(90deg,#b8301f,#ff8a5a);animation:dLow .5s ease-in-out infinite alternate}
@keyframes dLow{from{filter:none}to{filter:brightness(1.4)}}
.dHp em{position:absolute;inset:0;font-style:normal;font-family:var(--disp);font-size:.625rem;line-height:.8125rem;text-align:center;text-shadow:0 1px .125rem #000,0 0 .125rem #000}
.dKi{position:relative;height:.5rem;border-radius:.25rem;background:#0a0d18;border:1px solid var(--line);overflow:hidden}
.dKi i{position:absolute;top:0;bottom:0;left:0;width:0;background:linear-gradient(90deg,#c9861a,#ffe27a);transition:width .12s}
.dSide.foe .dKi i{left:auto;right:0;background:linear-gradient(270deg,#c9861a,#ffe27a)}
.dKi u{position:absolute;top:0;bottom:0;left:var(--at);width:1px;background:rgba(255,255,255,.35)}.dSide.foe .dKi u{left:auto;right:var(--at)}
.dKi.sig{border-color:#ffd24a;box-shadow:0 0 .375rem rgba(255,210,74,.6)}
.dKi.ult{border-color:#fff;box-shadow:0 0 .75rem rgba(255,240,180,.95);animation:dUlt .4s ease-in-out infinite alternate}
.dKi.ult i{background:linear-gradient(90deg,#ffe27a,#ffffff)}
.dKi.used{opacity:.75}
@keyframes dUlt{from{filter:none}to{filter:brightness(1.35)}}
.dMid{display:flex;flex-direction:column;align-items:center;gap:.1875rem;min-width:7rem}
.dClock{font-family:var(--disp);font-weight:400;font-size:1.625rem;line-height:1;font-variant-numeric:tabular-nums}
.dClock.soon{color:var(--foe);animation:dLow .5s ease-in-out infinite alternate}
.dMom{position:relative;width:7rem;height:.375rem;border-radius:.1875rem;background:linear-gradient(90deg,var(--foe),#3a4570 45%,#3a4570 55%,var(--gold));opacity:.8}
.dMom::before,.dMom::after{content:"";position:absolute;top:-.125rem;bottom:-.125rem;width:1px;background:rgba(255,255,255,.4)}.dMom::before{left:20%}.dMom::after{left:80%}
.dMom i{position:absolute;top:50%;left:50%;width:.6875rem;height:.6875rem;margin:-.34375rem 0 0 -.34375rem;border-radius:50%;background:#fff;box-shadow:0 0 .375rem #fff;transition:left .15s}
.dMom.mine{opacity:1;box-shadow:0 0 .5rem rgba(255,201,74,.85)}.dMom.theirs{opacity:1;box-shadow:0 0 .5rem rgba(255,106,90,.85)}
.dDmg{display:flex;align-items:baseline;gap:.375rem;font-family:var(--disp)}
.dDmg small{font-size:.5rem;letter-spacing:.08rem;color:var(--dim)}
.dDmg b{font-weight:400;font-size:.875rem;min-width:1.5rem;text-align:center;font-variant-numeric:tabular-nums;color:#cfd6f5}.dDmg b.ahead{color:var(--gold)}
/* the controls, in the shop bar's place */
.duelCtl{display:flex;flex-direction:column;align-items:center;gap:.375rem;width:min(34rem,calc(100vw - 1.5rem));margin:0 auto}
.dRule{font-size:.6875rem;color:var(--dim);text-align:center;padding:.1875rem .625rem;background:var(--glass);border:1px solid var(--line);border-radius:.5rem;max-width:100%}
.dRule b{font-family:var(--disp);font-weight:400;color:var(--gold);letter-spacing:.04rem}
.dPads{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;width:100%}
.dPad{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.0625rem;height:4rem;padding:.25rem;border-radius:.875rem;background:var(--glass);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:opacity .1s}
.dPad b{font-size:1.5rem;line-height:1}.dPad small{font-family:var(--disp);font-weight:400;font-size:.5625rem;letter-spacing:.06rem;color:#cfd6f5;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dPad.on{background:#2b6cff;border-color:#9fdcff}
.dPad.held{background:#1e4f9a;border-color:#9fdcff;box-shadow:0 0 .75rem rgba(159,220,255,.7)}
.dPad.busy{opacity:.55}
.dPad.ki.sig{border-color:#ffd24a;box-shadow:0 0 .625rem rgba(255,210,74,.6)}.dPad.ki.sig small{color:var(--gold)}
.dPad.ki.ult{border-color:#fff;box-shadow:0 0 1rem rgba(255,240,180,.95);animation:dUlt .4s ease-in-out infinite alternate}.dPad.ki.ult small{color:#fff}
@media (pointer:coarse){.dPad{pointer-events:none;height:2.75rem;opacity:.85}.dPad b{font-size:1.125rem}}   /* a touch screen: the buttons are a legend, a swipe on the board plays (src/ui/duel.js duelPointer) */
/* the warnings over the figures: the rival's move as it begins, the next blow of your combo */
.duelTele{position:absolute;inset:0;z-index:5;pointer-events:none}
.dTele{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:.0625rem;font-family:var(--disp);text-shadow:0 .0625rem .1875rem #000,0 0 .125rem #000}
.dTele b{position:relative;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;font-family:var(--body);font-weight:800;font-size:1.75rem;line-height:1;color:#fff}
.dTele .ring{position:absolute;top:0;left:50%;width:2.75rem;height:2.75rem;margin-left:-1.375rem;border-radius:50%;background:conic-gradient(var(--tc,#ff6a5a) calc(var(--q,1)*360deg),rgba(255,255,255,.08) 0);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%)}
.dTele small{font-weight:400;font-size:.75rem;letter-spacing:.06rem;color:var(--tc,#ff6a5a)}
.dTele em{font-style:normal;font-family:var(--body);font-weight:600;font-size:.625rem;color:#e8ecff;white-space:nowrap}
.dTele.heavy{--tc:#ff4a3a}.dTele.heavy b{font-size:2.125rem;animation:dTele .25s ease-in-out infinite alternate}
.dTele.blast{--tc:#ffb43a}.dTele.power{--tc:#7ad0ff}.dTele.quick{--tc:#ffffff}.dTele.quick b{font-size:1.25rem}
.dTele.sig{--tc:#ffd24a}.dTele.sig b{animation:dTele .2s ease-in-out infinite alternate}
.dTele.combo{--tc:var(--gold)}.dTele.combo b{color:var(--gold);font-size:1.5rem}
@keyframes dTele{from{transform:scale(1)}to{transform:scale(1.18)}}
/* a clash's pattern, an Ultimate's arrows */
.duelSeq{position:absolute;left:50%;top:18%;transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.625rem 1rem .75rem;border-color:var(--gold);pointer-events:none;animation:turnIn .3s cubic-bezier(.2,1.3,.4,1) both}
.duelSeq b{font-family:var(--disp);font-weight:400;font-size:1rem;letter-spacing:.06rem;color:var(--gold)}
.duelSeq.ult.defend{border-color:#ff6a5a;box-shadow:0 0 1.5rem rgba(255,106,90,.6)}.duelSeq.ult.defend b{color:#ffb3a8}
.dSeqRow{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap;justify-content:center}
.dSeqRow i{font-style:normal;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:.625rem;border:1px solid var(--line);background:#0a0d18;font-weight:800;font-size:1.625rem;color:#8b94c0}
.dSeqRow i.now{color:#fff;border-color:#fff;background:#2b6cff;box-shadow:0 0 .875rem rgba(159,220,255,.9);animation:dTele .22s ease-in-out infinite alternate}
.dSeqRow i.ok{color:#0b0e1a;background:var(--gold);border-color:#ffe08a}.dSeqRow i.bad{color:#fff;background:#8a2a22;border-color:#ff6a5a}.dSeqRow i.wait{color:#3a4570}
.dSeqRow .opp{display:flex;gap:.25rem;width:100%;justify-content:center}.dSeqRow .opp u{width:.5rem;height:.5rem;border-radius:50%;background:#3a2020;border:1px solid #ff6a5a}.dSeqRow .opp u.ok{background:#ff6a5a}
.duelSeq.ult .opp{display:none}
.duelSeq small{font-size:.6875rem;color:var(--dim)}
.dSeqBar{position:relative;width:100%;height:.3125rem;border-radius:.1875rem;background:#0a0d18;overflow:hidden}
.dSeqBar i{position:absolute;top:0;bottom:0;left:0;background:var(--gold)}
.dSeqBar.push{background:var(--foe)}.dSeqBar.push i{background:var(--gold);border-right:.125rem solid #fff}
.beatBig.small{font-size:clamp(1.75rem,6vmin,3.5rem)}
/* the result */
.dEndBox{min-width:min(22rem,calc(100% - 2rem))}
.dEndRule{font-family:var(--disp);font-size:.625rem;letter-spacing:.1rem;color:var(--dim)}
.dEndBox h2.win{color:var(--gold)}.dEndBox h2.lose{color:var(--foe)}
.dStats{border-collapse:collapse;font-size:.8125rem;margin:.125rem 0}
.dStats td{padding:.125rem .75rem;font-family:var(--disp);font-variant-numeric:tabular-nums;text-align:center;min-width:3.5rem}
.dStats th{padding:.125rem .5rem;font-weight:400;font-size:.6875rem;color:var(--dim);text-align:center}
.dStats tr.who td{font-size:.6875rem;color:var(--gold)}.dStats tr.who td:last-child{color:#ffb3a8}
.dAwards{display:flex;flex-wrap:wrap;gap:.375rem;justify-content:center}
.dAwards .aw{padding:.1875rem .625rem;border-radius:1rem;background:linear-gradient(180deg,#3a3016,#1c160a);border:1px solid var(--gold);font-size:.75rem}
.dAwards .aw b{font-family:var(--disp);font-weight:400;color:var(--gold);letter-spacing:.06rem}
.dAwards .aw.theirs{border-color:#6b3a36;background:#1c1012;color:var(--dim)}.dAwards .aw.theirs b{color:#ffb3a8}
.dLoot p{font-size:.875rem;color:var(--fg)}
.dPick{display:flex;gap:.5rem;justify-content:center;margin-top:.375rem}
.dPickC{position:relative;display:flex;flex-direction:column;align-items:center;gap:.1875rem;width:5.5rem;padding:.5rem .25rem .375rem;border-radius:.75rem;border-color:var(--gold);background:linear-gradient(180deg,#2a2414,#15120a);animation:turnIn .3s cubic-bezier(.2,1.3,.4,1) both}
.dPickC .itImg{width:2.75rem;height:2.75rem;object-fit:contain}.dPickC small{font-size:.6875rem;line-height:1.15}
.dPickC kbd{position:absolute;top:.25rem;left:.375rem;font:600 .5625rem var(--body);color:var(--dim)}
.dPickC:hover{box-shadow:0 0 .75rem rgba(255,201,74,.75)}
.dGot{display:inline-flex;align-items:center;gap:.25rem;vertical-align:middle}.dGot .itImg{width:1.5rem;height:1.5rem;object-fit:contain}
/* a Creep Encounter: the warning card before it, the NPC mark on the squad's bars */
.vs.creep{--cc:#ff5a3a}
.vs.creep .vsMid{gap:.125rem}
.vs.creep .vsWord{color:var(--cc);font-size:1.75rem;letter-spacing:.08rem}
.vs.creep .vsSide.foe .av{border-color:var(--cc);box-shadow:0 0 1.5rem rgba(255,90,58,.7)}
.vs.creep .vsSide.foe b{color:#ffb3a8}
.vs.creep .pve{font-family:var(--disp);font-size:.625rem;letter-spacing:.12rem;color:#0b0e1a;background:var(--cc);border-radius:.25rem;padding:.0625rem .375rem}
#app.hostile::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 8rem 2rem rgba(140,20,10,.55);animation:beatHurt 1.6s ease-out both}
.ub.npc .nm::before{content:"◆ ";color:#ff5a3a}
.ub.npc{filter:drop-shadow(0 0 .25rem rgba(255,90,58,.6))}
@media (max-width:760px){
  .duelBar{width:calc(100vw - 1rem);gap:.375rem;padding:.25rem .375rem}.dSide .av{width:2rem;height:2rem}.dNm small{display:none}.dMid{min-width:4.5rem}.dMom{width:4.5rem}.dClock{font-size:1.25rem}.dClock.prac{font-size:.6875rem}
  .duelTut .dTutSay{font-size:.9375rem}
  .duelCtl{width:calc(100vw - 1rem)}.dRule{font-size:.625rem}
  .duelSeq{top:24%}.dSeqRow i{width:2.25rem;height:2.25rem;font-size:1.25rem}
  .dStats td{padding:.125rem .375rem}
}
@media (prefers-reduced-motion:reduce){.dTele.heavy b,.dTele.sig b,.dKi.ult,.dPad.ki.ult,.dSeqRow i.now{animation:none}}

/* ---------- presentation modes (src/graphics/presentation.js): #app.mode-plan, .mode-combat, .mode-pick ----------
   Strategy while planning, spectacle while fighting: a fight folds the Trait Stack to its chips, the Rival Ladder to
   small tiles (your rival and you kept big), the match badge into the round tracker as one compact strip, and quiets
   the shop; planning has it all back. Phones keep their own layout (the block above). */
.traits,.players{transition:width .4s ease}
#traitRow{transition:width .4s ease,opacity .14s ease}#traitRow.cineDim{opacity:.48}   /* the Trait Stack recedes under a move's cut-in and comes back as it goes (cinema.js cineTraitDim); its chips still answer the pointer */
.trait .tic{position:relative;display:flex;flex-direction:column;align-items:center;gap:.1875rem;flex:none;width:1.5rem}
.trait .tic .trIc{margin:0;width:1.25rem;line-height:1}.trait .tic .trIc img{width:1.25rem;height:1.25rem;vertical-align:top}
.trait .tdots{display:flex;gap:.1875rem}.trait .tdots i{width:.3125rem;height:.3125rem;border-radius:50%;background:#1d2545;border:1px solid #3a4a7a}
.trait .tdots i.lit{background:var(--gold);border-color:#ffe08a;box-shadow:0 0 .25rem rgba(255,201,74,.7)}
.trait:not(.on){opacity:.9}.trait:not(.on):hover,.trait.open{opacity:1}   /* a trait short of its first breakpoint is quieter, its icon and name still plain to read (.68 over a dim number until 2026-10-05: the owner found it too faint); the tier colours stay the active ones' */
.trait:not(.on) .num{background:#2c3659;color:#c2c9e6}.trait:not(.on) .tn{color:#c9cfe9}.trait:not(.on) .trIc{filter:saturate(.7) brightness(.95)}
.pl .ptop .rk{font-size:.5625rem;color:var(--dim);margin-right:.1875rem;letter-spacing:.02em}   /* the seat's place in the ladder (ui.js renderPlayers) */
@media (min-width:761px){
  #app.mode-combat .trait .tn{max-width:0;opacity:0;margin-left:-.375rem}
  #app.mode-combat .trait{padding-right:.3125rem}
  .pl .prow{transition:height .4s ease}
  #app.mode-combat .shopMain{opacity:.8;filter:saturate(.88);transition:opacity .4s,filter .4s}#app.mode-combat .shopbar:hover .shopMain{opacity:1;filter:none}   /* the shop a step quieter through a fight (.86 until 2026-10-06; the owner's brief: about 80%), back to full under the pointer and with planning */
  #app.mode-combat .trait{opacity:.82;transition:opacity .4s}#app.mode-combat .trait.on{opacity:.93}#app.mode-combat .trait:hover,#app.mode-combat .trait.open{opacity:1}   /* the folded chips too: an active one a tenth clearer than one short of its breakpoint (2026-10-06, the owner's brief; .85 both before) */
  #app.mode-combat .trait.on .trIc{filter:contrast(1.08) saturate(1.05)}
  #app.mode-combat .fieldN{opacity:.6}
}
.pl .vsn{display:none;position:absolute;left:0;right:0;top:0;z-index:1;padding:.0625rem .1875rem .125rem;background:linear-gradient(180deg,rgba(64,10,10,.94),rgba(64,10,10,.6));color:#ffe2da;font-family:var(--disp);font-size:.5625rem;line-height:1.15;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px .125rem #000}   /* your rival's nameplate, across its portrait's top (the desktop ladder) */
.pl .you{display:none;position:absolute;left:.125rem;bottom:.125rem;z-index:1;padding:0 .25rem;height:.875rem;border-radius:.25rem;background:var(--gold);color:#241a00;font-family:var(--disp);font-size:.5rem;line-height:.875rem;letter-spacing:.06em;box-shadow:0 .0625rem .25rem rgba(0,0,0,.7)}   /* your tile's mark (the desktop ladder) */
/* the Rival Ladder on a desktop (a phone's strip and a phone turned sideways have their own, above): compact tiles, each
   its portrait, health and place in the ladder; your rival's tile a size up, ringed in red and glowing, its name on a
   plate across its portrait's top with the match's ⚔; yours half a size up with YOU on it; any other name floats at its
   tile's left on hover (and whose pick it is at the draft, the seat on show). The column is only as wide as its biggest
   tile (--plW 5.75rem; 9.5rem with the names until 2026-10-05, the owner's brief), and a fight narrows it again with your
   rival's tile still the big one (the round tracker names the rival then). */
@media (min-width:761px) and (min-height:521px){
  #app{--plW:5.75rem}
  #app.mode-combat{--plW:4.75rem}
  .players:not(.dmgTab){overflow-x:visible;overflow-y:clip}   /* (the names float out of the column's left side; it is still cut at its foot) */
  .players{--tileN:min(calc(var(--tile) - .1875rem),3.25rem)}   /* a rival's portrait: the eight rows' share (style.css .players --tile), less the room the two bigger tiles take, and 3.25rem at most (4.25rem before) */
  .pl{--tile:var(--tileN)}
  .pl.opp{--tile:calc(var(--tileN) + 1rem)}
  .pl.me{--tile:calc(var(--tileN) + .5rem)}
  #app.mode-combat .players{--tileN:min(calc(var(--tile) - .1875rem),2.25rem)}
  #app.mode-combat .pl.opp{--tile:calc(var(--tileN) + 1.25rem)}
  #app.mode-combat .pl:not(.opp):not(.me){opacity:.72}
  #app.mode-combat .pl:not(.opp):not(.me) .ptop small{display:none}   /* (a small tile's banner: its place and health) */
  .pl .pn{display:none;position:absolute;right:calc(100% + .375rem);top:50%;transform:translateY(-50%);width:max-content;max-width:9rem;padding:.125rem .4375rem;border-radius:.5rem;background:rgba(8,10,22,.8);border:1px solid var(--line);z-index:2}   /* a name floats at its tile's left, over the stage, so the column needn't be as wide as the names */
  .pl.turn .pn,.pl.scouted .pn,.pl:hover .pn{display:-webkit-box}
  .pl.opp .pn{color:#ffd8d0;background:rgba(52,10,10,.85);border-color:#ff6a5a}
  .pl .vsn{display:block}
  #app.mode-combat .pl .vsn{display:none}
  #app.mode-combat .pl .pn{display:none}   /* (the round tracker names your rival through a fight) */
  .pl.opp .pbox{animation:oppGlow 1.4s ease-in-out infinite alternate}
  .pl .you{display:block}
  .plTab{padding:.1875rem .375rem}.plTab .ic{display:inline}.plTab .tx{display:none}.plTabs{justify-content:flex-end}   /* the tabs as icons: the column is narrow */
  .players.dmgTab{width:11rem}   /* the damage meter takes its width back while it shows */
}
@keyframes oppGlow{from{box-shadow:0 0 0 .125rem #fff,0 0 .5rem rgba(255,106,90,.6)}to{box-shadow:0 0 0 .1875rem #fff,0 0 1.25rem rgba(255,106,90,1)}}
@media (prefers-reduced-motion:reduce){.pl.opp .pbox{animation:none}}
@media (min-width:761px){
/* the fight's compact strip: the match badge folded into the round tracker (presentation.js presFold); the phase line stands down, since the badge names the rival */
.roundbar .turnBanner{padding:.125rem .75rem .125rem .125rem;gap:.5rem;border-radius:2rem;animation:none;max-width:24rem;margin-left:.25rem}
.roundbar .turnBanner .fight{display:none}
.roundbar .turnBanner .av{width:1.875rem;height:1.875rem;border-width:.0625rem}
.roundbar .turnBanner .who small{display:none}
.roundbar .turnBanner .who b{font-size:.9375rem}
.roundbar .turnBanner .hp{min-width:2.75rem;gap:.125rem}.roundbar .turnBanner .hp b{font-size:.875rem}.roundbar .turnBanner .hp i{height:.25rem}
#app.mode-combat .roundbar .phase{display:none}
}

/* ---------- accounts (src/ui/account.js; the production brief of 2026-10-07): the start screen's rows, the sign-in box,
   a profile, the leaderboard and the ranked result. A server without accounts shows none of it. Tier colours are
   ACCT_UI.tiers (handed in as --rk). ---------- */
#startOv .acctRow{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 0}
#startOv .acctMe{margin:0 0 .75rem;padding:.5rem;border:1px solid #344976;border-radius:.75rem;background:#0a1122}
#startOv .acctRow button{width:auto;margin:0}
#startOv .acctBtn{flex:1;min-height:2.75rem;padding:.5rem .75rem;font-size:.8125rem;background:linear-gradient(#1a2b52,#121d37);border-color:#3d568a}
#startOv .acctBtn:hover:not(:disabled){border-color:#ffe994;color:#fff}
.acctLink{width:auto;padding:.25rem .375rem;background:none;border:0;border-radius:.375rem;font-family:var(--body);font-size:.8125rem;letter-spacing:0;color:#ffd977;text-decoration:underline;text-underline-offset:.1875rem;cursor:pointer}
.overlay .box .acctLink{width:auto}
.acctLink:hover:not(:disabled){color:#fff}
.acctLink:disabled{opacity:.5;cursor:default}
#startOv .acctChip{flex:1;min-width:0;display:flex;align-items:center;gap:.625rem;padding:.25rem .5rem .25rem .25rem;background:none;border:1px solid transparent;border-radius:.625rem;text-align:left;font-family:var(--body);letter-spacing:0}
#startOv .acctChip:hover{border-color:#58658b;background:#111a33}
.acctChip .fav,.lbRow .fav,.pfM .fav{flex:none;width:2.5rem;height:2.5rem;border-radius:50%;overflow:hidden;border:.125rem solid var(--gold);background:#10142a}
.lbRow .fav>b,.pfAv>b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-family:var(--disp);font-size:1rem;color:#c9d4e6;background:#1a2340}.pfAv>b{font-size:1.75rem}
.acctChip .fav img,.lbRow .fav img,.pfM .fav img,.pfAv img,.pfAvBtn img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.acctWho{display:flex;flex-direction:column;min-width:0}
.acctWho b{font-family:var(--disp);font-size:1rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acctWho small{font-size:.75rem;color:#b5c4e7;white-space:nowrap}
.acctWho small i{display:inline-block;width:.5rem;height:.5rem;margin-right:.375rem;border-radius:50%;background:var(--rk);box-shadow:0 0 .375rem var(--rk)}
#startOv.acct-in .onlineForm{align-items:stretch}
#startOv .onlineForm #rankedGo{flex:1.25;width:auto;min-height:3.25rem;white-space:nowrap;font-size:1.0625rem;padding:.75rem;border:.125rem solid #ffe994;border-radius:.75rem;background:linear-gradient(#ffdc54,#ffb520);color:#171106;box-shadow:0 0 1rem #ffbc344d,inset 0 0 .625rem #fff3;transition:transform .15s,box-shadow .15s}
#startOv .onlineForm #rankedGo:hover:not(:disabled){transform:translateY(-.125rem);filter:brightness(1.08);box-shadow:0 0 1.375rem #ffbc3480}
#startOv.acct-in .onlineForm #onlineGo{flex:1;background:linear-gradient(#22396e,#16264a);border-color:#4f6ba8;color:#fff;box-shadow:none}
#startOv .onlineForm button:disabled{filter:grayscale(.6) brightness(.7);cursor:not-allowed;transform:none;box-shadow:none}
#startOv .acctNote{margin:.5rem 0 0;font-size:.75rem;line-height:1.45;color:#b5c4e7}
#startOv .acctNote .acctLink{font-size:.75rem;padding:0 .125rem}
/* the boxes */
.acctOv .box{width:min(26rem,100%);max-width:none;max-height:calc(100% - 1rem);overflow-y:auto;scrollbar-width:thin;border-color:#58658b;border-top-color:#af955c;border-radius:1rem;background:linear-gradient(145deg,rgba(12,19,38,.99),rgba(9,13,25,.99));box-shadow:0 .75rem 2.5rem #050917cc}
.acctOv h2{margin:0 2rem .375rem 0;font-size:1.25rem;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.acctOv h3{margin:1rem 0 .5rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#9fb0d6}
.authLead{margin:0 0 1rem;font-size:.8125rem;line-height:1.5;color:#b5c4e7}
.authLead b{color:#fff}
.authForm{display:flex;flex-direction:column;gap:.75rem}
.authForm .af{display:flex;flex-direction:column;gap:.25rem}
.authForm .af>span{font-size:.75rem;color:#c4cde4}
.authForm .af>span i{font-style:normal;color:#8895ae;margin-left:.25rem}
.authForm input{width:100%;height:2.875rem;font:inherit;font-size:1rem;padding:.5rem .75rem;border-radius:.625rem;border:1px solid #344976;background:#080e1d;color:var(--fg)}
.authForm input:focus-visible{outline:.125rem solid #ffe994;outline-offset:-.125rem}
.authErr{margin:0;padding:.5rem .625rem;border-radius:.5rem;font-size:.8125rem;line-height:1.4;color:#ffd0c8;background:rgba(192,57,43,.22);border:1px solid rgba(255,106,90,.45)}
.overlay .box .authForm #authGo{margin-top:.25rem;min-height:3rem;font-size:1rem;border:.125rem solid #ffe994;border-radius:.75rem;background:linear-gradient(#ffdc54,#ffb520);color:#171106}
.overlay .box .authForm #authGo:disabled{filter:brightness(.75);cursor:wait}
.authAlt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin:1rem 0 0;font-size:.8125rem;color:#9fb0d6}
.acctOv :is(button,input,[role=button]):focus-visible{outline:.125rem solid #ffe994;outline-offset:.125rem}
/* a rank's badge */
.rkBadge{display:inline-flex;align-items:baseline;gap:.375rem;padding:.1875rem .5rem;border:1px solid var(--rk);border-radius:999px;background:color-mix(in srgb,var(--rk) 16%,#0a0f20);white-space:nowrap;line-height:1.2}
.rkBadge b{font-family:var(--disp);font-size:.75rem;letter-spacing:.03em;color:var(--rk)}
.rkBadge small{font-size:.6875rem;color:#d7def0}
.rkBadge.none{--rk:#6a7699;color:#9aa6c4;font-size:.75rem}
.rkBadge.big{padding:.375rem .875rem;box-shadow:0 0 1rem color-mix(in srgb,var(--rk) 35%,transparent)}
.rkBadge.big b{font-size:1.125rem}.rkBadge.big small{font-size:.8125rem}
.lpBar{position:relative;display:block;height:.375rem;border-radius:999px;background:#1a2340;overflow:hidden}
.lpBar i,.lpBar u{position:absolute;left:0;top:0;bottom:0;border-radius:999px}
.lpBar i{background:linear-gradient(90deg,color-mix(in srgb,var(--rk) 60%,#000),var(--rk));box-shadow:0 0 .5rem var(--rk)}
.lpBar u{background:rgba(255,255,255,.35);text-decoration:none}
/* a profile */
.acctOv .pfBox{width:min(30rem,100%)}
.pfHead{display:flex;align-items:center;gap:.875rem;margin:0 0 .75rem}
.pfAv{flex:none;width:4rem;height:4rem;border-radius:50%;overflow:hidden;border:.1875rem solid var(--gold);background:#10142a;box-shadow:0 0 1rem #ffc94a40}
.pfWho{min-width:0}.acctOv .pfWho h2{margin:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none}
.pfWho p{margin:.125rem 0 0;font-size:.75rem;color:#9fb0d6}
.pfVerify{margin:0 0 .75rem;padding:.5rem .625rem;border-radius:.5rem;font-size:.75rem;line-height:1.45;color:#ffe9b0;background:rgba(255,201,74,.1);border:1px solid rgba(255,201,74,.35)}
.pfVerify .acctLink{font-size:.75rem;padding:0 .125rem}
.pfRk{display:flex;align-items:center;gap:.875rem;padding:.75rem;border:1px solid #2c3a66;border-radius:.75rem;background:#0a1122}
.pfRk>small{font-size:.75rem;color:#9fb0d6}
.pfLp{flex:1;min-width:0;display:flex;flex-direction:column;gap:.375rem}.pfLp small{font-size:.6875rem;color:#9fb0d6}
.pfGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:.375rem}
.pfCell{display:flex;flex-direction:column;align-items:center;gap:.125rem;padding:.5rem .25rem;border-radius:.5rem;background:#0d1530;border:1px solid #233056}
.pfCell b{font-family:var(--disp);font-size:1rem;color:#fff}.pfCell span{font-size:.625rem;color:#8f9cc0;text-align:center}
.pfAvatars{display:grid;grid-template-columns:repeat(8,1fr);gap:.375rem}
.overlay .box .pfAvBtn{width:auto;aspect-ratio:1;padding:0;border:.125rem solid #31456f;border-radius:50%;overflow:hidden;background:#0b101e}
.overlay .box .pfAvBtn:hover:not(:disabled){border-color:#9fb4d8}
.overlay .box .pfAvBtn.on{border-color:var(--gold);box-shadow:0 0 .625rem #ffc94a66}
.pfHist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}
.pfM{display:flex;align-items:center;gap:.625rem;padding:.375rem .5rem;border-radius:.625rem;background:#0d1530;border:1px solid #233056}
.pfM .pl{flex:none;width:2.25rem;font-family:var(--disp);font-size:1rem;text-align:center;color:#c9d4e6}
.pfM.p1 .pl{color:#ffd54a}.pfM.p2 .pl{color:#e8eef8}.pfM.p3 .pl{color:#e0a26a}.pfM.p4 .pl{color:#b9c3d6}.pfM.p5 .pl,.pfM.off .pl{color:#7f8aa8}
.pfM .fav{width:2rem;height:2rem;border-width:1px}
.pfM .mi{flex:1;min-width:0;display:flex;flex-direction:column}
.pfM .mi b{font-size:.8125rem;color:#fff;font-weight:600}.pfM .mi small{font-size:.6875rem;color:#8f9cc0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfM .dl,.rrMmr em{font-family:var(--disp);font-size:.875rem;font-style:normal;color:#c9d4e6}
.pfM .dl.up,.rrMmr em.up{color:var(--good)}.pfM .dl.down,.rrMmr em.down{color:var(--foe)}
.pfNone{padding:.75rem;text-align:center;font-size:.8125rem;color:#8f9cc0}
.pfHistBox>.acctLink{display:block;margin:.5rem auto 0}
/* the leaderboard */
.acctOv .lbBox{width:min(34rem,100%)}
.lbSeason{margin:0 0 .75rem;font-size:.75rem;color:#9fb0d6}
.lbList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}
.lbRow{display:flex;align-items:center;gap:.625rem;padding:.375rem .625rem;border-radius:.625rem;background:#0d1530;border:1px solid #233056;cursor:pointer}
.lbRow:hover{border-color:#58658b;background:#111b3a}
.lbRow.me{border-color:var(--gold);background:linear-gradient(90deg,rgba(255,201,74,.14),#0d1530 60%)}
.lbRow .n{flex:none;width:1.75rem;font-family:var(--disp);font-size:.9375rem;text-align:center;color:#c9d4e6}
.lbRow.top1 .n{color:#ffd54a}.lbRow.top2 .n{color:#e8eef8}.lbRow.top3 .n{color:#e0a26a}
.lbRow .fav{width:2.25rem;height:2.25rem;border-width:1px}
.lbRow .who{flex:1;min-width:0;display:flex;flex-direction:column}
.lbRow .who b{font-size:.875rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lbRow .who small{font-size:.6875rem;color:#8f9cc0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbRow .mmr{flex:none;min-width:2.75rem;text-align:right;font-family:var(--disp);font-size:.875rem;color:#fff}
.lbEmpty{margin:.5rem 0;padding:1rem;text-align:center;font-size:.8125rem;color:#9fb0d6;border:1px dashed #2c3a66;border-radius:.75rem}
.lbBox>.acctLink{display:block;margin:.75rem auto 0}
/* the ranked result, on the result screen under the stats panel */
.rsRank{position:relative;z-index:4;flex:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.5rem 1rem;width:min(calc(100vw - 1.5rem),max(var(--frameW),60rem));padding:.5rem 1rem;
  background:linear-gradient(180deg,rgba(16,21,44,.95),rgba(6,8,18,.97));border:1px solid var(--rsRim);border-radius:.75rem;box-shadow:0 .375rem 1.5rem rgba(0,0,0,.5)}
.rs-play .rsRank{animation:rsRise .45s ease-out var(--t-btns) both}
.rrLbl{font-family:var(--disp);font-size:.75rem;letter-spacing:.12em;color:var(--rsA)}
.rrWait{font-size:.8125rem;color:#b5c4e7}
.rrRanks{display:inline-flex;align-items:center;gap:.375rem}.rrTo{font-style:normal;color:#9fb0d6}
.rrMove{font-family:var(--disp);font-size:.8125rem;letter-spacing:.06em;padding:.125rem .5rem;border-radius:.375rem}
.rrMove.promoted{color:#14250f;background:var(--good);box-shadow:0 0 .75rem #5ee08a88}
.rrMove.demoted{color:#2a0b08;background:var(--foe)}
.rrLp{display:inline-flex;align-items:center;gap:.5rem;min-width:9rem}.rrLp .lpBar{flex:1;min-width:6rem}.rrLp small{font-size:.75rem;color:#d7def0}
.rrMmr{font-size:.8125rem;color:#b5c4e7}.rrMmr b{color:#fff;font-family:var(--disp);font-weight:400}
@media (max-width:760px){
  #startOv .acctRow{gap:.375rem}
  #startOv .acctGuest .acctBtn{flex:1 1 40%}
  #startOv .acctGuest .boardBtn{flex:1 1 100%}
  #startOv .acctMe .acctChip{flex:1 1 100%}
  #startOv .acctMe .acctLink{flex:1;text-align:center}
  #startOv.acct-in .onlineForm{flex-direction:column}
  #startOv .onlineForm #rankedGo{flex:auto;min-height:3.5rem;font-size:1.125rem}
  .acctOv{padding:.75rem}
  .acctOv .box{padding:1.125rem 1rem}
  .pfGrid{grid-template-columns:repeat(3,1fr)}
  .pfAvatars{grid-template-columns:repeat(4,1fr)}
  .lbRow .rkBadge small{display:none}
  .rsRank{width:calc(100vw - 1rem);padding:.5rem .625rem;gap:.375rem .75rem}
}
@media (max-width:760px){.viewPill{font-size:.625rem;padding:.25rem .3rem .25rem .5rem;gap:.3rem}.viewPill b{max-width:5rem}}