/* Layout: the arena fills the window; a thin HUD floats over the top edge (stats · deck · log).
   Single deliberate look: basic shapes on a dark floor. */
:root {
  color-scheme: dark;
  /* v0.30: the neutrals leaned magenta, after the first PACKS SILICA logo. v0.57 (user: "make the dark background
     uniform to everything, match the aesthetic"): matte black and plain greys, after the new blue-chrome logo. */
  --floor: #060607;
  --card: #111115;
  --line: #2a2b32;
  --text: #eef0f4;
  --muted: #8f939c;
  --player: #eef3f6;
  --enemy: #e5484d;              /* normal enemies are red (user) */
  --enemy-split: #b8479e;        /* splitters are red-purple */
  --gold-ui: #f2c14e;   /* v0.58: the UI's gold (focus rings, the volume sliders …); it was Bullet's colour, which is white now */
  --bullet: #f4f6fb;    /* Bliky (v0.58): a white basic shooter */
  --cannon: #8a919c;    /* v0.58: a big, slow cannonball: grey (user), with a small glow (draw.js) */
  --cannon-ball: #3d424b; --cannon-hi: #a9b0bb;   /* the ball itself: dark iron, and the light on it */
  --hp: #5fd38d;
  --potion: #ff4d5e;
  --diamond: #8ff5ff;
  --boss: #3f9e7f;        /* KURTSAURUS: a friendly green dino */
  --boss-dark: #2b7560;   /* its far legs and arm */
  --boss-eye: #f3efe0;
  /* MAKORA (v0.38, user: like their new reference): a flat cartoon, grey skin with a dark grey outline, a charcoal
     cloth, black rings, a purple mouth */
  --makora: #c5c8cf;
  --makora-dark: #a2a6b0;       /* the far horn and tufts */
  --makora-line: #4b4e57;       /* the outline */
  --makora-band: #17181c;       /* rings, the chest mark */
  --makora-cloth: #3a3e46;
  --makora-cloth-dark: #272a30; /* its folds and knot */
  --makora-mouth: #5a3456;
  --rift: #c46bff;              /* v0.69: the tears it slices in space and time, their glowing edge … */
  --rift-dark: #12061c;         /* … and the void inside */
  --wheel-hi: #f7e64e;
  --wheel: #e6b83c;
  --wheel-dark: #9a7414;
  --blade: #e4e8ee;
  --rock: #9c8a78;
  --rock-dark: #7a6a5a;    /* MAKORA's big rock (v0.38): its shaded side … */
  --rock-hi: #c2b19c;      /* … and a pale facet */
  --crack: #070b0e;        /* broken ground */
  --relic: #ff9f43;
  /* AWAS THE SNEK (v0.54, user): an old phone's screen, neon green with black on it */
  --lcd: #6f8a2c;          /* v0.55 (user: it hurt the eyes): a dimmer, softer green (#a3d40e before) */
  --lcd-ink: #0e1405;
  --snek: #8fb02a;
  --sack: #e8213f;         /* VAMPIRIC BALLSACK: blood red … */
  --sack-dim: #6b1826;     /* … darker while it cools down */
  --edge: #c8e9ff;         /* the edge of a normal arena, when you're close to it (draw.js drawEdgeGlow) */
  --xp: #6ea8ff;
  --enemy-big: #b8323c;
  --enemy-fast: #ff7a6b;
  --enemy-big-split: #8f3a8a;
  --enemy-fast-split: #d970c4;
  --enemy-shooter: #4fd06a;      /* v0.51: the green squares that shoot, after OBI ONE */
  --enemy-lunger: #e89a2c;       /* v0.52: the slow squares that light up and dash (amber, so shooters stay the green ones) */
  --enemy-lunger-hi: #fff2c4;    /* … lit up, just before the dash */
  --spore: #7c6bff;              /* v0.99: the Sporeling's indigo cap … */
  --spore-hi: #d9d2ff;
  --spore-gas: #b9e04a;          /* … and its poison cloud (sickly yellow-green) */
  --hive: #d96ac8;               /* v1.00: the Swarm mother (orchid) and her Swarmlings … */
  --hive-hi: #f6b3ec;
  --heal: #5fe3a1;               /* … the Healer (mint, white cross) … */
  --heal-hi: #eafff4;
  --plate: #8d9bb0;              /* … and the Armoured: steel plates over a soft peach body */
  --plate-dark: #5b667a;
  --plate-soft: #f0b27a;
  --guard: #4c6fd1;              /* v1.01: the Shield, a royal-blue body … */
  --guard-plate: #e3e8f2;        /* … behind a pale silver plate … */
  --guard-rim: #ffd25e;          /* … with a gold rim */
  --weave: #4fe3dc;              /* … and the Weaver: a cyan diamond */
  --weave-hi: #d8fffb;
  --crab: #f2452a;               /* the crab (v0.46, user's picture): orange-red, glossy, big pale-yellow eyes */
  --crab-dark: #c9301b;
  --crab-hi: #ff8a70;
  --crab-eye: #fbf0b2;
  --crab-pupil: #2b2429;
  --crab-mad: #8e1426;           /* v1.02: a hostile crab: its shell goes deep crimson … */
  --crab-mad-dark: #3d0610;
  --crab-mad-glow: #ff7a1a;      /* … with glowing cracks */
  --bot-white: #eef1f6;          /* v1.02 (user: "stormtrooper colours, a minimal robot"): the robots' white armour … */
  --bot-shade: #c3cad7;          /* … its shaded side … */
  --bot-black: #15171d;          /* … the black visor and joints … */
  --bot-joint: #4a5263;          /* … and the grey under-suit */
  --bot-red: #ff2b3a;            /* v1.03 (user: "more red, so you know they're enemies"): their visors, lights and stripes */
  --spore-body: #ffad86;         /* v1.02: the Sporeling is a hermit crab now: its soft body, in its indigo shell */
  /* OBI ONE (v0.48, user: a robed swordsman like their sample): a pale tan tunic over a darker under-tunic, a brown belt and boots,
     auburn hair and beard, and a blue energy saber (its colour is also the DEFLECT relic's) */
  --obi-robe: #e6d6b6;
  --obi-robe-dark: #b49b74;
  --obi-under: #c9b18a;
  --obi-belt: #6e4a2e;
  --obi-boot: #8a4128;
  --obi-skin: #f1c6a0;
  --obi-hair: #b8672f;
  --obi-eye: #2b2429;
  --obi-hilt: #c9ced6;
  --obi-hilt-dark: #3a3e46;
  --saber: #4fc3ff;
  --saber-core: #effbff;
  --saber-2: #ff4d4d;      /* phase 2 (user): the blade turns red */
  --saber-2-core: #fff1e6;
  /* card colours, one per card id (placeholders until card visuals are designed) */
  --laser: #3ee6ff;
  --shuriken: #8f9dff;   /* Arcane Bolt */
  --spaceimpact: #9be15d;
  --mine: #d9a55b;
  --sniper: #3dffa8;     /* v0.30: a mint-green tracer */
  --missiles: #ff5cf0;   /* v0.30: Arcane Missiles, arcane magenta */
  --missiles-hi: #ffe3fd;   /* v0.66: its white-hot core … */
  --missiles-deep: #6d1a8f;   /* … and its shadowed facets */
  --seed: #a8743c;   /* v0.66: Druidity ×3's seed bomb … */
  --blight: #45204f;   /* … the corrupted ground it leaves … */
  --blight-hi: #a6e34f;   /* … and the sickly glow in its cracks */
  /* the Ulti Magus pack's new ones (v0.60) */
  --twinflame: #ff6aa8;        /* Twin Flame: one bolt pink … */
  --twin-red: #ff3d3d;         /* … one red */
  --twin-hot: #ffe2b0;         /* and their hot hearts */
  --arcana: #a98bff;           /* Arcana's diamond and its mark */
  --arcana-hi: #efe6ff;
  --explomagus: #ff8f4a;       /* Explomagus: a hot orange spark … */
  --explo-hot: #ffe08a;        /* … burning yellow at its heart */
  --gravamagus: #6c7bff;       /* Gravamagus: indigo laser light */
  --grav-hi: #d9deff;
  --darkmagus: #9b4dff;        /* Darkmagus: violet edges … */
  --dark-core: #0b0614;        /* … round a near-black core */
  --druidity: #6ee36a;         /* Druidity: green magic … */
  --vine: #3e9a3a;             /* … its vines … */
  --vine-dark: #1f5a24;
  --oak: #8a5a32;              /* Druidity's TIMBER! tree (v0.65): its bark … */
  --oak-dark: #4a2e18;         /* … in shadow … */
  --leaf: #3fae45;             /* … and its leaves, lit */
  --leaf-hi: #b8f27a;
  --bloom: #ff6fae;             /* OVERGROWTH!'s flower (v0.65) … */
  --bloom-hi: #ffc2dc;
  --bear: #d8f5c8;             /* … and the bear's ghostly paw */
  --bear-dark: #2a1d10;        /* the gouges its claws leave */
  /* the Silica pack (v0.42) */
  --gatling: #ffc94a;    /* hot brass */
  --cryo: #7fd8ff;       /* ice blue */
  --ice: #c8f1ff;        /* frost fields, the ring of ice, chilled enemies */
  --frozen: #6cc8ff;     /* what a chilled enemy's colour is frosted toward (v0.46) */
  /* the Powerwash pack (user) */
  --pressurewasher: #4ad9ff;   /* a bright water jet */
  --soapgun: #ffdff7;          /* pale soap-bubble pink-white */
  --superwasher: #21c4c4;      /* a deeper teal for the twin spinning sprays */
  --sw-deep: #0b6c78;          /* … its water in 3D (v0.65): the deep teal under the stream … */
  --sw-hi: #dcfcff;            /* … and the light along its top */
  /* melee (v0.53, THE COMBAT UPDATE!) */
  --knife: #dfe6f2;            /* steel */
  --knife-dark: #6b4a33;       /* its wooden handle */
  --punch: #7ccfff;            /* Vessel (v0.58): light blue, its aura's colour (it was Punch's hot coral) */
  --vessel-aura: #9fe3ff;      /* VESSEL BURST!'s fist: light blue and black */
  --punch-dark: #7d2a1e;
  --black-flash: #060608;      /* BLACK FLASH!: black lightning … */
  --black-flash-hi: #ff2240;   /* … with red highlights */
  --black-flash-aura: #ff2240; /* and the aura after it (v0.55: red, the black flames' edges; it was blue) */
  /* the weapon rework (v0.58) */
  --brickshot: #c8603c;        /* a clay brick (v0.64, user: "an actual brick"; white before) */
  --brick-dust: #a8988a;       /* the dust it knocks off (combat.js brickHit) */
  --brick-shield: #8fd8ff;     /* its light blue shield */
  --shotgun: #ffb35c;
  --slap: #ff9fb4;
  --slap-hand: #ffe1d6;        /* its open hand: a warm, pale skin */
  --grapeshot: #a77bff;        /* grape purple */
  --flashbang: #fff2a6;
  --rambo: #9cc25a;            /* army green */
  /* the Standard pack's new ones (v0.59) */
  --hammer: #e0b46a;           /* bronze dust */
  --hammer-head: #9aa3b0;      /* its steel head … */
  --hammer-hi: #f3dcae;        /* … and the light on it, the dust it throws up */
  --blowpipe: #7fe08a;         /* jungle green; the zzz */
  --berserk: #ff3b3b;          /* BERSERK!'s red dart and rage */
  --fistopheles: #ff2e4a;      /* mythic red astral fists … */
  --fisto-hi: #ffb3bd;         /* … with pale hearts */
  --enpassant: #f1e7d0;        /* ivory, the light squares … */
  --chess-dark: #3a2e27;       /* … walnut, the dark ones */
  --chess-gold: #f2c14e;       /* the board's gold edge */
  --karishnikov: #ff9a3c;      /* KARISHNIKOV: its muzzle fire */
  --knife-guard: #8d97a8;      /* the crossguard and the blade's fuller */
  --fist: #ffffff;             /* the punch: a plain white fist … */
  --fist-line: #2a2232;        /* … with a dark edge */
  /* the SINS pack (v0.53) */
  --sonickick: #22e3c9;        /* teal, like the sonic shot */
  --ironwill: #8fe9d8;         /* a paler teal for the shield */
  --tempest: #ff2a3d;          /* the slam's red (user: RED; it was orange-gold) */
  --tempest-hi: #ffb0a6;       /* its hot cores */
  --tempest-dark: #4a0710;     /* the split ground */
  --dragonkick: #ff6b1f;       /* the kick's deep orange */
  --sin-gold: #ffe36b;         /* gold cores and the yellow hit flash */
  --dragon-fire: #ffd04a;      /* Dragon Kick's dragon: its fire, gold-yellow over the orange (v0.60) */
  --dragon-dark: #7a1d06;      /* … and its scales' dark edges */
  /* the Silica pack's Gear Toss (v0.60) */
  --geartoss: #d98b4a;         /* rusty copper gears … */
  --gear-hi: #ffd6a8;          /* … their worn, shiny edges … */
  --gear-dark: #5a3418;        /* … and their shadowed hubs */
  --zap: #8ff4ff;              /* the zap that comes down on a geared enemy */
  --glitch-a: #ff2bd6;         /* BLUE SCREEN!'s glitch: magenta … */
  --glitch-b: #2bf7ff;         /* … and cyan, split apart */
  --bsod: #1f5bff;             /* the blue screen */
  /* the T-Balls (v0.56, user: an event pack, red): the balls' red light and glow, their shell, band and speakers */
  --tball: #ff3b4e; --tballm: #ff5f6d; --tball-zap: #5ad2ff;
  --tball-shell: #e8ebf0; --tball-shade: #8e96a3; --tball-band: #34373e; --tball-gold: #d6b25a;
  --sin-teal-hi: #c4fff4;
  /* rarity colours, used for rarity labels and reveal glows */
  --r-common: #8fa3b0;
  --r-uncommon: #6fcf97;
  --r-rare: #5aa9ff;
  --r-epic: #b86bff;
  --r-legendary: #ffb23e;
  --r-sss: #d6d2ff;   /* v0.57 (user: "Triple S should be the iridescent colour"): pearly platinum lilac, where one colour is needed */
  /* …and wherever it can be (user: a gradient like liquid holographic foil): pearl pink, lilac, ice blue, mint, pale gold */
  --holo: linear-gradient(118deg, #f7d3ee 0%, #d9cdfb 16%, #c4e8f8 32%, #d2f7e4 46%, #fbf0c6 58%, #f4cfe9 72%, #cfd0fb 86%, #c4e8f8 100%);
  --r-event: #ff3346;   /* v0.56: event cards and packs, red */
  --ok: #6fcf97;
  --scrim: rgba(6, 6, 7, .88);      /* --floor, see-through, behind the menus */
  --scrim-deep: rgba(11, 7, 13, .95);   /* v0.57 (user): the end-of-run screen's, darker so the fight behind it doesn't show through */
  --cw: 58px; --ch: 64px; --gap: 8px;   /* deck card size */
  --pv: 1.4;                            /* menu cards are this many times bigger */
  --bad: #ff5a5a;
  /* v0.30 (user: the pixel fonts were unreadable): Chakra Petch, a clear, squared-off face that suits the chrome logo */
  --f-ui: "Chakra Petch", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num: "Chakra Petch", ui-monospace, "SF Mono", Menlo, monospace;
  --f-px: "Silkscreen", "Chakra Petch", ui-monospace, monospace;   /* AWAS THE SNEK's phone (v0.54): big, so a pixel font reads */
}

html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--floor);
  color: var(--text);
  font: 500 13px/1.4 var(--f-ui);
  font-variant-numeric: tabular-nums;
}

.arena { position: fixed; inset: 0; touch-action: none; }
.arena canvas { display: block; width: 100%; height: 100%; }
/* AWAS THE SNEK's phone screen (v0.54, snek.js): its big pixels with hard edges, a faint gap between them (the grid
   matches the canvas's pixels: arena.js sets --lcd-px) and a little shade at the edges of the glass. It flickers as it
   switches on and off. */
.lcd #cv { image-rendering: crisp-edges; image-rendering: pixelated; }
.lcd-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, color-mix(in srgb, var(--lcd) 50%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--lcd) 50%, transparent) 1px, transparent 1px);
  background-size: var(--lcd-px, 3px) var(--lcd-px, 3px);
  box-shadow: inset 0 0 140px rgba(18, 26, 6, .32), inset 0 0 26px rgba(18, 26, 6, .3); }
.arena.lcd-flick { animation: lcd-flick .5s steps(1) both; }
@keyframes lcd-flick { 0% { opacity: .15; } 16% { opacity: 1; } 32% { opacity: .3; } 48% { opacity: 1; } 64% { opacity: .55; } 80%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .arena.lcd-flick { animation: none; } }
/* … and the HUD over it goes black on green too, the phone's way (the cards keep their colours) */
.lcd .hud, .lcd .runbar, .lcd .statpanel, .lcd .hp, .lcd .xp, .lcd .hint, .lcd .decks, .lcd .relics, .lcd .coop-list, .lcd .intro {
  --text: var(--lcd-ink); --muted: color-mix(in srgb, var(--lcd-ink) 72%, var(--lcd)); --line: color-mix(in srgb, var(--lcd-ink) 30%, var(--lcd));
  --card: color-mix(in srgb, var(--lcd-ink) 8%, var(--lcd)); --floor: var(--lcd); --scrim: transparent;
  --hp: var(--lcd-ink); --xp: var(--lcd-ink); --player: var(--lcd-ink); --snek: var(--lcd-ink); text-shadow: none; }
.lcd .toast, .snek-fight .toast { top: calc(env(safe-area-inset-top, 0px) + var(--rb-top) + var(--rb-h) + 108px); }   /* (under AWAS's taller bar) */
#cv-text { position: absolute; inset: 0; pointer-events: none; }   /* floating numbers, always crisp */

.hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  box-sizing: border-box;
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
  padding-inline: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--muted); }
.stats span { white-space: nowrap; }
.stats b { color: var(--text); font-weight: 600; }
.side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

button {
  pointer-events: auto;
  font: inherit;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
}
button:hover { color: var(--text); }
button:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 2px; }

/* Decks (v0.53: ranged and melee, both playing at once), bottom centre: a box for each, the melee one on top. Each has its
   status line (which deck, cards left) over its tray. With both, the HUD above moves up by --deck2. */
:root { --deck2: 0px; --tray-h: 16px; }
body.two-decks { --deck2: calc(var(--tray-h) + 8px); }
body.three-decks { --deck2: calc(2 * (var(--tray-h) + 8px)); }   /* v0.62: the Wild deck's row too */
/* v0.57 (user): N hides the decks (hud.js), cleanly: they sink and fade out, and the bars above glide down into their
   place (and back up when N brings them back). `.hud-glide` is on only while it plays, so nothing else slides. */
body.hide-decks { --deck2: 0px; --tray-h: -8px; }
.decks { transition: opacity .22s ease-out, translate .22s ease-out, visibility 0s; }
body.hide-decks .decks { opacity: 0; translate: 0 14px; visibility: hidden; transition: opacity .18s ease-in, translate .18s ease-in, visibility 0s .18s; }
body.hud-glide :is(.hp, .xp, .relics) { transition: bottom .26s cubic-bezier(.3, .8, .3, 1); }
body.hud-glide .hint { transition: bottom .26s cubic-bezier(.3, .8, .3, 1), opacity .6s; }
@media (prefers-reduced-motion: reduce) { .decks, body.hide-decks .decks, body.hud-glide :is(.hp, .xp, .relics, .hint) { transition: none; } }
/* v0.53 (user: the big cards took too much room): each deck is one slim row, its name and count on the left, then a
   bar per card in that card's colour. Names are gone (the tray's labels still say them for screen readers). */
.decks {
  --cw: 34px; --ch: 12px; --gap: 5px;
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.deckbox { position: relative; display: grid; grid-template-columns: 92px auto; align-items: center; gap: 10px; height: var(--tray-h); }
.deckbox .deck-status { justify-content: flex-end; }
.decks .card { border: 0; border-radius: 3px; background: var(--c); }
.decks .card .card-name, .decks .card .card-idx, .decks .card .card-new { display: none; }
.decks .card.is-down { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.decks .card .card-back { display: none; }
.decks .card.is-fired { opacity: .18; }
.decks .card.is-next { --lift: -3px; box-shadow: 0 0 0 1.5px var(--text), 0 0 10px -1px var(--c); }
.decks .card .cd { height: 2px; background: var(--text); }
/* (the in-run tray's cards are small bars that clip: the tag sits inside, dark on the card's colour, v0.68) */
.decks .card.is-aug::after { inset: 0; display: grid; place-items: center; font: 800 7px/1 var(--f-num); letter-spacing: .04em; color: rgb(0 0 0 / .78); white-space: nowrap; }
.decks .card.is-aug { box-shadow: 0 0 0 1.5px var(--ac), 0 0 10px 0 var(--ac); }
.decks .card.is-aug.is-next { box-shadow: 0 0 0 1.5px var(--text), 0 0 12px 1px var(--ac); }
.decks .rapid { left: auto; right: 0; transform: none; bottom: -5px; }
.decks .shuffle-icon { font-size: 0; }   /* (just the spinning icon: the row is narrow) */
.decks .rapid-bar { height: 2px; }
.decks .rapid-bar.is-max { height: 3px; top: 0; }
@media (max-width: 480px) {
  .decks { --cw: 27px; --gap: 4px; }
  .deckbox { grid-template-columns: 72px auto; gap: 6px; }
}
.deck-kind { color: var(--text); letter-spacing: .12em; }
.deckbox.is-melee .deck-kind { color: var(--logo-orange); }
.deckbox.is-wild .deck-kind { color: var(--wild); }
/* Deck: the cards in play order. Dimmed = fired. Raised + coloured border + bar = next.
   Each card sits at slot * (--cw + --gap); --lift raises the next card, and the change is animated. */
.deck {
  --n: 7;
  position: relative;
  width: calc(var(--n) * var(--cw) + (var(--n) - 1) * var(--gap));
  height: var(--ch);
  list-style: none; margin: 0; padding: 0;
  pointer-events: none;
}
.card {
  --c: var(--gold-ui); --p: 0;
  position: absolute;
  top: 0; left: 0;
  --lift: 0px;
  transform: translate(calc(var(--i) * (var(--cw) + var(--gap))), var(--lift));
  transition: transform .2s ease-out, opacity .25s, border-color .2s;
  box-sizing: border-box;
  width: var(--cw); height: var(--ch);
  display: grid; place-items: center; grid-template-columns: minmax(0, 1fr);   /* names can't widen the card */
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.card-idx { position: absolute; top: 4px; left: 6px; font: 10px/1 var(--f-num); color: var(--muted); }
/* Two-word names wrap onto two lines; a single long word is shrunk to fit by fitNames() in hud.js */
.card-name {
  display: block; box-sizing: border-box; width: 100%; padding-inline: 3px;
  font-size: 11px; line-height: 1.1; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-align: center; color: var(--c); overflow-wrap: normal;
}
.card-new { position: absolute; top: 3px; right: 5px; font: 600 10px/1 var(--f-num); color: var(--xp); }   /* first card from the next shuffle */
.card .card-back { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--card) 0 5px, var(--floor) 5px 10px); }
.card.is-down .card-idx { z-index: 1; }
.card .card-back::after { content: "?"; font-size: 16px; font-weight: 700; color: var(--muted); }
.card.is-fired { opacity: .35; }
.card.is-fired .card-name { color: var(--muted); }
@media (max-width: 480px) {
  :root { --cw: 45px; --ch: 56px; --gap: 4px; --pv: 1; }   /* 7 cards fit in 343px */
  .card-name { font-size: 9px; letter-spacing: 0; }
  .card-idx { top: 3px; left: 4px; font-size: 9px; }
  .mcard .card-rarity { letter-spacing: 0; padding-inline: 1px; }
}
.card.is-next { --lift: -8px; border-color: var(--c); }
.cd { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c); transform-origin: left; transform: scaleX(var(--p)); display: none; }
.card.is-next .cd { display: block; }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

/* Deck status: sits just above its tray — which deck, and how many cards are left before it
   reshuffles, swapped for a spinning icon for a moment right as that reshuffle happens. */
.deck-status {
  height: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 10px var(--f-num);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  white-space: nowrap;
}
.deck-status b { color: var(--text); font-weight: 700; }
.shuffle-icon { display: inline-flex; align-items: center; gap: 4px; color: var(--xp); }
.shuffle-icon svg { width: 12px; height: 12px; animation: deck-shuffle-spin .6s linear infinite; }
@keyframes deck-shuffle-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .shuffle-icon svg { animation: none; } }

/* Log: one row of dots per cycle, newest first */
.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font: 11px/1 var(--f-num); }
.log li { display: grid; grid-template-columns: 3ch auto 1ch; align-items: center; gap: 8px; height: 14px; }
.log li:not(:first-child) { opacity: .75; }
.log .n { color: var(--muted); text-align: right; }
.log .dots { display: flex; align-items: center; gap: 4px; }
.ld { --s: 6px; width: var(--s); height: var(--s); border-radius: 50%; background: var(--c, var(--gold-ui)); flex: none; }
.log .ok { color: var(--ok); }
.log .bad { color: var(--bad); }

.check { margin: 0; font-size: 11px; color: var(--muted); white-space: nowrap; }
.check.ok span { color: var(--ok); }
.check.bad { color: var(--bad); }

.hint {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px + var(--tray-h) + var(--deck2) + 72px);   /* above the HP bar (v0.55: it got thicker) */
  margin: 0;
  text-align: center;
  color: var(--muted);
  pointer-events: none;
  transition: opacity .6s;
}
.hint.gone { opacity: 0; }
.hint-touch { display: none; }
@media (pointer: coarse) {
  .hint-keys { display: none; }
  .hint-touch { display: inline; }
}

/* Menus: title → main (Loadout / Open packs / Start) → deck preview → arena.
   They cover the arena; the HUD stays hidden while any menu is up. */
[hidden] { display: none !important; }
.menu {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  padding-inline: 16px;
  background: var(--scrim);
  overflow: auto;
}
.menu:not([hidden]) ~ .hud,
.menu:not([hidden]) ~ .decks,
.menu:not([hidden]) ~ .hint,
.menu:not([hidden]) ~ .hp,
.menu:not([hidden]) ~ .xp,
.menu:not([hidden]) ~ .statpanel,
.menu:not([hidden]) ~ .runbar { visibility: hidden; }

/* Player HP: a green bar, bottom centre, just above the deck (clear of a card that pops up when played) */
.hp {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px + var(--tray-h) + var(--deck2) + 42px);
  width: min(300px, calc(100% - 32px));
  display: flex; align-items: center; gap: 8px;
  pointer-events: none;
}
/* v0.55 (user: thicker, easier to see): a 16px bar in a dark track with an edge, a light band along its top */
.hp-bar { position: relative; flex: 1; height: 16px; border-radius: 8px; background: color-mix(in srgb, var(--floor) 70%, var(--line)); border: 1.5px solid color-mix(in srgb, var(--hp) 35%, var(--line)); box-sizing: border-box; overflow: hidden; }
.hp-bar span { display: block; height: 100%; background: linear-gradient(to bottom, color-mix(in srgb, var(--hp) 60%, #fff) 0 22%, var(--hp) 22%); transform-origin: left; transition: transform .25s ease-out; }
.hp-num { font: 700 15px var(--f-num); color: var(--text); min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
@keyframes hp-hit { 0% { box-shadow: 0 0 0 0 var(--bad); } 30% { box-shadow: 0 0 10px 2px var(--bad); } 100% { box-shadow: 0 0 0 0 var(--bad); } }
.hp.hit .hp-bar { animation: hp-hit .4s ease-out; }
/* Brickshot's shield (v0.58): light blue health on the end of yours, fading as it runs out (hud.js renderHp) */
#hp-shield { position: absolute; top: 0; bottom: 0; left: 0; width: 0; transform: none; background: linear-gradient(to bottom, #d6f3ff 0 22%, var(--brick-shield) 22%); box-shadow: 0 0 8px var(--brick-shield); transition: none; }

/* XP and level: a wider blue bar just below the HP bar (still clear of a card that pops up when played) */
.xp {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px + var(--tray-h) + var(--deck2) + 14px);
  width: min(440px, calc(100% - 32px));
  display: flex; align-items: center; gap: 8px;
  pointer-events: none;
}
.xp-bar { flex: 1; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--floor) 70%, var(--line)); border: 1px solid color-mix(in srgb, var(--xp) 30%, var(--line)); box-sizing: border-box; overflow: hidden; }   /* (v0.55: thicker) */
.xp-bar span { display: block; height: 100%; background: linear-gradient(to bottom, color-mix(in srgb, var(--xp) 60%, #fff) 0 25%, var(--xp) 25%); transform: scaleX(0); transform-origin: left; transition: transform .2s ease-out; }
.xp-lv { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.xp-lv b { font: 700 14px var(--f-num); color: var(--xp); letter-spacing: 0; }
.xp-num { font: 600 12px var(--f-num); color: var(--muted); min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
@keyframes xp-up { 0% { box-shadow: 0 0 0 0 var(--xp); } 30% { box-shadow: 0 0 12px 3px var(--xp); } 100% { box-shadow: 0 0 0 0 var(--xp); } }
.xp.up .xp-bar { animation: xp-up .6s ease-out; }

.screen { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding-block: 24px; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } }
html:not(.has-gsap) .screen:not([hidden]) { animation: screen-in .25s ease-out; }   /* (v0.75: motion.js / GSAP does this; this runs only if GSAP didn't load) */
.menu h1 { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; }

/* Title logo (user's art): slams in, then a slow pink glow breathes behind it. Sized to clear the changelog panel. */
.title-logo { position: relative; width: min(640px, 100%); margin: 0; line-height: 0; }
.title-logo picture, .title-logo img { display: block; width: 100%; height: auto; }
.title-logo img { position: relative; animation: logo-in .7s cubic-bezier(.2, .9, .25, 1.15) both; }
/* v0.57 (user): Start, and a disclaimer under it (Settings moved to the main menu) */
.title-nav { margin-top: 26px; }   /* (room under the logo, now the update's name sits on it) */
.disclaimer { margin: 6px 0 0; max-width: 46ch; font: 500 12px/1.4 var(--f-ui); letter-spacing: .04em; color: var(--muted); text-wrap: balance; }
/* Settings: a code to redeem, and Reset data */
.set-card { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(340px, 100%); box-sizing: border-box; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.set-card .co-field { width: 100%; }
.set-card input { font-size: 18px; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.set-msg { margin: 0; min-height: 1.3em; }
/* v0.89: the account key (Settings) */
.key-note { margin: 0; text-align: center; }
.key-form { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px; width: 100%; }
.key-form .co-field { flex: 1 1 180px; }
.set-card input.key-in, .key-in { font-size: 14px; letter-spacing: .04em; text-transform: none; text-align: left; }
.set-card .reset { margin-top: 0; padding-top: 0; border-top: 0; }
/* v0.53 (user): the update's name. v0.57 (user): an 80s retro script (Mr Dafoe, free on Google Fonts; Kaushan Script
   before, after the user's Overglow sample) in hot-purple neon: a strong colour with a tight glow, and a dark edge so it reads on the
   chrome. It sits on top of the logo, over its lower right corner; it flickers on, then hums. */
.title-tag {
  --tube: #b81cff;
  position: absolute; right: -4%; bottom: 6%; z-index: 1;
  white-space: nowrap; pointer-events: none; text-transform: none;
  font: 400 clamp(22px, 3.3vw, 44px)/1 "Mr Dafoe", "Brush Script MT", cursive; letter-spacing: .01em;
  color: #e45bff;
  text-shadow: 0 0 1px #fff, 0 0 3px var(--tube), 0 0 9px var(--tube), 0 0 18px color-mix(in srgb, var(--tube) 55%, transparent), 0 0 2px #14001f, 1px 1px 0 #14001f, -1px -1px 0 #14001f, 2px 3px 0 #14001f, 0 0 10px #0a0010;
  transform: rotate(-9deg); transform-origin: 50% 50%;
  animation: tag-on 1.1s .6s steps(1, end) both, tag-hum 3.2s 1.9s ease-in-out infinite;
}
/* switching on: dark, a couple of stutters, then lit */
@keyframes tag-on {
  0% { opacity: 0; } 18% { opacity: .9; } 24% { opacity: .15; } 38% { opacity: 1; } 46% { opacity: .35; } 54%, 100% { opacity: 1; }
}
@keyframes tag-hum { 50% { text-shadow: 0 0 1px #fff, 0 0 4px var(--tube), 0 0 12px var(--tube), 0 0 24px color-mix(in srgb, var(--tube) 65%, transparent), 0 0 2px #14001f, 1px 1px 0 #14001f, -1px -1px 0 #14001f, 2px 3px 0 #14001f, 0 0 10px #0a0010; } }
@media (prefers-reduced-motion: reduce) { .title-tag { animation: none; } }
.title-logo::before {
  content: ""; position: absolute; inset: 8% 4%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--logo-sky) 40%, transparent), transparent);   /* (the logo's blue; it was pink, v0.57) */
  filter: blur(18px); opacity: .3;
  animation: logo-glow 3.2s ease-in-out .7s infinite alternate;
}
@keyframes logo-in {
  0% { opacity: 0; transform: scale(1.35) rotate(-2deg); filter: blur(6px); }
  55% { opacity: 1; transform: scale(.97) rotate(.6deg); filter: blur(0); }
  70% { transform: translate(-3px, 2px) scale(1.01); }
  85% { transform: translate(2px, -1px) scale(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes logo-glow { from { opacity: .25; transform: scale(.96); } to { opacity: .5; transform: scale(1.03); } }
/* The title stays centred on the screen (user). On wide screens the changelog panel is on the right, so the logo
   leaves the same room on both sides of it: (panel + margins) × 2. */
@media (min-width: 980px) { .title-logo { width: min(680px, calc(100vw - 2 * (240px + 40px))); } }
@media (min-width: 1280px) { .title-logo { width: min(680px, calc(100vw - 2 * (300px + 40px))); } }
@media (prefers-reduced-motion: reduce) { .title-logo img, .title-logo::before { animation: none; } }
.menu h2, .pause h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sub { margin: 0; color: var(--muted); }

.menu button, .pause button { color: var(--text); }
.pause {
  position: fixed; inset: 0; z-index: 13;           /* over MAKORA's black screens (.cine, 12), so Esc there shows it (v0.33; was 9) */
  display: grid; place-items: center;
  padding-inline: 16px;
  background: var(--scrim);
}
.start {
  padding: 10px 34px;
  font-size: 15px; font-weight: 600; letter-spacing: .04em;
  color: var(--floor) !important; background: var(--gold-ui); border-color: var(--gold-ui);
}
.start:hover { filter: brightness(1.08); }
.nav { display: flex; flex-direction: column; gap: 10px; width: 220px; }
.nav button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px; border-radius: 8px;
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
}
.nav button:disabled { opacity: .45; cursor: default; }
.soon { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.back { color: var(--muted) !important; }

/* A card at menu size: the deck card scaled by --pv, so the fly-in to the deck is an exact scale */
.mcard {
  --c: var(--gold-ui);
  position: relative;
  box-sizing: border-box;
  width: calc(var(--cw) * var(--pv)); height: calc(var(--ch) * var(--pv));
  display: grid; place-items: center; grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: var(--card);
  border: calc(1.5px * var(--pv)) solid var(--line);
  border-radius: calc(6px * var(--pv));
  transform-origin: 0 0;
  flex: none;
}
.mcard .card-name { font-size: calc(11px * var(--pv)); padding-inline: calc(3px * var(--pv)); }
.mcard .card-rarity {
  position: absolute; left: 0; right: 0; bottom: calc(5px * var(--pv));
  font-size: calc(8px * var(--pv)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rc);
  text-align: center; white-space: nowrap; overflow: hidden; padding-inline: calc(2px * var(--pv));
}
.mcard .card-idx { top: calc(4px * var(--pv)); left: calc(6px * var(--pv)); font-size: calc(10px * var(--pv)); }
.preview { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--gap) * var(--pv)); max-width: 100%; }
#preview .mcard:first-child, #preview .preview-break + .mcard { border-color: var(--c); }   /* matches the raised "next" card in each deck */
.preview-break { flex-basis: 100%; height: 0; }
/* v0.53 (user): preview cards show their weapon's icon, then fill with its colour before shrinking into the run's bars.
   v0.66 (user: "just use the cards instead of icons"): the real card face, so every slot (the face-down ones too) is
   card-shaped, 5 : 7; the order number sits on a little badge over its top left corner, the next card is ringed. */
#preview .mcard { height: calc(var(--cw) * var(--pv) * 1.4); }
.pv-card { display: block; padding: 0; border: 0; background: none; overflow: visible; }
.pv-card .cf { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.pv-card .card-idx { z-index: 30; top: calc(-5px * var(--pv)); left: calc(-5px * var(--pv)); display: grid; place-items: center;
  min-width: calc(15px * var(--pv)); height: calc(15px * var(--pv)); border-radius: 50%; padding: 0 3px; box-sizing: border-box;
  background: #0b0c12; box-shadow: 0 0 0 1.5px var(--rc), 0 2px 4px rgba(0, 0, 0, .6); color: #fff; font-size: calc(9px * var(--pv)); }
#preview .pv-card:first-child, #preview .preview-break + .pv-card { outline: calc(2px * var(--pv)) solid var(--c); outline-offset: calc(2px * var(--pv)); border-radius: calc(6px * var(--pv)); }
/* (v0.83: the colour fill that covered each card is gone: the cards fly into the card stacks, menus.js enterArena) */

.go { width: 160px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.go > span { display: block; height: 100%; background: var(--gold-ui); transform-origin: left; transform: scaleX(0); }

/* Weapon details (the store's pack preview) */
.type-name { margin: 0; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.type-name b { color: var(--muted); font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.type-stats { margin: 2px 0 0; font: 12px var(--f-num); color: var(--text); }
.type-desc { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.type-combo { margin: 4px 0 0; font-size: 11px; line-height: 1.45; color: var(--muted); }
.type-combo b { color: var(--text); font: 600 10px var(--f-num); margin-right: 4px; }

/* Card packs: a foil pack with a crimped top strip (the part that tears off when you open it).
   Every pack uses this look: the starter pack and the store's packs. --pc is the pack's colour. */
:root { --pack-starter: var(--gold-ui); --pack-bigger: #ff8a3d; --pack-magus: #b28cff; --pack-silica: #9fb8ff; --pack-powerwash: var(--pressurewasher); --pack-sins: var(--r-sss);
  --camo-drab: #5f7a34; --camo-dark: #2c3a18; --camo-khaki: #a8a866; --camo-brown: #5c4a2a; --camo-ink: #141a0b;
  --magus-gold: #f2c35a; }
.screen:focus { outline: none; }
.start:disabled { opacity: .45; cursor: default; filter: none; }
.pack-art {
  --pc: var(--gold-ui); --w: 120px;
  position: relative; display: flex; flex-direction: column;
  width: var(--w); height: calc(var(--w) * 1.42); flex: none;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
}
.pack-art.is-big { --w: 168px; }
.pack-starter { --pc: var(--pack-starter); }
.pack-bigger { --pc: var(--pack-bigger); }
.pack-magus { --pc: var(--pack-magus); }
.pack-silica { --pc: var(--pack-silica); }
.pack-powerwash { --pc: var(--pack-powerwash); }
.pack-sins { --pc: var(--pack-sins); }
.pack-top, .pack-body {
  display: block;
  background:
    linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--player) 38%, transparent) 45%, transparent 60%) no-repeat,
    linear-gradient(170deg, color-mix(in srgb, var(--pc) 70%, var(--player)) 0%, var(--pc) 40%, color-mix(in srgb, var(--pc) 55%, var(--floor)) 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 110% 0, 0 0;
}
/* the crimped seal: ridges, with a zigzag tear line along its bottom edge */
.pack-top {
  height: 17%; border-radius: 6px 6px 0 0;
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--floor) 30%, transparent) 0 2px, transparent 2px 5px),
    linear-gradient(170deg, color-mix(in srgb, var(--pc) 70%, var(--player)), color-mix(in srgb, var(--pc) 80%, var(--floor)));
  clip-path: polygon(0 0, 100% 0, 100% 80%, 95% 100%, 90% 80%, 85% 100%, 80% 80%, 75% 100%, 70% 80%, 65% 100%, 60% 80%, 55% 100%, 50% 80%, 45% 100%, 40% 80%, 35% 100%, 30% 80%, 25% 100%, 20% 80%, 15% 100%, 10% 80%, 5% 100%, 0 80%);
  transform-origin: 85% 100%;
}
.pack-body {
  flex: 1; margin-top: -3px; border-radius: 0 0 8px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  clip-path: polygon(0 3%, 5% 0, 10% 3%, 15% 0, 20% 3%, 25% 0, 30% 3%, 35% 0, 40% 3%, 45% 0, 50% 3%, 55% 0, 60% 3%, 65% 0, 70% 3%, 75% 0, 80% 3%, 85% 0, 90% 3%, 95% 0, 100% 3%, 100% 100%, 0 100%);
  box-shadow: inset 0 -10px 0 color-mix(in srgb, var(--floor) 25%, transparent);   /* a crimp along the bottom */
  color: var(--floor);
}
/* fake 3D (v0.59, user: "still make it look like fake 3D, it still looks flat"): every pack is a puffy foil pouch. A
   shade over its seal and body (packArt's .pack-shade, clipped to each shape) darkens both sides where the foil
   curves away, with a lit rim on the left, a soft highlight band, and the body's top and bottom pinched darker where
   it's crimped. The band slides toward the pointer as the pack tilts (packTilt's --mx); seal and body are the same
   width, so it runs straight across the tear. */
.pack-top, .pack-body { position: relative; }
.pack-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(255, 255, 255, .22) 2.5%, rgba(0, 0, 0, .1) 7%, rgba(255, 255, 255, .2) 22%, rgba(255, 255, 255, 0) 38%,
      rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .2) 84%, rgba(0, 0, 0, .55) 100%) var(--mx, 50%) 0 / 130% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, transparent 12%, transparent 78%, rgba(0, 0, 0, .34) 100%);
}
.pack-top .pack-shade { background:
    linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(255, 255, 255, .22) 2.5%, rgba(0, 0, 0, .1) 7%, rgba(255, 255, 255, .2) 22%, rgba(255, 255, 255, 0) 38%,
      rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .2) 84%, rgba(0, 0, 0, .55) 100%) var(--mx, 50%) 0 / 130% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, transparent 30%, rgba(0, 0, 0, .3) 100%); }
.pack-emblem { width: 40%; height: auto; padding: 8%; border-radius: 50%; background: color-mix(in srgb, var(--player) 45%, transparent); }
.pack-logo { font-size: calc(var(--w) * .115); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .pack-open:hover .pack-body, .store-pack:hover .pack-body, .pack-open:focus-visible .pack-body { background-position: -40% 0, 0 0; transition: background-position .6s ease-out; }
  .pack-open .pack-art:not(.is-ripping) { animation: pack-bob 2.4s ease-in-out infinite; }
}
@keyframes pack-bob { 50% { transform: translateY(-6px) rotate(-1deg); } }
/* opening: light spills out of the torn top */
.pack-art.is-ripping::after {
  content: ""; position: absolute; left: 10%; right: 10%; top: 10%; height: 30%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--player), transparent); opacity: 0;
  animation: pack-light .5s .3s ease-out forwards;
}
@keyframes pack-light { 30% { opacity: .95; } to { opacity: 0; transform: scale(2.2); } }
.pack-art.is-ripping::after { animation-delay: .38s; }   /* (as the strip comes off: menus.js RIP) */
/* v0.66: the tear (menus.js ripPack): the white foil along each torn edge, and the flakes of foil falling from it */
.rip-fibre { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; }
.rip-fibre svg { display: block; width: 100%; height: 100%; }
.rip-fibre polygon { fill: #f4f1ea; }
.rip-flake { position: absolute; z-index: 7; top: 17%; width: 5px; height: 3px; margin: -1.5px -2.5px; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 70%, #fff), var(--pc)); border-radius: 1px; }
.rip-flake.is-white { background: #f4f1ea; }
.pack-open { padding: 12px; border: 0; background: none; border-radius: 16px; cursor: pointer; }
.pack-open:focus, .pack-open:focus-visible { outline: none; }   /* (v0.60, user: no gold box round the pack when Space rips it open) */
.pack-name { font-size: 14px; font-weight: 600; color: var(--text); }

/* Gold */
.gold { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.gold b, .gold-n { color: var(--r-legendary); font: 700 14px var(--f-num); font-variant-numeric: tabular-nums; }
.coin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--r-legendary) 40%, var(--player)), var(--r-legendary) 60%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--r-legendary) 60%, var(--floor)); }

/* Store (v0.55, user: minimal text, the packs are the point): big packs in a row, each with only its price
   under it. Hovered, a pack lifts and turns in 3D toward the pointer, with a shine that follows it
   (menus.js packTilt sets --rx, --ry, --mx, --my). */
.store-packs { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 22px; padding-block: 18px 8px; perspective: 900px; }
.store-pack {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 6px; border: 0; border-radius: 14px; background: none; cursor: pointer;
}
.store-pack:focus-visible { outline: none; }
.store-pack:focus-visible .pack-tilt { --lift: -8px; --s: 1.05; }   /* (focused: lifted, and its price underlined) */
.store-pack:focus-visible .pack-price { text-decoration: underline 2px; text-underline-offset: 5px; }
/* v0.72.3 (user: "still laggy, just do what the Upcoming packs do"): the turn is on a wrapper, `.pack-tilt` (menus.js renderStore, the pack's page),
   like the Upcoming packs' .ann-tilt, and the pack's `filter` shadow is not transitioned: it used to be re-animated by every pointer move. */
.pack-tilt { display: flex; flex: none; }
.store-pack .pack-art, .pv-head .pack-art { --w: clamp(110px, calc((100vw - 200px) / 5.6), 196px); }   /* (seven in a row, down to a narrow window) */
.store-pack .pack-tilt, .pv-head .pack-tilt {
  --rx: 0deg; --ry: 0deg; --sx: 0px; --mx: 50%; --my: 30%; --lift: 0px; --s: 1;
  transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s));
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .9, .25, 1.2);
}
.pv-head .pack-art { --w: 250px; }
@media (max-width: 720px) { .pv-head .pack-art { --w: 150px; } }
.store-pack .pack-body, .pv-head .pack-body { position: relative; }
/* the shine: a soft spot of light where the pointer is, and a thin foil sheen across */
.store-pack .pack-body::after, .pv-head .pack-body::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background:
    radial-gradient(circle at var(--mx) var(--my), color-mix(in srgb, var(--player) 30%, transparent), transparent 45%),   /* (v0.64, user: a softer glow on hover: 70% / 40% before) */
    linear-gradient(calc(90deg + var(--ry) * 4), transparent 30%, color-mix(in srgb, var(--player) 18%, transparent) 48%, transparent 62%);
  mix-blend-mode: overlay;
}
.store-pack.is-tilt .pack-tilt { --lift: -10px; --s: 1.08; transition: transform .12s ease-out; }
.pv-head .pack-tilt:has(.pack-art.is-tilt) { transition: transform .12s ease-out; }   /* (v0.60, user: on the pack's page it only tilts, no zoom: it covered BACK) */
.store-pack.is-tilt .pack-art, .pv-head .pack-art.is-tilt { filter: drop-shadow(var(--sx) 22px 18px rgba(0, 0, 0, .55)); }
.store-pack.is-tilt .pack-body::after, .pv-head .pack-art.is-tilt .pack-body::after { opacity: 1; }
.store-pack:active .pack-tilt { --s: 1.02; }
.pack-price { display: inline-flex; align-items: center; gap: 6px; font: 700 15px var(--f-num); letter-spacing: .04em; color: var(--r-legendary); font-variant-numeric: tabular-nums; }
.store-pack.is-short .pack-price { color: var(--muted); }
.store-pack.is-short .pack-art { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)) saturate(.55) brightness(.8); }
.store-pack.is-short.is-tilt .pack-art { filter: drop-shadow(var(--sx) 22px 18px rgba(0, 0, 0, .55)) saturate(.7) brightness(.9); }
@media (max-width: 560px) { .store-pack .pack-art { --w: 112px; } .store-packs { gap: 26px 18px; } }
/* v0.55 (user): a pack is coloured by the best rarity it can give (menus.js packArt sets top-<rarity>), whatever its
   own colour above. */
.pack-art.top-common { --pc: var(--r-common); } .pack-art.top-uncommon { --pc: var(--r-uncommon); } .pack-art.top-rare { --pc: var(--r-rare); }
.pack-art.top-epic { --pc: var(--r-epic); } .pack-art.top-legendary { --pc: var(--r-legendary); } .pack-art.top-event { --pc: var(--r-event); }
/* Triple S (user: "platinum, iridescent gradient colours"): brushed platinum under a pearly film of pink, lilac, cyan,
   mint and gold that drifts slowly, and slides as the pack tilts toward the pointer (menus.js packTilt's --mx, --my). */
.pack-art.top-sss {
  --pc: #c6ccd6;
  --iris: linear-gradient(125deg, #ff7ccf 0%, #b48cff 16%, #6fd6ff 32%, #7dffc0 48%, #ffe066 64%, #ff7ccf 80%, #b48cff 100%);
  --plat: linear-gradient(170deg, #f7f8fb 0%, #cfd4dc 38%, #a3abb8 72%, #7d8594 100%);
}
.pack-art.top-sss .pack-body {
  background-image: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .6) 45%, transparent 60%), var(--iris), var(--plat);
  background-size: 250% 100%, 220% 220%, 100% 100%;
  background-position: 110% 0, var(--mx) var(--my), 0 0;
  background-blend-mode: normal, overlay, normal;
}
.pack-art.top-sss .pack-top {
  background-image: repeating-linear-gradient(90deg, rgba(40, 44, 56, .22) 0 2px, transparent 2px 5px), var(--iris), var(--plat);
  background-size: 100% 100%, 220% 220%, 100% 100%;
  background-position: 0 0, var(--mx) var(--my), 0 0;
  background-blend-mode: normal, overlay, normal;
}
.pack-art.top-sss .pack-emblem { background: color-mix(in srgb, #ffffff 55%, transparent); }
/* v0.59 (user): the Standard and Bigger Weapons packs (packArt gives them has-cover) have their own cover art
   (assets/img/standard_pack.webp, bigger_guns_pack.webp). It runs on through the crimped seal on top, as one picture
   (user: "include the top part of the pack so it's seamless"), with the tear line still across it. The name sits at
   the bottom over a dark fade so it reads on the picture. The art is low-res (80 px across, user: "more low res"),
   blown up with hard pixel edges, under a foil sheen and a see-through film that drift (iridescent on the Standard
   pack, user: "so it still has that effect"; warm on Bigger Weapons) and follow the pointer when the pack tilts.
   The seal and the body are two shapes (the seal tears off when a pack is opened), so to line up, every layer that
   crosses the tear is sized and placed in px of the whole pack (--W × --H), the body's shifted up by where it starts
   (--by); the drift is the numbers --fx, --fy (the film) and --sh (the sheen), 0 to 1 across their slack. */
@property --fx { syntax: "<number>"; inherits: true; initial-value: .3; }
@property --fy { syntax: "<number>"; inherits: true; initial-value: .3; }
@property --sh { syntax: "<number>"; inherits: true; initial-value: 1.1; }
.pack-art.pack-starter { --cover: url("assets/img/standard_pack.webp"); --cover-p: .38;
  --film: linear-gradient(125deg, rgba(255, 124, 207, .42) 0%, rgba(180, 140, 255, .38) 16%, rgba(111, 214, 255, .38) 32%, rgba(125, 255, 192, .38) 48%, rgba(255, 224, 102, .38) 64%, rgba(255, 124, 207, .42) 80%, rgba(180, 140, 255, .38) 100%); }
.pack-art.pack-bigger { --cover: url("assets/img/bigger_guns_pack.webp"); --cover-p: .22;
  --film: linear-gradient(125deg, rgba(255, 196, 92, .30) 0%, rgba(255, 120, 40, .22) 30%, rgba(255, 236, 160, .30) 55%, rgba(255, 120, 40, .22) 80%, rgba(255, 196, 92, .30) 100%); }
.pack-art.pack-magus { --cover: url("assets/img/magus_pack.webp"); --cover-p: .5;   /* (v0.60: the magician, galaxy in hand, centred) */
  --film: linear-gradient(125deg, rgba(180, 110, 255, .34) 0%, rgba(90, 120, 255, .28) 25%, rgba(255, 120, 220, .3) 50%, rgba(255, 190, 90, .26) 72%, rgba(180, 110, 255, .34) 100%); }
.pack-art.pack-silica { --cover: url("assets/img/silica_pack.webp"); --cover-p: .55;   /* (v0.60: the robot in the cracked desert at sunset) */
  --film: linear-gradient(125deg, rgba(255, 170, 90, .28) 0%, rgba(200, 90, 40, .22) 35%, rgba(255, 210, 150, .26) 60%, rgba(160, 70, 30, .22) 100%); }
.pack-art.pack-tballs { --cover: url("assets/img/tballs_pack.webp"); --cover-p: .5;   /* (v0.60: the man in shades under the red-lit T-Balls) */
  --film: linear-gradient(125deg, rgba(255, 60, 80, .32) 0%, rgba(120, 10, 20, .2) 35%, rgba(255, 140, 150, .28) 60%, rgba(160, 20, 40, .22) 100%); }
.pack-art.has-cover { --H: calc(var(--w) * 1.42); --by: calc(var(--H) * -.17 + 3px);
  --sheen: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%); --scrim-at: 45%; }
.pack-art.pack-bigger { --scrim-at: 50%; }
.pack-art.pack-magus { --scrim-at: 46%; }   /* (its name is two lines; its fade is lighter so more picture shows) */
.pack-art.has-cover .pack-top, .pack-art.has-cover .pack-body::before {
  image-rendering: pixelated; background-repeat: no-repeat;
  --x-sheen: calc(var(--sh) * var(--w) * -1.5); --x-film: calc(var(--fx) * var(--w) * -1.2); --y-film: calc(var(--fy) * var(--H) * -1.2);
  --x-cover: calc((var(--w) - var(--H)) * var(--cover-p));
}
.pack-art.has-cover .pack-top {
  background-image: repeating-linear-gradient(90deg, rgba(8, 9, 14, .26) 0 2px, transparent 2px 5px), var(--sheen), var(--film), var(--cover);
  background-size: 100% 100%, calc(var(--w) * 2.5) var(--H), calc(var(--w) * 2.2) calc(var(--H) * 2.2), var(--H) var(--H);
  background-position: 0 0, var(--x-sheen) 0, var(--x-film) var(--y-film), var(--x-cover) 0;
  background-blend-mode: normal, screen, overlay, normal;
}
.pack-art.has-cover .pack-body { position: relative; isolation: isolate; justify-content: flex-end; padding-bottom: 9%; color: #ffffff; }
.pack-art.has-cover .pack-body::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(180deg, transparent var(--scrim-at), rgba(8, 9, 14, .5) calc(var(--scrim-at) + 20%), rgba(8, 9, 14, .9) 100%),
    var(--sheen), var(--film), var(--cover);
  background-size: 100% 100%, calc(var(--w) * 2.5) var(--H), calc(var(--w) * 2.2) calc(var(--H) * 2.2), var(--H) var(--H);
  background-position: 0 0, var(--x-sheen) var(--by), var(--x-film) calc(var(--y-film) + var(--by)), var(--x-cover) var(--by);
  background-blend-mode: normal, screen, overlay, normal;
}
@keyframes cover-drift { from { --fx: 0; --fy: .2; --sh: 1.1; } to { --fx: 1; --fy: .8; --sh: -.4; } }
.pack-art.has-cover .pack-emblem { display: none; }
/* its name in the pack's own colour (v0.59, user: "the colour of the pack"): the same platinum under the drifting
   iridescent film as its holo seal, following the pointer when it tilts, with a dark ink edge so it reads on the art */
.pack-art.pack-starter .pack-logo {
  font-family: var(--f-metal); font-weight: 400; font-size: calc(var(--w) * .135); letter-spacing: .06em;
  background-image: var(--iris), var(--plat);
  background-size: 220% 220%, 100% 100%;
  background-position: var(--mx, 30%) var(--my, 30%), 0 0;
  background-blend-mode: overlay, normal;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1px 0 0 var(--logo-ink)) drop-shadow(-1px 0 0 var(--logo-ink)) drop-shadow(0 1px 0 var(--logo-ink)) drop-shadow(0 -1px 0 var(--logo-ink))
    drop-shadow(0 3px 5px rgba(0, 0, 0, .85));
}
@media (prefers-reduced-motion: no-preference) {
  .pack-art.pack-starter:not(.is-tilt) .pack-logo { animation: std-logo 7s ease-in-out infinite alternate; }
}
@keyframes std-logo { from { background-position: 0% 20%, 0 0; } to { background-position: 100% 80%, 0 0; } }
/* Ulti Magus (v0.60, user: "the name too, that matches the design"): a magic-show bill in a decorative serif. MAGUS is
   big and filled with the cover's galaxy (starlight white at the top through violet to deep blue, a pink and gold
   nebula drifting through it), edged in gold with a violet glow; a small gold ULTI sits over it. */
.pack-art.pack-magus .pack-logo {
  font-family: var(--f-magic); font-weight: 900; font-size: calc(var(--w) * .17); line-height: .95; letter-spacing: .03em; text-align: center; text-transform: uppercase;
  background-image:
    radial-gradient(ellipse 40% 60% at var(--neb, 30%) 55%, rgba(255, 120, 210, .85), transparent 70%),
    radial-gradient(ellipse 30% 50% at calc(100% - var(--neb, 30%)) 45%, rgba(255, 196, 96, .75), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #eadcff 24%, #b27dff 48%, #6a6dff 70%, #2a2690 100%);
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1px 0 0 var(--magus-gold)) drop-shadow(-1px 0 0 var(--magus-gold)) drop-shadow(0 1px 0 var(--magus-gold)) drop-shadow(0 -1px 0 var(--magus-gold))
    drop-shadow(0 0 6px rgba(160, 90, 255, .85)) drop-shadow(0 3px 4px rgba(0, 0, 0, .8));
}
.pack-art.pack-magus .pack-logo-sm {
  font-size: .55em; letter-spacing: .3em; margin-right: -.3em;   /* (the spacing's tail, so it stays centred) */
  background: linear-gradient(180deg, #fff6d0 0%, var(--magus-gold) 55%, #b5761c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@property --neb { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
@media (prefers-reduced-motion: no-preference) {
  .pack-art.pack-magus .pack-logo { animation: magus-neb 6s ease-in-out infinite alternate; }
}
@keyframes magus-neb { from { --neb: 15%; } to { --neb: 85%; } }
/* Every pack ends in PACK (v0.60, user: then "align all the PACK names, in the font Standard uses"): its own line, in
   the same font, size and spacing on every pack, at the same height near the bottom; the name sits just above it.
   Each pack keeps its own colour for it, with the same dark edge. */
.pack-logo { line-height: 1; text-align: center; }
/* v0.60 (user: "the text layered on top of the pack design, a parallax 3D effect when you hover"): the name and PACK
   float over the art. As the pack tilts toward the pointer (menus.js packTilt's --px, --py, −1 to 1) they slide
   toward it, the name the most and PACK a little less, while the picture under them slides a little the other way;
   so the three read as layers at different depths. They ease back when the pointer leaves. (The text doesn't grow:
   user, "not zoom the text".) */
.pack-logo, .pack-word, .pack-emblem { transition: translate .5s cubic-bezier(.2, .9, .25, 1.2); }
.is-tilt .pack-logo { translate: calc(var(--px, 0) * var(--w) * .07) calc(var(--py, 0) * var(--w) * .05); transition: translate .12s ease-out; }
.is-tilt .pack-word { translate: calc(var(--px, 0) * var(--w) * .045) calc(var(--py, 0) * var(--w) * .03); transition: translate .12s ease-out; }
.is-tilt .pack-emblem { translate: calc(var(--px, 0) * var(--w) * .03) calc(var(--py, 0) * var(--w) * .02); transition: translate .12s ease-out; }
.is-tilt .pack-art.has-cover .pack-top, .is-tilt .pack-art.has-cover .pack-body::before, .pack-art.has-cover.is-tilt .pack-top, .pack-art.has-cover.is-tilt .pack-body::before {
  --x-cover: calc((var(--w) - var(--H)) * var(--cover-p) - var(--px, 0) * var(--w) * .035); }
.pack-word {
  position: absolute; left: 0; right: 0; bottom: calc(var(--w) * .085); z-index: 1; text-align: center; pointer-events: none;
  font-family: var(--f-metal); font-weight: 400; font-size: calc(var(--w) * .075); line-height: 1; letter-spacing: .42em; text-indent: .42em; text-transform: uppercase;
  color: var(--floor);
}
.pack-art .pack-body { padding-bottom: calc(var(--w) * .1); }                       /* (the plain packs: lift the emblem and name off it) */
.pack-art.has-cover .pack-body { padding-bottom: calc(var(--w) * .19); }
.pack-art.has-cover .pack-word {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1px 0 0 #0b0a10) drop-shadow(-1px 0 0 #0b0a10) drop-shadow(0 1px 0 #0b0a10) drop-shadow(0 -1px 0 #0b0a10) drop-shadow(0 2px 3px rgba(0, 0, 0, .8));
}
.pack-art.pack-starter .pack-word { background-image: var(--iris), var(--plat); background-size: 220% 220%, 100% 100%; background-blend-mode: overlay, normal; }
.pack-art.pack-bigger .pack-word { background-image: linear-gradient(180deg, #e2e0a6 0%, var(--camo-khaki) 60%, #7c7a45 100%); }
.pack-art.pack-magus .pack-word { background-image: linear-gradient(180deg, #fff6d0 0%, var(--magus-gold) 55%, #b5761c 100%); }
.pack-art.pack-silica .pack-word { background-image: linear-gradient(180deg, #f6ac6c 0%, #c4642a 60%, #8f4318 100%); }
.pack-art.pack-tballs .pack-word { background-image: linear-gradient(180deg, #ff9aa4 0%, var(--tball) 55%, #8c0f1e 100%); }
/* T-Balls (v0.60, user: the new cover): its name like the balls themselves, white faceted shell with the black band
   across the middle, a red rim, glowing red like their lights. */
.pack-art.pack-tballs .pack-logo {
  font-family: var(--f-metal); font-weight: 400; font-size: calc(var(--w) * .16); letter-spacing: .06em; margin-right: -.06em;
  background-image:
    linear-gradient(180deg, transparent 0 46%, #0d0b10 46% 60%, transparent 60%),
    linear-gradient(115deg, rgba(255, 255, 255, .0) 30%, rgba(255, 255, 255, .7) 42%, rgba(255, 255, 255, 0) 54%),
    linear-gradient(180deg, #ffffff 0%, #e7e3e6 40%, #9d979c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1px 0 0 var(--tball)) drop-shadow(-1px 0 0 var(--tball)) drop-shadow(0 1px 0 var(--tball)) drop-shadow(0 -1px 0 var(--tball)) drop-shadow(0 0 6px rgba(255, 40, 60, .85));
}
/* Silica (v0.60, user: "a rusty logo look"): its name as rusted iron. Orange-brown rust darkening toward the bottom,
   pitted with dark spots and flecked with bright flakes (small tiles, repeating, so it's speckled all over), bare grey
   steel showing through in patches, lit from above with a dark edge round it. */
.pack-art.pack-silica .pack-logo {
  font-family: var(--f-metal); font-weight: 400; font-size: calc(var(--w) * .17); letter-spacing: .08em; margin-right: -.08em;
  background-color: #a24e1e;
  background-image:
    linear-gradient(180deg, rgba(255, 214, 170, .5) 0%, transparent 32%, transparent 60%, rgba(30, 10, 2, .6) 100%),
    radial-gradient(circle at 22% 30%, #3b1a0a 0 12%, transparent 14%),
    radial-gradient(circle at 70% 65%, #3b1a0a 0 9%, transparent 11%),
    radial-gradient(circle at 45% 80%, #f09a55 0 10%, transparent 12%),
    radial-gradient(circle at 85% 20%, #f09a55 0 8%, transparent 10%),
    radial-gradient(ellipse 45% 35% at 30% 55%, #7d858f 0 30%, transparent 65%),
    linear-gradient(180deg, #d97f3d 0%, #a24e1e 48%, #642a0e 100%);
  background-size: 100% 100%, .5em .45em, .62em .5em, .45em .55em, .7em .6em, 2.2em 1.1em, 100% 100%;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1px 0 0 #1f0d04) drop-shadow(-1px 0 0 #1f0d04) drop-shadow(0 1px 0 #1f0d04) drop-shadow(0 -1px 0 #1f0d04) drop-shadow(0 3px 4px rgba(0, 0, 0, .8));
}
/* Bigger Weapons (v0.59, user): the pack reads BIGGER / WEAPONS on two lines (v0.60; GUNS before), stencilled army style in camo greens (olive,
   dark leaf, khaki and a brown blotch over drab green). The blotches have soft edges and drift slowly across the
   letters (user: "make the camo move and gradient looking"), under a fixed light-to-dark shading so the letters look
   rounded; the pattern tile is 2.6em × 1.9em, so moving it by exactly that loops without a jump. */
.pack-art.pack-bigger .pack-logo {
  --camo-tile: 2.6em 1.9em;
  font-family: var(--f-army); font-weight: 400; font-size: calc(var(--w) * .15); line-height: .95; letter-spacing: .04em; text-align: center;
  background-color: var(--camo-drab);
  background-image:
    linear-gradient(180deg, rgba(235, 240, 200, .38) 0%, transparent 38%, transparent 60%, rgba(10, 14, 4, .45) 100%),
    radial-gradient(ellipse 32% 24% at 22% 30%, var(--camo-dark) 55%, transparent 100%),
    radial-gradient(ellipse 28% 32% at 70% 72%, var(--camo-dark) 50%, transparent 100%),
    radial-gradient(ellipse 24% 20% at 80% 22%, var(--camo-khaki) 45%, transparent 100%),
    radial-gradient(ellipse 22% 26% at 30% 80%, var(--camo-brown) 50%, transparent 100%),
    radial-gradient(ellipse 18% 16% at 50% 48%, var(--camo-khaki) 40%, transparent 100%);
  background-size: 100% 100%, var(--camo-tile), var(--camo-tile), var(--camo-tile), var(--camo-tile), var(--camo-tile);
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1px 0 0 var(--camo-ink)) drop-shadow(-1px 0 0 var(--camo-ink)) drop-shadow(0 1px 0 var(--camo-ink)) drop-shadow(0 -1px 0 var(--camo-ink))
    drop-shadow(0 3px 4px rgba(0, 0, 0, .6));
}
@media (prefers-reduced-motion: no-preference) {
  .pack-art.pack-bigger .pack-logo { animation: camo-drift 6s linear infinite; }
}
@keyframes camo-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 2.6em 1.9em, 2.6em 1.9em, 2.6em 1.9em, 2.6em 1.9em, 2.6em 1.9em; }
}
@media (prefers-reduced-motion: no-preference) {
  .pack-art.top-sss:not(.is-tilt) .pack-body, .pack-art.top-sss:not(.is-tilt) .pack-top { animation: pack-iris 7s ease-in-out infinite alternate; }
  .store-pack.is-tilt .pack-art.top-sss .pack-body, .store-pack.is-tilt .pack-art.top-sss .pack-top { animation: none; }
  .store-pack:hover .pack-art.top-sss .pack-body, .pack-open:hover .pack-art.top-sss .pack-body { background-position: -40% 0, var(--mx) var(--my), 0 0; transition: background-position .6s ease-out; }
}
@keyframes pack-iris { from { background-position: 110% 0, 0% 20%, 0 0; } to { background-position: 110% 0, 100% 80%, 0 0; } }
/* (after the Triple S seal's own drift above, so a cover pack's seal drifts with its body instead) */
@media (prefers-reduced-motion: no-preference) {
  /* v0.73 (user: "it's still laggy and choppy, revamp it"): the cover's idle drift (cover-drift, which moved the film and sheen layers of every cover
     pack's seal and body, ten big multi-layer images repainted every frame, even while you hovered another pack) is gone. A pack at rest has a soft light
     streak sliding across its body instead, which is a transform: it runs on the graphics card and costs nothing to repaint. Hovered, the pointer drives the shine. */
  .pack-art.has-cover .pack-body .pack-shade::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none; mix-blend-mode: screen;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .26) 50%, transparent); transform: translateX(-130%) skewX(-18deg); animation: pack-streak 7s ease-in-out infinite alternate; }
  .is-tilt .pack-art.has-cover .pack-body .pack-shade::before, .pack-art.has-cover.is-tilt .pack-body .pack-shade::before { animation: none; opacity: 0; }
}
@keyframes pack-streak { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }

/* Pack preview: fits one screen. The pack and its tabs side by side, the chosen weapon's details below. */
.pv { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 1240px; max-width: calc(100vw - 32px); }
/* v0.59 (user): the pack bigger, Buy under it; the weapons as a list beside it; the chosen weapon on the right; your gold
   big at the top right. The pack's column sets the height: the list and the details fit it (contain: size keeps them
   from making it taller), scrolling inside if they must. */
.pv-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(280px, 380px); grid-template-rows: auto 1fr;
  grid-template-areas: "side title title" "side list detail"; gap: 12px 28px; width: 100%;
}
.pv-side { grid-area: side; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 600px; perspective: 900px; }
.pv-side .pv-buy { flex-direction: column; align-items: stretch; width: 100%; }
.pv-side .pv-buy > * { justify-content: center; }
.pv-side .pv-buy .sub { text-align: center; }
/* v0.60 (user): BACK, a button at the top left above the pack (the TEST PACK slab, smaller, with a chrome edge) */
.pv-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px 8px; border: 0; border-radius: 0; clip-path: var(--chip);
  font: 400 15px/1 var(--f-metal); letter-spacing: .14em; text-transform: uppercase; color: var(--chrome-hi);
  --pc: var(--gold-ui);                                     /* (v0.60, user: coloured: the pack's own colour, menus.js packBackColour) */
  background: var(--grain), linear-gradient(180deg, color-mix(in srgb, var(--pc) 34%, #141824), color-mix(in srgb, var(--pc) 14%, var(--slab)));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc) 80%, transparent), inset 0 0 14px -4px color-mix(in srgb, var(--pc) 70%, transparent);
  transition: filter .12s ease, transform .12s ease;
}
.pv-back::before { content: '‹'; font-size: 20px; line-height: .6; margin-top: -2px; color: color-mix(in srgb, var(--pc) 60%, #ffffff); }
.pv-back:hover { color: var(--chrome-hi); filter: brightness(1.25); transform: translateY(-1px); }
.pv-titles { grid-area: title; min-width: 0; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 40px; }
.pv-titles #pv-title { margin: 0; }
/* a pack's title art in place of its name (v0.59: the Standard pack's) */
.pv-gold { display: flex; align-items: center; gap: 12px; margin: 0; }
.pv-gold .coin { width: 34px; height: 34px; }
.pv-gold b { font: 700 46px/1 var(--f-num); color: var(--r-legendary); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px color-mix(in srgb, var(--r-legendary) 45%, transparent); }
.pv-gold small { font: 700 13px var(--f-num); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); align-self: flex-end; padding-bottom: 4px; }
.pv-gold.is-short b { color: var(--muted); text-shadow: none; }
.pv-head > .pv-list { grid-area: list; contain: size; overflow-y: auto; min-height: 0; padding-right: 4px; scrollbar-width: thin; }
.pv-head > .pv-list .pv-row { flex: 1 1 auto; }   /* (the rows share out the column's height, all the same) */
.pv-head > .pv-list .pv-group { flex: none; }
/* (v0.59: overflow visible, room at the top: the card's badge sits out past its corner and the card sways in 3D; a
   scrolling box cut both off) */
.pv-head > .pv-detail { grid-area: detail; contain: size; overflow: visible; display: flex; flex-direction: column; align-items: stretch; gap: 16px;
  border: 0; padding: 12px 0 0 12px; border-radius: 0; background: none; }
.pv-head > .pv-detail .pv-face { width: 230px; align-self: center; }
@media (max-width: 1080px) {
  .pv-head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "side title" "side list" "detail detail"; grid-template-rows: auto 1fr auto; }
  .pv-head > .pv-detail { contain: none; display: grid; grid-template-columns: 172px minmax(0, 1fr); }
  .pv-head > .pv-detail .pv-face { width: 172px; align-self: start; }
}
@media (max-width: 720px) {
  .pv-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "side" "list" "detail"; grid-template-rows: none; }
  .pv-gold b { font-size: 34px; }
  .pv-side { flex-direction: row; flex-wrap: wrap; justify-content: center; min-height: 0; }
  .pv-side .pv-buy { width: auto; }
  .pv-head > .pv-list { contain: none; overflow: visible; }
  .pv-head > .pv-detail { grid-template-columns: minmax(0, 1fr); }
  .pv-head > .pv-detail .pv-face { width: 160px; margin-inline: auto; }
}
/* the fake 3D (v0.59, user: "again"): the pack and the chosen card sway gently in depth, and turn toward the pointer
   (menus.js packTilt); their shadow moves with them */
@property --sway { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --swx { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --swp { syntax: '<length>'; inherits: true; initial-value: 0px; }
@keyframes pv-sway { 0% { --sway: -10deg; --swx: 4deg; --swp: 8px; } 100% { --sway: 10deg; --swx: -3deg; --swp: -8px; } }
.pv-head .pack-tilt { animation: pv-sway 5.5s ease-in-out infinite alternate;
  transform: translateY(var(--lift)) rotateX(calc(var(--rx) + var(--swx))) rotateY(calc(var(--ry) + var(--sway))) scale(var(--s)); }
.pv-head .pack-art { filter: drop-shadow(var(--sx) 16px 16px rgba(0, 0, 0, .55)); }   /* (v0.72.3: it no longer sways with the pack, so its filter isn't redrawn every frame) */
.pv-face { perspective: 900px; }
.pv-face .cf { --rx: 0deg; --ry: 0deg; animation: pv-sway 6.5s ease-in-out infinite alternate; transform-style: preserve-3d;
  transform: rotateX(calc(var(--rx) + var(--swx))) rotateY(calc(var(--ry) + var(--sway))); transition: transform .5s cubic-bezier(.2, .9, .25, 1.2);
  filter: drop-shadow(calc(var(--sx, 0px) + var(--swp)) 14px 14px rgba(0, 0, 0, .55)); }
.pv-face.is-tilt .cf { transition: transform .12s ease-out; }
.ccard { perspective: 800px; }
.ccard .cf { --rx: 0deg; --ry: 0deg; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2, .9, .25, 1.2); }
.ccard.is-tilt .cf { transition: transform .12s ease-out; }
/* the Archives' card (user: "you dont have to animation idle the cards but you can hover it"): it turns to the pointer only */
.arc-face { perspective: 900px; }
.arc-face .cf { --rx: 0deg; --ry: 0deg; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2, .9, .25, 1.2); }
.arc-face.is-tilt .cf { transition: transform .12s ease-out; }
@media (prefers-reduced-motion: reduce) { .pv-head .pack-tilt, .pv-face .cf { animation: none; } }
.pv-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-tab {
  display: grid; justify-items: start; gap: 1px; min-width: 104px; padding: 6px 10px; border-radius: 8px; text-align: left;
  transition: border-color .15s, background .15s;
}
.pv-tab-name { font-size: 12px; font-weight: 700; color: var(--c); }
.pv-tab-rar { font: 600 9px var(--f-num); letter-spacing: .08em; text-transform: uppercase; color: var(--rc); }
.pv-tab b { font: 700 13px var(--f-num); color: var(--text); font-variant-numeric: tabular-nums; }
.pv-tab[aria-selected="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
/* the list (v0.59): rarity headers, then a row per weapon, its left edge in its rarity's colour */
.pv-list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; }
.pv-row { min-height: 30px; max-height: 52px; box-sizing: border-box; }   /* (every row the same height) */
.pv-group { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0; padding: 0 2px 2px; border-bottom: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); }
.pv-group:first-child { margin-top: 0; }
.pv-group span { font: 700 11px var(--f-num); letter-spacing: .14em; text-transform: uppercase; color: var(--rc); }
.pv-group i { font-style: normal; font-size: 11px; color: var(--muted); }
.pv-group b { margin-left: auto; font: 700 11px var(--f-num); color: var(--rc); font-variant-numeric: tabular-nums; }
.pv-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 22px 84px 90px 52px; align-items: center; justify-items: stretch; gap: 10px;
  min-width: 0; padding: 2px 10px 2px 8px; border-radius: 6px; border-left: 3px solid var(--rc);
  background: color-mix(in srgb, var(--rc) 7%, transparent);
}
.pv-row:hover { background: color-mix(in srgb, var(--rc) 14%, transparent); }
.pv-row[aria-selected="true"] { border-color: var(--c); border-left-color: var(--rc); background: color-mix(in srgb, var(--c) 16%, transparent); }
.pv-row-art { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--c); color: #0b0c12; }
.pv-row-glyph { width: 16px; height: 16px; }
.pv-row .pv-tab-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-row-kind { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 700 10px var(--f-num); color: #7cc4ff; border: 1px solid currentColor; }
.pv-row-kind.is-m { color: var(--logo-orange, #ff6a1c); } .pv-row-kind.is-x { color: var(--chess-gold); }
.pv-row .pv-tab-rar { justify-self: start; padding: 2px 6px; border-radius: 3px; background: color-mix(in srgb, var(--rc) 18%, transparent); }
.pv-row-bar { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.pv-row-bar i { display: block; height: 100%; border-radius: inherit; background: var(--rc); }
.pv-row b { justify-self: end; font-size: 13px; }
@media (max-width: 560px) { .pv-row { grid-template-columns: 26px minmax(0, 1fr) 20px 74px 48px; gap: 8px; } .pv-row-bar { display: none; } }
.pv-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#btn-buy { display: inline-flex; align-items: center; gap: 6px; }
#btn-reveal-again { display: inline-flex; align-items: center; gap: 6px; }   /* (v0.70: Buy again, after a store pack's reveal) */
#btn-reveal-again[hidden] { display: none; }
.pv-detail { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; text-align: left; }
/* v0.58: the weapon's card beside its details */
.pv-detail { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 16px; align-items: start; }
.pv-face { width: 172px; }
.pv-detail-text { min-width: 0; }
@media (max-width: 560px) { .pv-detail { grid-template-columns: minmax(0, 1fr); } .pv-face { width: 160px; margin-inline: auto; } }
.pv-detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pv-detail-head .type-stats { margin: 0; }
.pv-detail .type-combo i { font-style: normal; font-weight: 700; color: var(--text); margin-right: 4px; }
.pv-test { align-self: flex-start; margin-top: 4px; padding: 6px 14px; border-radius: 4px; font-size: 12px; font-weight: 700; color: var(--c, var(--text)); }
/* Test pack (v0.33, user): next to Buy, a dark slab with a pink edge and a crosshair */
.pv-testpack {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px 10px; border: 0; border-radius: 0; clip-path: var(--chip);
  font: 400 17px/1 var(--f-metal); letter-spacing: .12em; text-transform: uppercase; color: var(--chrome-hi);
  background: var(--grain), linear-gradient(180deg, #172440, var(--slab));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--neon) 70%, transparent), inset 0 0 16px -4px color-mix(in srgb, var(--neon) 60%, transparent);
}
.pv-testpack svg { width: 18px; height: 18px; color: var(--neon-hi); }
.pv-testpack:hover { filter: brightness(1.2); transform: translateY(-1px); }

/* Test mode: the HUD a run needs is hidden; a panel at the top fires the attacks */
body.in-practice .hud, body.in-practice .decks, body.in-practice .xp, body.in-practice .hp,
body.in-practice .statpanel, body.in-practice .hint, body.in-practice .relics, body.in-practice .runbar { visibility: hidden; }
/* v0.33 (user: a better look for TEST PACK): a dark slab with a pink edge and chipped corners, a chrome TEST PACK
   title with the pack under it, weapon chips with their icon, attack slabs, and a big damage count */
.practice {
  position: fixed; z-index: 5; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 12px); width: min(620px, calc(100% - 32px)); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  max-height: calc(100% - 24px); overflow-y: auto;
  padding: 12px 16px 10px; clip-path: var(--chip);
  background: var(--grain), linear-gradient(180deg, rgba(40, 24, 42, .96), rgba(20, 12, 22, .96));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.pr-head { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 2px 14px; }
.pr-title {
  margin: 0; font: 400 26px/1.1 var(--f-metal); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--chrome-hi) 12%, #9fd3ff 44%, var(--logo-blue) 51%, var(--logo-orange) 58%, var(--logo-gold) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 var(--neon-dark)) drop-shadow(0 0 10px color-mix(in srgb, var(--neon) 35%, transparent));
}
.pr-head .eyebrow { margin: 0; font: 400 13px var(--f-metal); letter-spacing: .18em; text-transform: uppercase; color: var(--neon-hi); }
.pr-tabs, .pr-fire { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pr-tabs button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border: 0; border-radius: 4px;
  font-size: 12px; font-weight: 700; color: var(--c);
  background: color-mix(in srgb, var(--c) 8%, #0b0c10); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent);
}
.pr-tabs svg { width: 15px; height: 15px; flex: none; }
.pr-tabs button:hover { box-shadow: inset 0 0 0 1px var(--c); }
.pr-tabs button[aria-pressed="true"] { color: #fff; background: color-mix(in srgb, var(--c) 30%, #0b0c10); box-shadow: inset 0 0 0 2px var(--c), 0 0 14px -4px var(--c); }
.pr-fire button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 128px; padding: 10px 14px 8px;
  border: 0; border-radius: 0; clip-path: var(--chip); color: var(--chrome-hi);
  background: var(--grain), linear-gradient(180deg, color-mix(in srgb, var(--c) 18%, #1a1c24), #0c0d11);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent);
}
.pr-fire button:hover { filter: brightness(1.15); }
.pr-fire button[aria-pressed="true"] { background: var(--grain), linear-gradient(180deg, color-mix(in srgb, var(--c) 42%, #1a1c24), color-mix(in srgb, var(--c) 14%, #0c0d11)); box-shadow: inset 0 0 0 2px var(--c), inset 0 0 18px -4px var(--c); }
.pr-fire button b { font: 400 14px var(--f-metal); letter-spacing: .06em; text-transform: uppercase; }
.pr-fire button small { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--c); }
.pr-fire .up-key { position: absolute; top: 5px; left: 9px; font: 400 11px var(--f-metal); color: var(--muted); }
.pr-controls { display: none; }
/* v0.57 (user: the controls bigger, on the left; the weapons on the right): wide screens put the panel down the right
   side and the keys down the left, with the test arena between them (menus.js setupBattle). */
@media (min-width: 900px) {
  .practice {
    left: auto; right: 16px; transform: none; width: 340px;
    top: calc(env(safe-area-inset-top, 0px) + 16px); max-height: calc(100% - 32px - env(safe-area-inset-top, 0px));
  }
  .pr-head { flex-direction: column; align-items: center; gap: 2px; text-align: center; }
  .pr-fire { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .pr-fire button { min-width: 0; padding: 10px 6px 8px; }
  .pr-fire button b { font-size: 12px; }
  body.in-practice .pr-controls {
    display: flex; flex-direction: column; gap: 12px;
    position: fixed; z-index: 5; left: 16px; top: 50%; transform: translateY(-50%); width: 230px; box-sizing: border-box;
    padding: 16px 18px; clip-path: var(--chip);
    background: var(--grain), linear-gradient(180deg, rgba(40, 24, 42, .92), rgba(20, 12, 22, .92));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon) 40%, transparent);
  }
  .menu:not([hidden]) ~ .pr-controls { visibility: hidden; }
}
@media (pointer: coarse) { body.in-practice .pr-controls { display: none; } }   /* (no keys on a touch screen) */
.pr-keys { display: flex; flex-direction: column; gap: 12px; }
/* Test pack's pack (v0.60, user): over the controls, ‹ › to switch (or ← →), spinning into the new one (menus.js practicePack) */
.pr-pack { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--neon) 30%, transparent); perspective: 700px; }
.pr-pack-art { transform-style: preserve-3d; }
.pr-pack .pack-art { --w: 128px; }
.pr-pack-nav { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; gap: 8px; width: 100%; }   /* (the arrows stay put, whatever the name's length: user) */
.pr-pack-nav span { min-width: 0; font: 400 13px var(--f-metal); letter-spacing: .12em; text-transform: uppercase; color: var(--chrome-hi); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-pack-nav button { width: 30px; height: 30px; padding: 0; border-radius: 0; clip-path: var(--chip); font-size: 20px; line-height: 1; color: var(--neon-hi);
  background: var(--grain), linear-gradient(180deg, #2a1a30, #140c16); border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon) 60%, transparent); }
.pr-pack-nav button:hover { filter: brightness(1.3); }
.prc-head { margin: 0; font: 400 13px var(--f-metal); letter-spacing: .18em; text-transform: uppercase; color: var(--neon-hi); }
.pr-controls ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pr-controls li { display: grid; gap: 5px; }
.prc-keys { display: flex; gap: 5px; }
.pr-controls kbd {
  min-width: 30px; height: 30px; padding: 0 8px; box-sizing: border-box; display: inline-grid; place-items: center;
  font: 700 14px var(--f-num); color: var(--text); background: color-mix(in srgb, var(--text) 6%, #0b0c10);
  border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 6px;
}
.prc-what { font-size: 15px; font-weight: 700; color: var(--text); display: grid; gap: 1px; }
.prc-what small { font-size: 12px; font-weight: 600; color: var(--muted); }
.pr-dmg { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pr-dmg b { font: 400 22px var(--f-metal); letter-spacing: .02em; color: var(--chrome-hi); vertical-align: -3px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.menu:not([hidden]) ~ .practice { visibility: hidden; }
/* Test loadout shows the deck tray, so you can watch the sequences play */
body.in-practice.is-loadout-test .decks { visibility: visible; }

.odds { border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 180px; }
.odds caption { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; }
.odds th, .odds td { padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.odds th { text-align: left; font-weight: 600; }
.odds td { text-align: right; font-family: var(--f-num); }
.small { font-size: 12px; }
.warn { color: var(--bad); max-width: 36ch; }
.row { display: flex; gap: 10px; justify-content: center; }
.row button { padding: 8px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.reset { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); width: 220px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.reset-confirm { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.menu .danger { color: var(--bad); border-color: var(--bad); }
.menu .danger:hover { background: var(--bad); color: var(--floor); }

/* ---------- a weapon card's face (v0.58, the user's new card design; cardface.js) ----------
   Top: the R / M badge (over the corner) and the name. Middle: the art on the weapon's colour, fading into the card
   above and below. Bottom: the big number (damage), a short line, the passive and the ult. The border is metal in
   the rarity's colour (gold for Legendary, foil for Triple S, red chrome for Event), and a glint runs round it:
   on hover for a Common, more often the rarer the card. Everything is sized in cqw, so it scales with the card. */
.cf {
  --ink: #0f1016; --paper: #fff7ea;
  --cf-metal: linear-gradient(135deg, color-mix(in srgb, var(--rc) 38%, #000) 0%, color-mix(in srgb, var(--rc) 28%, #fff) 20%, var(--rc) 36%,
    color-mix(in srgb, var(--rc) 50%, #000) 52%, color-mix(in srgb, var(--rc) 18%, #fff) 68%, var(--rc) 82%, color-mix(in srgb, var(--rc) 38%, #000) 100%);
  container-type: inline-size; position: relative; width: 100%; aspect-ratio: 5 / 7; text-align: left;
}
.cf-legendary { --cf-metal: linear-gradient(135deg, #6b3d08, #ffe7a3 18%, #d99a2b 34%, #fff6d6 46%, #8a5410 58%, #ffd36b 74%, #b97714 88%, #6b3d08); }
.cf-sss { --cf-metal: linear-gradient(135deg, #a9a2dc, #f7d3ee 14%, #d9cdfb 28%, #c4e8f8 42%, #ffffff 50%, #d2f7e4 58%, #fbf0c6 72%, #f4cfe9 86%, #a9a2dc); }
.cf-event { --cf-metal: linear-gradient(135deg, #5e0a14, #ff8f9a 18%, #e0283c 34%, #ffd9e8 46%, #7a0d19 58%, #c9e8ff 70%, #ff3346 84%, #5e0a14); }
.cf-frame {
  position: absolute; inset: 0; box-sizing: border-box; padding: 2.8cqw; border-radius: 7cqw;
  background: var(--cf-metal); background-size: 220% 220%; background-position: 0 0;
  box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, .5); transition: box-shadow .14s ease;
}
.cf-body {
  position: relative; height: 100%; box-sizing: border-box; border-radius: 4.6cqw; overflow: hidden;
  display: grid; grid-template-rows: 16% minmax(0, 1fr) 34%;
  background: linear-gradient(180deg, #171a26, #0b0c12 50%, #10121a);
  box-shadow: inset 0 0 0 .5cqw rgba(0, 0, 0, .65);
}
.cf-top { position: relative; z-index: 2; display: flex; align-items: center; min-width: 0; padding: 0 4cqw 0 21cqw; }
.cf-name {
  font: 400 8.4cqw/1 var(--f-metal, "Russo One", sans-serif); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance;
  color: var(--chrome-hi, #f3f8ff); text-shadow: 0 .5cqw 1.6cqw rgba(0, 0, 0, .9);
}
.cf-sss .cf-name, .cf-event .cf-name { background: var(--holo); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 .5cqw 1cqw rgba(0, 0, 0, .9)); }
.cf-event .cf-name { background-image: linear-gradient(90deg, #ff6a78, #ffe6ea, #ffc9e4, #c9e8ff, #ff6a78); }
/* the badge: a coin in the border's metal, R in the logo's sky blue, M in its orange */
.cf-kind {
  position: absolute; z-index: 3; left: -1.5cqw; top: -1.5cqw; width: 22cqw; height: 22cqw; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 50%; border: 1.8cqw solid transparent;
  background: radial-gradient(circle at 35% 30%, #2c3040, #0b0c12 72%) padding-box, var(--cf-metal) border-box;
  box-shadow: 0 1cqw 2.6cqw rgba(0, 0, 0, .65);
  font: 400 10.5cqw/1 var(--f-metal, "Russo One", sans-serif); color: var(--logo-sky-hi, #c4e9ff);
}
.cf-kind.is-m { color: var(--logo-orange, #ff6a1c); }
.cf-kind.is-x { color: var(--chess-gold); }   /* EN PASSANT's X (v0.59) */
/* the art: the weapon's colour, lightest behind the picture, fading (and softening) into the card above and below */
.cf-art { position: relative; z-index: 1; display: grid; place-items: center; min-height: 0; }
.cf-art::before, .cf-art::after { content: ""; position: absolute; inset: -30% -4%; z-index: -1; pointer-events: none;
  -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.cf-art::before { filter: blur(1.4cqw);
  background: radial-gradient(64% 56% at 50% 50%, color-mix(in srgb, var(--c) 52%, var(--paper)) 0%, color-mix(in srgb, var(--c) 86%, #000) 66%, color-mix(in srgb, var(--c) 40%, #000) 100%); }
.cf-art::after { opacity: .5;   /* a little print dot, like ink on card stock */
  background: radial-gradient(circle, rgba(0, 0, 0, .14) .45cqw, transparent .55cqw) 0 0 / 3.2cqw 3.2cqw; }
.cf-svg { display: block; height: 62%; width: auto; aspect-ratio: 1; color: var(--ink); }   /* (flat, one colour; inside the art box) */
.cf-rar { position: absolute; z-index: 1; box-sizing: border-box; border-radius: 9cqw; background: rgba(8, 9, 13, .8); }
.cf-rar { z-index: 3; left: 50%; bottom: -1.2cqw; translate: -50% 0; padding: 1.3cqw 3.4cqw 1.1cqw; white-space: nowrap; background: #0b0c12;
  font: 700 4.2cqw/1 var(--f-num, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--rc);
  box-shadow: inset 0 0 0 .35cqw color-mix(in srgb, var(--rc) 55%, transparent); }
.cf-sss .cf-rar { color: #efeaff; box-shadow: inset 0 0 0 .35cqw #c4e8f8; }
/* the red counter (the collection: copies free to add), on the card's top right corner */
.cf-count { position: absolute; z-index: 5; top: -2.4cqw; right: -2.4cqw; box-sizing: border-box; min-width: 12cqw; height: 12cqw; padding: 0 2.6cqw;
  display: grid; place-items: center; border-radius: 9cqw; background: linear-gradient(180deg, #ff4d5e, #d9142b);
  box-shadow: 0 0 0 1.2cqw #0b0c12, 0 1.2cqw 2.4cqw rgba(0, 0, 0, .55); font: 700 6.6cqw/1 var(--f-num, sans-serif); color: #fff; font-variant-numeric: tabular-nums; }
.cf-count.is-zero { background: #3a3d48; color: #b7bcc6; }
/* the tier (v0.62, tiers.js): a gold tab hanging from the card's right edge, under the counter */
.cf-tier { position: absolute; z-index: 4; right: -1.4cqw; top: 13cqw; box-sizing: border-box; min-width: 12cqw; padding: 1.4cqw 2.4cqw 1.1cqw; border-radius: 2.4cqw 0 0 2.4cqw;
  font: 700 5.6cqw/1 var(--f-num, sans-serif); letter-spacing: .08em; text-align: center; color: #1b1203;
  background: linear-gradient(180deg, #fff1c2, var(--logo-gold, #ffc23a) 55%, #c98a12); box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, .55), inset 0 0 0 .4cqw rgba(255, 255, 255, .35); }
.cf-tier.is-max { background: linear-gradient(90deg, #ffe08a, #fff8e1, #ffc23a, #fff2c4, #ffd36b); background-size: 220% 100%; box-shadow: 0 0 3cqw rgba(255, 194, 58, .7), inset 0 0 0 .4cqw rgba(255, 255, 255, .5); }
/* the bottom: the number in a metal-edged box, then the words */
.cf-low { position: relative; z-index: 2; display: grid; grid-template-columns: 25cqw minmax(0, 1fr); gap: 3.2cqw; align-items: start; padding: 2.6cqw 4cqw 4.4cqw 4.4cqw; }
.cf-num {
  display: grid; place-items: center; align-content: center; gap: .8cqw; aspect-ratio: 25 / 31; box-sizing: border-box;
  border: 1.5cqw solid transparent; border-radius: 3cqw;
  background: linear-gradient(180deg, #1b1f2c, #0b0c12) padding-box, var(--cf-metal) border-box;
}
.cf-num b { font: 400 13cqw/1 var(--f-metal, sans-serif); color: #fff; text-shadow: 0 0 3cqw color-mix(in srgb, var(--c) 60%, transparent); }
.cf-num i { font: 700 3.8cqw/1 var(--f-num, sans-serif); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #8f939c); }
.cf-text { display: flex; flex-direction: column; gap: 1.6cqw; min-width: 0; }
.cf-desc { margin: 0 0 .6cqw; font: 500 5.2cqw/1.22 var(--f-ui, sans-serif); color: #cfd4de;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.cf-combo { margin: 0; display: flex; align-items: center; gap: 1.6cqw; min-width: 0;
  font: 700 4.9cqw/1 var(--f-ui, sans-serif); letter-spacing: .02em; color: color-mix(in srgb, var(--c) 70%, #fff); }
.cf-combo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-combo b { flex: none; display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: var(--paper); color: var(--ink); font: 700 4.4cqw/1 var(--f-num, sans-serif); }
.cf-combo.is-none { color: var(--muted, #8f939c); }
/* the glint: a band of light running round the metal border only */
.cf-sheen { position: absolute; inset: 0; z-index: 4; box-sizing: border-box; padding: 2.8cqw; border-radius: 7cqw; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .9) 50%, transparent 60%) no-repeat; background-size: 300% 100%; background-position: 120% 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@keyframes cf-glint { 0% { background-position: 120% 0; } 45%, 100% { background-position: -20% 0; } }
@keyframes cf-metal { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .ccard:hover .cf-common .cf-sheen, .pv-face:hover .cf-common .cf-sheen, .arc-face:hover .cf-common .cf-sheen, .ccard:hover .cf-uncommon .cf-sheen, .pv-face:hover .cf-uncommon .cf-sheen, .arc-face:hover .cf-uncommon .cf-sheen { animation: cf-glint 1.1s ease-out; }
  .cf-uncommon .cf-sheen { animation: cf-glint 5s ease-in-out infinite; }
  .cf-rare .cf-sheen { animation: cf-glint 4s ease-in-out infinite; }
  .cf-epic .cf-sheen { animation: cf-glint 3.2s ease-in-out infinite; }
  .cf-legendary .cf-sheen, .cf-sss .cf-sheen, .cf-event .cf-sheen { animation: cf-glint 2.6s ease-in-out infinite; }
  .cf-legendary .cf-frame, .cf-sss .cf-frame, .cf-event .cf-frame, .cf-legendary .cf-kind, .cf-sss .cf-kind, .cf-event .cf-kind { animation: cf-metal 4s ease-in-out infinite alternate; }
  .cf-sss .cf-name, .cf-event .cf-name { animation: rv-foil 2.4s linear infinite; }
}
.cf-legendary .cf-kind, .cf-sss .cf-kind, .cf-event .cf-kind { background-size: 100% 100%, 220% 220%; }
/* v0.64 (user: "apply those card to respective cards"): a card's picture (cardface.js CARD_PICS), full width from just
   under its top edge, fading into the card above the words; its name sits on a dark band over it. */
/* (the window holds the fade, in the card's own place; the picture moves and zooms inside it: cardart.js `frame`, its
   --ax, --ay in % of the card's width, --az its zoom. By default it sits a little under the top, full width.) */
.cf-pic-win { position: absolute; left: 0; top: 0; z-index: 0; width: 100%; aspect-ratio: 1 / 1.06; overflow: hidden; pointer-events: none;
  container-type: inline-size;   /* (v0.65: its cqw are the picture's width, for its seams) */
  -webkit-mask: linear-gradient(#000 54%, transparent 94%); mask: linear-gradient(#000 54%, transparent 94%); }
.cf-pic { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none;
  transform: translate(var(--ax, 0%), var(--ay, 5.7%)) scale(var(--az, 1)); transform-origin: 50% 50%; }
/* (v0.64: a gap the framing leaves is filled by the picture mirrored across that edge, dimmed a little and fading
   into the card's dark away from the seam: cardface.js cardMirrors. Each copy is the picture flipped about the edge it
   touches, so the seam lines up; 99.8% overlaps it a hair so no line shows.) */
.cf-pic.cf-mir { transform: translate(var(--ax, 0%), var(--ay, 5.7%)) scale(var(--az, 1)) var(--m); filter: brightness(.72) saturate(.85) blur(.9cqw);
  -webkit-mask: var(--mk); mask: var(--mk); }
/* v0.65 (user: "on the mirrored art on the border blur it so it looks seamless"): the copies are blurred (above), and a
   band along each seam blurs whatever is under it, the picture's edge and its mirror together, fading out to both
   sides, so the picture runs on into its reflection with no line. Where the seam is: the picture's edge, from its
   framing (--fx, --fy, --fz as numbers, in % of the picture's width = the window's cqw; the defaults are cardMirrors'). */
.cf-seam { position: absolute; pointer-events: none; -webkit-backdrop-filter: blur(1.1cqw); backdrop-filter: blur(1.1cqw);
  --sx: calc((50 + var(--fx, 0) - 50 * var(--fz, 1)) * 1cqw); --sy: calc((50 + var(--fy, 5.7) - 50 * var(--fz, 1)) * 1cqw);
  --ex: calc((50 + var(--fx, 0) + 50 * var(--fz, 1)) * 1cqw); --ey: calc((50 + var(--fy, 5.7) + 50 * var(--fz, 1)) * 1cqw); }
.cf-seam.s-t, .cf-seam.s-b { left: 0; right: 0; height: 7cqw; -webkit-mask: linear-gradient(transparent, #000 40%, #000 60%, transparent); mask: linear-gradient(transparent, #000 40%, #000 60%, transparent); }
.cf-seam.s-l, .cf-seam.s-r { top: 0; bottom: 0; width: 7cqw; -webkit-mask: linear-gradient(to right, transparent, #000 40%, #000 60%, transparent); mask: linear-gradient(to right, transparent, #000 40%, #000 60%, transparent); }
.cf-seam.s-t { top: calc(var(--sy) - 3.5cqw); }
.cf-seam.s-b { top: calc(var(--ey) - 3.5cqw); }
.cf-seam.s-l { left: calc(var(--sx) - 3.5cqw); }
.cf-seam.s-r { left: calc(var(--ex) - 3.5cqw); }
.cf-mir.m-t { --m: translateY(-98.5%) scaleY(-1); --mk: linear-gradient(#000, transparent 70%); }
.cf-mir.m-b { --m: translateY(98.5%) scaleY(-1); --mk: linear-gradient(to top, #000, transparent 70%); }
.cf-mir.m-l { --m: translateX(-98.5%) scaleX(-1); --mk: linear-gradient(to right, #000, transparent 70%); }
.cf-mir.m-r { --m: translateX(98.5%) scaleX(-1); --mk: linear-gradient(to left, #000, transparent 70%); }
.cf-mir.m-tl { --m: translate(-99.8%, -99.8%) scale(-1, -1); --mk: radial-gradient(circle at 0 0, #000, transparent 70%); }
.cf-mir.m-tr { --m: translate(99.8%, -99.8%) scale(-1, -1); --mk: radial-gradient(circle at 100% 0, #000, transparent 70%); }
.cf-mir.m-bl { --m: translate(-99.8%, 99.8%) scale(-1, -1); --mk: radial-gradient(circle at 0 100%, #000, transparent 70%); }
.cf-mir.m-br { --m: translate(99.8%, 99.8%) scale(-1, -1); --mk: radial-gradient(circle at 100% 100%, #000, transparent 70%); }
.cf.has-pic .cf-art::before, .cf.has-pic .cf-art::after { display: none; }
.cf.has-pic .cf-top { background: linear-gradient(rgba(8, 9, 13, .92), rgba(8, 9, 13, .6) 62%, transparent); }
.pv-row-art.has-pic { overflow: hidden; background: #0b0c12; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 60%, transparent); }
.pv-row-pic { display: block; width: 100%; height: 100%; object-fit: cover; }

/* v0.64 (user: "the rarer the cards the beautiful the overlay of the holo or shine"; then, with a CodePen's "holographic
   masks" (Christian Alder, after Robb Owen's CSS shaders): "follow this holo effect, in the rarity's colours, reacting to
   the mouse rather than scroll"). The same layers, in cardface.js CF_HOLO:
     .cf-holo         the shader: black, with a long gradient (--hg: black, then bands of the rarity's colour, then black)
                      that colour-dodges onto the art. Dodging black does nothing, so the light shows only where a band
                      sits. The band slides with the pointer (packTilt's --mx, --my on the card) instead of the scroll
                      (the CodePen's background-attachment: fixed); with no pointer it drifts on its own (cf-idle).
     .cf-holo::before the mask (--hm): white where the light may show, black where not, multiplied over the gradient. One
                      mask for every card: the fine lines (user: "i like the effect you used for uncommon, do that for ALL
                      cards"; the rays and rings were taken out: "i don't like the lines like this").
   The border (.cf-sheen) is the same gradient, through the border only, on Rare and up.
   Common steel (its border glints on hover), Uncommon green, Rare blue, Epic violet, Legendary gold, Triple S pearl,
   Event red; En Passant gold, the T-Balls red and cyan (cf-t-chess, cf-t-tball below). */
.cf { --hg: none; --hm: none; }   /* (v0.67, user: "the lines don't look clean on the loadout": no line mask now, just the smooth band; put a pattern back here to mask it) */
.cf-holo { position: absolute; inset: 0; z-index: 1; display: none; overflow: hidden; pointer-events: none; mix-blend-mode: color-dodge; isolation: isolate;
  background-color: #000; background-image: var(--hg); background-size: 280% 280%; background-repeat: no-repeat; background-position: var(--mx, 50%) var(--my, 40%);
  transition: background-position .16s ease-out;
  -webkit-mask: linear-gradient(#000 0 58%, rgba(0, 0, 0, .35) 100%); mask: linear-gradient(#000 0 58%, rgba(0, 0, 0, .35) 100%); }
.cf-holo::before { content: ""; position: absolute; inset: 0; background: var(--hm); mix-blend-mode: multiply; }
.cf-common .cf-holo, .cf-uncommon .cf-holo, .cf-rare .cf-holo, .cf-epic .cf-holo, .cf-legendary .cf-holo, .cf-sss .cf-holo, .cf-event .cf-holo { display: block; }
/* the gradients: black, the rarity's colour in a few bands, black (the light only shows inside the bands) */
.cf-common { --hg: linear-gradient(135deg, #000 24%, #44525c 36%, #8fa3b0 45%, #c9d6de 50%, #8fa3b0 55%, #44525c 64%, #000 76%); }
.cf-uncommon { --hg: linear-gradient(135deg, #000 22%, #1f7a4a 34%, #6fe0a0 44%, #d9ffe9 50%, #6fe0a0 56%, #1f7a4a 66%, #000 78%); }
.cf-rare { --hg: linear-gradient(135deg, #000 18%, #1f4fb8 30%, #3f8bff 40%, #9fe6ff 47%, #c4f1ff 50%, #9fe6ff 53%, #3f8bff 60%, #1f4fb8 70%, #000 82%); }
.cf-epic { --hg: linear-gradient(135deg, #000 14%, #3a1aa8 26%, #8a4dff 36%, #ff7bf0 44%, #e6c2ff 50%, #c58bff 56%, #6a35e0 66%, #3a1aa8 74%, #000 86%); }
.cf-legendary { --hg: linear-gradient(135deg, #000 14%, #7a4a08 26%, #ffb23e 37%, #ffe08a 44%, #ffeaa8 50%, #ffd36b 56%, #d99a2b 64%, #7a4a08 74%, #000 86%); }
.cf-sss { --hg: linear-gradient(135deg, #000 10%, #b9a9ff 24%, #f7b9e6 33%, #b9f0ff 42%, #f4f0ff 50%, #c8ffe0 57%, #fff2b8 65%, #e7b9ff 74%, #000 90%); }
.cf-event { --hg: linear-gradient(135deg, #000 14%, #7a0d19 26%, #ff3346 37%, #ff9aa8 45%, #ffc0ca 50%, #ff9aa8 55%, #ff3346 63%, #7a0d19 74%, #000 86%); }
/* The packs get the same holo (v0.64, user: "add that beautiful effect to the packs as well"): `.pack-holo` (menus.js
   packArt) sits on the seal and on the body, under the name and PACK and over the art, in the colour of the pack's best
   rarity (top-<rarity>, the same --hg as a card of it), through the same fine lines. One gradient is laid across both
   shapes in px of the whole pack (like the cover art), so the light runs straight over the tear. It follows the pointer
   (packTilt's --fx, --fy, 0 to 1) and drifts on its own with none. */
.pack-art { --PH: calc(var(--w) * 1.42); --hm: none;
  --hx: calc(var(--fx) * var(--w) * -1.6); --hy: calc(var(--fy) * var(--PH) * -1.6); --hby: calc(var(--PH) * -.17 + 3px); }
.pack-top, .pack-body { isolation: isolate; }
.pack-holo { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: color-dodge; isolation: isolate; opacity: .6;
  background-color: #000; background-image: var(--hg); background-repeat: no-repeat; background-size: calc(var(--w) * 2.6) calc(var(--PH) * 2.6);
  background-position: var(--hx) var(--hy); transition: background-position .16s ease-out; }
.pack-body .pack-holo { background-position: var(--hx) calc(var(--hy) + var(--hby)); }
.pack-holo::before { content: ""; position: absolute; inset: 0; background: var(--hm); mix-blend-mode: multiply; }
@keyframes pack-idle { from { background-position: calc(var(--w) * -.3) calc(var(--PH) * -.35); } to { background-position: calc(var(--w) * -1.4) calc(var(--PH) * -1.6); } }
@keyframes pack-idle-body { from { background-position: calc(var(--w) * -.3) calc(var(--PH) * -.35 + var(--hby)); } to { background-position: calc(var(--w) * -1.4) calc(var(--PH) * -1.6 + var(--hby)); } }
@media (prefers-reduced-motion: no-preference) {
  .pack-top .pack-holo { animation: pack-idle 6s ease-in-out infinite alternate; }
  .pack-body .pack-holo { animation: pack-idle-body 6s ease-in-out infinite alternate; }
  .is-tilt .pack-holo, .pack-art.is-tilt .pack-holo { animation: none; }
}
/* the border: the same light through the border only (Rare and up; Common and Uncommon keep their white glint) */
.cf-rare .cf-sheen, .cf-epic .cf-sheen, .cf-legendary .cf-sheen, .cf-sss .cf-sheen, .cf-event .cf-sheen {
  background: var(--hg) no-repeat; background-size: 280% 280%; background-position: var(--mx, 50%) var(--my, 40%); mix-blend-mode: color-dodge; transition: background-position .16s ease-out; }

/* ===== v0.64 (user: "for triple S and event cards make the card design more premium and inline with the weapon's theme")
   EN PASSANT (cf-t-chess): a chessboard border of ivory and walnut squares with a gold line either side, a gold name, a
   faint board under the piece; (its light is the same fine lines as every card's now).
   The T-BALLS (cf-t-tball; user: "the T-Balls card looks weird, change it up"): black chrome with a red edge-light, a
   white pearl ball on a glowing red core, cyan zap glints.
   (Checked by weapon, cardface.js CARD_THEME.) ===== */
.cf-t-chess { --cf-metal: linear-gradient(135deg, #7a5412, #ffe7a3 20%, #d99a2b 38%, #fff3c4 50%, #8a5410 62%, #ffd36b 80%, #7a5412);
  --hg: linear-gradient(135deg, #000 14%, #6e4708 26%, #e9b940 36%, #ffdd8a 44%, #ffeaa8 50%, #ffdd8a 56%, #d99a2b 64%, #6e4708 74%, #000 86%); }
.cf-t-chess .cf-frame { background: repeating-conic-gradient(#f1e7d0 0 25%, #2b211c 0 50%) 0 0 / 5.6cqw 5.6cqw;
  box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, .5), inset 0 0 0 .7cqw #e9b940, inset 0 0 1.4cqw rgba(0, 0, 0, .35); }
.cf-t-chess .cf-body { box-shadow: inset 0 0 0 .5cqw rgba(0, 0, 0, .65), 0 0 0 .55cqw #e9b940, 0 0 1.6cqw rgba(0, 0, 0, .6); }
.cf-t-chess .cf-name { background-image: linear-gradient(90deg, #ffe7a3, #fffaf0, #f2c14e, #fff3c4, #ffe7a3); }
.cf-t-chess .cf-rar { color: #ffe7a3; box-shadow: inset 0 0 0 .35cqw #e9b940; }
.cf-t-chess .cf-art::after { opacity: 1;
  background: repeating-conic-gradient(rgba(58, 46, 39, .2) 0 25%, transparent 0 50%) 50% 50% / 13cqw 13cqw;
  -webkit-mask: radial-gradient(ellipse 62% 50% at 50% 54%, #000 18%, transparent 78%); mask: radial-gradient(ellipse 62% 50% at 50% 54%, #000 18%, transparent 78%); }

.cf-t-tball { --cf-metal: linear-gradient(135deg, #14161c, #6b7180 14%, #20232b 28%, #f2f4f8 42%, #20232b 54%, #ff3b4e 70%, #7a0d19 84%, #14161c);
  --hg: linear-gradient(135deg, #000 14%, #7a0d19 26%, #ff3346 36%, #ffb0bc 43%, #ffd0d8 47%, #7fdcff 52%, #5ad2ff 56%, #ff3346 64%, #7a0d19 74%, #000 86%); }
.cf-t-tball .cf-body { box-shadow: inset 0 0 0 .5cqw rgba(0, 0, 0, .65), 0 0 0 .5cqw rgba(255, 59, 78, .85), 0 0 2cqw rgba(255, 59, 78, .4); }
.cf-t-tball .cf-art::before { filter: blur(1.2cqw);
  background: radial-gradient(58% 54% at 50% 50%, #ff6474 0%, #d11f35 34%, #6a0c1a 66%, #0b0c12 100%); }
.cf-t-tball .cf-svg { color: var(--tball-shell); filter: drop-shadow(0 0 2.6cqw rgba(255, 59, 78, .95)) drop-shadow(0 .6cqw .6cqw rgba(0, 0, 0, .6)); }
.cf-t-tball .cf-rar { color: #ffd9de; box-shadow: inset 0 0 0 .35cqw var(--tball); }

/* ===== v0.64 (user: "make the rainbow bars effect + gold secret for legendary and above, triple S the galaxy burn,
   trainer gallery effect to rare and epic"; then "why are the effects not like the one i mentioned from the card effects?"):
   the card effects from the Effects lab's Cards gallery (src/fxcards.js, its shine / glare layers), used as
   they are. cardface.js puts them on Rare and up: .cf-fx-a, .cf-fx-b (colour-dodge shine layers) and .cf-glare (overlay),
   over the whole card, fed by the pointer where the card tilts (packTilt's --mx, --my, --posx, --posy, --pos, --hyp; at
   rest they sit as if the pointer were in the middle, and don't move on their own). Under them every card keeps the game's
   fine-line holo in its rarity's colour (.cf-holo; user: "add the fine-line holo to all cards, that is the default and then
   layer the other layers on top"); only the border light (.cf-sheen) is off on Rare and up.
     every rarity         FINE-LINE HOLO (the default, underneath)
     Rare, Epic           + TRAINER GALLERY
     Legendary            + RAINBOW FOIL + GOLD SECRET (user: "Legendary: rainbow foil + gold secret")
     Triple S, Event      + GALAXY over the whole card + GOLD SECRET (user: "Triple S & Events: should have the galaxy
                          effect for the full card and gold secret")
   The gallery's pictures are SVG stand-ins (--fx-*). ===== */
:root { --fx-grain: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22500%22%20height%3D%22500%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.7%22%20numOctaves%3D%2210%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22500%22%20height%3D%22500%22%20fill%3D%22%23000%22%2F%3E%3Crect%20width%3D%22500%22%20height%3D%22500%22%20filter%3D%22url(%23n)%22%20opacity%3D%220.3%22%2F%3E%3C%2Fsvg%3E"); --fx-stars: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.012%22%20numOctaves%3D%225%22%20seed%3D%223%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.45%20%200%200%200%200%20.3%20%200%200%200%200%20.95%20%200%200%200%201.7%20-.45%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22%2305060f%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%22400%22%20filter%3D%22url(%23n)%22%2F%3E%3Ccircle%20cx%3D%220.0%22%20cy%3D%22368.3%22%20r%3D%220.93%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22291.7%22%20cy%3D%22213.1%22%20r%3D%220.99%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.85%22%2F%3E%3Ccircle%20cx%3D%22302.0%22%20cy%3D%22217.1%22%20r%3D%221.53%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%22326.7%22%20cy%3D%2296.8%22%20r%3D%221.06%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.82%22%2F%3E%3Ccircle%20cx%3D%22279.2%22%20cy%3D%2221.6%22%20r%3D%221.53%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%22369.0%22%20cy%3D%22323.0%22%20r%3D%220.68%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%22369.3%22%20cy%3D%22275.4%22%20r%3D%221.47%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%22364.8%22%20cy%3D%22363.3%22%20r%3D%221.06%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.60%22%2F%3E%3Ccircle%20cx%3D%22334.9%22%20cy%3D%22132.9%22%20r%3D%220.73%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%22171.4%22%20cy%3D%22117.9%22%20r%3D%221.91%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.73%22%2F%3E%3Ccircle%20cx%3D%22291.7%22%20cy%3D%22351.1%22%20r%3D%220.59%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.56%22%2F%3E%3Ccircle%20cx%3D%22224.3%22%20cy%3D%22203.5%22%20r%3D%221.13%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22363.6%22%20cy%3D%2222.0%22%20r%3D%221.05%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.61%22%2F%3E%3Ccircle%20cx%3D%22265.8%22%20cy%3D%22369.7%22%20r%3D%221.27%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.50%22%2F%3E%3Ccircle%20cx%3D%22162.2%22%20cy%3D%22113.4%22%20r%3D%221.05%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%22133.0%22%20cy%3D%22212.7%22%20r%3D%221.42%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%22362.6%22%20cy%3D%22183.1%22%20r%3D%221.79%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%22253.7%22%20cy%3D%22206.5%22%20r%3D%221.26%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.81%22%2F%3E%3Ccircle%20cx%3D%22375.8%22%20cy%3D%22158.7%22%20r%3D%221.56%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22234.7%22%20cy%3D%22140.2%22%20r%3D%221.00%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%22317.9%22%20cy%3D%22351.0%22%20r%3D%220.67%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.89%22%2F%3E%3Ccircle%20cx%3D%2231.1%22%20cy%3D%22162.7%22%20r%3D%220.73%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22398.5%22%20cy%3D%2288.0%22%20r%3D%221.45%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%22182.8%22%20cy%3D%22237.2%22%20r%3D%220.71%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22353.8%22%20cy%3D%22356.2%22%20r%3D%221.83%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.94%22%2F%3E%3Ccircle%20cx%3D%22304.5%22%20cy%3D%22110.2%22%20r%3D%220.52%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%2230.4%22%20cy%3D%220.6%22%20r%3D%221.43%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%22296.5%22%20cy%3D%22195.7%22%20r%3D%221.53%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%22352.8%22%20cy%3D%2294.1%22%20r%3D%221.06%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.94%22%2F%3E%3Ccircle%20cx%3D%2247.3%22%20cy%3D%22195.7%22%20r%3D%220.50%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22254.8%22%20cy%3D%22368.8%22%20r%3D%220.53%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.94%22%2F%3E%3Ccircle%20cx%3D%2275.3%22%20cy%3D%22387.5%22%20r%3D%221.35%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.81%22%2F%3E%3Ccircle%20cx%3D%22106.5%22%20cy%3D%2289.1%22%20r%3D%220.81%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%2220.9%22%20cy%3D%22307.8%22%20r%3D%221.55%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.83%22%2F%3E%3Ccircle%20cx%3D%22199.3%22%20cy%3D%2213.1%22%20r%3D%220.67%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2252.3%22%20cy%3D%22275.1%22%20r%3D%221.84%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.42%22%2F%3E%3Ccircle%20cx%3D%22353.3%22%20cy%3D%22344.5%22%20r%3D%221.99%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.97%22%2F%3E%3Ccircle%20cx%3D%22306.0%22%20cy%3D%22167.8%22%20r%3D%220.87%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.84%22%2F%3E%3Ccircle%20cx%3D%22352.9%22%20cy%3D%22159.3%22%20r%3D%220.85%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.64%22%2F%3E%3Ccircle%20cx%3D%22354.8%22%20cy%3D%22223.5%22%20r%3D%221.03%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.77%22%2F%3E%3Ccircle%20cx%3D%22294.0%22%20cy%3D%22134.0%22%20r%3D%221.59%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.65%22%2F%3E%3Ccircle%20cx%3D%2279.5%22%20cy%3D%22124.7%22%20r%3D%221.98%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221.00%22%2F%3E%3Ccircle%20cx%3D%22253.0%22%20cy%3D%22348.9%22%20r%3D%221.88%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22258.1%22%20cy%3D%2254.2%22%20r%3D%221.25%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.73%22%2F%3E%3Ccircle%20cx%3D%22308.6%22%20cy%3D%22378.3%22%20r%3D%221.22%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22178.7%22%20cy%3D%2266.4%22%20r%3D%221.49%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%22224.6%22%20cy%3D%22202.7%22%20r%3D%221.64%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.62%22%2F%3E%3Ccircle%20cx%3D%22300.4%22%20cy%3D%2210.4%22%20r%3D%220.95%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.73%22%2F%3E%3Ccircle%20cx%3D%2281.1%22%20cy%3D%22289.2%22%20r%3D%220.94%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%22263.8%22%20cy%3D%22171.7%22%20r%3D%220.61%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.86%22%2F%3E%3Ccircle%20cx%3D%22329.1%22%20cy%3D%22366.2%22%20r%3D%221.87%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.81%22%2F%3E%3Ccircle%20cx%3D%22383.6%22%20cy%3D%2210.1%22%20r%3D%221.64%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%22289.6%22%20cy%3D%22359.3%22%20r%3D%220.56%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%2232.1%22%20cy%3D%2243.3%22%20r%3D%220.63%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22242.0%22%20cy%3D%22378.3%22%20r%3D%220.79%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%2280.9%22%20cy%3D%22270.0%22%20r%3D%220.86%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.67%22%2F%3E%3Ccircle%20cx%3D%22397.6%22%20cy%3D%22169.0%22%20r%3D%221.51%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.86%22%2F%3E%3Ccircle%20cx%3D%22158.8%22%20cy%3D%22166.6%22%20r%3D%220.59%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%22323.1%22%20cy%3D%22389.7%22%20r%3D%220.73%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.96%22%2F%3E%3Ccircle%20cx%3D%22203.5%22%20cy%3D%2248.9%22%20r%3D%220.82%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%2268.2%22%20cy%3D%2231.2%22%20r%3D%220.91%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%22222.4%22%20cy%3D%22192.3%22%20r%3D%221.99%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22165.4%22%20cy%3D%22125.8%22%20r%3D%220.51%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.40%22%2F%3E%3Ccircle%20cx%3D%22165.4%22%20cy%3D%2236.5%22%20r%3D%220.85%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%22311.0%22%20cy%3D%22305.6%22%20r%3D%221.16%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.91%22%2F%3E%3Ccircle%20cx%3D%22385.0%22%20cy%3D%22320.4%22%20r%3D%221.49%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%22139.2%22%20cy%3D%22162.8%22%20r%3D%221.25%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%22227.0%22%20cy%3D%22288.7%22%20r%3D%221.50%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%22291.6%22%20cy%3D%22353.8%22%20r%3D%221.77%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.99%22%2F%3E%3Ccircle%20cx%3D%22175.2%22%20cy%3D%22194.8%22%20r%3D%221.94%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.99%22%2F%3E%3Ccircle%20cx%3D%22143.1%22%20cy%3D%2231.7%22%20r%3D%221.01%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.93%22%2F%3E%3Ccircle%20cx%3D%22283.4%22%20cy%3D%22295.2%22%20r%3D%221.93%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.87%22%2F%3E%3Ccircle%20cx%3D%2282.8%22%20cy%3D%2295.3%22%20r%3D%221.70%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%22366.2%22%20cy%3D%22320.1%22%20r%3D%221.45%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.83%22%2F%3E%3Ccircle%20cx%3D%22214.3%22%20cy%3D%22177.2%22%20r%3D%221.81%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%22349.5%22%20cy%3D%22108.2%22%20r%3D%221.53%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%22158.0%22%20cy%3D%2275.0%22%20r%3D%221.38%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%22359.5%22%20cy%3D%22328.8%22%20r%3D%221.01%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.81%22%2F%3E%3Ccircle%20cx%3D%22351.0%22%20cy%3D%2246.4%22%20r%3D%220.96%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%220.5%22%20cy%3D%2252.7%22%20r%3D%221.10%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22277.1%22%20cy%3D%22359.1%22%20r%3D%220.76%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22378.9%22%20cy%3D%22279.9%22%20r%3D%220.76%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22250.6%22%20cy%3D%226.4%22%20r%3D%221.72%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%22300.4%22%20cy%3D%2251.2%22%20r%3D%221.00%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.83%22%2F%3E%3Ccircle%20cx%3D%22382.0%22%20cy%3D%22219.1%22%20r%3D%221.38%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.87%22%2F%3E%3Ccircle%20cx%3D%22281.0%22%20cy%3D%22293.5%22%20r%3D%221.40%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%2218.1%22%20cy%3D%22245.3%22%20r%3D%220.84%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%22100.4%22%20cy%3D%2289.2%22%20r%3D%221.43%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%22325.1%22%20cy%3D%2295.8%22%20r%3D%221.86%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.43%22%2F%3E%3Ccircle%20cx%3D%22276.3%22%20cy%3D%22162.7%22%20r%3D%221.69%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.80%22%2F%3E%3Ccircle%20cx%3D%22321.9%22%20cy%3D%2241.9%22%20r%3D%221.88%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.70%22%2F%3E%3Ccircle%20cx%3D%22329.2%22%20cy%3D%22170.0%22%20r%3D%221.80%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.87%22%2F%3E%3Ccircle%20cx%3D%22290.9%22%20cy%3D%22363.1%22%20r%3D%221.79%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.51%22%2F%3E%3Ccircle%20cx%3D%22287.9%22%20cy%3D%2261.8%22%20r%3D%220.69%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.97%22%2F%3E%3Ccircle%20cx%3D%22381.9%22%20cy%3D%2222.6%22%20r%3D%220.62%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.56%22%2F%3E%3Ccircle%20cx%3D%22376.3%22%20cy%3D%22347.9%22%20r%3D%221.93%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%2279.3%22%20cy%3D%2211.9%22%20r%3D%221.20%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%2256.6%22%20cy%3D%22129.2%22%20r%3D%221.22%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.54%22%2F%3E%3Ccircle%20cx%3D%2222.0%22%20cy%3D%2217.8%22%20r%3D%220.64%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%22187.2%22%20cy%3D%22323.3%22%20r%3D%221.59%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%22280.2%22%20cy%3D%22155.2%22%20r%3D%221.42%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.98%22%2F%3E%3Ccircle%20cx%3D%22308.3%22%20cy%3D%22384.8%22%20r%3D%221.57%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.76%22%2F%3E%3Ccircle%20cx%3D%22321.1%22%20cy%3D%2268.5%22%20r%3D%220.60%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.84%22%2F%3E%3Ccircle%20cx%3D%22258.7%22%20cy%3D%22172.5%22%20r%3D%221.32%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%22197.8%22%20cy%3D%2248.8%22%20r%3D%220.60%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.45%22%2F%3E%3Ccircle%20cx%3D%22141.7%22%20cy%3D%22137.9%22%20r%3D%220.80%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%2250.2%22%20cy%3D%2220.9%22%20r%3D%220.50%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.90%22%2F%3E%3Ccircle%20cx%3D%22347.8%22%20cy%3D%2217.8%22%20r%3D%221.65%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%22160.9%22%20cy%3D%22363.3%22%20r%3D%221.70%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22397.3%22%20cy%3D%2282.2%22%20r%3D%221.46%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%2213.3%22%20cy%3D%2269.1%22%20r%3D%221.63%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.85%22%2F%3E%3Ccircle%20cx%3D%2299.6%22%20cy%3D%22343.0%22%20r%3D%221.72%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%22183.7%22%20cy%3D%22119.6%22%20r%3D%220.88%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.93%22%2F%3E%3Ccircle%20cx%3D%22348.0%22%20cy%3D%22271.3%22%20r%3D%221.25%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.92%22%2F%3E%3Ccircle%20cx%3D%22327.9%22%20cy%3D%22325.2%22%20r%3D%221.64%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.98%22%2F%3E%3Ccircle%20cx%3D%22276.5%22%20cy%3D%22114.2%22%20r%3D%221.57%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.59%22%2F%3E%3Ccircle%20cx%3D%22345.6%22%20cy%3D%2265.2%22%20r%3D%221.77%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.80%22%2F%3E%3Ccircle%20cx%3D%22326.4%22%20cy%3D%22186.8%22%20r%3D%221.69%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.90%22%2F%3E%3Ccircle%20cx%3D%2217.0%22%20cy%3D%2292.7%22%20r%3D%220.79%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22231.0%22%20cy%3D%22324.8%22%20r%3D%221.44%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.91%22%2F%3E%3Ccircle%20cx%3D%22346.2%22%20cy%3D%22325.4%22%20r%3D%220.81%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%22183.9%22%20cy%3D%22154.4%22%20r%3D%221.31%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.85%22%2F%3E%3Ccircle%20cx%3D%22207.0%22%20cy%3D%22153.5%22%20r%3D%221.25%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22281.3%22%20cy%3D%22308.7%22%20r%3D%220.95%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.55%22%2F%3E%3Ccircle%20cx%3D%22245.6%22%20cy%3D%22220.7%22%20r%3D%221.91%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.74%22%2F%3E%3Ccircle%20cx%3D%22126.5%22%20cy%3D%22240.1%22%20r%3D%221.36%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.78%22%2F%3E%3Ccircle%20cx%3D%22228.4%22%20cy%3D%2264.6%22%20r%3D%220.81%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22133.4%22%20cy%3D%22253.6%22%20r%3D%221.81%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.79%22%2F%3E%3Ccircle%20cx%3D%22155.7%22%20cy%3D%22138.9%22%20r%3D%221.10%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%2261.9%22%20cy%3D%2221.2%22%20r%3D%221.21%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%2236.6%22%20cy%3D%22253.7%22%20r%3D%221.11%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.67%22%2F%3E%3Ccircle%20cx%3D%2239.8%22%20cy%3D%22336.1%22%20r%3D%220.91%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%2248.6%22%20cy%3D%2281.2%22%20r%3D%221.16%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%22243.1%22%20cy%3D%22231.2%22%20r%3D%221.63%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.87%22%2F%3E%3Ccircle%20cx%3D%22196.9%22%20cy%3D%22346.8%22%20r%3D%221.53%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.47%22%2F%3E%3Ccircle%20cx%3D%22249.6%22%20cy%3D%22294.5%22%20r%3D%221.84%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.75%22%2F%3E%3Ccircle%20cx%3D%22386.9%22%20cy%3D%22116.2%22%20r%3D%221.99%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.42%22%2F%3E%3Ccircle%20cx%3D%2241.3%22%20cy%3D%22123.1%22%20r%3D%221.78%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.94%22%2F%3E%3Ccircle%20cx%3D%22289.4%22%20cy%3D%22218.7%22%20r%3D%220.86%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.72%22%2F%3E%3Ccircle%20cx%3D%22310.6%22%20cy%3D%2274.2%22%20r%3D%221.72%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.81%22%2F%3E%3C%2Fsvg%3E"); --fx-spark: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%3E%3Crect%20width%3D%22300%22%20height%3D%22300%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M174.5%20280.7L175.4%20284.4L179.1%20285.3L175.4%20286.3L174.5%20289.9L173.6%20286.3L169.9%20285.3L173.6%20284.4Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.42%22%2F%3E%3Cpath%20d%3D%22M220.4%20147.7L221.8%20153.0L227.1%20154.4L221.8%20155.8L220.4%20161.1L219.0%20155.8L213.7%20154.4L219.0%20153.0Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.82%22%2F%3E%3Cpath%20d%3D%22M204.5%206.2L206.1%2012.0L211.9%2013.6L206.1%2015.2L204.5%2021.0L202.9%2015.2L197.1%2013.6L202.9%2012.0Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.99%22%2F%3E%3Cpath%20d%3D%22M253.7%20197.4L255.0%20202.6L260.2%20203.9L255.0%20205.3L253.7%20210.4L252.3%20205.3L247.2%20203.9L252.3%20202.6Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.53%22%2F%3E%3Cpath%20d%3D%22M189.0%20164.7L190.2%20169.0L194.5%20170.2L190.2%20171.3L189.0%20175.7L187.8%20171.3L183.5%20170.2L187.8%20169.0Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.41%22%2F%3E%3Cpath%20d%3D%22M258.9%20186.4L260.8%20193.9L268.3%20195.8L260.8%20197.8L258.9%20205.2L256.9%20197.8L249.5%20195.8L256.9%20193.9Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.58%22%2F%3E%3Cpath%20d%3D%22M223.3%20275.0L224.7%20280.1L229.8%20281.5L224.7%20282.9L223.3%20288.0L222.0%20282.9L216.8%20281.5L222.0%20280.1Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.77%22%2F%3E%3Cpath%20d%3D%22M59.4%2067.1L60.5%2071.4L64.9%2072.6L60.5%2073.8L59.4%2078.1L58.3%2073.8L53.9%2072.6L58.3%2071.4Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.66%22%2F%3E%3Cpath%20d%3D%22M14.2%20162.4L15.8%20168.7L22.1%20170.3L15.8%20172.0L14.2%20178.2L12.5%20172.0L6.3%20170.3L12.5%20168.7Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.90%22%2F%3E%3Cpath%20d%3D%22M25.5%2085.1L26.9%2090.4L32.2%2091.8L26.9%2093.2L25.5%2098.5L24.1%2093.2L18.8%2091.8L24.1%2090.4Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.65%22%2F%3E%3Cpath%20d%3D%22M95.2%2084.1L95.8%2086.4L98.1%2087.0L95.8%2087.6L95.2%2089.9L94.6%2087.6L92.3%2087.0L94.6%2086.4Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.62%22%2F%3E%3Cpath%20d%3D%22M129.6%20184.5L130.8%20189.3L135.6%20190.5L130.8%20191.8L129.6%20196.5L128.3%20191.8L123.6%20190.5L128.3%20189.3Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.73%22%2F%3E%3Cpath%20d%3D%22M129.6%20178.0L131.4%20185.1L138.5%20186.9L131.4%20188.8L129.6%20195.8L127.8%20188.8L120.7%20186.9L127.8%20185.1Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.97%22%2F%3E%3Cpath%20d%3D%22M138.7%20240.3L140.6%20247.8L148.1%20249.7L140.6%20251.6L138.7%20259.1L136.8%20251.6L129.3%20249.7L136.8%20247.8Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.79%22%2F%3E%3Cpath%20d%3D%22M121.4%20185.6L122.0%20187.9L124.3%20188.5L122.0%20189.1L121.4%20191.4L120.8%20189.1L118.5%20188.5L120.8%20187.9Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.57%22%2F%3E%3Cpath%20d%3D%22M8.5%20249.1L9.2%20251.5L11.6%20252.2L9.2%20252.8L8.5%20255.3L7.8%20252.8L5.4%20252.2L7.8%20251.5Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.54%22%2F%3E%3Cpath%20d%3D%22M199.9%2062.1L200.8%2065.5L204.2%2066.4L200.8%2067.3L199.9%2070.7L199.0%2067.3L195.6%2066.4L199.0%2065.5Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.48%22%2F%3E%3Cpath%20d%3D%22M228.1%2085.1L229.5%2090.6L235.1%2092.1L229.5%2093.5L228.1%2099.1L226.7%2093.5L221.1%2092.1L226.7%2090.6Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M4.3%20238.6L6.2%20245.7L13.2%20247.5L6.2%20249.3L4.3%20256.4L2.4%20249.3L-4.6%20247.5L2.4%20245.7Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.86%22%2F%3E%3Cpath%20d%3D%22M286.1%2018.2L286.9%2021.1L289.7%2021.8L286.9%2022.6L286.1%2025.4L285.4%2022.6L282.5%2021.8L285.4%2021.1Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.42%22%2F%3E%3Cpath%20d%3D%22M295.0%20138.7L295.9%20142.1L299.3%20143.0L295.9%20143.9L295.0%20147.3L294.1%20143.9L290.7%20143.0L294.1%20142.1Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.71%22%2F%3E%3Cpath%20d%3D%22M250.6%20204.2L252.3%20210.7L258.8%20212.4L252.3%20214.1L250.6%20220.6L248.9%20214.1L242.4%20212.4L248.9%20210.7Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.41%22%2F%3E%3Cpath%20d%3D%22M34.4%20177.3L36.0%20183.4L42.1%20185.0L36.0%20186.6L34.4%20192.7L32.8%20186.6L26.7%20185.0L32.8%20183.4Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.45%22%2F%3E%3Cpath%20d%3D%22M86.3%20113.7L88.0%20119.9L94.2%20121.6L88.0%20123.3L86.3%20129.5L84.6%20123.3L78.4%20121.6L84.6%20119.9Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.81%22%2F%3E%3Cpath%20d%3D%22M189.4%2038.0L191.3%2045.2L198.5%2047.1L191.3%2049.0L189.4%2056.2L187.5%2049.0L180.3%2047.1L187.5%2045.2Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%221.00%22%2F%3E%3Cpath%20d%3D%22M185.5%20212.9L186.3%20215.8L189.1%20216.5L186.3%20217.3L185.5%20220.1L184.8%20217.3L181.9%20216.5L184.8%20215.8Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.93%22%2F%3E%3Cpath%20d%3D%22M47.9%2095.8L49.4%20101.7L55.3%20103.2L49.4%20104.8L47.9%20110.6L46.4%20104.8L40.5%20103.2L46.4%20101.7Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.65%22%2F%3E%3Cpath%20d%3D%22M139.2%20290.0L140.3%20294.4L144.7%20295.5L140.3%20296.6L139.2%20301.0L138.0%20296.6L133.7%20295.5L138.0%20294.4Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.73%22%2F%3E%3Cpath%20d%3D%22M198.2%2027.0L198.9%2029.9L201.8%2030.6L198.9%2031.4L198.2%2034.2L197.4%2031.4L194.6%2030.6L197.4%2029.9Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.51%22%2F%3E%3Cpath%20d%3D%22M251.4%2091.3L253.4%2098.9L261.0%20100.9L253.4%20102.9L251.4%20110.5L249.4%20102.9L241.8%20100.9L249.4%2098.9Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.72%22%2F%3E%3Cpath%20d%3D%22M38.6%20137.6L39.9%20142.3L44.6%20143.6L39.9%20144.8L38.6%20149.6L37.4%20144.8L32.6%20143.6L37.4%20142.3Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.41%22%2F%3E%3Cpath%20d%3D%22M162.5%20240.1L163.7%20244.4L168.0%20245.6L163.7%20246.8L162.5%20251.1L161.3%20246.8L157.0%20245.6L161.3%20244.4Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.53%22%2F%3E%3Cpath%20d%3D%22M20.1%20185.1L21.3%20189.4L25.6%20190.6L21.3%20191.8L20.1%20196.1L19.0%20191.8L14.6%20190.6L19.0%20189.4Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.48%22%2F%3E%3Cpath%20d%3D%22M249.8%20-2.7L251.7%204.3L258.7%206.2L251.7%208.1L249.8%2015.1L248.0%208.1L240.9%206.2L248.0%204.3Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.83%22%2F%3E%3Cpath%20d%3D%22M267.0%20193.6L268.5%20199.3L274.2%20200.8L268.5%20202.3L267.0%20208.0L265.5%20202.3L259.8%20200.8L265.5%20199.3Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.90%22%2F%3E%3Cpath%20d%3D%22M82.5%20196.9L83.7%20201.5L88.3%20202.7L83.7%20203.9L82.5%20208.5L81.3%20203.9L76.7%20202.7L81.3%20201.5Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.40%22%2F%3E%3Cpath%20d%3D%22M36.7%2023.9L37.3%2026.2L39.6%2026.8L37.3%2027.4L36.7%2029.7L36.1%2027.4L33.8%2026.8L36.1%2026.2Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.71%22%2F%3E%3Cpath%20d%3D%22M35.9%2061.5L36.9%2065.5L40.9%2066.5L36.9%2067.5L35.9%2071.5L34.9%2067.5L30.9%2066.5L34.9%2065.5Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.79%22%2F%3E%3Cpath%20d%3D%22M73.3%2066.2L74.8%2072.0L80.7%2073.6L74.8%2075.1L73.3%2081.0L71.8%2075.1L65.9%2073.6L71.8%2072.0Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M204.2%20255.2L204.9%20258.1L207.8%20258.8L204.9%20259.6L204.2%20262.4L203.4%20259.6L200.6%20258.8L203.4%20258.1Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.57%22%2F%3E%3Cpath%20d%3D%22M164.0%20114.6L165.4%20119.9L170.7%20121.3L165.4%20122.7L164.0%20128.0L162.6%20122.7L157.3%20121.3L162.6%20119.9Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.64%22%2F%3E%3Cpath%20d%3D%22M165.3%20255.1L167.1%20261.9L173.9%20263.7L167.1%20265.5L165.3%20272.3L163.5%20265.5L156.7%20263.7L163.5%20261.9Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.64%22%2F%3E%3Cpath%20d%3D%22M107.5%20284.2L109.1%20290.3L115.2%20291.9L109.1%20293.5L107.5%20299.6L105.9%20293.5L99.8%20291.9L105.9%20290.3Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.96%22%2F%3E%3Cpath%20d%3D%22M71.6%20279.1L73.5%20286.3L80.7%20288.2L73.5%20290.1L71.6%20297.3L69.7%20290.1L62.5%20288.2L69.7%20286.3Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.83%22%2F%3E%3Cpath%20d%3D%22M170.3%20185.4L172.2%20192.5L179.2%20194.3L172.2%20196.2L170.3%20203.2L168.5%20196.2L161.4%20194.3L168.5%20192.5Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.51%22%2F%3E%3Cpath%20d%3D%22M144.3%20124.6L146.0%20130.8L152.2%20132.5L146.0%20134.2L144.3%20140.4L142.7%20134.2L136.4%20132.5L142.7%20130.8Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M207.6%20181.2L208.1%20183.1L210.0%20183.6L208.1%20184.1L207.6%20186.0L207.1%20184.1L205.2%20183.6L207.1%20183.1Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.58%22%2F%3E%3Cpath%20d%3D%22M228.0%20165.6L228.6%20167.6L230.6%20168.2L228.6%20168.8L228.0%20170.8L227.4%20168.8L225.4%20168.2L227.4%20167.6Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.73%22%2F%3E%3Cpath%20d%3D%22M278.2%20-6.0L280.1%201.4L287.6%203.4L280.1%205.3L278.2%2012.8L276.3%205.3L268.8%203.4L276.3%201.4Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.80%22%2F%3E%3Cpath%20d%3D%22M164.3%20249.3L166.2%20256.3L173.2%20258.2L166.2%20260.1L164.3%20267.1L162.5%20260.1L155.4%20258.2L162.5%20256.3Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M16.6%20221.3L17.7%20225.3L21.6%20226.3L17.7%20227.4L16.6%20231.3L15.6%20227.4L11.6%20226.3L15.6%20225.3Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.82%22%2F%3E%3Cpath%20d%3D%22M26.7%20120.7L27.3%20123.0L29.6%20123.6L27.3%20124.2L26.7%20126.5L26.1%20124.2L23.8%20123.6L26.1%20123.0Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.58%22%2F%3E%3Cpath%20d%3D%22M110.9%2089.3L112.0%2093.5L116.2%2094.6L112.0%2095.7L110.9%2099.9L109.8%2095.7L105.6%2094.6L109.8%2093.5Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.41%22%2F%3E%3Cpath%20d%3D%22M119.1%20117.0L120.8%20123.5L127.3%20125.2L120.8%20126.9L119.1%20133.4L117.4%20126.9L110.9%20125.2L117.4%20123.5Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.89%22%2F%3E%3Cpath%20d%3D%22M15.7%20126.4L17.1%20131.6L22.2%20132.9L17.1%20134.3L15.7%20139.4L14.3%20134.3L9.2%20132.9L14.3%20131.6Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.78%22%2F%3E%3Cpath%20d%3D%22M40.6%2029.8L41.7%2034.0L45.9%2035.1L41.7%2036.2L40.6%2040.4L39.5%2036.2L35.3%2035.1L39.5%2034.0Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.43%22%2F%3E%3Cpath%20d%3D%22M83.0%20195.5L83.8%20198.5L86.8%20199.3L83.8%20200.1L83.0%20203.1L82.2%20200.1L79.2%20199.3L82.2%20198.5Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.98%22%2F%3E%3Cpath%20d%3D%22M265.7%20164.1L266.4%20166.9L269.3%20167.7L266.4%20168.4L265.7%20171.3L264.9%20168.4L262.1%20167.7L264.9%20166.9Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.65%22%2F%3E%3Cpath%20d%3D%22M210.3%2079.6L211.5%2083.9L215.8%2085.1L211.5%2086.3L210.3%2090.6L209.2%2086.3L204.8%2085.1L209.2%2083.9Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.59%22%2F%3E%3Cpath%20d%3D%22M117.1%2056.3L117.6%2058.2L119.5%2058.7L117.6%2059.2L117.1%2061.1L116.6%2059.2L114.7%2058.7L116.6%2058.2Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.53%22%2F%3E%3Cpath%20d%3D%22M186.9%20194.1L187.5%20196.1L189.5%20196.7L187.5%20197.3L186.9%20199.3L186.3%20197.3L184.3%20196.7L186.3%20196.1Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.96%22%2F%3E%3Cpath%20d%3D%22M25.9%2024.7L27.5%2030.8L33.6%2032.4L27.5%2034.0L25.9%2040.1L24.3%2034.0L18.2%2032.4L24.3%2030.8Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.81%22%2F%3E%3Cpath%20d%3D%22M203.9%20164.6L205.8%20171.8L213.0%20173.7L205.8%20175.6L203.9%20182.8L202.0%20175.6L194.8%20173.7L202.0%20171.8Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.44%22%2F%3E%3Cpath%20d%3D%22M73.2%2044.6L74.3%2048.6L78.2%2049.6L74.3%2050.6L73.2%2054.6L72.2%2050.6L68.2%2049.6L72.2%2048.6Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.60%22%2F%3E%3Cpath%20d%3D%22M60.6%206.1L61.4%208.9L64.2%209.7L61.4%2010.4L60.6%2013.3L59.9%2010.4L57.0%209.7L59.9%208.9Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.71%22%2F%3E%3Cpath%20d%3D%22M291.2%2040.0L292.4%2044.8L297.2%2046.0L292.4%2047.3L291.2%2052.0L289.9%2047.3L285.2%2046.0L289.9%2044.8Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.78%22%2F%3E%3Cpath%20d%3D%22M38.2%20268.1L39.7%20273.8L45.4%20275.3L39.7%20276.8L38.2%20282.5L36.7%20276.8L31.0%20275.3L36.7%20273.8Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.83%22%2F%3E%3Cpath%20d%3D%22M281.5%20204.0L282.2%20206.7L284.9%20207.4L282.2%20208.1L281.5%20210.8L280.8%20208.1L278.1%20207.4L280.8%20206.7Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.63%22%2F%3E%3Cpath%20d%3D%22M133.9%2079.3L134.6%2082.0L137.3%2082.7L134.6%2083.4L133.9%2086.1L133.2%2083.4L130.5%2082.7L133.2%2082.0Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.64%22%2F%3E%3Cpath%20d%3D%22M237.4%20185.5L238.9%20191.2L244.6%20192.7L238.9%20194.2L237.4%20199.9L235.9%20194.2L230.2%20192.7L235.9%20191.2Z%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.89%22%2F%3E%3C%2Fsvg%3E"); --fx-illusion: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2264%22%20height%3D%2264%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23000%22%2F%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%3E%3Cpath%20d%3D%22M32%202L62%2032L32%2062L2%2032Z%22%20stroke-opacity%3D%22.7%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M32%2014L50%2032L32%2050L14%2032Z%22%20stroke-opacity%3D%22.45%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M32%2026L38%2032L32%2038L26%2032Z%22%20stroke-opacity%3D%22.9%22%20stroke-width%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --fx-metal: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%3E%3Cfilter%20id%3D%22m%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.002%20.55%22%20numOctaves%3D%223%22%20seed%3D%222%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22300%22%20height%3D%22300%22%20fill%3D%22%23777%22%2F%3E%3Crect%20width%3D%22300%22%20height%3D%22300%22%20filter%3D%22url(%23m)%22%20opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E"); }
.cf-rare .cf-sheen, .cf-epic .cf-sheen, .cf-legendary .cf-sheen, .cf-sss .cf-sheen, .cf-event .cf-sheen { display: none; }
.cf-fx, .cf-glare { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; clip-path: inset(2.8cqw round 4.6cqw);
  opacity: .8; transition: opacity .25s; }
.cf-fx { mix-blend-mode: color-dodge; }
.cf-fx::after, .cf-fx::before { position: absolute; inset: 0; }
.cf-glare { mix-blend-mode: overlay; z-index: 9; opacity: 0;
  background-image: radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.65) 20%, rgba(0, 0, 0, 0.5) 90%); }
.is-tilt .cf-fx, .is-tilt .cf-glare { opacity: 1; }
/* v0.65 (user: "increase the intensity of the card effect depending on the rarity … the uncommon and rare look … the
   same WOW factor"): a clear ladder. The fine lines are faint on an Uncommon; the shine layers (Rare and up) grow with
   the rarity, at rest and under the pointer. */
.cf-uncommon .cf-holo { opacity: .5; }
.cf-rare .cf-fx { opacity: .6; } .is-tilt .cf-rare .cf-fx { opacity: .85; }
.cf-epic .cf-fx { opacity: .85; }
.cf-legendary .cf-fx, .cf-sss .cf-fx, .cf-event .cf-fx { opacity: 1; }
/* Trainer gallery */
.cf-rare .cf-fx-a, .cf-epic .cf-fx-a { --space: 5%; --angle: -22deg; --imgsize: 200% 400%; clip-path: inset(2.8cqw 4cqw round 3cqw);
  background-image: repeating-linear-gradient(var(--angle), rgba(174, 102, 202, 0.75) calc(var(--space) * 1), rgba(228, 77, 72, 0.75) calc(var(--space) * 2), rgba(216, 197, 55, 0.75) calc(var(--space) * 3), rgba(124, 201, 62, 0.75) calc(var(--space) * 4), rgba(80, 177, 170, 0.75) calc(var(--space) * 5), rgba(136, 160, 255, 0.75) calc(var(--space) * 6), rgba(176, 105, 204, 0.75) calc(var(--space) * 7));
  background-blend-mode: color-dodge; background-size: var(--imgsize), 300%, 200%; background-position: 0% calc(var(--posy, 50%) * 1), var(--posx, 50%) var(--posy, 50%);
  filter: brightness(calc((var(--hyp, 0) * 0.3) + 0.6)) contrast(2.3) saturate(1.1); }
.cf-rare .cf-fx-a::after, .cf-epic .cf-fx-a::after { content: ""; background-image: radial-gradient(farthest-corner ellipse at calc(((var(--mx, 50%)) * 0.5) + 25%) calc(((var(--my, 50%)) * 0.5) + 25%), rgb(255, 255, 255) 5%, rgba(55, 0, 55, 0.6) 25%, rgb(55, 55, 55) 90%);
  background-position: center; background-size: 200% 200%; filter: brightness(calc((var(--hyp, 0) * 0.2) + 0.4)) contrast(0.85) saturate(1.1); mix-blend-mode: hard-light; }
/* Rainbow foil (Holo V), over the whole card */
.cf-legendary .cf-fx-a, .cf-legendary .cf-fx-a::after { --space: 5%; --angle: 133deg; --imgsize: 500px;
  background-image: var(--fx-grain), repeating-linear-gradient(0deg, rgb(255, 119, 115) calc(var(--space) * 1), rgba(255, 237, 95, 1) calc(var(--space) * 2), rgba(168, 255, 95, 1) calc(var(--space) * 3), rgba(131, 255, 247, 1) calc(var(--space) * 4), rgba(120, 148, 255, 1) calc(var(--space) * 5), rgb(216, 117, 255) calc(var(--space) * 6), rgb(255, 119, 115) calc(var(--space) * 7)), repeating-linear-gradient(var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%), rgba(0, 0, 0, 0.1) 12%, rgba(0, 0, 0, 0.15) 20%, rgba(0, 0, 0, 0.25) 120%);
  background-blend-mode: screen, hue, hard-light; background-size: var(--imgsize), 200% 700%, 300%, 200%;
  background-position: center, 0% var(--posy, 50%), var(--posx, 50%) var(--posy, 50%), var(--posx, 50%) var(--posy, 50%);
  filter: brightness(0.8) contrast(2.95) saturate(0.5); }
.cf-legendary .cf-fx-a::after { content: ""; background-position: center, 0% var(--posy, 50%), calc(var(--posx, 50%) * -1) calc(var(--posy, 50%) * -1), var(--posx, 50%) var(--posy, 50%);
  background-size: var(--imgsize), 200% 400%, 195%, 200%; filter: brightness(1) contrast(2.5) saturate(1.75); mix-blend-mode: soft-light; }
/* Gold secret, over the whole card */
.cf-legendary .cf-fx-b, .cf-event .cf-fx-b, .cf-sss .cf-fx-b, .cf-legendary .cf-fx-b::after, .cf-event .cf-fx-b::after, .cf-sss .cf-fx-b::after { --angle: 110deg; --imgsize: 250px;
  background-image: var(--fx-spark), repeating-linear-gradient(var(--angle), rgba(89, 46, 80, 0.5) 0%, hsl(39, 37%, 60%) 2.5%, rgb(216, 183, 92) 5%, hsl(39, 37%, 60%) 7.5%, rgba(14, 21, 46, 0.5) 10%, rgba(14, 21, 46, 0.5) 15%), var(--fx-metal);
  background-size: 50% 50%, 600% 600%, var(--imgsize); background-position: center, var(--posx, 50%) var(--posy, 50%), center; background-blend-mode: color-burn, darken;
  filter: brightness(calc((var(--hyp, 0) * 0.4) + 0.7)) contrast(3) saturate(0.66); }
.cf-legendary .cf-fx-b::after, .cf-event .cf-fx-b::after, .cf-sss .cf-fx-b::after { content: ""; background-image: var(--fx-spark), repeating-linear-gradient(var(--angle), rgba(89, 46, 80, 0.5) 0%, hsl(39, 37%, 60%) 2.5%, rgb(216, 183, 92) 5%, hsl(39, 37%, 60%) 7.5%, rgba(14, 21, 46, 0.5) 10%, rgba(14, 21, 46, 0.5) 15%); background-position: center, calc(var(--posx, 50%) * -1) calc(var(--posy, 50%) * -1), center;
  filter: brightness(calc((var(--hyp, 0) * 0.3) + 0.7)) contrast(2.5) saturate(0.66); mix-blend-mode: exclusion; }
/* Galaxy, over the whole card */
.cf-sss .cf-glare, .cf-event .cf-glare { background-image: radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%), rgba(222, 245, 250, 0.7) 10%, rgba(255, 255, 255, 0.5) 20%, rgba(0, 0, 0, 0.5) 90%); }
.cf-sss .cf-fx-a, .cf-event .cf-fx-a { --space: 24cqw;
  background-image: var(--fx-stars), var(--fx-stars), var(--fx-stars),
    repeating-linear-gradient(82deg, rgb(218, 56, 50) calc(var(--space) * 1), rgb(219, 204, 86) calc(var(--space) * 2), rgb(121, 199, 58) calc(var(--space) * 3), rgb(58, 192, 183) calc(var(--space) * 4), rgb(71, 98, 207) calc(var(--space) * 5), rgb(170, 69, 209) calc(var(--space) * 6), rgb(218, 56, 50) calc(var(--space) * 10)),
    radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.6) 5%, rgba(150, 150, 150, 0.3) 40%, rgb(0, 0, 0) 100%);
  background-blend-mode: color-dodge, color-burn, saturation, screen;
  background-position: center, center, center, calc(((50% - var(--posx, 50%)) * 2.5) + 50%) calc(((50% - var(--posy, 50%)) * 2.5) + 50%), center;
  background-size: cover, cover, cover, 600% 1200%, cover; filter: brightness(0.75) contrast(1.2) saturate(1.5); mix-blend-mode: color-dodge; }

/* The packs (user: "apply the 3rd effect of the cards to packs too"): the gallery's third tile, RAINBOW FOIL (Holo V: a
   rainbow under metal-thread lines and grain, hue-blended), in place of the fine-line holo. One layer the size of the
   whole pack sits in the seal and one in the body (each shape clips its own), so it runs straight over the tear. It
   follows the pointer (packTilt) and sits still with none. */
.pack-holo { top: 0; bottom: auto; height: var(--PH); z-index: -1; opacity: .75; background-color: transparent; animation: none !important; transition: none;
  --space: 5%; --angle: 133deg; --imgsize: 500px;
  background-image: var(--img, var(--fx-grain)), repeating-linear-gradient(0deg, rgb(255, 119, 115) calc(var(--space) * 1), rgba(255, 237, 95, 1) calc(var(--space) * 2), rgba(168, 255, 95, 1) calc(var(--space) * 3), rgba(131, 255, 247, 1) calc(var(--space) * 4), rgba(120, 148, 255, 1) calc(var(--space) * 5), rgb(216, 117, 255) calc(var(--space) * 6), rgb(255, 119, 115) calc(var(--space) * 7)), repeating-linear-gradient(var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%), rgba(0, 0, 0, 0.1) 12%, rgba(0, 0, 0, 0.15) 20%, rgba(0, 0, 0, 0.25) 120%);
  background-blend-mode: screen, hue, hard-light; background-size: var(--imgsize), 200% 700%, 300%, 200%; background-repeat: repeat;
  background-position: center, 0% var(--posy, 50%), var(--posx, 50%) var(--posy, 50%), var(--posx, 50%) var(--posy, 50%);
  filter: brightness(0.8) contrast(2.95) saturate(0.5); }
.pack-body .pack-holo { top: var(--hby); background-position: center, 0% var(--posy, 50%), var(--posx, 50%) var(--posy, 50%), var(--posx, 50%) var(--posy, 50%); }
.pack-holo::before { content: none; }
.pack-holo::after { content: ""; position: absolute; inset: 0; --space: 5%; --angle: 133deg; --imgsize: 500px;
  background-image: var(--fx-grain), repeating-linear-gradient(0deg, rgb(255, 119, 115) calc(var(--space) * 1), rgba(255, 237, 95, 1) calc(var(--space) * 2), rgba(168, 255, 95, 1) calc(var(--space) * 3), rgba(131, 255, 247, 1) calc(var(--space) * 4), rgba(120, 148, 255, 1) calc(var(--space) * 5), rgb(216, 117, 255) calc(var(--space) * 6), rgb(255, 119, 115) calc(var(--space) * 7)), repeating-linear-gradient(var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%), rgba(0, 0, 0, 0.1) 12%, rgba(0, 0, 0, 0.15) 20%, rgba(0, 0, 0, 0.25) 120%);
  background-blend-mode: screen, hue, hard-light;
  background-position: center, 0% var(--posy, 50%), calc(var(--posx, 50%) * -1) calc(var(--posy, 50%) * -1), var(--posx, 50%) var(--posy, 50%);
  background-size: var(--imgsize), 200% 400%, 195%, 200%; filter: brightness(1) contrast(2.5) saturate(1.75); mix-blend-mode: soft-light; }
.is-tilt .pack-holo, .pack-art.is-tilt .pack-holo { opacity: 1; }
/* Hovered (user: "remove the glow effect when hovered or decrease the intensity"): the light is a little softer while a
   card or pack follows the pointer, and the collection's cards lift without the coloured glow (style.css .ccard:hover). */
.is-tilt .cf-common .cf-holo, .is-tilt .cf-uncommon .cf-holo { opacity: .7; }

@keyframes cf-idle { from { background-position: 18% 22%; } to { background-position: 82% 72%; } }
@media (prefers-reduced-motion: no-preference) {
  /* with no pointer on it the light drifts on its own; the moment the card tilts to the pointer, the pointer has it */
  .cf-holo, .cf-rare .cf-sheen, .cf-epic .cf-sheen, .cf-legendary .cf-sheen, .cf-sss .cf-sheen, .cf-event .cf-sheen { animation: cf-idle 6s ease-in-out infinite alternate; }
  .is-tilt .cf-holo, .is-tilt .cf-sheen { animation: none; }
  .cf-t-chess .cf-frame { animation: none; }
}

/* Reveal: cards start face down; a click (or Reveal all) turns them over */
.mcard.is-waiting { visibility: hidden; }   /* still in the pack */
.mcard .card-back {
  position: absolute; inset: 0; border-radius: inherit;
  display: none; place-items: center;
  background: repeating-linear-gradient(45deg, var(--card) 0 6px, var(--floor) 6px 12px);
}
.mcard .card-back::after { content: "?"; font-size: calc(18px * var(--pv)); font-weight: 700; color: var(--muted); }
.mcard.is-down .card-back { display: grid; }
.mcard.is-down { border-color: var(--line); }
.reveal .mcard:not(.is-down) { border-color: var(--rc); }
/* v0.55 (user): five at a time, big, and the rarer the card the bigger its moment (menus.js flipCard) */
.reveal-count { margin: 0; min-height: 1.2em; font: 600 12px var(--f-num); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.reveal { gap: 22px; padding-block: 26px 18px; }
.rv-slot { position: relative; display: grid; place-items: center; }
/* v0.58: its face is the card face (cardface.js .cf), filling it; the back, the shine and the swipe go over it,
   clipped to the card (user: the swipe showed past its edges) */
.rv-card { --pv: 2; z-index: 1; width: 170px; height: 238px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: none; transform-origin: 50% 60%; display: block; }
/* v0.65 (user: "on pack opening, even on test, remove the text above so its a much bigger view"): the pack's name, the
   title and "6–10 of 10" are kept for screen readers only, and the cards are as big as five fit across (`--rvw`) */
#scr-reveal #r-eyebrow, #scr-reveal #r-title, #scr-reveal #reveal-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
/* (v0.66, user: "a little smaller": about 85% of that) */
.reveal { --rvw: clamp(130px, min(calc((100vw - 120px) / 5 * .85), calc((100vh - 230px) / 1.4 * .85)), 280px); gap: 16px; }
.reveal .rv-card { width: var(--rvw); height: calc(var(--rvw) * 1.4); border-radius: calc(var(--rvw) * .07); }
/* … and an open card follows the pointer like the collection's (menus.js packTilt on the reveal: --rx, --ry, and the
   pointer for its shine), lifting a little */
.rv-slot.is-open { perspective: 1000px; }
.rv-slot.is-open .rv-card { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--hs, 1)); transition: transform .5s cubic-bezier(.2, .9, .25, 1.2); }
.rv-slot.is-open.is-tilt .rv-card { --hs: 1.04; transition: transform .12s ease-out; }
.rv-slot.is-open.is-tilt { z-index: 2; }
.rv-card > .cf { position: absolute; inset: 0; }
.rv-card .card-back { z-index: 20; }   /* (v0.65: over the face's shine layers, z 8–9, which showed through and gave a Rare away)
.rv-card .cf-kind { left: 0; top: 0; }   /* (inside the card, so none of it shows past the back while it's face down) */
.rv-card .cf-rar { bottom: 0; }
.rv-card .rv-shine { z-index: 4; }
.rv-slot.is-open .rv-card, .reveal .rv-sss.is-open .rv-card { background: none; }
/* face down (v0.57, user): black, then just before it turns over it lights up in Common's colour and turns to the
   card's rarity (menus.js backShift animates --bk). No stripes (user): a soft swirl of colour, like a blurred mesh
   gradient, all of it worked out from --bk: a lighter, warmer glow low down, the colour itself, a deeper, cooler
   shade across the top. It turns slowly while the card waits. */
@property --bk { syntax: '<color>'; inherits: true; initial-value: #050306; }
.rv-card { --bk: #050306; }
.rv-card .card-back { overflow: hidden; background: color-mix(in srgb, var(--bk) 35%, #050306);
  box-shadow: inset 0 0 26px -6px color-mix(in srgb, var(--bk) 80%, #fff); }
.rv-card .card-back::before { content: ""; position: absolute; inset: -45%; filter: blur(18px);
  background:
    radial-gradient(34% 28% at 32% 76%, color-mix(in srgb, var(--bk) 60%, #fff), transparent 70%),
    radial-gradient(40% 36% at 36% 54%, var(--bk), transparent 72%),
    radial-gradient(44% 40% at 76% 32%, color-mix(in srgb, var(--bk) 55%, #000), transparent 76%),
    radial-gradient(60% 50% at 72% 78%, color-mix(in srgb, var(--bk) 25%, #000), transparent 80%);
  background:
    radial-gradient(34% 28% at 32% 76%, oklch(from var(--bk) calc(l * 1.25) c calc(h + 45)), transparent 70%),
    radial-gradient(40% 36% at 36% 54%, var(--bk), transparent 72%),
    radial-gradient(44% 40% at 76% 32%, oklch(from var(--bk) calc(l * .6) c calc(h - 45)), transparent 76%),
    radial-gradient(60% 50% at 72% 78%, oklch(from var(--bk) calc(l * .35) calc(c * .8) calc(h - 25)), transparent 80%); }
/* Triple S: as its swirl reaches its colour it melts into holographic foil (menus.js backShift animates --holo-on 0 → 1) */
@property --holo-on { syntax: '<number>'; inherits: true; initial-value: 0; }
.rv-sss .card-back { background: color-mix(in oklab, #e6e1f6 calc(var(--holo-on) * 80%), color-mix(in srgb, var(--bk) 35%, #050306)); }
.rv-sss .card-back::before {
  background:
    radial-gradient(30% 22% at 26% 22%, color-mix(in oklab, #ffffff calc(var(--holo-on) * 100%), transparent), transparent 72%),
    radial-gradient(34% 28% at 32% 76%, color-mix(in oklab, #fbf0c6 calc(var(--holo-on) * 100%), oklch(from var(--bk) calc(l * 1.25) c calc(h + 45))), transparent 70%),
    radial-gradient(40% 36% at 36% 54%, color-mix(in oklab, #f2c4e8 calc(var(--holo-on) * 100%), var(--bk)), transparent 72%),
    radial-gradient(44% 40% at 76% 32%, color-mix(in oklab, #bfe6f8 calc(var(--holo-on) * 100%), oklch(from var(--bk) calc(l * .6) c calc(h - 45))), transparent 76%),
    radial-gradient(60% 50% at 72% 78%, color-mix(in oklab, #cdf5df calc(var(--holo-on) * 100%), oklch(from var(--bk) calc(l * .35) calc(c * .8) calc(h - 25))), transparent 80%),
    radial-gradient(50% 40% at 60% 50%, color-mix(in oklab, #d4cbfb calc(var(--holo-on) * 100%), transparent), transparent 78%); }
.rv-sss .card-back::after { color: color-mix(in oklab, #7a6fa8 calc(var(--holo-on) * 100%), color-mix(in srgb, var(--bk) 45%, #fff)); }
/* …and its face, open, is a pane of the same foil, drifting */
.reveal .rv-sss.is-open .rv-card { background: linear-gradient(color-mix(in srgb, var(--card) 55%, transparent), color-mix(in srgb, var(--card) 62%, transparent)), var(--holo);
  background-size: 100% 100%, 260% 260%; }
/* the words "Triple S", everywhere they're shown, in the foil */
.rv-sss .card-rarity, [style*="--r-sss"] > .card-rarity, [style*="--r-sss"] .pv-tab-rar {
  background: var(--holo); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .reveal .rv-sss.is-open .rv-card { animation: rv-holo 6s ease-in-out infinite alternate; }
}
@keyframes rv-holo { from { background-position: 0 0, 0% 30%; } to { background-position: 0 0, 100% 70%; } }
.rv-card .card-back::after { position: relative; z-index: 1; font-size: calc(var(--rvw, 170px) * .26); color: color-mix(in srgb, var(--bk) 45%, #fff); opacity: .85; }
.reveal .rv-card.is-down { border-color: color-mix(in srgb, var(--bk) 80%, #fff); box-shadow: 0 0 22px -6px var(--bk); }
@media (prefers-reduced-motion: no-preference) {
  .rv-card.is-down .card-back::before { animation: rv-swirl 9s linear infinite; }
}
@keyframes rv-swirl { to { transform: rotate(360deg); } }
/* the light that sweeps across a Rare and up */
.rv-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, #fff 55%, transparent) 48%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 130% 0; }
.rv-uncommon.is-open .rv-card { box-shadow: 0 0 10px -4px var(--rc); }
/* (v0.65: each rarity's glow a clear step up from the one below: Uncommon a faint rim, then bigger and brighter) */
.rv-rare.is-open .rv-card { box-shadow: 0 0 30px 3px var(--rc), inset 0 0 20px -6px var(--rc); }
.rv-epic.is-open .rv-card { box-shadow: 0 0 46px 9px var(--rc), inset 0 0 28px -6px var(--rc); }
.rv-legendary.is-open .rv-card, .rv-sss.is-open .rv-card { box-shadow: 0 0 64px 14px var(--rc), inset 0 0 34px -4px var(--rc); }
/* (the charge's glow is the swirl's colour, --bk, not the card's: user, it mustn't give the rarity away early) */
.is-charging .rv-card { box-shadow: 0 0 30px 6px var(--bk); }
/* the foil shimmer on a Legendary and a Triple S */
.rv-legendary.is-open .rv-card::after, .rv-sss.is-open .rv-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: overlay; opacity: .55;
  background: linear-gradient(125deg, transparent 20%, color-mix(in srgb, var(--rc) 70%, #fff) 40%, transparent 55%, color-mix(in srgb, var(--rc) 60%, #fff) 75%, transparent 90%); background-size: 300% 300%; }
/* Triple S: platinum iridescence. Event (user: "red + iridescent"): its red, with the same pearly film over it. */
.rv-sss.is-open .rv-card::after { background: linear-gradient(125deg, #ffc9e4, #c9e8ff, #e0d4ff, #d4ffe8, #fff3c4, #ffc9e4); background-size: 400% 400%; opacity: .5; }
.rv-sss.is-open .rv-card .card-name { background: linear-gradient(90deg, #ffc9e4, #c9e8ff, #e0d4ff, #d4ffe8, #fff3c4, #ffc9e4); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-event.is-open .rv-card::after { background: linear-gradient(125deg, var(--rc), #f4f6fa, #ffc9e4, var(--rc), #c9e8ff, #e0d4ff, var(--rc)); background-size: 400% 400%; opacity: .4; }
.rv-event.is-open .rv-card .card-name { background: linear-gradient(90deg, #ff5a6a, #f4f6fa, #ffc9e4, #c9e8ff, #ff5a6a); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .rv-rare.is-open .rv-shine { animation: rv-shine 3.6s ease-in-out .1s infinite; }   /* (v0.65: sweeping more often the rarer it is) */
  .rv-epic.is-open .rv-shine { animation: rv-shine 2.6s ease-in-out .1s infinite; }
  .rv-legendary.is-open .rv-shine, .rv-sss.is-open .rv-shine { animation: rv-shine 1.9s ease-in-out .1s infinite; }
  .rv-uncommon.is-open .rv-card { animation: rv-pulse 2.4s ease-in-out infinite; }
  .rv-legendary.is-open .rv-card::after, .rv-sss.is-open .rv-card::after { animation: rv-foil 3.2s ease-in-out infinite alternate; }
  .rv-sss.is-open .rv-card .card-name, .rv-event.is-open .rv-card .card-name { animation: rv-foil 2.4s linear infinite; }
  .is-charging .rv-card { animation: rv-charge .25s ease-in-out infinite alternate; }
}
/* v0.57 (user): the light a card bursts with as it opens (menus.js cardBurst) */
.rv-fx { position: absolute; left: 50%; top: 50%; pointer-events: none; border-radius: 50%; }
.rv-flash { z-index: 2; width: calc(var(--rvw, 170px) * 1.4); height: calc(var(--rvw, 170px) * 1.4); margin: calc(var(--rvw, 170px) * -.7) 0 0 calc(var(--rvw, 170px) * -.7); mix-blend-mode: screen;
  background: radial-gradient(closest-side, #fff, color-mix(in srgb, var(--rc) 75%, #fff) 22%, color-mix(in srgb, var(--rc) 40%, transparent) 55%, transparent); }
.rv-ring { z-index: 2; width: var(--rvw, 170px); height: var(--rvw, 170px); margin: calc(var(--rvw, 170px) * -.5) 0 0 calc(var(--rvw, 170px) * -.5); border: 2px solid color-mix(in srgb, var(--rc) 80%, #fff);
  box-shadow: 0 0 16px var(--rc), inset 0 0 16px var(--rc); }
/* the swipe (v0.57, user: "instead of flip ... as the card swipes"): a bright edge crossing the card as its swirl is
   wiped away, and sparkles thrown out past its edges (menus.js flipCard, cardBurst) */
.rv-swipe { position: absolute; z-index: 21; top: -10%; bottom: -10%; left: 0; width: 34%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rc) 50%, #fff) 45%, #fff 50%, color-mix(in srgb, var(--rc) 50%, #fff) 55%, transparent); }
.rv-star { z-index: 3; border-radius: 0; color: var(--sc); filter: drop-shadow(0 0 4px var(--sc)) drop-shadow(0 0 1px #fff); }
.rv-star svg { display: block; width: 100%; height: 100%; }
@keyframes rv-shine { 0% { opacity: 1; background-position: 130% 0; } 45%, 100% { opacity: 1; background-position: -60% 0; } }
@keyframes rv-pulse { 50% { box-shadow: 0 0 16px -2px var(--rc); } }
@keyframes rv-foil { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes rv-charge { from { box-shadow: 0 0 14px 2px var(--bk); } to { box-shadow: 0 0 44px 10px var(--bk); } }
@media (max-width: 760px) { .reveal { --rvw: calc((100vw - 80px) / 3 * .9); gap: 12px; } }

/* Sound: a gear, top right, above every screen, opening the three volumes */
.audio {
  position: fixed; z-index: 14;                     /* above the pause menu (13) */
  top: calc(env(safe-area-inset-top, 0px) + 12px); right: 16px;
}
#gear { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; color: var(--text); }
#gear svg { transition: transform .35s ease; }
#gear[aria-expanded="true"] svg { transform: rotate(60deg); }
#gear.is-muted { color: var(--muted); }
.gear-mute { display: none; position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--floor); }
.gear-mute::after { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 2px; background: var(--floor); border-radius: 1px; }
#gear.is-muted .gear-mute { display: block; }
@media (prefers-reduced-motion: reduce) { #gear svg { transition: none; } }
.sound-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 264px; max-width: calc(100vw - 32px); padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--floor); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px -12px #000;
}
.sound-panel .eyebrow { margin: 0; text-align: left; }
.vol-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 4ch; align-items: center; gap: 10px; font-size: 12px; color: var(--text); }
.vol-row b { font: 600 11px var(--f-num); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.sound-panel.is-muted .vol-row { opacity: .5; }
.vol-row input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px; margin: 0;
  background: linear-gradient(to right, var(--gold-ui) var(--v, 20%), var(--line) var(--v, 20%));
  cursor: pointer;
}
.vol-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 0; }
.vol-row input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text); border: 0; }
.vol-row input[type=range]:focus-visible { outline: 2px solid var(--gold-ui); outline-offset: 4px; }
.mute-all { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.mute-all[aria-pressed="true"] { color: var(--bad); border-color: var(--bad); }
.mute-all kbd { font: 600 10px var(--f-num); padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
.hud .side { padding-top: 32px; }   /* room for the sound controls above the log */
/* Your gold, top right (v0.55, user): what you have, plus what this run's kills will pay when it ends */
.run-gold { margin: 0; display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--floor) 75%, transparent); border: 1.5px solid color-mix(in srgb, var(--r-legendary) 45%, var(--line)); }
.run-gold .coin { width: 20px; height: 20px; }
.run-gold b { color: var(--r-legendary); font: 700 22px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.run-gold.is-up { animation: gold-up .5s ease-out; }
@keyframes gold-up { 30% { transform: scale(1.18); } }
/* The test version only (devtools.js marks the page): the sequence count and the attack log (user) */
:root:not(.devtools) .dev-only { display: none !important; }

/* Stats panel: left side, vertically centred. Muted until a stat is upgraded, then it takes the
   colour of the best rarity picked for it, with a pip per pick. A new pick flashes its row. */
.statpanel {
  position: fixed; left: 16px; top: 50%; transform: translateY(-50%);
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 3px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
/* v0.93 (user: "make sure the stats used for TAB and during upgrades are the same size"): one size, one layout and a title
   for both, so going from one to the other (Tab held as the cards come up, or the cards going) moves nothing. */
.statpanel::before { content: "Your stats"; margin: 0 0 6px 9px; font: 400 12px var(--f-metal); letter-spacing: .22em; text-transform: uppercase; color: var(--neon-hi); }
/* v0.57 (user): hidden in a run; holding Tab shows it (hud.js). A touch screen has no Tab, so it stays there. */
.statpanel { opacity: 0; translate: -8px 0; transition: opacity .12s ease-out, translate .12s ease-out; }
body.show-stats .statpanel { opacity: 1; translate: 0 0; }
@media (hover: none) and (pointer: coarse) { .statpanel { opacity: 1; translate: 0 0; } }
.statpanel li {
  display: grid; grid-template-columns: 12ch 6ch 7ch 34px; align-items: center; gap: 6px;   /* (fixed: a new pip doesn't widen it) */
  padding: 4px 10px 4px 9px;
  border-left: 3px solid var(--line);
  border-radius: 0 4px 4px 0;
  color: var(--muted);
  transition: background .2s, border-color .2s, opacity .2s;
}
.statpanel li > .st-pips { order: 4; }   /* (after the "→ new" column, empty but kept outside level up) */
.st-name { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.st-short { display: none; }
.st-val { font: 600 15px var(--f-num); color: var(--muted); text-align: right; }
.st-pips { display: flex; align-items: center; gap: 2px; min-width: 0; font: 600 9px var(--f-num); color: var(--rc); }
.st-pips i { width: 5px; height: 5px; border-radius: 50%; background: var(--rc); }
.statpanel li.is-up { border-left-color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); }
.statpanel li.is-up .st-name { color: var(--rc); }
.statpanel li.is-up .st-val { color: var(--text); }
.statpanel li.is-max .st-val::after { content: " MAX"; font-size: 8px; color: var(--rc); }
@keyframes st-bump {
  0% { transform: none; box-shadow: none; }
  25% { transform: translateX(6px) scale(1.08); background: color-mix(in srgb, var(--rc) 40%, transparent); box-shadow: 0 0 14px -2px var(--rc); }
  100% { transform: none; box-shadow: none; }
}
.statpanel li.bump { animation: st-bump .7s ease-out; }
@media (max-width: 480px) {
  .statpanel { left: 8px; }
  .statpanel li { grid-template-columns: 3.5ch 5.5ch; gap: 4px; padding: 2px 6px 2px 5px; }
  .st-long { display: none; }
  .st-short { display: inline; font-size: 9px; }
  .st-val { font-size: 10px; }
  .st-pips, .st-next { display: none; }
  .statpanel::before { font-size: 10px; margin-left: 5px; }
}

/* Level up: pick one of 3 upgrade cards. Border and label in the card's rarity colour. */
.up-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.upcard {
  position: relative;
  box-sizing: border-box; width: 160px; min-height: 190px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 12px 14px;
  border: 1.5px solid var(--rc); border-radius: 10px;
  background: var(--card);
  text-align: center;
  transition: transform .15s ease-out, box-shadow .15s;
}
.upcard:hover, .upcard:focus-visible { transform: translateY(-4px); box-shadow: 0 0 20px -4px var(--rc); }
.upcard.r-epic { box-shadow: 0 0 16px -6px var(--rc); }
.upcard.r-legendary { box-shadow: 0 0 26px -4px var(--rc); }
.up-key { position: absolute; top: 8px; left: 10px; font: 10px var(--f-num); color: var(--muted); }
.up-rarity { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rc); }
.up-name { font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); text-wrap: balance; }
.up-gain { font-size: 12px; line-height: 1.35; color: var(--muted); }
.up-change { margin-top: auto; font: 12px var(--f-num); color: var(--muted); }
.up-change b { color: var(--rc); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 480px) {
  .up-cards { flex-direction: column; width: 100%; align-items: center; gap: 8px; }
  .up-cards li { width: min(100%, 300px); }
  .upcard { width: 100%; min-height: 0; padding: 12px; gap: 4px; }
}

/* Augmented deck slot (v0.68): a glow and its augment's tag (×2, DMG, CRIT, BIG, RUSH, MAG), in its colour (--ac). */
.card.is-aug { --ac: var(--r-legendary); box-shadow: 0 0 0 1px var(--ac), 0 0 12px -2px var(--ac); }
.card.is-aug::after {
  content: attr(data-aug-tag); position: absolute; right: 4px; bottom: 6px;
  font: 700 9px/1 var(--f-num); color: var(--ac); letter-spacing: .02em;
}
.card.is-aug.is-fired { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 40%, transparent); }
@keyframes aug-new { 0% { box-shadow: 0 0 0 0 var(--ac); } 40% { box-shadow: 0 0 0 3px var(--ac), 0 0 28px 4px var(--ac); } 100% { box-shadow: 0 0 0 1px var(--ac), 0 0 12px -2px var(--ac); } }
.card.aug-new { animation: aug-new .9s ease-out; }

/* Augment picker (v0.68): 3 augment cards (upcards in the augment's colour, its tag big in the middle); after the
   pick, the 7 slots as deck-style cards, a light running round the free ones until it stops on the winner. */
.levelup:focus { outline: none; }
.augcard .aug-tag {
  font: 800 28px/1 var(--f-num); letter-spacing: .02em; text-transform: uppercase; color: var(--rc);
  text-shadow: 0 0 18px color-mix(in srgb, var(--rc) 55%, transparent); margin: 6px 0 2px;
}
.levelup.is-spin .up-cards { flex-wrap: nowrap; gap: 8px; }
.slotcard {
  --ac: var(--r-legendary);
  position: relative; box-sizing: border-box;
  width: 72px; height: 88px;
  display: grid; place-items: center; grid-template-columns: minmax(0, 1fr);
  padding: 4px;
  border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--card);
  transition: transform .12s ease-out, border-color .12s, box-shadow .12s;
}
.slot-n { position: absolute; top: 5px; left: 7px; font: 600 11px var(--f-num); color: var(--muted); }
.slot-now { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--c); text-align: center; line-height: 1.15; }
.slot-x2 { position: absolute; right: 6px; bottom: 5px; font: 700 10px var(--f-num); color: var(--ac); }
.slotcard.is-aug { border-color: var(--ac); opacity: .45; }
.levelup.is-spin .slotcard.is-lit { transform: translateY(-6px); border-color: var(--ac); box-shadow: 0 0 18px -4px var(--ac); opacity: 1; }
.levelup.is-spin .up-cards { --ac: var(--r-legendary); }
.levelup.is-spin .slotcard.is-lit { --ac: inherit; }
.slotcard.is-won { opacity: 1; transform: translateY(-8px) scale(1.08); box-shadow: 0 0 0 2px var(--ac), 0 0 30px -2px var(--ac); animation: aug-won .5s ease-out; }
@keyframes aug-won { 0% { transform: translateY(-6px) scale(1); } 45% { transform: translateY(-10px) scale(1.16); } 100% { transform: translateY(-8px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .slotcard.is-won { animation: none; } }
@media (max-width: 480px) {
  .levelup.is-spin .up-cards { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .levelup.is-spin .up-cards li { width: auto; }
  .slotcard { width: 64px; height: 76px; }
}

/* Combos (combos.js): a glowing bar in the card's colour sits under each run that will play as one attack.
   A 7-card combo's bar is thicker and pulses. */
.rapid {
  --n: 7;
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -8px;
  width: calc(var(--n) * var(--cw) + (var(--n) - 1) * var(--gap));
  height: 3px;
  pointer-events: none;
}
.rapid-bar {
  position: absolute; top: 0;
  left: calc(var(--from) * (var(--cw) + var(--gap)));
  width: calc(var(--len) * var(--cw) + (var(--len) - 1) * var(--gap));
  height: 3px; border-radius: 2px;
  --bc: var(--gold-ui);
  background: var(--bc);
  box-shadow: 0 0 8px 1px var(--bc);
  transition: opacity .3s;
}
@keyframes rapid-live { 50% { box-shadow: 0 0 14px 3px var(--bc); } }
.rapid-bar.is-max { height: 5px; top: -1px; animation: rapid-live .6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rapid-bar.is-max { animation: none; } }



/* Weapon wheel: slices sized by rarity, a pointer at the top, labels along each slice's middle. */
.wheel-box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.wheel-wrap { position: relative; width: min(280px, 78vw); aspect-ratio: 1; max-width: 100%; }
.wheel { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; overflow: hidden; }
.wheel-line { position: absolute; left: 50%; top: 0; width: 1px; height: 50%; background: var(--floor); transform-origin: 50% 100%; transform: rotate(var(--a)); }
.wheel-label {
  position: absolute; left: 50%; top: 50%;
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(min(280px, 78vw) * -0.34)) rotate(90deg);
}
.wheel-pointer {
  position: absolute; left: 50%; top: -10px; z-index: 1; transform: translateX(-50%);
  width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 18px solid var(--text);
  filter: drop-shadow(0 2px 2px var(--floor));
}
.wheel-hub { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); }
.wheel-result { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--text); }
.levelup.is-wheel .up-cards { flex-direction: column; }


/* The run's bar (v0.52, user: progress with the 3 bosses on it, big, no names): across the top, with the stats and
   the log moved under it. Each stage's stretch fills in its boss's colour; the red part is its huge swarm. Each boss
   is a round marker with its icon (a footprint, a saber, the wheel). */
:root { --rb-top: 12px; --rb-h: 58px; }
.runbar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 1;
  top: calc(env(safe-area-inset-top, 0px) + var(--rb-top));
  width: min(760px, calc(100% - 120px)); box-sizing: border-box; padding-inline: 17px;
  pointer-events: none;
}
@media (max-width: 520px) { .runbar { width: calc(100% - 32px); } }
.rb-head { margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; line-height: 1; }
.rb-now { font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--text); white-space: nowrap; }
.rb-now.is-huge { color: var(--bad); }
.rb-now.is-boss { color: var(--relic); }
.rb-time { font: 700 14px var(--f-num); color: var(--text); }
/* v0.69 (user: "the icon of the run is a number and a wheel"): MAKORA's gold wheel with the run's number in it
   (flow.js runBadge), on the run bar, the end-of-run screen and the leaderboard */
.run-badge { position: relative; display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; flex: none; color: var(--wheel); vertical-align: middle; }
.run-badge .run-wheel { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--wheel) 55%, transparent)); }
.run-badge b { position: relative; font: 800 .82em/1 var(--f-num); color: var(--wheel-hi); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 #3a2a00; }
.rb-run { font-size: 14px; margin-right: auto; align-self: center; }
.rb-head:has(.rb-run) { align-items: center; }
.rb-track { position: relative; height: 12px; border-radius: 6px; background: var(--line); }
.rb-huge { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--bad) 32%, var(--line)); }
.rb-fill { position: absolute; top: 0; bottom: 0; width: 0; background: var(--c); box-shadow: 0 0 14px -2px var(--c); }
.rb-fill[data-i="0"] { border-radius: 6px 0 0 6px; }
.rb-knob { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--player); box-shadow: 0 0 12px var(--player); }
.rb-node {
  position: absolute; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; box-sizing: border-box; border-radius: 50%;
  display: grid; place-items: center; color: var(--c); background: var(--floor); border: 3px solid var(--c);
}
.rb-node svg { width: 18px; height: 18px; }
.rb-node.is-up { box-shadow: 0 0 16px 2px var(--c); animation: rb-pulse 1s ease-in-out infinite; }
.rb-node.is-done { background: var(--c); color: var(--floor); }
@keyframes rb-pulse { 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .rb-node.is-up { animation: none; } }
.hud { padding-top: calc(env(safe-area-inset-top, 0px) + var(--rb-top) + var(--rb-h) + 4px); }   /* the stats and log, under it */

/* KURTSAURUS: a health bar with its name, top centre */
.bossbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + var(--rb-top) + var(--rb-h) + 40px);   /* under the run's bar and the stats (v0.52) */
  width: min(420px, calc(100% - 32px));
  display: grid; gap: 4px; justify-items: center;
  pointer-events: none;
}
.boss-name { font-size: 12px; font-weight: 800; letter-spacing: .24em; color: var(--boss); }
.boss-hp { width: 100%; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; box-shadow: 0 0 12px -4px var(--boss); }
.boss-hp span { display: block; height: 100%; background: var(--boss); transform-origin: left; transition: transform .15s; }
/* phase 2: the bar turns red and refills */
.bossbar.is-phase2 .boss-name { color: var(--bad); }
.bossbar.is-phase2 .boss-hp { box-shadow: 0 0 14px -2px var(--bad); }
.bossbar.is-phase2 .boss-hp span { background: var(--bad); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
/* AWAS THE SNEK (v0.54): the phone's look, a green screen with a black frame and a bar made of blocks */
.bossbar.is-snek { padding: 6px 10px 7px; box-sizing: border-box; background: var(--lcd); border: 2px solid var(--lcd-ink); border-radius: 3px;
  box-shadow: 0 0 0 2px var(--lcd), 0 6px 20px rgba(0, 0, 0, .35); }
.bossbar.is-snek .boss-name, .bossbar.is-snek.is-phase2 .boss-name { font: 700 13px/1 var(--f-px); letter-spacing: .14em; color: var(--lcd-ink); }
.bossbar.is-snek .boss-hp { height: 12px; padding: 1px; box-sizing: border-box; border-radius: 0; background: transparent; border: 2px solid var(--lcd-ink); box-shadow: none; }
.bossbar.is-snek .boss-hp span, .bossbar.is-snek.is-phase2 .boss-hp span { background: repeating-linear-gradient(to right, var(--lcd-ink) 0 6px, transparent 6px 8px); transition: transform .2s steps(8); }
.bossbar.is-snek .boss-sub { font: 400 11px/1.2 var(--f-px); color: var(--lcd-ink); }
.bossbar:not(.is-snek) .boss-hp2, .boss-hp2[hidden] { display: none; }   /* (v1.05: AWAS's second bar, phase 2) */
/* OBI ONE: saber blue (phase 2 turns it red, as above) */
.bossbar.is-obi:not(.is-phase2) .boss-name { color: var(--saber); }
.bossbar.is-obi:not(.is-phase2) .boss-hp { box-shadow: 0 0 14px -2px var(--saber); }
.bossbar.is-obi:not(.is-phase2) .boss-hp span { background: var(--saber); }

/* Relics: a chip under the top stats. BULL: its key, and a bar that refills while it cools down. Tap it on touch screens. */
/* The relic skills (BULL, DEFLECT, VAMPIRIC BALLSACK). v0.57 (user: fix the icons, they sat on the HP bar's end and the
   level): in a row left of the HP and XP bars, centred on the pair and clear of both, each key under its icon. On
   narrow screens, a row over the HP bar's left end. */
.relics {
  position: fixed; z-index: 2;
  display: flex; align-items: center; gap: 10px;   /* v0.48: DEFLECT sits beside BULL */
  right: calc(50% + min(220px, 50% - 16px) + 14px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px + var(--tray-h) + var(--deck2) + 18px);
}
@media (max-width: 620px) {
  .relics { right: auto; left: max(16px, calc(50% - 150px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px + var(--tray-h) + var(--deck2) + 74px); }
}
.relic {
  --k: 1;
  position: relative; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  color: var(--muted);
  /* a ring (user) that fills clockwise while it recharges, round a dark face tinted its colour (v0.57: a slimmer ring
     and a bigger face, so the icon has room) */
  background:
    radial-gradient(circle, color-mix(in srgb, var(--floor) 86%, var(--rc, var(--relic))) 0 16px, transparent 16.5px),
    conic-gradient(var(--rc, var(--relic)) calc(var(--k) * 360deg), var(--line) 0);
}
.relic.is-deflect { --rc: var(--saber); }
.relic.is-sack { --rc: var(--sack); }
.relic.is-sack.is-cool { --rc: var(--sack-dim); }   /* cooling down: it doesn't fill yet */
.relic.is-ready { color: var(--rc, var(--relic)); }   /* (v0.85, user: no glow or pop when it's ready: a note over your head says so) */
.relic.is-on { color: var(--saber-core); box-shadow: 0 0 16px 1px var(--saber); }   /* DEFLECT's shield is up */
.relic-key { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 4px;
  font: 700 9px/14px var(--f-num); text-align: center; color: var(--text); background: var(--card); border: 1px solid var(--line); }
@keyframes relic-ready { 0% { transform: scale(1); } 40% { transform: scale(1.18); box-shadow: 0 0 18px 2px var(--rc, var(--relic)); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .relic.is-ready { animation: none; } }

/* Announcements (boss, relic): a short banner under the boss bar */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + var(--rb-top) + var(--rb-h) + 84px);
  margin: 0; padding: 8px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: .04em; text-align: center;
  background: var(--card); border: 1.5px solid var(--line); color: var(--text);
  pointer-events: none; max-width: calc(100% - 32px);
  animation: toast-in .3s ease-out;
}
.toast.is-boss { border-color: var(--boss); color: var(--boss); }
.toast.is-enrage { border-color: var(--bad); color: var(--bad); }
.toast.is-relic { border-color: var(--relic); color: var(--relic); }
.toast.is-obi { border-color: var(--saber); color: var(--saber); }
.toast.is-snek { border-color: var(--lcd-ink); color: var(--lcd-ink); background: var(--lcd); font-family: var(--f-px); }
.toast.is-sack { border-color: var(--sack); color: var(--sack); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }
.menu:not([hidden]) ~ .bossbar, .menu:not([hidden]) ~ .relics, .menu:not([hidden]) ~ .toast { visibility: hidden; }

/* What's new (v0.56, user): a button in the bottom left of the title screen and main menu opens the changelog in a
   window, newest first */
.news-btn {
  position: fixed; z-index: 12; left: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px;
  font: 600 12px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; background: var(--scrim);
}
.news-btn-ver { font: 600 10px var(--f-num); letter-spacing: .06em; color: var(--xp); }
:root.devtools .news-btn { left: 92px; }                        /* (clear of the test panel's tab) */
.news-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: min(78vh, 720px); box-sizing: border-box; padding: 0;
  border: 1px solid var(--line); border-radius: 14px; background: var(--floor); color: var(--text);
  display: none; flex-direction: column; overflow: hidden;
}
.news-dialog[open] { display: flex; }
.news-dialog::backdrop { background: color-mix(in srgb, var(--floor) 70%, transparent); backdrop-filter: blur(2px); }
.news-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.news-dialog h3 { margin: 0; font: 400 20px var(--f-metal); letter-spacing: .08em; text-transform: uppercase; color: var(--chrome-hi); }
.news-dialog .news-list { padding: 14px 18px 18px; overflow-y: auto; min-height: 0; }
.news-dialog .news-list li { font-size: 13px; }
@media (prefers-reduced-motion: no-preference) { html:not(.has-gsap) .news-dialog[open] { animation: news-in .22s ease-out; } }
@keyframes news-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.news-list li { display: grid; grid-template-columns: 7.5ch minmax(0, 1fr); gap: 8px; font-size: 12px; line-height: 1.4; color: var(--text); }
.news-list .news-ver { display: block; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); font: 600 10px var(--f-num); letter-spacing: .08em; color: var(--muted); }
.news-list .news-ver:first-child { margin-top: 0; padding-top: 0; border-top: 0; color: var(--xp); }
.news-tag { font: 600 9px/1.9 var(--f-num); letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ui); }
/* The leaderboard (v0.56, user: top right, with a trophy, the names big): the top runs by level, then enemies
   defeated; yours highlighted, and your place under it. On narrow screens it sits under the menu. */
.board { width: min(320px, 100%); box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; text-align: left; background: var(--scrim); }
.board h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 400 15px var(--f-metal); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.board-trophy { color: var(--r-legendary); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--r-legendary) 60%, transparent)); flex: none; }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.board-list li, .board-me { display: grid; grid-template-columns: 2.2ch minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; }
.board-list li.is-me { background: color-mix(in srgb, var(--player) 10%, transparent); box-shadow: inset 3px 0 0 var(--xp); }
.board-rank { font: 700 13px var(--f-num); color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.board-list .is-top1 .board-rank { color: var(--r-legendary); } .board-list .is-top2 .board-rank { color: #d6dbe4; } .board-list .is-top3 .board-rank { color: #d08a52; }
.board-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 18px var(--f-ui); letter-spacing: .02em; color: var(--text); }
.board-score { display: grid; justify-items: end; font: 700 13px var(--f-num); color: var(--xp); font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-score small { font: 600 10px var(--f-num); color: var(--muted); letter-spacing: .04em; }
/* v0.69: the highest run (its wheel badge) beside the highest damage */
.board-score:has(.board-run) { display: flex; align-items: center; gap: 8px; }
.board-run { font-size: 13px; }
.board-dmg { display: grid; justify-items: end; color: var(--bad); }
.board-dmg b { font: 700 13px var(--f-num); }
.board-dmg small { font: 600 9px var(--f-num); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.board-list .board-note { display: block; padding: 6px 8px; font-size: 12px; color: var(--muted); }
.board-me { margin: 8px 0 0; padding-top: 9px; border-top: 1px solid var(--line); border-radius: 0; }
.board-me .board-name { font-size: 20px; }
.board-you { font: 700 9px var(--f-num); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 980px) {
  .board { position: fixed; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 56px); width: 260px; max-height: calc(100% - 72px - env(safe-area-inset-top, 0px)); overflow-y: auto; }
}
/* Your name (v0.56) */
.name-form { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px; }
.name-form .co-field { width: min(280px, 100%); }
.name-form input { font-size: 18px; }
.name-status { min-height: 1.4em; }
.wheel-actions { flex-wrap: wrap; }
#btn-wheel-xp b { color: var(--xp); font-weight: 700; }

/* Random weapon card: a level-up card with a dashed "mystery" border and a glow */
.upcard.is-weapon { border-style: dashed; box-shadow: 0 0 18px -6px var(--rc); }
.upcard.is-weapon .up-name::after { content: " ?"; color: var(--rc); }
.toast.is-weapon { border-color: var(--xp); color: var(--xp); }

/* BULL icon (by the HP bar) */
.relic-icon { position: relative; display: grid; place-items: center; }
.relic-icon svg { width: 20px; height: 20px; display: block; stroke-width: 2.4; }

/* Relic message after the boss: the icon, what it does, and a button to carry on */
.levelup.is-relic .up-cards { flex-direction: column; }
.relic-box { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 420px; }
.relic-art.is-sack { color: var(--sack); background: color-mix(in srgb, var(--sack) 14%, var(--floor)); box-shadow: 0 0 28px -6px var(--sack); }
.relic-art.is-deflect { color: var(--saber); background: color-mix(in srgb, var(--saber) 14%, var(--floor)); box-shadow: 0 0 28px -6px var(--saber); }
.relic-art { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: var(--relic); background: color-mix(in srgb, var(--relic) 14%, var(--floor)); box-shadow: 0 0 28px -6px var(--relic); }
.relic-art svg { width: 40px; height: 40px; display: block; }
.relic-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; text-align: left; font-size: 13px; line-height: 1.45; color: var(--text); }
.relic-facts li { position: relative; padding-left: 16px; }
.relic-facts li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--relic); }
.relic-facts b { color: var(--relic); font-weight: 700; }
.relic-facts kbd { font: 600 11px var(--f-num); padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--relic); }

/* KURTSAURUS's intro: a line across the middle of the arena while the footsteps shake it, then its name */
.intro {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  display: grid; place-items: center; padding-inline: 16px;
  background: radial-gradient(ellipse at center, transparent 30%, color-mix(in srgb, var(--floor) 70%, transparent) 100%);
}
.intro p { margin: 0; text-align: center; text-wrap: balance; }
.intro-line { font: 900 clamp(20px, 4.4vw, 40px)/1.15 var(--f-ui); letter-spacing: .08em; color: var(--text); text-shadow: 0 2px 18px var(--floor); animation: intro-in .6s ease-out both, intro-shake .7s 0s 4 ease-in-out; }
.intro-vs { display: block; margin-bottom: .3em; font-size: .38em; letter-spacing: .5em; color: var(--text); }
.intro-name { font: 900 clamp(30px, 7vw, 64px)/1 var(--f-ui); letter-spacing: .2em; color: var(--boss); text-shadow: 0 0 28px color-mix(in srgb, var(--boss) 60%, transparent); animation: intro-name 1.4s ease-out both; }
.intro-line.is-obi { color: var(--saber-core); text-shadow: 0 0 22px var(--saber), 0 2px 18px var(--floor); animation: intro-in .6s ease-out both, force-waver 1.6s ease-in-out infinite; }
@keyframes force-waver { 0%, 100% { transform: none; filter: none; } 50% { transform: scale(1.03); filter: brightness(1.25); } }
.intro-name.is-obi { color: var(--saber); text-shadow: 0 0 28px color-mix(in srgb, var(--saber) 60%, transparent); }
@keyframes intro-in { from { opacity: 0; letter-spacing: .3em; } }
@keyframes intro-shake { 0%, 100% { transform: none; } 12% { transform: translateY(4px); } 24% { transform: translateY(-2px); } 36% { transform: none; } }
/* AWAS THE SNEK's: a hiss in the phone's green, then its name in black on the screen */
.intro-line.is-snek, .intro-name.is-snek { font-family: var(--f-px); font-weight: 700; }
.intro-line.is-snek { color: var(--lcd); letter-spacing: .12em; text-shadow: 3px 3px 0 var(--lcd-ink), -3px -3px 0 var(--lcd-ink), 3px -3px 0 var(--lcd-ink), -3px 3px 0 var(--lcd-ink); animation: intro-in .6s ease-out both, snek-hiss .9s steps(2) infinite; }
.intro-name.is-snek { color: var(--lcd-ink); letter-spacing: .1em; text-shadow: 4px 4px 0 color-mix(in srgb, var(--lcd-ink) 25%, transparent); }
@keyframes snek-hiss { 50% { transform: translateX(3px); } }
@keyframes intro-name { 0% { opacity: 0; transform: scale(1.6); } 20% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .intro-line, .intro-name { animation: none; } }
.menu:not([hidden]) ~ .intro { visibility: hidden; }
@media (min-width: 1280px) { .board { width: 320px; } }

/* ---------- Menu look (user: fit the title art) ----------
   v0.30: PACKS SILICA. The menus follow the logo: blocky capitals (Russo One), chrome headings, chrome slabs for the
   main buttons, dark slabs with a coloured edge for the rest, chipped corners and a fine grain.
   v0.57 (user, with the new logo): its chrome is sky blue over a dark horizon, then orange into gold, on matte black.
   So the accent (--neon) is that blue (it was hot pink), headings are blue-to-orange chrome, buttons blue with orange
   highlights, and every menu sits on the same matte black as the title. (v0.19 to v0.29: GOON SWARM's red and grey.) */
:root {
  --neon: #4aa6ff;
  --neon-hi: #8ccdff;
  --neon-dark: #0a1838;
  --chrome-hi: #f3f8ff;
  --chrome: #c9d6e8;
  --chrome-lo: #7f8a9c;
  --slab: #0e1628;
  --f-metal: "Russo One", "Chakra Petch", Impact, sans-serif;
  --f-army: "Black Ops One", "Russo One", Impact, sans-serif;
  --f-magic: "Cinzel Decorative", "Russo One", Georgia, serif;   /* the Ulti Magus pack's name (v0.60): a magic-show serif */   /* the Bigger Weapons pack's stencil name (v0.59) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --chip: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  /* v0.57: the new logo's chrome (packssilica.webp), for the buttons */
  --logo-sky-hi: #c4e9ff; --logo-sky: #4aa6ff; --logo-blue: #1a4fc4;
  --logo-orange: #ff6a1c; --logo-gold: #ffc23a; --logo-ink: #07102e;
  --wild: #c77dff; --wild-hi: #ecd6ff;   /* v0.62: the Wild deck's violet; the tiers' gold is --logo-gold */
  /* the matte black behind every menu (v0.57, user: "darker, like a dark matte black", then "MORE DARKER") */
  --space: #040405; --space-hi: #08080a;
}
.menu { background: var(--grain), radial-gradient(ellipse 90% 80% at 50% 45%, var(--space-hi), var(--space) 70%, #020202); }
/* v0.60 (user: "a light on the back of the packs to act as a shadow"): each pack in the store has a soft light behind
   it in its own colour, so its edges stand off the dark like a backlit card, and a faint pool of the same light on
   the floor under it. Hovered, the pack lifts toward you while the light stays behind: it brightens and spreads, and
   the pool under it widens and fades, so the gap between them reads as depth. */
#store-packs .store-pack { --w: clamp(110px, calc((100vw - 200px) / 5.6), 196px); --glow: var(--gold-ui); position: relative; isolation: isolate; }
#store-packs .store-pack.pack-starter { --glow: #d6dcff; }
#store-packs .store-pack.pack-bigger { --glow: #ff9a3d; }
#store-packs .store-pack.pack-magus { --glow: #d2b4ff; }
#store-packs .store-pack.pack-silica { --glow: #ff8a4a; }
#store-packs .store-pack.pack-tballs { --glow: #ff3346; }
#store-packs .store-pack::before, #store-packs .store-pack::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; translate: -50% 0; border-radius: 50%;
  transition: opacity .5s ease, scale .5s cubic-bezier(.2, .9, .25, 1.2);
}
/* (v0.61, user: "the light is too big, just make it subtle"): only a little wider and taller than the pack, fainter,
   so it reads as a rim of light round its edges; the pool under it smaller too */
#store-packs .store-pack::before {                                   /* the light behind it */
  top: calc(6px + var(--w) * .02); width: calc(var(--w) * 1.22); height: calc(var(--w) * 1.36);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 55%, transparent), color-mix(in srgb, var(--glow) 22%, transparent) 70%, transparent 100%);
  filter: blur(8px); opacity: .45;
}
#store-packs .store-pack::after {                                    /* … and its pool on the floor under it */
  top: calc(6px + var(--w) * 1.36); width: calc(var(--w) * .95); height: calc(var(--w) * .14);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 35%, transparent), transparent 100%);
  filter: blur(3px); opacity: .55;
}
/* (v0.72, user: "instead of a glow to the new, add a NEW banner": the T-Balls pack's extra red glow is gone; a pack marked new wears the diagonal NEW ribbon, .pack-new below) */
/* the store's title on the left, the coins beside it */
.store-head { align-self: stretch; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; text-align: left; padding-inline: 4px; }
.store-head h2 { margin: 0; }
.store-head .gold { font-size: 14px; gap: 9px; }
.store-head .gold .coin { width: 20px; height: 20px; }
.store-head .gold .gold-n { font-size: 26px; }
#store-packs .store-pack.is-tilt::before { opacity: .7; scale: 1.05; transition: opacity .2s ease, scale .2s ease-out; }
#store-packs .store-pack.is-tilt::after { opacity: .3; scale: 1.15 .85; transition: opacity .2s ease, scale .2s ease-out; }
#store-packs .store-pack.is-short::before, #store-packs .store-pack.is-short::after { --glow: #8a8a99; }   /* (one you can't afford: a grey light) */
@media (prefers-reduced-motion: reduce) { #store-packs .store-pack::before, #store-packs .store-pack::after { transition: none; } }
.pause:not(.levelup) {   /* (over a paused run: see-through, darker at the edges) */
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 45%, rgba(0, 0, 0, .55) 100%), var(--scrim);
}
.menu h2, .pause h2 {
  font: 400 32px/1.1 var(--f-metal); letter-spacing: .04em;
  background: linear-gradient(180deg, var(--chrome-hi) 12%, #9fd3ff 44%, var(--logo-blue) 51%, var(--logo-orange) 58%, var(--logo-gold) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 var(--neon-dark)) drop-shadow(0 0 10px color-mix(in srgb, var(--neon) 35%, transparent));
}
.menu .eyebrow, .pause .eyebrow { font: 400 13px var(--f-metal); letter-spacing: .22em; color: var(--neon-hi); }
.menu-logo { display: block; width: min(470px, 86vw, 42vh * 2.14); line-height: 0; }   /* v0.55 (user): bigger (300px before) */
.menu-logo img { display: block; width: 100%; height: auto; }
/* The main menu (v0.57, user): on a wide screen the logo and buttons on the left, and on the right a box where a
   little fight plays itself with your loadout (menus.js menu demo: it's drawn on the arena behind the menu, so the
   menu's scrim is off there), with the leaderboard under it. Narrow screens keep the menu centred, with no fight. */
.home-col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.menu-sim { display: none; }
@media (min-width: 1100px) and (min-height: 600px) {
  .menu.is-home { background: transparent; place-items: stretch; }
  #scr-main { flex-direction: row; align-items: stretch; justify-content: space-between; gap: 48px; box-sizing: border-box;
    width: 100%; height: 100%; padding: 40px 32px 72px 48px; text-align: left; }
  #scr-main .home-col { flex: 0 0 auto; width: min(520px, 36vw); align-items: flex-start; gap: 14px; }
  #scr-main .menu-logo { width: min(100%, (100vh - 560px) * 2.14); min-width: 300px; }
  #scr-main .nav { width: 300px; gap: 10px; }
  #scr-main .menu-sim { display: block; position: relative; flex: 1 1 auto; max-width: 960px; margin-top: 12px; }
}

/* The main menu's news (v0.71, user: "make this a carousel if there's a new event or announcement", their sketch: two
   packs tilted and overlapping with an UPCOMING banner across them, on "a nice abstract bg", all three "floating like
   our packs and hoverable since they are 3 separate parts"; menus.js ANN). It fills the demo's box; the fight shows
   through when its turn comes. The stage keeps the sketch's shape (1100 × 990) and everything on it is sized in its
   width (cqw), so it scales with the box. The background: soft lights in the two new packs' colours (the lantern's
   green, the engineer's sunset orange) and the logo's blue, drifting behind slow turning rays, over a neon floor grid
   running toward you, under fine grain. */
.ann { position: absolute; inset: 0; }
.ann-slides { position: absolute; inset: 0; }
/* The changes (v0.73, user: "a weird transition setting up the demo, and it overlaps"): the demo fight is drawn behind the box all the time, and
   a slide cross-fading with it showed the squares through the slide. Now one thing at a time: the slide that's leaving fades out (.3 s) over a
   dark cover, THEN the next slide fades in, or the cover lifts to show the demo; going back, the cover closes before the slide comes in. */
.ann::before { content: ""; position: absolute; inset: 0; background: #040405; opacity: 1; transition: opacity .3s ease; }
.ann.is-demo::before { opacity: 0; transition: opacity .45s ease .3s; }
.ann-slide { position: absolute; inset: 0; overflow: hidden; container-type: size; opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s .2s; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon) 30%, transparent); }
.ann-slide.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease .15s; }   /* (v0.77, user: a faster carousel; .5s after .3s before) */
.ann.is-demo .ann-slide { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
.ann-stage { position: absolute; left: 50%; top: 47%; width: min(90cqw, 86cqh * 1.111); aspect-ratio: 1100 / 990; translate: -50% -50%; scale: .94;
  container-type: inline-size; transition: scale .8s cubic-bezier(.2, .9, .25, 1.1); }
.ann-slide.is-on .ann-stage { scale: 1; }
.ann-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 120% 90% at 50% 110%, #1b0d33 0%, #0b0a1e 55%, #05050c 100%); }
.ann-bg::after { content: ""; position: absolute; inset: 0; background: var(--grain), radial-gradient(ellipse 75% 70% at 50% 48%, transparent 40%, rgba(2, 2, 6, .75) 100%); opacity: .9; pointer-events: none; }
.ann-blob { position: absolute; border-radius: 50%; filter: blur(48px); mix-blend-mode: screen; opacity: .75; }
.ann-b1 { left: 4%; top: 2%; width: 46cqw; height: 46cqw; background: radial-gradient(closest-side, #3dff8e, rgba(20, 160, 80, .5) 55%, transparent); }
.ann-b2 { right: 0%; bottom: 8%; width: 52cqw; height: 44cqw; background: radial-gradient(closest-side, #ff8a2a, rgba(200, 70, 160, .5) 60%, transparent); }
.ann-b3 { left: 34%; top: 26%; width: 36cqw; height: 30cqw; background: radial-gradient(closest-side, #3a6bff, transparent); opacity: .6; }
.ann-rays { position: absolute; left: 50%; top: 46%; width: 180cqmax; height: 180cqmax; margin: -90cqmax 0 0 -90cqmax; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .07) 0deg 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 70%); mask: radial-gradient(closest-side, #000 10%, transparent 70%); }
.ann-grid { position: absolute; left: -50%; right: -50%; bottom: -6%; height: 46%; transform-origin: 50% 100%; transform: perspective(300px) rotateX(62deg);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--neon) 55%, transparent) 1.5px, transparent 1.5px) 50% 0 / 6cqw 6cqw,
    linear-gradient(0deg, color-mix(in srgb, var(--neon) 55%, transparent) 1.5px, transparent 1.5px) 0 0 / 6cqw 6cqw;
  -webkit-mask: linear-gradient(0deg, #000 10%, transparent 85%); mask: linear-gradient(0deg, #000 10%, transparent 85%); opacity: .45; }
/* the three parts: placed and turned as in the sketch, each bobbing on its own beat; hovered, one lifts and turns
   toward the pointer (menus.js packTilt), with the shine and the name floating over its art, like the store's packs */
.ann-part { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; rotate: var(--r); perspective: 900px; }
.ann-p1 { --x: 30.5%; --y: 37%; --r: -11.3deg; z-index: 2; }
.ann-p2 { --x: 70.5%; --y: 41%; --r: 17.4deg; z-index: 1; }
.ann-tag { --x: 50%; --y: 79%; --r: 0deg; z-index: 3; width: 74%; }
.ann-part .pack-art { --w: 35.3cqw; }
.ann-float { position: relative; }
.ann-p1 .ann-float::before, .ann-p2 .ann-float::before, .ann-solo .ann-float::before {   /* a light behind each pack, in its colour */
  content: ""; position: absolute; inset: -12%; z-index: -1; border-radius: 30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 55%, transparent), transparent);
  filter: blur(14px); opacity: .7; transition: opacity .3s, scale .3s; }
.ann-p1 { --glow: #3dff8e; } .ann-p2 { --glow: #ffa040; }
.ann-part.is-tilt .ann-float::before { opacity: 1; scale: 1.08; }
.ann-tilt { --rx: 0deg; --ry: 0deg; --sx: 0px; --mx: 50%; --my: 30%; --lift: 0px; --s: 1;
  transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--s)); transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .9, .25, 1.2), filter .3s; }
.ann-part.is-tilt .ann-tilt { --lift: -1.2cqw; --s: 1.06; transition: transform .12s ease-out, filter .3s; }
.ann-part.is-tilt .pack-art { filter: drop-shadow(var(--sx) 22px 18px rgba(0, 0, 0, .6)); }
.ann-part .pack-body { position: relative; }
.ann-part .pack-body::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background:
    radial-gradient(circle at var(--mx) var(--my), color-mix(in srgb, var(--player) 30%, transparent), transparent 45%),
    linear-gradient(calc(90deg + var(--ry) * 4), transparent 30%, color-mix(in srgb, var(--player) 18%, transparent) 48%, transparent 62%);
  mix-blend-mode: overlay; }
.ann-part.is-tilt .pack-body::after { opacity: 1; }
@keyframes ann-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1.5cqw) rotate(.9deg); } }
@media (prefers-reduced-motion: no-preference) {
  .ann-p1 .ann-float, .ann-solo .ann-float { animation: ann-float 5.6s ease-in-out infinite; }
  .ann-p2 .ann-float { animation: ann-float 6.4s ease-in-out -2.2s infinite; }
  .ann-tag .ann-float { animation: ann-float 4.8s ease-in-out -1.1s infinite; }
  .ann-rays { animation: ann-spin 90s linear infinite; }
  .ann-b1 { animation: ann-drift 13s ease-in-out infinite alternate; }
  .ann-b2 { animation: ann-drift 17s ease-in-out -6s infinite alternate-reverse; }
  .ann-b3 { animation: ann-drift 11s ease-in-out -3s infinite alternate; }
  .ann-grid { animation: ann-run 3s linear infinite; }
}
@keyframes ann-spin { to { rotate: 360deg; } }
@keyframes ann-drift { from { translate: -4cqw 2cqw; scale: 1; } to { translate: 5cqw -3cqw; scale: 1.18; } }
@keyframes ann-run { to { background-position: 50% 6cqw, 0 6cqw; } }
/* the two new packs' covers (assets/img/lantern_pack.webp, engineer_pack.webp, 80 px like the others), names and films */
.pack-art.pack-lantern { --pc: #3dff8e; --cover: url("assets/img/lantern_pack.webp"); --cover-p: .6;
  --film: linear-gradient(125deg, rgba(90, 255, 150, .34) 0%, rgba(20, 120, 60, .2) 35%, rgba(180, 255, 210, .3) 60%, rgba(30, 160, 90, .22) 100%); }
.pack-art.pack-engineer { --pc: #ffb23a; --cover: url("assets/img/engineer_pack.webp"); --cover-p: .12;
  --film: linear-gradient(125deg, rgba(255, 196, 80, .3) 0%, rgba(255, 120, 40, .2) 35%, rgba(255, 224, 150, .28) 60%, rgba(190, 110, 255, .2) 100%); }
.pack-art.pack-lantern .pack-logo, .pack-art.pack-engineer .pack-logo {
  font-family: var(--f-metal); font-weight: 400; letter-spacing: .06em; margin-right: -.06em;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.pack-art.pack-lantern .pack-logo { font-size: calc(var(--w) * .15);   /* the ring's light: white-hot into green, glowing */
  background-image: linear-gradient(180deg, #f4fff7 0%, #9dffc4 40%, #2ee87a 62%, #0f8f45 100%);
  filter: drop-shadow(1px 0 0 #03230f) drop-shadow(-1px 0 0 #03230f) drop-shadow(0 1px 0 #03230f) drop-shadow(0 -1px 0 #03230f) drop-shadow(0 0 6px rgba(60, 255, 140, .9)); }
.pack-art.pack-engineer .pack-logo { font-size: calc(var(--w) * .12);   /* a hard hat's yellow, with the floor's hazard stripes */
  background-image: repeating-linear-gradient(-45deg, transparent 0 .32em, rgba(20, 16, 10, .55) .32em .44em), linear-gradient(180deg, #fff3b0 0%, #ffd23a 50%, #e79a12 100%);
  filter: drop-shadow(1px 0 0 #1c1406) drop-shadow(-1px 0 0 #1c1406) drop-shadow(0 1px 0 #1c1406) drop-shadow(0 -1px 0 #1c1406) drop-shadow(0 3px 4px rgba(0, 0, 0, .8)); }
.pack-art.pack-lantern .pack-word { background-image: linear-gradient(180deg, #c8ffdc 0%, #3dff8e 55%, #0f8f45 100%); }
.pack-art.pack-engineer .pack-word { background-image: linear-gradient(180deg, #fff3b0 0%, #ffd23a 55%, #b8760c 100%); }
/* the banner: dark glass with a neon rim and the logo's chrome, a glint running across it now and then */
.ann-banner { position: relative; display: grid; justify-items: center; gap: .6cqw; padding: 2.1cqw 3cqw 2.4cqw; overflow: hidden;
  clip-path: polygon(2cqw 0, 100% 0, 100% calc(100% - 2cqw), calc(100% - 2cqw) 100%, 0 100%, 0 2cqw);
  background: linear-gradient(180deg, rgba(16, 22, 58, .86), rgba(6, 8, 24, .92));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--neon) 70%, transparent), inset 0 0 3cqw -1cqw color-mix(in srgb, var(--neon) 70%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ann-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; translate: -120% 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 60%); }
.ann-part.is-tilt .ann-banner::after { translate: 120% 0; transition: translate .9s ease-out; }
@media (prefers-reduced-motion: no-preference) { .ann-slide.is-on .ann-banner::after { animation: ann-glint 4.2s ease-in-out 1s infinite; } }
@keyframes ann-glint { 0%, 70% { translate: -120% 0; } 100% { translate: 120% 0; } }
.ann-kicker { font: 400 1.7cqw/1 var(--f-metal); letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; color: var(--neon-hi); }
.ann-word { font: 400 8.4cqw/1 var(--f-metal); letter-spacing: .16em; margin-right: -.16em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--chrome-hi) 12%, #9fd3ff 44%, var(--logo-blue) 51%, var(--logo-orange) 58%, var(--logo-gold) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 var(--neon-dark)) drop-shadow(0 0 10px color-mix(in srgb, var(--neon) 40%, transparent)); }
.ann-part.is-tilt .ann-kicker { translate: calc(var(--px, 0) * 1.2cqw) calc(var(--py, 0) * .6cqw); }
.ann-part.is-tilt .ann-word { translate: calc(var(--px, 0) * 2.4cqw) calc(var(--py, 0) * 1.2cqw); }
.ann-kicker, .ann-word { transition: translate .4s cubic-bezier(.2, .9, .25, 1.2); }
/* under it: back, a dot for each slide (the one showing fills as its time runs, and holds while you're on it), next */
.ann-nav { position: absolute; left: 50%; bottom: 14px; z-index: 5; translate: -50% 0; display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 999px; background: rgba(4, 4, 10, .6); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon) 25%, transparent); }
.ann-arrow { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--neon-hi); cursor: pointer; }
.ann-arrow:hover, .ann-arrow:focus-visible { background: color-mix(in srgb, var(--neon) 22%, transparent); color: var(--chrome-hi); outline: none; }
.ann-dots { display: flex; gap: 6px; }
.ann-dot { position: relative; width: 22px; height: 12px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .3s; }
.ann-dot::before, .ann-dot i { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.ann-dot i { right: auto; width: 0; background: var(--neon-hi); }
.ann-dot.is-on { width: 40px; }
.ann-dot.is-on i { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .ann-dot.is-on i { animation: ann-time var(--ann-t, 7s) linear forwards; }
  .ann.is-hold .ann-dot.is-on i { animation-play-state: paused; }
}
@keyframes ann-time { from { width: 0; } to { width: 100%; } }
.ann-dot:hover::before, .ann-dot:focus-visible::before { background: rgba(255, 255, 255, .45); }
.ann-dot:focus-visible { outline: none; }

/* the main button (v0.57, user: "match the colours of the logo", then "blue-ish with just highlights of the orange"): the
   logo's blue chrome, sky on top into deep blue, with an orange edge along the bottom and a thin orange rim */
.menu .start, .pause .start {
  position: relative;
  padding: 12px 40px 11px; border: 0; border-radius: 0; clip-path: var(--chip);
  font: 400 20px/1 var(--f-metal); letter-spacing: .14em; text-transform: uppercase;
  color: var(--chrome-hi) !important;
  background: var(--grain), linear-gradient(180deg, var(--logo-sky-hi), var(--logo-sky) 26%, var(--logo-blue) 52%, #10307f 80%, #0c2566);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--logo-orange) 70%, transparent), inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 var(--logo-orange), inset 0 -10px 12px -8px color-mix(in srgb, var(--logo-gold) 55%, transparent);
  text-shadow: 0 0 2px var(--logo-ink), 0 2px 0 var(--logo-ink), 0 0 10px rgba(6, 12, 40, .6);
  transition: transform .12s ease, filter .12s ease;
}
#btn-title { padding: 15px 64px 14px; font-size: 26px; }
.menu .start:hover:not(:disabled), .pause .start:hover:not(:disabled) { filter: brightness(1.15) saturate(1.1); transform: translateY(-1px) scale(1.02); }
.menu .start:active:not(:disabled), .pause .start:active:not(:disabled) { transform: translateY(1px) scale(.99); filter: brightness(.95); }

/* the other menu buttons: dark slabs with the logo's blue edge (v0.57; pink before), lit blue on hover */
.menu .nav button:not(.start), .pause .nav button:not(.start),
.menu .row button:not(.start):not(.danger):not(.back) {
  border: 0; border-radius: 0; clip-path: var(--chip);
  font: 400 17px/1 var(--f-metal); letter-spacing: .12em; text-transform: uppercase;
  color: var(--chrome);
  background: var(--grain), linear-gradient(180deg, #172440, #0e1628);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--logo-sky) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.menu .nav button:not(.start), .pause .nav button:not(.start) { padding: 12px 10px 11px; }
.menu .row button:not(.start):not(.danger):not(.back) { padding: 10px 22px 9px; }
.menu .nav button:not(.start):hover:not(:disabled), .pause .nav button:not(.start):hover:not(:disabled),
.menu .row button:not(.start):not(.danger):not(.back):hover:not(:disabled) {
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--logo-sky), inset 0 0 18px color-mix(in srgb, var(--logo-sky) 40%, transparent), inset 0 -2px 0 var(--logo-orange);
  transform: translateY(-1px);
}
.menu .nav { width: 240px; gap: 12px; }
/* Start in the main menu's list keeps the red slab, full width */
.menu .nav .start { width: 100%; padding: 13px 10px 12px; font-size: 21px; }

/* Back and Close (v0.67, user: "back buttons should be a button with a color so it's easier to see"): a slab in the logo's
   orange with a chevron, like the pack page's BACK (Reset data stays a quiet link) */
.menu .back:not(#btn-reset), .pause .back, .practice .back, .cview .back, .arc-detail .back {
  --bc: var(--logo-orange, #ff6a1c);
  display: inline-flex; align-items: center; justify-content: center; padding: 9px 20px 8px; border: 0; border-radius: 0; clip-path: var(--chip);
  font: 400 15px/1 var(--f-metal); letter-spacing: .14em; text-transform: uppercase; color: var(--chrome-hi) !important;
  background: var(--grain), linear-gradient(180deg, color-mix(in srgb, var(--bc) 34%, #141824), color-mix(in srgb, var(--bc) 14%, var(--slab)));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bc) 80%, transparent), inset 0 0 14px -4px color-mix(in srgb, var(--bc) 70%, transparent);
  transition: filter .12s ease, transform .12s ease;
}
.menu .back:not(#btn-reset):hover, .pause .back:hover, .practice .back:hover, .cview .back:hover, .arc-detail .back:hover { color: #fff !important; filter: brightness(1.25); transform: translateY(-1px); }
.menu .back[id$="back"]::before, .pause .back[id$="back"]::before, .practice .back[id$="back"]::before, .arc-detail .back[id$="back"]::before { content: '‹'; margin-right: 8px; font-size: 20px; line-height: .6; margin-top: -2px; color: color-mix(in srgb, var(--bc) 60%, #ffffff); }
/* the quieter link: Reset data stays plain capitals that go orange on hover (pink before v0.57) */
.menu #btn-reset {
  border: 0; border-radius: 0; padding: 6px 12px; background: none;
  font: 400 14px/1 var(--f-metal); letter-spacing: .16em; text-transform: uppercase;
  color: var(--chrome-lo) !important;
  transition: color .12s ease;
}
.menu #btn-reset:hover { color: var(--logo-orange) !important; }
.menu .danger { border-radius: 0; clip-path: var(--chip); font: 400 15px/1 var(--f-metal); letter-spacing: .12em; text-transform: uppercase; padding: 9px 18px 8px; }

/* v0.57: until its logo and fonts are in, the title is hidden and nothing in it animates (menus.js takes the class off;
   the animations then start from the beginning) */
#scr-title.is-loading { visibility: hidden; animation: none; }
/* …and so do the leaderboard and the changelog button, which sit outside it (user: on a refresh the leaderboard showed alone first) */
:root:has(#scr-title.is-loading) :is(#board, #news-btn) { visibility: hidden; }
#scr-title.is-loading *, #scr-title.is-loading *::before, #scr-title.is-loading *::after { animation: none !important; }

/* the title's stars flying out from the middle (warp.js): a full-screen canvas under the title, over the black */
.title-warp { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; filter: blur(1.6px); }   /* (a little soft, v0.57 user) */

/* the chipped corners would clip a focus outline, so focus shows inside the button instead */
.menu .start:focus-visible, .pause .start:focus-visible,
.menu .nav button:focus-visible, .pause .nav button:focus-visible,
.menu .row button:focus-visible, .menu .danger:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--logo-gold), inset 0 0 14px color-mix(in srgb, var(--logo-gold) 35%, transparent);
}
.menu .gold b, .menu .gold-n { font-family: var(--f-num); }
@media (prefers-reduced-motion: reduce) {
  .menu .start, .pause .start, .menu .nav button, .pause .nav button, .menu .row button { transition: none; }
}

/* ---------- Settings panel: the Display section ---------- */
.sound-panel .panel-sec { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text); }
.set-note { margin: -4px 0 0; font-size: 11px; line-height: 1.4; color: var(--muted); }
/* an on/off switch with a little LED, after the reference's power switch */
.crt-switch { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 9px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text); box-shadow: 0 2px 0 var(--line); }
.crt-switch:active { transform: translateY(2px); box-shadow: none; }
.switch-led { width: 9px; height: 9px; border-radius: 50%; background: #003321; border: 1px solid #000; }
.crt-switch[aria-checked="true"] .switch-led { background: #22ff55; box-shadow: 0 0 6px #22ff55; }

/* ---------- The CRT filter (display.js; user, after Lucas Bebber's "CSS CRT screen effect") ----------
   On (html.crt): the arena is drawn at 1/2 resolution and scaled up with hard edges, the logo is a small copy blown
   up, and a CRT screen (scanlines, colour stripes, flicker, dark corners) sits over everything. Off: none of this,
   full resolution. Text keeps its normal fonts either way (v0.30, user: the pixel fonts were unreadable). */
.logo-px { display: none !important; }
.crt .logo-hd { display: none !important; }
.crt .logo-px { display: block !important; image-rendering: crisp-edges; image-rendering: pixelated; }   /* crisp-edges: older Firefox */
.crt .arena canvas { image-rendering: crisp-edges; image-rendering: pixelated; }
.crt { background: #000; }                           /* the dark tube behind the switch-on */

.crt-screen { display: none; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.crt .crt-screen {
  display: block;
  /* the tube's dark corners, and a faint glow from the middle of the glass (v0.32, user: a stronger filter) */
  background:
    radial-gradient(ellipse 72% 68% at 50% 50%, transparent 55%, rgba(0, 0, 0, .72) 100%),
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(200, 215, 255, .03), transparent 70%);   /* (a cool white; it was pink until v0.57) */
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .55), inset 0 0 12px rgba(0, 0, 0, .8);
}
/* scanlines: a dark line under every row of game pixels (2px), and red / green / blue stripes like a tube's phosphor.
   v0.30 made them lighter for readable text; v0.32 (user) turned the filter back up, text is still in clear fonts. */
.crt-screen::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, .26) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, .08), rgba(0, 255, 0, .03), rgba(0, 0, 255, .08));
  background-size: 100% 2px, 3px 100%;
}
/* flicker: a faint dark wash whose strength jumps about */
.crt-screen::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(18, 16, 16, .12); opacity: 0;
  animation: crt-flicker .15s infinite;
}
@keyframes crt-flicker {
  0% { opacity: .28; } 5% { opacity: .35; } 10% { opacity: .24; } 15% { opacity: .91; } 20% { opacity: .18; }
  25% { opacity: .84; } 30% { opacity: .66; } 35% { opacity: .68; } 40% { opacity: .27; } 45% { opacity: .85; }
  50% { opacity: .96; } 55% { opacity: .09; } 60% { opacity: .2; } 65% { opacity: .72; } 70% { opacity: .53; }
  75% { opacity: .37; } 80% { opacity: .71; } 85% { opacity: .7; } 90% { opacity: .7; } 95% { opacity: .36; } 100% { opacity: .24; }
}

/* Switching on: a bright line that jumps and opens out, then a black screen that brightens */
.crt-on body { animation: crt-turn-on 2.4s linear; }
@keyframes crt-turn-on {
  0% { transform: scale(1, .8) translate3d(0, 0, 0); filter: brightness(30); opacity: 1; }
  3.5% { transform: scale(1, .8) translate3d(0, 100%, 0); }
  3.6% { transform: scale(1, .8) translate3d(0, -100%, 0); opacity: 1; }
  9% { transform: scale(1.3, .6) translate3d(0, 100%, 0); filter: brightness(30); opacity: 0; }
  11% { transform: scale(1, 1) translate3d(0, 0, 0); filter: contrast(0) brightness(0); opacity: 0; }
  100% { transform: scale(1, 1) translate3d(0, 0, 0); filter: contrast(1) brightness(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .crt-screen::after { animation: none; }
  .crt-on body { animation: none; }
}

/* ---------- MAKORA (makora.js): the black-screen scenes and its bar ---------- */
.cine {
  position: fixed; inset: 0; z-index: 12;                 /* over the arena and HUD, under the CRT screen */
  display: grid; place-items: center; pointer-events: none;
  background: #000; opacity: 0; transition: opacity .7s ease;
}
.cine.is-on { opacity: 1; }
.cine-line {
  grid-area: 1 / 1; margin: 0; padding-inline: 16px; text-align: center;
  font: 400 clamp(22px, 4.2vw, 40px)/1.15 var(--f-metal); letter-spacing: .14em; text-transform: uppercase;
  color: var(--chrome-hi); opacity: 0;
}
.cine-line.is-in { animation: cine-in .6s ease-out forwards; }
.cine-line.is-out { opacity: 1; animation: cine-out .35s ease-in forwards; }
@keyframes cine-out { to { opacity: 0; transform: translateY(-6px); } }
.cine-line.is-name { font-size: clamp(44px, 10vw, 104px); letter-spacing: .1em; color: var(--wheel); text-shadow: 0 0 24px color-mix(in srgb, var(--wheel) 55%, transparent), 0 4px 0 #3a2a00; }
.cine-line.is-name.is-in { animation: cine-name .9s cubic-bezier(.2, .9, .25, 1.2) forwards, intro-shake .5s .1s 2 ease-in-out; }
@keyframes cine-in { from { opacity: 0; transform: translateY(8px); letter-spacing: .3em; } to { opacity: 1; transform: none; } }
@keyframes cine-name { 0% { opacity: 0; transform: scale(1.6); filter: blur(8px); } 60% { opacity: 1; transform: scale(.96); filter: blur(0); } 100% { opacity: 1; transform: none; } }
/* the wheel: flat gold, drawn small by makora.js and blown up with hard edges for a little retro pixelation (v0.37,
   user), turned one notch, with a soft gold glow and a pink one behind; it shakes as it lands */
.cine-wheel {
  grid-area: 1 / 1; width: min(60vmin, 440px); height: auto; aspect-ratio: 1; max-width: 100%;
  image-rendering: crisp-edges; image-rendering: pixelated;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--wheel) 45%, transparent)) drop-shadow(0 0 60px color-mix(in srgb, var(--neon) 30%, transparent));
  opacity: 0; transform: scale(.92); transition: opacity .35s ease, transform .35s ease;
}
.cine-wheel.is-shown { opacity: 1; transform: none; }
.cine-wheel.is-clunk { animation: wheel-clunk .45s ease-out both; }
@keyframes wheel-clunk {
  0% { translate: 0 0; } 15% { translate: -10px 6px; } 30% { translate: 8px -6px; } 45% { translate: -6px 3px; }
  60% { translate: 4px -2px; } 80% { translate: -2px 1px; } 100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cine-line.is-in, .cine-line.is-name.is-in { animation: none; opacity: 1; } .cine-line.is-out { animation: none; opacity: 0; }
  .cine-wheel.is-clunk { animation: none; }
}
/* Skip MAKORA's intro (user): bottom right, quiet until you point at it */
.cine-skip {
  position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); pointer-events: auto;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--chrome-lo); border-radius: 0; background: none;
  font: 400 14px/1 var(--f-metal); letter-spacing: .16em; text-transform: uppercase; color: var(--chrome-lo);
  transition: color .12s ease, border-color .12s ease;
}
.cine-skip:hover, .cine-skip:focus-visible { color: var(--neon-hi); border-color: var(--neon-hi); }
.cine-skip kbd { font: 600 10px var(--f-num); letter-spacing: .04em; padding: 2px 5px; border: 1px solid currentColor; border-radius: 3px; }
.crt .cine-skip { font-weight: 700; letter-spacing: .1em; }
.bossbar.is-makora .boss-name { color: var(--wheel); }
.bossbar.is-makora .boss-hp { box-shadow: 0 0 14px -2px var(--wheel); }
.bossbar.is-makora .boss-hp span { background: var(--makora-dark); }
.bossbar.is-makora.is-enraged .boss-name { color: var(--bad); }
.bossbar.is-makora.is-enraged .boss-hp { box-shadow: 0 0 16px -1px var(--bad); }
.bossbar.is-makora.is-enraged .boss-hp span { background: linear-gradient(90deg, var(--bad), var(--wheel)); }
.cine-line.is-clear { align-self: end; margin-bottom: 7vh; font-size: clamp(30px, 6vw, 64px); }
.boss-sub { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Loadout: the deck builder (v0.31; v0.91, user's drawing: "complete UI change") ----------
   The top bar (Back, LOADOUTS, Test loadout). Under it your cards in one big panel: a bar with the Pack / Rarity / Sort menus and,
   at its end, the Deck code button; then the cards. At the bottom the deck, a dock: the loadouts and the Ranged / Melee / Wild tabs
   sit on top of it like folder tabs; its bar (plays in runs, Auto, Clear, the ^ handle); its cards in one row. The handle opens
   it to the whole deck (or drag it). Notes come in over the cards (.lo-toasts). */
.screen.is-builder { width: min(1480px, 100%); gap: 12px; padding-block: 14px; height: 100vh; height: 100dvh; box-sizing: border-box; }
.lo-top { width: 100%; box-sizing: border-box; padding-right: 52px; justify-content: flex-start; align-items: center; gap: 16px; }   /* (clear of the settings gear) */
.lo-top h2 { flex: 1; margin: 0; text-align: left; }
.builder {
  --steel: linear-gradient(135deg, #3d434d 0%, #c9d1dc 20%, #6c7480 38%, #2a2e36 54%, #e6ebf2 70%, #7d8592 86%, #3d434d 100%);
  --dock-card: 88px; --dock-big: 112px; --dock-x: 0px; --dock-row: calc(var(--dock-card) + 24px);
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px;
  width: 100%; flex: 1; min-height: 0; text-align: left;
}
/* your cards */
.coll-panel { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; border-radius: 16px;
  background: linear-gradient(180deg, rgba(23, 26, 38, .72), rgba(11, 12, 18, .72)); box-shadow: inset 0 0 0 1px #262b36; }
.coll-bar { position: relative; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; border-bottom: 1px solid #1d212b; }
.deck-row { padding-right: 14px; box-shadow: 1px 0 0 #232835; }   /* (v0.92: the decks' tabs lead the cards' bar, a line between them and the menus) */
.coll-filters { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.coll-filters[hidden] { display: none; }
.cf-drop { position: relative; }
.cf-dd { display: inline-flex; align-items: center; gap: 8px; height: 34px; box-sizing: border-box; padding: 0 10px 0 12px; border: 1.5px solid #2c313c; border-radius: 9px;
  background: #121522; font: 600 12px var(--f-ui, inherit); letter-spacing: .06em; text-transform: uppercase; color: var(--text); cursor: pointer;
  transition: border-color .12s ease, background .12s ease; }
.cf-dd .cf-label { width: auto; font: 700 10px var(--f-ui, inherit); letter-spacing: .14em; color: var(--muted); opacity: 1; }
.cf-dd b { font-weight: 700; white-space: nowrap; }
.cf-dd:hover, .cf-dd[aria-expanded="true"] { border-color: var(--logo-sky); color: var(--text); }
.cf-drop.is-set .cf-dd { border-color: color-mix(in srgb, var(--logo-sky) 65%, #2c313c); background: #14203a; }
.cf-chev { color: var(--muted); transition: transform .15s ease; }
.cf-dd[aria-expanded="true"] .cf-chev { transform: rotate(180deg); }
.cf-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 210px; max-height: min(360px, 60vh); overflow-y: auto; box-sizing: border-box;
  display: grid; gap: 2px; padding: 6px; border-radius: 12px; background: #0e1018; box-shadow: inset 0 0 0 1px #2c313c, 0 18px 40px rgba(0, 0, 0, .65); }
.cf-menu[hidden] { display: none; }
.cf-opt { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: none;
  font: 600 12px var(--f-ui, inherit); letter-spacing: .06em; text-transform: uppercase; text-align: left; color: var(--text); cursor: pointer; }
.cf-opt:hover, .cf-opt:focus-visible { background: rgba(255, 255, 255, .06); outline: none; }
.cf-opt[aria-checked="true"] { color: var(--neon-hi); background: color-mix(in srgb, var(--neon) 14%, transparent); }
.cf-opt b { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.cf-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--dot); box-shadow: 0 0 6px var(--dot); }
.cf-dot.is-none { visibility: hidden; }
.cf-opt[data-rarity="sss"] .cf-dot, .cf-drop[data-group="rarity"] .cf-dd .cf-dot[style*="--r-sss"] { background: conic-gradient(from 0deg, #ff9ad5, #9ae6ff, #c9a2ff, #fff3a6, #ff9ad5); }
.cf-total { margin-left: 6px; font: 600 11px var(--f-ui, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* the Deck code button, at the bar's end; its box drops down from it */
.lo-codewrap { position: relative; flex: none; margin-left: auto; }
.menu .lo-codes { display: inline-flex; align-items: center; gap: 8px; height: 34px; box-sizing: border-box; padding: 0 14px; border: 1.5px solid #2c313c; border-radius: 9px;
  background: #121522; font: 400 12px/1 var(--f-metal); letter-spacing: .1em; text-transform: uppercase; color: var(--chrome); cursor: pointer; }
.menu .lo-codes:hover, .menu .lo-codes.is-on { border-color: var(--logo-sky); color: var(--chrome-hi); background: #14203a; }
.lo-codebox { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: min(360px, calc(100vw - 32px)); box-sizing: border-box;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .65); }
.lo-cb-h { margin: 0; font: 700 10px var(--f-ui, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.coll-none { grid-column: 1 / -1; margin: 0; padding: 24px; text-align: center; font-size: 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; }
.coll-grid {
  flex: 1; min-height: 0; overflow-y: auto; align-content: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; padding: 14px 14px 18px;
}
/* the deck: a dock at the bottom */
.deck-panel { position: relative; display: flex; flex-direction: column; min-width: 0; transition: box-shadow .15s ease; border-radius: 16px; }
.dock-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; padding: 0 4px 6px; }
.dock-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dock-label { flex: none; margin-right: 4px; font: 700 10px var(--f-ui, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dock-body {
  display: flex; flex-direction: column; min-height: 0; border: 3px solid transparent; border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #171a26, #0b0c12 55%, #10121a) padding-box, var(--steel) border-box;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5); transition: box-shadow .15s ease;
}
.builder.is-adding .dock-body { box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 0 2px color-mix(in srgb, var(--neon) 55%, transparent); }
.deck-panel.is-over .dock-body { box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 0 2px var(--neon), 0 0 34px -4px color-mix(in srgb, var(--neon) 70%, transparent); }
.dock-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border-bottom: 1px solid #1d212b; cursor: ns-resize; touch-action: none; user-select: none; }
.dock-gap { flex: 1; }
/* the deck's count (v0.92, user: here, not on the Ranged / Melee tabs): cards / size; gold when full, violet with Wild */
.dock-count { display: inline-flex; align-items: baseline; gap: 1px; margin-left: 6px; padding-left: 12px; box-shadow: -1px 0 0 #232835;
  font: 500 12px/1 var(--f-ui, inherit); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dock-count b { font: 400 17px/1 var(--f-metal); color: var(--chrome-hi); }
.dock-count small { margin-left: 5px; font: 600 10px/1 var(--f-ui, inherit); letter-spacing: .14em; text-transform: uppercase; }
.dock-count.is-full b { color: var(--logo-gold); }
.dock-count.is-wild b, .dock-count.is-wild > span { color: var(--wild-hi); }
.dock-count.wild-burst { animation: wild-pop .6s cubic-bezier(.2, .9, .3, 1.4); }
@media (prefers-reduced-motion: reduce) { .dock-count.wild-burst { animation: none; } }
.menu .dock-btn { flex: none; height: 30px; padding: 0 14px; border: 0; border-radius: 0; clip-path: var(--chip); cursor: pointer;
  font: 400 12px/1 var(--f-metal); letter-spacing: .12em; text-transform: uppercase; color: var(--chrome);
  background: var(--grain), linear-gradient(180deg, #172440, var(--slab)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon) 55%, transparent); }
.menu .dock-btn.is-auto { padding: 0 20px; color: var(--chrome-hi); background: var(--grain), linear-gradient(180deg, var(--logo-sky-hi), var(--logo-sky) 26%, var(--logo-blue) 52%, #10307f 80%, #0c2566);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 var(--logo-orange); }
.menu .dock-btn:hover:not(:disabled) { filter: brightness(1.15); color: #fff; }
.menu .dock-btn:disabled { opacity: .4; cursor: default; }
.menu .dock-grip { flex: none; display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 1.5px solid #2c313c; border-radius: 8px; background: #121522; color: var(--chrome); cursor: pointer; }
.menu .dock-grip:hover { border-color: var(--logo-sky); color: #fff; }
.dock-grip svg { transition: transform .2s ease; }
.builder.dock-open .dock-grip svg { transform: rotate(180deg); }
.deck-warn { min-width: 0; margin: 0; padding: 4px 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: #ffd3d8; border-radius: 7px;
  background: color-mix(in srgb, var(--bad) 14%, #0b0c12); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 70%, transparent); }
.deck-warn[hidden] { display: none; }
/* its cards: one row (scrolls sideways); opened, rows of them */
.deck-list { list-style: none; margin: 0; display: flex; gap: 10px; padding: 12px 12px 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  height: calc(var(--dock-row) + var(--dock-x)); box-sizing: border-box; }
.dock-anim .deck-list { transition: height .28s cubic-bezier(.2, .8, .3, 1); }
.builder.dock-open .deck-list { flex-wrap: wrap; align-content: flex-start; overflow-x: hidden; overflow-y: auto; }
.deck-list li { flex: none; width: var(--dock-card); }
.builder.dock-open .deck-list li { width: var(--dock-big); }   /* (opened: the cards a size up, to read them) */
.deck-panel.is-off .deck-list { opacity: .45; }
.deck-empty { display: grid; place-items: center; margin: 0; height: calc(var(--dock-row) + var(--dock-x)); box-sizing: border-box; padding: 10px; text-align: center; font-size: 12px; color: var(--muted); }
.deck-empty[hidden] { display: none; }
.deck-panel:has(.deck-empty:not([hidden])) .deck-list { display: none; }
/* a card in the deck: the card small, its copies on it; hovered, a − (a click takes one out) */
.drow { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; background: none; cursor: grab; touch-action: none; user-select: none;
  transition: transform .14s ease; }
.drow:hover { transform: translateY(-3px); }
.drow:focus-visible { outline: 2px solid var(--neon-hi); outline-offset: 3px; }
/* v0.92 (user: "square, no need to show card details"): its picture in a square, the rarity's metal round it, the name along the
   foot, the copies in a red badge (the cards' counter) in the corner, the tier in gold under it */
.drow { aspect-ratio: 1; box-sizing: border-box; padding: 2.5px; border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 40%, #000), color-mix(in srgb, var(--rc) 30%, #fff) 30%, var(--rc) 50%, color-mix(in srgb, var(--rc) 45%, #000));
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }
.dt-art { position: absolute; inset: 2.5px; overflow: hidden; border-radius: 9.5px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 45%, #151824), #0b0c12 75%); }
.dt-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5, 6, 10, .92)); }
.dt-pic { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-art > svg { position: absolute; inset: 14%; width: 72%; height: 72%; }
.dt-name { position: absolute; left: 7px; right: 7px; bottom: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left;
  font: 400 10px/1.1 var(--f-metal); letter-spacing: .04em; text-transform: uppercase; color: var(--chrome-hi); text-shadow: 0 1px 3px #000; }
.dt-n { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 22px; height: 22px; box-sizing: border-box; padding: 0 6px; border-radius: 11px;
  font: 700 12px/1 var(--f-num, inherit); color: #fff; background: linear-gradient(180deg, #ff4d5e, #d9142b); box-shadow: 0 0 0 2px #0b0c12; }
.dt-tier { position: absolute; top: 5px; left: 5px; padding: 2px 4px 1px; border-radius: 4px; font: 700 9px/1.1 var(--f-num, inherit); letter-spacing: .06em; color: #1b1203;
  background: linear-gradient(180deg, #fff1c2, var(--logo-gold) 55%, #c98a12); }
.deck-list { padding-top: 14px; }
.builder.dock-open .dt-name { font-size: 12px; }
.drow-out { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; opacity: 0; transition: opacity .12s ease;
  font: 700 34px/1 var(--f-num, inherit); color: #fff; background: rgba(10, 11, 16, .55); pointer-events: none; }
.drow:hover .drow-out { opacity: 1; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 200; width: 96px; margin: -60px 0 0 -48px; pointer-events: none; rotate: -4deg; cursor: grabbing;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .6)); }
/* a card's tier (v0.62), after its name: gold Roman numerals (the archive and the overview use it) */
.drow-tier { display: inline-block; margin-left: 4px; padding: 1px 4px 0; border-radius: 4px; vertical-align: 1px;
  font: 700 9px/1.2 var(--f-num, inherit); letter-spacing: .06em; color: #1b1203; background: linear-gradient(180deg, #fff1c2, var(--logo-gold) 55%, #c98a12); text-shadow: none; }
/* the decks' tabs (ranged / melee): a coin with R or M (the cards' badge), the name and the count; a red dot when there's a
   problem. R is the logo's sky blue, M its orange, as on the cards. */
.deck-tabs { display: flex; gap: 6px; }
.deck-tab {
  --tc: var(--logo-sky);
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; box-sizing: border-box;
  padding: 0 12px 0 5px; border: 1.5px solid transparent; border-radius: 10px; text-align: left;
  background: linear-gradient(180deg, #151824, #0c0d13) padding-box, linear-gradient(180deg, #2c313c, #1a1d25) border-box;
  font: 400 12px var(--f-metal); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.deck-tab.is-melee { --tc: var(--logo-orange); }
.deck-tab-kind {
  display: grid; place-items: center; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%;
  border: 2.5px solid transparent; background: radial-gradient(circle at 35% 30%, #2c3040, #0b0c12 72%) padding-box, var(--steel) border-box;
  font: 400 12px/1 var(--f-metal); letter-spacing: 0; color: var(--tc); box-shadow: 0 2px 5px rgba(0, 0, 0, .55);
}
.deck-tab[aria-selected="true"] { color: var(--chrome-hi);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 20%, #151824), #0c0d13) padding-box, linear-gradient(180deg, var(--tc), color-mix(in srgb, var(--tc) 40%, #000)) border-box;
  box-shadow: 0 0 16px -6px var(--tc); }
.deck-tab:hover:not([aria-selected="true"]) { color: var(--text); }
.deck-tab.is-bad::after { content: ""; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(180deg, #ff4d5e, #d9142b); box-shadow: 0 0 0 2px #0b0c12; }
.deck-tab.is-wild .deck-tab-kind { box-shadow: 0 2px 5px rgba(0, 0, 0, .55), 0 0 0 1.5px var(--wild), 0 0 10px -2px var(--wild); }
.deck-tab.is-off { opacity: .55; }
/* this deck's switch: plays in runs, or sits out (keeps its cards) */
.deck-use {
  --tc: var(--logo-sky);
  flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font: 400 10px var(--f-metal); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.deck-use.is-melee { --tc: var(--logo-orange); }
.deck-use-knob { position: relative; flex: none; width: 30px; height: 16px; border-radius: 8px; background: #1b1e28; box-shadow: inset 0 0 0 1px #2c313c; transition: background .15s; }
.deck-use-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.deck-use[aria-checked="true"] { color: var(--tc); }
.deck-use[aria-checked="true"] .deck-use-knob { background: color-mix(in srgb, var(--tc) 40%, #0b0c12); box-shadow: inset 0 0 0 1px var(--tc); }
.deck-use[aria-checked="true"] .deck-use-knob::after { transform: translateX(14px); background: #fff; box-shadow: 0 0 6px var(--tc); }
.deck-use:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .deck-use-knob, .deck-use-knob::after { transition: none; } }
/* the Wild pill (v0.63; v0.82; v0.91): locked, Activate Wild (glowing, once a deck is full), or on (✕ turns it off) */
.wild-row { display: flex; align-items: center; gap: 4px; }
.wild-pill { display: inline-flex; align-items: center; gap: 7px; height: 38px; box-sizing: border-box; padding: 0 12px 0 10px; border-radius: 10px;
  font: 400 12px var(--f-metal); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  background: linear-gradient(180deg, #151824, #0c0d13); box-shadow: inset 0 0 0 1.5px #2c313c; }
.wild-pill svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.wild-pill b { font-weight: 400; white-space: nowrap; }
.wild-pill small { font: 600 10px var(--f-num); letter-spacing: .02em; text-transform: none; white-space: nowrap; opacity: .8; }
.wild-row.is-locked { cursor: help; }
.menu .wild-go { border: 0; cursor: pointer; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .5);
  background: linear-gradient(180deg, color-mix(in srgb, var(--wild) 80%, #fff), color-mix(in srgb, var(--wild) 55%, #2a1240));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wild-hi) 60%, transparent), 0 0 16px -2px var(--wild); animation: wild-pulse 1.6s ease-in-out infinite; }
.wild-go svg { fill: var(--wild-hi); filter: drop-shadow(0 0 4px var(--wild-hi)); }
.wild-go small { color: var(--wild-hi); opacity: 1; }
.menu .wild-go:hover { filter: brightness(1.15); }
.wild-pill.is-on { color: var(--wild-hi); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wild) 70%, transparent), 0 0 14px -6px var(--wild); }
.wild-pill.is-on small { color: var(--muted); }
.menu .wild-off { width: 30px; height: 30px; padding: 0; border: 1.5px solid #2c313c; border-radius: 8px; background: #121522; color: var(--muted); font-size: 12px; cursor: pointer; }
.menu .wild-off:hover { border-color: #ff5a5a; color: #ff8a8a; }
@keyframes wild-pulse { 50% { box-shadow: inset 0 0 0 1.5px var(--wild-hi), 0 0 26px -2px var(--wild); } }
/* a full deck's tab (31/31, Wild not on it yet) */
.deck-tab.is-ready { animation: wild-tab 1.6s ease-in-out infinite; }
.deck-tab.is-ready .deck-tab-kind { box-shadow: 0 2px 5px rgba(0, 0, 0, .55), 0 0 0 1.5px var(--wild), 0 0 12px -1px var(--wild); }
@keyframes wild-tab { 0%, 100% { box-shadow: 0 0 10px -4px var(--wild), inset 0 0 0 1.5px color-mix(in srgb, var(--wild) 55%, transparent); }
  50% { box-shadow: 0 0 22px 0 var(--wild), inset 0 0 0 1.5px var(--wild); } }
/* Wild comes on: a violet ring bursts off the tab and its count pops */
.deck-tab.wild-burst::before { content: ""; position: absolute; inset: -2px; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--wild-hi), 0 0 24px 6px var(--wild); animation: wild-ring .8s ease-out forwards; }
@keyframes wild-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.18, 1.6); } }
@keyframes wild-pop { 0% { transform: scale(1); color: var(--wild-hi); } 40% { transform: scale(1.35); color: var(--wild-hi); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .deck-tab.is-ready, .wild-go, .deck-tab.wild-burst::before { animation: none; } }
/* the notes (v0.91, menus.js loToast; v0.92, user: "make the prompt less disruptive and subtler"): a small dark pill over the
   cards, top middle, a dot in its colour, the title, a dim line after it, and a small button when there's something to do.
   They fade in and out without a bounce, and you can click through round them. */
.lo-toasts { position: absolute; z-index: 40; top: 60px; left: 50%; translate: -50% 0; width: max-content; max-width: calc(100% - 32px); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.lo-toast { --tc: var(--logo-sky);
  pointer-events: auto; display: flex; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box; min-height: 30px;
  padding: 5px 14px 5px 12px; border-radius: 999px; cursor: default; font-size: 12.5px; line-height: 1.3;
  background: rgba(9, 10, 16, .86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 18px rgba(0, 0, 0, .35);
  animation: toast-in .2s ease-out both; }
.lo-toast::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 6px var(--tc); }
.lo-toast b { flex: none; font-weight: 600; color: var(--text); white-space: nowrap; }
.lo-toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.lo-toast:has(button) { padding-right: 5px; }
.lo-toast button { flex: none; margin-left: 4px; padding: 5px 11px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1; color: var(--tc);
  background: color-mix(in srgb, var(--tc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 40%, transparent); }
.lo-toast button:hover, .lo-toast button:focus-visible { background: color-mix(in srgb, var(--tc) 26%, transparent); outline: none; }
.lo-toast.is-bad { --tc: var(--bad); }
.lo-toast.is-wild { --tc: var(--wild); }
.lo-toast.is-melee { --tc: var(--logo-orange); }
.lo-toast.is-both { --tc: var(--logo-gold); }
.lo-toast.is-out { animation: toast-out .2s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes toast-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lo-toast, .lo-toast.is-out { animation-duration: .01s; } }
/* your cards: each card, the − count + under it */
.ccard {
  position: relative; display: block; padding: 0; border: 0; border-radius: 12px; background: none; box-shadow: none;
  color: var(--text); cursor: grab; touch-action: none; user-select: none;
  transition: transform .14s ease, filter .14s ease;
}
/* v0.74 (user): the counter under each card, with − and + to take a copy out of / put one in the deck */
.cslot { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* v0.92 (user: "improve colors and indicators", menus.js stepHtml): one dark pill, − and + at its ends, the count in the middle. In
   the deck it takes the deck's colour (--kc: sky ranged, orange melee) and a bar along its foot shows how many of your copies are
   in (--f). − goes red on hover, + the deck's colour; a + that can't (deck full, rarity limit, none left) is faint, its reason its title. */
.cstep { --kc: var(--logo-sky); position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: stretch; height: 34px; overflow: hidden;
  border-radius: 10px; background: #0c0e15; box-shadow: inset 0 0 0 1.5px #232835; transition: box-shadow .15s ease, background .15s ease; }
.cstep::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--f, 0) * 100%); background: var(--kc); box-shadow: 0 0 8px var(--kc); transition: width .2s ease; }
.cstep.is-in { background: linear-gradient(180deg, color-mix(in srgb, var(--kc) 16%, #0c0e15), #0c0e15); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--kc) 70%, transparent), 0 0 14px -6px var(--kc); }
.cstep-btn { padding: 0; border: 0; border-radius: 0; background: none; color: var(--chrome); font: 700 19px/1 var(--f-num, inherit); cursor: pointer;
  transition: background .12s ease, color .12s ease; }
.cstep-btn.is-minus { box-shadow: 1px 0 0 #232835; }
.cstep-btn.is-plus { box-shadow: -1px 0 0 #232835; }
.cstep.is-in .cstep-btn.is-plus { color: var(--kc); }
.cstep-btn.is-minus:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 26%, transparent); color: #fff; }
.cstep-btn.is-plus:hover:not(:disabled) { background: color-mix(in srgb, var(--kc) 30%, transparent); color: #fff; }
.cstep-btn:active:not(:disabled) { background: color-mix(in srgb, var(--kc) 45%, transparent); }
.cstep-btn:disabled { color: #3b4150; cursor: default; }
.cstep-btn:focus-visible { outline: 2px solid var(--neon-hi); outline-offset: -3px; }
.cstep-n { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding-top: 7px; color: #5d6474; font-variant-numeric: tabular-nums; }
.cstep-n b { font: 700 17px/1 var(--f-num, inherit); color: #6b7282; }
.cstep.is-in .cstep-n b { color: #fff; text-shadow: 0 0 10px color-mix(in srgb, var(--kc) 70%, transparent); }
.cstep-n small { font: 600 11px/1 var(--f-num, inherit); }
.cstep.is-in .cstep-n small { color: color-mix(in srgb, var(--kc) 55%, #9aa1b0); }
.cstep.is-all .cstep-n small::after { content: " all in"; font: 700 9px var(--f-ui, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--kc); }
.ccard:hover:not([aria-disabled="true"]) { transform: translateY(-4px); }
.ccard:hover:not([aria-disabled="true"]) .cf-frame { box-shadow: 0 12px 22px rgba(0, 0, 0, .5); }   /* (v0.64, user: no coloured glow on hover) */
.ccard:focus-visible { outline: 2px solid var(--neon-hi); outline-offset: 3px; }
.ccard[aria-disabled="true"] { cursor: default; }
.ccard.is-used { filter: grayscale(.75) brightness(.55); }
.ccard { cursor: pointer; }
/* v0.62: enough spare copies to go up a tier: a small gold arrow on the card's bottom right */
.ccard.can-up::after { content: "▲"; position: absolute; z-index: 6; right: 6px; bottom: 16px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 9px; color: #1b1203; background: linear-gradient(180deg, #fff1c2, var(--logo-gold) 55%, #c98a12); box-shadow: 0 0 0 2px #0b0c12, 0 0 12px -2px var(--logo-gold); }
.ccard.is-used.can-up::after { filter: grayscale(0) brightness(1.8); }
.builder.is-adding, .builder.is-removing, .builder.is-adding *, .builder.is-removing * { cursor: grabbing !important; }
.builder.is-removing .coll-panel { outline: 2px dashed color-mix(in srgb, var(--bad) 55%, transparent); outline-offset: 4px; }
/* a short window: the cards and the dock smaller */
@media (max-height: 760px) { .builder { --dock-card: 74px; --dock-big: 100px; } .coll-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } }
@media (max-width: 900px) { .dock-tabs { gap: 6px 12px; } .dock-label { display: none; } .cf-total { display: none; } }
@media (max-width: 1360px) { .cf-total { display: none; } }
@media (prefers-reduced-motion: reduce) { .ccard, .drow, .deck-panel { transition: none; } .ccard:hover:not([aria-disabled="true"]), .drow:hover { transform: none; } }

/* ---------- co-op (v0.45, user) ---------- */
/* The CO-OP screen: a login card. Name on top, then Host on one side and Join on the other. */
.co-card {
  width: min(520px, 100%); box-sizing: border-box; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px; align-items: stretch;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-align: left;
}
.co-field { display: flex; flex-direction: column; gap: 6px; }
.co-field span, .co-label { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.co-field input {
  font: 600 16px var(--f-ui); letter-spacing: .04em; color: var(--text);
  background: var(--floor); border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 12px; outline: none; min-width: 0;
}
.co-field input:focus-visible { border-color: var(--neon); }
#co-key { text-transform: uppercase; font-family: var(--f-num); letter-spacing: .12em; }
.co-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .co-split { grid-template-columns: 1fr; } }
.co-half { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.co-half button { padding: 10px; border-radius: 8px; font-weight: 600; letter-spacing: .04em; }
.co-status:empty { display: none; }
.co-key { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; }
.co-key b { font: 700 30px var(--f-num); letter-spacing: .14em; color: var(--text); }
.co-key button { padding: 6px 12px; border-radius: 6px; font-size: 12px; }
.co-players, .coop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.co-players li, .coop-list li { display: flex; align-items: center; gap: 10px; }
.co-players li { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-weight: 600; }
/* a player's look: a dot in their colour, or their emoji */
.co-players i, .coop-list i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--pc); font-style: normal; }
.co-players i.has-emoji, .coop-list i.has-emoji {
  width: 22px; height: 22px; display: grid; place-items: center; background: none;   /* just the emoji (v0.46, user: cleaner) */
  font-size: 14px; line-height: 1;
}
.coop-list .cl-name, .co-pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.co-deck { display: flex; flex-wrap: wrap; gap: 3px 8px; font: 500 11px var(--f-ui); color: var(--muted); }
.co-deck span { white-space: nowrap; }
.co-deck span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 2px; background: var(--c); vertical-align: 1px; }
.co-rd { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.co-players li.is-ready { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.co-players li.is-ready .co-rd { color: var(--ok); }
/* your look: colour swatches, then the emojis */
.co-look { display: flex; flex-direction: column; gap: 8px; }
.co-hint { margin-left: 6px; font-weight: 500; letter-spacing: .04em; text-transform: none; }
.co-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.co-sw {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid var(--card);
  box-shadow: 0 0 0 1.5px var(--line); cursor: pointer;
}
.co-sw.is-mine { box-shadow: 0 0 0 2px var(--text); }
.co-sw[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--text), 0 0 10px var(--sw); }
.co-sw:disabled { opacity: .22; cursor: not-allowed; }
.co-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; }
.co-em {
  height: 34px; padding: 0; border-radius: 8px; font-size: 19px; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  background: var(--floor); border: 1.5px solid transparent; cursor: pointer;
}
.co-em:hover { border-color: var(--line); }
.co-em[aria-pressed="true"] { border-color: var(--text); background: color-mix(in srgb, var(--text) 12%, var(--floor)); }
.co-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.co-actions > button:not(.start) { padding: 10px 16px; border-radius: 8px; font-weight: 600; letter-spacing: .04em; }
.menu #co-ready.is-on {                                  /* ready: the same chrome button, in green */
  background: var(--grain), linear-gradient(180deg, #c4f7d8, #8ce0ae 30%, var(--ok) 50%, #3f9a66 52%, #235f3d);
  text-shadow: 0 2px 0 rgba(0, 40, 20, .8);
}
.co-wait { margin: 0; text-align: center; }
.co-wait:empty { display: none; }
.cl-ping { font: 600 12px var(--f-num); color: var(--muted); font-variant-numeric: tabular-nums; }
.cl-ping.is-good { color: var(--ok); } .cl-ping.is-ok { color: var(--r-legendary); } .cl-ping.is-bad { color: var(--bad); }
.co-error { margin: 0; color: var(--bad); font-weight: 600; }

/* In a co-op run: who's playing, with pings (top left, under the counters) */
.coop-list {
  position: fixed; z-index: 3; left: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 48px);   /* bottom left, clear of the stats and the deck */
  width: 180px; padding: 8px 10px; gap: 4px;
  background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; font-weight: 600; pointer-events: none;
}
.coop-list li.is-down { opacity: .55; }
.coop-list li.is-down .cl-ping { color: var(--bad); }
.coop-list .cl-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.coop-list .cl-hp { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.coop-list .cl-hp span { position: absolute; inset: 0; transform-origin: left; transition: transform .2s; }
.coop-list .cl-warn { color: var(--bad); font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .coop-list .cl-hp span { transition: none; } }

/* Level-up picks in co-op: a bar at the top, the fight carries on underneath */
.coop-pick {
  position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 44px);
  width: min(560px, calc(100% - 24px)); box-sizing: border-box; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
  background: color-mix(in srgb, var(--card) 94%, transparent); border: 1.5px solid var(--xp); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.cp-head { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.cp-head b { color: var(--xp); letter-spacing: .08em; }
.cp-keys { color: var(--muted); font-family: var(--f-num); font-size: 11px; }
#cp-time { margin-left: auto; font-family: var(--f-num); color: var(--muted); }
.cp-track { position: relative; display: block; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; flex: 1; }
.cp-bar { position: absolute; inset: 0; background: var(--xp); transform-origin: left; }
.cp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cp-cards button {
  width: 100%; height: 100%; box-sizing: border-box; padding: 8px 8px 7px; border-radius: 8px;
  display: grid; gap: 2px; justify-items: start; text-align: left;
  background: var(--floor); border: 1.5px solid var(--rc); color: var(--text);
}
.cp-cards button:hover { filter: brightness(1.15); }
.cp-key { font: 700 10px var(--f-num); color: var(--muted); }
.cp-name { font-size: 13px; font-weight: 700; }
.cp-gain { font-size: 11px; color: var(--muted); line-height: 1.25; }
.cp-rar { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rc); }

/* Reviving on a touch screen (v0.46): hold this button; it fills as the revive does. The keyboard holds E. */
.rv-btn {
  position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 170px);
  padding: 12px 20px; border-radius: 999px; font: 700 13px var(--f-ui); letter-spacing: .06em; color: var(--text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--hp) 55%, var(--card)) calc(var(--p, 0) * 100%), var(--card) 0);
  border: 2px solid var(--hp); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); touch-action: none; user-select: none; -webkit-user-select: none;
}
.rv-btn b { color: var(--hp); }
/* DEFLECT's message (v0.48): its points in saber blue */
.relic-art.is-deflect ~ .relic-facts b, .relic-art.is-deflect ~ .relic-facts kbd { color: var(--saber); }
.relic-art.is-deflect ~ .relic-facts li::before { background: var(--saber); }

/* The end of a run (v0.52, user: post-game stats, then Retry / Back): a stat grid, the three bosses, top weapons */
#defeat { background: var(--scrim-deep); }
#defeat:focus { outline: none; }
.over { gap: 14px; width: min(440px, 100%); }
.over h2 { margin: -6px 0 0; font-size: 30px; letter-spacing: .06em; text-transform: uppercase; color: var(--bad); }
.over-stats { margin: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* MAKORA beaten (v0.69): the same screen in its gold, over the black screen and its wheel */
#d-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
#d-eyebrow .run-badge { font-size: 15px; }
.pause.is-clear { background: rgb(0 0 0 / .55); }
.is-clear .over h2 { color: var(--wheel); text-shadow: 0 0 18px color-mix(in srgb, var(--wheel) 45%, transparent); }
.is-clear .over-stats div { border-color: color-mix(in srgb, var(--wheel) 35%, var(--line)); }
.over-stats div { padding: 10px 8px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 4px; }
.over-stats dt { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.over-stats dd { margin: 0; font: 700 18px var(--f-num); color: var(--text); }
@media (max-width: 420px) { .over-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.over-bosses { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.over-bosses li { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.over-bosses i { position: relative; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--line); }
.over-bosses li.is-at { color: var(--c); }
.over-bosses li.is-at i { border-color: var(--c); }
.over-bosses li.is-done { color: var(--c); }
.over-bosses li.is-done i { border-color: var(--c); background: var(--c); }
.over-bosses li.is-done i::after { content: ""; position: absolute; left: 2.5px; top: 0; width: 2.5px; height: 5px; border: solid var(--floor); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.over-weapons { width: 100%; display: grid; gap: 8px; }
.over-weapons-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.over-weapons-list li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 6px; overflow: hidden; font-size: 13px; font-weight: 600; color: var(--text); background: var(--card); }
.over-weapons-list li i { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--w) * 100%); background: var(--c); }
.over-weapons-list li b { font: 700 13px var(--f-num); color: var(--c); }

/* v1.04 (user): Exit to title asks first (arena.js askQuit) */
.pause-ask .sub { text-align: center; margin-bottom: 2px; }
.pause-ask .start { padding-inline: 10px; white-space: nowrap; }
/* v1.04 (user: "cards and ability info, minimal"); v1.05 (user: "buttons on the left, a preview of your cards on the right,
   scrollable, like other players' loadouts"): the buttons and your relics on the left, the run's decks as card faces on the
   right (hud.js renderPauseInfo; the profile's .pf-deck / .pf-grid / .pf-cf) */
.pause-split { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; gap: 18px 40px; width: min(1180px, 100%); text-align: left; }
.pause-split:has(> .pause-cards[hidden]) { grid-template-columns: 250px; width: auto; }
.pause-left { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding-top: 8px; }
.pause-left h2 { text-align: center; }
.pause-left .nav { width: 100%; }
.pause-cards { --pf-cw: 104px; display: grid; gap: 20px; max-height: calc(100dvh - 120px); overflow-y: auto; padding: 14px 16px 22px; border-radius: 12px;
  background: color-mix(in srgb, var(--floor) 72%, transparent); border: 1px solid var(--line); scrollbar-width: thin; }
.pause-cards[hidden] { display: none; }
.pause-cards .pf-grid { grid-template-columns: repeat(auto-fill, var(--pf-cw)); gap: 12px 10px; justify-content: start; }
.pause-cards .pf-deck-k.is-w { color: var(--r-legendary); }
.pause-cards .pf-cf:hover { transform: translateY(-4px) scale(1.3); }
.pause-cards .pf-cf { cursor: pointer; border-radius: 8px; }
.pause-cards .pf-cf:focus-visible { outline: 2px solid var(--neon-hi); outline-offset: 3px; }
/* v1.06 (user: "on pause show also stats"): a grid of every stat, upgraded ones lit in their best pick's rarity */
.ps-stats { display: grid; gap: 8px; }
.ps-grid { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 6px; }
.ps-grid div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 9px; border-radius: 6px; background: color-mix(in srgb, var(--card) 94%, transparent); border-left: 2px solid var(--line); }
.ps-grid dt { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ps-grid dd { margin: 0; font: 700 12px var(--f-num); color: var(--text); }
.ps-grid .is-up { border-left-color: var(--rc, var(--text)); }
.ps-grid .is-up dd { color: var(--rc, var(--text)); }
.ps-grid .is-max dt::after { content: ' · max'; color: var(--wheel); }
html.is-touch .ps-stats { display: none; }   /* (a phone shows your stats panel under the pause screen already) */
/* v1.06 (user: "you can click on the cards"): a card from the pause screen, big (hud.js openPauseCard) */
.pcard { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; padding: 16px; background: rgba(2, 2, 4, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pcard[hidden] { display: none; }
.pcard-box { display: grid; grid-template-columns: 230px minmax(0, 320px); gap: 22px; align-items: start; max-height: calc(100dvh - 32px); overflow: auto; padding: 20px;
  border: 3px solid transparent; border-radius: 16px; text-align: left;
  background: linear-gradient(180deg, #171a26, #0b0c12 55%, #10121a) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--rc) 45%, #000), color-mix(in srgb, var(--rc) 30%, #fff) 25%, var(--rc) 45%, color-mix(in srgb, var(--rc) 45%, #000) 70%, var(--rc)) border-box;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 60px -20px var(--c); }
.pcard-face { container-type: inline-size; }
.pcard-text { display: grid; gap: 10px; }
.pc-eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pc-name { margin: 0; font: 400 26px/1.1 var(--f-metal); letter-spacing: .04em; color: var(--text); }
.pc-desc { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text); }
.pc-stats { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.pc-stats div { padding: 6px 9px; border-radius: 6px; background: var(--card); border: 1px solid var(--line); }
.pc-stats dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pc-stats dd { margin: 2px 0 0; font: 700 15px var(--f-num); color: var(--text); }
.pc-stats em { font-style: normal; color: var(--good, #4ade80); font-size: 12px; }
.pc-combos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pc-combos li { display: grid; gap: 2px; padding: 7px 10px; border-radius: 6px; background: color-mix(in srgb, var(--c) 10%, var(--card)); }
.pc-combos b { font-size: 12px; color: var(--c); }
.pc-combos span { font-size: 12px; line-height: 1.35; color: var(--muted); }
.pc-close { justify-self: start; }
@media (max-width: 620px) { .pcard-box { grid-template-columns: minmax(0, 1fr); } .pcard-face { width: min(200px, 60vw); justify-self: center; } }
.pinfo { display: grid; gap: 6px; text-align: left; }
.pinfo[hidden] { display: none; }
.pinfo .eyebrow { margin-top: 2px; font-size: 11px; color: var(--muted); }
.pi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.pi-list > li { display: grid; grid-template-columns: 16px auto auto; align-items: center; gap: 2px 8px; padding: 6px 9px; border-radius: 6px; background: color-mix(in srgb, var(--card) 94%, transparent); font-size: 12px; }
.pi-list b { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.pi-does { grid-column: 1 / -1; min-width: 0; font-size: 11px; color: var(--muted); line-height: 1.3; }
.pi-rel b { color: var(--relic); }
.pi-rel.is-deflect b { color: var(--saber); }
.pi-ico { color: var(--relic); line-height: 0; }
.pi-rel.is-deflect .pi-ico { color: var(--saber); }
.pi-ico svg { width: 16px; height: 16px; }
.pinfo kbd { justify-self: start; font: 600 10px var(--f-num); padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
.pi-aug { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
.pi-tag { font: 700 10px var(--f-num); letter-spacing: .06em; color: var(--ac); border: 1px solid var(--ac); border-radius: 3px; padding: 0 4px; }
@media (max-width: 760px) {
  .pause-split { grid-template-columns: minmax(0, 1fr); width: min(460px, 100%); }
  .pause-cards { --pf-cw: 78px; max-height: 42dvh; }
}

/* v1.04 (user: "switch up stats, only once per run"): the respec on the Run cleared screen (upgrades.js) */
#defeat.is-respec :is(.over-stats, .over-bosses, .over-weapons, #d-gold, .over > .nav) { display: none; }
.respec { width: 100%; display: grid; gap: 8px; }
.respec[hidden] { display: none; }
.rs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; text-align: left; }
.rs-list li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; min-height: 30px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); }
.rs-name { font-size: 11px; font-weight: 600; color: var(--muted); }
.rs-val { font: 700 12px var(--f-num); color: var(--text); }
.rs-picks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; }
.rs-pick { width: 18px; height: 18px; padding: 0; border-radius: 4px; font: 700 10px/1 var(--f-num); color: var(--floor) !important; background: var(--rc); border: 1px solid var(--rc); cursor: pointer; }
.rs-pick:hover { filter: brightness(1.2); }
.rs-pick[aria-pressed="true"] { outline: 2px solid #fff; outline-offset: 1px; transform: translateY(-2px); }
.rs-pick.is-moved { box-shadow: 0 0 0 1px var(--floor), 0 0 6px var(--rc); }
.rs-to { display: none; width: 18px; height: 18px; padding: 0; border-radius: 4px; font: 700 13px/1 var(--f-num); color: var(--wheel) !important; background: none; border: 1px dashed var(--wheel); cursor: pointer; }
.respec.is-holding .rs-list li.can-take { border-color: var(--wheel); cursor: pointer; }
.respec.is-holding .rs-list li.can-take .rs-to { display: block; }
.respec.is-holding .rs-list li.is-from { border-color: #fff; }
.respec.is-holding .rs-list li:not(.can-take, .is-from) { opacity: .45; }
.rs-nav { width: 100%; flex-direction: row; justify-content: center; }
.rs-nav button { width: auto; min-width: 140px; }
#btn-respec:disabled { opacity: .5; }
@media (max-width: 420px) { .rs-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rs-pick[aria-pressed="true"] { transform: none; } }

/* v0.56 (user): a bought pack zooms in from the store (menus.js showBoughtPack): no fade for that screen, the pack
   does the moving */
.screen.is-zoom:not([hidden]) { animation: none; }
/* Skip all: how many of each card */
.rv-n { position: absolute; z-index: 4; right: -8px; top: -10px; padding: 2px 9px; border-radius: 999px; font: 700 15px var(--f-num); color: var(--floor); background: var(--rc); box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
/* Start's loadout overview (v0.56, user): both decks side by side, a row per card, coming up one after another */
.ov { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; width: min(780px, calc(100vw - 32px)); text-align: left; }
.ov-deck { min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--scrim); }
.ov-deck h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px; font: 400 16px var(--f-metal); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.ov-deck h3 span { font: 600 12px var(--f-num); letter-spacing: .06em; color: var(--muted); }
.ov-deck.is-off { opacity: .5; }
.ov-deck ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ov-deck li { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name n" "tags n";
  align-items: center; column-gap: 10px; row-gap: 2px; min-height: 52px;
  padding: 8px 14px 8px 14px; border-radius: 8px; border-left: 3px solid var(--rc); background: color-mix(in srgb, var(--c) 9%, #0b0c12); }
/* the card's art (v0.66): the right side of the row, fading into it leftward; the name and count sit over it */
.ov-art { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 64%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.ov-pic { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; opacity: .78; transition: opacity .2s, transform .35s ease-out; }
.ov-glyph { position: absolute; right: 18%; top: 50%; width: 64px; height: 64px; transform: translateY(-50%) rotate(-12deg); color: var(--c); opacity: .3; }
.ov-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, rgb(8 9 14 / .55) 100%); }
.ov-deck li:has(.ov-tags:empty) { grid-template-areas: "name n"; }   /* (no combo line: the name sits in the middle) */
.ov-deck li:hover .ov-pic { opacity: .95; transform: scale(1.05); }
.ov-name, .ov-tags { text-shadow: 0 1px 3px rgb(0 0 0 / .9), 0 0 10px rgb(0 0 0 / .6); }
.ov-deck li > b { text-shadow: 0 1px 4px rgb(0 0 0 / .95); }
.ov-name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 15px; color: var(--c); }
.ov-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 2px 10px; font: 600 10px var(--f-num); letter-spacing: .04em; color: var(--muted); }
.ov-tags:empty { display: none; }
.ov-tags i { font-style: normal; }
.ov-tags .is-ult { color: var(--xp); }
.ov-deck li > b { grid-area: n; font: 700 17px var(--f-num); color: var(--text); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  #scr-overview:not([hidden]) .ov-deck { animation: ov-in .45s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(var(--i) * 90ms); }
  #scr-overview:not([hidden]) .ov-deck li { animation: ov-row .32s ease-out both; animation-delay: calc(var(--i) * 90ms + 140ms + var(--j) * 45ms); }
}
@keyframes ov-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }
/* v0.70 (user: "auto scale this"): menus.js fitOverview steps these up until the screen fits without scrolling */
#scr-overview:has(.ov[data-fit="1"], .ov[data-fit="2"], .ov[data-fit="3"], .ov[data-fit="4"]) { gap: 10px; padding-block: 14px; }
.ov[data-fit="1"] .ov-deck li, .ov[data-fit="2"] .ov-deck li, .ov[data-fit="3"] .ov-deck li { min-height: 38px; padding: 5px 12px; }
.ov[data-fit="1"] .ov-name { font-size: 14px; }
.ov[data-fit="2"] .ov-deck li, .ov[data-fit="3"] .ov-deck li, .ov[data-fit="4"] .ov-deck li { grid-template-areas: "name tags n"; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; min-height: 30px; padding-block: 3px; }
.ov[data-fit="2"] .ov-tags, .ov[data-fit="3"] .ov-tags, .ov[data-fit="4"] .ov-tags { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.ov[data-fit="2"] .ov-name, .ov[data-fit="3"] .ov-name { font-size: 13px; }
.ov[data-fit="2"] .ov-deck li > b, .ov[data-fit="3"] .ov-deck li > b { font-size: 14px; }
.ov[data-fit="2"] .ov-deck ol, .ov[data-fit="3"] .ov-deck ol { gap: 4px; }
.ov[data-fit="3"] .ov-deck ol, .ov[data-fit="4"] .ov-deck ol { grid-template-columns: 1fr 1fr; }
.ov[data-fit="3"], .ov[data-fit="4"] { width: min(1100px, calc(100vw - 32px)); }
.ov[data-fit="3"] .ov-tags, .ov[data-fit="4"] .ov-tags { display: none; }   /* (two columns: no room for the combos) */
.ov[data-fit="3"] .ov-deck li, .ov[data-fit="4"] .ov-deck li { grid-template-areas: "name n"; grid-template-columns: minmax(0, 1fr) auto; }
.ov[data-fit="4"] .ov-deck li { min-height: 24px; padding: 2px 10px; }
.ov[data-fit="4"] .ov-name { font-size: 12px; }
.ov[data-fit="4"] .ov-deck li > b { font-size: 12px; }
.ov[data-fit="4"] .ov-deck ol { gap: 3px; }
.ov[data-fit="4"] .ov-deck { padding: 10px 12px; }
@keyframes ov-row { from { opacity: 0; transform: translateX(-12px); } }

/* The Weapon Archive (v0.61, user; archive.js): the test mode's slabs again. Every weapon down the left, grouped by
   rarity, Common first; the chosen one's card, details and skills down the right; the arena between them, where it
   plays its skills on its own. Narrow screens stack the two panels at the top, the list a strip that scrolls across. */
.archive { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.archive > * { pointer-events: auto; }
body.in-archive .pr-controls { display: none !important; }
.arc-list, .arc-detail {
  position: fixed; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; clip-path: var(--chip);
  background: var(--grain), linear-gradient(180deg, rgba(40, 24, 42, .95), rgba(20, 12, 22, .95));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.arc-list { left: 16px; top: calc(env(safe-area-inset-top, 0px) + 16px); bottom: 16px; width: 250px; }
.arc-detail { right: 16px; top: calc(env(safe-area-inset-top, 0px) + 56px); max-height: calc(100% - 72px - env(safe-area-inset-top, 0px));   /* (under the settings gear) */ width: 330px; overflow-y: auto; scrollbar-width: thin; }
.arc-head { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.arc-title {
  margin: 0; font: 400 22px/1.1 var(--f-metal); letter-spacing: .06em; text-transform: uppercase; text-wrap: balance;
  background: linear-gradient(180deg, var(--chrome-hi) 12%, #9fd3ff 44%, var(--logo-blue) 51%, var(--logo-orange) 58%, var(--logo-gold) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 var(--neon-dark)) drop-shadow(0 0 10px color-mix(in srgb, var(--neon) 35%, transparent));
}
.arc-head .eyebrow { margin: 0; font: 400 12px var(--f-metal); letter-spacing: .18em; text-transform: uppercase; color: var(--neon-hi); }
.arc-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; scrollbar-width: thin; }
.arc-group { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 2px; padding: 0 2px 2px; border-bottom: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); }
.arc-group:first-child { margin-top: 0; }
.arc-group span { font: 700 11px var(--f-num); letter-spacing: .14em; text-transform: uppercase; color: var(--rc); }
.arc-group i { margin-left: auto; font: 700 11px var(--f-num); font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.arc-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 20px; align-items: center; gap: 9px; flex: none; min-height: 32px;
  padding: 3px 8px 3px 7px; border: 1px solid transparent; border-left: 3px solid var(--rc); border-radius: 6px; text-align: left;
  background: color-mix(in srgb, var(--rc) 7%, transparent);
}
.arc-row:hover { background: color-mix(in srgb, var(--rc) 14%, transparent); }
.arc-row[aria-selected="true"] { border-color: var(--c); border-left-color: var(--rc); background: color-mix(in srgb, var(--c) 18%, transparent); }
.arc-name { min-width: 0; font-size: 13px; font-weight: 700; color: var(--c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-keys { margin: 0; display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 2; }
.arc-keys kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; margin: 0 1px;
  font: 700 11px var(--f-num); color: var(--text); background: color-mix(in srgb, var(--text) 6%, #0b0c10); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; }
.arc-info { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
.arc-face { width: 112px; }
.arc-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.arc-text .type-name { font-size: 15px; line-height: 1.2; text-wrap: balance; }
.arc-text .type-stats { margin: 0; }
.arc-rar { margin: 0; display: flex; align-items: center; gap: 6px; font: 600 11px var(--f-num); color: var(--muted); }
.arc-rar span { padding: 2px 6px; border-radius: 3px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--rc); background: color-mix(in srgb, var(--rc) 18%, transparent); }
.arc-where { margin: 2px 0 0; font-size: 11px; font-weight: 700; color: var(--neon-hi); }
.arc-detail .prc-head small { font: 600 10px var(--f-num); letter-spacing: .06em; text-transform: none; color: var(--muted); margin-left: 6px; }
.arc-skills { display: flex; flex-direction: column; gap: 6px; }
.arc-skill {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 8px; padding: 9px 12px 11px 28px;
  border: 0; border-radius: 0; clip-path: var(--chip); text-align: left; color: var(--chrome-hi);
  background: var(--grain), linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, #1a1c24), #0c0d11);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent);
}
.arc-skill:hover { filter: brightness(1.15); }
.arc-skill[aria-pressed="true"] { background: var(--grain), linear-gradient(180deg, color-mix(in srgb, var(--c) 40%, #1a1c24), color-mix(in srgb, var(--c) 12%, #0c0d11)); box-shadow: inset 0 0 0 2px var(--c), inset 0 0 18px -4px var(--c); }
.arc-skill .up-key { position: absolute; top: 9px; left: 10px; font: 400 11px var(--f-metal); color: var(--muted); }
.arc-skill b { font: 400 13px var(--f-metal); letter-spacing: .06em; text-transform: uppercase; }
.arc-skill i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--c); text-transform: uppercase; min-width: 0; }
.arc-does { grid-column: 1 / -1; font-size: 11px; line-height: 1.45; color: var(--muted); }
.arc-skill[aria-pressed="true"] .arc-does { color: var(--text); }
.arc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--c) 15%, transparent); }
.arc-bar s { display: block; height: 100%; background: var(--c); transform: scaleX(0); transform-origin: left; }
.arc-skill:not([aria-pressed="true"]) .arc-bar s { visibility: hidden; }
.arc-skills .type-combo { margin: 0; }
.arc-detail .back { align-self: center; margin-top: 2px; }
@media (max-width: 899px) {
  .arc-list { left: 16px; right: 16px; bottom: auto; width: auto; padding: 10px 12px; gap: 6px; }
  .arc-head { flex-direction: row; justify-content: center; align-items: baseline; gap: 10px; padding-right: 36px; }   /* (clear of the settings gear) */
  .arc-title { font-size: 18px; }
  .arc-rows { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0 0 4px; }
  .arc-group { flex: none; flex-direction: column; justify-content: center; margin: 0 2px 0 6px; border: 0; border-left: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); padding-left: 6px; }
  .arc-group:first-child { margin-left: 0; }
  .arc-row { width: 150px; }
  .arc-keys { display: none; }
  .arc-detail { left: 16px; right: 16px; width: auto; top: calc(env(safe-area-inset-top, 0px) + 112px); max-height: 46%; padding: 10px 12px; }
  .arc-info { grid-template-columns: 72px minmax(0, 1fr); }
  .arc-face { width: 72px; }
}

/* A Random row's card (v0.61, user: "a random crossfade, any card there"): every weapon it could be, stacked, one
   showing at a time and fading into the next (menus.js randDeck); a tag above it says it's a random one (v0.69,
   user: it sat over the card's bottom). The stack tilts as one (its cards take its --rx / --ry); the tag stays still. */
.rand-deck { position: relative; display: grid; transform-style: preserve-3d; }
.rand-slot { grid-area: 1 / 1; opacity: 0; transition: opacity .7s ease; }
.rand-slot.is-on { opacity: 1; }
.pv-face .rand-deck .cf { --rx: inherit; --ry: inherit; --sx: inherit; }
.rand-tag {
  display: flex; width: max-content; max-width: 100%; margin: 0 auto 10px; align-items: center; gap: 5px;
  padding: 4px 10px 4px 7px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 700 10px var(--f-num); letter-spacing: .12em; text-transform: uppercase; color: #0b0c12;
  background: var(--rc); box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.rand-tag-glyph { width: 13px; height: 13px; }
@media (prefers-reduced-motion: reduce) { .rand-slot { transition: none; } }

/* The Archives' tabs (v0.61): Weapons and Enemies, under its title */
.arc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; margin-top: 6px; }
.arc-tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 6px; border: 0; border-radius: 0; clip-path: var(--chip);
  font: 400 12px var(--f-metal); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  background: var(--grain), linear-gradient(180deg, #221626, #120b14); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--neon) 30%, transparent);
}
.arc-tabs button b { font: 700 10px var(--f-num); letter-spacing: 0; color: var(--neon-hi); font-variant-numeric: tabular-nums; }
.arc-tabs button:hover { color: var(--text); }
.arc-tabs button[aria-selected="true"] { color: var(--chrome-hi); background: var(--grain), linear-gradient(180deg, #3a2240, #1c1020); box-shadow: inset 0 0 0 2px var(--neon), inset 0 0 14px -4px var(--neon); }
.arc-row.is-locked .arc-name { color: var(--muted); letter-spacing: .2em; }
.arc-row.is-locked .pv-row-art { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--muted); }
.arc-tag { font: 600 9px var(--f-num); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.archive[data-tab="enemies"] .arc-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
.arc-desc { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text); }
.arc-info:not(:has(.arc-face)) { grid-template-columns: minmax(0, 1fr); }
.arc-text .type-stats small { color: var(--muted); }
@media (max-width: 899px) {
  .arc-head { flex-wrap: wrap; }
  .arc-tabs { width: auto; margin-top: 0; }
  .arc-detail { top: calc(env(safe-area-inset-top, 0px) + 150px); }
}

/* ---------- a card, big (v0.62, user: "clicking on a card also view the card. below the card a 'upgrade' button") ---------- */
/* Over the Loadout: the card on the left with its upgrade bar (a notch per copy it takes) and Upgrade under it; on the
   right what it is, its stats at its tier, the five tiers (done, now, next) and Add / Take one out. */
.cview { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding-inline: 16px; overflow: auto;
  background: rgba(2, 2, 4, .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cview-box { display: grid; grid-template-columns: 250px minmax(0, 340px); gap: 24px; align-items: start; margin-block: 24px; padding: 22px;
  border: 3px solid transparent; border-radius: 18px; text-align: left;
  background: linear-gradient(180deg, #171a26, #0b0c12 55%, #10121a) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--rc) 45%, #000), color-mix(in srgb, var(--rc) 30%, #fff) 25%, var(--rc) 45%, color-mix(in srgb, var(--rc) 45%, #000) 70%, var(--rc)) border-box;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 60px -20px var(--c); }
.cview-left { display: flex; flex-direction: column; gap: 10px; }
.cview-card { width: 100%; }
.cv-bar { position: relative; height: 26px; border-radius: 7px; overflow: hidden; isolation: isolate; background: #0b0c12; box-shadow: inset 0 0 0 1.5px #3a404e; }
.cv-bar::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;   /* a notch per copy */
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--notches, 5) - 2px), rgba(11, 12, 18, .9) calc(100% / var(--notches, 5) - 2px) calc(100% / var(--notches, 5))); }
.cv-bar-fill { position: absolute; inset: 0; z-index: 1; transform-origin: left; transition: transform .35s cubic-bezier(.2, .8, .3, 1);
  background: linear-gradient(180deg, #fff1c2, var(--logo-gold) 50%, #c98a12); box-shadow: 0 0 14px var(--logo-gold); }
.cv-bar.is-max .cv-bar-fill { background: linear-gradient(90deg, #ffe08a, #fff8e1, #ffc23a, #fff2c4); }
.cv-bar-text { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; font: 700 11px var(--f-num, inherit); letter-spacing: .06em;
  color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px #000; font-variant-numeric: tabular-nums; }
.cv-upgrade { width: 100%; }
.cv-upgrade:disabled { opacity: .45; cursor: default; filter: grayscale(.6); }
.cv-feedall { padding: 6px; border: 0; background: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--logo-gold); text-decoration: underline; text-underline-offset: 3px; }
.cv-feedall:hover { color: #fff1c2; }
.cv-why { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); text-align: center; }
.cv-why .cv-up { font: 400 15px var(--f-metal); letter-spacing: .1em; color: var(--logo-gold); }
.cview-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cv-eyebrow { margin: 0; font: 700 11px var(--f-num, inherit); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cv-name { margin: 0; font: 400 26px/1.05 var(--f-metal); letter-spacing: .02em; text-transform: uppercase; color: var(--chrome-hi); text-wrap: balance; }
.cv-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); }
.cv-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: 4px 0 0; }
.cv-stats div { padding: 6px 9px; border-radius: 7px; background: #12141b; box-shadow: inset 0 0 0 1px #262a35; }
.cv-stats dt { font: 700 9px var(--f-num, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cv-stats dd { margin: 2px 0 0; font: 700 14px var(--f-num, inherit); color: #fff; font-variant-numeric: tabular-nums; }
.cv-stats em { font-style: normal; font-size: 11px; color: var(--logo-gold); }
.cv-head { margin: 6px 0 0; font: 400 11px var(--f-metal); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cv-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cv-plan li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px;
  font-size: 12px; color: var(--muted); background: #0e1016; }
.cv-plan b { display: grid; place-items: center; height: 20px; border-radius: 5px; font: 700 10px var(--f-num, inherit); letter-spacing: .04em; color: var(--muted); box-shadow: inset 0 0 0 1px #2c313c; }
.cv-plan small { font-size: 10px; color: #6f7686; font-variant-numeric: tabular-nums; }
.cv-plan .is-done { color: var(--text); }
.cv-plan .is-done b { color: #1b1203; background: color-mix(in srgb, var(--logo-gold) 70%, #6b4a10); box-shadow: none; }
.cv-plan .is-now { color: #fff; background: color-mix(in srgb, var(--logo-gold) 12%, #0e1016); box-shadow: inset 0 0 0 1.5px var(--logo-gold); }
.cv-plan .is-now b { color: #1b1203; background: linear-gradient(180deg, #fff1c2, var(--logo-gold) 55%, #c98a12); box-shadow: none; }
.cv-plan .is-next { color: var(--text); box-shadow: inset 0 0 0 1px #3a404e; }
.cv-deck { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; padding: 10px 12px; border-radius: 12px; background: #0b0c12; box-shadow: inset 0 0 0 1px #232835; }
.cv-deck-l { display: grid; gap: 3px; margin: 0; }
.cv-deck-l b { font: 400 13px var(--f-metal); letter-spacing: .1em; text-transform: uppercase; color: var(--chrome-hi); }
.cv-own { font-size: 12px; color: var(--muted); }
.cv-step { flex: none; width: 190px; height: 44px; grid-template-columns: 52px minmax(0, 1fr) 52px; }
.cv-step .cstep-btn { font-size: 24px; }
.cv-step .cstep-n { padding-top: 11px; }
.cv-step .cstep-n b { font-size: 22px; }
.cv-step .cstep-n small { font-size: 13px; }
.cv-close { align-self: flex-end; }
@media (max-width: 640px) {
  .cview-box { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; margin-block: 56px 24px; }   /* (clear of the settings gear) */
  .cview-left { width: min(230px, 100%); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .cv-bar-fill { transition: none; } }
/* the Start screen's Wild deck */
.ov.is-three { width: min(1120px, calc(100vw - 32px)); }
.ov-deck.is-wild h3 { color: var(--wild-hi); }
.ov-deck.is-wild h3 small { font-size: .6em; letter-spacing: .12em; text-transform: uppercase; color: var(--wild); }
/* the Archives' enemies (v0.62): a real boss's bar stays hidden; the moves to watch for, as chips */
body.in-archive .bossbar, body.in-archive .intro { visibility: hidden; }
.arc-moves { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.arc-moves span { padding: 4px 9px 3px; border-radius: 999px; font: 400 11px var(--f-metal); letter-spacing: .1em; color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, #0b0c12); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent); }
.arc-show { margin: 0; font-size: 12px; color: var(--muted); }

/* v0.64 (user: "maximize the space and make the card section look bigger so you can see the card better"): on a wide
   screen the details panel grows with the window and the card in it with the panel (and the window's height, so the
   skills still fit under it); the arena between the panels grows too (archive.js ARCHIVE.box). */
/* (v0.64, user: "align them bc it looks like a mess"): wherever the panels sit either side, the list, the arena and the
   details share one top and bottom, under the settings gear, with the same gap between them as round the edge
   (archive.js archivePlace, ARCHIVE.alignFrom) */
@media (min-width: 900px) {
  .arc-list { top: calc(env(safe-area-inset-top, 0px) + 56px); bottom: 16px; }
  .arc-detail { top: calc(env(safe-area-inset-top, 0px) + 56px); bottom: 16px; max-height: none; }
  .arc-detail .back { margin-top: auto; }
}
@media (min-width: 1100px) {
  .arc-detail { width: clamp(330px, 31vw, 640px); padding: 16px 18px 14px; gap: 14px; }
  .arc-info { --face: clamp(130px, min(16vw, calc((100vh - 470px) * .714)), 330px); grid-template-columns: var(--face) minmax(0, 1fr); gap: 18px; }
  .arc-face { width: var(--face); }
  .arc-text { gap: 8px; padding-top: 4px; }
  .arc-text .type-name { font-size: clamp(15px, 1.4vw, 24px); }
  .arc-rar { font-size: 12px; }
  .arc-text .type-stats, .arc-where { font-size: 13px; }
  .arc-desc { font-size: 13px; }
}

/* (v0.68's real-3D pack with thickness slabs was tried and taken out again: user, "still laggy, bring back the old pack behaviour") */
.pack-art.is-ripping .pack-new { display: none; }
/* the NEW ribbon (v0.72, user: "instead of a glow, a NEW banner, diagonal or a badge"): across the pack's top-left corner, set in the
   store editor. It is part of the pack, so it turns with it. */
.pack-new { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 6px 6px 8px 8px; }
.pack-new b { position: absolute; left: calc(var(--w) * -.27); top: calc(var(--w) * .13); width: calc(var(--w) * .8); padding: calc(var(--w) * .025) 0 calc(var(--w) * .02);
  transform: rotate(-45deg); text-align: center; font: 400 calc(var(--w) * .1) / 1 var(--f-metal); letter-spacing: .2em; text-indent: .2em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, #ff6a6a, #e2192e 55%, #a30d1f); box-shadow: 0 2px 5px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.se-row .pack-new { display: none; }
/* a pack on sale (v0.72): the new price, the old one struck through, and how much off */
.pack-price.is-sale { gap: 7px; }
.pack-was { color: var(--muted); font-weight: 600; font-size: .85em; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, #ff4d5e 80%, transparent); opacity: .85; }
.pack-off { padding: 2px 6px 1px; border-radius: 4px; font: 700 11px/1 var(--f-num); letter-spacing: .06em; color: #fff; background: linear-gradient(180deg, #ff5566, #c4162b); }
#btn-buy .pack-was { margin-left: 8px; font-size: .78em; }

/* v0.71 the maintenance note under the title's Start button (src/maintenance.js) */
.maint-note { margin: 2px 0 0; font: 400 15px/1 var(--f-metal); letter-spacing: .24em; text-transform: uppercase; color: var(--logo-orange, #ff6a1c);
  text-shadow: 0 0 12px color-mix(in srgb, var(--logo-orange, #ff6a1c) 55%, transparent); }
.maint-note[hidden] { display: none; }

/* The NEW PACK! OUT NOW! slide (v0.73, user: "the background should be related to the pack"): the pack on its own, big, over its own cover (blurred
   and darkened) with blobs, rays and floor grid in its colours (menus.js ANN_THEME sets --c1, --c2, --c3 and --cover on the slide). */
.ann-slide.is-newpack { --neon: var(--c1); --neon-hi: color-mix(in srgb, var(--c1) 55%, #fff); --glow: var(--c1); }
.ann-solo { --x: 50%; --y: 35%; --r: -3deg; z-index: 2; }
.ann-solo .pack-art { --w: 38cqw; }
.ann-slide.is-newpack .ann-bg { background: radial-gradient(ellipse 120% 90% at 50% 110%, color-mix(in srgb, var(--c1) 34%, #06050b) 0%, color-mix(in srgb, var(--c1) 9%, #08070f) 55%, #04040a 100%); }
.ann-slide.is-newpack .ann-bg::before { content: ""; position: absolute; inset: -6%; background: var(--cover) 50% 28% / cover no-repeat; filter: blur(9px) saturate(1.35) brightness(.5); opacity: .8; }
.ann-slide.is-newpack .ann-b1 { background: radial-gradient(closest-side, var(--c1), color-mix(in srgb, var(--c1) 40%, transparent) 55%, transparent); }
.ann-slide.is-newpack .ann-b2 { background: radial-gradient(closest-side, var(--c2), color-mix(in srgb, var(--c2) 40%, transparent) 60%, transparent); }
.ann-slide.is-newpack .ann-b3 { background: radial-gradient(closest-side, var(--c3), transparent); }
.ann-slide.is-newpack .ann-rays { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c1) 26%, transparent) 0deg 3deg, transparent 3deg 15deg); opacity: .6; }
.ann-slide.is-newpack .ann-kicker { font-size: 2.7cqw; letter-spacing: .42em; margin-right: -.42em; }   /* (NEW PACK! bigger over OUT NOW!) */

/* ---------- v0.74 (user): inventory, redeemed-code window, profiles, the carousel's Leaderboard slide ---------- */
.nav-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 8px; padding: 0 5px; border-radius: 9px; vertical-align: 1px;
  font: 700 11px/1 var(--f-num); color: #1b1203; background: linear-gradient(180deg, #fff1c2, var(--logo-gold) 60%, #c98a12); }
.nav-badge[hidden] { display: none; }
#scr-inv { gap: 12px; }
.inv-wrap { display: flex; flex-direction: column; gap: 12px; width: min(620px, 100%); }
.inv-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; text-align: left; background: var(--scrim); }
.inv-card .co-label { margin: 0; }
.inv-packs { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.inv-pack { --pc: var(--gold-ui); display: grid; justify-items: center; gap: 6px; width: 112px; }
.inv-art .pack-art { --w: 84px; }
.inv-name { font: 600 11px var(--f-ui); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--text); }
.inv-n { font: 700 16px var(--f-num); color: var(--logo-gold); }
.inv-open { width: 100%; padding: 6px 8px; font-size: 12px; }
.inv-none { margin: 0; font-size: 12px; color: var(--muted); }
.inv-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 190px; overflow-y: auto; }
.inv-log li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 5px 8px; border-radius: 8px; font-size: 12px; background: rgba(255, 255, 255, .03); }
.inv-log li.inv-none { display: block; background: none; }
.inv-when { color: var(--muted); font-size: 11px; }
.inv-code { font: 700 12px var(--f-num); letter-spacing: .1em; color: var(--chrome-hi); overflow: hidden; text-overflow: ellipsis; }
.inv-got { color: var(--text); text-align: right; }

.redeem-dialog { width: min(420px, calc(100vw - 32px)); }
.redeem-body { padding: 16px 18px 6px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.rd-code { margin: 0; font: 700 14px var(--f-num); letter-spacing: .18em; color: var(--muted); }
.rd-note { margin: 0; font-size: 13px; }
.rd-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding: 6px 0; }
.rd-item { display: grid; justify-items: center; gap: 4px; min-width: 96px; }
.rd-item .pack-art { --w: 92px; }
.rd-item b { font: 700 22px var(--f-num); color: var(--logo-gold); }
.rd-item span:not(.coin):not(.pack-art):not(.pack-top):not(.pack-body) { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--text); }
.rd-gold .coin { width: 44px; height: 44px; }
.redeem-actions { display: flex; justify-content: center; gap: 10px; padding: 8px 18px 18px; }
.buy-dialog .rd-item .pack-art { --w: 120px; }
.buy-line { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.buy-line b { font: 700 20px var(--f-num); color: var(--logo-gold); }
.buy-line .pack-was { color: var(--muted); }
.redeem-actions { flex-wrap: wrap; }
.ann-part[data-ann] { cursor: pointer; }
.ann-part[data-ann]:focus-visible { outline: 2px solid var(--neon-hi); outline-offset: 6px; border-radius: 6px; }

.prof-body { padding: 16px 18px 20px; overflow-y: auto; min-height: 0; display: grid; gap: 10px; text-align: left; }
.prof-note { margin: 0; padding: 18px 0; text-align: center; color: var(--muted); }
.board-list li[data-name], .board-me[data-name] { cursor: pointer; }
.board-list li[data-name]:hover { background: rgba(255, 255, 255, .06); }
.board-list li[data-name]:focus-visible, .board-me[data-name]:focus-visible { outline: 2px solid var(--neon-hi); outline-offset: -2px; }

.ann-boardbox { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(88cqw, 620px); display: grid; gap: 2.2cqh; justify-items: stretch; }
.ann-board-k { margin: 0; text-align: center; font: 400 max(11px, 2.2cqw) var(--f-metal); letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; color: var(--neon-hi); }
.ann-board-t { margin: 0; text-align: center; font: 400 max(22px, 5.2cqw) var(--f-metal); letter-spacing: .08em; text-transform: uppercase; color: var(--chrome-hi); }
.ann-board-list { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, #05050a 78%, transparent); text-align: left; }
.ann-board-list li { padding-block: max(7px, 1.3cqh); font-size: max(14px, 2.1cqw); }
.ann-board-list .board-name { font-size: max(15px, 2.4cqw); }

/* ---------- v0.74 (user): lighter on every browser (perf.js) ---------- */
/* Graphics: Low (or Auto once the menus ran slowly). Every endless decorative loop stops (it plays once and rests), the blurs
   that need a second render pass go, and the big glow blobs are plain. */
html.lite *, html.lite *::before, html.lite *::after { animation-iteration-count: 1 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.lite .ann-blob { filter: none; mix-blend-mode: normal; opacity: .4; }
html.lite .ann-slide.is-newpack .ann-bg::before { filter: none; }
html.lite .rv-card .card-back::before { filter: none; }
html.lite .title-warp { filter: none; }
/* … and for everyone: a card in a crowded grid keeps still until you point at it (each rare card runs three looping
   gradients, and a mirrored one blurs what's under four seams: dozens at once in the collection), and its seams skip the
   backdrop blur at that size, where a 2 px blur can't be seen. */
.ccard:not(:hover):not(:focus-visible) :is(.cf, .cf *, .cf *::before, .cf *::after) { animation-play-state: paused; }
.ccard .cf-seam, .arc-face .cf-seam, .pf-cf .cf-seam { -webkit-backdrop-filter: none; backdrop-filter: none; }
.pf-cf:not(:hover) :is(.cf, .cf *, .cf *::before, .cf *::after) { animation-play-state: paused; }   /* (v0.89: the profile's decks too) */
.seg { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--scrim); }
.seg button { padding: 7px 16px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: 600 12px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.seg button[aria-checked="true"] { color: #1b1203; background: linear-gradient(180deg, #fff1c2, var(--logo-gold) 60%, #c98a12); }
.seg button:focus-visible { outline: 2px solid var(--neon-hi); outline-offset: 1px; }
.inv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inv-head .start { padding: 7px 16px; font-size: 12px; }

/* ===== v0.75: loadouts (the numbered slots, name, code), the profile's copy buttons ===== */
.lo-slots { display: flex; gap: 4px; }
.lo-slot {
  flex: none; width: 38px; height: 38px; box-sizing: border-box; padding: 0; border: 1.5px solid transparent; border-radius: 10px;
  background: linear-gradient(180deg, #151824, #0c0d13) padding-box, linear-gradient(180deg, #2c313c, #1a1d25) border-box;
  font: 400 13px/1 var(--f-metal); color: var(--muted); cursor: pointer; transition: color .15s ease, background .15s ease;
}
.lo-slot:hover { color: var(--text); }
.lo-slot.is-on { color: var(--chrome-hi); background: linear-gradient(180deg, #1b2b52, #0e1632) padding-box, linear-gradient(180deg, var(--logo-sky), var(--logo-blue)) border-box; }
.lo-add { color: var(--neon-hi, var(--text)); }
.lo-name { flex: 0 1 180px; height: 38px; box-sizing: border-box; }
.lo-sets .lo-btn { height: 38px; padding: 0 12px; }
.lo-name, .lo-codebox input {
  min-width: 0; padding: 6px 10px; border: 1.5px solid #2c313c; border-radius: 8px; background: #0b0c12;
  font: 600 12px var(--f-ui, inherit); letter-spacing: .02em; color: var(--text);
}
.lo-name:focus, .lo-codebox input:focus { outline: 0; border-color: var(--logo-sky); }
.lo-btn {
  flex: 0 0 auto; padding: 6px 9px; border: 1.5px solid #2c313c; border-radius: 8px; background: #121522;
  font: 400 11px/1 var(--f-metal); letter-spacing: .1em; text-transform: uppercase; color: var(--chrome); cursor: pointer;
}
.lo-btn:hover:not(:disabled) { border-color: var(--logo-sky); color: var(--chrome-hi); }
.lo-btn:disabled { opacity: .35; cursor: default; }
.lo-btn.is-del:hover:not(:disabled), .lo-btn.is-del[data-sure] { border-color: #ff5a5a; color: #ff8a8a; }
/* v0.90: the deck code box (v0.91: from the Deck code button over your cards): paste one, see its cards, add it as a new loadout; or copy this one */
.lo-codebox { display: grid; gap: 8px; padding: 12px; border: 1px solid #2c313c; border-radius: 12px; background: #0e1018; }
.lo-codebox input { padding: 9px 10px; font-size: 13px; }
.lo-codebox[hidden] { display: none; }
.lo-copy { justify-self: start; margin-top: 2px; border-color: transparent; background: none; color: var(--muted); padding-inline: 2px; }
.lo-copy:hover:not(:disabled) { border-color: transparent; color: var(--chrome-hi); text-decoration: underline; }
.lo-preview { display: grid; gap: 6px; }
.lo-preview[hidden] { display: none; }
.lp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; font-size: 12px; color: var(--muted); }
.lp-head b { color: var(--chrome-hi); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px 10px; max-height: 120px; overflow-y: auto; font-size: 11px; color: var(--text); }
.lp-cards li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lp-cards li i { width: 6px; height: 6px; border-radius: 50%; background: var(--rc); }
.lp-cards li b { font-weight: 600; color: var(--muted); }
.lp-cards li.is-missing { opacity: .45; }
.lp-own { margin: 0; font-size: 11px; color: var(--muted); }
.lp-own.is-short { color: #ffb36b; }
.lo-addset { width: 100%; padding: 8px 10px; border-color: var(--logo-sky); color: var(--chrome-hi); background: linear-gradient(180deg, #1b2b52, #0e1632); }
.lo-addset[hidden] { display: none; }
#loadout-hint:empty { display: none; }
.lo-msg { margin: 0; font-size: 11px; line-height: 1.35; color: var(--neon-hi, var(--chrome)); text-wrap: pretty; }
.lo-msg.is-bad { color: #ff9a8a; }

/* ===== v0.75: the upgrade cards' name and description in their own colours (user), and the reroll ===== */
.upcard:not(.augcard) .up-name { color: var(--logo-gold); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.upcard:not(.augcard) .up-gain { color: var(--neon-hi); }
.cp-name { color: var(--logo-gold); }
.cp-gain { color: var(--neon-hi); }
.up-reroll {
  margin: 4px auto 0; padding: 8px 16px 7px; border: 1.5px solid color-mix(in srgb, var(--logo-gold) 60%, transparent); border-radius: 999px;
  background: #121522; font: 400 12px/1 var(--f-metal); letter-spacing: .12em; text-transform: uppercase; color: var(--logo-gold); cursor: pointer;
}
.up-reroll:hover:not(:disabled), .up-reroll:focus-visible { background: #1b1f33; box-shadow: 0 0 14px -4px var(--logo-gold); }
.up-reroll:disabled { opacity: .4; cursor: default; border-color: #2c313c; color: var(--muted); }
.up-reroll[hidden] { display: none; }

#btn-coop.is-off:disabled::after { content: "off for now"; display: block; margin-top: 3px; font: 400 9px/1 var(--f-ui, inherit); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }

/* Nothing in the game's UI gets highlighted by a double-click or a drag (the leaderboard and news slides were turning into
   grey selection boxes); typing boxes, where you paste a code, still select. */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }

/* v0.75: the loadout's rarity limits (Legendary 0/1 per loadout) */

/* …and the rest of it: a selection (select all, a drag, a double-click) never tints anything, images and the logo can't be dragged out,
   and a tap on a phone doesn't flash a grey box. Typing boxes keep their normal selection. */
img, svg, canvas, button { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
*:not(input):not(textarea)::selection { background: transparent; color: inherit; }
/* v0.77 (user: "bring back highlight but on the name on loadout section"): Chrome passes ::selection down from the page, so the typing
   boxes (the loadout's name, the code boxes) need their own or their selection is see-through too */
input::selection, textarea::selection { background: rgba(74, 166, 255, .45); color: #fff; }
* { -webkit-tap-highlight-color: transparent; }

/* v0.76: why a buy or an opening didn't happen (the server said no, or can't be reached) */
.econ-note { margin: 6px 0 0; color: #ff9a8a; text-wrap: pretty; }
.econ-note[hidden] { display: none; }

/* ===== v0.76 (user: "a better UI look and minimal for the player profile") ===== */
/* v0.89: its own page (a pop-up before). v0.90 (user: "not scrollable, wider instead of longer"): two columns, the decks side by
   side, the cards sized by menus.js fitProfile (--pf-cw) so it all fits the screen; under 900 px one column that scrolls. */
.prof-screen { width: min(1480px, 100%); gap: 12px; padding-block: 14px; }
.prof-screen .prof-body { width: 100%; box-sizing: border-box; padding: 20px 22px; gap: 16px 28px; overflow: visible;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); align-items: start;
  border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--floor) 82%, transparent); }
.prof-screen .prof-note { grid-column: 1 / -1; }
.pf-side, .pf-main { display: grid; gap: 16px; min-width: 0; align-content: start; }
.pf-main { padding-left: 28px; margin-left: -1px; border-left: 1px solid var(--line); }
.pf-decks { display: flex; gap: 14px 28px; align-items: flex-start; }
.pf-decks > .pf-deck { flex: var(--n, 1) 1 0; min-width: calc(var(--pf-cw, 74px) * 3 + 16px); }   /* (width by how many cards each deck shows) */
.prof-screen .pf-grid { grid-template-columns: repeat(auto-fill, var(--pf-cw, 74px)); gap: 8px; padding: 4px 0 0; justify-content: start; }
.pf-side .pf-runs li { grid-template-columns: 50px minmax(0, 1fr) auto; row-gap: 2px; }
.pf-side .pf-r-end { grid-column: 2; grid-row: 2; }
.pf-side .pf-r-ago { grid-column: 3; grid-row: 1; }
@media (max-width: 899px) {
  .prof-screen { width: min(720px, 100%); }
  .prof-screen .prof-body { grid-template-columns: minmax(0, 1fr); }
  .pf-main { padding-left: 0; margin-left: 0; border-left: 0; }
  .prof-screen .pf-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .pf-decks { flex-direction: column; align-items: stretch; }
  .pf-decks > .pf-deck { min-width: 0; }
}
.prof-screen .pf-hero { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 0; border: 0; text-align: left; }
.pf-badge { flex: none; position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px; color: var(--logo-gold); }
.pf-badge .run-wheel { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-badge b { position: relative; font: 700 18px var(--f-num); color: var(--text); }
.pf-id { flex: 1; min-width: 0; text-align: left; }
.pf-meta, .pf-name { justify-content: flex-start; }
.pf-name { margin: 0; font: 400 26px/1.05 var(--f-metal); letter-spacing: .05em; text-transform: uppercase; color: var(--chrome-hi); overflow-wrap: anywhere; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.pf-rank { font-weight: 700; color: var(--logo-gold); }
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.pf-stat { display: grid; gap: 3px; padding: 12px 6px; text-align: center; }
.pf-stat + .pf-stat { border-left: 1px solid var(--line); }
.pf-stat b { font: 700 22px/1.1 var(--f-num); color: var(--text); }
.pf-stat span { font: 600 10px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pf-more { margin: -8px 0 0; font-size: 12px; text-align: center; color: var(--muted); }
.pf-sec { display: grid; gap: 10px; }
.pf-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; }
.pf-sec-h h5 { margin: 0; font: 600 11px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pf-count { font-size: 12px; color: var(--muted); } .pf-count b { color: var(--text); }
.pf-deck { display: grid; gap: 10px; }
.pf-deck.is-off { opacity: .45; }
.pf-deck-k { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-top: -2px;
  font: 400 11px/1 var(--f-metal); color: var(--logo-sky); background: rgba(255, 255, 255, .06); }
.pf-deck-k.is-m { color: var(--logo-orange); }
.pf-cards { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 14px; min-width: 0; }
.pf-card { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.pf-card i, .pf-legend i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rc); }
.pf-card small { font-size: 11px; color: var(--muted); }
.pf-deck-n { font-size: 11px; color: var(--muted); }
.pf-none { margin: 0; font-size: 13px; color: var(--muted); }
.pf-actions { display: flex; gap: 6px; }
.pf-btn { padding: 5px 10px; border: 1px solid var(--line); border-radius: 7px; background: transparent;
  font: 600 11px var(--f-ui); letter-spacing: .04em; color: var(--text); cursor: pointer; }
.pf-btn:hover { border-color: var(--logo-sky); background: rgba(74, 166, 255, .08); }
.pf-btn.is-go { border-color: var(--logo-sky); color: var(--chrome-hi); background: rgba(74, 166, 255, .14); }
.pf-btn:focus-visible { outline: 2px solid var(--neon-hi); outline-offset: 1px; }
.pf-bar { display: flex; gap: 2px; height: 6px; border-radius: 999px; overflow: hidden; }
.pf-bar i { background: var(--rc); }
.pf-bar .pf-bar-rest { background: rgba(255, 255, 255, .07); }
.pf-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted); }
.pf-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pf-legend b { font-weight: 600; color: var(--text); }
.pf-best { margin: 0; font-size: 12px; color: var(--muted); }
.pf-best span { color: color-mix(in srgb, var(--rc) 75%, #fff); }
.pf-runs { list-style: none; margin: 0; padding: 0; display: grid; }
.pf-runs li { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 7px 0; font-size: 12px;
  border-top: 1px solid rgba(255, 255, 255, .05); }
.pf-runs li:first-child { border-top: 0; padding-top: 0; }
.pf-r-run { font-weight: 700; color: var(--chrome-hi); }
.pf-r-main { color: var(--text); }
.pf-r-end { color: var(--muted); }
.pf-r-end.is-won { color: var(--logo-gold); }
.pf-r-ago { min-width: 52px; text-align: right; color: var(--muted); opacity: .75; }
@media (max-width: 480px) {
  .prof-screen .prof-body { padding: 18px 16px; }
  .pf-stat b { font-size: 18px; }
  .pf-runs li { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .pf-r-ago { display: none; }
  .pf-sec-h:has(.pf-actions) { flex-wrap: wrap; }
}

/* ---------- v0.78: phones (mobile.js; user: "full screen when played, landscape for now; the right side swipes to move
   like a joystick, the relic skills on the left") ---------- */
html.is-touch { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
/* v0.79 (user: "scale all the UI for mobile"): a phone lays the page out bigger and shrinks it by --ui-k (index.html),
   so everything keeps its computer proportions. What a thumb presses stays thumb-sized: those sizes are divided by
   --ui-k (`/ var(--ui-k)`), so they're the same on the glass as before. */
:root { --ui-k: 1; }
/* The touch surface you steer on (arena.js): only in a run, only on a touch screen. (v0.78 to v0.87 a joystick drawn there;
   v0.88, a surface that lights up under the finger: the phone block below.) */
.stick { display: none; }
.menu:not([hidden]) ~ .stick, body.in-archive .stick { visibility: hidden; }
/* The relics: a column of big buttons down the left edge, for the left thumb (no keys to show) */
html.is-touch .relics {
  left: calc(env(safe-area-inset-left, 0px) + 24px / var(--ui-k)); right: auto; top: 56%; bottom: auto; translate: 0 -50%;
  flex-direction: column; gap: calc(12px / var(--ui-k)); touch-action: none;
}
html.is-touch .relic {
  width: calc(56px / var(--ui-k)); height: calc(56px / var(--ui-k));
  background:
    radial-gradient(circle, color-mix(in srgb, var(--floor) 86%, var(--rc, var(--relic))) 0 calc(23px / var(--ui-k)), transparent calc(23.5px / var(--ui-k))),
    conic-gradient(var(--rc, var(--relic)) calc(var(--k) * 360deg), var(--line) 0);
}
html.is-touch .relic-icon svg { width: calc(27px / var(--ui-k)); height: calc(27px / var(--ui-k)); }
/* Pause and the co-op revive button: big enough to hit */
html.is-touch #pause { font-size: calc(13px / var(--ui-k)); padding: calc(6px / var(--ui-k)) calc(16px / var(--ui-k)); }
html.is-touch .rv-btn { font-size: calc(13px / var(--ui-k)); padding: calc(12px / var(--ui-k)) calc(20px / var(--ui-k)); }
/* Your stats (Tab on a keyboard): on a touch screen only while paused; in play the relics have the left edge */
@media (hover: none) and (pointer: coarse) { html.is-touch .statpanel { opacity: 0; } }
html.is-touch body.is-paused .statpanel { opacity: 1; translate: 0 0; z-index: 14; }   /* (over the pause screen, 13) */
html.is-touch body.is-paused .relics { visibility: hidden; }
/* (the touch hints: also when ?touch or the app turns touch mode on with a mouse) */
html.is-touch .hint-keys { display: none; }
html.is-touch .hint-touch { display: inline; }
html.is-touch .relic-key { display: none; }
/* Sideways: turn it upright (v0.86: portrait now; the app is locked upright, so it never shows there) */
.rotate { display: none; }
@media (orientation: landscape) {
  html.is-touch .rotate {
    position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; justify-items: center; gap: 6px;
    padding: 24px; text-align: center; background: var(--floor); color: var(--text);
  }
}
.rotate-phone { color: var(--relic); animation: rotate-turn 2.4s ease-in-out infinite; }
.rotate-t { margin: 14px 0 0; font: 700 20px var(--f-ui); letter-spacing: .04em; }
.rotate-s { margin: 0; font-size: 14px; color: var(--muted); }
@keyframes rotate-turn { 0%, 25% { rotate: -90deg; } 55%, 100% { rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .rotate-phone { animation: none; } }

/* ---------- v0.80: the card stacks (hud.js renderStack; user: "make card switch like this [Kingdom Hearts: Chain of
   Memories] below instead of the bars: 3 mini squares with a preview of the card and the line showing the duration").
   The decks sit side by side at the bottom (ranged, then melee, then Wild), each its name and count over a stack: the
   card that fires next in front, the next two smaller and dimmer behind it to the right, and under the front one a line
   that fills until it fires. The old bars (.deck, .rapid) stay in the page, hidden. ---------- */
:root { --dk: 1; --tray-h: calc(78px * var(--dk)); }
html.is-touch { --dk: 1.35; }   /* (bigger on a phone, where the page is shrunk: index.html UI_K) */
body.two-decks, body.three-decks { --deck2: 0px; }   /* (side by side now: the bars above don't move up per deck) */
.decks { flex-direction: row-reverse; align-items: flex-end; gap: 28px; }
.decks .deckbox { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; height: auto; }
.decks .deckbox .deck-status { justify-content: flex-start; height: calc(12px * var(--dk)); font-size: calc(10px * var(--dk)); }
.decks .deck, .decks .rapid { display: none; }
.dstack { --p: 0; --c: var(--line); position: relative; width: calc(102px * var(--dk)); height: calc(62px * var(--dk)); }
.dsc {
  --c: var(--line);
  position: absolute; box-sizing: border-box; overflow: hidden; transform-origin: 0 0;
  border: 2px solid var(--c); border-radius: 7px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 22%, #0b0b0e), #060607 75%);
}
.dsc.s0 { left: 0; bottom: calc(9px * var(--dk)); width: calc(52px * var(--dk)); height: calc(52px * var(--dk)); z-index: 3; box-shadow: 0 0 14px -3px var(--c), 0 4px 10px rgb(0 0 0 / .55); }
.dsc.s1 { left: calc(38px * var(--dk)); bottom: calc(14px * var(--dk)); width: calc(42px * var(--dk)); height: calc(42px * var(--dk)); z-index: 2; filter: brightness(.62) saturate(.8); }
.dsc.s2 { left: calc(68px * var(--dk)); bottom: calc(18px * var(--dk)); width: calc(34px * var(--dk)); height: calc(34px * var(--dk)); z-index: 1; filter: brightness(.42) saturate(.7); }
.dsc.is-gone { z-index: 4; pointer-events: none; }
.dsc-pic { position: absolute; max-width: none; object-fit: cover; pointer-events: none; }
.dsc-glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--c); }
.dsc-svg { width: 62%; height: 62%; }
/* the front card's name, small along its bottom edge */
.dsc-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 2px 2px;
  font: 700 calc(7.5px * var(--dk))/1 var(--f-num); letter-spacing: .04em; text-transform: uppercase; text-align: center; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
  background: linear-gradient(to top, rgb(0 0 0 / .85), transparent); text-shadow: 0 1px 2px #000;
}
/* face down: the next sequence, not dealt yet */
.dsc.is-down { border-color: var(--line); background: repeating-linear-gradient(135deg, var(--card) 0 4px, var(--floor) 4px 8px); }
.dsc-back::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 14px var(--f-num); color: var(--muted); }
.dsc.s2 .dsc-back::after { font-size: 10px; }
/* part of a combo (several of one card in a row): its colour glows round it */
.dsc.is-combo { box-shadow: 0 0 0 1.5px var(--c), 0 0 12px 1px var(--c); }
.dsc.s0.is-combo { box-shadow: 0 0 0 1.5px var(--c), 0 0 18px 3px var(--c), 0 4px 10px rgb(0 0 0 / .55); }
/* an augment (v0.68): its tag in the corner */
.dsc-aug { position: absolute; top: 2px; left: 2px; padding: 1px 3px; border-radius: 3px; font: 800 calc(7px * var(--dk))/1 var(--f-num); color: rgb(0 0 0 / .8); background: var(--ac); }
/* the line: how long until the front card fires */
.dsc-cd { position: absolute; left: 0; bottom: 0; width: calc(52px * var(--dk)); height: calc(4px * var(--dk)); border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--floor) 60%, var(--line)); }
.dsc-cd span { display: block; height: 100%; background: var(--c); box-shadow: 0 0 6px var(--c); transform-origin: left; transform: scaleX(var(--p)); }
@media (prefers-reduced-motion: reduce) { .dsc { transition: none; } }

/* ---------- v0.81: the profile's loadout as cards (menus.js profileHtml; user: "make this better; on the profile
   showing also the card design preview"). Each deck: its letter, name and count, then its cards as small real faces,
   rarest first, the copies in the red corner badge. Pointing at one lifts it and makes it bigger. ---------- */
.pf-deck-h { display: flex; align-items: center; gap: 8px; }
.pf-deck-h .pf-deck-k { margin-top: 0; }
.pf-deck-t { font: 700 12px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.pf-deck-h .pf-deck-n { margin-left: auto; }
.pf-grid { list-style: none; margin: 0; padding: 6px 4px 2px; display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 12px 10px; }
/* (v0.92, user: "hovering cards make the banner from other cards looks overlapping"): each card is its own layer (z-index 0), so its
   count badge stays inside it and a hovered card, raised over the rest, covers the badges next to it */
.pf-cf { position: relative; z-index: 0; transition: transform .16s cubic-bezier(.2, .8, .3, 1.2), z-index 0s .16s; }
.pf-cf:hover { z-index: 3; transform: translateY(-4px) scale(1.45); transition: transform .16s cubic-bezier(.2, .8, .3, 1.2), z-index 0s; }
.pf-cf .cf-count { font-size: 9cqw; min-width: 16cqw; height: 16cqw; top: 2cqw; right: 2cqw; }   /* (readable at this size; v0.90: inside the corner, so the next card can't cover it) */
@media (prefers-reduced-motion: reduce) { .pf-cf, .pf-cf:hover { transition: none; } }
@media (hover: none) { .pf-cf:hover { transform: none; } }

/* v0.81.1: the packs wait, hidden, until their covers are loaded (menus.js COVER_FILES), then fade in */
#store-packs { transition: opacity .25s ease-out; }
#store-packs.is-waiting { opacity: 0; transition: none; }

/* v0.83: the battle intro (menus.js enterArena): the card stacks show through the menu while the cards fly into them */
body.pv-entering .menu:not([hidden]) ~ .decks { visibility: visible; }

/* ===== v0.84 (user: "show stats on UPGRADES selection; and increase size for better visibility") ===== */
/* Bigger upgrade cards */
.upcard { width: 220px; min-height: 272px; gap: 11px; padding: 26px 16px 18px; border-width: 2px; border-radius: 12px; }
.up-cards { gap: 16px; }
.up-key { top: 10px; left: 12px; font-size: 13px; }
.up-rarity { font-size: 13px; }
.up-name { font-size: 23px; }
.up-gain { font-size: 15px; }
.up-change { font-size: 17px; }
.up-reroll { font-size: 13px; padding: 10px 20px 9px; }
/* Your stats on the left while you pick (over the level-up screen, 13), a bit bigger, and the cards move right to
   make room when the screen is narrow. The 3 stats on offer light up in their card's rarity with where they'd go. */
body.up-stats .statpanel { opacity: 1; translate: 0 0; z-index: 14; }
html.is-touch body.up-stats .statpanel { opacity: 1; }
html.is-touch body.up-stats .relics { visibility: hidden; }
body.up-stats .levelup { padding-left: clamp(16px, calc(1370px - 100vw), 300px); }
@media (max-width: 1060px) { .upcard { width: 190px; } }
@media (max-width: 960px) {   /* (too narrow for both: the cards alone, as before; Tab still shows the stats) */
  body.up-stats .levelup { padding-left: 16px; }
  body.up-stats .statpanel, html.is-touch body.up-stats .statpanel { opacity: 0; }
}
.st-next { display: block; font: 600 15px var(--f-num); white-space: nowrap; color: var(--oc); }
body.up-stats .statpanel li.is-offer {
  border-left-color: var(--oc);
  background: linear-gradient(90deg, color-mix(in srgb, var(--oc) 26%, transparent), color-mix(in srgb, var(--oc) 6%, transparent));
}
body.up-stats .statpanel li.is-offer .st-name { color: var(--oc); }
body.up-stats .statpanel li.is-offer .st-val { color: var(--text); }
body.up-stats .statpanel:has(li.is-hot) li:not(.is-hot) { opacity: .45; }
body.up-stats .statpanel li.is-hot { box-shadow: 0 0 16px -4px var(--oc); background: color-mix(in srgb, var(--oc) 34%, transparent); }

/* ===== v0.86: the phone game, portrait (user: "overhaul and remove things we don't need for the mobile, no more landscape:
   portrait"; their sketch). In a run, top to bottom:
   - the arena, a bordered box (the view: the world is bigger and the view follows you, arena.js / config.js MOBILE), with
     a simple progress bar across its top and the decks' next cards as small strips in its bottom right corner;
   - the HP bar and the XP bar, end to end;
   - the control deck (#pad): the relics in a 2 × 2 on the left (only the ones you have), the touch surface you steer on (v0.88) on the right,
     Pause in the middle at the bottom (paused, your stats show there).
   Gone on a phone: the counters, the gold, the hints, the deck names. The page is laid out 460 px wide (index.html UI_W). */
html.is-touch {
  --gut: 10px; --pad-h: 252px; --bars-h: 40px;
  --m-top: calc(env(safe-area-inset-top, 0px) + 10px); --m-bot: env(safe-area-inset-bottom, 0px);
  --m-floor: calc(var(--m-bot) + var(--pad-h));                 /* the top of the control deck */
}
.pad { display: none; }
html.is-touch:has(#menu[hidden]) .arena {
  top: var(--m-top); left: var(--gut); right: var(--gut); bottom: calc(var(--m-floor) + var(--bars-h));
  border: 2px solid color-mix(in srgb, var(--neon, var(--line)) 45%, var(--line)); border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 22px -8px color-mix(in srgb, var(--neon, var(--line)) 60%, transparent);
}
html.is-touch:has(#menu[hidden]) .pad {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; height: var(--m-floor); z-index: 1; touch-action: none;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--card) 50%, transparent));
}
/* not on a phone */
html.is-touch .hud .stats > span, html.is-touch .hud .side, html.is-touch .hint, html.is-touch .rb-head { display: none; }
html.is-touch:has(#menu[hidden]) body:not(.is-paused) .audio { visibility: hidden; }   /* (settings: pause first) */
/* the progress bar, slim, across the top of the box */
html.is-touch .runbar { top: calc(var(--m-top) + 14px); width: calc(100% - 2 * var(--gut) - 28px); padding-inline: 11px; }
html.is-touch .rb-track { height: 7px; }
html.is-touch .rb-knob { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
html.is-touch .rb-node { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-width: 2px; }
html.is-touch .rb-node svg { width: 12px; height: 12px; }
html.is-touch .bossbar { top: calc(var(--m-top) + 34px); width: calc(100% - 2 * var(--gut) - 40px); }
html.is-touch .toast { top: calc(var(--m-top) + 78px); font-size: 13px; }
/* HP and XP: end to end under the box */
html.is-touch .hp, html.is-touch .xp { left: var(--gut); right: var(--gut); width: auto; transform: none; gap: 6px; }
html.is-touch .hp { bottom: calc(var(--m-floor) + 20px); }
html.is-touch .xp { bottom: calc(var(--m-floor) + 4px); }
html.is-touch .hp-bar { height: 13px; border-radius: 7px; }
html.is-touch .hp-num { font-size: 13px; }
html.is-touch .xp-bar { height: 8px; }
html.is-touch .xp-lv { font-size: 10px; } html.is-touch .xp-lv b { font-size: 12px; }
html.is-touch .xp-num { display: none; }
/* the decks: each one's next card as a small strip, bottom right in the box (hud.js renderStack) */
html.is-touch .decks {
  left: auto; right: calc(var(--gut) + 8px); transform: none; bottom: calc(var(--m-floor) + var(--bars-h) + 8px);
  flex-direction: column; align-items: flex-end; gap: 5px; z-index: 1;
}
html.is-touch .decks .deckbox .deck-status { display: none; }
html.is-touch .dstack { width: 108px; height: 25px; }
html.is-touch .dsc.s1, html.is-touch .dsc.s2 { display: none; }
html.is-touch .dsc.s0 { left: 0; top: 0; bottom: auto; width: 108px; height: 21px; border-width: 1.5px; border-radius: 5px; }
html.is-touch .dsc-name { top: 0; bottom: 0; left: auto; right: 0; width: 64%; padding: 0 5px; display: grid; align-items: center; justify-items: end;
  font-size: 8.5px; background: linear-gradient(to left, rgb(0 0 0 / .85) 40%, transparent); }
html.is-touch .dsc-cd { width: 108px; height: 3px; }
/* the control deck: relics left (2 × 2), the touch surface right, Pause bottom middle */
html.is-touch .relics {
  left: calc(var(--gut) + 8px); right: auto; top: auto; translate: none; bottom: calc(var(--m-bot) + 70px); z-index: 3;
  display: grid; grid-template-columns: repeat(2, 74px); gap: 14px; flex-direction: row;
}
html.is-touch .relic {
  width: 74px; height: 74px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--floor) 86%, var(--rc, var(--relic))) 0 31px, transparent 31.5px),
    conic-gradient(var(--rc, var(--relic)) calc(var(--k) * 360deg), var(--line) 0);
}
html.is-touch .relic-icon svg { width: 32px; height: 32px; }
html.is-touch #pause {
  position: fixed; left: 50%; bottom: calc(var(--m-bot) + 18px); translate: -50% 0; z-index: 3;
  width: 104px; height: 34px; padding: 0; border-radius: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); background: color-mix(in srgb, var(--card) 80%, transparent);
}
/* paused: your stats, in two columns over the control deck */
html.is-touch .statpanel { display: none; }
html.is-touch body:is(.is-paused, .up-stats) .statpanel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; opacity: 1; translate: none; z-index: 14;
  left: var(--gut); right: var(--gut); top: auto; bottom: calc(var(--m-bot) + 66px); transform: none;
}
html.is-touch body:is(.is-paused, .up-stats) .statpanel li { grid-template-columns: 1fr auto auto; padding: 2px 8px 2px 7px; gap: 6px; }
html.is-touch body:is(.is-paused, .up-stats) .st-long { display: inline; } html.is-touch body:is(.is-paused, .up-stats) .st-short { display: none; }
html.is-touch body:is(.is-paused, .up-stats) .st-name { font-size: 10px; }
html.is-touch body:is(.is-paused, .up-stats) :is(.st-val, .st-next) { font-size: 12px; }
html.is-touch body:is(.is-paused, .up-stats) .st-pips { display: flex; }
html.is-touch body:is(.is-paused, .up-stats) .statpanel li > .st-pips { order: 0; }
html.is-touch .st-next:empty { display: none; }   /* (3 columns here: an empty one would wrap to a row of its own) */
html.is-touch body.up-stats .statpanel li.is-offer .st-val { display: none; }   /* (the "→ new" says it) */
html.is-touch .statpanel::before { grid-column: 1 / -1; margin: 0 0 4px 8px; font-size: 11px; }
html.is-touch .pause { place-items: start center; padding-top: calc(var(--m-top) + 70px); }
html.is-touch body.is-paused #pause { visibility: hidden; }
html.is-touch .pause-split { grid-template-columns: minmax(0, 1fr); width: min(460px, 100%); gap: 12px; }
html.is-touch .pause-cards { --pf-cw: 72px; max-height: max(110px, calc(100dvh - var(--m-top) - var(--m-bot) - 560px)); padding: 10px; }   /* (v1.05: clear of the stats under it) */
/* level up: the cards one under the other, the stats under them */
html.is-touch body.up-stats .levelup { padding-left: 16px; padding-top: calc(var(--m-top) + 24px); }
html.is-touch .levelup .screen { gap: 10px; padding-block: 0; }
html.is-touch .up-cards { flex-direction: column; width: 100%; align-items: center; gap: 8px; }
html.is-touch .up-cards li { width: min(100%, 360px); }
html.is-touch .upcard { width: 100%; min-height: 0; padding: 12px 14px 10px 34px; gap: 3px; align-items: flex-start; text-align: left; }
html.is-touch .up-key { top: 50%; translate: 0 -50%; left: 13px; font-size: 14px; }
html.is-touch .up-name { font-size: 18px; } html.is-touch .up-gain { font-size: 13px; } html.is-touch .up-change { font-size: 14px; margin-top: 2px; }
html.is-touch .upcard:hover, html.is-touch .upcard:focus-visible { transform: none; }
.dsc { container-type: size; }   /* (v0.86: the picture is framed in cq units, hud.js stackArt) */

/* ===== v0.86, the computer: the decks' cards as thin strips (user: "small rectangles with the preview of the cards below,
   a bit thinner so it's not looking bloated"; squares in v0.80). Each deck: its name and count, then the card that fires
   next as a strip with its name, the line that fills until it fires, and the next two as thin strips under it, dimmer. */
html:not(.is-touch) { --tray-h: 48px; }   /* (v0.86.2: one strip a deck) */
html:not(.is-touch) .decks { gap: 22px; }
html:not(.is-touch) .dstack { width: 100px; height: 31px; }
html:not(.is-touch) .dsc { left: 0; bottom: auto; width: 100px; border-width: 1.5px; border-radius: 5px; }
html:not(.is-touch) .dsc.s0 { top: 0; height: 24px; box-shadow: 0 0 12px -4px var(--c), 0 3px 8px rgb(0 0 0 / .5); }
html:not(.is-touch) .dsc.s1 { top: 33px; height: 11px; filter: brightness(.66) saturate(.85); }
html:not(.is-touch) .dsc.s2 { top: 47px; height: 11px; filter: brightness(.45) saturate(.75); }
html:not(.is-touch) .dsc-cd { top: 27px; bottom: auto; width: 100px; height: 3px; }
html:not(.is-touch) .dsc-name { top: 0; bottom: 0; left: auto; right: 0; width: 66%; padding: 0 5px; display: grid; align-items: center; justify-items: end;
  font-size: 8.5px; background: linear-gradient(to left, rgb(0 0 0 / .85) 45%, transparent); }
html:not(.is-touch) .dsc.s1 .dsc-back::after, html:not(.is-touch) .dsc.s2 .dsc-back::after { font-size: 8px; }
html:not(.is-touch) .dsc-aug { top: 50%; translate: 0 -50%; left: 3px; font-size: 6.5px; }
html.is-touch .hud { z-index: 3; }   /* (its Pause button over the control deck: .hud is its own layer) */
/* the menus, upright (v0.86): most already stack on a narrow screen; these are the ones that needed help */
html.is-touch .coll-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
html.is-touch #scr-loadout > .lo-phone-row {
  position: sticky; bottom: 0; z-index: 4; width: calc(100% + 32px); margin-inline: -16px; padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: linear-gradient(to top, var(--floor) 60%, transparent);
}
/* a screen taller than the phone scrolls from its top (centred, it overflowed above, out of reach); a short one stays centred */
html.is-touch .menu { place-items: start center; }
html.is-touch .menu > .screen { margin-block: auto; }
html.is-touch .menu { overflow-x: hidden; }   /* (the title logo's glow reaches past the edge: no sideways scroll) */
html.is-touch .cview { place-items: start center; }
html.is-touch .cview-box { margin-block: auto; }

/* v0.86: the leaderboard's two boards, the computer's and the phone's (online.js pickBoard) */
.board-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: -2px 0 10px; padding: 3px; border-radius: 9px; background: color-mix(in srgb, var(--floor) 70%, var(--line)); }
.board-tab { padding: 4px 0 3px; border: 0; border-radius: 6px; font: 700 11px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: none; }
.board-tab[aria-selected="true"] { color: var(--text); background: var(--card); box-shadow: 0 1px 0 rgb(255 255 255 / .06), 0 0 0 1px var(--line); }
.pf-plat { margin: 10px 0 -2px; font: 700 10px var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--neon-hi, var(--muted)); }
.pf-plat .pf-rank { margin-left: 6px; letter-spacing: .04em; }
.pf-plat-tag { margin-left: 6px; padding: 0 5px; border-radius: 4px; font: 700 8.5px/1.6 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--floor); background: var(--neon-hi, var(--muted)); vertical-align: 1px; }

/* ===== v0.86.2, phones (user: "no test pack for mobile; only view cards on archives") ===== */
html.is-touch #btn-testpack, html.is-touch .pv-test, html.is-touch #btn-loadout-test { display: none; }
/* the Archives: a card viewer over the whole screen (no fight under it: archive.js) */
html.is-touch .archive { background: var(--floor); }
html.is-touch .arc-detail { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); max-height: none; }
html.is-touch .arc-info { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 10px; }
html.is-touch .arc-face { width: min(210px, 56vw); }
html.is-touch .arc-skill { pointer-events: none; }
/* level up on a phone (user: "make sure no overlaps"): each card two lines (its name and rarity; what it gives and the change),
   the stats compact at the bottom, the reroll between them */
html.is-touch .levelup .screen { gap: 8px; }
html.is-touch .levelup h2 { font-size: 26px; }
html.is-touch .upcard {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name rar" "gain change";
  align-items: baseline; column-gap: 10px; row-gap: 2px; padding: 10px 14px 10px 34px;
}
html.is-touch .up-name { grid-area: name; font-size: 17px; }
html.is-touch .up-rarity { grid-area: rar; font-size: 10.5px; }
html.is-touch .up-gain { grid-area: gain; font-size: 12.5px; }
html.is-touch .up-change { grid-area: change; margin: 0; font-size: 14px; white-space: nowrap; }
html.is-touch .augcard .aug-tag { font-size: 20px; }
html.is-touch .up-reroll { margin-top: 2px; }
html.is-touch body:is(.is-paused, .up-stats) .statpanel { gap: 2px 10px; }
html.is-touch body.up-stats .statpanel { bottom: calc(var(--m-bot) + 14px); }
html.is-touch .arc-rar { justify-content: center; }

/* ===== v0.87, phones (user: "make sure mobile runs smooth and not laggy") ===== */
/* The CRT's flicker was a layer over the whole screen changing every frame, menus and fight alike: on a phone it stays at
   its average instead, so the screen's glass is one still layer. */
html.is-touch .crt-screen::after { animation: none; opacity: .5; }
/* the lines that fill each frame (a deck's timer) move on their own layers, without repainting the HUD */
.dsc-cd span { will-change: transform; }

/* ===== v0.88, phones ===== */
/* The touch surface (user: "the below isn't a joystick but that part is glowing, lighting up the dark part"): the right side
   of the control deck, a dark panel of faint dots. Put a finger down anywhere on it and the dots under it light up, a glow
   sits on the finger, a ring marks where it went down and a streak runs from there to the finger (arena.js stickDraw). */
html.is-touch .stick {
  display: block; position: fixed; z-index: 2; pointer-events: none;
  left: calc(42% + 4px); right: var(--gut); top: calc(100% - var(--m-floor) + 14px); bottom: calc(var(--m-bot) + 64px);
  border-radius: 18px; border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--text) 13%, transparent) 1px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(to bottom, color-mix(in srgb, var(--card) 30%, transparent), color-mix(in srgb, var(--card) 55%, transparent));
  transition: border-color .3s, box-shadow .3s;
}
html.is-touch .stick.is-held {
  border-color: color-mix(in srgb, var(--neon) 30%, transparent);
  box-shadow: inset 0 0 34px -14px var(--neon), 0 0 22px -12px var(--neon); transition-duration: .08s;
}
.stick-lit, .stick-org, .stick-trail, .stick-knob { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .3s; }
.stick-lit {   /* the same dots, lit, only round the finger */
  inset: 0; border-radius: inherit;
  background: radial-gradient(circle, var(--neon-hi) 1.3px, transparent 1.9px) 0 0 / 14px 14px;
  -webkit-mask: radial-gradient(circle 84px at var(--x, 50%) var(--y, 50%), #000, rgb(0 0 0 / .35) 50%, transparent);
  mask: radial-gradient(circle 84px at var(--x, 50%) var(--y, 50%), #000, rgb(0 0 0 / .35) 50%, transparent);
}
.stick-knob {   /* the glow on the finger */
  width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle, #fff 0 3px, color-mix(in srgb, var(--neon-hi) 80%, transparent) 6px,
    color-mix(in srgb, var(--neon) 34%, transparent) 16px, color-mix(in srgb, var(--neon) 10%, transparent) 38px, transparent 64px);
}
.stick-org {   /* where the finger went down */
  width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; will-change: transform;
  border: 1.5px solid color-mix(in srgb, var(--neon) 55%, transparent); box-shadow: 0 0 10px -2px var(--neon);
}
.stick-trail {   /* from there to the finger: 100 px long, stretched to the distance (scaleX) */
  top: -4px; width: 100px; height: 8px; transform-origin: 0 50%; will-change: transform, opacity; transition-duration: .25s;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--neon) 45%, transparent) 60%, color-mix(in srgb, var(--neon-hi) 70%, transparent));
  -webkit-mask: linear-gradient(to bottom, transparent, #000 35% 65%, transparent); mask: linear-gradient(to bottom, transparent, #000 35% 65%, transparent);
}
.stick.is-held :is(.stick-lit, .stick-org, .stick-knob) { opacity: 1; transition-duration: .06s; }
.stick.is-held .stick-trail { transition: none; }
.stick-hint {
  position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center; transition: opacity .3s;
  font: 600 10px var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--text) 26%, transparent);
}
.stick.is-held .stick-hint { opacity: 0; transition-duration: .08s; }

/* Level up (user: "switch the position of the upgrades and stats, so they're below and easier to reach"): your stats at
   the top, the picks and the reroll at the bottom, under your thumb. */
html.is-touch body.up-stats .statpanel { top: calc(var(--m-top) + 6px); bottom: auto; }
html.is-touch body.up-stats .levelup { place-items: end center; padding-top: 0; padding-bottom: calc(var(--m-bot) + 22px); }
html.is-touch body.up-stats .levelup .screen { padding-bottom: 0; }

/* The loadout on a phone (v0.88, user: "a compact version, not a ported web page"; v0.91 the same parts as the computer's new
   layout). One column, top to bottom: Back, LOADOUTS, Test loadout; your loadouts (1 2 3 +, the name, delete); the Ranged / Melee
   tabs and Wild, which stay at the top as you scroll; then the deck or your cards (the Deck / Cards switch at the bottom, menus.js
   setLoView). The deck: its bar (in runs, Auto, Clear) and its cards four to a row. The cards: their bar (the menus, Deck code)
   and the cards three across. (The dock's boxes are let go of, display: contents, so their parts can be laid out in this column.) */
.lo-view, .lo-phone-row { display: none; }
html.is-touch #scr-loadout { width: 100%; height: auto; gap: 0; padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 0; }
html.is-touch #scr-loadout .lo-top { gap: 10px; margin-bottom: 8px; padding-right: 0; }
html.is-touch #l-title { font-size: 28px; line-height: 1; }
html.is-touch #scr-loadout .lo-top button { height: 40px; padding: 0 12px; font-size: 12px; }
html.is-touch #scr-loadout .builder { display: flex; flex-direction: column; gap: 10px; height: auto; min-height: 0; }
html.is-touch #scr-loadout :is(.deck-panel, .dock-tabs, .dock-body) { display: contents; }
html.is-touch body:has(#scr-loadout:not([hidden])) .audio { visibility: hidden; }   /* (the gear would sit on the tabs; settings are a Back away) */
html.is-touch .dock-label { display: none; }
html.is-touch .lo-sets { order: 2; gap: 6px; }
html.is-touch .lo-sets .lo-name { flex: 1 1 0; width: 0; }
html.is-touch .lo-slot { width: 40px; height: 40px; }
html.is-touch .lo-name { font-size: 14px; }
/* the tabs, sticking at the top */
html.is-touch #scr-loadout :is(.coll-panel, .coll-bar) { display: contents; }
html.is-touch .deck-row { order: 3; box-shadow: none; position: sticky; top: 0; z-index: 7; margin-inline: -16px; padding: 8px 16px; gap: 6px;
  background: linear-gradient(to bottom, #050608 82%, transparent); }
html.is-touch .deck-tabs { flex: 1; min-width: 0; }
html.is-touch .deck-tab { flex: 1; min-width: 0; height: 44px; gap: 6px; padding-right: 8px; font-size: 10px; letter-spacing: .08em; }
html.is-touch .wild-pill b { font-size: 11px; letter-spacing: .08em; }
html.is-touch .wild-pill { height: 44px; padding: 0 10px; }
html.is-touch .wild-pill small { display: none; }
/* the deck */
html.is-touch .dock-head { order: 4; padding: 0; border: 0; cursor: default; flex-wrap: wrap; }
html.is-touch .dock-grip { display: none; }
html.is-touch .deck-warn { order: 9; flex-basis: 100%; white-space: normal; padding: 7px 10px; }
html.is-touch .menu .dock-btn { height: 40px; }
html.is-touch .deck-list { order: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; height: auto; overflow: visible; padding: 4px 0 8px; }
html.is-touch .deck-list li { width: auto; }
html.is-touch .deck-empty { order: 5; height: auto; min-height: 120px; border: 1.5px dashed #2c313c; border-radius: 10px; }
html.is-touch .drow { touch-action: manipulation; cursor: pointer; }
html.is-touch .drow:hover { transform: none; } html.is-touch .drow:hover .drow-out { opacity: 0; }   /* (no hover on a phone) */
/* the cards */
html.is-touch .coll-filters { order: 6; }
html.is-touch .lo-codewrap { order: 6; }
html.is-touch .coll-filters { gap: 6px; }
html.is-touch .lo-codewrap { align-self: flex-end; margin: -2px 0 0; }
html.is-touch .cf-dd { height: 38px; }
html.is-touch .cf-dd { padding: 0 8px 0 10px; }
html.is-touch .cf-menu { min-width: 180px; max-height: 50vh; }
html.is-touch .lo-codes span { display: none; }
html.is-touch #scr-loadout .coll-grid { order: 7; overflow: visible; padding: 4px 0 8px; gap: 12px 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.is-touch .ccard { touch-action: manipulation; }
html.is-touch .cstep { grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 4px; }
html.is-touch .cstep-btn { height: 32px; }
html.is-touch .builder:not([data-view="cards"]) :is(.coll-filters, .lo-codewrap, .coll-grid) { display: none; }
html.is-touch .builder[data-view="cards"] :is(.dock-head, .deck-empty, .deck-list) { display: none; }
html.is-touch .lo-toasts { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 64px); }
/* the bar at the bottom: Deck / Cards */
html.is-touch #scr-loadout > .lo-phone-row {
  position: sticky; bottom: 0; z-index: 8; display: block; margin-top: auto; width: auto; align-self: stretch; margin-inline: -16px;
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 10px); background: linear-gradient(to top, #050608 70%, transparent);
}
html.is-touch #scr-loadout { min-height: 100%; box-sizing: border-box; margin-block: 0; }
html.is-touch .lo-view {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; height: 44px; box-sizing: border-box; border-radius: 12px;
  background: #0b0c12; box-shadow: inset 0 0 0 1.5px #2c313c;
}
.menu #lo-view button {
  clip-path: none; box-shadow: none; transform: none;
  display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0; border: 0; border-radius: 9px; background: none; cursor: pointer;
  font: 400 13px var(--f-metal); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: color .15s, background .15s;
}
#lo-view b { font: 700 11px var(--f-num); letter-spacing: .02em; color: var(--text); opacity: .7; }
.menu #lo-view button[aria-selected="true"] { color: var(--chrome-hi); background: linear-gradient(180deg, #1b2b52, #0e1632); box-shadow: inset 0 0 0 1.5px var(--logo-sky), 0 0 14px -6px var(--logo-sky); }
#lo-view button[aria-selected="true"] b { opacity: 1; color: var(--neon-hi); }

/* Settings on a phone (user: "sound settings don't work on mobile; make a new UI too"): the gear opens a sheet that comes
   up from the bottom over a dimmed screen, in reach of a thumb. Its header (Settings, Done); each volume its name and
   level, then a full-width slider with a big knob; Mute all and the CRT filter as switches. A tap on the dimmed part, or
   Done, or Back closes it. (The computer keeps the small menu under the gear.) */
.sp-head { display: none; }
html.is-touch #gear { width: 40px; height: 40px; }
html.is-touch #gear svg { width: 22px; height: 22px; }
html.is-touch .audio.is-open::before {
  content: ""; position: fixed; inset: 0; background: rgb(0 0 0 / .6); animation: sp-dim .2s ease-out;
}
html.is-touch .sound-panel {
  position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
  box-sizing: border-box; padding: 8px 20px calc(env(safe-area-inset-bottom, 0px) + 22px); gap: 12px;
  border: 0; border-top: 1px solid color-mix(in srgb, var(--logo-sky) 35%, var(--line)); border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, #151a28, #0b0c12 40%); box-shadow: 0 -18px 40px -10px #000, 0 -1px 24px -14px var(--logo-sky);
  animation: sp-up .26s cubic-bezier(.2, .9, .3, 1);
}
html.is-touch .sound-panel::before {   /* the grab handle */
  content: ""; align-self: center; width: 42px; height: 5px; margin-bottom: 2px; border-radius: 3px; background: color-mix(in srgb, var(--text) 22%, transparent);
}
@keyframes sp-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sp-dim { from { opacity: 0; } }
html.is-touch .sp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
html.is-touch .sp-title { margin: 0; font: 400 24px/1 var(--f-metal); letter-spacing: .06em; text-transform: uppercase; color: var(--chrome-hi); }
html.is-touch .sp-done {
  height: 36px; padding: 0 18px; border: 0; border-radius: 18px; font: 700 13px var(--f-ui); letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, var(--logo-sky), var(--logo-blue)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3);
}
html.is-touch .sound-panel .eyebrow { margin: 6px 0 -2px; font-size: 11px; letter-spacing: .24em; color: var(--neon-hi); }
html.is-touch .sound-panel .panel-sec { margin-top: 8px; padding-top: 14px; }
/* a volume: its name and level, the slider under them */
html.is-touch .vol-row {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; gap: 6px 10px;
  padding: 10px 12px 12px; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, transparent);
  font-size: 14px; font-weight: 600;
}
html.is-touch .vol-row span { grid-area: name; }
html.is-touch .vol-row b { grid-area: val; font-size: 14px; color: var(--chrome-hi); }
html.is-touch .vol-row input[type=range] {
  grid-area: bar; height: 32px; background: none; touch-action: pan-y;
}
html.is-touch .vol-row input[type=range]::-webkit-slider-runnable-track {
  height: 10px; border-radius: 5px; background: linear-gradient(to right, var(--logo-sky) var(--v, 20%), #262b38 var(--v, 20%));
}
html.is-touch .vol-row input[type=range]::-moz-range-track { height: 10px; border-radius: 5px; background: #262b38; }
html.is-touch .vol-row input[type=range]::-moz-range-progress { height: 10px; border-radius: 5px; background: var(--logo-sky); }
html.is-touch .vol-row input[type=range]::-webkit-slider-thumb {
  width: 28px; height: 28px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--logo-sky) 45%, transparent), 0 2px 6px rgb(0 0 0 / .6);
}
html.is-touch .vol-row input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--logo-sky) 45%, transparent); }
/* Mute all and the CRT filter: a row with a switch on its right */
html.is-touch .mute-all, html.is-touch .set-row {
  align-self: stretch; display: flex; align-items: center; justify-content: space-between; min-height: 52px; box-sizing: border-box;
  padding: 0 12px 0 14px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, transparent);
  font: 600 14px var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--text);
}
html.is-touch .mute-all span, html.is-touch .mute-all kbd { display: none; }
html.is-touch .mute-all::before { content: "Mute all"; }
html.is-touch .mute-all[aria-pressed="true"] { color: var(--text); }
html.is-touch .mute-all::after, html.is-touch .crt-switch::after {   /* the switch */
  content: ""; flex: none; width: 50px; height: 30px; border-radius: 15px; box-sizing: border-box;
  background: radial-gradient(circle 12px at 15px 50%, #fff 11px, transparent 12px), #262b38;
  transition: background .18s;
}
html.is-touch .mute-all[aria-pressed="true"]::after { background: radial-gradient(circle 12px at 35px 50%, #fff 11px, transparent 12px), var(--bad); }
html.is-touch .crt-switch[aria-checked="true"]::after { background: radial-gradient(circle 12px at 35px 50%, #fff 11px, transparent 12px), var(--logo-sky); }
html.is-touch .crt-switch { padding: 0; border: 0; background: none; box-shadow: none; }
html.is-touch .crt-switch:active { transform: none; }
html.is-touch .crt-switch .switch-led, html.is-touch .crt-switch .switch-state { display: none; }
html.is-touch .set-note { margin: -6px 4px 0; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { html.is-touch .sound-panel, html.is-touch .audio.is-open::before { animation: none; } }