/* Star Pirates theme, layered over app.css. Glossy purple: deep violet panels, candy-bright plates with an inner
   light rim, a top gloss band, a diagonal sheen, a dark bottom lip and a soft outer glow. Tabs are radio keys:
   the selected one is pushed down and glows pink. Lilita One for everything big, Nunito for small print. */
/* small print: Sofia Sans Condensed, hosted here, drawn 12% larger so it reads at the old sizes */
@font-face { font-family: 'Sofia Sans Condensed'; font-style: normal; font-weight: 600 900; font-display: swap; size-adjust: 112%;
  src: url(../fonts/sofia-sans-condensed-latin.woff2) format('woff2'); }
:root {
  --bg: #1d0b45;          /* recessed wells: tracks, inputs */
  --bg-2: #3b1782;        /* panel */
  --bg-3: #7b35e6;        /* rows and cards */
  --bg-4: #a66bff;
  --line: #14062f;
  --ink: #170634;         /* outlines and text stroke */
  --fg: #ffffff;
  --muted: #efe3ff;
  --dim: #b9a3e8;
  --ally: #4fe3c4;
  --gold: #ffd23f;
  --gem: #ff5fd2;
  --good: #6fe05a;
  --glow: #ff5ce6;        /* selected and highlighted things */
  --arena-bg: #04050f;
  --scrim: #0a0420d9;
  --overlay: #1a0a3ce6;
  --display: "Lilita One", "Arial Black", sans-serif;
  --ui: "Lilita One", "Arial Black", sans-serif;
  --small: "Sofia Sans Condensed", "Nunito", system-ui, sans-serif;
  --stroke: 0 2px 0 var(--ink), 1.5px 0 0 var(--ink), -1.5px 0 0 var(--ink), 0 -1.5px 0 var(--ink), 1px 1px 0 var(--ink), -1px 1px 0 var(--ink), 1px -1px 0 var(--ink), -1px -1px 0 var(--ink);
  --stroke-sm: 0 1.5px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink);
  /* surfaces */
  --panel: linear-gradient(180deg, #4d1ea6 0%, #3a1683 45%, #2a0f63 100%);
  --plate: linear-gradient(180deg, #a463ff 0%, #8340f0 48%, #6a26d6 100%);
  --sheen: linear-gradient(112deg, #ffffff26 0 58%, #00000014 58% 100%);
  --stripes: repeating-linear-gradient(160deg, #ffffff0d 0 18px, #ffffff00 18px 46px);
  /* button fills */
  --blue: linear-gradient(180deg, #7ee8ff 0%, #2fb6ff 42%, #1680ea 100%);
  --pink: linear-gradient(180deg, #ffa3f0 0%, #ff4fd8 45%, #d42bb4 100%);
  --green: linear-gradient(180deg, #b6ff8f 0%, #5fe049 45%, #2fae2a 100%);
  --yellow: linear-gradient(180deg, #fff3a0 0%, #ffcf2f 45%, #f39a0c 100%);
  --red: linear-gradient(180deg, #ffa08a 0%, #ff5a4a 45%, #d62b2b 100%);
  --violet: linear-gradient(180deg, #c99bff 0%, #9654ff 45%, #6b2bdb 100%);
  /* the layered plate: dark outline, inner light rim, top gloss line, bottom shade, lip, glow */
  --rim: 0 0 0 2.5px var(--ink), inset 0 0 0 1.5px #ffffff4d, inset 0 3px 0 #ffffff80, inset 0 -5px 0 #0000003d;
  --lip: 0 5px 0 var(--ink);
  --r: 14px; --r-sm: 12px; --r-lg: 18px;
}
body { font-family: var(--ui); letter-spacing: .01em; }
/* the browser tints its bars from the page: space black up top, the tab bar's deep violet at the bottom */
html { background: linear-gradient(180deg, #04050f 0 50%, #1a0840 50% 100%); }
body { background: transparent; }

/* text: big type gets the outline, small print stays clean and readable */
.st, .nm, .buy, .wide-btn, .mbtn, .modal h2, .nav button, .sect, .chip-btn, .hint, .toast, .tag, .badge, .card .big, .stat b, .seg button, .lb-row .rk, .lb-row .stg, .lb-row .nm, .skill .t, .modal .reward {
  text-shadow: var(--stroke); font-weight: 400;
}
.ds, .card p, .modal p, .note, .empty, .stat span, .sub, .brk-row .h, .lb-sub, .lb-sub2 { font-family: var(--small); font-weight: 800; }
.ds { color: #f3e8ff; text-shadow: 0 1px 0 #2a0b5e; }
.ds b { color: #fff; }
.nm { font-size: 17px; }
.nm small { color: #f3e8ff; font-family: var(--small); font-weight: 900; text-shadow: var(--stroke-sm); }
.sect { color: #fff; font-size: 14px; letter-spacing: .04em; font-family: var(--small); font-weight: 900; }

/* ---------- HUD: small dark pills, plain bold white numbers, no ornaments ---------- */
.hud { gap: 5px; }
.cur { background: #05061acc; border: 0; border-radius: 8px; color: #fff; padding: 3px 9px 3px 5px; gap: 4px; min-height: 26px; box-shadow: none;
  font: 900 13.5px var(--small); letter-spacing: .01em; text-shadow: none; }
.cur svg { width: 15px; height: 15px; filter: none; }
.cur.gold, .cur.gem, .cur.dps { color: #fff; }
.cur.gold svg { color: var(--gold); } .cur.gem svg { color: var(--gem); } .cur.dps svg { color: var(--ally); }
.cur small { color: #b9c2e8; font: 900 9px var(--small); letter-spacing: .06em; }
.menu-btn { width: 32px; height: 26px; background: #05061acc; border: 0; border-radius: 8px; color: #fff; box-shadow: none; }
.menu-btn svg { width: 15px; height: 15px; filter: none; }

/* stage title */
.st { font-size: 26px; letter-spacing: .02em; }
.st em { color: #ff5a6e; }
.pips span { background: #ffffff38; box-shadow: 0 0 0 1.5px var(--ink); }
.pips span.on { background: #ffd23f; box-shadow: 0 0 0 1.5px var(--ink), 0 0 8px #ffd23f99; }
.sub { color: #fff; text-shadow: var(--stroke-sm); }

/* ---------- panels and plates ---------- */
.panel { background: var(--stripes), var(--panel); border: 0; border-radius: 20px;
  box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #b98cff40, inset 0 3px 0 #d8b8ff55, inset 0 -6px 0 #00000040, 0 0 28px #9b4dff55; }
.row, .card, .toggle, .achrow, .qrow, .lb-row, .tile { position: relative; background: var(--sheen), var(--plate); border: 0; border-radius: 16px;
  box-shadow: var(--rim), 0 4px 0 var(--ink), 0 0 14px #a560ff40; }
.row { margin-bottom: 4px; }
.row.best { box-shadow: var(--rim), 0 4px 0 var(--ink), 0 0 0 4.5px #ffe14a, 0 0 22px #ffe14a88; }
.ico { width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #e9d6ff, #8b4dff 70%, #5a1fc0); border: 0;
  box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 1.5px #ffffff66, inset 0 -4px 0 #0000003a, 0 0 10px #c08bff66; }
.ico canvas, .ico img { width: 48px; height: 48px; }
.row { grid-template-columns: 48px minmax(0, 1fr) auto; }
.ms { background: #1d0b45; border: 0; height: 7px; border-radius: 4px; box-shadow: 0 0 0 1.5px var(--ink), inset 0 1px 0 #00000066; }
.ms i { background: linear-gradient(180deg, #b6ff8f, #3fcf2f); box-shadow: 0 0 8px #7dff5a99; }
.tag { background: var(--yellow); color: #4a2100;  border: 0; box-shadow: 0 0 0 1.5px var(--ink), inset 0 1px 0 #ffffffaa; }

/* ---------- buttons: glossy candy plates ---------- */
.buy, .mbtn, .wide-btn, .chip-btn, .x-btn { position: relative; isolation: isolate; border: 0 !important; color: #fff; }
.buy::after, .mbtn::after, .wide-btn::after, .chip-btn::after, .x-btn::after, .skill::after, .nav button::after, .seg button::after {
  /* the gloss: a bright band across the top half */
  content: ''; position: absolute; left: 6%; right: 6%; top: 3px; height: 42%; border-radius: 10px 10px 40% 40% / 10px 10px 14px 14px;
  background: linear-gradient(180deg, #ffffff70, #ffffff10); pointer-events: none; z-index: -1;
}
.buy { min-width: 96px; border-radius: 14px; font-size: 17px; background: var(--sheen), var(--blue); box-shadow: var(--rim), var(--lip), 0 0 16px #3fc8ff88 !important; }
.buy small { opacity: 1; font-family: var(--small); font-weight: 900; text-shadow: var(--stroke-sm); }
.buy.gem { background: var(--sheen), var(--pink); box-shadow: var(--rim), var(--lip), 0 0 16px #ff5fd288 !important; }
.buy.cash { background: var(--sheen), var(--green); box-shadow: var(--rim), var(--lip), 0 0 16px #6fe05a88 !important; }
.buy.ally { background: var(--sheen), var(--yellow); box-shadow: var(--rim), var(--lip), 0 0 16px #ffcf2f88 !important; }
.buy:active:not(:disabled), .mbtn:active, .wide-btn:active:not(:disabled), .chip-btn:active, .x-btn:active { transform: translateY(4px); box-shadow: var(--rim), 0 1px 0 var(--ink) !important; }
.buy:disabled { background: linear-gradient(180deg, #7a6a9e, #4e3f73); color: #d9cdf2; box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 1.5px #ffffff26, inset 0 -4px 0 #00000040, var(--lip) !important; }
.buy:disabled::after { opacity: .35; }
.buy.owned, .buy.ad { background: #2a0f63aa; color: #d9cdf2; box-shadow: 0 0 0 2px #5b2fb0, inset 0 0 0 1px #ffffff1a !important; }
.buy.owned::after, .buy.ad::after { display: none; }
.mbtn, .wide-btn { border-radius: 16px; font-size: 18px; background: var(--sheen), var(--violet); box-shadow: var(--rim), var(--lip), 0 0 16px #a560ff77 !important; }
.mbtn.primary { background: var(--sheen), var(--blue); box-shadow: var(--rim), var(--lip), 0 0 18px #3fc8ff88 !important; }
.mbtn.cash { background: var(--sheen), var(--green); box-shadow: var(--rim), var(--lip), 0 0 18px #6fe05a88 !important; }
.mbtn.gem { background: var(--sheen), var(--pink); box-shadow: var(--rim), var(--lip), 0 0 18px #ff5fd288 !important; }
.mbtn.danger, .wide-btn.foe { background: var(--sheen), var(--red); box-shadow: var(--rim), var(--lip), 0 0 18px #ff5a4a88 !important; }
.wide-btn.shard, .mbtn.shard { background: var(--sheen), var(--blue); }
.mbtn { margin-bottom: 5px; }
.chip-btn { border-radius: 999px; font-size: 14px; background: var(--sheen), var(--violet); box-shadow: var(--rim), 0 4px 0 var(--ink), 0 0 16px #a560ff88; }
.chip-btn.boss { background: var(--sheen), var(--red); box-shadow: var(--rim), 0 4px 0 var(--ink), 0 0 18px #ff5a4aaa; }
.x-btn { background: var(--sheen), var(--red); border-radius: 12px; box-shadow: var(--rim), 0 4px 0 var(--ink); text-shadow: var(--stroke-sm); }

/* ---------- radio-key tabs: raised keys, the selected one is pushed in and glows ---------- */
.seg { background: transparent; border: 0; padding: 2px 2px 7px; gap: 6px; }
.seg button { position: relative; isolation: isolate; color: #e9dcff; font-size: 14px; border-radius: 12px; padding: 8px 10px;
  background: var(--sheen), var(--violet); box-shadow: var(--rim), 0 5px 0 var(--ink), 0 6px 10px #00000055; transition: transform .12s, box-shadow .12s, background .12s; }
.seg button[aria-pressed="true"] { color: #fff; transform: translateY(4px);
  background: var(--sheen), var(--pink); box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 1.5px #ffffff59, inset 0 4px 6px #00000055, 0 1px 0 var(--ink), 0 0 20px var(--glow), 0 0 40px #ff5ce666 !important; }
.seg button[aria-pressed="true"]::after { opacity: .55; }

.nav { background: linear-gradient(180deg, #2a0e60, #1a0840); border-top: 0; box-shadow: 0 -3px 0 var(--ink), 0 -10px 24px #00000066; gap: 6px; padding: 8px 8px calc(var(--safe-b) + 10px); }
.nav-pill { display: none; }
.nav button { position: relative; isolation: isolate; color: #e2d3ff; font-size: 12px; letter-spacing: .02em; border-radius: 14px; padding: 8px 0 9px;
  background: var(--sheen), var(--violet); box-shadow: var(--rim), 0 6px 0 var(--ink), 0 8px 12px #00000066; transition: transform .14s, box-shadow .14s; }
.nav button svg { fill: #fff; filter: drop-shadow(0 2px 0 var(--ink)); width: 24px; height: 24px; }
.nav button[aria-selected="true"] { color: #fff; transform: translateY(5px);
  background: var(--sheen), var(--pink); box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 1.5px #ffffff66, inset 0 5px 8px #00000059, 0 1px 0 var(--ink), 0 0 22px var(--glow), 0 0 44px #ff5ce677 !important; }
.nav button[aria-selected="true"] svg { fill: #fff; }
.nav button.locked { opacity: 1; filter: saturate(.25) brightness(.7); }
.nav button.pop svg { animation: navpop .38s cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- skills ---------- */
.skill { position: relative; isolation: isolate; width: 56px; height: 52px; border-radius: 15px; background: var(--sheen), var(--violet); border: 0; color: #fff;
  box-shadow: var(--rim), 0 4px 0 var(--ink), 0 0 12px #a560ff66; }
.skill svg { filter: drop-shadow(0 2px 0 var(--ink)); width: 26px; height: 26px; }
.skill.ready { box-shadow: var(--rim), 0 4px 0 var(--ink), 0 0 0 4px #ffe14a, 0 0 20px #ffe14a99; }
.skill.on { background: var(--sheen), var(--pink); box-shadow: var(--rim), 0 4px 0 var(--ink), 0 0 22px var(--glow); }
.skill.locked { background: linear-gradient(180deg, #5f5088, #3c2f63); opacity: 1; box-shadow: 0 0 0 2.5px var(--ink), inset 0 -4px 0 #0000003d, 0 4px 0 var(--ink); }
.skill.locked::after { opacity: .3; }

/* ---------- toasts, hints, badges ---------- */
.toast { background: #1a0a3ce6; border: 0; border-radius: 12px; font-size: 15px; color: #fff; box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 1.5px #b98cff4d, 0 0 16px #9b4dff66; }
.toast.gold { color: #ffd23f; } .toast.gem { color: #ff9be8; } .toast.ally { color: #7fffe0; } .toast.ach { color: #9dff7a; }
.hint { background: var(--sheen), var(--violet); border: 0; border-radius: 14px; font-size: 17px; box-shadow: var(--rim), 0 4px 0 var(--ink), 0 0 20px #a560ff88; }
.badge { background: #1a0a3ce6; border: 0; font-size: 11px; color: #fff; box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 1px #b98cff4d; }

/* ---------- modals ---------- */
.scrim { background: var(--scrim); }
.modal { background: var(--stripes), var(--panel); border: 0; border-radius: 22px;
  box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #b98cff55, inset 0 3px 0 #d8b8ff66, inset 0 -6px 0 #00000040, 0 10px 0 var(--ink), 0 0 40px #9b4dff77; }
.modal h2 { font-size: 26px; text-align: center; }
.modal p { color: #f3e8ff; text-shadow: 0 1px 0 #1d0b45; }
.sheet-head { border-bottom: 0; background: var(--sheen), var(--plate); box-shadow: 0 3px 0 var(--ink), inset 0 2px 0 #ffffff55; }
.days div { background: var(--sheen), var(--plate); border: 0; color: #fff; text-shadow: var(--stroke-sm); box-shadow: 0 0 0 2px var(--ink), inset 0 2px 0 #ffffff55; }
.days div b { color: #fff; }
.days div.today { outline: 0; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4.5px #ffe14a, 0 0 18px #ffe14a99; }
.stat { background: #2a0f63; border: 0; box-shadow: 0 0 0 2px var(--ink), inset 0 1px 0 #ffffff26; }
.stat span { color: #d9c7ff; }
.sw { background: #1d0b45; border: 0; box-shadow: 0 0 0 2px var(--ink), inset 0 2px 3px #00000080; }
.sw[aria-checked="true"] { background: var(--pink); box-shadow: 0 0 0 2px var(--ink), 0 0 12px var(--glow); }
.sw::after { background: #fff; box-shadow: 0 1px 2px #0008; }

/* arena overlay: the coach hint sits under the stage title (the ship rides low), toasts just below it */
.hint { top: calc(var(--hud-h) + 74px); bottom: auto; font-size: 15px; padding: 6px 14px; }
.toasts { top: calc(var(--hud-h) + 122px); }

/* app.css gives each button variant a dark "on" text color; on glossy plates every label is white with the outline */
.buy, .buy.gem, .buy.cash, .buy.ally, .buy.shard, .buy.quanta, .mbtn, .mbtn.primary, .mbtn.cash, .mbtn.gem, .mbtn.danger, .mbtn.shard, .mbtn.quanta,
.wide-btn, .wide-btn.shard, .wide-btn.quanta, .wide-btn.foe, .chip-btn, .chip-btn.boss, .x-btn, .seg button, .nav button, .skill { color: #fff !important; }
.buy.owned, .buy.ad, .buy:disabled { color: #d9cdf2 !important; }
.tag, .tag.foe { color: #fff !important; text-shadow: var(--stroke-sm); }
.tag.foe { background: var(--red); }

/* highlight: a small soft glint in the top-left corner instead of a full gloss band across the top */
.buy::after, .mbtn::after, .wide-btn::after, .chip-btn::after, .x-btn::after, .skill::after, .nav button::after, .seg button::after {
  left: 4px; right: auto; top: 3px; width: 38%; max-width: 46px; height: 46%; border-radius: 10px 0 0 0;
  background: radial-gradient(ellipse 100% 100% at 0% 0%, #ffffff8c 0%, #ffffff33 38%, #ffffff00 70%);
}
.chip-btn::after { border-radius: 999px 0 0 0; max-width: 34px; }

/* no gloss or glint on buttons */
.buy::after, .mbtn::after, .wide-btn::after, .chip-btn::after, .x-btn::after, .skill::after, .nav button::after, .seg button::after { display: none; }

/* buy buttons are colored by what they spend: gold = gold-orange, gems = pink, shards = blue, quanta = violet,
   real money = green; claim and equip (free) are teal */
:root { --goldbtn: linear-gradient(180deg, #ffe27a 0%, #ffb21f 45%, #f07a0c 100%); --teal: linear-gradient(180deg, #a8fff0 0%, #33e0c4 45%, #10a89a 100%); --quantabtn: linear-gradient(180deg, #ffb3f5 0%, #c964ff 45%, #8a2be2 100%); }
.buy { background: var(--sheen), var(--goldbtn); box-shadow: var(--rim), var(--lip), 0 0 16px #ffb21f88 !important; }
.buy.shard { background: var(--sheen), var(--blue); box-shadow: var(--rim), var(--lip), 0 0 16px #3fc8ff88 !important; }
.buy.quanta { background: var(--sheen), var(--quantabtn); box-shadow: var(--rim), var(--lip), 0 0 16px #c964ff88 !important; }
.buy.ally { background: var(--sheen), var(--teal); box-shadow: var(--rim), var(--lip), 0 0 16px #33e0c488 !important; }

/* crew portraits: no circle. The portrait pokes out past the card's top and left edges by a few pixels and is cut
   off along the card's bottom and by a straight slanted edge on the right */
.row { grid-template-columns: 58px minmax(0, 1fr) auto; overflow: visible; }
.row .ico { width: 66px; height: auto; align-self: stretch; margin: -13px 0 -8px -13px; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  clip-path: polygon(-20% -30%, 100% -30%, 100% 18%, 74% 100%, -20% 100%); }
.row .ico canvas, .row .ico img { object-fit: cover; object-position: 50% 0; }
.row .ico canvas, .row .ico img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: drop-shadow(0 2px 0 var(--ink)); }
/* the portrait's slanted edge runs right up to the text */
.row { grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 8px; }
.row .ico { width: 84px; margin-right: -7px; }

/* painted icons */
.ci.ci-img { width: 1.25em; height: 1.25em; margin: -.12em 0; }
.ci.ci-img img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 0 #0008); }
.cur .ico-img { width: 17px; height: 17px; flex: none; }

/* painted icons: bigger than the text they sit with */
.cur .ico-img { width: 24px; height: 24px; margin: -4px -1px -4px -3px; filter: drop-shadow(0 1px 0 #0009); }
.cur { padding: 3px 10px 3px 5px; min-height: 28px; }
.menu-btn { width: 40px; height: 30px; }
.menu-btn .ico-img { width: 31px; height: 31px; margin: -3px; filter: drop-shadow(0 1px 0 #0009); }
.ci.ci-img { width: 1.6em; height: 1.6em; margin: -.3em .02em -.3em -.1em; }
.nav button .tab-img { width: 34px; height: 34px; margin: -6px 0 -2px; filter: drop-shadow(0 2px 0 var(--ink)); pointer-events: none; }
.nav button.pop .tab-img { animation: navpop .38s cubic-bezier(.34, 1.56, .64, 1); }
.skill .pic { width: 40px; height: 40px; position: relative; z-index: 1; margin-top: -8px; filter: drop-shadow(0 2px 0 var(--ink)); pointer-events: none; }
.skill.locked .pic { filter: grayscale(1) brightness(.6) drop-shadow(0 2px 0 var(--ink)); }
.ico.ico-art { background: none !important; box-shadow: none !important; }
.ico.ico-art .pic { width: 46px; height: 46px; filter: drop-shadow(0 2px 0 var(--ink)); }
.tile-ico .pic { filter: drop-shadow(0 2px 0 var(--ink)); }
.brk-row .bi .pic { width: 22px; height: 22px; }

/* ---------- crew cards v3 ---------- */
.row { grid-template-columns: 70px minmax(0, 1fr) auto; column-gap: 8px; }
/* portrait: the whole character width from the left, cut by the card's bottom and a slanted right edge with a sharp ink line */
.row .ico { position: relative; width: 82px; margin: -10px -4px -8px -8px; clip-path: polygon(-20% -30%, 100% -30%, 100% 14%, 76% 100%, -20% 100%); }
.row .ico canvas, .row .ico img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; filter: drop-shadow(0 2px 0 var(--ink)); }
.row .ico::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--ink);
  clip-path: polygon(calc(100% - 5px) -30%, 100% -30%, 100% 14%, 76% 100%, calc(76% - 5px) 100%, calc(100% - 5px) 14%); }
/* name two sizes smaller; level and DPS white with an outline */
.row .nm { font-size: 14px; gap: 6px; }
.row .nm .lv { font: 400 12px var(--display); color: #fff; text-shadow: var(--stroke-sm); }
.row .ds { font: 800 13px var(--small); color: #fff; text-shadow: var(--stroke-sm); letter-spacing: .01em; }
/* buy column: the best-value tag sits on top of the buy button */
.buycol { display: flex; flex-direction: column; align-items: stretch; gap: 3px; justify-content: center; }
.best-tag { align-self: center; font: 400 11px var(--display) !important; letter-spacing: .04em; text-transform: uppercase; padding: 1px 8px 2px; border-radius: 7px;
  color: #fff !important; text-shadow: var(--stroke-sm) !important; background: var(--yellow) !important; box-shadow: 0 0 0 2px var(--ink), 0 0 10px #ffe14a88 !important; }
/* best value ring: outline, then the yellow ring, then the lip underneath it (the lip used to cover the ring's bottom) */
.row.best { box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 1.5px #ffffff4d, inset 0 3px 0 #ffffff80, inset 0 -5px 0 #0000003d, 0 0 0 5.5px #ffe14a, 0 0 0 8px var(--ink), 0 10px 0 var(--ink), 0 0 26px #ffe14a88; margin: 4px 0 10px; }

/* ---------- tab bar: warm wood keys, the active one glows yellow ---------- */
.nav { background: linear-gradient(180deg, #4a2408, #2c1404); box-shadow: 0 -3px 0 #1a0a02, 0 -10px 24px #00000066; }
.nav button { --wood-key: linear-gradient(180deg, #e08a3c 0%, #b8611f 50%, #8a4214 100%); background: var(--sheen), var(--wood-key);
  box-shadow: 0 0 0 2.5px #2a1003, inset 0 0 0 1.5px #ffd29a55, inset 0 3px 0 #ffd9a880, inset 0 -5px 0 #0000003d, 0 6px 0 #2a1003, 0 8px 12px #00000066; color: #ffe9cc; }
.nav button[aria-selected="true"] { background: var(--sheen), var(--yellow);
  box-shadow: 0 0 0 2.5px #2a1003, inset 0 0 0 1.5px #ffffff80, inset 0 5px 8px #0000004d, 0 1px 0 #2a1003, 0 0 22px #ffd23f, 0 0 44px #ffb21f88 !important; color: #fff; }
html { background: linear-gradient(180deg, #04050f 0 50%, #2c1404 50% 100%); }

/* ---------- boosters (skills): no plate, just the icon on a dark see-through disc ---------- */
.skill { width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle, #000000b3 0%, #00000080 62%, #00000000 72%) !important; box-shadow: none !important; overflow: visible; }
.skill .pic { width: 50px; height: 50px; margin-top: -2px; }
.skill .cd { border-radius: 50%; inset: 4px; }
.skill .t { bottom: -4px; font-size: 12px; }
.skill.ready .pic { filter: drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 0 8px #ffe14a); }
.skill.on .pic { filter: drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 0 10px var(--glow)); animation: pulse 1s ease-in-out infinite; }
.skill.locked { background: radial-gradient(circle, #00000099 0%, #00000066 62%, #00000000 72%) !important; }

/* design-sheet previews: no toasts or coach hints over the screen */
.preview .toasts, .preview .hint, .preview #aHint { display: none !important; }

/* ---------- tab bar v2: the open tab is raised, wide, with a big icon and its name; the rest sit lower,
   narrow, icon only ---------- */
.nav { display: flex; align-items: flex-end; gap: 5px; padding: 12px 8px calc(var(--safe-b) + 8px); }
.nav button { flex: 1 1 0; min-width: 0; padding: 7px 0 6px; transform: translateY(4px); transition: flex-grow .28s cubic-bezier(.34, 1.4, .64, 1), transform .2s, box-shadow .2s, background .2s; }
.nav button span { display: none; }
.nav button .tab-img { width: 30px; height: 30px; margin: 0; transition: width .25s, height .25s; }
.nav button[aria-selected="true"] { flex-grow: 2.1; transform: translateY(-8px); padding: 6px 0 7px;
  box-shadow: 0 0 0 2.5px #2a1003, inset 0 0 0 1.5px #ffffff80, inset 0 3px 0 #ffffffaa, inset 0 -5px 0 #b86b00, 0 7px 0 #2a1003, 0 0 22px #ffd23f, 0 0 44px #ffb21f77 !important; }
.nav button[aria-selected="true"] span { display: block; font-size: 13px; margin-top: 1px; }
.nav button[aria-selected="true"] .tab-img { width: 40px; height: 40px; margin-top: -14px; }
.nav button .dot { top: 3px; right: 6px; }

/* ---------- full-screen shop ---------- */
.app.shop-full .panel { position: fixed; z-index: 6; left: 8px; right: 8px; top: calc(var(--safe-t) + 44px); bottom: calc(var(--safe-b) + 78px); grid-row: auto; }
.app.shop-full .nav { position: relative; z-index: 7; }
.app.shop-full .skillbar, .app.shop-full .arena-ctl, .app.shop-full .stagebox, .app.shop-full .badges { visibility: hidden; }
.app.shop-full .hud { position: relative; z-index: 7; }
@media (min-width: 900px) { .app.shop-full .panel { position: relative; inset: auto; } }
/* tab bar: every key the same height; the open one is still wider with a bigger icon and its name */
.nav button, .nav button[aria-selected="true"] { transform: none; }
.nav button[aria-selected="true"] .tab-img { width: 34px; height: 34px; margin-top: 0; }
.nav button { min-height: 52px; justify-content: center; }

/* ---------- crew card stage: a black wedge panel (rounded like the card on the left, slanted on the right)
   with a slowly turning starburst in the pirate's color behind them ---------- */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }
.row .ico.stage { clip-path: none; overflow: visible; }
.row .ico.stage::after { display: none; }
.row .ico.stage::before { content: ''; position: absolute; z-index: 0; left: 0; top: 10px; bottom: 8px; right: -6px; border-radius: 15px 0 0 15px; background: #07030f;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); box-shadow: inset 0 0 0 1px #000; }
.row .ico.stage .burst { position: absolute; z-index: 0; left: 0; top: 10px; bottom: 8px; right: -6px; border-radius: 15px 0 0 15px; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
  background:
    radial-gradient(circle at 46% 46%, color-mix(in srgb, var(--hl) 60%, #fff) 0%, color-mix(in srgb, var(--hl) 70%, transparent) 20%, transparent 62%),
    repeating-conic-gradient(from var(--spin) at 46% 46%, color-mix(in srgb, var(--hl) 75%, transparent) 0deg 9deg, transparent 9deg 24deg);
  -webkit-mask: radial-gradient(circle at 46% 46%, #000 30%, #0008 62%, transparent 92%); mask: radial-gradient(circle at 46% 46%, #000 30%, #0008 62%, transparent 92%);
  animation: spin 18s linear infinite; }
/* the sharp slanted edge of the panel */
.row .ico.stage .burst::after { content: none; }
.row .ico.stage canvas { position: relative; z-index: 1; clip-path: polygon(-30% -40%, 100% -40%, 100% 14%, 78% 100%, -30% 100%); }
.row.best .ico.stage::before, .row.best .ico.stage .burst { top: 10px; }
@media (prefers-reduced-motion: reduce) { .row .ico.stage .burst { animation: none; } }

/* stage v2: spans the card's full height; the base is a deep shade of the pirate's color, the starburst sits still */
.row .ico.stage::before, .row .ico.stage .burst, .row.best .ico.stage::before, .row.best .ico.stage .burst { top: 2px; bottom: 0; left: 0; border-radius: 16px 0 0 16px; }
.row .ico.stage::before { background: radial-gradient(circle at 46% 46%, color-mix(in srgb, var(--hl) 45%, #12062a) 0%, color-mix(in srgb, var(--hl) 22%, #0a0418) 70%); box-shadow: none; }
.row .ico.stage .burst { animation: none; --spin: 0deg; }
/* stage v3: softer starburst on a slightly brighter base */
.row .ico.stage::before { background: radial-gradient(circle at 46% 46%, color-mix(in srgb, var(--hl) 55%, #1a0a36) 0%, color-mix(in srgb, var(--hl) 34%, #120626) 72%); }
.row .ico.stage .burst { opacity: .62; }

/* ---- painted icons, round 3 ---- */
.x-btn { background: none !important; box-shadow: none !important; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; }
.x-btn .pic { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 var(--ink)); }
.x-btn:active { transform: scale(.9) !important; }
.seg button .pic { width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; }
.toggle .nm .pic { width: 26px; height: 26px; vertical-align: -7px; margin-right: 8px; }
.achrow .m { background: none; width: 28px; height: 28px; }
.achrow .m .pic { width: 28px; height: 28px; }
.achrow.no .m .pic { filter: grayscale(.4) brightness(.8); }
.modal-art { display: grid; place-items: center; margin: -6px 0 4px; }
.modal-art .pic { width: 84px; height: 84px; filter: drop-shadow(0 4px 0 #0006); }
#aStage .pic { width: 22px; height: 22px; vertical-align: -5px; margin-right: 4px; }
#aSub.timer::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; background: url(../art/build/icons/boss-timer.webp) center / contain no-repeat; }
.row.locked .ico .pic { filter: drop-shadow(0 2px 0 var(--ink)); }

/* ---- toasts: small all-caps white text with a black outline, right-aligned under the leaderboard and menu buttons ---- */
.toasts { top: calc(var(--hud-h) + 4px); left: auto; right: 12px; transform: none; align-items: flex-end; gap: 3px; max-width: 30%; width: 30%; }
.toast, .toast.gold, .toast.gem, .toast.ally, .toast.ach, .toast.foe, .toast.shard, .toast.quanta {
  background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0;
  font-family: 'Barlow Condensed', var(--small), sans-serif; font-weight: 800; font-size: 14px; line-height: 1.15; letter-spacing: .03em;
  text-transform: uppercase; text-align: right; color: #fff;
  -webkit-text-stroke: 3px #000; paint-order: stroke fill; text-shadow: 0 2px 0 #000;
  animation: toastIn .22s ease-out;
}
.toast .ci, .toast img { -webkit-text-stroke: 0; }
@keyframes toastIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ---------- shop tiles v2: blue card with a sunburst and glow (Bounty Bash style) ----------
   title on top, big icon in the middle, a slim status pill, and the price as a full-width bar along the bottom */
.tiles { gap: 12px 8px; }
.tiles .tile { padding: 9px 6px 0; gap: 3px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 54%, #d9fbff 0%, #8fe3ff99 18%, #5cc8ff00 46%),
              repeating-conic-gradient(from 0deg at 50% 54%, #4cc6ff 0deg 9deg, #2b9bff 9deg 18deg);
  box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 2px #ffffff66, inset 0 3px 0 #ffffffaa, 0 0 18px #3fb8ff80, 0 4px 0 var(--ink); }
.tiles .tile::after { display: none; }
.tile .tile-nm { order: 1; font: 400 15px/1.1 var(--display); color: #fff; text-shadow: var(--stroke); min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
.tile .tile-ico { order: 2; width: 100%; height: 82px; background: none; border-radius: 0; margin: 0; }
.tile .tile-ico .pic, .tile .tile-ico svg { width: 80px !important; height: 80px !important; filter: drop-shadow(0 3px 0 var(--ink)); }
.tile .tile-ds { order: 3; min-height: 0; font: 800 11px/1.25 var(--small); color: #fff; text-shadow: none; background: #08163acc; border-radius: 999px; padding: 2px 9px; margin-bottom: 7px; max-width: 100%; }
.tile .tile-ds .pips-row { margin-top: 2px; }
.tile .buy { order: 4; width: calc(100% + 12px); margin: auto -6px 0; min-height: 44px; border-radius: 0; font-size: 18px;
  box-shadow: 0 -2.5px 0 var(--ink), inset 0 2px 0 #ffffff55, inset 0 -4px 0 #0000003d !important; }
.tile .buy:active:not(:disabled) { transform: none; filter: brightness(.92); box-shadow: 0 -2.5px 0 var(--ink), inset 0 3px 0 #0000003d !important; }
.tile .buy .ci.ci-img { width: 1.4em; height: 1.4em; }

/* no dark wells behind icons: non-crew rows show the icon on the card itself, bigger, uncropped */
.row .ico:not(.stage) { clip-path: none; width: 64px; margin: -4px 0 -4px -4px; display: grid; place-items: center; background: none; box-shadow: none; }
.row .ico:not(.stage)::after { display: none; }
.row .ico:not(.stage) img, .row .ico:not(.stage) .pic { width: 58px !important; height: 58px !important; object-fit: contain; }
.row .ico:not(.stage) svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 0 var(--ink)); }
.ico:not(.stage):not(.ico-art) { background: none; box-shadow: none; }
.slot, .stat { background: var(--sheen), var(--well, linear-gradient(180deg, #b884ff 0%, #9a5cf7 55%, #8344ea 100%)); box-shadow: 0 0 0 2px var(--ink), inset 0 1px 0 #ffffff40, inset 0 -3px 0 #0000002e; border: 0; }

/* every label on the panels and sheets gets the outlined treatment, no flat white text */
.ds, .card p, .note, .empty, .stat span, .stat b, .slot b, .brk-row .k, .brk-row .v, .brk-row .h, .modal p, .sheet-body p, .toggle .nm, .toggle .ds, .achrow .nm, .achrow .ds, .achrow .r, .lb-row, .sect, .card .big, .tile-ds b {
  color: #fff; text-shadow: var(--stroke-sm); }
.ds, .card p, .modal p, .note, .empty { font-weight: 800; }

/* ---------- ship page: brown and orange version of the theme ---------- */
.app.ship-theme {
  --panel: linear-gradient(180deg, #8a4a1f 0%, #6e3713 45%, #4f240a 100%);
  --plate: linear-gradient(180deg, #ffb35c 0%, #f08a2c 48%, #c9621a 100%);
  --violet: linear-gradient(180deg, #ffc27a 0%, #e8822e 45%, #b9561a 100%);
  --well: linear-gradient(180deg, #ffbe72 0%, #f59a44 55%, #e07f2a 100%); --bg: #3d1c07;
}
.app.ship-theme .panel { box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #ffc48a40, inset 0 3px 0 #ffd6a855, inset 0 -6px 0 #00000040, 0 0 28px #ff8a3d55; }
.app.ship-theme .seg button { color: #fff; }
.app.ship-theme .ms { background: #3d1c07; }

/* skill cards: orange sunburst on the ship page, same shape as the shop tiles; the recharge sits in the bottom bar */
.tiles.skills .tile { background: radial-gradient(circle at 50% 50%, #fff3c4 0%, #ffd27a99 18%, #ffb34700 46%),
  repeating-conic-gradient(from 0deg at 50% 50%, #ffb347 0deg 9deg, #f08a2c 9deg 18deg);
  box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 2px #ffffff66, inset 0 3px 0 #ffffffaa, 0 0 18px #ff9a3d80, 0 4px 0 var(--ink); }
.tiles.skills .tile .tile-nm { order: 1; min-height: 0; }
.tiles.skills .tile .tile-ico { order: 2; height: 70px; }
.tiles.skills .tile .tile-ico .pic { width: 66px !important; height: 66px !important; }
.tiles.skills .tile .tile-ds { order: 3; border-radius: 10px; font-size: 10.5px; padding: 3px 7px; }
.tile-bar { order: 4; width: calc(100% + 12px); margin: auto -6px 0; padding: 7px 4px; font: 400 13px/1 var(--display); color: #fff; text-shadow: var(--stroke-sm);
  background: var(--sheen), linear-gradient(180deg, #7a3a12, #5a2808); box-shadow: 0 -2.5px 0 var(--ink), inset 0 2px 0 #ffffff33; }
.tiles.skills .tile.locked { filter: saturate(.35) brightness(.8); }

/* ---------- shop tiles v3 ---------- */
/* fewer, wider rays */
.tiles .tile { background: radial-gradient(circle at 50% 54%, var(--t-glow, #d9fbff) 0%, color-mix(in srgb, var(--t-glow, #d9fbff) 55%, transparent) 18%, transparent 46%),
  repeating-conic-gradient(from 6deg at 50% 54%, var(--t-a, #4cc6ff) 0deg 15deg, var(--t-b, #2b9bff) 15deg 30deg);
  box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 2px #ffffff66, inset 0 3px 0 #ffffffaa, 0 0 18px var(--t-halo, #3fb8ff80), 0 4px 0 var(--ink); }
/* section colors */
.tiles.free { --t-a: #6fe86a; --t-b: #34c23a; --t-glow: #eaffd6; --t-halo: #5fe04980; }
.tiles.boost { --t-a: #e06bff; --t-b: #a83df0; --t-glow: #ffe0fb; --t-halo: #ff5ce680; }
.tiles.cosmetic { --t-a: #3fe0d0; --t-b: #16a8a8; --t-glow: #dcfffb; --t-halo: #33e0c480; }
.tiles.perm { --t-a: #ffd24a; --t-b: #f39a1c; --t-glow: #fff6cc; --t-halo: #ffb34780; }
/* corner tag inside the card (no longer cut off by the top edge), white with an outline */
.tile .rib, .tile .rib.good { top: 0; right: 0; left: auto; transform: none; z-index: 3; border-radius: 0 12px 0 10px; padding: 3px 7px 4px;
  font: 400 11px/1 var(--display); letter-spacing: .02em; color: #fff !important; text-shadow: var(--stroke-sm);
  background: var(--sheen), var(--pink); box-shadow: -2px 2px 0 var(--ink); }
.tile .rib.good { background: var(--sheen), var(--green); }
.tile:has(.rib) .tile-nm { margin-top: 10px; }
/* owned / equipped / claimed / max: a solid grey disabled bar, not see-through */
.buy.owned, .buy.owned:disabled, .tile .buy.owned { background: linear-gradient(180deg, #8d8a99 0%, #6c6878 55%, #57536a 100%) !important; color: #ecebf2 !important; text-shadow: var(--stroke-sm); opacity: 1; filter: none;
  box-shadow: var(--rim) !important; }
.tile .buy.owned { box-shadow: 0 -2.5px 0 var(--ink), inset 0 2px 0 #ffffff40, inset 0 -4px 0 #0000003d !important; }

/* purchase tier pips: bigger, empty ones are dark sockets, owned tiers glow in a rarity ladder */
.tile .pips-row { display: flex; justify-content: center; gap: 4px; margin: 3px 0 1px; }
.tile .pips-row i { width: 13px; height: 9px; border-radius: 3px; background: #2b2540; box-shadow: 0 0 0 1.5px #000, inset 0 2px 0 #0000006b; }
.tile .pips-row i.on { box-shadow: 0 0 0 1.5px #000, inset 0 2px 0 #ffffffa6, inset 0 -2px 0 #00000040, 0 0 7px var(--pc); background: var(--pc); }
.tile .pips-row i.t1 { --pc: #5fe049; } .tile .pips-row i.t2 { --pc: #2fb6ff; } .tile .pips-row i.t3 { --pc: #b45cff; }
.tile .pips-row i.t4 { --pc: #ff9a2e; } .tile .pips-row i.t5 { --pc: #ff4a4a; } .tile .pips-row i.t6 { --pc: #ffd23f; }

/* ---------- lab: green version of the theme, slots and research as cards ---------- */
.app.lab-theme {
  --panel: linear-gradient(180deg, #1f7a3a 0%, #155e2b 45%, #0c421d 100%);
  --plate: linear-gradient(180deg, #7ee86a 0%, #45c43f 48%, #26a02a 100%);
  --violet: linear-gradient(180deg, #a6f58f 0%, #4fcf46 45%, #2a9a2c 100%);
  --well: linear-gradient(180deg, #8ff07c 0%, #5bd451 55%, #3cb53a 100%); --bg: #08331a;
}
.app.lab-theme .panel { box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #b6ff9a40, inset 0 3px 0 #d6ffc455, inset 0 -6px 0 #00000040, 0 0 28px #5fe04955; }
.tiles.lab { --t-a: #7be86a; --t-b: #33b83c; --t-glow: #efffdc; --t-halo: #5fe04980; }
.tiles.lab .tile-ico svg { width: 56px !important; height: 56px !important; filter: drop-shadow(0 3px 0 var(--ink)); }
.tiles.lab .tile-nm { font-size: 14px; }
.tiles.lab .tile-ds { font-size: 10.5px; border-radius: 10px; }
.tile .slot-time { display: block; font: 400 17px/1.1 var(--display); color: #fff; text-shadow: var(--stroke-sm); }
.tile.slot-run .tile-ds { width: 100%; padding: 4px 8px 6px; }
.tile.slot-run .ms { margin-top: 4px; height: 7px; }
.tile.slot-free { filter: saturate(.55); }
.tile.slot-free .tile-ico .pic { opacity: .7; }
/* bigger labels and gem on every tile button */
.tile .buy .amt { font-size: 17px; gap: 3px; }
.tile .buy small { font-size: 11px; }

/* lab cards are not shop items: a plain glossy green plate (no sunburst), level tag in the corner, the description as
   outlined text, and a full-width progress bar with a big timer on running slots */
.tiles.lab .tile { background: var(--sheen), linear-gradient(180deg, #8af07a 0%, #4fcf46 50%, #2fa834 100%);
  box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 1.5px #ffffff59, inset 0 3px 0 #ffffff99, 0 4px 0 var(--ink); padding-top: 22px; }
.tiles.lab .tile-nm { min-height: 0; margin-top: 2px; }
.tiles.lab .tile-ico { height: 62px; }
.tiles.lab .tile-ds { background: none; padding: 0 2px; margin-bottom: 6px; font: 800 11px/1.25 var(--small); color: #fff; text-shadow: var(--stroke-sm); min-height: 2.6em; }
.tiles.lab .tile-ds .nx { color: #fff3a0; }
.lab-lv { position: absolute; top: 0; left: 0; z-index: 3; padding: 3px 7px 4px; border-radius: 12px 0 10px 0; font: 400 11px/1 var(--display); color: #fff; text-shadow: var(--stroke-sm);
  background: var(--sheen), linear-gradient(180deg, #2f8f3a, #1d6b2a); box-shadow: 2px 2px 0 var(--ink); }
.slot-prog { order: 3; width: 100%; padding: 0 2px; margin-bottom: 8px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.slot-prog .slot-time { text-align: center; font-size: 18px; }
.slot-prog .ms { width: 100%; height: 10px; margin: 0; background: #0c421d; }
.slot-prog .ms i { background: linear-gradient(180deg, #fff6a0, #ffc93a); box-shadow: 0 0 8px #ffd23f99; }
.tiles.lab .tile.slot-free { filter: none; opacity: .85; }
.tiles.lab .tile-ico .pic { width: 62px !important; height: 62px !important; }

/* lab cards v3: dark green rim fading to a lighter green center; title and description up top, icon, "next" at the bottom */
.tiles.lab .tile { background: var(--sheen), radial-gradient(circle at 50% 48%, #5fcf55 0%, #2f9a36 42%, #145a22 85%, #0d461a 100%); padding-top: 20px; }
.tiles.lab .tile-nm { order: 1; font-size: 15px; margin-top: 0; }
.tiles.lab .lab-desc { order: 2; font: 800 12.5px/1.2 var(--small); color: #fff; text-shadow: var(--stroke-sm); text-align: center; padding: 0 2px; min-height: 2.4em; }
.tiles.lab .tile-ico { order: 3; height: 56px; }
.tiles.lab .tile-ico svg, .tiles.lab .tile-ico .pic { width: 52px !important; height: 52px !important; }
.tiles.lab .tile-ds { order: 4; font-size: 12px; color: #fff3a0; min-height: 1.3em; margin: 2px 0 7px; }
.tiles.lab .slot-prog { order: 4; }
.tiles.lab .tile .buy { order: 5; }
.tiles.lab .tile .buy.shard span { font-size: 16px; line-height: 1; }
.tiles.lab .tile .buy.shard small { font: 400 13px/1 var(--display); opacity: 1; }

/* lab cards v4: two per row and shorter. The icon sits left of the title and description; next, progress and button span the width */
.tiles.lab { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
.tiles.lab .tile { display: grid; grid-template-columns: 50px minmax(0, 1fr); grid-template-areas: "ico nm" "ico desc" "ds ds" "prog prog" "btn btn";
  align-items: center; column-gap: 8px; row-gap: 2px; text-align: left; padding: 22px 8px 0; }
.tiles.lab .tile-ico { grid-area: ico; width: 50px; height: 50px; align-self: center; }
.tiles.lab .tile-ico svg, .tiles.lab .tile-ico .pic { width: 46px !important; height: 46px !important; }
.tiles.lab .tile-nm { grid-area: nm; justify-content: flex-start; text-align: left; align-self: end; }
.tiles.lab .lab-desc { grid-area: desc; text-align: left; min-height: 0; align-self: start; padding: 0; }
.tiles.lab .tile-ds { grid-area: ds; justify-self: center; text-align: center; margin: 4px 0 6px; min-height: 0; }
.tiles.lab .tile-ds:empty { display: none; }
.tiles.lab .slot-prog { grid-area: prog; margin: 4px 0 7px; }
.tiles.lab .tile .buy { grid-area: btn; width: calc(100% + 16px); margin: 0 -8px; min-height: 40px; }
.tiles.lab .slot-prog .slot-time { font-size: 16px; }
.tiles.lab .tile { background: radial-gradient(circle at 50% 48%, #5fcf55 0%, #2f9a36 42%, #145a22 85%, #0d461a 100%) !important; box-shadow: 0 0 0 2.5px var(--ink), 0 4px 0 var(--ink) !important; }
.tiles.lab .tile::before, .tiles.lab .tile::after { display: none !important; }
/* free research slot: flask left, "Slot 2" and "Free" beside it, "Pick below" as the bottom bar */
.tiles.lab .slot-free .tile-ds { grid-area: desc; justify-self: start; text-align: left; margin: 0; color: #fff; }
.tiles.lab .tile-bar { grid-area: btn; width: calc(100% + 16px); margin: 8px -8px 0; text-align: center; }
.tiles.lab .slot-free { padding-top: 14px; }
.lab-row .ds .nx { color: #fff3a0; }
.lab-row .buy.owned { min-width: 96px; }

/* =====================================================================================================
   DESIGN SYSTEM: text outline. One rule for every piece of UI text: a real stroke drawn behind the letters,
   sized by each element's own font (0.2em, so about 0.1em shows outside the glyph), plus a 2px ink drop.
   The old --stroke / --stroke-sm text-shadow fakes are reduced to the drop so nothing doubles up.
   ===================================================================================================== */
:root { --stroke: 0 .08em 0 var(--ink); --stroke-sm: 0 .08em 0 var(--ink); }
.app *:not(input):not(textarea):not(select):not(svg):not(svg *), .modal *:not(input):not(textarea):not(select):not(svg):not(svg *), .toasts * {
  -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; }
.app input, .app textarea { -webkit-text-stroke: 0; }

/* =====================================================================================================
   DESIGN SYSTEM: research slot card. Every slot (running, free, annex) has the same four bands:
   [icon | title + one line]  /  middle (timer + progress, or a hint)  /  bottom bar (button or label)
   ===================================================================================================== */
.tiles.lab.slots .tile { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "ico nm" "ico desc" "prog prog" "btn btn"; padding: 22px 10px 0; min-height: 168px; row-gap: 2px; }
.tiles.lab.slots .tile-ds { grid-area: desc; justify-self: start; text-align: left; margin: 0; color: #fff; font: 800 12.5px/1.2 var(--small); }
.tiles.lab.slots .slot-prog, .tiles.lab.slots .slot-hint { grid-area: prog; align-self: center; margin: 8px 0; }
.slot-hint { text-align: center; font: 800 12px/1.2 var(--small); color: #fff3a0; }
.tiles.lab.slots .tile .buy, .tiles.lab.slots .tile-bar { grid-area: btn; align-self: end; width: calc(100% + 20px); margin: 0 -10px; min-height: 40px; display: grid; place-items: center; }
.tiles.lab.slots .slot-free { padding-top: 22px; opacity: 1; }
.slot-prog .slot-time { font-size: 18px; line-height: 1.25; padding: 0 .1em; }
/* a plain explainer line on the panel, no card behind it */
.note-plain { padding: 2px 6px 4px; }
.note-plain p { margin: 0; font: 800 12.5px/1.35 var(--small); color: #fff; }

/* crew cards about 10% shorter (82 to 74px) */
.row.crew { padding-top: 4px; padding-bottom: 4px; }
/* best value: green tag and ring */
.best-tag { background: var(--green) !important; box-shadow: 0 0 0 2px var(--ink), 0 0 10px #5fe04988 !important; }
.row.best { box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 1.5px #ffffff4d, inset 0 3px 0 #ffffff80, inset 0 -5px 0 #0000003d, 0 0 0 5.5px #5fe049, 0 0 0 8px var(--ink), 0 10px 0 var(--ink), 0 0 26px #5fe04988; }
/* open tab: bigger icon and label */
.nav button[aria-selected="true"] .tab-img { width: 42px !important; height: 42px !important; margin-top: -4px !important; }
.nav button[aria-selected="true"] span { font-size: 15px !important; }
/* notification dot: bright red with a white ring and an ink outline so it reads on the wood */
.nav button .dot, .menu-btn .dot { width: 13px; height: 13px; background: #ff2a3d; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink), 0 2px 4px #0008; top: 5px; right: 8px; }
/* crew name and level stay on one line; a long name trims with an ellipsis instead of wrapping */
.row.crew .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.row.crew .nm .lv { display: inline; margin-left: 4px; }
/* crew portrait matches the shorter card: pokes 2px over the top, flush with the bottom */
.row.crew .ico { margin-top: -6px; margin-bottom: -4px; }
/* the name trims, the level always shows */
.row.crew .nm { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; overflow: visible; }
.row.crew .nm .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row.crew .nm .lv { flex: none; margin-left: 0; }
/* the gain and next milestone in a soft yellow */
.row.crew .ds .gain { color: #ffe9a3; }
.row.crew .buy .q:empty { display: none; }
.row.crew .nm { flex-wrap: nowrap !important; } .row.crew .nm .n { flex: 0 1 auto; white-space: nowrap; }
/* the portrait fills its slot without driving the card height */
.row.crew .ico.stage canvas, .row.crew .ico.stage img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.row.crew .ico.stage { height: auto; min-height: 0; }
.row.crew { min-height: 74px; }
/* crew portrait: the character is cut on exactly the backdrop's slant, and a shiny white line runs along that edge */
.row.crew .ico.stage canvas { clip-path: polygon(-30% -40%, calc(100% + 6px) -40%, calc(100% + 6px) 2px, calc(78% + 4.7px) 100%, -30% 100%); }
.row.crew .ico.stage::after { display: block; content: ''; position: absolute; z-index: 3; left: 0; top: 2px; bottom: 0; right: -6px; pointer-events: none; background: linear-gradient(180deg, #fff, #ffffffd0 60%, #e9dcff);
  clip-path: polygon(calc(100% - 4px) 0, 100% 0, 78% 100%, calc(78% - 4px) 100%); filter: drop-shadow(0 0 3px #fff9); }
.row.crew .ico.stage::after { background: linear-gradient(180deg, #ffffffb0, #ffffff70 60%, #e9dcff60); filter: none; clip-path: polygon(calc(100% - 2.5px) 0, 100% 0, 78% 100%, calc(78% - 2.5px) 100%); }
.row.crew .ico.stage::after { background: #d9cdf0; }
/* unhired crew: no progress bar; the description wraps to two lines */
.row.crew.nobar .ms { display: none; }
.row.crew.nobar .ds { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
/* locked crew: a Pokemon-style silhouette on the full-strength backdrop; only the text and button are dimmed */
.row.crew.locked { opacity: 1; }
.row.crew.locked .meta, .row.crew.locked .buy { opacity: .6; }
.row.crew.locked .ico.stage canvas { filter: drop-shadow(0 0 3px #d2beffcc); }

/* =====================================================================================================
   BOOST BUTTONS. A dark round socket with an ink outline; a progress ring around it carries the state.
   ready: gold ring + slow glow pulse · on: ring in the boost's color drains, seconds at the bottom ·
   cool: dimmed icon, red ring fills toward ready, countdown over the icon · locked: grey, padlock, unlock stage
   ===================================================================================================== */
.skillbar { gap: 10px; }
.skillbar .skill { width: 56px; height: 56px; padding: 0; border-radius: 50%; display: grid; place-items: center; overflow: visible; animation: none;
  background: radial-gradient(circle at 50% 38%, #3a2470 0%, #1c0f3d 70%) !important; box-shadow: 0 0 0 2.5px var(--ink), inset 0 2px 0 #ffffff26, 0 3px 0 var(--ink) !important; }
.skillbar .skill > * { grid-area: 1 / 1; }
.skillbar .skill .ring { width: 60px; height: 60px; transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.skillbar .skill .ring circle { fill: none; stroke-width: 5; }
.skillbar .skill .track { stroke: #00000080; }
.skillbar .skill .arc { stroke: var(--ring, #ffd23f); stroke-dasharray: 100; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .2s; }
.skillbar .skill .pic { width: 34px; height: 34px; margin: 0; z-index: 1; filter: drop-shadow(0 2px 0 var(--ink)); transition: filter .2s, transform .2s; }
.skillbar .skill .t { z-index: 2; position: static; font: 400 14px/1 var(--display); color: #fff; pointer-events: none; }
.skillbar .skill .lock { display: none; z-index: 2; }
/* each boost's own active color */
.skill[data-skill="barrage"] { --hue: #ff7a2e; } .skill[data-skill="rain"] { --hue: #ffd23f; } .skill[data-skill="clock"] { --hue: #4fe3ff; }
.skill[data-skill="stasis"] { --hue: #7fb2ff; } .skill[data-skill="fortune"] { --hue: #6fe05a; }
/* ready */
.skillbar .skill.ready { --ring: #ffd23f; animation: boostGlow 1.6s ease-in-out infinite; }
.skillbar .skill.ready .t { display: none; }
@keyframes boostGlow { 0%, 100% { filter: drop-shadow(0 0 0 #ffd23f00); } 50% { filter: drop-shadow(0 0 8px #ffd23fcc); } }
.skillbar .skill.pop { animation: boostPop .45s cubic-bezier(.34, 1.56, .64, 1), boostGlow 1.6s ease-in-out .45s infinite; }
@keyframes boostPop { 0% { transform: scale(.8); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* active */
.skillbar .skill.on { --ring: var(--hue); filter: drop-shadow(0 0 10px var(--hue)); }
.skillbar .skill.on .pic { animation: pulse 1s ease-in-out infinite; }
.skillbar .skill.on .t { align-self: end; margin-bottom: -10px; font-size: 12px; padding: 2px 6px 3px; border-radius: 8px; background: var(--hue); color: #fff; box-shadow: 0 0 0 2px var(--ink); }
/* recharging */
.skillbar .skill.cool { --ring: #ff4a4a; }
.skillbar .skill.cool .pic { filter: grayscale(.85) brightness(.55); }
.skillbar .skill.cool .t { font-size: 13px; }
/* locked */
.skillbar .skill.locked { --ring: transparent; background: radial-gradient(circle at 50% 38%, #3b3550 0%, #211c33 70%) !important; }
.skillbar .skill.locked .pic { filter: grayscale(1) brightness(.4); }
.skillbar .skill.locked .lock { display: block; align-self: center; }
.skillbar .skill.locked .lock .pic { width: 22px; height: 22px; filter: drop-shadow(0 2px 0 var(--ink)); }
.skillbar .skill.locked .t { align-self: end; margin-bottom: -10px; font-size: 11px; padding: 2px 6px 3px; border-radius: 8px; background: #4a4560; box-shadow: 0 0 0 2px var(--ink); }
.skillbar .skill.locked .t::before { content: 'Stage '; }
@media (prefers-reduced-motion: reduce) { .skillbar .skill, .skillbar .skill .pic { animation: none !important; } }
.skillbar .skill.locked .t { white-space: nowrap; }
/* boost socket: plain 50% black, no blue */
.skillbar .skill, .skillbar .skill.locked { background: #00000080 !important; }
.skillbar .skill.locked .lock .pic { width: 32px !important; height: 32px !important; margin-top: -4px; }
/* the socket is exactly the ring's size: no separate outline circle around it */
.skillbar .skill { width: 60px; height: 60px; box-shadow: none !important; }
.skillbar .skill .ring { width: 60px; height: 60px; }
.skillbar .skill .ring circle { stroke-width: 6; }
.skillbar .skill .track { stroke: #000000b3; }
/* boosts 15% smaller; the ring is pinned over the button (it was sitting 2px high) and thinner */
.skillbar .skill { width: 51px; height: 51px; position: relative; }
.skillbar .skill .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.skillbar .skill .ring circle { stroke-width: 4; }
.skillbar .skill .pic { width: 29px; height: 29px; }
.skillbar .skill.locked .lock .pic { width: 27px !important; height: 27px !important; margin-top: -3px; }
.skillbar .skill .t { font-size: 12px; }
.skillbar .skill.on .t, .skillbar .skill.locked .t { font-size: 10.5px; margin-bottom: -9px; }
/* next award tracker: 50% black, tucked right under the DPS readout */
.ach-track { top: calc(var(--hud-h) - 12px); background: #00000080; border: 0; box-shadow: none; }
.skillbar .skill .ring { margin: 0 !important; }
.chip-btn.boss { display: inline-flex; align-items: center; gap: 6px; padding-left: 6px; }
.chip-btn.boss .pic { width: 34px; height: 34px; margin: -10px 0 -8px; filter: drop-shadow(0 2px 0 var(--ink)); }
/* stage progress dots: smaller, above the stage number */
.stagebox #aPips { order: -1; gap: 3px; margin-bottom: 1px; }
.stagebox .pips span { width: 6px; height: 6px; }
/* Overdrive, Frenzy and other badges stack on the left, under the award tracker */
.badges { top: calc(var(--hud-h) + 44px); left: 12px; right: auto; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 3px; }
.badge { background: #00000080; box-shadow: none; }
/* stage block tucked up under the stats bar, dots tighter */
.stagebox { top: calc(var(--hud-h) - 10px); gap: 1px; }
.stagebox #aPips { gap: 2px; margin-bottom: 0; }
/* badges sit right under the award tracker and are never wider than it */
.badges { top: calc(var(--hud-h) + 30px); }
.badge { max-width: 108px; white-space: normal; line-height: 1.15; box-sizing: border-box; }
#aStage .pic { width: 30px; height: 30px; vertical-align: -7px; margin-right: 5px; }
/* farming: the Fight boss button replaces the stage title and dots; the stage shows in small print under it */
.stagebox.farm #aStage, .stagebox.farm #aPips { display: none; }
.stagebox .fight-top { pointer-events: auto; font-size: 20px; padding: 6px 18px 6px 8px; margin: 2px 0 3px; }
.stagebox .fight-top .pic { width: 40px; height: 40px; margin: -12px 0 -10px; }
.stagebox .fight-top[hidden] { display: none; }
.stagebox .fight-top { font-size: 15px; padding: 4px 12px 4px 6px; gap: 4px; margin: 4px 0 2px; max-width: 148px; white-space: nowrap; }
.stagebox .fight-top .pic { width: 30px; height: 30px; margin: -8px 0 -8px; }
.stagebox .fight-top { font-size: 17px; padding: 5px 14px 5px 6px; max-width: 168px; }
.stagebox .fight-top .pic { width: 34px; height: 34px; margin: -9px 0 -9px; }
/* boss-fight repair card: bleeds in from the left edge at the ship's height, square on the left, rounded on the right */
.extend-card { position: absolute; left: 0; top: 30%; z-index: 4; width: 70px; padding: 8px 6px 7px 4px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 0; border-radius: 0 16px 16px 0; color: #fff; background: var(--sheen), linear-gradient(180deg, #8af07a 0%, #45c43f 55%, #2a9a2c 100%);
  box-shadow: 2.5px 0 0 var(--ink), 0 2.5px 0 var(--ink), 0 -2.5px 0 var(--ink), inset 0 2px 0 #ffffff80, 0 5px 0 var(--ink), 0 0 16px #5fe04988;
  animation: extIn .4s cubic-bezier(.34, 1.56, .64, 1); }
.extend-card[hidden] { display: none; }
.extend-card b { font: 400 20px/1 var(--display); }
.extend-card span { font: 400 11px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.extend-card .amt { font: 400 14px/1 var(--display); font-style: normal; margin-top: 4px; padding: 3px 7px 4px 3px; border-radius: 9px; background: #0000004d; display: inline-flex; align-items: center; gap: 2px; }
.extend-card:active { transform: translateX(-3px) scale(.97); }
@keyframes extIn { from { transform: translateX(-100%); } to { transform: none; } }
.app.shop-full .extend-card { visibility: hidden; }
/* =====================================================================================================
   BOOSTS v3: wooden keys like the tab bar. A round wood disc with the same rim and lip as the nav keys;
   the state ring runs around its edge (gold ready, boost color active, red recharging)
   ===================================================================================================== */
.skillbar .skill, .skillbar .skill.locked {
  background: radial-gradient(circle at 50% 34%, #e8954a 0%, #c06a26 46%, #8a4214 78%, #6a300c 100%) !important;
  box-shadow: inset 0 0 0 3px #4a2408, inset 0 3px 0 6px #ffffff00, 0 0 0 2.5px #1a0a02, 0 4px 0 #1a0a02 !important; }
.skillbar .skill .track { stroke: #3a1a06; }
.skillbar .skill .ring { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
.skillbar .skill.cool .pic { filter: grayscale(.7) brightness(.6) sepia(.3); }
.skillbar .skill.cool .t { text-shadow: 0 1px 0 #1a0a02; }
.skillbar .skill.locked { background: radial-gradient(circle at 50% 34%, #9a7a5c 0%, #6f5238 55%, #4a3422 100%) !important; }
.skillbar .skill.locked .pic { filter: grayscale(1) brightness(.35); }
.skillbar .skill.locked .t { background: linear-gradient(180deg, #8a4214, #5a2808); }
.skillbar .skill.ready { filter: none; animation: boostGlow 1.6s ease-in-out infinite; }
.skillbar .skill:active:not(.locked) { transform: translateY(3px); box-shadow: inset 0 0 0 3px #4a2408, 0 0 0 2.5px #1a0a02, 0 1px 0 #1a0a02 !important; }
.skillbar .skill, .skillbar .skill.locked { background: var(--sheen), linear-gradient(180deg, #e08a3c 0%, #b8611f 50%, #8a4214 100%) !important;
  box-shadow: 0 0 0 2.5px #2a1003, inset 0 0 0 1.5px #ffd29a55, inset 0 3px 0 #ffd9a880, inset 0 -5px 0 #0000003d, 0 5px 0 #2a1003, 0 7px 10px #00000066 !important; }
.skillbar .skill.locked { filter: saturate(.35) brightness(.8); }
.skillbar .skill .track { stroke: #2a100399; }
/* boost ring IS the disc's outline: no separate outer outline or offset lip, so ring and wood share one circle */
.skillbar .skill, .skillbar .skill.locked { box-shadow: inset 0 0 0 1.5px #ffd29a40, inset 0 4px 0 #ffd9a870, inset 0 -5px 0 #00000038 !important; }
.skillbar .skill { filter: drop-shadow(0 4px 0 #2a1003) drop-shadow(0 6px 6px #0006); }
.skillbar .skill .ring { inset: 0 !important; width: 100% !important; height: 100% !important; }
.skillbar .skill .ring circle { stroke-width: 5; }
.skillbar .skill .track { stroke: #2a1003; }
.skillbar .skill.on { filter: drop-shadow(0 4px 0 #2a1003) drop-shadow(0 0 9px var(--hue)); }
.skillbar .skill.locked { filter: saturate(.35) brightness(.8) drop-shadow(0 4px 0 #2a1003); }
@keyframes boostGlow { 0%, 100% { filter: drop-shadow(0 4px 0 #2a1003) drop-shadow(0 0 0 #ffd23f00); } 50% { filter: drop-shadow(0 4px 0 #2a1003) drop-shadow(0 0 8px #ffd23fcc); } }
.skillbar .skill:active:not(.locked) { transform: translateY(3px); box-shadow: inset 0 0 0 1.5px #ffd29a40, inset 0 3px 0 #00000040 !important; }
/* boost shadow: one soft, centered shadow only (the hard lip read as a second, offset circle) */
.skillbar .skill { filter: drop-shadow(0 3px 5px #000a); }
.skillbar .skill.on { filter: drop-shadow(0 3px 5px #000a) drop-shadow(0 0 9px var(--hue)); }
.skillbar .skill.locked { filter: saturate(.35) brightness(.8) drop-shadow(0 3px 5px #000a); }
@keyframes boostGlow { 0%, 100% { filter: drop-shadow(0 3px 5px #000a); } 50% { filter: drop-shadow(0 3px 5px #000a) drop-shadow(0 0 8px #ffd23fcc); } }
/* Safari clips filtered rounded elements, so the boost shadow and glows use box-shadow, never filter */
.skillbar .skill, .skillbar .skill.on, .skillbar .skill.ready { filter: none !important; overflow: visible !important; }
.skillbar .skill { box-shadow: inset 0 0 0 1.5px #ffd29a40, inset 0 4px 0 #ffd9a870, inset 0 -5px 0 #00000038, 0 3px 6px #000a !important; }
.skillbar .skill.on { box-shadow: inset 0 0 0 1.5px #ffd29a40, inset 0 4px 0 #ffd9a870, inset 0 -5px 0 #00000038, 0 3px 6px #000a, 0 0 14px var(--hue) !important; }
.skillbar .skill.locked { filter: saturate(.35) brightness(.8) !important; }
.skillbar .skill.ready { animation: boostGlow2 1.6s ease-in-out infinite; }
.skillbar .skill.pop { animation: boostPop .45s cubic-bezier(.34, 1.56, .64, 1), boostGlow2 1.6s ease-in-out .45s infinite; }
@keyframes boostGlow2 { 0%, 100% { box-shadow: inset 0 0 0 1.5px #ffd29a40, inset 0 4px 0 #ffd9a870, inset 0 -5px 0 #00000038, 0 3px 6px #000a; }
  50% { box-shadow: inset 0 0 0 1.5px #ffd29a40, inset 0 4px 0 #ffd9a870, inset 0 -5px 0 #00000038, 0 3px 6px #000a, 0 0 14px #ffd23fcc; } }
.skillbar .skill .pic { position: relative; z-index: 1; }
.skillbar .skill .track { stroke: none; }
/* recharging ring: yellow-orange; active colors kept clear of it (Barrage pink, Gold Rain violet) */
.skillbar .skill.cool { --ring: #ffa62b; }
.skill[data-skill="barrage"] { --hue: #ff4fd8; } .skill[data-skill="rain"] { --hue: #b45cff; }
/* flat boost ring: no glow, no bevel bands next to it; only a soft shadow well below the button */
.skillbar .skill, .skillbar .skill.on, .skillbar .skill.cool, .skillbar .skill.locked { box-shadow: 0 4px 8px #0008 !important; }
.skillbar .skill.ready, .skillbar .skill.pop { animation: none; box-shadow: 0 4px 8px #0008 !important; }
.skillbar .skill.pop { animation: boostPop .45s cubic-bezier(.34, 1.56, .64, 1); }
.skillbar .skill, .skillbar .skill.locked { background: radial-gradient(circle at 50% 40%, #d98436 0%, #b8611f 60%, #96491a 100%) !important; }

/* price chips: icon and number centered on one line, also next to button text ("Collapse for 💎 +42.8 K") */
.amt { vertical-align: middle; line-height: 1; }
.wide-btn { display: flex; align-items: center; justify-content: center; gap: .3em; }
.buy .amt { justify-content: center; }
/* the quanta orb has a ring around it, so it reads small at the same box size */
.ci.ci-img[aria-label="quanta"] { width: 1.95em; height: 1.95em; margin: -.45em -.05em -.45em -.2em; }

/* ---------- prestige page: dark blue version of the theme ---------- */
.app.prestige-theme {
  --panel: linear-gradient(180deg, #1c3d8f 0%, #142d6e 45%, #0b1d4d 100%);
  --plate: linear-gradient(180deg, #4f86ec 0%, #2f63cf 48%, #1f48a8 100%);
  --violet: linear-gradient(180deg, #6f9cf5 0%, #3a6fdb 45%, #2450b0 100%);
  --well: linear-gradient(180deg, #5b8ff0 0%, #3a6fdb 55%, #2a58bd 100%); --bg: #081738;
}
.app.prestige-theme .panel { box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #8fb4ff40, inset 0 3px 0 #b8d0ff55, inset 0 -6px 0 #00000040, 0 0 28px #3f7bff55; }
.boost-fly { position: fixed; z-index: 50; width: 29px; height: 29px; pointer-events: none; filter: drop-shadow(0 2px 0 #170634); }

/* =====================================================================================================
   UPGRADE CARD (relics, lab research, shard upgrades, talents, challenges). Three across.
   Reading order: what it does now (big, white) -> what the next level gives (yellow) -> the name (small caption).
   Text uses the display font, not the heavy small print, so it reads at a glance.
   ===================================================================================================== */
.tiles.ups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 7px; }
.tiles.ups .tile.up { padding: 22px 6px 0; gap: 2px; justify-content: flex-start;
  background: var(--sheen), var(--plate); box-shadow: 0 0 0 2.5px var(--ink), inset 0 0 0 1.5px #ffffff40, inset 0 3px 0 #ffffff70, 0 4px 0 var(--ink); }
.tiles.ups .tile.up::after { display: none; }
.tile.up .tile-ico { order: 0; height: 50px; margin: 0 0 2px; }
.tile.up .tile-ico .pic, .tile.up .tile-ico svg { width: 50px !important; height: 50px !important; }
.up-now { font: 400 13.5px/1.15 var(--display); color: #fff; text-align: center; min-height: 2.3em; display: flex; align-items: center; justify-content: center; padding: 0 1px; overflow-wrap: anywhere; }
.up-next { font: 400 12.5px/1.15 var(--display); color: #ffe066; text-align: center; padding: 0 1px; overflow-wrap: anywhere; }
.up-next.max { color: #b9f5a0; }
.up-nm { font: 800 10.5px/1.2 var(--small); color: #ffffffb3; text-align: center; margin: 3px 0 7px; -webkit-text-stroke: 0 !important; text-shadow: none; text-transform: uppercase; letter-spacing: .04em; }
.up-have { order: 0; font: 400 11px/1.15 var(--display); color: #9dff8a; text-align: center; }
.up-lv { position: absolute; top: 0; left: 0; z-index: 3; padding: 3px 7px 4px; border-radius: 12px 0 10px 0; font: 400 11px/1 var(--display); color: #fff;
  background: #00000059; }
.tile.up .buy { margin-top: auto; min-height: 40px; }
.tile.up .buy .amt { font-size: 15px; }
.tile.up.buried { opacity: .7; padding-bottom: 10px; }
.tile.up.buried .tile-ico .pic { filter: grayscale(.3); }
.tile.up.active { box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 5px #ff5a6e, 0 4px 0 var(--ink) !important; }
/* the lab's green plates for its own cards */
.tiles.lab-ups .tile.up { background: radial-gradient(circle at 50% 40%, #5fcf55 0%, #2f9a36 45%, #145a22 90%) !important; }
/* crew card rule carried over: the "next" part of a line is yellow wherever it shows */
.ds .nx, .lab-row .ds .nx { color: #ffe066; }
.up-next b { font: 800 9.5px/1 var(--small); text-transform: uppercase; letter-spacing: .06em; color: #1a1030; background: #ffe066; border-radius: 4px; padding: 1px 4px 2px; margin-right: 2px; vertical-align: 2px; -webkit-text-stroke: 0 !important; }
.up-have { order: 1; margin-top: 2px; }
.tile.up .tile-ico, .up-now, .up-next { order: 0; }
.up-nm, .tile.up .buy { order: 2; }
/* upgrade cards v2: no new type styles. Title = .tile-nm, lines = .ds (a touch larger for readability), next = soft yellow like crew cards */
.tile.up .tile-nm { order: 0; min-height: 0; margin: 2px 0 1px; font-size: 14px; }
.tile.up .up-ds { order: 0; text-align: center; font-size: 12px; line-height: 1.25; color: #fff; padding: 0 2px; overflow-wrap: anywhere; }
.tile.up .up-ds.nx { color: #ffe9a3; margin-bottom: 7px; }
.tile.up .tile-ico { order: 0; }
.up-list { display: flex; flex-direction: column; gap: 8px; }
.row.up-row.active { box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 5px #ff5a6e !important; }
/* upgrade rows: description and next on their own lines, a bit larger */
.row.up-row .ds { font-size: 12.5px; line-height: 1.25; }
.row.up-row .ds.nx { color: #ffe9a3; margin-top: 1px; }
/* tab bar: the wood strip only fits the inactive keys; the open tab is taller and rises over the page above it */
.nav { padding-top: 7px !important; overflow: visible; position: relative; z-index: 7; align-items: flex-end; }
.nav button { transform: none !important; }
.nav button[aria-selected="true"] { min-height: 74px !important; margin-top: -22px; z-index: 2; }

/* Star Pass and Friends: two feature cards side by side, shop-tile parts, their own colors */
.tiles.feats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 4px; }
.tiles.feats .tile.feat { justify-content: flex-start; }
.tile.feat.pass { --t-a: #e06bff; --t-b: #a83df0; --t-glow: #ffe0fb; --t-halo: #ff5ce680; }
.tile.feat.friends { --t-a: #ffd24a; --t-b: #f39a1c; --t-glow: #fff6cc; --t-halo: #ffb34780; }
.tile.feat .tile-ico { height: 86px; }
.tile.feat .feat-ds { order: 3; font: 800 11px/1.3 var(--small); color: #fff; text-align: center; padding: 0 4px; margin-bottom: 6px; }
.tile.feat .feat-link { order: 3; border: 0; background: none; padding: 2px 4px 8px; font: 800 11px/1.2 var(--small); color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.tile.feat .ally-pips { order: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 0 6px; margin-bottom: 5px; }
.tile.feat .ally-pips i { width: 9px; height: 6px; border-radius: 2px; background: #00000059; box-shadow: none; }
.tile.feat .ally-pips i.on { background: #fff; }
.tile.feat .rib.good { background: var(--sheen), var(--green); }
.tile.feat:has(.rib) .tile-nm { margin-top: 0; }
/* Star Pass benefits as a checklist */
.tile.feat .feat-list { order: 3; list-style: none; margin: 0 0 8px; padding: 0 8px; display: flex; flex-direction: column; gap: 5px; align-self: stretch; }
.tile.feat .feat-list li { position: relative; padding-left: 22px; font: 800 13px/1.2 var(--small); color: #fff; text-align: left; display: flex; align-items: center; gap: 3px; }
.tile.feat .feat-list li::before { content: '✓'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  font: 400 11px/1 var(--display); color: #fff; background: var(--green); box-shadow: 0 0 0 1.5px var(--ink); -webkit-text-stroke: 0; }
.tile.feat .feat-list .ci.ci-img { width: 1.3em; height: 1.3em; margin: -.2em 0; }
/* Friends: a soft radial gradient, no rays */
.tile.feat.friends { background: radial-gradient(circle at 50% 38%, #ffe79a 0%, #ffbf4a 45%, #f08f22 100%) !important; }
/* perk rows lead with their own icon */
.tile.feat .feat-list li { padding-left: 0; gap: 5px; }
.tile.feat .feat-list li::before { content: none; }
.tile.feat .feat-list .fi { width: 22px; height: 22px; flex: none; object-fit: contain; filter: drop-shadow(0 1px 0 #0009); }
/* refresh allies: a tappable pill */
.tile.feat .feat-chip { order: 3; align-self: center; margin: 0 0 9px; padding: 5px 12px 6px; border: 0; border-radius: 999px; font: 400 13px/1 var(--display); color: #fff;
  background: #0000004d; box-shadow: inset 0 0 0 1.5px #ffffff59; cursor: pointer; }
.tile.feat .feat-chip:active { transform: scale(.95); background: #00000073; }
/* ally pips: two even rows of ten */
.tile.feat .ally-pips { display: grid; grid-template-columns: repeat(10, 9px); justify-content: center; gap: 3px; }
/* Star Pass: icon and checklist centered in the space the taller Friends card leaves */
.tile.feat.pass .tile-ico { margin-top: auto; }
.tile.feat.pass .feat-list { margin-bottom: auto; }
.tile.feat.pass .buy { margin-top: 10px; }
/* ship page: skill rows, and the permanent cards on a soft radial gradient instead of rays */
.row.skill-row .ds { font-size: 12.5px; line-height: 1.25; }
.row.skill-row .ds.nx { color: #ffe9a3; }
.row.skin-row .ico { position: relative; filter: saturate(.35) brightness(.8); }
.row.skin-row .ico > img { object-fit: contain; object-position: 50% 50%; }
.row.skin-row .skin-lock { position: absolute; right: 2px; bottom: 2px; width: 24px; height: 24px; filter: none; }
.row.skin-row .ico .skin-lock .pic { width: 24px !important; height: 24px !important; object-fit: contain !important; }
.row.skin-row .ds { font-size: 12.5px; line-height: 1.25; }
.row.skin-row .buy.soon { font-size: 14px; line-height: 1.05; white-space: normal; text-align: center; }
.tiles.perm .tile { background: radial-gradient(circle at 50% 45%, #ffe79a 0%, #ffbf4a 45%, #f08f22 100%) !important; }

/* ---------- relics page: deep navy theme ---------- */
.app.relic-theme {
  --panel: linear-gradient(180deg, #13306e 0%, #0d2252 45%, #071536 100%);
  --plate: linear-gradient(180deg, #3d6fd6 0%, #2552b4 48%, #183c8c 100%);
  --violet: linear-gradient(180deg, #5c8be8 0%, #2f5fc4 45%, #1d4296 100%);
  --well: linear-gradient(180deg, #4a7bdf 0%, #2f5fc4 55%, #224ca3 100%); --bg: #06112b;
}
.app.relic-theme .panel { box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #7fa6ff40, inset 0 3px 0 #a8c4ff55, inset 0 -6px 0 #00000040, 0 0 28px #2f6bff55; }
/* currency header on the panel: icon + big white count, the bonus spelled out underneath */
.cur-head { padding: 4px 6px 2px; }
.cur-head .ch-main { display: flex; align-items: center; gap: 6px; }
.cur-head .ch-main .ci.ci-img { width: 34px; height: 34px; margin: 0; }
.cur-head .ch-main b { font: 400 30px/1 var(--display); color: #fff; }
.cur-head .ch-main span { font: 400 15px/1 var(--display); color: #fff; margin-top: 8px; }
.cur-head .ch-sub { margin-top: 4px; font: 800 13px/1.3 var(--small); color: #fff; }
.cur-head .ch-sub b { color: #ffe9a3; }
.done-label { margin: 6px 0 2px; text-align: center; font: 400 16px/1 var(--display); color: #9dff8a; }
/* prestige page: a deeper purple than the crew page (replaces the blue) */
.app.prestige-theme {
  --panel: linear-gradient(180deg, #3a1280 0%, #2a0b63 45%, #1a0642 100%);
  --plate: linear-gradient(180deg, #8a4fe6 0%, #6a2fcf 48%, #4f1fa8 100%);
  --violet: linear-gradient(180deg, #a66bf0 0%, #7a3ddb 45%, #5a24b0 100%);
  --well: linear-gradient(180deg, #8f58ea 0%, #6e33d2 55%, #5726b4 100%); --bg: #12052e;
}
.app.prestige-theme .panel { box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #b98cff40, inset 0 3px 0 #d8b8ff40, inset 0 -6px 0 #00000040, 0 0 28px #7a3dff55; }
.statgrid { margin: 6px 0 8px; }
.note-plain .nxv { color: #ffe9a3; font-weight: 800; }
.done-label.locked { color: #fff; opacity: .75; font-size: 14px; }

/* segmented tabs (×1 / ×10 / Next / Max, Collapse / Challenges / Singularity): the pressed one stays in place and looks
   pressed in (inset shade, no lip); its color is the page theme's accent (--seg-on) */
.seg button[aria-pressed="true"] { transform: none !important; background: var(--sheen), var(--seg-on, var(--pink)) !important;
  box-shadow: 0 0 0 2.5px var(--ink), inset 0 3px 6px #00000066, inset 0 -2px 0 #ffffff33, 0 5px 0 var(--ink), 0 0 16px var(--seg-glow, #ff5ce688) !important; }
.app.ship-theme { --seg-on: var(--yellow); --seg-glow: #ffd23f88; }
.app.ship-theme .seg button[aria-pressed="true"] { color: #fff; }
.app.lab-theme { --seg-on: linear-gradient(180deg, #fff3a0 0%, #c8f55a 45%, #7fcf2a 100%); --seg-glow: #c8ff6a88; }
.app.relic-theme { --seg-on: linear-gradient(180deg, #b6f3ff 0%, #4fd8ff 45%, #1aa0e0 100%); --seg-glow: #4fd8ff88; }
.app.prestige-theme { --seg-on: var(--pink); --seg-glow: #ff5ce688; }
/* tab change feedback */
.seg button.seg-pop { animation: segPop .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes segPop { 0% { transform: scale(.88); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.tab-in { animation: tabIn .28s ease-out both; }
@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .seg button.seg-pop, .tab-in { animation: none; } }

/* prestige sub-tabs each get their own palette (cards, wells, tabs all follow it) */
.app.prestige-collapse {
  --panel: linear-gradient(180deg, #1c3d8f 0%, #142d6e 45%, #0b1d4d 100%);
  --plate: linear-gradient(180deg, #4f86ec 0%, #2f63cf 48%, #1f48a8 100%);
  --violet: linear-gradient(180deg, #6f9cf5 0%, #3a6fdb 45%, #2450b0 100%);
  --well: linear-gradient(180deg, #5b8ff0 0%, #3a6fdb 55%, #2a58bd 100%); --bg: #081738;
  --seg-on: linear-gradient(180deg, #b6f3ff 0%, #4fd8ff 45%, #1aa0e0 100%); --seg-glow: #4fd8ff88; }
.app.prestige-collapse .panel { box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #8fb4ff40, inset 0 3px 0 #b8d0ff55, inset 0 -6px 0 #00000040, 0 0 28px #3f7bff55; }
.app.prestige-chal {
  --panel: linear-gradient(180deg, #6e1530 0%, #540f25 45%, #360818 100%);
  --plate: linear-gradient(180deg, #c8445f 0%, #a52c48 48%, #821d37 100%);
  --violet: linear-gradient(180deg, #e0647d 0%, #b8344f 45%, #8c2039 100%);
  --well: linear-gradient(180deg, #d0546d 0%, #ad3450 55%, #8f2540 100%); --bg: #2a0612;
  --seg-on: var(--yellow); --seg-glow: #ffd23f88; }
.app.prestige-chal .panel { box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #ff9ab040, inset 0 3px 0 #ffc0cc40, inset 0 -6px 0 #00000040, 0 0 28px #ff3f6b55; }
.app.prestige-sing .row, .app.prestige-chal .row, .app.prestige-collapse .row, .app.prestige-theme .stat { background: var(--sheen), var(--plate); }
/* disabled buttons (can't afford, not available): drained of color, no glow, flat. Same look on every theme */
.buy:disabled:not(.owned), .wide-btn:disabled, .mbtn:disabled, .chip-btn:disabled {
  filter: grayscale(.9) brightness(.72) !important; box-shadow: 0 0 0 2.5px var(--ink), inset 0 2px 0 #ffffff26, 0 4px 0 var(--ink) !important; }
.tile .buy:disabled:not(.owned) { box-shadow: 0 -2.5px 0 var(--ink), inset 0 2px 0 #ffffff26 !important; }
.buy:disabled:not(.owned) .ci img { filter: none; }
/* Challenges: the pressed tab and Start buttons stay in the burgundy family */
.app.prestige-chal { --seg-on: linear-gradient(180deg, #ffb0bf 0%, #ff5a7a 45%, #d42b52 100%); --seg-glow: #ff5a7a88; }
.app.prestige-chal .buy.ally { background: var(--sheen), linear-gradient(180deg, #ff9a8a 0%, #ff4a4a 45%, #c8262e 100%) !important; box-shadow: var(--rim), var(--lip), 0 0 14px #ff4a4a77 !important; }
/* purchase feedback */
.buy-pop { animation: buyPop .26s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes buyPop { 0% { transform: scale(.94); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }
.buy-burst { position: fixed; z-index: 60; width: 0; height: 0; pointer-events: none; }
.buy-burst .ring { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--c); animation: bbRing .4s ease-out forwards; }
.buy-burst b { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: var(--c); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: bbStar .45s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes bbRing { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@keyframes bbStar { from { transform: translate(0, 0) scale(1.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
/* a little toast that rises out of the button you just bought with */
.buy-toast { position: fixed; z-index: 61; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap; padding: 4px 10px 5px; border-radius: 999px;
  font: 400 14px/1 var(--display); color: #fff; background: var(--c); box-shadow: 0 0 0 2px var(--ink), 0 3px 0 var(--ink), 0 0 12px var(--c); animation: buyToast .9s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes buyToast { 0% { transform: translate(-50%, -60%) scale(.5); opacity: 0; } 18% { transform: translate(-50%, -110%) scale(1.12); opacity: 1; } 30% { transform: translate(-50%, -115%) scale(1); }
  80% { opacity: 1; } 100% { transform: translate(-50%, -190%) scale(.95); opacity: 0; } }
.buy-toast { -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }

/* coach tips: yellow, and until the boosts unlock they sit in the boost row's spot at the bottom of the arena */
.hint { background: var(--sheen), var(--yellow); box-shadow: var(--rim), 0 4px 0 var(--ink), 0 0 18px #ffcf2f88; }
.app:not(.has-skills) .hint { top: auto; bottom: 18px; }
/* the ×2 chip lives on that row too: the tip floats just above it */
.app:not(.has-skills) .arena:has(#aCtl > *) .hint { bottom: 66px; }

/* =====================================================================================================
   BOOST CARDS (.bst). Picture on top, a strip underneath that always answers "what now?":
   ready = gold card with a shine, strip shows the boost's name · running = the boost's color drains like a timer,
   strip shows the seconds left · recharging = dark card refilling from the bottom, strip shows the countdown ·
   locked = only the next one shows, padlocked, strip shows the stage it unlocks at
   ===================================================================================================== */
.app.has-skills { --skills-h: 58px; }
.skillbar { gap: 7px; padding-bottom: 1px; }
.skillbar .bst { position: relative; isolation: isolate; flex: none; width: 52px; height: 57px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  display: grid; grid-template-rows: 1fr 17px; background: linear-gradient(180deg, #4a2f86, #2a1858); color: #fff;
  box-shadow: 0 0 0 2.5px var(--ink), inset 0 2px 0 #ffffff2e, 0 4px 0 var(--ink); transition: transform .12s, background .25s; -webkit-tap-highlight-color: transparent; }
.skillbar .bst[hidden] { display: none; }
.skillbar .bst:active { transform: translateY(2px); box-shadow: 0 0 0 2.5px var(--ink), inset 0 2px 0 #ffffff2e, 0 2px 0 var(--ink); }
.skillbar .bst .pic { grid-area: 1 / 1; place-self: center; width: 33px; height: 33px; margin-top: 2px; z-index: 1; filter: drop-shadow(0 2px 0 var(--ink)); transition: filter .25s; pointer-events: none; }
.skillbar .bst .lk { grid-area: 1 / 1; place-self: center; z-index: 2; display: none; }
.skillbar .bst .lk .pic { width: 20px; height: 20px; margin: 0; }
.skillbar .bst .strip { grid-area: 2 / 1; z-index: 2; display: grid; place-items: center; background: #170634; }
.skillbar .bst .strip b { font: 400 10px/1 var(--display); letter-spacing: .2px; white-space: nowrap; color: #fff; }
.skillbar .bst .fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--p, 0) * 100%); z-index: 0; background: var(--hue); opacity: .4; transition: height .25s linear; pointer-events: none; }
.bst[data-skill="barrage"] { --hue: #ff4fd8; } .bst[data-skill="rain"] { --hue: #ffd23f; } .bst[data-skill="clock"] { --hue: #4fe3ff; }
.bst[data-skill="stasis"] { --hue: #7fb2ff; } .bst[data-skill="fortune"] { --hue: #6fe05a; }
/* ready: gold, a slow glow and a shine sweeping across */
.skillbar .bst.ready { background: linear-gradient(180deg, #ffe680, #f3a62b); animation: bstGlow 1.8s ease-in-out infinite; }
.skillbar .bst.ready .strip { background: #5a2a06; }
.skillbar .bst.ready .strip b { color: #ffe680; }
.skillbar .bst.ready::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, #ffffffb0 50%, transparent 65%); transform: translateX(-120%); animation: bstShine 3.2s ease-in-out infinite; }
@keyframes bstGlow { 0%, 100% { filter: drop-shadow(0 0 0 #ffd23f00); } 50% { filter: drop-shadow(0 0 9px #ffd23fcc); } }
@keyframes bstShine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.skillbar .bst.pop { animation: bstPop .45s cubic-bezier(.34, 1.56, .64, 1), bstGlow 1.8s ease-in-out .45s infinite; }
@keyframes bstPop { 0% { transform: scale(.82); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
/* running: the card glows in the boost's color, which drains down as time runs out */
.skillbar .bst.on { background: linear-gradient(180deg, #3a2470, #1f1246); filter: drop-shadow(0 0 10px var(--hue)); }
.skillbar .bst.on .fill { opacity: .85; }
.skillbar .bst.on .pic { animation: pulse 1s ease-in-out infinite; }
.skillbar .bst.on .strip { background: color-mix(in srgb, var(--hue) 55%, #170634); }
/* recharging: dim, refilling from the bottom */
.skillbar .bst.cool { background: linear-gradient(180deg, #2c1d55, #1a0f38); }
.skillbar .bst.cool .pic { filter: grayscale(.75) brightness(.6) drop-shadow(0 2px 0 var(--ink)); }
.skillbar .bst.cool .strip b { color: #d8cff5; }
/* locked: only the next one, padlocked */
.skillbar .bst.locked { background: linear-gradient(180deg, #3d3656, #262038); cursor: default; }
.skillbar .bst.locked .pic { filter: grayscale(1) brightness(.35); }
.skillbar .bst.locked .lk { display: block; }
.skillbar .bst.locked .lk .pic { filter: drop-shadow(0 2px 0 var(--ink)); }
.skillbar .bst.locked .strip b { font-size: 9px; color: #c9c2dd; }
@media (prefers-reduced-motion: reduce) { .skillbar .bst, .skillbar .bst .pic, .skillbar .bst::after { animation: none !important; } }

/* breakdowns, leaderboard and menu: the same panel design in a dark grey palette. Like the prestige palettes,
   it swaps the theme's colors (panel, cards, buttons, wells, outlines, glow, the pressed tab) and keeps every shape */
.modal.dark {
  --panel: linear-gradient(180deg, #1c1d22 0%, #16171b 45%, #101114 100%);
  --plate: linear-gradient(180deg, #3b3e46 0%, #2f3138 48%, #25272d 100%);
  --violet: linear-gradient(180deg, #4a4d56 0%, #383a42 45%, #2a2c32 100%);
  --well: linear-gradient(180deg, #30333a 0%, #282a30 55%, #212328 100%);
  --pink: linear-gradient(180deg, #fff3a0 0%, #ffcf2f 45%, #f39a0c 100%);
  --seg-on: var(--yellow); --seg-glow: #ffd23f77; --glow: #ffd23f;
  --ally: #e4e6eb; --bg: #0b0c0e; --bg-2: #17181c; --bg-3: #2f3138; --line: #0c0d10; --ink: #0b0c0f; --muted: #e6e8ee; --dim: #a3a8b5;
  box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #ffffff1f, inset 0 3px 0 #ffffff2e, inset 0 -6px 0 #00000055, 0 10px 0 var(--ink), 0 0 40px #00000099 !important; }
.modal.dark p { color: #e9ebf0; text-shadow: 0 1px 0 #0b0c0f; }

/* leaderboard avatars (Jest profile pictures and bot avatars) */
.lb-row, .lb-table .lb-row, .lb-pin .lb-row, .lb-foot .lb-row { grid-template-columns: 40px 38px minmax(0, 1fr) auto; }
.lb-row .av { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ink), 0 2px 0 2px var(--ink); background: #2a1650; }
.lb-row .av-i { display: grid; place-items: center; font-family: var(--display); font-size: 18px; color: #fff; text-shadow: var(--stroke-sm); }

/* ---------- invite friends: featured reward, counts, the five-rung ladder ---------- */
.inv-feat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 4px 0 10px; border-radius: 16px; background: var(--sheen), var(--plate); box-shadow: var(--rim), var(--lip); }
.inv-feat.ready { background: var(--sheen), var(--yellow); }
.inv-feat.ready .nm, .inv-feat.ready .ds { color: #fff; text-shadow: var(--stroke-sm); }
.inv-feat-ico { flex: 0 0 auto; filter: drop-shadow(0 3px 0 var(--ink)); animation: pulse 1.6s ease-in-out infinite; }
.inv-feat .meta { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.inv-feat .nm { font-size: 19px; line-height: 1.1; }
.inv-feat .tag.inv-need { background: var(--red); color: #fff; text-shadow: var(--stroke-sm); }
.inv-feat .tag.inv-ok { background: var(--green); color: #103a08; }
.inv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.inv-stats > div { display: flex; flex-direction: column; align-items: center; padding: 7px 4px; border-radius: 12px; background: var(--well, #1d0b45); box-shadow: inset 0 2px 0 #0004; }
.inv-stats b { font-family: var(--display); font-weight: 400; font-size: 20px; color: #fff; text-shadow: var(--stroke-sm); }
.inv-stats span { font-family: var(--small); font-weight: 800; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.inv-note { margin: 0 0 8px; text-align: center; font-size: 13px; }
.inv-ladder { position: relative; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.inv-row { position: relative; display: grid; grid-template-columns: 26px 46px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 10px 7px 8px; border-radius: 14px; background: var(--sheen), var(--plate); box-shadow: var(--rim), 0 3px 0 var(--ink); }
.inv-row .nm { font-size: 16px; line-height: 1.1; }
.inv-row .ds { font-size: 12.5px; line-height: 1.2; }
.inv-row .inv-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2a1650; color: #fff; font: 400 13px var(--display); font-style: normal; box-shadow: 0 0 0 2px var(--ink); }
.inv-row .inv-ico { display: grid; place-items: center; filter: drop-shadow(0 2px 0 var(--ink)); }
.inv-row.ready { background: var(--sheen), var(--yellow); }
.inv-row.ready .nm, .inv-row.ready .ds { color: #fff; text-shadow: var(--stroke-sm); }
.inv-row.ready .inv-dot, .inv-row.earned .inv-dot, .inv-row.claimed .inv-dot { background: var(--green); color: #103a08; }
.inv-row.claimed { opacity: .6; }
.inv-row.todo .inv-ico { filter: grayscale(.6) brightness(.8) drop-shadow(0 2px 0 var(--ink)); }
.inv-row .buy { min-width: 0; padding: 6px 14px; font-size: 15px; animation: pulse 1.2s ease-in-out infinite; }
.inv-row .inv-check { font-style: normal; font: 400 22px var(--display); color: var(--good); text-shadow: var(--stroke-sm); padding-right: 6px; }
.inv-row .inv-lock { display: grid; place-items: center; opacity: .85; padding-right: 2px; }
.inv-row .inv-next { background: var(--red); color: #fff; text-shadow: var(--stroke-sm); }
.modal .inv-body .inv-foot { margin: 16px 2px 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.buy.ally.pulse { animation: pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .inv-feat-ico, .inv-row .buy, .buy.ally.pulse { animation: none; } }
.inv-row .buy.ally { background: var(--sheen), var(--green); box-shadow: var(--rim), 0 3px 0 var(--ink) !important; color: #fff; }
.modal .wide-btn.inv-go { background: var(--sheen), var(--green); font-size: 20px; padding: 14px; }
.wide-btn[data-gp="invite"] .amt { white-space: normal; text-align: center; line-height: 1.15; }

/* Shop feature cards (Star Pass, Friends), compacted: smaller art, the ally count chip instead of the pip row,
   one-line perks, a lighter Refresh chip */
.tile.feat .tile-ico { height: 62px; }
.tiles.feats .tile.feat .tile-ico .pic { width: 60px !important; height: 60px !important; }
.tile.feat.friends .ally-pips { display: none; }
.tile.feat .feat-list { gap: 3px; margin-bottom: 6px; padding: 0 6px; }
.tile.feat .feat-list li { font-size: 13px; white-space: nowrap; }
.tile.feat .feat-list .fi { width: 19px; height: 19px; }
.tile.feat .feat-chip { font-size: 12px; padding: 4px 10px 5px; margin-bottom: 7px; }
.tile.feat.pass .buy { margin-top: 6px; }
/* invite sheet: the same padded body as the other sheets */
.inv-body { padding: 10px 12px 14px; gap: 0; }
/* reward popups: centred text under the centred reward */
.modal:has(> .reward) > p { text-align: center; }

/* sheet headers: one row always, the close button pinned right; tabs share the rest and shrink on narrow phones
   (and scroll sideways rather than wrapping if a phone is narrower still) */
.sheet-head { flex-wrap: nowrap; }
.sheet-head .seg { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sheet-head .seg::-webkit-scrollbar { display: none; }
.sheet-head .seg button { flex: 1 1 0; min-width: fit-content; white-space: nowrap; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.05; }
.sheet-head .x-btn { flex: none; }
@media (max-width: 400px) { .sheet-head .seg { gap: 3px; } .sheet-head .seg button { padding: 5px 4px; font-size: 11.5px; letter-spacing: 0; } }
@media (max-width: 340px) { .sheet-head .seg button { padding: 4px 2px; font-size: 10.5px; } .sheet-head .seg button .pic { width: 18px !important; height: 18px !important; } .sheet-head { gap: 4px; padding-left: 8px; padding-right: 8px; } }