/* 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:#a7b0d8; --gold:#ffc94a; --ki:#7ad0ff; --foe:#ff6a5a; --good:#5ee08a; --teal:#4fe0c8; --violet:#c69bff;   /* the inspect card's sources (2026-10-16): teal what this fight did, violet traits and augments (items are --gold, debuffs --foe) */   /* --dim #8b94c0 → #a7b0d8 (the owner's contrast pass, 2026-10-11): secondary text 8.6:1 on --bg, 5.3:1 even on --line */
  --tech:'Rajdhani','Barlow',system-ui,sans-serif;   /* the Clash controller's FILL KI band, labels and numbers (the owner's pick, 2026-10-15), at 600-700 */
  --disp:'Saira Semi Condensed','Arial Narrow','Arial Black',sans-serif; --body:'Barlow',system-ui,sans-serif;   /* the type (the owner, 2026-10-12: a premium game feel, away from the rounded faces every flyer uses): the display face loads at one weight, 800, so every --disp rule draws at it whatever weight it asks for, as Russo One's single weight did; Barlow, the text, at 400-800. Bangers stays the manga face of cut-ins and the result screen. The studio site uses the same families (site/hub.css) */
  --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% - 17.5rem)}   /* centred, as wide as its text needs: the menu beside it is three buttons (🎥, 🎵, ⚙️; four with 🏁 while spectating, below), so 8.75rem a side keeps it clear */
@media (min-width:761px){#app:has(#rankBtn:not([hidden])) .roundbar{max-width:calc(100% - 22.5rem)}}   /* (phones place the tracker their own way: the ≤760px block) */
.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{position:relative;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)}
.riBadge{position:absolute;right:-.3rem;top:-.3rem;width:.95rem;height:.95rem;display:flex;align-items:center;justify-content:center;font-size:.55rem;font-style:normal;border-radius:50%;background:#10152a;border:1px solid var(--gold)}.riBadge img{width:.75rem;height:.75rem;object-fit:contain;pointer-events:none}   /* a shared carousel's round (X-6 of stages 2-4): the half not on the slot, small in its corner */
.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:0;border:0;border-radius:999rem;background:none;box-shadow:none;backdrop-filter:none;animation:none}.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.row{flex-direction:row;align-items:center;gap:.5em}   /* the clock on one line while the badge has the width (ui.js clockLay) */
.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{border-radius:999rem;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,.menu #camTop{font-size:1rem}.menu #musicTop.off{opacity:.6;filter:grayscale(1)}#app.mission #musicTop,#app.duel #musicTop,#app.mission #camTop,#app.duel #camTop{display:none}   /* the music mute beside ⚙️ (ui.js renderMusic): grey while the music is off; 🎥 beside it resets the camera (the owner, 2026-10-11); both out of a mission's and a Clash's way, which hold the camera themselves */
/* 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.more,.shopToggle{display:none}   /* (a phone's "+N": the phone block) */
.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:7;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}
/* Inspector V2 (2026-10-16; ui.js insBuild / insFill, src/ui/inspect.js; docs/COMBAT_CLARITY_INSPECTOR_V2.md): what it reads
   (the mode line), the stats as buttons each with its step from the base, marked and coloured by what moved it most (◆ an
   item gold, ✦ a trait or augment violet, ▲ this fight teal, ▼ a debuff red: never the colour alone), and a stat's breakdown */
.insMode{display:flex;align-items:center;gap:.375rem;margin:.5rem 0 0;font-size:.6875rem;color:var(--dim);text-transform:uppercase;letter-spacing:.6px}
.insDot{width:.5rem;height:.5rem;border-radius:50%;background:var(--violet);flex:none}
.insMode.m-live .insDot,.insMode.m-opening .insDot{background:var(--teal);box-shadow:0 0 .375rem var(--teal);animation:insPulse 1.6s ease-in-out infinite}
.insMode.m-fallen .insDot,.insMode.m-result .insDot,.insMode.m-preview .insDot,.insMode.m-warmup .insDot,.insMode.m-bench .insDot{background:#6a74a0}
@keyframes insPulse{50%{opacity:.35}}
.insStats .stat{font-family:var(--body);font-size:.625rem;letter-spacing:.5px;background:#10152a;border:1px solid transparent;border-radius:.5rem;padding:.3125rem .1875rem;color:var(--dim);width:100%;min-width:0;cursor:pointer}
.insStats .stat:hover{border-color:var(--line)}.insStats .stat.open{border-color:var(--ki);background:#13203a}
.insStats .stat .sl{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insStats .stat .sd{display:block;min-height:.8125rem;font-style:normal;font-size:.625rem;font-family:var(--body);font-weight:700;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;color:var(--dim);white-space:nowrap}
.insStats .stat[data-cat=item] .sd{color:var(--gold)}.insStats .stat[data-cat=item]{border-color:#4a3f1c}
.insStats .stat[data-cat=trait] .sd,.insStats .stat[data-cat=aug] .sd,.insStats .stat[data-cat=prog] .sd{color:var(--violet)}.insStats .stat[data-cat=trait],.insStats .stat[data-cat=aug],.insStats .stat[data-cat=prog]{border-color:#3d3160}
.insStats .stat[data-cat=temp] .sd{color:var(--teal)}.insStats .stat[data-cat=temp]{border-color:#1d4a48}
.insStats .stat[data-cat=debuff] .sd{color:var(--foe)}.insStats .stat[data-cat=debuff]{border-color:#5a2420}
.insStats .stat.chg{animation:insChg .9s ease-out}
@keyframes insChg{0%{box-shadow:inset 0 0 0 .125rem var(--gold);background:#2a2610}100%{box-shadow:none}}
.insMoreBtn{display:block;width:100%;margin:0;padding:.1875rem;font-family:var(--body);font-size:.6875rem;font-weight:700;background:none;border:none;color:var(--ki)}
.insBreak{background:#0e1326;border:1px solid var(--line);border-radius:.5rem;padding:.4375rem .5625rem;margin:.25rem 0 .375rem;font-size:.75rem}
.ibHead{display:flex;align-items:center;gap:.375rem;margin-bottom:.125rem}.ibHead b{font-family:var(--disp);font-weight:400}.ibHead span{color:var(--dim);font-size:.625rem;text-transform:uppercase;letter-spacing:.5px}
.ibX{margin-left:auto;padding:0 .375rem;font-size:1rem;line-height:1;background:none;border:none;color:var(--dim)}
.ibList,.ibList ol{list-style:none;margin:0;padding:0}
.ib{display:grid;grid-template-columns:1fr auto;gap:.0625rem .5rem;padding:.1875rem 0;border-top:1px solid rgba(42,53,96,.6)}.ib:first-child{border-top:none}
.ib>b{font-family:var(--disp);font-weight:400;font-variant-numeric:tabular-nums;text-align:right}.ib i{font-style:normal}
.ib ol{grid-column:1/-1;padding-left:.875rem}.ib li{display:flex;justify-content:space-between;gap:.5rem;color:var(--dim);font-size:.6875rem;line-height:1.35}.ib li b{font-variant-numeric:tabular-nums;font-weight:700}
.ib.c-item>b,.ib.c-item i{color:var(--gold)}.ib.c-trait>b,.ib.c-trait i,.ib.c-aug>b,.ib.c-aug i,.ib.c-prog>b,.ib.c-prog i{color:var(--violet)}
.ib.c-temp>b,.ib.c-temp i{color:var(--teal)}.ib.c-debuff>b,.ib.c-debuff i{color:var(--foe)}.ib.c-final{border-top:1px solid var(--line);font-weight:700}.ib.c-final>b{color:var(--fg)}
.ibNote{color:var(--dim);font-size:.625rem;font-style:italic;padding:.0625rem 0}.ib li.ibNote{display:block}
.ibTip{margin:.25rem 0 0;color:var(--dim);font-size:.6875rem;line-height:1.35}
.itChip .itSh{display:block;font-size:.625rem;color:var(--gold);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}.itChip .itSh:empty{display:none}
.insPend{margin:.375rem 0 0;padding:.375rem .5rem;border:1px dashed #3a4372;border-radius:.5rem;font-size:.6875rem;color:var(--dim)}
.ipHead{font-family:var(--disp);font-size:.75rem;color:var(--fg);margin-bottom:.125rem}.ipHead span{font-family:var(--body);font-size:.5625rem;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-left:.25rem}
.ip{padding:.1875rem 0;border-top:1px solid rgba(42,53,96,.6);line-height:1.35}.ip:first-of-type{border-top:none}.ip b{display:block;color:var(--fg);font-size:.6875rem}.ip i{font-style:normal}
.ip.c-item i{color:var(--gold)}.ip.c-trait i,.ip.c-aug i{color:var(--violet)}
/* Inspector V2's Active Effects (ui.js insFxRow), the board's markers (units.js ubFx) and a held augment's status (augStatusHtml) */
.insFx{margin:.375rem 0 0;padding:.375rem .5rem;border:1px solid #1d4a48;border-radius:.5rem;background:#0c1a22;font-size:.6875rem}
.ifx{display:grid;grid-template-columns:1.375rem minmax(0,1fr);gap:0 .375rem;align-items:center;padding:.1875rem 0;border-top:1px solid rgba(42,53,96,.6)}.ifx:first-of-type{border-top:none}
.ifxIc{grid-row:span 2;width:1.375rem;height:1.375rem;display:grid;place-items:center;border-radius:.375rem;background:#141c34;overflow:hidden}.ifxIc img,.ifxIc .itImg,.ifxImg{width:100%;height:100%;object-fit:contain}.ifxEm{font-size:.875rem;line-height:1}
.ifxN{min-width:0}.ifxN b{display:block;color:var(--fg);font-size:.6875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifxN small{color:var(--dim);font-size:.5625rem;text-transform:uppercase;letter-spacing:.4px}
.ifxV{grid-column:2;display:flex;justify-content:space-between;gap:.5rem;color:var(--teal);font-weight:700;font-variant-numeric:tabular-nums}.ifxV:empty{display:none}.ifxV small{color:var(--dim);font-weight:400;font-size:.5625rem;white-space:nowrap}
.ifx.neg .ifxN b,.ifx.neg .ifxV{color:var(--foe)}.ifx.c-augment .ifxN b{color:var(--violet)}.ifx.c-item .ifxV{color:var(--gold)}.ifx.done{opacity:.6}
.ub .ubFx{position:absolute;left:100%;top:var(--stH);margin-left:.1875rem;display:flex;align-items:center;gap:1px;pointer-events:auto;cursor:pointer}
.ub .ubFx[hidden]{display:none}
.ub .ubF{width:.9375rem;height:.9375rem;display:grid;place-items:center;font-style:normal;font-size:.625rem;line-height:1;border-radius:.25rem;background:rgba(10,14,30,.85);border:1px solid #3a4372;overflow:hidden}
.ub .ubF.neg{border-color:var(--foe);background:rgba(60,12,10,.88)}.ub .ubF.aug{border-color:var(--violet)}
.ub .ubF img,.ub .ubF .ubFi{width:100%;height:100%;object-fit:contain}
.ub .ubFx b{font-size:.5625rem;color:#eef1ff;text-shadow:0 1px .125rem #000;margin-left:1px}
.ttAugSt{margin-top:.375rem;padding-top:.3125rem;border-top:1px solid var(--line);font-size:.75rem}.ttAugSt i{font-style:normal}.ttAugSt small{display:block;color:var(--dim);font-size:.6875rem;margin-top:.125rem}
.ttAugSt.st-Active b,.ttAugSt.st-Triggered b,.ttAugSt.st-Ready b{color:var(--teal)}.ttAugSt.st-Expired b,.ttAugSt.st-Applied b{color:var(--good)}.ttAugSt.st-Inactive b,.ttAugSt.st-Nottriggered b{color:var(--dim)}
.augIc[data-st=Inactive]{filter:saturate(.35) brightness(.75)}.augIc[data-st=Active],.augIc[data-st=Triggered]{box-shadow:0 0 0 .125rem var(--teal),0 0 .5rem rgba(79,224,200,.55)}
/* the Battle Breakdown above the damage meter once a fight is over (ui.js renderBreakdown; docs/BATTLE_BREAKDOWN.md):
   facts marked as strengths (green) or weaknesses (red), the Captain's line, a possible adjustment; folded to its
   summary on a phone. Open, it widens the column (.bdWide) */
.bdBox{margin-bottom:.375rem;padding:.375rem .5rem;font-size:.6875rem;line-height:1.3;background:var(--glass);border:1px solid #6b5a1f;border-radius:.5rem;color:var(--fg)}
.bdBox summary{cursor:pointer;font-family:var(--disp);color:var(--gold);font-size:.75rem;letter-spacing:.03em;list-style:none}.bdBox summary::-webkit-details-marker{display:none}
.bdBox summary::before{content:"▸ ";color:var(--dim)}.bdBox[open] summary::before{content:"▾ "}
.bdBox summary span{font-family:var(--body);color:var(--dim);font-size:.625rem;margin-left:.25rem}
.bdBox h4{margin:.375rem 0 .125rem;font-family:var(--disp);font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:600}
.bdBox ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.1875rem}
.bdBox li{position:relative;padding-left:.75rem}.bdBox li::before{content:"";position:absolute;left:.125rem;top:.4em;width:.3125rem;height:.3125rem;border-radius:50%;background:var(--dim)}
.bdBox li.good::before{background:var(--good)}.bdBox li.bad::before{background:var(--foe)}
.bdBox .bdTips li::before{content:"→";background:none;width:auto;height:auto;top:0;left:0;color:var(--gold);font-size:.625rem}
.bdBox b{color:#fff;font-weight:600}
.bdVoice{display:flex;align-items:center;gap:.375rem;margin-top:.375rem;padding:.25rem .375rem;background:rgba(20,16,8,.6);border-radius:.375rem}
.bdVoice img{width:1.75rem;height:1.75rem;border-radius:50%;object-fit:cover;object-position:50% 30%;border:.125rem solid #6b5a1f;flex:none}
.bdVoice q{font-style:italic;color:#fff1c8;quotes:"“" "”"}
.bdNote{margin:.375rem 0 0;font-size:.5625rem;color:var(--dim)}
.players.dmgTab.bdWide{width:17rem}
.plTab.bdDot{position:relative}.plTab.bdDot::after{content:"";position:absolute;top:-.125rem;right:-.125rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);box-shadow:0 0 .375rem rgba(255,201,74,.8);pointer-events:none}
.augImp{margin-top:.5rem;padding:.375rem .5rem;font-size:.6875rem;background:var(--glass);border:1px solid var(--line);border-radius:.5rem}
.augImp summary{cursor:pointer;font-family:var(--disp);color:var(--violet);font-size:.75rem;list-style:none}.augImp summary::before{content:"▸ ";color:var(--dim)}.augImp[open] summary::before{content:"▾ "}
.augImp summary span{font-family:var(--body);color:var(--dim);font-size:.625rem;margin-left:.25rem}
.aiRow{display:flex;gap:.375rem;align-items:center;padding:.1875rem 0}.aiRow.idle{opacity:.55}.aiIc{width:1.25rem;height:1.25rem;flex:none}.aiIc img{width:100%;height:100%;object-fit:contain}
.aiN{min-width:0}.aiN b{display:block;font-size:.6875rem;color:var(--fg)}.aiN small{color:var(--teal);font-size:.625rem}.aiRow.idle .aiN small{color:var(--dim)}
.aiNote{margin:.25rem 0 0;color:var(--dim);font-size:.5625rem;font-style:italic}
.ttShare{margin-top:.375rem;padding-top:.375rem;border-top:1px solid var(--line);font-size:.75rem}.ttShare>b{color:var(--gold);font-family:var(--disp);font-weight:400}
.ttShare ul{list-style:none;margin:.1875rem 0;padding:0}.ttShare li{display:flex;justify-content:space-between;gap:.75rem}.ttShare li b{color:var(--gold);font-variant-numeric:tabular-nums}.ttShare p{margin:.1875rem 0 0}.ttShare i{font-style:normal;color:var(--teal)}
@media (prefers-reduced-motion:reduce){.insDot,.insStats .stat.chg{animation:none!important}}
body.fxReduced .insDot,body.fxReduced .insStats .stat.chg{animation:none!important}
.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 img.skillIcon{height:auto;aspect-ratio:1;object-position:center}
.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:.7;filter:grayscale(1)}
.players .pl.out .pbox{border-color:#687180;box-shadow:none;transform:none}
.pl.out .pbar i{height:0!important}
.pl .defeated{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);padding:.125rem .3rem;background:#171b24e8;border:1px solid #9da5b1;border-radius:.2rem;color:#fff;font-size:.65rem;font-weight:900;letter-spacing:.08em;z-index:3}
.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}
.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}
#startOv .capHint{font-size:.625rem;line-height:1.3;color:#8895ae;margin:.625rem 0 0}
#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}
.nameField{flex:1;min-width:0}
.nameField>span{display:block;font-size:.6875rem;color:#c4cde4;padding-left:.75rem;margin-bottom:.0625rem}
#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}
}
@media (prefers-reduced-motion:reduce){#startOv *,#startOv *::before{animation:none!important;transition:none!important}}
/* the Arena Select (ui.js openArenaSelect; the owner's screen of 2026-10-07, in the home hub's look since 2026-10-18): the
   step after Play, for Ranked, Casual and Solo alike: a full page over the start screen, its header naming the mode it
   leads into, the arenas as big chamfered cards (each its own picture, assets/arenas/cards/, its number, universe, name,
   subtitle and line over its foot; the pick framed orange with its SELECTED tag; an unfinished one's red band; one
   without a stage dim, COMING SOON), and a bar along the foot: the arena picked, Back, Random, and Confirm in Play's
   orange, worded as the play button was. The pick's own picture sits soft and dim behind. On a phone the cards stack */
#arenaOv{--acc:#ff9f1c;--acc2:#ffb547;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;background:#070b18;isolation:isolate;overflow-y:auto;overflow-x:hidden}
#arenaOv .apBg{position:fixed;inset:-1rem;width:calc(100% + 2rem);height:calc(100% + 2rem);object-fit:cover;object-position:center 40%;opacity:.35;filter:blur(.75rem) saturate(1.1);pointer-events:none}   /* the pick's own picture, soft behind the page */
#arenaOv::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,#070b18e6 0%,#0a1027b3 45%,#070b18f2 100%);pointer-events:none}
.apWrap{position:relative;z-index:1;width:100%;margin:0;padding:1.5rem clamp(1rem,3vw,3rem) 0;display:flex;flex-direction:column;gap:1.5rem;min-height:100%}
.apHead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem}
.apTitle{display:flex;flex-direction:column;gap:.375rem}
.apMode{font-family:var(--disp);font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2)}
.apTitle h1{margin:0;font-family:var(--disp);font-style:italic;font-size:clamp(2.25rem,4.4vw,4rem);line-height:.9;text-transform:uppercase;color:#fff}
.apTitle h1 em{font-style:italic;color:var(--acc2)}
.apTitle p{margin:0;max-width:40rem;font-size:1rem;color:#c8cff2}
.apKeys{display:flex;align-items:center;gap:.375rem;font-family:var(--disp);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:#c8cff2}
.apKeys kbd{font-size:.625rem;padding:.0625rem .375rem}.apKeys i{font-style:normal;color:var(--acc2)}
.apCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;width:100%;max-width:92rem;margin:0 auto}   /* (capped: the cards' pictures are about 470 px wide, assets/arenas/cards/, so a card stays near its picture's own size and crisp) */
.overlay .apCard{position:relative;display:block;aspect-ratio:1.64;width:auto;margin:0;padding:0;overflow:hidden;text-align:left;font:inherit;text-transform:none;letter-spacing:0;color:var(--fg);border:.1875rem solid #22305c;border-radius:0;background:#0e1530;box-shadow:none;cursor:pointer;
  clip-path:polygon(.875rem 0,100% 0,100% calc(100% - .875rem),calc(100% - .875rem) 100%,0 100%,0 .875rem);transition:border-color .15s}
.apPic{position:absolute;inset:0;display:block}
.apPic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}   /* the card's shape is the pictures' own (1.64), so nothing is cropped or scaled past its fit; no zoom on hover, which blurred them */
.apCard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,9,22,.96) 0%,rgba(6,9,22,.35) 48%,transparent 72%);pointer-events:none}
.overlay .apCard:hover{border-color:#5a6aa8}
.overlay .apCard.on{border-color:var(--acc)}
.apCard.soon{cursor:default;filter:saturate(.6) brightness(.75)}
.apCard:focus-visible{outline:.1875rem solid #3fd6ff;outline-offset:.1875rem}
.apNum{position:absolute;z-index:1;left:1.125rem;top:.875rem;font-family:var(--disp);font-style:italic;font-size:1.375rem;line-height:1;color:rgba(255,255,255,.88);text-shadow:0 .0625rem .375rem #000}
.apSelTag{display:none;position:absolute;z-index:1;right:.875rem;top:.875rem;padding:.375rem 1.375rem;background:var(--acc);color:#160c00;font-family:var(--disp);font-style:italic;font-size:1rem;text-transform:uppercase;clip-path:polygon(.875rem 0,100% 0,calc(100% - .875rem) 100%,0 100%)}
.apCard.on .apSelTag{display:block}
.apSoon{position:absolute;z-index:1;left:0;right:0;top:40%;transform:rotate(-6deg);text-align:center;font-family:var(--disp);font-size:1.125rem;letter-spacing:.2em;text-transform:uppercase;padding:.375rem 0;background:#0b1024e6;color:#fff}
/* an arena still being built but playable (ui.js ARENA_PICKS wip): a red band along the picture's top under a hazard-striped
   edge, and a red tag beside the bar's name while it is the pick */
.apWip{position:absolute;z-index:1;left:0;right:0;top:3.25rem;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.375rem .5rem .3125rem;font-family:var(--disp);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#b3201ae6}
.apWip::before{content:"";position:absolute;left:0;right:0;top:-.3125rem;height:.3125rem;background:repeating-linear-gradient(-45deg,#e8392f 0 .5rem,#1a0507 .5rem 1rem)}
.apWip b{font-size:.875rem;line-height:1}.apWip i{font-style:normal;opacity:.7}.apWip em{font-style:normal;color:#ffd9d6}
.apWipTag{display:inline-flex;align-items:center;gap:.3rem;margin-left:.625rem;font-family:var(--disp);font-size:.6875rem;line-height:1.2;letter-spacing:.12em;white-space:nowrap;padding:.25rem .5rem;background:#b3201a;color:#fff;font-style:normal}
.apWipTag[hidden]{display:none}
.apInfo{position:absolute;z-index:1;left:1.25rem;right:1.25rem;bottom:1.125rem;display:flex;flex-direction:column;gap:.25rem}
.apUni{display:flex;align-items:center;gap:.4rem;font-family:var(--disp);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#ffb0a3}
.apUni.dbz{color:#ffcf6a}.apUni.mv{color:#ffa6d6}.apUni.ua{color:#9fd8ff}.apUni img{width:1.125rem;height:1.125rem;object-fit:contain}.apBloom{font-size:1rem;line-height:1}
.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-style:italic;font-size:clamp(1.5rem,2.4vw,2.375rem);line-height:.9;text-transform:uppercase;color:#fff;text-shadow:0 .125rem .5rem #000}
.apTx{margin:0;font-size:.9375rem;line-height:1.35;color:#d5dcff}
/* the bar: always in reach at the page's foot */
.apBar{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:1rem;margin:auto calc(-1 * clamp(1rem,3vw,3rem)) 0;padding:1rem clamp(1rem,3vw,3rem) 1.25rem;background:linear-gradient(0deg,#070b18 70%,rgba(7,11,24,0))}
.apCur{flex:1;min-width:0}
.apCurLb{display:block;font-family:var(--disp);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:#9aa6d6}
.apCur b{display:flex;align-items:center;gap:.5rem;font-family:var(--disp);font-style:italic;font-size:clamp(1.25rem,2.1vw,1.875rem);line-height:1.1;text-transform:uppercase;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;align-items:center;gap:.75rem;flex:none}
.overlay .apBtns button{width:auto;margin:0;border:0;border-radius:0;box-shadow:none;cursor:pointer;font-family:var(--disp);font-style:italic;text-transform:uppercase;clip-path:polygon(1.125rem 0,100% 0,calc(100% - 1.125rem) 100%,0 100%)}
.overlay .apBtns .apBack{min-height:3.5rem;padding:0 1.75rem;font-size:1rem;background:#141d3d;color:#c8cff2}
.overlay .apBtns #apRandom{min-height:3.5rem;padding:0 1.75rem;font-size:1.125rem;background:#1a2346;color:#dfe4ff}
.overlay .apBtns :is(.apBack,#apRandom):hover:not(:disabled){background:#243063;color:#fff}
.overlay .apBtns #apConfirm{min-height:4.5rem;padding:0 2.5rem;font-size:clamp(1.375rem,2vw,2rem);background:var(--acc);color:#160c00;box-shadow:0 .5rem 2.5rem rgba(255,159,28,.4);transition:filter .15s,transform .15s}
.overlay .apBtns #apConfirm:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-.0625rem)}
@media (max-width:1099px){.apCards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .apWrap{padding:1rem 1rem 0;gap:1rem}
  .apKeys{display:none}
  .apCards{grid-template-columns:1fr;gap:.75rem}
  .apTx{display:none}
  .apBar{flex-direction:column;align-items:stretch;gap:.5rem;margin:auto -1rem 0;padding:.625rem 1rem .75rem;background:#070b18;border-top:1px solid #22305c}
  .apCurLb,.apCur p{display:none}
  .apCur b{font-size:1.125rem}
  .apBtns{flex-wrap:wrap}
  .overlay .apBtns #apConfirm{order:-1;flex:1 1 100%;min-height:4rem}
  .overlay .apBtns :is(.apBack,#apRandom){flex:1;min-height:3rem}
  .apCur b{flex-wrap:wrap}.apWipTag{margin-left:0}   /* the unfinished arena's tag drops under the name rather than squeezing it */
}
.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}
/* a game this player holds already (one game at a time): rejoin it here or forfeit it (src/ui/ui.js showGameBusy) */
#startOv .gameBusy{margin:.625rem 0 0;padding:.75rem .875rem;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:.625rem;background:var(--panel)}
#startOv .gameBusyTitle{margin:0;font-family:var(--disp);font-size:.9375rem;color:var(--gold)}
#startOv .gameBusyText{margin:.3125rem 0 .625rem;font-size:.8125rem;line-height:1.45;color:#c9d3ef}
#startOv .gameBusyText b{color:var(--fg)}
#startOv .gameBusyRow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
#startOv .gameBusyRow button{margin:0}
#startOv #gameBusyForfeit.arm,#startOv #onlineLeave.arm{border-color:var(--foe);color:var(--foe)}
.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)}
.phase .phIc,#recTitle .phIc,.recWait>b .phIc,#recHudTitle .phIc{height:1.5em;width:1.5em;vertical-align:-.42em;margin-right:.1em;object-fit:contain}   /* the warm-up's glove (ui.js gloveIc) and the recruitment's icon (recruitIc): the owner's icons, an emoji's size in the line */
/* the tour: a veil with a hole over the step's element, and a card beside it */
.card.tourFlip{animation:tourFlip .45s ease-out}   /* the tour's Reroll: the sample cards flip over in their new order (tour.js shuffleSample) */
/* 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.75rem;display:grid;grid-template-columns:repeat(5,var(--slot));gap:.3125rem;justify-content:center}   /* the item bench (the owner's redesign, 2026-10-13): the remover's bar across the top, then the ten slots in three rows of five (2.75rem since 2026-10-14, the owner: "the icons of items and components bigger", filling the box), in the item box at the panel's right end */
.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: a bar across the bench's top (still the row's first child, so "the tool slot sits before the items" holds in ui.js and input.js): the magnet, its name and the uses left; greyed once they're spent */
.itSlot.tool{grid-column:1 / -1;width:auto;height:1.5rem;justify-content:flex-start;gap:.4375rem;padding:0 .5rem 0 .4375rem;border:1px solid #ff8a5c;background:linear-gradient(90deg,#4a2518,#2a140e);color:#ffb08a;font-family:var(--disp);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;text-align:left;box-shadow:none}
.itSlot.tool svg{width:.875rem;height:.875rem;flex:none}.itSlot.tool .lbl{flex:1}
.itSlot.tool b{padding:0 .375rem;border-radius:.5rem;background:#ff8a5c;color:#2a0f06;font:700 .625rem/.9375rem var(--body);letter-spacing:0;text-transform:none}
.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 span.on{position:relative;border-width:.125rem;box-shadow:0 0 .4375rem rgba(255,201,74,.75)}   /* on the board: a thicker gold frame and its glow (the bench's are framed alone) */
.tpFaces span.on::after{content:"";position:absolute;right:.125rem;bottom:.125rem;width:.375rem;height:.375rem;border-radius:50%;background:var(--gold);box-shadow:0 0 .1875rem #000}   /* and a gold dot in the corner, so it reads without colour too */
.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; the owner's redesign of 2026-10-13, chosen on the shop canvas): one rounded panel (.shopFrame; the
   strip floated over it until 2026-10-15, the owner's "integrated part of the character selection") whose top band is the
   strip of readouts, darker and ruled in gold at its foot like the ITEM BENCH band, over the cards and the item bench */
.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:.25rem}
.chipCut{clip-path:polygon(.3125rem 0,100% 0,100% calc(100% - .3125rem),calc(100% - .3125rem) 100%,0 100%,0 .3125rem)}   /* a chip's clipped corners */
.shopFrame{display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--line);border-radius:.75rem;overflow:hidden;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 .5rem 1.25rem rgba(0,0,0,.45)}
.shopTop{height:2.5rem;display:flex;align-items:center;padding:0 .75rem;background:rgba(8,10,20,.94);border-bottom:.125rem solid var(--gold);font-variant-numeric:tabular-nums;min-width:0}
.shopTop .augRow{flex:2 1 auto;justify-content:center;gap:.5rem;height:2rem;margin:0;padding:0 .75rem;background:none;border:0;border-left:1px solid rgba(122,208,255,.3);border-radius:0}   /* the augments you took close the strip, taking the room the fielded count doesn't need (the owner, 2026-10-15) */
@media (min-width:761px){.shopTop .augIc{width:2.25rem;height:2rem}}   /* a size up there */
.stIt{display:flex;align-items:center;gap:.4375rem;padding:0 .75rem;height:1.5rem;border-right:1px solid rgba(122,208,255,.3);font-size:.6875rem;color:#bcd4ff;white-space:nowrap}
.stK{font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ki)}
.stIt b{font-family:var(--disp);font-size:1.0625rem;font-weight:400;color:var(--fg)}
.stIt b small{font-size:.6875rem;font-weight:400;color:var(--ki)}
.lvl .xpbar{width:3.75rem;height:.375rem;background:#0a1626;border:1px solid rgba(122,208,255,.35);border-radius:.1875rem;overflow:hidden}   /* the XP bar, filling left to right */
.lvl .xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2f6fd0,var(--ki));transition:width .3s}
@media (min-width:761px){.shopTop>.lvl{flex-grow:1.6;gap:.625rem}.lvl .stK{font-size:.6875rem}.lvl b{font-size:1.375rem}.lvl .xpbar{width:auto;flex:1;min-width:5rem;max-width:11rem;height:.5625rem;border-radius:.3125rem}.lvl .xpn{font-size:.8125rem;color:#dfe5ff}}   /* wide: the level a larger cell, its XP bar stretching with it (the owner, 2026-10-14: "make the level portion a little bigger") */
.xpn{font-size:.6875rem;color:#bcd4ff;font-family:var(--body)}
.stChip{height:1.625rem;margin:0 .3125rem;padding:1px;background:rgba(255,201,74,.6);border:0;border-radius:0;cursor:pointer;flex:none}   /* XP, Reroll and the lock: a chip with a thin gold rim and clipped corners, the same two-box trick as the strip */
.stChip .cin{height:100%;box-sizing:border-box;display:flex;align-items:center;gap:.375rem;padding:0 .625rem;background:#0a1626;color:var(--gold);font-family:var(--disp);font-size:.78125rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.stChip .cin svg{width:.875rem;height:.875rem;flex:none}
.stChip .price{display:flex;align-items:center;gap:.3125rem;font-family:var(--body);font-weight:600;font-size:.71875rem;color:#ffe08a;text-transform:none;letter-spacing:0}
.stChip kbd{font-size:.5625rem;color:var(--ki);border:1px solid rgba(122,208,255,.5);border-radius:0;padding:0 .25rem;line-height:.8125rem;background:none}
.stChip:hover .cin{filter:brightness(1.15)}.stChip:disabled{cursor:default;opacity:.45}.stChip:disabled .cin{filter:none}
.stChip.lock{background:rgba(122,208,255,.6);margin:0}.stChip.lock .cin{color:#bcd4ff;padding:0 .5rem}.stChip.lock .cin svg{width:1rem;height:1rem}
.stChip.lock .shk,.stChip.lock.on .shkO{display:none}.stChip.lock.on .shk{display:inline}   /* the drawn padlock: its shackle open, closed while the shop is locked, when the chip turns gold */
.stChip.lock.on{background:var(--gold)}.stChip.lock.on .cin{color:var(--gold);background:#1c160a}
.stGold b{color:var(--gold);font-size:1.1875rem;display:flex;align-items:center;gap:.375rem}.stGold svg{width:1.125rem;height:1.125rem}
.streak b{color:var(--ki);display:flex;align-items:center;gap:.25rem}.streak b svg{width:.875rem;height:.875rem}
.streak.win b{color:#ffa24a}
.odds{gap:.5rem;font-size:.6875rem;font-weight:600}.odds span{display:flex;align-items:center;gap:.1875rem;color:#dfe5ff}.odds i{width:.4375rem;height:.4375rem;border-radius:50%;background:var(--c)}   /* the shop odds: ODDS, then a dot and a share a cost */
.fld{border-right:0;min-width:0}   /* the fielded count: the number alone, its tooltip saying what it counts (ui.js BAR_TIPS.fld; FIELDED went on 2026-10-15) */
@media (min-width:761px){.shopTop>.stIt{flex:1 1 auto;justify-content:center}}   /* wide: every cell of the strip shares the row evenly, its readout centred, so no one gap opens (the owner, 2026-10-14: "too much space") */
.shopTop>.lockCell{flex:0 0 auto;padding:0 1.125rem}   /* the lock: its own cell between the level and the gold, ruled like the rest, with room round the padlock (the owner, 2026-10-15) */
.shopTop>.fld{flex:0 0 auto;padding:0 1rem}   /* only as wide as the number, the rest of the row to the augments */
.fld b{color:var(--gold);font-size:1.1875rem}.fld b small{font-size:.75rem;color:var(--dim)}
.fld.full b{color:#ffd54a}.fld.over b{color:#ff8a8f}
/* your augments: hex icons in their tier's colour at the strip's end, after the fielded count (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)}
.augIc .augImg,.ttIc .augImg{width:92%;height:92%;object-fit:contain;pointer-events:none}
.augHex .augImg{width:94%;height:100%;object-fit:contain;pointer-events:none}   /* an augment's picture (src/art.js augIcHtml), inside its hex or the tooltip's badge */
.augImg.sm{width:1.1em;height:1.1em;vertical-align:-.2em;object-fit:contain}   /* in a line of text (the scout card's augments) */
.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;margin-left:.75rem}
.shopMain{display:flex;gap:.5rem;align-items:stretch;padding:.5rem}   /* the panel under the strip: XP and Reroll, the five cards, a hairline, the item box */
.shopbar.sellzone .shopFrame{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)}.infoBtn{background:rgba(16,30,60,.92);border-color:#2f4f8a;color:var(--ki)}.shopbar.sellzone .sellBtn{display:none}   /* phones: the picked-up fighter's Sell (ui.js) */
.shop{flex:1;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}
@media (min-width:761px){.shop .card{height:auto;min-height:10rem}}   /* wide: a shop card fills the panel's height (the XP and Reroll column and the item box set it), no strip left empty under the cards (the owner, 2026-10-14) */
/* XP and Reroll on the cards' left (the owner, 2026-10-14: "XP and reroll on the left side like it was, but keep that UI design"):
   the strip's chips, stacked and as tall as the cards, the icon over the word over the price and its key */
.shopSide{flex:none;width:7.25rem;display:flex;flex-direction:column;gap:.5rem}
.shopSide .stChip{flex:1;height:auto;margin:0}
.shopSide .stChip .cin{flex-direction:column;justify-content:center;gap:.3125rem;padding:.375rem .5rem;font-size:1.0625rem;letter-spacing:.1em}
.shopSide .stChip .cin svg{width:1.5rem;height:1.5rem}
.shopSide .stChip .price{font-size:.875rem;gap:.375rem}
.shopSide .stChip kbd{font-size:.6875rem;line-height:1rem;padding:0 .3125rem}
.shopRule{flex:none;width:1px;margin:.375rem .125rem;background:linear-gradient(180deg,transparent,var(--line) 15%,var(--line) 85%,transparent)}
.itemBox{flex:none;width:15.25rem;display:flex;flex-direction:column;min-width:0}   /* the item box: the bench (the remover's bar over three rows of five slots) centred over its band */
.itemMid{flex:1;display:flex;align-items:center;justify-content:center}
@media (min-width:761px){.itemMid{align-items:flex-start;padding:.0625rem 0 .5rem}}   /* wide: the remover's bar and the slots at the box's top, level with the cards' tops (the owner, 2026-10-14: "shift the item remover up to fill that space"), and room under the last row so the ITEM BENCH band's gold line never touches it */
.itemBand{flex:none;height:1.75rem;display:flex;align-items:center;justify-content:space-between;padding:0 .625rem;border-top:.125rem solid var(--gold);background:rgba(8,10,20,.94);border-radius:0 0 .5rem .5rem;font-family:var(--disp);font-size:.84375rem;letter-spacing:.04em;text-transform:uppercase;color:var(--fg)}   /* ITEM BENCH and the count held: the cards' name band in gold */
.itemBand b{color:var(--gold);font-weight:400}.itemBand b small{font-size:.625rem;color:var(--dim)}
/* a fighter's card (ui.js fighterCardHtml: the shop, the tour's sample shop, the roster): the hero art edge to edge under a dark
   fade at its foot, the cost on a slanted flag in the cost's colour, the traits as pills over the art, the name on a band
   ruled in the cost's colour */
.card{position:relative;height:10rem;border-radius:.625rem;border:.125rem solid var(--tier);background:#0b0f1e;cursor:pointer;overflow:hidden;transition:transform .1s,box-shadow .15s;color:var(--fg);min-width:0}
.card:hover{transform:translateY(-.125rem)}
@media (hover:hover){.card:hover{box-shadow:0 0 0 .125rem var(--gold),0 0 1.125rem rgba(255,201,74,.45)}.card.star2:hover{box-shadow:0 0 0 .125rem var(--gold),0 0 1.125rem rgba(255,201,74,.45),inset 0 0 1.25rem rgba(255,201,74,.35)}}   /* a card under the pointer: the item slots' gold rim round its own border, and a soft gold glow (the owner, 2026-10-14) */
.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;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;pointer-events:none}   /* the card picture has the face 40% down (card_art.py): a squarer card keeps the upper part */
.card .cshade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,16,.96) 0%,rgba(5,7,16,.55) 36%,transparent 62%)}
.card .cflag{position:absolute;left:-.375rem;top:.5rem;padding:.125rem .75rem .125rem .875rem;background:var(--tier);color:#0b0e1a;font-family:var(--disp);font-size:.875rem;transform:skewX(-16deg);box-shadow:0 .1875rem .5rem rgba(0,0,0,.5)}
.card .cflag>span{display:flex;align-items:center;gap:.1875rem;transform:skewX(16deg)}
.card .ctr{position:absolute;left:.4375rem;right:.4375rem;bottom:1.9375rem;display:flex;flex-direction:column;align-items:flex-start;gap:.125rem}
.card .ctr span{display:flex;align-items:center;gap:.25rem;max-width:100%;padding:.0625rem .4375rem .0625rem .1875rem;border-radius:6.1875rem;background:rgba(12,16,32,.8);border:1px solid rgba(90,104,160,.55);font-size:.625rem;font-weight:600;color:#dfe5ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .ctr .trIc{width:auto;margin-right:0;flex:none}.card .ctr .trIc img{width:.8125rem;height:.8125rem;vertical-align:-.1875rem}
.card .cn{position:absolute;left:0;right:0;bottom:0;height:1.75rem;display:flex;align-items:center;padding:0 .5625rem;border-top:.125rem solid var(--tier);background:rgba(8,10,20,.94);font-family:var(--disp);font-size:.84375rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .own{position:absolute;right:.4375rem;top:.5rem;font-size:.8125rem;line-height:1.2;color:#241a00;background:var(--gold);border-radius:6.1875rem;padding:.0625rem .5rem;font-family:var(--disp);box-shadow:0 0 .375rem rgba(0,0,0,.5)}
/* 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)}
.card .cstar{position:absolute;right:.4375rem;top:.5rem;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.875rem}
/* an item for sale (the God Ki Crystal): its icon, glowing, in the art's place */
.card.shopIt{--tier:#bff0ff;--tbg:#1d4460;background:linear-gradient(135deg,var(--tbg),#0b0f1e 80%);box-shadow:inset 0 0 1.25rem rgba(122,208,255,.35)}
.card .cIt{position:absolute;inset:.5rem 0 3.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:4.5rem;height:4.5rem}
.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 */
.fight.waiting{border-color:#8baaff;animation:settlePulse 1s ease-in-out infinite}   /* settling: a pulse a second beside its seconds left (the owner, 2026-10-12) */
@keyframes settlePulse{0%,100%{box-shadow:0 .25rem 1rem rgba(0,0,0,.45),0 0 .35rem rgba(139,170,255,.25);filter:brightness(1)}50%{box-shadow:0 .25rem 1rem rgba(0,0,0,.45),0 0 1.1rem rgba(139,170,255,.7);filter:brightness(1.35)}}
@media(prefers-reduced-motion:reduce){.fight.waiting{animation:none;box-shadow:0 0 .5rem rgba(139,170,255,.4)}}
/* 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 */
/* the Tactical Read (src/ui/tacread.js; docs/TACTICAL_READ.md): a switch over the board's lower left while planning, and
   its list above it; the hexes it names light on the board (loop.js TAC_HEX) */
.tacBtn{position:absolute;left:.625rem;bottom:calc(var(--shopH) + 1rem);z-index:6;display:flex;align-items:center;gap:.375rem;padding:.3125rem .625rem;border-radius:1.25rem;font-family:var(--disp);font-size:.75rem;letter-spacing:.04em;color:var(--dim);border:1px solid var(--line);cursor:pointer}
.tacBtn.on{color:var(--gold);border-color:#6b5a1f;box-shadow:0 0 .5rem rgba(255,201,74,.35)}
.tacBtn:hover{color:#fff}
.tacPanel{position:absolute;left:.625rem;bottom:calc(var(--shopH) + 3.25rem);z-index:6;width:min(19rem,calc(100vw - 1.25rem));max-height:40%;overflow-y:auto;padding:.5rem .625rem;font-size:.6875rem;line-height:1.3;color:var(--fg);border-radius:.5rem;pointer-events:auto}
.tacPanel .tacH{display:block;font-family:var(--disp);color:var(--gold);font-size:.75rem;letter-spacing:.04em;margin-bottom:.25rem}
.tacPanel ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.25rem}
.tacPanel li{position:relative;padding-left:.75rem}.tacPanel li::before{content:"";position:absolute;left:.0625rem;top:.35em;width:.375rem;height:.375rem;border-radius:.125rem;transform:rotate(45deg)}
.tacPanel li.leap::before{background:#ff6a5a}.tacPanel li.front::before{background:#ffb347}.tacPanel li.aura::before{background:#ffc94a}
.tacPanel b{color:#fff;font-weight:600}.tacPanel p{margin:.25rem 0 0}.tacPanel .tacNote{font-size:.5625rem;color:var(--dim)}
.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:calc(1.375rem * var(--mkK,1));height:calc(1.375rem * var(--mkK,1));background:center/contain no-repeat;opacity:var(--mkOp,.82);pointer-events:none;filter:drop-shadow(0 .0625rem .125rem rgba(0,0,0,.75));transition:opacity .4s ease}
.ub .ubMk.in{animation:ubMkPop var(--mkMs,.15s) ease-out}   /* (not .pop: that is the floating numbers' class, whose offset and rise it took) */
@keyframes ubMkPop{0%{transform:scale(var(--mkA,.7))}70%{transform:scale(var(--mkB,1.05))}100%{transform:scale(1)}}   /* a move's own pop: cinema.js cineMark's markLook (--mkA, --mkB, --mkMs, --mkOp, --mkGlow; --mkK a fifth smaller with Fight effects reduced) */
.ub .ubMk.css::before{content:"🛡";display:block;text-align:center;font-size:1rem;line-height:1.375rem;filter:drop-shadow(0 0 .25rem var(--mkGlow,#b6ff3a))}   /* (its picture missing: a shield glowing acid green, or the move's own colour: Krillin's gold) */
.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}}
/* augment moments (2026-10-17; src/graphics/augfx.js, ui.js augPayCard; docs/augments/PRESENTATION.md): the chip over a
   fighter an augment acted on (its art and name in its tier's colour; big: what it did, in its kind's colour --k), the
   Prismatic banner across the top, the payout cards over the shop's right and their flights, the row icon's flash */
.augChip{position:absolute;transform:translate(-50%,-100%);display:flex;align-items:center;gap:.3rem;padding:.125rem .5rem .125rem .1875rem;border-radius:1rem;background:rgba(10,14,30,.84);border:1px solid var(--c);box-shadow:0 0 .5rem color-mix(in srgb,var(--c) 45%,transparent);font:400 .6875rem var(--disp);letter-spacing:.03em;color:#fff;white-space:nowrap;pointer-events:none;z-index:6;animation:augChip 1.5s ease-out forwards}
.augChip b{font-weight:400}.augChip i{font-style:normal;color:var(--k);margin-left:.125rem}
.augChipIc{display:flex;width:1.125rem;height:1.125rem;align-items:center;justify-content:center;font-size:.75rem}.augChipImg{width:100%;height:100%;object-fit:contain}
.augChip.big{font-size:.8125rem;padding:.1875rem .625rem .1875rem .25rem;box-shadow:0 0 .875rem color-mix(in srgb,var(--c) 60%,transparent)}.augChip.big .augChipIc{width:1.5rem;height:1.5rem}
.augChip.prismatic{border-color:transparent;background:linear-gradient(rgba(10,14,30,.88),rgba(10,14,30,.88)) padding-box,var(--prism) border-box}
.augChip.foe{opacity:.82;font-size:.625rem;background:rgba(40,12,18,.82)}.augChip.foe.big{font-size:.6875rem}
@keyframes augChip{0%{opacity:0;translate:0 .5rem;scale:.8}12%{opacity:1;translate:0 0;scale:1.06}20%{scale:1}75%{opacity:1;translate:0 -.75rem}100%{opacity:0;translate:0 -1.25rem}}
.augBanner{position:absolute;left:50%;top:calc(var(--topH) + 4.5rem);transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:.625rem;padding:.375rem 1.25rem .375rem .5rem;border-radius:.75rem;border:2px solid transparent;background:linear-gradient(100deg,rgba(14,10,34,.94),rgba(34,14,52,.94)) padding-box,var(--prism,var(--c)) border-box;box-shadow:0 0 1.5rem color-mix(in srgb,var(--c) 55%,transparent);pointer-events:none;overflow:hidden;animation:augBan 1.9s cubic-bezier(.2,.8,.3,1) forwards}
.augBanner::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);translate:-100% 0;animation:augSheen 1.1s .15s ease-out forwards}
.augBanIc{display:flex;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;font-size:1.75rem}.augBanImg{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 .375rem var(--c))}
.augBanTx{display:flex;flex-direction:column;line-height:1.1}.augBanTx small{font:500 .625rem var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}.augBanTx b{font:400 1.25rem var(--disp);color:#fff;letter-spacing:.03em;text-shadow:0 0 .5rem var(--c)}
.augBanner.foe{top:calc(var(--topH) + 4.5rem);scale:.78;opacity:.9;background:linear-gradient(100deg,rgba(40,10,18,.94),rgba(30,12,30,.94)) padding-box,var(--prism,var(--c)) border-box}
@keyframes augBan{0%{opacity:0;translate:0 -.75rem;scale:.9}12%{opacity:1;translate:0 0;scale:1.04}20%{scale:1}80%{opacity:1}100%{opacity:0;translate:0 -.5rem}}
@keyframes augSheen{to{translate:100% 0}}
.augPays{position:absolute;right:calc(var(--plW) + 1rem);bottom:calc(var(--shopH) + 1rem);z-index:9;display:flex;flex-direction:column;gap:.375rem;align-items:flex-end;pointer-events:none}
.augPay{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem .375rem .375rem;border:1px solid var(--c);border-radius:.75rem;box-shadow:0 0 .75rem color-mix(in srgb,var(--c) 40%,transparent);max-width:min(18rem,calc(100vw - 1.5rem));animation:augPayIn .35s cubic-bezier(.2,.9,.3,1.2) both}
.augPay.prismatic{border-color:transparent;background:linear-gradient(var(--glassS,rgba(12,16,34,.92)),var(--glassS,rgba(12,16,34,.92))) padding-box,var(--prism) border-box}
.augPay.out{animation:augPayOut .3s ease-in forwards}
.augPayIc{display:flex;width:2.25rem;height:2.25rem;flex:none;align-items:center;justify-content:center;font-size:1.375rem}.augPayIc .augImg{width:100%;height:100%;object-fit:contain}
.augPayTx{display:flex;flex-direction:column;min-width:0;line-height:1.15}.augPayTx small{font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}.augPayTx b{font:400 .875rem var(--disp);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.augPayGot{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin-top:.125rem;font-size:.75rem;color:#e8ecff}.augPayGot .pg{color:var(--gold);font-family:var(--disp);font-size:.875rem}.augPayGot .pi img{width:1.375rem;height:1.375rem;object-fit:contain;vertical-align:middle}.augPayGot .pr,.augPayGot .px{color:var(--ki)}.augPayGot .pw{color:#ffd84a}.augPayGot .pu{display:inline-flex;align-items:center;gap:.25rem}.augPayGot .pu img{width:1.375rem;height:1.375rem;border-radius:50%;object-fit:cover}.augPayGot .pt{color:#ffd84a}.augPayGot .pt em{font-style:normal;color:var(--c,#e8ecff);margin-left:.25rem}
@keyframes augPayIn{from{opacity:0;translate:1.5rem 0;scale:.9}to{opacity:1;translate:0 0;scale:1}}
@keyframes augPayOut{to{opacity:0;translate:1rem 0}}
.augFly{position:absolute;z-index:10;pointer-events:none;transform:translate(0,0);font-size:1rem;line-height:1;margin:-.5rem 0 0 -.5rem;filter:drop-shadow(0 0 .25rem rgba(255,210,90,.8))}.augFly img{width:1.5rem;height:1.5rem;object-fit:contain}.augFly .coin{width:1rem;height:1rem}
.augGot{animation:augGot .45s ease-out}
@keyframes augGot{0%{filter:brightness(1)}35%{filter:brightness(1.8) drop-shadow(0 0 .5rem #ffd84a)}100%{filter:brightness(1)}}
.augIc.fired{animation:augIcFire .9s ease-out both}
@keyframes augIcFire{0%{filter:brightness(2.2) drop-shadow(0 0 .5rem var(--c));scale:1.3}40%{filter:brightness(1.5) drop-shadow(0 0 .375rem var(--c));scale:1.08}100%{filter:none;scale:1}}
@media (max-width:760px){.augBanner,.augBanner.foe{top:calc(var(--topH) + 8.75rem);padding:.25rem .875rem .25rem .375rem;gap:.375rem}.augBanIc{width:2rem;height:2rem}.augBanTx b{font-size:1rem}.augChip{font-size:.5625rem}.augChip.big{font-size:.6875rem}.augPays{right:.5rem;left:.5rem;align-items:center;bottom:calc(var(--shopH) + .75rem)}}
@media (prefers-reduced-motion:reduce){.augChip,.augBanner,.augPay,.augIc.fired,.augGot{animation-duration:.01s!important}.augBanner::after{display:none}.augChip,.augBanner{animation:augMomFade 1.5s linear forwards!important}}
@keyframes augMomFade{0%,80%{opacity:1}100%{opacity:0}}
.augChip.red,.augBanner.red{animation-name:augMomFade}.augBanner.red::after{display:none}
/* 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.rsAugBest{grid-column:1/-1;flex-direction:row;gap:.75rem;border-top:1px solid rgba(255,214,120,.18);padding:.375rem .75rem}.rsCell.rsAugBest::before{display:none}   /* the run's best augment moment (result.js rsAugBest) */
.rsAb{display:flex;align-items:center;gap:.625rem;min-width:0}.rsAbIc{display:flex;width:2.25rem;height:2.25rem;flex:none;align-items:center;justify-content:center;font-size:1.25rem;filter:drop-shadow(0 0 .375rem var(--c))}.rsAbIc .augImg{width:100%;height:100%;object-fit:contain}
.rsAbT{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0}.rsAbT small{font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}.rsAbT b{font:400 1rem var(--disp);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsAugBest.prismatic .rsAbT small{background:var(--prism);-webkit-background-clip:text;background-clip:text;color:transparent}
.rsAbW{display:flex;flex-direction:column;align-items:flex-start;font:400 .9375rem var(--disp);color:var(--gold);line-height:1.15}.rsAbW small{font:500 .625rem var(--body);color:var(--dim,#9aa4c8)}
.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}
.rsBtn.share{min-width:0;padding:.75rem 1.125rem;background:linear-gradient(180deg,#3a2a66,#1d1440);border-color:#c9a0ff;color:#f1e6ff}   /* SAVE CARD (src/ui/sharecard.js) */
.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:8rem}
.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}
/* the Captain Recruitment Encounter (ui.js renderRecruit): the augment picker's look, the enemies as smaller cards */
.recOv{background:radial-gradient(ellipse at 50% 45%,rgba(16,22,48,.82),rgba(5,7,14,.95) 72%)}   /* darker than an augment offer's: the board behind isn't needed while the encounter is up, and the log ticker under it read through on a phone */
.recCard{width:10.5rem;min-height:13rem;cursor:default}
.recCard img{width:5.5rem;height:5.5rem;object-fit:cover;border-radius:.5rem;box-shadow:0 .25rem .75rem rgba(0,0,0,.5)}
.recCard.ko{border-color:var(--good);box-shadow:0 0 1.25rem rgba(53,184,99,.35)}   /* a K.O.'d enemy ("ko": "beat" is the mission's HUD, a wide grid, and took these cards over) */
.recCard.gone{opacity:.55;filter:grayscale(.6)}
.recClock{min-width:2.5rem;font-variant-numeric:tabular-nums;color:var(--gold);align-self:center}
.recClock:empty{display:none}   /* nothing to count (the result): out of the row, so Continue stands in its middle (the owner, 2026-10-12: it sat off centre beside the empty clock) */
.recNote{margin:0;max-width:34rem;font-size:.75rem;color:var(--dim);text-align:center}
.recOv.reveal{background:radial-gradient(ellipse at 50% 45%,rgba(16,22,48,.45),rgba(5,7,14,.7) 72%);pointer-events:none}   /* the fight's count-in: the enemies revealed over the stage, the Captain's arrival showing through */
.recOv.reveal .recClock{font-size:2rem;font-family:var(--disp)}
/* a recruit waiting for bench room (ui.js renderRecruitWait): over the planning board, under the clock row */
.recWait{position:absolute;left:50%;top:calc(var(--topH) + 3.25rem);transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;gap:.375rem;padding:.5rem .75rem;max-width:min(30rem,calc(100% - 2rem));font-size:.75rem}
.recWait>b{font-family:var(--disp);font-weight:400;color:var(--gold);letter-spacing:.04rem}
.recWait .rw{display:flex;align-items:center;gap:.5rem}
.recWait .rw img{width:2.25rem;height:2.25rem;border-radius:.375rem;object-fit:cover}
.recWait .rw span{flex:1;display:flex;flex-direction:column}.recWait .rw small{color:var(--dim)}
.recWait .rw button{padding:.25rem .625rem;font-size:.75rem}
.recWait .rwNote{color:var(--dim)}.recWait .rwNote b{color:var(--gold);font-weight:700}
.recWait{animation:recWaitIn .5s ease-out both}   /* the card asks for a decision: it comes in with a pulse, its Take lit while there is room, and turns urgent in the planning's last seconds */
@keyframes recWaitIn{0%{opacity:0;transform:translate(-50%,-.5rem) scale(.96)}60%{opacity:1;transform:translate(-50%,0) scale(1.02)}100%{transform:translate(-50%,0) scale(1)}}
.recWait .rw.room button.primary{box-shadow:0 0 .75rem rgba(255,201,74,.55)}
.recWait .rw.room small{color:var(--good)}
.recWait.urgent{border-color:var(--foe);box-shadow:0 0 1rem rgba(255,80,60,.45);animation:recWaitUrgent 1s ease-in-out infinite}
.recWait.urgent .rwNote b{color:var(--foe)}
#augOv:not([hidden]) ~ .recWait{z-index:16}   /* an augment offer and a waiting recruit in one planning: the card stays above the offer's dim, which opens below it (ui.js renderRecruitWait) */
#recOv:not([hidden]) ~ .recWait{display:none}   /* while the recruitment's own result still shows (it says the same), the card waits behind it */
@keyframes recWaitUrgent{50%{box-shadow:0 0 1.75rem rgba(255,80,60,.7)}}
@media (prefers-reduced-motion:reduce){.recWait,.recWait.urgent{animation:none}}
@media (max-width:760px){.recCard{width:7.5rem;min-height:10rem}.recCard img{width:4rem;height:4rem}.recWait{top:calc(var(--topH) + 6rem)}}
.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:6rem;height:5.25rem;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:var(--pillTop,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}
.augPillT{margin-left:.5rem;font-family:var(--disp);color:var(--gold)}.augPillT.low{color:var(--foe)}   /* the seconds left to pick, on the pill too */
.augClock{margin:.375rem 0 0;font-family:var(--disp);font-size:1.0625rem;letter-spacing:.06em;color:var(--gold)}.augClock.low{color:var(--foe)}   /* the picker's own clock: the planning's seconds left, the time there is to pick (the owner, 2026-10-16) */
#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}}
/* the pick screen sells the card (2026-10-17, augment moments; ui.js augReachOf / augReachHover): what it changes on my
   board, the Prismatic shimmer, the offer's reveal in its tier's light, and the veil thinning while a card lights fighters */
.augReach{display:block;padding-top:.25rem;font:500 .75rem var(--body);color:var(--c)}.augCard.prismatic .augReach{color:#e8a0ff}
.augCard.prismatic::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.16) 46%,rgba(232,160,255,.22) 50%,rgba(143,240,255,.16) 54%,transparent 65%);background-size:250% 100%;animation:augShimmer 2.8s ease-in-out infinite;mix-blend-mode:screen}
@keyframes augShimmer{0%{background-position:120% 0}60%,100%{background-position:-120% 0}}
.augOv.reveal::before{content:"";position:fixed;left:50%;top:38%;width:min(60rem,140vw);height:28rem;translate:-50% -50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--rv,#c8d0e0) 38%,transparent),transparent);animation:augReveal 1.1s ease-out forwards}
.augOv.reveal.gold{--rv:#ffc94a}.augOv.reveal.prismatic{--rv:#e8a0ff}
@keyframes augReveal{0%{opacity:0;scale:.6}30%{opacity:1;scale:1.05}100%{opacity:0;scale:1.2}}
.augOv.peek{background:radial-gradient(ellipse at 50% 45%,rgba(16,22,48,.22),rgba(5,7,14,.55) 72%);transition:background .2s}
.augOv.red.reveal::before,.augOv.red .augCard.prismatic::after{animation:none;display:none}
@media (prefers-reduced-motion:reduce){.augOv.reveal::before{display:none}.augCard.prismatic::after{animation:none;opacity:.5;background-position:50% 0}}
@media (max-width:760px){.augReach{font-size:.6875rem;padding-top:.125rem}}
.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, centred (2026-10-14, the owner): as wide as leaves the menu's room on
     both sides (⚙️ and 🏁, or ⚙️ alone most of the time), so it never runs under ⚙️. 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:50%;transform:translateX(-50%);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% - 10rem)}
  #app:has(#rankBtn[hidden]) .roundbar{max-width:calc(100% - 2 * (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}.riBadge{width:.6rem;height:.6rem;right:-.2rem;top:-.2rem;font-size:.35rem}.riBadge img{width:.5rem;height:.5rem}
  .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;max-width:none;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}
  /* the traits: compact chips (the count's hex and the icon; a tap opens the card with the name and breakpoints) that wrap
     rather than scroll sideways, the active ones only, then "+N" for the rest (ui.js; the owner, 2026-10-11: too many
     sideways scrolls on a phone) */
  .traits{flex-direction:row;flex-wrap:wrap;width:auto;max-width:none;left:.625rem;right:.625rem;top:calc(var(--topH) + 2.875rem);max-height:none;overflow:visible;padding-bottom:.125rem}   /* (max-width none: the desktop column's 11rem left the strip half the screen, two chips a row, 2026-10-14) */
  .trait{flex:none;grid-template-columns:1.625rem auto;gap:.1875rem;padding:.125rem .3125rem .125rem .1875rem;font-size:.6875rem}
  .trait .tn{display:none}.traits:not(.all) .trait:not(.on):not(.more){display:none}
  .trait.more{display:flex;align-items:center;justify-content:center;min-width:2rem;height:1.75rem;padding:0 .4375rem;font-family:var(--disp);font-size:.75rem;color:var(--dim)}
  .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}
  .tacBtn{bottom:calc(var(--shopH) + .5rem);left:.375rem;padding:.25rem .5rem}.tacBtn .tx{display:none}   /* a phone: the target alone */
  .tacPanel{bottom:calc(var(--shopH) + 2.75rem);left:.375rem;width:calc(100vw - .75rem);max-height:30%}
  .players.dmgTab.bdWide{width:min(18rem,calc(100vw - .5rem))}.players.dmgTab.bdWide .dmgRow .dn{display:block}.players.dmgTab.bdWide .dmgBody{flex:1;width:auto}   /* the breakdown open: room to read it, the meter's names back */
  .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}
  .insStats{grid-template-columns:repeat(4,1fr)}.insStats .stat{font-size:.5rem;padding:.1875rem .0625rem;letter-spacing:0}.insStats .stat .sd{font-size:.5625rem;min-height:.6875rem}.insMode{margin-top:.25rem;font-size:.625rem}.insBreak{font-size:.6875rem;padding:.3125rem .4375rem}   /* Inspector V2: two rows of four on a phone, the breakdown in the card's own scroll */
  .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:wrap;justify-content:center;gap:.1875rem;padding:.1875rem .125rem}   /* under the cards: the remover and the items you hold, wrapping to a second row, never a sideways scroll (2026-10-11) */
  .itSlot.sel{transform:none}
  .itTip,.traitPop{width:min(15.5rem,calc(100vw - 1rem))}.itHint{width:min(17.5rem,calc(100vw - 1rem))}.ihRow p{-webkit-line-clamp:1}
  .fight{min-width:0;max-width:9.5rem;padding:.3125rem .75rem;font-size:.8125rem}
  /* (the shop's own phone rules are further down, with the phone rework of 2026-10-11) */
  .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:.6875rem;padding:0 .3125rem;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;max-height:calc(100dvh - 1.5rem);overflow-y:auto;overscroll-behavior:contain}.augBox h2{font-size:1.3125rem}.augBox>p{margin-top:-.375rem;font-size:.8125rem}   /* three cards, their rerolls and View Board are taller than a short phone: the box scrolls instead of the last card folding over the shop (2026-10-19) */
  .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}
  .recCard img{grid-area:hex;width:3.75rem;height:3.75rem}   /* the recruitment's cards are augCards too: a row like the picker's, the portrait in the hex's place (its name and status overlapped without it) */
  .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}
  /* the phone rework (the owner, 2026-10-11: "a lot is cluttered and it's hard to see the fighters"): a slimmer top and a
     shop that is one compact bar, its cards and items opening over it while you plan and tucked away in a fight (the
     toggle, ui.js, flips that until the mode changes); the camera fit reads these boxes, so the board takes what they give */
  #camTop,#musicTop{display:none}   /* both in ⚙️ Settings: Reset camera, Music */
  .clockRow{top:calc(var(--topH) + .25rem)}
  /* a Captain Clash's or a Recruitment's bar (#duelBar) or a mission's boss (#bossBar) in the clock's row: the row wraps, the
     SPECTATING / VIEWING pill keeps its line at the top right and the bar takes the screen's width under it (2026-10-14, the
     owner: the pill sat halfway down beside the bar, and the bar's names were cut short) */
  #clockRow:has(#duelBar:not([hidden])),#clockRow:has(#bossBar:not([hidden])){flex-wrap:wrap;align-items:flex-start;row-gap:.25rem}
  #clockRow:has(#duelBar:not([hidden])) #duelBar,#clockRow:has(#bossBar:not([hidden])) #bossBar{flex:1 1 100%;max-width:none}
  .traits{top:calc(var(--topH) + 2.75rem)}   /* the players' strip starts under it, however many rows its chips wrap to (--trH, ui.js: 2026-10-14, the owner: a second row ran over the strip) */
  .players{top:calc(var(--topH) + 3rem + max(var(--trH,1.875rem),1.875rem));--tile:clamp(1.375rem,calc((100vw - 3.75rem) / 8 - .6875rem),2.125rem)}
  .shopbar{gap:.125rem}
  .shopTop{height:auto;flex-wrap:wrap;padding:.25rem .375rem;gap:.125rem 0}   /* the strip wraps to two lines, the toggle at its end */
  .stIt{padding:0 .4375rem;height:1.375rem;font-size:.625rem}.stIt b{font-size:.9375rem}.stGold b{font-size:1rem}.streak .stK{display:none}   /* (the streak's icon and count alone: the strip fits two lines) */
  .lvl .xpbar{width:2.5rem}
  .stChip{height:1.5rem;margin:0 .1875rem}.stChip .cin{padding:0 .4375rem;font-size:.6875rem}.stChip .price{font-size:.625rem}
  .odds{gap:.3125rem;font-size:.625rem}
  .shopTop>.lockCell{padding:0 .4375rem}.shopTop>.fld{padding:0 .5rem}.fld b{font-size:1rem}.fld b small{font-size:.625rem}
  .shopTop .augRow{height:1.375rem;padding:0 .4375rem;gap:.1875rem;flex:1 1 auto}
  .shopToggle{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.5rem;padding:0;margin-left:auto;font-size:1rem;background:#0a1626;border:1px solid rgba(122,208,255,.45);border-radius:0;color:#bcd4ff;transition:transform .2s}
  #app.shopMin .shopMain,#app.mode-combat:not(.shopOpen) .shopMain{display:none}
  #app.shopMin .shopToggle,#app.mode-combat:not(.shopOpen) .shopToggle{transform:rotate(180deg)}
  .shopMain{flex-wrap:wrap;padding:.375rem;gap:.375rem}   /* the cards in a row, the item box under them */
  .shop{flex:1 1 100%;gap:.25rem}.card{height:5.5rem;border-radius:.5rem}.card .ctr{display:none}.card .cflag{font-size:.6875rem;padding:0 .5rem 0 .625rem;top:.25rem}.card .cn{height:1.375rem;font-size:.6875rem;padding:0 .3125rem}
  .shopRule{display:none}
  .shopSide{flex:1 1 100%;width:auto;flex-direction:row;gap:.375rem}.shopSide .stChip{height:2.125rem}.shopSide .stChip .cin{flex-direction:row;gap:.375rem;font-size:.75rem}.shopSide .stChip .cin svg{width:1rem;height:1rem}.shopSide .stChip .price{font-size:.6875rem}   /* a phone: the two side by side over the cards */
  .itemBox{flex:1 1 100%;width:auto;flex-direction:row;align-items:center;gap:.375rem}
  .itemMid{flex:1;justify-content:flex-start}
  .itemBench{--slot:1.375rem;grid-template-columns:repeat(10,var(--slot));gap:.1875rem}.itSlot.tool{height:1.25rem;font-size:.5625rem}   /* (1.5rem ran the ITEM BENCH band past the panel's edge at 375px) */
  .shopTop::before{content:"";order:1;flex-basis:100%;height:0}   /* a phone: the strip's two lines always break at the same place (the level, the lock, the gold, the streak and the toggle at the line's end; then the odds, the fielded count and the augments) */
  .shopTop>.odds,.shopTop>.fld,.shopTop>.augRow,.shopTop>.sellTag,.shopTop>.sellBtn,.shopTop>.infoBtn{order:2}
  .shopTop>.streak{border-right:0}
  .itemBand{height:auto;flex-direction:column;align-items:flex-end;gap:0;padding:0 .375rem;border-top:0;border-left:.125rem solid var(--gold);border-radius:0;background:none;font-size:.6875rem;line-height:1.1}
}
@media (max-width:380px){.shopTop .odds .stK{display:none}}   /* the narrowest phones: the odds' dots alone, so the second line keeps the augments */
/* 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 */
  /* a slim shop (about 100px) so the board gets the height: icon traits, cards without their trait lines, no empty item slots */
  .trait .tn{display:none}
  .shop .card{height:4.5rem}.card .ctr{display:none}.card .cn{height:1.375rem;font-size:.6875rem}.itemBench{--slot:1.5rem}
  .shopTop{height:2rem;padding:0 .5rem}.stIt{height:1.25rem;padding:0 .5rem}.stChip{height:1.375rem;margin:0 .125rem}.streak .stK,.odds .stK{display:none}.itSlot.tool .lbl{display:none}.shopTop .augIc{width:1.6875rem;height:1.5rem}   /* the strip's words trimmed so it fits the width at 12px to the rem; the augments their usual size in its 2rem */
}
/* a phone either way up: the fighters' bars carry no name but the one you hold (the inspect card names it) and smaller
   bars and stars, so eight fighters on a phone's board don't run into each other (the owner's mobile pass, 2026-10-11) */
@media (max-width:760px),(max-height:520px){
  .ub .ubF{width:.75rem;height:.75rem;font-size:.5rem}.ub .ubFx{padding:.3125rem;margin:-.3125rem 0 0 -.125rem}   /* Inspector V2: the markers smaller, their tap area wider */
  .ub{width:3.25rem;--stH:.5rem}.ub.s2{--stH:.625rem}.ub.s3{--stH:.75rem}.ub .nm{display:none}.ub.sel .nm{display:block;font-size:.625rem}
  .ub .b{height:.3125rem}.ub .st{font-size:.5rem;height:.5rem}.ub.s2 .st{font-size:.625rem;height:.625rem}.ub.s3 .st{font-size:.75rem;height:.75rem;letter-spacing:1px}
  .ub .kr span{display:none}.ub .ubI{width:1rem;height:1rem}
}
@media (max-height:620px) and (min-width:761px){.shop .card{height:8rem}.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)}
  .forgeInv{animation:none}.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,#xpCol,#goldCell,#streakBox,#fieldN{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) */
/* the boss's card in the clock row: its portrait (a little larger than the card, in the gold outline the fight's panel
   wears), its full title, the phase it is in and its health in its own purple; quieter while the strikes' ring has the
   stage (.calm), pulsing once at a new phase (.pulse) */
.bossBar{display:flex;align-items:center;gap:.625rem;padding:.25rem .875rem .25rem .375rem;border-color:#7a3fc0;width:min(27rem,calc(100vw - 1.5rem));transition:opacity .35s}
.bossBar.calm{opacity:.8}
.bossBar .av{width:2.875rem;height:2.875rem;margin:-.4375rem 0;border-radius:.5rem;overflow:hidden;border:.09375rem solid #e2a043;flex:none;background:#10152a;box-shadow:0 0 .5rem rgba(226,160,67,.4),0 .125rem .375rem rgba(0,0,0,.5)}
.bossBar .av img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;display:block}
.bossBar .who{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0;line-height:1}
.bossBar .who b{font-family:var(--disp);font-weight:400;font-size:1rem;letter-spacing:.02em;color:#e4c4ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bossRow{display:flex;align-items:center;gap:.5rem;min-width:0}
.bossTag{flex:none;font-family:var(--disp);font-size:.5625rem;letter-spacing:.08em;line-height:1;color:#d2b4ff;white-space:nowrap;padding:.1875rem .375rem;border-radius:.3125rem;background:rgba(122,63,192,.28);border:1px solid rgba(176,96,255,.5)}
.bossHp{flex:1;min-width:3rem;height:.625rem;border-radius:.3125rem;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}
.bossHpN{flex:none;font-style:normal;font-family:var(--disp);font-size:.75rem;color:#e4c4ff;font-variant-numeric:tabular-nums;white-space:nowrap}
.bossHpN small{font-size:.5625rem;color:#a58cd6;margin-right:.1875rem;letter-spacing:.06em}
.bossBar.pulse{animation:bossFrame .9s ease-out}.bossBar.pulse .av{animation:bossPulse .9s ease-out}
@keyframes bossFrame{0%{opacity:1}30%{opacity:1;border-color:#e2a043;box-shadow:0 0 1.25rem rgba(176,96,255,.85)}}
@keyframes bossPulse{30%{transform:scale(1.14);box-shadow:0 0 1.125rem rgba(255,201,74,.95)}}
.bossBar .clock{font-family:var(--disp);font-size:.9375rem;min-width:2.25rem;text-align:right;font-variant-numeric:tabular-nums}
/* the fight's panel, in the shop bar's place (the owner's mock-up, 2026-10-09): one gold-framed plate with chamfered
   corners holding three cards: your Captain's portrait and health; the strikes landed (pips) over the momentum bar; the
   action's icon and word with its chevrons (ui/beat.js: the ring closing during the strikes, your beam's push in the
   finale). The pads under them on a touch screen. --bc: the chamfer */
.beat{--bc:.875rem;position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"side mid right" "pads pads pads";gap:.5rem;width:min(58rem,calc(100vw - 1.5rem));margin:0 auto;padding:.5625rem;transition:opacity .3s;filter:drop-shadow(0 .5rem 1.25rem rgba(0,0,0,.55))}
.beat::before,.beat::after{content:"";position:absolute;z-index:-1;clip-path:polygon(var(--bc) 0,calc(100% - var(--bc)) 0,100% var(--bc),100% calc(100% - var(--bc)),calc(100% - var(--bc)) 100%,var(--bc) 100%,0 calc(100% - var(--bc)),0 var(--bc))}   /* the plate drawn behind the cards (not a clip on the panel itself, so a passing line can rise above it) */
.beat::before{inset:0;background:linear-gradient(180deg,#f3d27a,#b8862c 45%,#7d5a1c)}   /* the gold frame */
.beat::after{inset:.125rem;background:linear-gradient(180deg,rgba(20,27,52,.97),rgba(9,12,26,.97))}   /* its dark plate, a hair inside it */
.beat.dim{opacity:0;pointer-events:none}
.beatSide,.beatMid{border-radius:.625rem;border:1px solid #2a3560;background:linear-gradient(180deg,rgba(32,42,78,.55),rgba(12,16,34,.75));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
/* your Captain and its health */
.beatSide{grid-area:side;display:flex;gap:.625rem;align-items:center;padding:.5rem .75rem .5rem .5rem}
.beatAv{width:4.75rem;height:4.75rem;flex:none;border-radius:.5rem;overflow:hidden;border:.125rem solid #e2b04a;background:#10152a;box-shadow:0 0 .75rem rgba(255,201,74,.35)}
.beatAv img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.beatGauge{position:relative;width:.75rem;height:4.75rem;flex:none;border-radius:.375rem;background:#0a0d18;border:1px solid #2a3560;overflow:hidden}
.beatGauge i{position:absolute;left:0;right:0;bottom:0;height:100%;background:linear-gradient(180deg,#8dffb4,#22a35c);box-shadow:0 0 .5rem rgba(94,224,138,.6);transition:height .15s,background .2s}
.beatSide.low .beatGauge i{background:linear-gradient(180deg,#ffd27a,#d9822b)}.beatSide.crit .beatGauge i{background:linear-gradient(180deg,#ff9a8a,#d93a2b)}
.beatHpTx{display:flex;flex-direction:column;line-height:1;min-width:2.75rem}
.beatHpTx small{font-family:var(--disp);font-size:.6875rem;letter-spacing:.06em;color:var(--good)}
.beatHpTx b{font-family:var(--disp);font-weight:400;font-size:1.625rem;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 .125rem .25rem #000}
.beatHpTx em{font-style:normal;font-family:var(--disp);font-size:.8125rem;color:#8fb0ff}
.beatSide.low .beatHpTx b{color:#ffd27a}.beatSide.crit .beatHpTx b{color:#ff8a7a}
/* the strikes landed (pips: landed ones lit, the next ringed) 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;align-items:stretch;gap:.4375rem;padding:.5rem 1.125rem;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:.75rem}
.beatPips i{position:relative;width:1.25rem;height:1.25rem;border-radius:50%;border:.125rem solid #4a5a8e;background:#0c1124;transition:background .2s,box-shadow .2s,border-color .2s}
.beatPips i.on{background:radial-gradient(circle at 40% 35%,#e6fbff,#7ad0ff 45%,#2a8fe0);border-color:#bff0ff;box-shadow:0 0 .625rem rgba(122,208,255,.95)}
.beatPips i.next{border-color:#7ad0ff;box-shadow:0 0 .5rem rgba(122,208,255,.55);animation:beatNext 1.2s ease-in-out infinite}
.beatPips i.next::after{content:"";position:absolute;inset:.1875rem;border-radius:50%;background:#7ad0ff;opacity:.7}
@keyframes beatNext{50%{box-shadow:0 0 .875rem rgba(122,208,255,.95)}}
.beatMom{position:relative;height:.875rem;border-radius:.4375rem;background:#070a16;border:1px solid #2a3560;overflow:hidden}
.beatMom i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:.4375rem;background:linear-gradient(90deg,#1f5fe0,#3f8dff 60%,#8fe0ff);box-shadow:0 0 .625rem rgba(63,141,255,.7);transition:width .25s}
.beatMom.full{border-color:var(--gold);box-shadow:0 0 .75rem rgba(255,201,74,.9)}.beatMom.full i{background:linear-gradient(90deg,#c9861a,#ffe27a)}
.beatMomLb{text-align:center;font-family:var(--disp);font-size:.5625rem;letter-spacing:.32em;color:#9fb0d8;line-height:1}
.beatNote{position:absolute;left:0;right:0;top:-2.25rem;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:35%;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)}}
/* what to do now: its icon in a gold ring, its word, and the chevrons (ui/beat.js beatChev) */
.beatSide.right{grid-area:right;gap:.75rem;padding:.5rem 1.25rem .5rem .625rem;min-width:13rem}
.beatIco{width:3.75rem;height:3.75rem;flex:none;display:grid;place-items:center;border-radius:50%;color:#ffd36a;border:.1875rem solid #e2b04a;background:radial-gradient(circle at 50% 40%,#25305a,#0b0f22 70%);box-shadow:0 0 .875rem rgba(255,201,74,.45),inset 0 0 .5rem rgba(0,0,0,.6)}
.beatIco svg{width:1.875rem;height:1.875rem;filter:drop-shadow(0 .0625rem .125rem rgba(0,0,0,.7))}
.beatIco .icMash,.beatSide.right.mash .beatIco .icStrike{display:none}.beatSide.right.mash .beatIco .icMash{display:block}
.beatSide.right.idle .beatIco{filter:saturate(.4) brightness(.8)}
.beatAct{display:flex;flex-direction:column;gap:.375rem;min-width:0}
.beatPhase{font-family:var(--disp);font-weight:400;font-size:2rem;line-height:1;letter-spacing:.02em;color:var(--gold);background:linear-gradient(180deg,#fff1b8,#ffc94a 55%,#e09a1e);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 .125rem .125rem rgba(0,0,0,.7));white-space:nowrap}
.beatChev{display:flex;gap:.1875rem}
.beatChev i{width:.875rem;height:1rem;background:#2c3866;clip-path:polygon(0 0,50% 0,100% 50%,50% 100%,0 100%,50% 50%);transition:background .1s}
.beatChev i.on{background:#c9a24a}
.beatChev.open i.on{background:#ffc94a;filter:drop-shadow(0 0 .25rem rgba(255,201,74,.9))}
.beatChev.sweet i.on{background:#fff6d0}
.beatChev.mash i.on{background:#7ad0ff}
.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}
.craftTime{font-size:.6875rem;color:var(--dim);white-space:nowrap}.craftOv.done .craftTime,.craftOv.done #craftSkip{display:none}.craftTime.warn,.fiTime.warn{color:#ffb35a}
/* Perfect Forge V2's invitation (ui/craft.js): a small card over the far half of the board (empty while planning; on a phone over the shop), never over the bench or an offer (z-index under .augOv and the crafting card) */
.forgeInv{position:absolute;left:50%;top:calc(var(--topH) + 5.25rem);transform:translateX(-50%);z-index:7;width:min(21rem,calc(100% - 2rem));display:flex;flex-direction:column;gap:.375rem;padding:.625rem .75rem;border-color:var(--gold);box-shadow:0 0 1.25rem rgba(255,201,74,.28);animation:forgeIn .18s ease-out}
@keyframes forgeIn{from{translate:0 .5rem}to{translate:0 0}}   /* (no fade: the card must show even on a frame-starved page) */
.fiHead b{font-family:var(--disp);font-weight:400;font-size:.75rem;letter-spacing:.08em;color:var(--gold)}
.fiItem{display:flex;align-items:center;gap:.5rem;min-width:0}.fiItem .itIc,.fiItem img{width:2.25rem;height:2.25rem;flex:none}
.fiTxt{display:flex;flex-direction:column;min-width:0}.fiTxt b{font-size:.875rem}.fiTxt small{font-size:.6875rem;color:var(--dim);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fiRule,.fiTime{margin:0;font-size:.75rem}.fiRule b{color:var(--gold)}.fiTime{color:var(--dim)}
.fiBtns{display:flex;gap:.5rem}.fiBtns button{flex:1;padding:.4375rem .5rem;font-size:.8125rem}.fiBtns button:disabled{opacity:.45;cursor:not-allowed}
.fiBtns button:focus-visible{outline:.125rem solid var(--gold);outline-offset:.125rem}
#app.mission .forgeInv,#app.duel .forgeInv{display:none!important}
@media (max-width:760px){.forgeInv{top:auto;bottom:calc(var(--shopH) + .5rem);padding:.5rem .625rem}.fiTxt small{-webkit-line-clamp:1}}   /* on a phone the card sits over the shop: the board's far half is under the players' strip there */
/* 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;display:flex;align-items:center;gap:.5rem;padding:.5625rem 1rem;font-size:.9375rem;color:#fff;background:linear-gradient(180deg,rgba(26,33,62,.95),rgba(10,13,28,.95));border:1px solid #c99a3a;border-radius:.625rem;box-shadow:0 .25rem .75rem rgba(0,0,0,.45)}
.beatSkip:hover{border-color:var(--gold)}
.beatSkip.giveUp::before{content:"";width:1rem;height:1rem;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1h1.5v14H3zM5.5 2h8l-2 3.5 2 3.5h-8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1h1.5v14H3zM5.5 2h8l-2 3.5 2 3.5h-8z'/%3E%3C/svg%3E") center/contain no-repeat}   /* a flag, drawn (no emoji) */
.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)}
.beatCard b em{font-style:normal;color:var(--fg)}   /* the practice's seconds left (beat.js beatFrame) */
.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}
/* 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.platinum{background:radial-gradient(circle at 35% 30%,#ffffff,#d9f4ff 50%,#7fb8d6)}   /* every strike PERFECT */
.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;gap:.5rem}.bossBar .av{width:2.375rem;height:2.375rem;margin:-.3125rem 0}.bossBar .who b{font-size:.875rem}.bossRow{gap:.375rem}
  .beat{width:calc(100vw - 1rem);gap:.3125rem;padding:.375rem;--bc:.5rem}
  .beatSide{gap:.375rem;padding:.3125rem .4375rem .3125rem .3125rem}.beatAv{width:2.75rem;height:2.75rem}.beatGauge{width:.5rem;height:2.75rem}
  .beatHpTx{min-width:1.75rem}.beatHpTx b{font-size:1.125rem}.beatHpTx small,.beatHpTx em{font-size:.5625rem}
  .beatMid{padding:.375rem .5rem;gap:.3125rem}.beatPips{gap:.4375rem}.beatPips i{width:.875rem;height:.875rem}.beatMomLb{letter-spacing:.2em;font-size:.5rem}
  .beatSide.right{min-width:0;gap:.375rem;padding:.3125rem .5rem .3125rem .3125rem}.beatIco{width:2.25rem;height:2.25rem;border-width:.125rem}.beatIco svg{width:1.25rem;height:1.25rem}
  .beatPhase{font-size:1rem}.beatChev i{width:.5625rem;height:.6875rem}
  .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}
  .forgeInv{top:auto;bottom:calc(var(--shopH) + .5rem);padding:.5rem .625rem}.fiTxt small{-webkit-line-clamp:1}
}
@media (max-height:520px) and (min-width:761px){.beatSide.right{min-width:0}.beatAv,.beatGauge{height:3rem}.beatAv{width:3rem}.beatIco{width:2.75rem;height:2.75rem}.beatPhase{font-size:1.375rem}}
@media (prefers-reduced-motion:reduce){.bub.shout span{animation:none}.beatBig.show{animation:countFade var(--ms,900ms) both}.mMedal{animation:none}.bossBar.pulse,.bossBar.pulse .av,.beatPips i.next{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);min-width:0;overflow:hidden;text-overflow:ellipsis}.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}
/* the Captain Recruitment's fight in the Clash's bar (ui/duel.js duelRecFrame): the Awakening's meter under your Ki, the
   enemies in order where the damage score stands */
.dAwk{position:relative;display:block;height:.75rem;margin-top:.1875rem;border-radius:.375rem;background:#0a0d18;border:1px solid rgba(255,214,120,.35);overflow:hidden}
.dAwk i{position:absolute;top:0;bottom:0;left:0;width:0;background:linear-gradient(90deg,#7a3cff,#ff9a4a);transition:width .15s}
.dAwk small{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:.5rem;letter-spacing:.06rem;color:#fff;text-shadow:0 1px 2px #000}
.dAwk.ready{border-color:#fff;box-shadow:0 0 .75rem rgba(255,190,120,.95);animation:dUlt .4s ease-in-out infinite alternate}.dAwk.ready i{background:linear-gradient(90deg,#ffb35a,#ffffff)}
.dAwk.used{opacity:.6}.dAwk.used i{background:#6c5a8a}
.dRec{display:flex;align-items:center;gap:.25rem;font-family:var(--disp)}
.dRec i{position:relative;width:1.375rem;height:1.375rem;border-radius:50%;overflow:hidden;border:2px solid var(--line);background:#0a0d18}
.dRec i img{width:100%;height:100%;object-fit:cover}
.dRec i.now{border-color:#ff6a5a;box-shadow:0 0 .375rem rgba(255,106,90,.8)}.dRec i.next{opacity:.55}.dRec i.away{opacity:.35;filter:grayscale(1)}
.dRec i.got{border-color:var(--gold)}.dRec i.got b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:var(--gold);font-weight:400;font-size:.75rem}
.dRec small{font-size:.5rem;letter-spacing:.06rem;color:var(--dim);margin-left:.125rem}
.duelSeq.ult.own,.duelSeq.ult.own.defend{border-color:#ffb35a;box-shadow:0 0 1.5rem rgba(255,179,90,.6)}.duelSeq.ult.own b,.duelSeq.ult.own.defend b{color:#ffe0b0}
@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: one controller (the owner's design of 2026-10-15, chosen over six rounds of
   options): the moves printed on its left, the four arrow keys in the middle as a keyboard's, the Ki screen on its right
   (ui/duel.js duelCtlSetup / duelKiFrame); a Clash's stage rule in a line over it. Every Clash and the recruitment */
.duelCtl{display:flex;flex-direction:column;align-items:center;gap:.375rem;max-width:calc(100vw - 1.5rem);margin:0 auto}
.dRule{font-size:.6875rem;color:#dfe5ff;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}
.dCtl{display:flex;align-items:center;gap:1.25rem;min-height:10rem;padding:.75rem 3rem .75rem 3.375rem;box-sizing:border-box;border-radius:5rem;background:radial-gradient(ellipse at 30% 20%,#2a3458,#0d1226 70%);border:2px solid #4a5a8a;box-shadow:0 .5rem 1.5rem #000c,inset 0 2px 0 #ffffff14}
.dSeam{width:1px;align-self:stretch;margin:1.125rem 0;background:linear-gradient(transparent,#4a5a8a 25%,#4a5a8a 75%,transparent)}
/* the move list, printed on the controller (no box of its own) */
.dMoves{width:19.75rem;flex:none}
.dMoves h5{margin:0 0 .1875rem;font:400 .6875rem var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:.9}
.dMv{display:grid;grid-template-columns:1.75rem 3.875rem 1fr;gap:.375rem;align-items:center;padding:.1875rem 0;font-size:.6875rem;color:#c9d0f0;border-top:1px solid #ffffff12}
.dMv:first-of-type{border-top:0}.dMv span{font:400 .8125rem var(--disp);text-transform:uppercase;color:var(--c)}
.dMv.q,.dCap.q{--c:#ffd24a}.dMv.h,.dCap.h{--c:#ff6380}.dMv.g,.dCap.g{--c:#80dfff}.dMv.cb{--c:#fff}
.dCap{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.375rem;box-sizing:border-box;border-radius:.375rem;background:linear-gradient(#26304e,#141a2e);border:1px solid var(--c,#fff);box-shadow:0 2px 0 #05070e;color:var(--c,#fff);font:400 .875rem/1 var(--disp);font-style:normal}
.dMv.cb .dCap{font-size:.6875rem}
/* the four keys: ↑ over ← ↓ →, each in its colour, raised; a key held sinks */
.dPads{display:grid;grid-template-columns:repeat(3,4.25rem);grid-template-rows:repeat(2,3.875rem);gap:.375rem;flex:none}
.dPad[data-lane="0"]{grid-area:2/1;--c:#ffd24a}.dPad[data-lane="1"]{grid-area:2/2;--c:#80dfff}.dPad[data-lane="2"]{grid-area:1/2;--c:#ffa64a}.dPad[data-lane="3"]{grid-area:2/3;--c:#ff6380}
.dPad{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.0625rem;padding:.25rem;border-radius:.625rem;background:linear-gradient(#26304e,#141a2e);border:1px solid var(--c);box-shadow:0 .3125rem 0 #05070e,0 .4375rem .875rem #000a;color:var(--c);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:opacity .1s,transform .2s}
.dPad b{font-size:1.625rem;line-height:1;color:var(--c)}.dPad small{font-family:var(--disp);font-weight:400;font-size:.625rem;letter-spacing:.04rem;line-height:1.05;text-transform:uppercase;text-align:center;color:var(--c);max-width:100%;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.dPad.ki small{font-size:.5625rem;letter-spacing:0}   /* (↑ names its move: CANNONBALL THROW, GUM-GUM PISTOL fit the key in two lines) */
.dPad.on{background:linear-gradient(#34477a,#1c2a4e);transform:translateY(.25rem);box-shadow:0 .0625rem 0 #05070e,0 0 .75rem var(--c)}
.dPad.held{background:#1e4f9a;border-color:#9fdcff;box-shadow:0 0 .75rem rgba(159,220,255,.7)}
/* the Ki screen: FILL KI on top (what fills it, in Rajdhani: the owner's pick), the Ki as a number and a beam, the
   spotlight on what ↑ does now and the next move's mark under it, the meter under all (the Awakening; a Clash's Ultimate) */
.dKiScr{width:20rem;flex:none;box-sizing:border-box;padding:.4375rem .6875rem;border-radius:.75rem;background:#050a12;border:2px solid #000;box-shadow:inset 0 0 .875rem #ffb51a26,0 0 0 1px #4a5a8a;display:flex;flex-direction:column;gap:.1875rem;font-size:.6875rem;color:#dfe5ff;transition:box-shadow .3s}
.dKiScr.ready{box-shadow:inset 0 0 .875rem #ffb51a40,0 0 0 1px var(--gold),0 0 1rem #ffc94a88}
.dFill{display:flex;align-items:center;justify-content:space-between;gap:.375rem;margin:-.4375rem -.6875rem .25rem;padding:.3125rem .6875rem;background:#0d2216;border-bottom:1px solid #5ee08a55;border-radius:.625rem .625rem 0 0}
.dFh{font:700 .71875rem var(--tech);letter-spacing:.08em;text-transform:uppercase;color:#5ee08a;white-space:nowrap}
.dFi{display:flex;align-items:center;gap:.3125rem;white-space:nowrap}
.dFi .dCap{width:1rem;height:.9375rem;font-size:.6875rem;border-radius:.25rem}
.dFl{font:700 .71875rem/1 var(--tech);letter-spacing:.08em;text-transform:uppercase;color:#c9d0f0}
.dFi b{font:700 .9375rem/1 var(--tech);color:#5ee08a}
.dKiMain{display:flex;gap:.625rem;align-items:flex-start}
.dKiNum{display:flex;flex-direction:column;align-items:center;line-height:1;min-width:2.75rem}
.dKiNum b{font:400 2.125rem/1 var(--disp);color:var(--gold);text-shadow:0 0 .625rem #ffb51a66;font-variant-numeric:tabular-nums}
.dKiNum small{font:400 .5625rem var(--disp);letter-spacing:.1em;color:var(--dim)}
.dKiBar{position:relative;flex:1;min-width:0;padding-top:.125rem}
.dBeam{position:relative;height:.875rem;border-radius:.4375rem;background:#101626;border:1px solid #2f3a5c;box-sizing:border-box}
.dBeam>i{position:absolute;top:1px;bottom:1px;left:0;width:0;border-radius:.375rem;background-repeat:no-repeat;box-shadow:0 0 .5rem var(--glow,#8aa0d0),0 0 1rem var(--glow,#8aa0d0);transition:width .12s}
.dBeam>i::after{content:"";position:absolute;left:.25rem;right:.375rem;top:50%;height:2px;margin-top:-1px;border-radius:1px;background:#fffbe8;opacity:.85}
.dKiScr.z0{--glow:#8aa0d0aa}.dKiScr.z1{--glow:#ffa64a99}.dKiScr.z2{--glow:#ffc94a99}.dKiScr.z3{--glow:#fff3c0}
.dTip{position:absolute;top:.5625rem;width:1rem;height:1rem;margin:-.5rem 0 0 -.5rem;border-radius:50%;background:radial-gradient(circle,#fff 0 20%,#ffe9a0 35%,#ffa64a00 70%);pointer-events:none;transition:left .12s}
.dTicks u{position:absolute;top:0;height:1.125rem;width:2px;background:#fff;opacity:.8;z-index:1}
.dZones{position:relative;height:1.875rem;margin-top:.3125rem}
.dSpot,.dZl{position:absolute;top:.1875rem;white-space:nowrap;text-align:center;text-transform:uppercase}
.dSpot{display:flex;flex-direction:column;align-items:center;padding:.125rem .5625rem;border-radius:.3125rem;background:#2a1806;border:1px solid var(--sc,#ffa64a);font:400 .65625rem/1.1 var(--disp);color:var(--sc,#ffa64a)}
.dSpot small{font:600 .5625rem var(--body);text-transform:none;color:#fff}
.dSpot::before{content:"";position:absolute;top:-.375rem;left:var(--ax,50%);margin-left:-.3125rem;border:.3125rem solid transparent;border-top:0;border-bottom-color:var(--sc,#ffa64a)}
.dSpot.power{--sc:#8aa0d0;background:#141c34;color:#c9d6ff}.dSpot.sig{--sc:var(--gold);background:#2a2206}
.dSpot.wide{--sc:var(--gold);background:#3a2a06;top:0}.dSpot.wide::before{display:none}
.dZl{top:.3125rem;font:400 .53125rem/1.2 var(--disp);color:#7d88aa}.dZl small{display:block;font:600 .5625rem var(--body);text-transform:none;color:#c9d0f0}
.dZl.next{color:var(--gold);overflow:hidden;text-overflow:ellipsis;text-align:left}.dZl.next small{overflow:hidden;text-overflow:ellipsis}
.dMeter{margin-top:.125rem}
.dMeterL{display:flex;justify-content:space-between;font:400 .59375rem var(--disp);text-transform:uppercase;color:var(--gold)}.dMeterL span+span{color:#ffe5a2}
.dMeterBar{position:relative;height:.625rem;margin-top:.1875rem;border-radius:.3125rem;background:#141a2e;border:1px solid #4a3a1a}
.dMeterBar>i{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:.3125rem 0 0 .3125rem;background:linear-gradient(90deg,#7c5222,#e0a032 70%,#ffd27a);transition:width .15s}
.dFlame{position:absolute;top:50%;width:1.25rem;height:1.5rem;margin:-.9375rem 0 0 -.5rem;filter:drop-shadow(0 0 .3125rem #ffb347);pointer-events:none;transition:left .15s}
.dFlame svg{display:block;width:100%;height:100%}
.dMeter.ready .dMeterBar{border-color:#ffd27a;box-shadow:0 0 .625rem #ffc94a99}.dMeter.ready .dMeterBar>i{border-radius:.3125rem}.dMeter.ready .dMeterL span:first-child{color:#fff}
.dMeter.used{opacity:.55}.dMeter.used .dFlame{display:none}.dMeter.used .dMeterBar>i{background:#6c5a3a}
@media (max-width:960px) and (min-width:761px){.dMoves,.dMoves+.dSeam{display:none}.dCtl{padding:.75rem 2rem}}   /* a narrow window: the keys and the Ki screen alone (the list would push the controller past it) */
.dPad.busy{opacity:.75}   /* (.55 read too faint over a bright arena: the owner's contrast pass, 2026-10-11) */
.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{opacity:1}}   /* a touch screen: the keys are buttons for the thumbs (the phone block below lays them out for two hands; until 2026-10-19 they were a legend only, and the owner found them dead), and a swipe on the board plays too (src/ui/duel.js duelPointer) */
/* the Clash's tutorial (src/ui/clashtut.js): the lit pad (its ring pulsing; HOLD over it for the guard), a lit bar or the
   Ki panel, the caption (an arrow, a few words, the steps' dots; a result in green or red) and Skip (the mission's) */
.dPad.tut{opacity:1;border-color:var(--gold);z-index:2;transform:translateY(-.375rem) scale(1.14);animation:tutPad .7s ease-in-out infinite alternate}   /* the lit pad grows and lifts over its row, the others dim (the owner, 2026-10-14: "zoom in to the actual button") */
.dPads:has(.dPad.tut) .dPad:not(.tut){opacity:.4;filter:saturate(.6)}
.dPad.tut{transform-origin:50% 100%}.dPad.tut:first-child{transform-origin:0 100%}.dPad.tut:last-child{transform-origin:100% 100%}   /* the end pads grow inward, never past the window's edge */
/* a pad risen to the middle of the screen (clashtut.js ctRise: its transform inline, from its own place, which it goes back to):
   over the others and the dimmed stage (#clashVeil), its glow wider; the shop panel, the pads' layer, stands over the veil
   while the tutorial runs (#app.ctOn) */
.dPad.risen{z-index:3;transform-origin:50% 50%;background:linear-gradient(180deg,rgba(40,52,96,.98),rgba(14,20,40,.98));box-shadow:0 0 0 .1875rem var(--gold),0 0 2rem .5rem rgba(255,201,74,.55)}
.dPad.risen b{color:#fff;text-shadow:0 0 .5rem rgba(255,201,74,.9)}.dPad.risen small{color:var(--gold)}
.dPad.risen::before{content:"";position:absolute;inset:-.25rem;border:.125rem solid var(--gold);border-radius:inherit;pointer-events:none;animation:ctRing 1.1s ease-out infinite}   /* a ring pulsing out of the risen arrow: look here (the owner, 2026-10-15) */
@keyframes ctRing{from{opacity:.95;transform:scale(1)}to{opacity:0;transform:scale(1.35)}}
.lessonPulse{position:relative;z-index:3;border-color:var(--gold)!important;box-shadow:0 0 0 .125rem var(--gold),0 0 1.25rem rgba(255,201,74,.6)!important}.lessonPulse::before{content:"";position:absolute;inset:-.25rem;border:.125rem solid var(--gold);border-radius:inherit;pointer-events:none;animation:ctRing 1.1s ease-out infinite}   /* a lesson's pulsing arrow (learn.js, a step's pulse): its gold rim and the ring the Clash tutorial's risen arrow has */
@media (prefers-reduced-motion:reduce){.lessonPulse::before{animation:none;opacity:.8}}
.lessonAside{opacity:0!important;transition:opacity .3s;pointer-events:none}   /* a lesson step's `aside` (learn.js): out of the way while the step points past it */
@media (prefers-reduced-motion:reduce){.dPad.risen::before{animation:none;opacity:.8}}
#clashVeil{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(ellipse at 50% 55%,rgba(4,8,20,.1),rgba(4,8,20,.3))}   /* a light dim only (the owner, 2026-10-14: "don't gray out the background so much"; .35 / .72 before) */
#clashVeil.on{opacity:1}
#app.ctOn #shopPanel{z-index:8}
@keyframes tutPad{from{box-shadow:0 0 0 .125rem var(--gold),0 0 .5rem rgba(255,201,74,.5)}to{box-shadow:0 0 0 .3125rem #ffe08a,0 0 1.5rem .25rem rgba(255,201,74,.95)}}
.dPad.tutHold::after{content:"HOLD";position:absolute;top:.1875rem;left:50%;transform:translateX(-50%);font-family:var(--disp);font-size:.5rem;letter-spacing:.12rem;color:var(--gold);text-shadow:0 0 .375rem rgba(255,201,74,.8)}
#duelBar .dSide.tut,#recKiPanel.tut,.duelSeq[data-tut]{border-radius:.5rem;animation:tutBar .7s ease-in-out infinite alternate}
.dPad[data-pop]{animation:tutPad .7s ease-in-out infinite alternate,tutPopPad .6s ease-out}   /* the first time a pad is lit: it pops with the camera's step in (clashtut.js ctPunch) */
@keyframes tutPopPad{from{transform:translateY(-.5rem) scale(1.4)}to{transform:translateY(-.375rem) scale(1.14)}}   /* its own name: the caption's tutPop below, defined later, took this one's place */
.duelSeq[data-pop]{animation:turnIn .3s cubic-bezier(.2,1.3,.4,1) both,tutPopSeq .6s ease-out}
@keyframes tutPopSeq{from{transform:translateX(-50%) scale(1.14)}to{transform:translateX(-50%)}}
@keyframes tutBar{from{box-shadow:0 0 0 .125rem var(--gold)}to{box-shadow:0 0 0 .25rem #ffe08a,0 0 1.25rem .25rem rgba(255,201,74,.85)}}
.clashCard{flex-direction:row;align-items:center;gap:1rem;padding:.75rem 1.5rem .75rem 1.125rem;text-align:left;z-index:7;top:var(--ctTop,22%);bottom:auto;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.55)}   /* under the duel bar, above the Captains' heads (clashtut.js ctPlace sets --ctTop; the owner, 2026-10-14: the instructions where people look) */
.clashCard kbd{font:inherit;font-family:var(--disp);font-size:3rem;line-height:1;color:var(--gold);text-shadow:0 0 .5rem rgba(255,201,74,.6);min-width:2.5rem;text-align:center}
.clashCard.swipe kbd::after{content:"swipe";display:block;font-family:var(--body);font-size:.5625rem;letter-spacing:.08rem;color:var(--dim);text-shadow:none;margin-top:.125rem}
.clashCard .clashTxt{display:flex;flex-direction:column;align-items:flex-start;gap:.0625rem}
.clashCard span{font-family:var(--disp);font-weight:400;font-size:1.375rem;letter-spacing:.02rem}
.clashCard small{font-size:.875rem;color:#c9d2ee}
.clashCard .clashDots{display:flex;gap:.1875rem;margin-top:.25rem}.clashCard .clashDots i{width:.3125rem;height:.3125rem;border-radius:50%;background:#3a4a7a}.clashCard .clashDots i.done{background:#7a6a3a}.clashCard .clashDots i.on{background:var(--gold)}
.clashCard.ok span{color:#9fe5a0}.clashCard.bad span{color:var(--foe)}.clashCard.ok,.clashCard.bad{animation:tutPop .35s ease-out}
@keyframes tutPop{from{transform:translateX(-50%) scale(1.06)}to{transform:translateX(-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.dPad.tut,#duelBar .dSide.tut,#recKiPanel.tut,.duelSeq[data-tut],.dPad[data-pop],.duelSeq[data-pop]{animation:none;box-shadow:0 0 0 .25rem var(--gold)}.dPad.tut{transform:scale(1.14)}.clashCard.ok,.clashCard.bad{animation:none}}
/* 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.ult.theirs{border-color:var(--line);box-shadow:none}.duelSeq.ult.theirs b{color:var(--dim)}   /* the other side answers (your Ultimate, their defence): you wait; their arrows small, grey, the live one outlined in the rival's red, never the pulsing blue of your own turn */
.duelSeq.ult.theirs .dSeqRow i{transform:scale(.8);opacity:.55}.duelSeq.ult.theirs .dSeqRow i.now{opacity:1;color:var(--foe);background:#2a1414;border-color:var(--foe);box-shadow:none;animation:none}
.dPads.wait .dPad{opacity:.35;filter:grayscale(1)}
.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)}
/* Captain events are accents; input patterns and health/clock remain the visual priority. */
.duel .beatBig,.duel .beatBig.ko,.duel .beatBig.num,.duel .beatBig.small{top:43%;left:10%;right:10%;font-size:clamp(1.125rem,3.5vmin,2rem);line-height:1.15;overflow-wrap:anywhere;z-index:6}
.duel .beatBig.show{animation:countFade var(--ms,700ms) both}
.duel .duelSeq{z-index:30;max-width:calc(100% - 2rem);background:rgba(8,13,27,.96);box-shadow:0 .25rem 1rem #0008}
.duel .splash{top:auto;bottom:11.5rem;height:3.25rem;width:min(60%,24rem);z-index:5;pointer-events:none}
.duel .splashTxt b{white-space:normal;font-size:1rem;line-height:1.1}
.duel .bub.shout{font-size:1rem;max-width:16rem}
.duel .bub.shout span{animation:none}
/* 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}
/* Boss Encounters V2's HUD (src/graphics/finale.js, ui.js showFoeSplash): an enemy's Awakening banner (the right side,
   red, smaller than yours), the Ginyu Force's pose counter on the turn banner, WANTED's poster over the mark's bar, the
   finale's rules under the squad's name on the VS card. Reduced (the system's setting, or Settings' Fight effects:
   body.fxReduced): the VS card holds still, the vignette is a still edge, the marks pop in without a bounce */
.splash.foe{left:auto;right:0;width:min(46%,26rem);height:clamp(3rem,8.5vh,4.5rem);justify-content:flex-end;background:linear-gradient(270deg,rgba(150,24,40,.82),rgba(150,24,40,.82) 70%,transparent);animation-name:splashInR}
.splash.foe .splashFace{margin:0 .25rem 0 0;border-color:#ff9a8a}
.splash.foe .splashTxt{margin:0 max(4%,.875rem) 0 .5rem;text-align:right}.splash.foe .splashTxt span{color:#ffd2c8}
@keyframes splashInR{0%{transform:translateX(100%)}14%{transform:none}78%{transform:none;opacity:1}100%{transform:translateX(-25%);opacity:0}}
.turnBanner .finPose{font-family:var(--disp);font-size:.6875rem;letter-spacing:.06rem;color:#ecdcff;background:rgba(110,50,190,.6);border:.0625rem solid #c07aff;border-radius:.375rem;padding:.0625rem .375rem;flex:none}
.turnBanner .finPose.full{color:#fff;background:#a24cff;box-shadow:0 0 .75rem rgba(192,122,255,.8)}
.turnBanner .finPose.bump{animation:finPop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes finPop{from{transform:scale(1.5)}to{transform:none}}
.ub .ubWanted{position:absolute;left:50%;bottom:100%;margin-bottom:.25rem;transform:translateX(-50%) rotate(-4deg);font:normal .5625rem/1 var(--disp);letter-spacing:.08rem;color:#3b2410;background:linear-gradient(#f4e2b8,#e2c48a);border:.0625rem solid #6b4520;padding:.1875rem .3125rem .125rem;border-radius:.125rem;box-shadow:0 .125rem .375rem rgba(0,0,0,.55);pointer-events:none;animation:finWanted .45s cubic-bezier(.2,1.4,.4,1) both}
@keyframes finWanted{from{transform:translateX(-50%) translateY(-.75rem) rotate(-14deg) scale(1.6);opacity:0}to{transform:translateX(-50%) rotate(-4deg);opacity:1}}
.vs .tag.rules{display:block;max-width:14rem;white-space:normal;font-size:.625rem;letter-spacing:.04rem;color:#ffd2c8;background:none;border:0;padding:0;margin-top:.125rem}
@media (max-width:760px){.splash.foe{width:min(64%,18rem);height:clamp(2.5rem,7vh,3.25rem)}.splash.foe .splashTxt b{font-size:.9375rem}.vs .tag.rules{max-width:9rem;font-size:.5625rem}.turnBanner .finPose{font-size:.5625rem;padding:0 .25rem}}
@media (prefers-reduced-motion:reduce){.vsWord,.vs,.splash.foe,.turnBanner .finPose.bump,.ub .ubWanted{animation:none!important}#app.hostile::before{animation:none;opacity:.7}}
body.fxReduced .vsWord,body.fxReduced .vs,body.fxReduced .splash.foe,body.fxReduced .turnBanner .finPose.bump,body.fxReduced .ub .ubWanted{animation:none!important}
body.fxReduced #app.hostile::before{animation:none;opacity:.7}
.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}
  .duelCtl{max-width:calc(100vw - 1rem)}.dRule{font-size:.625rem}
  /* a phone: no move list; the Ki screen across the controller, the keys under it (the owner, 2026-10-15) */
  .dCtl{flex-direction:column;gap:.5rem;min-height:0;width:calc(100vw - 1.25rem);padding:.5rem .5625rem .75rem;border-radius:1.5rem}
  .dMoves,.dSeam{display:none}
  .dKiScr{order:-1;width:100%;padding:.4375rem .625rem}.dFill{margin:-.4375rem -.625rem .25rem;padding:.3125rem .625rem;gap:.25rem}.dFi{gap:.1875rem}
  .dFh,.dFl{font-size:.65625rem;letter-spacing:.04em}.dFi b{font-size:.84375rem}
  /* a controller for two thumbs (the owner, 2026-10-19: the keys stood in a cluster under the Ki screen and took no taps): ↑ over ↓ at the left edge for the left thumb, ← and → side by side at the right edge for the right, each a thumb's size, the Ki screen above them */
  .dPads{width:100%;grid-template-columns:4.75rem minmax(0,1fr) 4.75rem 4.75rem;grid-template-rows:repeat(2,4rem);gap:.5rem .375rem}
  .dPad[data-lane="2"]{grid-area:1/1}.dPad[data-lane="1"]{grid-area:2/1}.dPad[data-lane="0"]{grid-area:2/3}.dPad[data-lane="3"]{grid-area:2/4}
  .dPad b{font-size:1.5rem}.dPad small{font-size:.5625rem}
  .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 .shopFrame{opacity:.8;filter:saturate(.88);transition:opacity .4s,filter .4s}#app.mode-combat .shopbar:hover .shopFrame{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 .fld{opacity:.6}
}
.pl .vsn{display:block;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}   /* opponent nameplates across their portraits; your own stays unnamed */
.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) .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:block}
  #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)}}
.players.fightFocus .pl{transition:opacity .2s,filter .2s}
.players.fightFocus .pl:not(.opp):not(.me):not(.out){opacity:.55;filter:saturate(.65)}
.players.fightFocus .pl.me:not(.out),.players.fightFocus .pl.opp:not(.out){opacity:1;filter:none;z-index:2}
.players.fightFocus .pl.me:not(.out) .pbox,.players.fightFocus .pl.opp:not(.out) .pbox{transform:scale(1.07);transform-origin:center right}
.players.fightFocus .pl:not(.opp):not(.me):not(.out):hover{opacity:.85;filter:none}
.players .pl.out:hover{opacity:.9;filter:grayscale(1)}
@media (prefers-reduced-motion:reduce){.pl.opp .pbox{animation:none}}
@media (min-width:761px){
#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.acct-in .onlineForm #onlineGo{flex:1;background:linear-gradient(#22396e,#16264a);border-color:#4f6ba8;color:#fff;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}
/* Google and Apple above the form (account.js authSocial): each in its own brand's colours, as their guidelines ask */
.authSocial{display:flex;flex-direction:column;gap:.5rem;margin:0 0 .75rem}
.authSoc{display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;min-height:2.875rem;padding:0 1rem;border-radius:.625rem;font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer}
.authSoc svg{width:1.125rem;height:1.125rem;flex:none}
.authSoc.google{background:#fff;color:#1f1f1f;border:1px solid #747775}
.authSoc.apple{background:#000;color:#fff;border:1px solid #000}
.authSoc:disabled{opacity:.6;cursor:wait}
.authSoc:focus-visible{outline:.125rem solid #ffe994;outline-offset:.125rem}
.authOr{display:flex;align-items:center;gap:.625rem;margin:.25rem 0 0;font-size:.75rem;color:#8895ae}
.authOr::before,.authOr::after{content:"";flex:1;height:1px;background:#2b3a5e}
.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}
/* my name on my profile, with its change (account.js: a few changes ever) */
.pfRename{margin:0 0 .75rem;font-size:.8125rem;line-height:1.45;color:#c4cde4}
.pfRename b{color:#fff}
.pfRename .acctLink{font-size:.8125rem;padding:0 .125rem}
.pfRename span{color:#8895ae;font-size:.75rem}
.pfBox.career .pfRename{margin:.625rem 1.25rem 0}   /* (in line with the email note above it, as .pfBox.career .pfVerify) */
.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(auto-fill,minmax(3.75rem,1fr));gap:.375rem;max-height:19rem;overflow-y:auto;padding:.125rem .25rem .25rem 0;scrollbar-width:thin}   /* every Captain and fighter (2026-10-14): a scrolling grid */
.pfAvHead{grid-column:1/-1;margin:.375rem 0 .125rem;font-family:var(--disp);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.pfAvHead:first-child{margin-top:0}
.pfAvNone{grid-column:1/-1;margin:.5rem 0;color:var(--dim);font-size:.875rem}
.overlay .box .pfAvSearch{width:100%;margin:0 0 .5rem;padding:.4375rem .625rem;border:1px solid var(--line);border-radius:.5rem;background:#0b101e;color:var(--fg);font:inherit;font-size:.875rem}
.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}
/* its two tabs (the profile's .owTab look, career.css): Ranked, then Casual, whose right column is the first places */
.lbBox .lbTabs{margin:0 0 .625rem;padding:.25rem .25rem 0;border-radius:.5rem .5rem 0 0}
.overlay .box .lbTabs .owTab.gold{color:var(--gold)}.overlay .box .lbTabs .owTab.gold.on{color:#171106;background:linear-gradient(#ffdc54,#ffb520)}   /* Ranked's tab in gold, filled gold when on */
.lbRow .mmr.wins{display:flex;flex-direction:column;align-items:flex-end;line-height:1;color:var(--gold)}
.lbRow .mmr.wins small{margin-top:.125rem;font-size:.5625rem;letter-spacing:.12em;color:#9fb0d6}
.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}
  .acctOv{padding:.75rem}
  .acctOv .box{padding:1.125rem 1rem}
  .pfGrid{grid-template-columns:repeat(3,1fr)}
  .pfAvatars{grid-template-columns:repeat(auto-fill,minmax(3.25rem,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}}

/* Phase clock stays visible when the fight folds the HUD; names remain on opponent portraits. */
.turnBanner .fight.prepare b{font-size:.9375rem}
.pl:not(.opp) .vsn{background:linear-gradient(180deg,rgba(8,15,31,.96),rgba(8,15,31,.78));color:#edf3ff}

/* The five-second opening card follows the existing dark glass and gold HUD. */
.crewIntro{position:absolute;z-index:18;left:50%;top:38%;transform:translate(-50%,-50%);width:min(40rem,calc(100% - 2rem));padding:1.5rem 1.75rem;border-color:var(--gold);box-shadow:0 .8rem 3rem #0008;text-align:center;background:rgba(12,16,32,.96)}
.crewEyebrow{color:var(--dim);letter-spacing:.12rem;font-size:.7rem}
.crewIntro h2{font-family:var(--disp);font-size:1.5rem;color:var(--gold);margin:.7rem 0 1.4rem}
.crewSteps{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-family:var(--disp);font-size:.9rem}
.crewSteps span{flex:1}.crewSteps b{display:block;color:var(--gold);font-size:.7rem;margin-bottom:.4rem}.crewSteps small{display:block;font: .75rem var(--body);color:var(--dim);margin-top:.45rem}.crewSteps i{color:var(--gold);font-style:normal}
.crewIntro p{font-size:.8rem;color:var(--dim);margin:1.2rem 0}
.crewProgress{height:.2rem;background:var(--line);border-radius:1rem;overflow:hidden}.crewProgress span{display:block;height:100%;background:var(--gold);transition:width .2s linear}
.crewBottom{display:flex;align-items:center;justify-content:space-between;margin-top:.8rem;font-size:.7rem;color:var(--dim);gap:1rem}.crewBottom label{display:flex;align-items:center;gap:.4rem}.crewBottom input{accent-color:var(--gold)}.crewSeconds{font-family:var(--disp);color:var(--gold);font-size:1rem}
@media(max-width:600px){.crewIntro{padding:1rem}.crewSteps{font-size:.75rem}.crewSteps small{font-size:.65rem}.crewIntro h2{font-size:1.2rem}.crewBottom{font-size:.65rem}}
@media(prefers-reduced-motion:reduce){.crewProgress span{transition:none}}

/* Shared outcome frame: boss, Clash and Recruitment use the same inset rim and surface (the Recruitment's intro card, `.reveal`, too: the same frame and cards over a lighter veil, so the stage shows through). */
:is(#mEnd,#dEnd,#recOv.result){background:rgba(6,10,24,.6);backdrop-filter:blur(5px);padding:1rem}
:is(#mEnd,#dEnd) .mEndBox,#recOv:is(.result,.reveal) .augBox,#riftOv .augBox,#bossCard .bcBox{position:relative;border:1px solid var(--gold);border-radius:1.2rem;background:radial-gradient(ellipse at 50% 0,#25335466,transparent 65%),linear-gradient(145deg,#11182af5,#080d1bf5);box-shadow:0 1rem 3rem #0009,inset 0 0 0 .2rem #111d33,inset 0 0 0 .3rem #b4964844;max-height:calc(100% - 2rem);overflow:auto}
:is(#mEnd,#dEnd) .mEndBox::after,#recOv:is(.result,.reveal) .augBox::after,#riftOv .augBox::after,#bossCard .bcBox::after{content:"";position:absolute;inset:.45rem;pointer-events:none;border-radius:.75rem;background:linear-gradient(var(--gold),var(--gold)) left top/3rem 2px no-repeat,linear-gradient(var(--gold),var(--gold)) right top/3rem 2px no-repeat,linear-gradient(var(--gold),var(--gold)) left bottom/3rem 2px no-repeat,linear-gradient(var(--gold),var(--gold)) right bottom/3rem 2px no-repeat;opacity:.7}
:is(#mEnd,#dEnd,#recOv.result) :is(#mGo,#dGo,#recGo),#riftOv .riftBtns .primary{border:1px solid #8dc9ff;border-radius:.7rem;background:linear-gradient(#2d77ff,#1840b6);box-shadow:0 .25rem .7rem #0005;color:var(--fg)}
/* Existing recruitment cards and item tile, with space reserved inside every rim. */
#recOv:is(.result,.reveal) .augBox{width:min(42rem,100%);padding:1.75rem 2rem;gap:1.25rem;flex-shrink:0}
#recOv:is(.result,.reveal) #recTitle{font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.25;text-wrap:balance;text-shadow:0 0 .7rem #80b5ff44}
#recOv:is(.result,.reveal) #recLine{font-size:1rem;line-height:1.5;margin:0;max-width:32rem}
#recOv:is(.result,.reveal) .recCards{width:100%;align-items:stretch;gap:1.5rem;padding:.5rem}
#recOv:is(.result,.reveal) .recCard{flex:1;min-width:0;max-width:16rem;min-height:0;padding:1.25rem;gap:.65rem;box-shadow:0 .5rem 1.25rem #0006,inset 0 0 0 .2rem #111d33,inset 0 0 0 .3rem color-mix(in srgb,var(--c) 45%,transparent)}
#recOv:is(.result,.reveal) .recCard img{width:min(100%,9rem);height:auto;aspect-ratio:1;object-fit:cover;border:1px solid color-mix(in srgb,var(--c) 65%,transparent);border-radius:.65rem;flex-shrink:0}
#recOv:is(.result,.reveal) .recCard b{font-size:1.25rem;overflow-wrap:anywhere}
#recOv:is(.result,.reveal) .recCard p{width:100%;border-top:1px solid var(--line);padding-top:.65rem;margin-top:.2rem;font-size:1rem}
#recOv.result .recCard:not(.gone) p{color:var(--good);font-weight:700}
#recOv.result .recCard.gone{--c:#8996b4;opacity:.65;filter:grayscale(.65)}
#recOv:is(.result,.reveal) .recCard:hover,#recOv:is(.result,.reveal) .recCard:active{transform:none}
:is(#mEnd,#recOv.result) .mItem{min-width:0;max-width:100%;padding:.8rem 1rem;gap:.85rem;border:1px solid #87b7ff;border-radius:.9rem;background:linear-gradient(135deg,#23345199,#10182a);box-shadow:0 0 .9rem #3e80d422}
#recOv.result #recItem{width:100%;justify-content:center;margin:0}
#recOv.result .mItem .itImg{width:3rem;height:3rem;flex-shrink:0}#recOv.result .mItem b{font:1rem var(--disp);overflow-wrap:anywhere}
#recOv.result .augBtns{width:100%;margin-top:.25rem}#recOv.result #recGo{min-width:14rem;min-height:3rem;font-family:var(--disp);font-size:1.15rem;padding:.65rem 1.5rem}
/* A stage's finale and its loot, the victory cache (ui.js showBossCard, BOSS_CARD; the owner's boss reward overhaul,
   2026-10-15): the shared outcome frame, compact, over the board's far half and never in the way (no pointer events,
   nothing to press: it fades by itself). The orbs are the mission loot's tiles, each item outlined by its quality
   (q0 a component, q1 finished, q2 special); the orb the cache upgraded pops gold once, the cache's own item (upgraded
   or already there) wears the gold edge; a gold orb is its coin. Its timings come from BOSS_CARD as --bc* */
.bossCard{position:absolute;left:0;right:0;top:22%;z-index:7;display:flex;justify-content:center;padding:0 1rem;pointer-events:none;animation:bcIn .3s cubic-bezier(.2,1.25,.4,1) both}
.bossCard[hidden]{display:none}
.bossCard.out{animation:vsOut var(--bcOutMs,350ms) ease-in both}
#bossCard .bcBox{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:min(30rem,100%);padding:1.1rem 1.4rem 1rem;text-align:center;max-height:none;overflow:visible}
#bossCard .bcHead{font:2rem/1.05 var(--disp);letter-spacing:.06rem;color:#ffd54a;text-shadow:0 .2rem .45rem #000,0 0 1.1rem rgba(255,184,40,.6)}
#bossCard.lose .bcHead{color:#ff8a6a;font-size:1.6rem;text-shadow:0 .2rem .45rem #000,0 0 1rem rgba(255,84,48,.5)}
#bossCard .bcSub{font:.9rem var(--disp);letter-spacing:.04rem;color:var(--dim)}
#bossCard .bcLabel{font:.8rem var(--disp);letter-spacing:.12rem;color:var(--gold);margin-top:.15rem}
#bossCard.lose .bcLabel{font:.9rem var(--body);letter-spacing:0;color:var(--fg)}
#bossCard .bcLabel:empty,#bossCard .bcBonus:empty{display:none}
#bossCard .bcOrbs{margin:.2rem 0 0;gap:.45rem}
#bossCard .bcOrbs:empty{display:none}
#bossCard .bcOrb{--qc:#87b7ff;position:relative;padding:.35rem .6rem;gap:.4rem;border-color:color-mix(in srgb,var(--qc) 70%,transparent);background:linear-gradient(135deg,#23345199,#10182a);animation:bcOrb .26s cubic-bezier(.2,1.3,.4,1) var(--d,0ms) both}
#bossCard .bcOrb.q1{--qc:#c08bff}#bossCard .bcOrb.q2{--qc:#ffb13b}#bossCard .bcOrb.gold{--qc:#e3c25a}
#bossCard .bcOrb .itImg{width:1.9rem;height:1.9rem}#bossCard .bcOrb b{font:.8rem var(--disp);max-width:8.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bossCard .bcOrb.cache{border-color:var(--gold);box-shadow:0 0 .9rem rgba(255,200,70,.35),inset 0 0 0 1px #ffd54a55}
#bossCard .bcOrb em{position:absolute;top:-.55rem;left:50%;transform:translateX(-50%);font:normal .55rem var(--disp);letter-spacing:.08rem;color:#1a1204;background:var(--gold);border-radius:.25rem;padding:.05rem .3rem;white-space:nowrap}
#bossCard .bcOrb.up::before{content:"";position:absolute;inset:-.4rem;border-radius:1rem;pointer-events:none;background:radial-gradient(closest-side,rgba(255,213,74,.55),rgba(255,170,40,.18) 60%,transparent);opacity:0;animation:bcBurst .7s ease-out var(--bcUpAt,420ms) both}
#bossCard .bcOrb.up{animation:bcOrb .26s cubic-bezier(.2,1.3,.4,1) var(--d,0ms) both,bcPop .38s cubic-bezier(.2,1.6,.4,1) var(--bcUpAt,420ms) both}
#bossCard .bcBonus{font:.95rem var(--disp);color:#ffe28a;margin-top:.15rem}
@keyframes bcIn{from{opacity:0;transform:translateY(-.6rem) scale(.96)}to{opacity:1;transform:none}}
@keyframes bcOrb{from{opacity:0;transform:translateY(.4rem) scale(.9)}to{opacity:1;transform:none}}
@keyframes bcPop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes bcBurst{0%{opacity:0;transform:scale(.6)}35%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
@media (max-width:760px){.bossCard{top:16%}#bossCard .bcBox{padding:.8rem .8rem .75rem;gap:.25rem}#bossCard .bcHead{font-size:1.45rem}#bossCard.lose .bcHead{font-size:1.2rem}#bossCard .bcSub,#bossCard .bcLabel{font-size:.72rem}#bossCard.lose .bcLabel{font-size:.78rem}#bossCard .bcOrb{padding:.3rem .45rem;gap:.3rem}#bossCard .bcOrb .itImg{width:1.5rem;height:1.5rem}#bossCard .bcOrb b{font-size:.68rem;max-width:6rem}#bossCard .bcBonus{font-size:.8rem}}
@media (max-height:520px){.bossCard{top:8%}#bossCard .bcBox{padding:.6rem .9rem .55rem;gap:.2rem}#bossCard .bcHead{font-size:1.25rem}}
@media (prefers-reduced-motion:reduce){.bossCard,#bossCard .bcOrb,#bossCard .bcOrb.up{animation:none}#bossCard .bcOrb.up::before{display:none}}
#recOv.result #recNote:empty{display:none}
@media(max-width:760px){
  #recOv:is(.result,.reveal) .augBox{padding:1.25rem;gap:1rem}
  #recOv:is(.result,.reveal) .recCards{padding:.25rem;gap:.75rem;max-width:none}
  #recOv:is(.result,.reveal) .recCard{max-width:none;width:100%;padding:1rem;column-gap:1rem;row-gap:.25rem;grid-template-columns:4.5rem minmax(0,1fr)}
  #recOv:is(.result,.reveal) .recCard img{width:4.5rem;height:4.5rem}
  #recOv:is(.result,.reveal) .recCard b{font-size:1.1rem}#recOv:is(.result,.reveal) .recCard p{font-size:.85rem;padding-top:.35rem;margin-top:0}
  #recOv:is(.result,.reveal) #recLine{font-size:.85rem}#recOv:is(.result,.reveal) .mItem b{font-size:.9rem}
}
@media(max-height:600px) and (min-width:761px){
  #recOv:is(.result,.reveal) .augBox{padding:1.1rem 1.5rem;gap:.65rem}
  #recOv:is(.result,.reveal) .recCard{padding:1rem;gap:.35rem}#recOv:is(.result,.reveal) .recCard img{width:5rem}
  #recOv:is(.result,.reveal) .recCard p{padding-top:.35rem}#recOv:is(.result,.reveal) .mItem{padding:.5rem .75rem}#recOv:is(.result,.reveal) .mItem .itImg{width:2rem;height:2rem}
}

/* The Rift Exchange (src/ui/rift.js; docs/RIFT_EXCHANGE.md): the augment picker's overlay and cards, the shared outcome
   frame above (its gold rim and inset corners) and its primary button; its own are the veil over the board (darker and
   bluer than an augment offer's), the portal and the crack behind the panel in blue, violet and gold, the motes rising
   through it, and the swap's layout. The cards wear their cost's colour (--tier, .t1-.t5). Reduced motion stills it all */
.riftOv{z-index:15;background:radial-gradient(ellipse at 50% 42%,rgba(40,24,92,.55),rgba(6,8,22,.93) 70%);--riftA:#5fb8ff;--riftB:#a35cff;--riftG:#ffc94a}
.riftVeil{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.riftPortal{position:absolute;left:50%;top:44%;width:min(46rem,120vw);aspect-ratio:1.9;transform:translate(-50%,-50%);border-radius:50%;filter:blur(.15rem)}
.riftPortal i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent,var(--riftA) 12%,transparent 24%,var(--riftB) 40%,transparent 52%,var(--riftG) 64%,transparent 74%,var(--riftB) 88%,transparent);
  -webkit-mask:radial-gradient(closest-side,transparent 62%,#000 70%,#000 78%,transparent 100%);mask:radial-gradient(closest-side,transparent 62%,#000 70%,#000 78%,transparent 100%);opacity:.55;animation:riftSpin 9s linear infinite}
.riftPortal i:nth-child(2){inset:9%;opacity:.4;animation-duration:6s;animation-direction:reverse}
.riftPortal i:nth-child(3){inset:22%;opacity:.3;animation-duration:13s;background:radial-gradient(closest-side,rgba(163,92,255,.55),rgba(95,184,255,.18) 60%,transparent);-webkit-mask:none;mask:none}
.riftCrack{position:absolute;left:0;right:0;top:44%;width:100%;height:12rem;transform:translateY(-50%);overflow:visible}
.riftCrack path{fill:none;stroke:#e9e2ff;stroke-width:2.2;stroke-linejoin:round;filter:drop-shadow(0 0 .35rem var(--riftB)) drop-shadow(0 0 .9rem var(--riftA));stroke-dasharray:1400;stroke-dashoffset:1400;animation:riftCrack .9s cubic-bezier(.2,.8,.3,1) .1s forwards,riftFlicker 2.4s ease-in-out 1s infinite}
.riftCrack path.thin{stroke-width:1.2;stroke:#ffe9a8;filter:drop-shadow(0 0 .35rem var(--riftG));animation-delay:.45s,1.3s}
.riftMotes b{position:absolute;bottom:-1rem;width:.3rem;height:.3rem;border-radius:50%;background:var(--riftA);box-shadow:0 0 .5rem var(--riftA);opacity:0;animation:riftMote 5.5s linear infinite}
.riftMotes b:nth-child(3n){background:var(--riftB);box-shadow:0 0 .5rem var(--riftB)}.riftMotes b:nth-child(4n){background:var(--riftG);box-shadow:0 0 .5rem var(--riftG)}
.riftMotes b:nth-child(1){left:13%;animation-delay:0.00s;animation-duration:4.50s}.riftMotes b:nth-child(2){left:50%;animation-delay:0.41s;animation-duration:5.03s}.riftMotes b:nth-child(3){left:87%;animation-delay:0.82s;animation-duration:5.56s}.riftMotes b:nth-child(4){left:28%;animation-delay:1.23s;animation-duration:6.09s}.riftMotes b:nth-child(5){left:65%;animation-delay:1.64s;animation-duration:6.62s}.riftMotes b:nth-child(6){left:6%;animation-delay:2.05s;animation-duration:7.15s}.riftMotes b:nth-child(7){left:43%;animation-delay:2.46s;animation-duration:4.68s}.riftMotes b:nth-child(8){left:80%;animation-delay:2.87s;animation-duration:5.21s}.riftMotes b:nth-child(9){left:21%;animation-delay:3.28s;animation-duration:5.74s}.riftMotes b:nth-child(10){left:58%;animation-delay:3.69s;animation-duration:6.27s}.riftMotes b:nth-child(11){left:95%;animation-delay:4.10s;animation-duration:6.80s}.riftMotes b:nth-child(12){left:36%;animation-delay:4.51s;animation-duration:7.33s}.riftMotes b:nth-child(13){left:73%;animation-delay:4.92s;animation-duration:4.86s}.riftMotes b:nth-child(14){left:14%;animation-delay:5.33s;animation-duration:5.39s}
@keyframes riftSpin{to{transform:rotate(1turn)}}
@keyframes riftCrack{to{stroke-dashoffset:0}}
@keyframes riftFlicker{50%{opacity:.65}}
@keyframes riftMote{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-70vh) scale(1.1);opacity:0}}
#riftOv .augBox{position:relative;width:min(48rem,100%);padding:1.6rem 2rem 1.4rem;gap:.9rem;flex-shrink:0;border-color:color-mix(in srgb,var(--riftB) 45%,var(--gold));box-shadow:0 1rem 3rem #0009,0 0 2.5rem rgba(163,92,255,.25),inset 0 0 0 .2rem #111d33,inset 0 0 0 .3rem #b4964844}
.riftKicker{font:800 .7rem var(--disp);letter-spacing:.2rem;color:var(--riftA);text-shadow:0 0 .6rem rgba(95,184,255,.6)}
#riftTitle{margin:-.35rem 0 0;font-size:clamp(1.3rem,2.8vw,2rem);line-height:1.2;text-wrap:balance;text-shadow:0 0 .8rem rgba(163,92,255,.5)}
.riftDown{display:inline-block;color:var(--riftG);margin:0 .35rem}
.riftLine{margin:0;max-width:34rem;color:#c9d0f0;font-size:.95rem;line-height:1.45;text-align:center}
.riftBody{width:100%;display:flex;justify-content:center}.riftBody:empty{display:none}
.riftCards{flex-wrap:wrap;gap:1rem}
#riftOv .augBox:has(.riftCards>:nth-child(5)){width:min(60rem,100%)}   /* Rift Premium's five offers in one row (the box holds four) */
.riftCard{width:10rem;min-height:12.5rem;cursor:pointer;animation:augIn .35s cubic-bezier(.2,.8,.3,1.1) var(--d,0s) both}
div.riftCard{cursor:default}
.riftCard p{color:var(--dim);font-size:.75rem}
.riftCard.sel{transform:translateY(-.375rem);box-shadow:0 0 0 .15rem var(--riftG),0 0 1.6rem rgba(255,201,74,.55)}
.riftCard.sel p{color:var(--riftG);font-weight:700}
.riftCard.offer{box-shadow:0 0 1.4rem color-mix(in srgb,var(--riftB) 40%,transparent)}
.riftCard.offer:hover{box-shadow:0 1rem 2.25rem rgba(0,0,0,.65),0 0 1.75rem var(--riftA)}
.riftCard.picked{transform:scale(.95);box-shadow:0 0 2rem var(--riftG)}
.riftCard.sending{animation:riftPull 1.6s ease-in-out infinite;box-shadow:0 0 1.6rem var(--riftB)}
.riftCard.chosen{box-shadow:0 0 0 .15rem var(--riftG),0 0 1.6rem rgba(255,201,74,.45)}
.riftCard.gone{opacity:.6;filter:grayscale(.55) hue-rotate(20deg)}
.riftCard.won{box-shadow:0 0 0 .15rem var(--riftG),0 0 2rem rgba(255,201,74,.55);animation:riftArrive .6s cubic-bezier(.2,.8,.3,1.2) .25s both}
.riftCard.won p{color:var(--good);font-weight:700}
@keyframes riftPull{50%{transform:translateY(-.25rem) scale(.97);filter:brightness(1.15) saturate(1.2)}}
@keyframes riftArrive{0%{opacity:0;transform:translateY(-1.5rem) scale(.85);filter:brightness(2.2)}100%{opacity:1;transform:none;filter:none}}
.riftOpenRow{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center}
.riftFrom .riftCard{width:8.5rem;min-height:10.5rem}
.riftArrow{font-style:normal;font-size:1.6rem;color:var(--riftG);text-shadow:0 0 .6rem var(--riftB)}
.riftSwap{display:flex;flex-direction:column;align-items:center;gap:.4rem;perspective:40rem;isolation:isolate}
.riftPortal.riftHole{position:relative;left:auto;top:auto;width:12rem;height:4rem;aspect-ratio:auto;flex-shrink:0;transform:none;filter:none;
  background:radial-gradient(ellipse,#010108 0 48%,#160d2c 58%,#68469f 65%,#05030e 72%,transparent 76%);box-shadow:0 .7rem 1.2rem -.5rem #0009;border-radius:50%}
.riftHole i{opacity:.85;animation:riftFlicker 2.4s ease-in-out infinite}.riftHole i:nth-child(2){inset:4%;opacity:.6;animation:none}
.riftHole i:nth-child(3){inset:0;animation:none;background:radial-gradient(ellipse,transparent 45%,#a35cff66 67%,transparent 78%)}
.riftFrom{display:flex;flex-direction:column;align-items:center;gap:.4rem}.riftFrom .riftHole{width:9rem;height:3rem}
.riftSwap .gone{position:relative;z-index:2;animation:riftSink .65s cubic-bezier(.45,0,.8,.6) both}
.riftSwap .won{position:relative;z-index:2;animation:riftEmerge .55s cubic-bezier(.2,.8,.3,1.1) .55s both}
@keyframes riftSink{0%{opacity:1;filter:none;transform:none}35%{opacity:1;transform:translateY(-.6rem) rotate(-6deg) scale(1.04)}80%{opacity:1;filter:brightness(.7);transform:translateY(5.4rem) rotate(16deg) rotateX(45deg) scale(.22)}100%{opacity:0;transform:translateY(5.8rem) rotate(24deg) rotateX(70deg) scale(0)}}
@keyframes riftEmerge{0%{opacity:0;filter:brightness(2);transform:translateY(-4.2rem) scale(.15)}100%{opacity:1;filter:none;transform:none}}
.riftSwap .riftCard{min-height:0;width:14rem;display:grid;grid-template-columns:3.75rem 1fr;grid-template-areas:"img tier" "img name" "img desc";column-gap:.75rem;align-items:center;justify-items:start;padding:.6rem .8rem;text-align:left}
.riftSwap .riftCard img{grid-area:img;width:3.75rem;height:3.75rem}.riftSwap .riftCard small{grid-area:tier}.riftSwap .riftCard b{grid-area:name}.riftSwap .riftCard p{grid-area:desc;margin:0}
.riftBtns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.riftBtns button{min-width:9rem}
.riftBtns .primary.off{opacity:.45;pointer-events:none;filter:grayscale(.5)}
.riftClock{position:absolute;top:.9rem;right:1.1rem;font:800 1.15rem var(--disp);color:var(--gold);font-variant-numeric:tabular-nums}
.riftClock.soon{color:var(--foe);animation:riftFlicker .5s ease-in-out infinite}
.riftClock:empty{display:none}
.riftOv.result .riftClock{display:none}
/* a seat knocked out and a spectator: the phase alone, small, over the board's top */
.riftWatch{position:absolute;left:50%;top:calc(var(--topH) + 4.5rem);transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:.75rem;padding:.55rem 1rem;font-size:.85rem;border-color:color-mix(in srgb,var(--riftB,#a35cff) 55%,var(--line));box-shadow:0 0 1.25rem rgba(163,92,255,.35);pointer-events:none}
.riftWatch b{font-family:var(--disp);font-weight:800;letter-spacing:.06rem;color:#cdb8ff}
.riftWatch span{color:var(--dim)}.riftWatch .riftClock{position:static;font-size:.95rem}
@media (max-width:760px){
  #riftOv .augBox{padding:1.2rem 1rem 1rem;gap:.7rem}
  .riftCards{flex-direction:column;flex-wrap:nowrap;width:100%;max-width:24rem;gap:.55rem}
  .riftCard{width:auto;min-height:0;display:grid;grid-template-columns:3.5rem 1fr;grid-template-areas:"img tier" "img name" "img desc";column-gap:.75rem;row-gap:.1rem;align-items:center;justify-items:start;padding:.6rem .8rem;text-align:left}
  .riftCard img{grid-area:img;width:3.5rem;height:3.5rem}.riftCard small{grid-area:tier}.riftCard b{grid-area:name;font-size:.95rem}.riftCard p{grid-area:desc;margin:0}
  .riftOpenRow{flex-direction:column;gap:.5rem;width:100%}.riftFrom .riftCard{width:auto;min-height:0}.riftOpenRow .riftArrow{transform:rotate(90deg)}
  .riftSwap{width:100%;max-width:24rem}.riftSwap .riftCard{width:100%}
  .riftBtns button{min-width:0;flex:1}
  .riftWatch{top:calc(var(--topH) + 6rem);max-width:calc(100% - 2rem);flex-wrap:wrap;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.riftPortal i,.riftCrack path,.riftMotes b,.riftCard,.riftCard.sending,.riftCard.won,.riftSwap .gone,.riftSwap .won,.riftClock.soon{animation:none}.riftCrack path{stroke-dashoffset:0}.riftMotes{display:none}}
.ri.rift{border-color:rgba(163,92,255,.75)}.ri.rift.now{border-color:#a35cff;background:#1c0f38;box-shadow:0 0 .55rem rgba(163,92,255,.8);animation:riftSlot 1.4s ease-in-out infinite}.riBadge.rift{border-color:#a35cff}   /* the Rift Exchange in the round tracker (ui.js renderRound): the slot's icon, violet, until it has run (lit while it is open), then its round's exponent, as a carousel's round does */
@keyframes riftSlot{50%{box-shadow:0 0 .9rem rgba(163,92,255,1)}}
@media (prefers-reduced-motion:reduce){.ri.rift.now{animation:none}}

/* free shop rerolls an augment banked (S.freeRolls: Legendary Shop Access, Dragon Radar, Capsule Warranty): a badge on the reroll chip */
#btnReroll{position:relative}
#btnReroll[data-free]::after{content:attr(data-free);position:absolute;top:.1rem;right:.1rem;min-width:1.1rem;height:1.1rem;padding:0 .25rem;border-radius:.55rem;background:var(--gold);color:var(--bg);font-size:.7rem;font-weight:800;line-height:1.1rem;text-align:center;pointer-events:none}
#btnReroll[data-free]::after{box-shadow:0 0 .5rem rgba(255,201,74,.75)}#btnReroll[data-free] .price>[data-tune],#btnReroll[data-free] .price>.coin{display:none}#btnReroll[data-free] .price::before{content:"Free";color:var(--gold);font-weight:700}   /* banked free rerolls (augments): the price reads Free while any are banked */
#btnReroll.freeUp::after{animation:freeUp .6s cubic-bezier(.2,.9,.3,1.4)}@keyframes freeUp{0%{scale:.4}50%{scale:1.45}100%{scale:1}}
.augRrFlash{position:absolute;margin:-1rem 0 0 -1.25rem;z-index:9;display:flex;width:1.75rem;height:1.75rem;align-items:center;justify-content:center;font-size:1rem;border-radius:50%;background:rgba(10,14,30,.9);border:.125rem solid var(--c);box-shadow:0 0 .625rem var(--c);pointer-events:none;animation:augRrFlash 1.6s ease-out forwards}.augRrFlash.prismatic{border-color:#e8a0ff}.augRrFlash .augImg{width:90%;height:90%;object-fit:contain}   /* whose free reroll it was (ui.js augRrFlash) */
@keyframes augRrFlash{0%{opacity:0;scale:.3;translate:0 .5rem}15%{opacity:1;scale:1.25;translate:0 0}30%{scale:1}75%{opacity:1}100%{opacity:0;translate:0 -.375rem}}
@media (prefers-reduced-motion:reduce){.augRrFlash{animation:augMomFade 1.6s linear forwards}}
/* the picker shrunk to its pill: its cards as chips by it (ui.js augPeekDraw); held on a phone, a card lights whom it changes and the rest fade */
.augPeek{position:absolute;left:50%;transform:translateX(-50%);z-index:6;display:flex;gap:.375rem;max-width:calc(100% - 1rem)}
.augPeekB{display:flex;align-items:center;gap:.375rem;padding:.25rem .625rem .25rem .25rem;min-width:0;border-radius:.75rem;border:1px solid var(--c);background:rgba(12,16,32,.9);color:#fff;font:400 .75rem var(--body);cursor:pointer;touch-action:manipulation;-webkit-touch-callout:none}
.augPeekB.prismatic{border-color:transparent;background:linear-gradient(rgba(12,16,32,.92),rgba(12,16,32,.92)) padding-box,var(--prism) border-box}
.augPeekB:hover,.augPeekB:focus-visible,.augPeekB.held{box-shadow:0 0 .75rem color-mix(in srgb,var(--c) 70%,transparent)}
.augPeekIc{display:flex;width:1.5rem;height:1.5rem;flex:none;align-items:center;justify-content:center}.augPeekIc .augImg{width:100%;height:100%;object-fit:contain}
.augPeekT{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.1}.augPeekT b{font:400 .75rem var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:9rem}.augPeekT small{font-size:.625rem;color:var(--c)}.augPeekT small:empty{display:none}
.augCard{-webkit-touch-callout:none}
.augOv.holding{background:transparent}.augOv.holding .augBox>*:not(.augCards),.augOv.holding .augCol:not(:has(.held)),.augOv.holding .augRr{opacity:.12;transition:opacity .15s}
@media (max-width:760px){.augPeekT b{max-width:5.5rem}.augPeekB{padding:.1875rem .4375rem .1875rem .1875rem}}
@media (prefers-reduced-motion:reduce){#btnReroll.freeUp::after{animation:none}}

/* Batch D's moments between fights (2026-10-17, round 4; ui.js wishSummon, treatySeal, augTreatyPair; docs/augments/PRESENTATION.md §6) */
.wishPips{position:absolute;left:50%;bottom:.0625rem;transform:translateX(-50%);display:flex;gap:.0625rem;pointer-events:none}.wishPips i{width:.25rem;height:.25rem;border-radius:50%;background:rgba(255,255,255,.22)}.wishPips i.on{background:radial-gradient(circle at 35% 35%,#fff3b0,#ff9a1a);box-shadow:0 0 .1875rem #ffb43a}
.wishOv{position:absolute;inset:0;z-index:26;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(20,30,10,.55),rgba(2,4,8,.93) 70%);animation:wishOv var(--ms) ease forwards}
.wishOrbs{position:relative;width:16rem;height:16rem}
.wishOrbs i{position:absolute;left:50%;top:50%;width:2.5rem;height:2.5rem;margin:-1.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#fff6c8,#ffb43a 45%,#d9600a);box-shadow:0 0 1rem #ffb43a;--a:calc(var(--i) * 51.43deg);transform:rotate(var(--a)) translateY(-7rem) rotate(calc(-1 * var(--a)));animation:wishGather var(--gather) cubic-bezier(.5,0,.3,1) calc(var(--i) * 60ms) both}
.wishOrbs i b{font-size:.4375rem;line-height:.5rem;color:#c0300a;text-align:center;max-width:1.5rem;word-break:break-all}
.wishOrbs::after{content:"";position:absolute;inset:-4rem;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,170,.95),rgba(255,180,60,.45) 45%,transparent);opacity:0;animation:wishFlare 900ms ease-out var(--flare) forwards}
.wishTx{display:flex;flex-direction:column;align-items:center;gap:.25rem;opacity:0;animation:wishTx .6s ease-out var(--flare) forwards}.wishTx b{font:400 1.75rem var(--disp);letter-spacing:.06em;color:#ffe6a0;text-shadow:0 0 1rem #ffb43a}.wishTx small{font-size:.875rem;color:#d8e0ff;letter-spacing:.12em;text-transform:uppercase}
@keyframes wishOv{0%{opacity:0}8%,85%{opacity:1}100%{opacity:0}}
@keyframes wishGather{from{opacity:0;transform:rotate(var(--a)) translateY(-11rem) rotate(calc(-1 * var(--a))) scale(.6)}to{opacity:1}}
@keyframes wishFlare{0%{opacity:0;scale:.4}35%{opacity:1;scale:1.1}100%{opacity:.25;scale:1.3}}
@keyframes wishTx{from{opacity:0;translate:0 .5rem}to{opacity:1;translate:0 0}}
.wishOv.red .wishOrbs i,.wishOv.red .wishOrbs::after,.wishOv.red .wishTx{animation-duration:.01s}
.trait.treaty{position:relative;box-shadow:inset 0 0 0 1px rgba(255,216,74,.55)}.trLink{position:absolute;right:.125rem;top:.0625rem;font:700 .625rem var(--body);color:#ffd84a;text-shadow:0 0 .25rem rgba(255,180,60,.8);pointer-events:none}
.treatySeal{position:absolute;z-index:9;display:flex;align-items:center;gap:.625rem;padding:.5rem .875rem .5rem .5rem;border-radius:1rem;border:2px solid #ffd84a;background:rgba(14,12,30,.94);box-shadow:0 0 1.25rem rgba(255,200,80,.5);pointer-events:none;animation:treatySeal 1.9s cubic-bezier(.2,.9,.3,1.2) forwards}
.tsRing{display:flex;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;border-radius:50%;border:3px double #ffd84a;color:#ffd84a;font:700 1.25rem var(--body)}
.tsTx{display:flex;flex-direction:column;line-height:1.2}.tsTx small{font-size:.625rem;letter-spacing:.14em;color:#ffd84a}.tsTx b{font:400 .875rem var(--disp);color:#fff;white-space:nowrap}.tsTx i{font-style:normal}
@keyframes treatySeal{0%{opacity:0;scale:2.2;rotate:-12deg}18%{opacity:1;scale:.92;rotate:0deg}26%{scale:1}82%{opacity:1}100%{opacity:0}}
.treatySeal.red{animation-name:augMomFade}
@media (prefers-reduced-motion:reduce){.wishOrbs i,.wishOrbs::after,.wishTx{animation-duration:.01s!important}.treatySeal{animation-name:augMomFade}}
@media (max-width:760px){.wishOrbs{width:11rem;height:11rem}.wishOrbs i{width:1.875rem;height:1.875rem;margin:-.9375rem;transform:rotate(var(--a)) translateY(-4.75rem) rotate(calc(-1 * var(--a)))}.wishTx b{font-size:1.25rem}.tsTx b{font-size:.75rem;white-space:normal}}