/* ==========================================================================
   NOMAD-MON GO! 2 — OBSIDIAN (front door 3)
   The sequel's single design system. Every shell screen (loader, entry,
   title, settings, deck builder, LUCKY DRAW, results, collection,
   leaderboard, friends, pack chrome) draws from these tokens. This sheet
   loads AFTER the V1 inline <style>, so it restyles by cascade and never
   renames an id or hook the smoke suite or window.__nm rely on.

   The look (2026-10-02, replacing PRISM: "not going for a retro look"):
   a deep, quiet ink stage; ONE hero object lit like a product shot; one
   refined typeface (Geist, variable) in confident mixed case; frosted
   glass and solid surfaces with real hierarchy — one ivory primary per
   screen, glass secondaries, ghost tertiaries; one accent (violet) and one
   warm highlight for things that pay you. No chrome text, no spectrum
   borders, no grids, no rays.

   House rules kept here (OPEN_WORK.md §STANDING RULES):
   - keyframes animate transform/opacity ONLY (no filter/box-shadow/
     text-shadow/background-position loops);
   - closed overlays stay visibility:hidden (V1 rules untouched);
   - reading text is DOM; the battle arena and HUD layout are not touched —
     only the HUD nameplate face (the OBSIDIAN block at the end) is restyled.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-v3.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  /* ground — neutral ink with the faintest violet */
  --v2-ink: #060609;
  --v2-ink-2: #0b0b11;
  --v2-deep: #121219;
  --v2-deep-2: #1a1a25;
  --v2-deep-3: #2a2840;
  /* text */
  --v2-text: #f4f3f8;
  --v2-text-2: #b6b4c6;
  --v2-text-3: #807d94;
  --v2-text-4: #5a586c;
  /* one accent, one warm highlight */
  --v2-accent: #9a8cff;
  --v2-accent-2: #7c6cf5;
  --v2-accent-ink: #0d0b1c;
  --v2-warm: #ffd6a0;
  --v2-ivory: #f3f2f7;
  --v2-ivory-ink: #0c0b12;
  /* legacy spectrum names: R3 results still read some of these; retuned so
     anything left on them reads as accent light, not a rainbow */
  --v2-cyan: #b9b2ff;
  --v2-blue: #8f86ff;
  --v2-violet: #9a8cff;
  --v2-magenta: #c79bff;
  --v2-amber: #ffd6a0;
  --v2-lime: #c9f0b0;
  --v2-hot: #ffd6a0;                 /* rewards / numbers that pay you */
  --v2-good: #9fe3c0;
  --v2-warn: #ffb88c;
  --v2-spectrum: linear-gradient(100deg, #8f86ff, #b3a8ff 50%, #ffd6a0);
  --v2-spectrum-v: linear-gradient(180deg, #8f86ff, #b3a8ff 50%, #ffd6a0);
  --v2-conic: conic-gradient(from 200deg, #8f86ff, #b3a8ff, #ffd6a0, #8f86ff);
  --v2-chrome: linear-gradient(180deg, #ffffff, #d8d5e6);
  /* glass */
  --v2-glass: rgba(255,255,255,.055);
  --v2-glass-solid: rgba(17,17,24,.94);
  --v2-glass-hi: rgba(255,255,255,.09);
  --v2-blur: blur(22px) saturate(1.5);
  --v2-line: rgba(255,255,255,.085);
  --v2-line-2: rgba(255,255,255,.14);
  --v2-inset: inset 0 1px 0 rgba(255,255,255,.06);
  --v2-drop: 0 24px 60px -28px rgba(0,0,0,.95);
  --v2-r-xs: 8px; --v2-r-sm: 12px; --v2-r-md: 16px; --v2-r-lg: 22px;
  /* type: one family */
  --v2-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --v2-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* motion */
  --v2-ease: cubic-bezier(.22, 1, .36, 1);
  --v2-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* live tilt (-1..1) written by src/prism.js */
  --tx: 0; --ty: 0;
}

html, body { background: var(--v2-ink); }
body { font-family: var(--v2-ui); -webkit-font-smoothing: antialiased; }
/* the battle arena and its HUD are out of scope: they keep V1's type (a font
   swap there would change HUD metrics the battle suites pin) */
#battleUI, #battleInspectScrim, #arsFx, #glyphOverlay, #exitConfirm, #tierFrame {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html.offline-render body { font-family: "Nomad Render Text", sans-serif; }

@keyframes v2Spin { to { transform: rotate(360deg); } }
@keyframes v2Breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes v2Rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes v2Pop {
  0% { opacity: 0; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------------------
   LOADER — the dark before the door: a dim wordmark over a hairline glint.
   Kept deliberately dim (luma < .18) so the loader -> entry handoff stays
   one dark composition.
   ------------------------------------------------------------------------ */
#loader { background: #040407; }
#loader .ld-logo {
  position: absolute; left: 50%; top: 44%; width: min(56vw, 360px);
  transform: translate(-50%, -50%); opacity: .1; pointer-events: none;
  animation: v2LdBreathe 2.6s ease-in-out infinite;
}
@keyframes v2LdBreathe { 0%, 100% { opacity: .06; } 50% { opacity: .12; } }
#loader .ld-prism {
  position: absolute; left: 50%; top: calc(44% + min(9vw, 60px));
  width: min(40vw, 240px); height: 1px; transform: translateX(-50%);
  background: rgba(255,255,255,.12); overflow: hidden;
}
#loader .ld-prism::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: v2LdGlint 1.6s var(--v2-ease) infinite;
}
@keyframes v2LdGlint { from { transform: translateX(-110%); } to { transform: translateX(360%); } }
#loader .ld-word { font-family: var(--v2-ui); font-weight: 500; letter-spacing: .02em; color: var(--v2-text-3); }
#loader .ld-tip { font-family: var(--v2-ui); font-style: normal; font-size: 12px; letter-spacing: 0;
  color: var(--v2-text-4); position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); }
#loader.failed { background: radial-gradient(60% 50% at 50% 45%, rgba(80,30,40,.25), transparent 70%), #040407; }
#loader.failed .ld-logo { opacity: .22; animation: none; }
#loader.failed .ld-prism { display: none; }
#loader.failed .ld-word { color: #ffb3b8; letter-spacing: 0; position: static; }
#loader.failed .ld-tip { position: static; color: var(--v2-text-2); }
@media (prefers-reduced-motion: reduce) {
  #loader .ld-logo, #loader .ld-prism::after { animation: none; }
}

/* ------------------------------------------------------------------------
   ENTRY — the front door. The medallion is WebGL (src/entry.js); the DOM
   owns the wordmark and the controls. The roster is a quiet glass grid,
   TAP TO ENTER the one ivory primary, GUEST a ghost.
   ------------------------------------------------------------------------ */
#entry {
  background: radial-gradient(70% 46% at 50% 34%, rgba(60,50,120,.08), transparent 70%);
}
#entry .en-lockup { flex: none; display: block; pointer-events: none; user-select: none;
  width: min(64vw, 300px); margin-bottom: 4px; opacity: 0;
  animation: v2Rise .9s var(--v2-ease) .15s both; }
#entry .en-lockup img { display: block; width: 100%; height: auto; }
/* landscape: the wordmark rides the top-left corner, out of the medal column */
@media (orientation: landscape) {
  #entry .en-lockup { position: absolute; z-index: 2; top: max(18px, env(safe-area-inset-top));
    left: max(20px, env(safe-area-inset-left)); margin: 0;
    width: clamp(120px, calc((100vw - min(48vmin, 480px)) / 2 - 40px), 260px); }
}
@media (orientation: landscape) and (max-height: 500px) {
  #entry .en-lockup { width: clamp(110px, calc((100vw - min(48vmin, 360px)) / 2 - 30px), 200px); }
}
/* a short portrait cannot spare the column: the medal carries the brand */
@media (orientation: portrait) and (max-height: 700px) { #entry .en-lockup { display: none; } }
/* near-square portrait (the open Fold, 720x748): the roster + GUEST need the
   whole column, so the lockup yields there too (guestreach pins GUEST) */
@media (orientation: portrait) and (min-aspect-ratio: 17/20) { #entry .en-lockup { display: none; } }
@media (prefers-reduced-motion: reduce) { #entry .en-lockup { animation: none; opacity: 1; } }

#entryGo {
  position: relative; isolation: isolate; overflow: hidden; border: 0;
  border-radius: 16px; padding: 17px 30px 15px; min-width: min(78vw, 300px);
  background: linear-gradient(180deg, rgba(58,48,70,.62), rgba(24,20,32,.72)); color: #f4efe6;
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 0 0 1px rgba(255,214,160,.32) inset, 0 1px 0 rgba(255,230,190,.35) inset, 0 18px 44px -18px rgba(255,190,120,.45);
  transition: transform .5s var(--v2-spring), box-shadow .3s var(--v2-ease);
}
#entryGo::before, #entryGo::after { content: none; }
#entryGo > * { position: relative; z-index: 1; }
#entryGo .en-tap { font-family: var(--v2-ui); font-weight: 620; font-size: 17px; letter-spacing: -.01em;
  padding: 0; text-transform: none; color: #f4efe6; text-shadow: none; animation: none; }
#entryGo .en-as { font-family: var(--v2-ui); font-weight: 500; font-size: 12px; letter-spacing: 0;
  text-transform: none; color: rgba(244,239,230,.62); }
#entryGo .en-as b { color: #ffd9a8; font-weight: 620; }
#entryGo:active { transform: scale(.965); transition-duration: .12s; }
#entrySwitch { font-family: var(--v2-ui); font-weight: 500; color: var(--v2-text-3); min-height: 44px;
  letter-spacing: 0; text-transform: none; text-decoration-color: rgba(255,255,255,.25); }
.en-who { font-family: var(--v2-ui); font-weight: 620; font-size: 22px; letter-spacing: -.03em;
  padding: 0; text-transform: none; color: var(--v2-text);
  background: none; -webkit-text-fill-color: currentColor; }
.en-sub { font-family: var(--v2-ui); font-weight: 450; font-size: 13px; letter-spacing: 0;
  text-transform: none; color: var(--v2-text-3); }
.enchip {
  border: 0; border-radius: 14px; overflow: hidden;
  background: var(--v2-glass);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
  box-shadow: inset 0 0 0 1px var(--v2-line), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .45s var(--v2-spring), background .2s ease, box-shadow .2s ease;
}
.enchip::before { content: none; }
.enchip .enname { font-family: var(--v2-ui); font-weight: 560; font-stretch: 100%;
  letter-spacing: -.01em; text-transform: none; color: var(--v2-text); }
.enchip .enrec { font-family: var(--v2-ui); font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--v2-text-3); opacity: 1; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .enchip:hover { background: var(--v2-glass-hi);
  box-shadow: inset 0 0 0 1px var(--v2-line-2), inset 0 1px 0 rgba(255,255,255,.06); } }
.enchip:active { transform: scale(.96); transition-duration: .1s; background: rgba(255,255,255,.14); }
.enchip.guest { border: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 0 0 1px var(--v2-line); }
.enchip.guest .enname { color: var(--v2-text-2); letter-spacing: 0; }
.enchip.guest .enrec { color: var(--v2-text-4); }
#entryGo:focus-visible, .enchip:focus-visible, #entrySwitch:focus-visible { outline: none;
  box-shadow: 0 0 0 2px var(--v2-ink), 0 0 0 4px var(--v2-accent); }
#entryNote { font-family: var(--v2-ui); color: var(--v2-text-3); }
@media (prefers-reduced-motion: reduce) { #entryGo, .enchip { transition: none; } }

/* ------------------------------------------------------------------------
   INTRO (first launch) — DOM layer over the WebGL intro: skip affordance
   only. Reading text stays DOM; the 3D is src/intro.js.
   ------------------------------------------------------------------------ */
#intro2 { position: fixed; inset: 0; z-index: 19; display: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
#intro2.on { display: block; }
#intro2 .i2-skip { position: absolute; right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom)); padding: 9px 15px 8px; border-radius: 999px;
  font: 700 10.5px/1 var(--v2-ui); letter-spacing: .28em; text-transform: uppercase;
  color: var(--v2-text-2); background: rgba(10,6,26,.46); border: 1px solid var(--v2-line-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .6s ease .9s; }
#intro2.on .i2-skip { opacity: 1; }
#intro2.out { pointer-events: none; }
#intro2.out .i2-skip { opacity: 0; transition-delay: 0s; }
body.intro-active #screenTitle, body.intro-active #titleLb,
body.intro-active #playerChip, body.intro-active #deckHot {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }


/* ------------------------------------------------------------------------
   TITLE (FRONT DOOR 5, "Showcase") — the player's best cards stand in an
   arc in the measured #titleHero slot (src/title.js); the wordmark overlaps
   the foot of the arc; one caption line; then a DOCK of live tiles. Exactly
   one tile is .lead (main.js titleLeadId): ivory, first, widest.
   Same buttons, same ids, same flow.
   ------------------------------------------------------------------------ */
:root {
  --tl-tile-h: 80px; --tl-lead-h: 98px; --tl-gap: 10px; --tl-r: 18px;
  --tl-tile-bg: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  --tl-tile-line: rgba(255,255,255,.09);
}
#screenTitle { justify-content: flex-end;
  padding-top: calc(max(14px, env(safe-area-inset-top)) + 54px);
  padding-bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px); }
#titleHero { display: block; order: 0; flex: 1 1 auto; min-height: 0; width: 100%; pointer-events: none; }
#logoWrap { order: 1; flex: none; width: min(70vw, 360px); margin: -4px 0 0; animation: none;
  position: relative; z-index: 1;
  transform: translate3d(calc(var(--tx) * -3px), calc(var(--ty) * -2px), 0); }
#logoWrap picture { display: block; }
#titleLogo { filter: drop-shadow(0 10px 30px rgba(0,0,0,.85)); -webkit-filter: drop-shadow(0 10px 30px rgba(0,0,0,.85)); animation: none; }
#titleLogo.slam { animation: v3LogoIn 1.3s var(--v2-ease) .2s backwards; }
@keyframes v3LogoIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
#logoSheen { display: none; }
#logoWrap::before, #logoWrap::after { content: none !important; display: none !important; }
#titleTag { order: 2; flex: none; margin: 6px 0 16px; padding: 0 16px; visibility: visible !important;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--v2-ui); font-weight: 450; font-size: 13px; font-stretch: 100%;
  letter-spacing: 0; text-transform: none; color: var(--v2-text-3); }
#titleTag b { color: var(--v2-warm); font-weight: 560; }
#screenTitle.tl-enter #titleTag { animation: tlFade .9s var(--v2-ease) .55s backwards; }
@keyframes tlFade { from { opacity: 0; } to { opacity: 1; } }

/* the dock */
#titleMenu { order: 3; flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--tl-gap);
  width: min(92vw, 430px); align-items: stretch; }
#screenTitle #titleMenu button {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: 2px; width: auto; min-height: var(--tl-tile-h); margin: 0; padding: 12px 14px 13px; text-align: left;
  border: 0; border-radius: var(--tl-r); overflow: hidden; order: 2;
  font-family: var(--v2-ui); font-weight: 600; font-stretch: 100%; font-size: 15px; line-height: 1.15;
  letter-spacing: -.015em; text-transform: none; color: var(--v2-text); text-shadow: none;
  background: var(--tl-tile-bg);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
  box-shadow: inset 0 0 0 1px var(--tl-tile-line), inset 0 1px 0 rgba(255,255,255,.06), 0 18px 36px -24px rgba(0,0,0,.95);
  transition: transform .45s var(--v2-spring), background-color .2s ease, box-shadow .25s ease;
}
#screenTitle #titleMenu #menuSolo:not(.lead) { order: 1; }
#screenTitle #titleMenu #menuPack:not(.lead) { order: 1; }
#screenTitle #titleMenu #menuCollection:not(.lead) { order: 2; }
#screenTitle #titleMenu #menuMp:not(.lead) { order: 3; }
#screenTitle #titleMenu #menuGauntlet:not(.lead) { order: 4; }
#titleMenu button::before { content: none; }
#titleMenu button > .v2-fill { display: none; }
#titleMenu button .tl { display: block; max-width: calc(100% - 4px); }
#titleMenu button .sub { display: block; margin: 0; max-width: 100%;
  font-family: var(--v2-ui); font-weight: 460; font-stretch: 100%; font-size: 12.5px;
  letter-spacing: 0; text-transform: none; color: var(--v2-text-3); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* visuals: decorative, top-right */
#titleMenu .tv { position: absolute; top: 12px; right: 12px; display: flex; pointer-events: none; }
#titleMenu .tv svg { width: 22px; height: 22px; fill: none; stroke: var(--v2-text-2); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
#titleMenu .tv-pack { top: 8px; right: 10px; width: 56px; height: 44px; }
#titleMenu .tv-pack img { position: absolute; top: 0; right: 0; height: 44px; width: auto; border-radius: 4px;
  box-shadow: 0 10px 18px -8px rgba(0,0,0,.95); transform: rotate(9deg); }
#titleMenu .tv-pack img + img { right: 16px; transform: rotate(-5deg); filter: brightness(.7); }
#menuPack.nopacks .tv-pack img { filter: grayscale(1) brightness(.45); }
#titleMenu .tv-coll img { width: 24px; height: 34px; object-fit: cover; border-radius: 3px; margin-left: -9px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 8px 14px -6px rgba(0,0,0,.95); background: #141220; }
#titleMenu .tv-coll img:nth-child(1) { transform: rotate(-7deg); }
#titleMenu .tv-coll img:nth-child(3) { transform: rotate(7deg); }
#titleMenu .tbar { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.08); overflow: hidden; pointer-events: none; }
#titleMenu .tbar i { display: block; height: 100%; border-radius: 3px; transform-origin: 0 50%; transform: scaleX(.02);
  background: linear-gradient(90deg, var(--v2-accent-2), var(--v2-warm)); }
#menuCollection { padding-bottom: 17px !important; }
#titleMenu .tv-gaunt { gap: 5px; top: 17px; }
#titleMenu .tv-gaunt i { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg);
  box-shadow: inset 0 0 0 1.5px var(--v2-text-3); }
#menuGauntlet.cleared .tv-gaunt i { background: var(--v2-warm); box-shadow: none; }
#menuGauntlet.locked .tv-gaunt { opacity: .45; }

/* LEAD: the one loud thing on the screen */
#screenTitle #titleMenu button.lead:not(.sealed) {
  order: 0; grid-column: 1 / -1; min-height: var(--tl-lead-h); padding: 14px 18px 15px;
  font-size: 19px; font-weight: 640; letter-spacing: -.025em; color: var(--v2-ivory-ink);
  background: var(--v2-ivory); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 #fff, 0 22px 54px -20px rgba(154,140,255,.8);
}
#titleMenu button.lead:not(.sealed) .sub { color: #5d5a72; font-size: 13px; }
#titleMenu button.lead:not(.sealed) .tv svg { stroke: var(--v2-ivory-ink); width: 28px; height: 28px; }
#titleMenu button.lead:not(.sealed) .tv { top: 50%; right: 18px; transform: translateY(-50%); }
#titleMenu button.lead:not(.sealed) .tv-pack { width: 92px; height: 80px; }
#titleMenu button.lead:not(.sealed) .tv-pack img { height: 78px; }
#titleMenu button.lead:not(.sealed) .tv-pack img + img { right: 24px; filter: none; }
@media (hover: hover) {
  #screenTitle #titleMenu button:not(.sealed):not(.lead):hover {
    background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.08), transparent 70%), var(--tl-tile-bg);
    box-shadow: inset 0 0 0 1px var(--v2-line-2), inset 0 1px 0 rgba(255,255,255,.08), 0 22px 40px -22px rgba(0,0,0,.95); }
  #screenTitle #titleMenu button.lead:not(.sealed):hover { background: #fff;
    box-shadow: inset 0 1px 0 #fff, 0 26px 60px -18px rgba(154,140,255,.95); }
}
#titleMenu button:not(.sealed):hover, #titleMenu button:focus-visible { transform: none; }
#screenTitle #titleMenu button:active:not(.sealed) { transform: scale(.97); filter: none; transition-duration: .1s; }
#screenTitle #titleMenu button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--v2-ink), 0 0 0 4px var(--v2-accent); }
#titleMenu button:not(.sealed):hover::after, #titleMenu button:not(.sealed):active::after,
#titleMenu button:not(.sealed)::after { content: none; animation: none; }
#titleMenu button.mp { color: var(--v2-text); }
#titleMenu button.lead.mp { color: var(--v2-ivory-ink); }
/* the gate: Open Pack leads (it is .lead too) and breathes */
#menuPack.gatehero.lead { animation: v2GateHero 2.4s ease-in-out infinite; }
@keyframes v2GateHero { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }

/* SEALED: flat, quiet, a lock instead of the visual */
#screenTitle #titleMenu button.sealed {
  color: var(--v2-text-4);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a586c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") right 14px top 14px / 18px no-repeat,
    rgba(255,255,255,.025);
  box-shadow: inset 0 0 0 1px var(--v2-line); }
#titleMenu button.sealed .tv { display: none; }
#titleMenu button.sealed .sub { color: var(--v2-text-4); }
#titleMenu button.sealed:not(.cracking)::after { content: none; animation: none; }
#menuGauntlet.locked { opacity: 1; }
#gateChip { order: -1; grid-column: 1 / -1; justify-self: center; font-family: var(--v2-ui); font-weight: 500;
  font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--v2-warm); text-shadow: none; padding: 2px 0; }
#gateChip:not(.show) { display: none; }
#socialBadge { position: absolute; top: 10px; right: 40px; background: var(--v2-accent); color: var(--v2-accent-ink); box-shadow: none; }

/* entrance: tiles follow the wordmark in (transform/opacity only) */
#screenTitle.tl-enter #titleMenu button { animation: tlTileIn .75s var(--v2-ease) backwards; }
#screenTitle.tl-enter #titleMenu button.lead { animation-delay: .45s; }
#screenTitle.tl-enter #titleMenu button:not(.lead):nth-of-type(1) { animation-delay: .58s; }
#screenTitle.tl-enter #titleMenu button:not(.lead):nth-of-type(2) { animation-delay: .64s; }
#screenTitle.tl-enter #titleMenu button:not(.lead):nth-of-type(3) { animation-delay: .70s; }
#screenTitle.tl-enter #titleMenu button:not(.lead):nth-of-type(4) { animation-delay: .76s; }
#screenTitle.tl-enter #titleMenu button:not(.lead):nth-of-type(5) { animation-delay: .82s; }
@keyframes tlTileIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- per shape ---- */
@media (max-width: 360px) {
  #screenTitle #titleMenu button { padding: 10px 12px 11px; font-size: 14px; }
  #titleMenu button .sub { font-size: 12px; }
}
@media (max-height: 700px) and (orientation: portrait) {
  :root { --tl-tile-h: 66px; --tl-lead-h: 78px; --tl-gap: 8px; }
  #logoWrap { width: min(62vw, 300px); margin-top: -6px; }
  #titleTag { margin: 4px 0 10px; }
  #titleMenu .tv-pack img { height: 44px; }
  #titleMenu button.lead:not(.sealed) .tv-pack img { height: 62px; }
}
body.geo-cover #titleMenu { width: min(94vw, 360px); }
/* landscape: the dock is one row — the lead first and widest */
@media (orientation: landscape) {
  #titleMenu { grid-template-columns: 1.55fr repeat(4, minmax(0, 1fr)); width: min(96vw, 1080px); }
  #screenTitle #titleMenu button.lead:not(.sealed) { grid-column: auto; min-height: var(--tl-tile-h); }
  #screenTitle #titleMenu button { min-height: var(--tl-tile-h); }
  :root { --tl-tile-h: 92px; }
  #logoWrap { width: min(38vw, 420px); margin-top: -14px; }
  #titleMenu:has(#gateChip.show) { grid-template-columns: 1.55fr repeat(4, minmax(0, 1fr)); }
}
body.geo-square #titleMenu { gap: var(--tl-gap); }
body.geo-square #screenTitle #titleMenu button { width: auto; }
body.geo-square #logoWrap { width: min(46vw, 360px); }
body.geo-square #titleTag { margin: 4px 0 14px; }
/* tall-ish landscape under 900px (Fold open, small tablets): the lead stands
   two rows tall beside a 2x2 of the others */
@media (orientation: landscape) and (max-width: 900px) and (min-height: 461px) {
  :root { --tl-tile-h: 70px; }
  #titleMenu, #titleMenu:has(#gateChip.show) { grid-template-columns: 1.25fr 1fr 1fr; width: min(94vw, 720px); }
  #screenTitle #titleMenu button.lead:not(.sealed) { grid-row: span 2; font-size: 18px; }
  #screenTitle #titleMenu button { padding: 10px 12px 11px; font-size: 14px; }
  #titleMenu button .sub { font-size: 12px; }
}
body.geo-square #screenTitle { padding-bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px); }
@media (orientation: landscape) and (max-height: 460px) {
  :root { --tl-tile-h: 70px; --tl-gap: 8px; --tl-r: 15px; }
  #screenTitle { justify-content: flex-end; padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  #titleHero { display: block; }
  #logoWrap { width: min(26vw, 200px); margin: -16px 0 8px; }
  #titleTag { margin: 2px 0 8px; font-size: 12px; }
  #titleMenu { width: calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  #screenTitle #titleMenu button { padding: 9px 11px 10px; font-size: 13.5px; border-radius: var(--tl-r); }
  #screenTitle #titleMenu button.lead:not(.sealed) { font-size: 16px; padding: 10px 13px 11px; }
  #titleMenu button .sub { display: block; font-size: 11.5px; }
  #titleMenu button.lead:not(.sealed) .sub { font-size: 12px; }
  #titleMenu .tv { top: 9px; right: 9px; }
  #titleMenu .tv svg { width: 18px; height: 18px; }
  #titleMenu .tv-pack { width: 48px; height: 40px; top: 6px; }
  #titleMenu .tv-pack img { height: 38px; }
  #titleMenu button.lead:not(.sealed) .tv-pack { width: 64px; height: 56px; }
  #titleMenu button.lead:not(.sealed) .tv-pack img { height: 54px; }
  #titleMenu button.lead:not(.sealed) .tv svg { width: 22px; height: 22px; }
  #titleMenu .tv-coll img { width: 18px; height: 26px; }
  #titleMenu .tbar { left: 11px; right: 11px; bottom: 6px; }
  #titleMenu #gateChip { grid-column: 1 / -1; }
  /* the footer pills move to the top bar; the dock owns the bottom edge */
  body.on-title #titleLb { display: inline-flex !important; top: max(10px, env(safe-area-inset-top)); bottom: auto; right: 66px; }
  #playerChip { top: max(10px, env(safe-area-inset-top)); bottom: auto; }
  #titleSettings { top: max(10px, env(safe-area-inset-top)) !important; width: 44px; padding: 0 !important; justify-content: center; }
  #titleSettings .lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #titleLogo.slam, #menuPack.gatehero, #screenTitle.tl-enter #titleMenu button, #screenTitle.tl-enter #titleTag { animation: none !important; }
  #screenTitle #titleMenu button { transition: none; }
}
/* title12: the corner 3D card pile IS the Collection door on the title
   (placement + count styling: see "title12 card pile" at the end) */

/* title8: a COMPACT glass dock — icon + label pills, live info only as a tiny
   badge (packs on Open Pack, x/1538 on Collection). The lead keeps a warm
   edge instead of a white slab, so the stage and its cards show through. */
:root { --tl8-h: 46px; --tl8-lead: 52px; }
#titleTag { margin: 4px 0 12px; }
#titleMenu { gap: 8px; width: min(92vw, 420px); }
#screenTitle #titleMenu button, #screenTitle #titleMenu button.lead:not(.sealed) {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px;
  min-height: var(--tl8-h); padding: 0 12px; border-radius: 14px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: var(--v2-text);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)), rgba(14,10,26,.36);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.07), 0 10px 24px -18px rgba(0,0,0,.9); }
#titleMenu button .tl { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#titleMenu button .sub { display: none; }
#titleMenu #menuPack .sub, #titleMenu #menuCollection .sub, #titleMenu button.lead#menuPack .sub {
  display: inline-block; flex: none; margin-left: auto; max-width: 52%; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.35; color: var(--v2-text-2);
  background: rgba(255,255,255,.08); font-variant-numeric: tabular-nums; letter-spacing: 0; }
#titleMenu .tv, #titleMenu button.lead:not(.sealed) .tv { position: static; order: -1; flex: none; transform: none; }
#titleMenu .tv svg, #titleMenu button.lead:not(.sealed) .tv svg { width: 18px; height: 18px; stroke: currentColor; opacity: .8; }
#titleMenu .tv-pack, #titleMenu button.lead:not(.sealed) .tv-pack { width: 17px; height: 24px; }
#titleMenu .tv-pack img, #titleMenu button.lead:not(.sealed) .tv-pack img { position: static; height: 24px; width: auto;
  transform: rotate(6deg); border-radius: 2px; box-shadow: 0 4px 8px -4px rgba(0,0,0,.9); }
#titleMenu .tv-pack img + img { display: none; }
#titleMenu .tv-coll img { width: 16px; height: 22px; margin: 0; transform: rotate(-5deg) !important; }
#titleMenu .tv-coll img + img { display: none; }
#titleMenu .tbar { left: 12px; right: 12px; bottom: 4px; height: 2px; }
#menuCollection { padding-bottom: 0 !important; }
#titleMenu .tv-gaunt { gap: 3px; }
#titleMenu .tv-gaunt i { width: 6px; height: 6px; }
#screenTitle #titleMenu button.lead:not(.sealed) {
  grid-column: 1 / -1; min-height: var(--tl8-lead); font-size: 16px; font-weight: 640; color: #fff6ea;
  background: linear-gradient(180deg, rgba(255,214,160,.15), rgba(255,180,110,.05)), rgba(22,14,28,.42);
  box-shadow: inset 0 0 0 1px rgba(255,206,150,.5), inset 0 1px 0 rgba(255,232,196,.32), 0 12px 30px -16px rgba(255,166,86,.6); }
#titleMenu button.lead:not(.sealed) .sub, #titleMenu button.lead#menuPack .sub { color: var(--v2-warm); background: rgba(255,200,140,.14); }
#titleMenu button.lead:not(.sealed) .tv svg { stroke: var(--v2-warm); opacity: 1; }
@media (hover: hover) {
  #screenTitle #titleMenu button:not(.sealed):not(.lead):hover { background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.04)), rgba(14,10,26,.4); }
  #screenTitle #titleMenu button.lead:not(.sealed):hover { background: linear-gradient(180deg, rgba(255,214,160,.22), rgba(255,180,110,.08)), rgba(22,14,28,.42); }
}
#screenTitle #titleMenu button.sealed { background-position: right 12px center; background-size: 16px; }
@media (max-height: 700px) and (orientation: portrait) { :root { --tl8-h: 42px; --tl8-lead: 46px; } }
@media (orientation: landscape) {
  #titleMenu, #titleMenu:has(#gateChip.show) { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); width: min(96vw, 980px); }
  #screenTitle #titleMenu button.lead:not(.sealed) { grid-column: auto; grid-row: auto; min-height: var(--tl8-h); }
  #screenTitle #titleMenu button { font-size: 14px; }
}
@media (orientation: landscape) and (max-height: 460px) {
  :root { --tl8-h: 40px; }
  #titleMenu { width: calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  #screenTitle #titleMenu button, #screenTitle #titleMenu button.lead:not(.sealed) { font-size: 13px; padding: 0 10px; gap: 7px; }
  #titleMenu #menuCollection .sub { display: none; }
}

/* title chrome: settings (top-right), player (bottom-left), leaderboard (bottom-right) */
#titleSettings, #titleLb, #playerChip {
  font-family: var(--v2-ui); font-weight: 520; font-size: 13px; letter-spacing: 0; text-transform: none; }
#playerChip b { color: var(--v2-text); letter-spacing: 0; font-weight: 600; }
#playerChip span { color: var(--v2-text-3); letter-spacing: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
#playerChip .chipmark { color: var(--v2-warm); text-shadow: none; }

/* the HOME medallion: the crest on a quiet hairline ring */
#homeMedal { border: 1px solid rgba(255,255,255,.22);
  background: url('../assets/web/crest.webp') center / cover no-repeat;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.9); }
#homeMedal:hover { border-color: rgba(255,255,255,.45); }

/* the transition veil: plain ink */
#veil { background: radial-gradient(70% 60% at 50% 45%, #101018, #050508 72%); }

/* now-playing toast */
#npToast { font-family: var(--v2-ui); font-weight: 500; letter-spacing: 0; color: var(--v2-text-2);
  background: rgba(16,16,22,.78); border-color: var(--v2-line-2);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur); }

/* ------------------------------------------------------------------------
   SETTINGS — a frosted sheet: grouped rows on hairlines, iOS toggles
   ------------------------------------------------------------------------ */
#settingsDrawer {
  background: rgba(14,14,20,.86);
  -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  border-left: 0; border-image: none;
  box-shadow: inset 1px 0 0 var(--v2-line-2), -30px 0 80px -20px rgba(0,0,0,.9);
  font-family: var(--v2-ui); overflow-y: auto; overscroll-behavior: contain;
}
#settingsDrawer h3 { font-family: var(--v2-ui); font-weight: 640; font-size: 22px;
  letter-spacing: -.03em; text-transform: none; color: var(--v2-text); margin-bottom: 0; }
#settingsDrawer h3::after { content: none; }
.setRow { font-family: var(--v2-ui); font-weight: 520; font-size: 14px; color: var(--v2-text);
  letter-spacing: -.005em; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--v2-line); }
.setRow .sub { font-weight: 450; font-size: 12px; color: var(--v2-text-3); letter-spacing: 0; }
.toggle { width: 50px; height: 30px; flex: none; border: 0; background: rgba(255,255,255,.14);
  box-shadow: none; transition: background-color .25s ease; }
.toggle::after { top: 3px; left: 3px; width: 24px; height: 24px; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.4); transition: transform .4s var(--v2-spring); }
.toggle.on { background: var(--v2-accent-2); box-shadow: none; }
.toggle.on::after { transform: translateX(20px); background: #fff; }
.toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--v2-ink), 0 0 0 4px var(--v2-accent); }
#setDepthAmt { accent-color: var(--v2-accent); }
/* the readout may wrap inside its row instead of running off the drawer */
#settingsDrawer .qval { color: var(--v2-good); flex: 0 1 auto; min-width: 0; max-width: 60%;
  font-family: var(--v2-ui); font-weight: 600; letter-spacing: .02em; }
#settingsDrawer .qval.reduced { color: var(--v2-warn); }
#settingsDrawer .pill { padding-left: 16px; padding-right: 16px; white-space: nowrap; flex: none; }
#setIntroReplay { flex: none; }

/* ------------------------------------------------------------------------
   NAME PICK overlay (switch player) + the social / trade panels
   ------------------------------------------------------------------------ */
#pickerOverlay { background: rgba(4,4,8,.66); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.pk-panel, .trade-panel, #gauntPanel .gp, .mpPanel {
  border: 0; border-radius: var(--v2-r-lg);
  background: var(--v2-glass-solid);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 40px 90px -30px rgba(0,0,0,.95);
}
.pk-title, .trade-panel h2 { font-family: var(--v2-ui); font-weight: 640; color: var(--v2-text);
  letter-spacing: -.02em; text-transform: none; }
.trade-panel h2 { font-size: 18px; }
.pk-sub { font-family: var(--v2-ui); color: var(--v2-text-3); letter-spacing: 0; text-transform: none; }
.trade-panel { font-family: var(--v2-ui); }
.trade-close { color: var(--v2-text-3); }
.trade-friend, .trade-text-btn, .trade-actions button, #tradeLive {
  font-family: var(--v2-ui); font-stretch: 100%; font-weight: 540; letter-spacing: 0; text-transform: none;
  border-radius: 14px; min-height: 44px; color: var(--v2-text);
  background: var(--v2-glass); border-color: var(--v2-line-2); box-shadow: none; }
.trade-friend small { color: var(--v2-text-3); }
#tradeLive { background: rgba(154,140,255,.16); border-color: rgba(154,140,255,.4); }
.trade-mini, .trade-offer { background: rgba(255,255,255,.04); border-color: var(--v2-line-2); }
.trade-mini img { border-color: var(--v2-line-2); }
.trade-offer h3, .trade-arrow { color: var(--v2-text); }
.trade-primary { color: var(--v2-ivory-ink) !important; border-color: transparent !important;
  background: var(--v2-ivory) !important; text-shadow: none;
  box-shadow: 0 14px 34px -16px rgba(154,140,255,.7) !important; }
#tradeComposeStatus { color: var(--v2-good); }
#tradeCompose, #tradeSocial { background: rgba(4,4,8,.72); }

/* ------------------------------------------------------------------------
   LEADERBOARD + MULTIPLAYER — quiet ink, glass rows, editorial headings
   ------------------------------------------------------------------------ */
#lbBg, #mpBg { filter: brightness(.22) saturate(.5); }
#lbScreen::before, #mpScreen::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 50% at 50% 0%, rgba(90,80,170,.18), transparent 70%),
    linear-gradient(180deg, rgba(6,6,9,.3), rgba(6,6,9,.85)); }
#lbScreen h2, #mpScreen h2 { font-family: var(--v2-ui); font-weight: 650; font-size: 28px;
  letter-spacing: -.035em; padding: 0; text-transform: none;
  background: none; -webkit-text-fill-color: currentColor; color: var(--v2-text); }
#lbScreen h2::after, #mpScreen h2::after { content: none; }
.lbRow { font-family: var(--v2-ui); border-radius: 14px; background: var(--v2-glass);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
  border: 0; box-shadow: inset 0 0 0 1px var(--v2-line); }
.lbRow.me { background: rgba(154,140,255,.14); box-shadow: inset 0 0 0 1px rgba(154,140,255,.45); border: 0; }
.lbRow .lbRank { font-family: var(--v2-ui); font-weight: 600; color: var(--v2-text-3); font-variant-numeric: tabular-nums; }
.lbRow .lbName { font-stretch: 100%; font-weight: 560; letter-spacing: -.01em; text-transform: none; color: var(--v2-text); }
.lbRow.me .lbName::after { color: var(--v2-accent); }
.lbRow .lbRec { font-family: var(--v2-ui); font-weight: 600; font-size: 13px; color: var(--v2-text);
  font-variant-numeric: tabular-nums; }
.lbRow .lbMeta { color: var(--v2-text-3); }
.lbEmpty { font-family: var(--v2-ui); color: var(--v2-text-3); }
#mpCode { font-family: var(--v2-ui); font-weight: 650; letter-spacing: .12em; color: var(--v2-text); text-shadow: none; }
#mpStatus { font-family: var(--v2-ui); color: var(--v2-text-3); }
#mpCodeInput { font-family: var(--v2-ui); font-weight: 600; background: rgba(255,255,255,.05); border-color: var(--v2-line-2);
  color: var(--v2-text); border-radius: 14px; min-height: 44px; }
#mpCodeInput:focus { border-color: var(--v2-accent); }

/* results (R3's) keep their glass pills until they adopt the kit */
#interActions .pill {
  background: var(--v2-glass); color: var(--v2-text);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--v2-inset), 0 0 0 1px var(--v2-line), 0 10px 26px -14px rgba(0,0,0,.95);
}
#interActions .pill::before { background: var(--v2-spectrum); opacity: .42; }

/* ------------------------------------------------------------------------
   RESULTS — VICTORY / DEFEAT
   ------------------------------------------------------------------------ */
#interstitial { font-family: var(--v2-ui); }
#interBg { filter: saturate(.8) brightness(.7); }
/* victory art is painted gold: turn its light and confetti PRISM violet
   (one filter on the already-filtered layer; the streaks above add the spectrum) */
#interstitial:not(.defeat) #interBg { filter: hue-rotate(218deg) saturate(1.25) brightness(.7) contrast(1.06); }
#interstitial::before {
  background:
    radial-gradient(90% 55% at 50% 22%, rgba(120,70,255,.34), transparent 64%),
    radial-gradient(ellipse at 50% 46%, rgba(5,3,14,.1) 26%, rgba(5,3,14,.86) 100%); }
#interstitial::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background:
    linear-gradient(112deg, transparent 38%, rgba(95,243,255,.14) 44%, transparent 47%),
    linear-gradient(104deg, transparent 52%, rgba(255,95,210,.12) 57%, transparent 61%),
    linear-gradient(118deg, transparent 60%, rgba(255,196,107,.1) 64%, transparent 67%); }
#interWord { font-family: var(--v2-display); font-weight: 900; letter-spacing: .06em;
  font-size: clamp(40px, 12.4vw, 104px); padding: 0 .06em;
  background: var(--v2-chrome); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.4)) drop-shadow(-3px 0 0 rgba(39,231,255,.55))
    drop-shadow(3px 0 0 rgba(255,63,207,.5)) drop-shadow(0 12px 30px rgba(92,52,220,.55));
  animation: v2Pop .9s var(--v2-spring) both; }
#interstitial.defeat #interWord {
  background: linear-gradient(180deg, #eeeaff 0%, #b9b1de 40%, #4a4178 54%, #6d64a0 70%, #cfc8ee 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(-2px 0 0 rgba(106,139,255,.4)) drop-shadow(2px 0 0 rgba(176,107,255,.35))
    drop-shadow(0 10px 26px rgba(20,10,50,.8)); }
#interstitial.defeat::before { background:
  radial-gradient(90% 55% at 50% 22%, rgba(60,40,140,.3), transparent 64%),
  radial-gradient(ellipse at 50% 46%, rgba(5,3,14,.2) 26%, rgba(5,3,14,.9) 100%); }
#interNarr { font-family: var(--v2-ui); font-weight: 600; font-size: 13px; letter-spacing: .08em;
  text-transform: none; color: var(--v2-text-2); max-width: min(90vw, 560px); padding: 0 12px;
  line-height: 1.45; }
.istat { border-radius: 16px; border: 1px solid var(--v2-line);
  background: var(--v2-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--v2-inset); }
.istat .v { font-family: var(--v2-display); font-weight: 800; font-size: 20px; color: var(--v2-text);
  font-variant-numeric: tabular-nums; }
.istat .k { font-family: var(--v2-ui); font-weight: 700; font-size: 9px; letter-spacing: .22em; color: var(--v2-text-3); }
.istat.mvp, .istat.drawmvp { border-color: transparent;
  background: linear-gradient(165deg, rgba(70,46,150,.7), rgba(16,10,38,.82)) padding-box,
    var(--v2-spectrum) border-box; border: 1px solid transparent; }
.istat.mvp .k { color: var(--v2-hot); }
.istat.mvp .v, .istat.drawmvp .v { font-family: var(--v2-ui); font-stretch: 112%; font-weight: 800; font-size: 15px; }
.istat img { border-radius: 10px; border: 1px solid rgba(214,200,255,.45);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.9); }
#interProgress { background: rgba(10,6,26,.74); border-color: var(--v2-line-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 16px; }
.ixp-head { font-family: var(--v2-ui); color: var(--v2-text-2); }
.ixp-name { font-family: var(--v2-ui); color: var(--v2-text); }
.ixp-name span { color: var(--v2-text-3); }
.ixp-fill, .dfXpFill { background: linear-gradient(90deg, #6a8bff, #b06bff 45%, #ff5fd2 75%, #ffc46b); }
.ixp-near { color: var(--v2-text-3); }
.ixp-near.hot { color: var(--v2-hot); }
.ixp-gain { color: var(--v2-good); font-family: var(--v2-ui); }
.ixp-gain span { color: var(--v2-hot); }
#interReward .rwn { font-family: var(--v2-display); }
#interActions .pill { font-family: var(--v2-ui); font-stretch: 116%; font-weight: 800; letter-spacing: .18em; }
#interContinue { color: #0b0620; background: linear-gradient(100deg, #9ef6ff, #c7a6ff 45%, #ffb0ea);
  box-shadow: 0 14px 34px -14px rgba(176,107,255,.95), inset 0 1px 0 rgba(255,255,255,.6); }
#interContinue::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #interWord { animation: none; } }

/* ------------------------------------------------------------------------
   GAUNTLET panels
   ------------------------------------------------------------------------ */
#gauntPanel { background: rgba(4,2,12,.8); }
#gauntPanel .gp-k { font-family: var(--v2-ui); font-weight: 700; color: #ffb4e6; }
#gauntPanel .gp-t { font-family: var(--v2-display); font-weight: 900; color: var(--v2-text); letter-spacing: .02em; }
#gauntPanel .gp-b { font-family: var(--v2-ui); color: var(--v2-text-2); }
#gauntPanel .gq img { border-color: rgba(214,200,255,.3); }
#gauntPanel .gp-rw { color: var(--v2-hot); }


/* ------------------------------------------------------------------------
   DECK BUILDER — same bands, same buttons; ink bands, glass chips, the
   ivory primary and the violet GO. Geometry is untouched (the SC25 band +
   geometry suites pin it): colours, type and borders only.
   ------------------------------------------------------------------------ */
#deckTopBand { background: linear-gradient(180deg, rgba(6,6,9,.96) 42%, rgba(6,6,9,.74) 78%, transparent); }
#deckBottomBand { background: linear-gradient(0deg, rgba(6,6,9,.97) 46%, rgba(6,6,9,.8) 78%, transparent); }
#pickHeader { font-family: var(--v2-ui); font-weight: 600; color: var(--v2-text-4);
  text-shadow: 0 2px 14px rgba(0,0,0,.9); }
#pickHeader .pickStep b { color: var(--v2-text-3); }
#pickHeader .pickStep.active { color: var(--v2-text); text-shadow: 0 2px 14px rgba(0,0,0,.9); }
#pickHeader .pickStep.done { color: var(--v2-good); }
#pickHeader .pickArrow { color: var(--v2-text-4); }
#ownedCount { color: var(--v2-text-3); font-family: var(--v2-ui); }
.dslot { border-color: var(--v2-line-2); background: rgba(255,255,255,.04); box-shadow: none; }
.dslot::before { border-color: var(--v2-line); }
.dslot.filled { border-color: rgba(255,255,255,.7); }
.dslot.support { border-color: rgba(154,140,255,.4); background: rgba(154,140,255,.06); }
.dslot.support.filled { border-color: rgba(154,140,255,.85); }
.dslot.support .tag { color: var(--v2-accent); }
.dslot .tag { color: var(--v2-text-4); font-family: var(--v2-ui); }
/* the focus block keeps the system face: its name/passive/power lines are
   width-fitted in V1 metrics, and the wider UI face wraps them (deckzones) */
#deckFocus { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#deckFocus .dfPwr .k { color: var(--v2-text-3); }
.dfXpFill { background: var(--v2-accent); }
#deckHint { font-family: var(--v2-ui); color: var(--v2-text-3); }
#deckStart { font-family: var(--v2-ui); font-weight: 600; color: var(--v2-text-3);
  background: rgba(255,255,255,.04); }
#deckStart.draw-ready::after { box-shadow: 0 0 40px 2px rgba(154,140,255,.7); }
#deckStart.loading-reels { color: var(--v2-text); border-color: var(--v2-line-2); background: rgba(24,22,36,.95); }
#deckSearch, #binderSearch { background: rgba(255,255,255,.05); border-color: var(--v2-line-2); color: var(--v2-text);
  font-family: var(--v2-ui); }
#deckSearch:focus, #binderSearch:focus { border-color: var(--v2-accent); }
#binderSearch::placeholder, #deckSearch::placeholder { color: var(--v2-text-4); }
#deckTypeFilters .sort { color: var(--v2-accent); }
#deckPanel { font-family: var(--v2-ui); }

/* ------------------------------------------------------------------------
   LUCKY DRAW — a quiet cabinet; FIGHT is the violet GO. Same reels, lever
   and countdown.
   ------------------------------------------------------------------------ */
#slotDraw { background: radial-gradient(circle at 50% 42%, rgba(110,96,220,.12), transparent 60%); }
#slotDraw::before { border-color: var(--v2-line-2); box-shadow: inset 0 0 50px rgba(0,0,0,.5); }
#slotTitle { font-family: var(--v2-ui); font-weight: 650; letter-spacing: -.03em; text-indent: 0; text-transform: none;
  background: none; -webkit-text-fill-color: currentColor; color: var(--v2-text);
  text-shadow: none; filter: none; }
#slotSub { font-family: var(--v2-ui); color: var(--v2-text-3); letter-spacing: 0; }
#slotDeckHeader { font-family: var(--v2-ui); color: var(--v2-text); }
.slotResultCard .srPwr { color: var(--v2-warm); font-family: var(--v2-ui); }
#slotFight .fightRing { background: conic-gradient(#ffffff calc(var(--p,1)*1turn), rgba(255,255,255,.12) 0); }
/* forge draw: two reels, one divider; mixed-case captions; a plain lever */
#slotDraw.reels2::before { background: linear-gradient(90deg, transparent 49.8%, var(--v2-line) 50%, transparent 50.2%); }
#slotSub, #slotSkip { text-transform: none; letter-spacing: 0; font-size: 13px; }
#slotSkip { font-family: var(--v2-ui); color: var(--v2-text-3); }
#slotDeckHeader { text-transform: none; letter-spacing: -.02em; text-indent: 0; text-shadow: none; }
.slotResultCard .srName { text-transform: none; font-weight: 600; }
.slotResultCard .srMeta { text-transform: none; letter-spacing: 0; font-weight: 520; }
#slotLever::before { background: var(--v2-line-2); box-shadow: none; }
#slotLever::after { background: var(--v2-ivory); box-shadow: 0 0 16px -4px rgba(154,140,255,.8); }

/* ------------------------------------------------------------------------
   COLLECTION (binder) + MY DECK header + PACK chrome
   ------------------------------------------------------------------------ */
#binder { background: radial-gradient(90% 50% at 50% 0%, rgba(80,70,160,.14), transparent 70%), rgba(6,6,9,.97);
  color: var(--v2-text); font-family: var(--v2-ui); }
#binder .bhead .btitle { font-family: var(--v2-ui); font-weight: 650; letter-spacing: -.03em; text-transform: none;
  background: none; -webkit-text-fill-color: currentColor; color: var(--v2-text); }
body.geo-cover #binder .bhead .btitle { letter-spacing: -.02em; }
#binder .bhead .bcount { color: var(--v2-text-3); font-variant-numeric: tabular-nums; }
#binderClose { border-color: var(--v2-line-2); background: var(--v2-glass); color: var(--v2-text-2); box-shadow: none; }
#binderFilterBtn { border-color: var(--v2-line-2); background: var(--v2-glass); color: var(--v2-text); }
#binderResult { color: var(--v2-text-3); }
#fanHead .fh-title { font-family: var(--v2-ui); font-weight: 650; letter-spacing: -.03em; padding: 0; text-transform: none;
  background: none; -webkit-text-fill-color: currentColor; color: var(--v2-text); }
#fanHead .fh-sub { color: var(--v2-text-3); font-family: var(--v2-ui); }
#fanHead .fh-sub #fhPlayer { color: var(--v2-text-2); }
#packCount { font-family: var(--v2-ui); color: var(--v2-text); border-color: var(--v2-line-2);
  background: rgba(16,16,22,.8); -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur); }
#packOpenAll span { font-family: var(--v2-ui); color: var(--v2-text-3); text-decoration-color: rgba(255,255,255,.2); }
#packSkipBtn { font-family: var(--v2-ui); font-weight: 600; }
#packTapHint { font-family: var(--v2-ui); }

/* ------------------------------------------------------------------------
   R3 FACE-OFF — the two fighters named before round 1 (battle.js faceOffStep)
   and the victory confetti burst (shell.js showInterstitial). New elements
   only; no V1 battle HUD rule is restyled. Keyframes are transform/opacity;
   the glows are static text-shadows; closed = visibility:hidden.
   ------------------------------------------------------------------------ */
#faceOff { position: fixed; left: 50%; z-index: 19; pointer-events: none;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 10px);
  width: min(94vw, 1040px); transform: translateX(-50%);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: .5em;
  visibility: hidden; }
#faceOff.on { visibility: visible; }
#faceOff .fo-side { display: flex; flex-direction: column; min-width: 0; opacity: 0; }
#faceOff .fo-L { align-items: flex-end; text-align: right; }
#faceOff .fo-R { align-items: flex-start; text-align: left; }
#faceOff .fo-name { font-family: var(--v2-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(24px, 4.4vw, 54px); line-height: .98; letter-spacing: .01em; color: var(--v2-text);
  overflow-wrap: anywhere;
  text-shadow: 0 0 22px var(--fc, var(--v2-violet)), 0 0 60px var(--fc, var(--v2-violet)), 0 4px 14px rgba(0,0,0,.95); }
#faceOff .fo-name.long { font-size: clamp(20px, 3.4vw, 42px); }
#faceOff .fo-type { font-family: var(--v2-ui); font-weight: 800; font-size: 14px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--fc, var(--v2-violet)); margin-bottom: 2px;
  text-shadow: 0 2px 8px rgba(0,0,0,.95); }
#faceOff .fo-vs, #faceOff .fo-go { font-family: var(--v2-display); font-weight: 900; line-height: 1;
  background: var(--v2-chrome); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; opacity: 0; }
#faceOff .fo-vs { font-size: clamp(34px, 6.4vw, 78px); padding: 0 .08em; }
#faceOff .fo-go { position: absolute; left: 0; right: 0; top: 50%; text-align: center;
  font-size: clamp(54px, 13vw, 140px); margin-top: -.5em; letter-spacing: .02em; }
#faceOff.on .fo-L { animation: foInL .5s var(--v2-spring) .05s both; }
#faceOff.on .fo-R { animation: foInR .5s var(--v2-spring) .12s both; }
#faceOff.on .fo-vs { animation: foVs .42s var(--v2-spring) .34s both; }
#faceOff.go .fo-side, #faceOff.go .fo-vs { animation: foOut .26s ease-in both; }
#faceOff.go .fo-go { animation: foGo .9s var(--v2-ease) both; }
@keyframes foInL { from { opacity: 0; transform: translate3d(-36vw, 0, 0) skewX(-10deg); }
  to { opacity: 1; transform: none; } }
@keyframes foInR { from { opacity: 0; transform: translate3d(36vw, 0, 0) skewX(10deg); }
  to { opacity: 1; transform: none; } }
@keyframes foVs { from { opacity: 0; transform: scale(2.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes foOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.92); } }
@keyframes foGo { 0% { opacity: 0; transform: scale(1.9); } 22% { opacity: 1; transform: scale(.96); }
  70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
/* portrait and near-square (Fold): a diagonal stack — you top-left, VS, them bottom-right */
@media (max-aspect-ratio: 11/10) {
  #faceOff { grid-template-columns: 1fr; row-gap: 2px; }
  #faceOff .fo-L { align-items: flex-start; text-align: left; }
  #faceOff .fo-R { align-items: flex-end; text-align: right; }
  #faceOff .fo-vs { justify-self: center; }
  #faceOff .fo-name { font-size: clamp(26px, 7.6vw, 54px); }
  #faceOff .fo-name.long { font-size: clamp(21px, 5.6vw, 42px); }
}
@media (prefers-reduced-motion: reduce) {
  #faceOff.on .fo-L, #faceOff.on .fo-R, #faceOff.on .fo-vs { animation: none; opacity: 1; }
  #faceOff.go .fo-side, #faceOff.go .fo-vs { animation: none; opacity: 0; }
  #faceOff.go .fo-go { animation: none; opacity: 1; }
}

/* victory: one live burst of prism confetti over the results (once, ~3s) */
/* z -1 + last child: above #interBg, under every word and button. `.on` is
   removed by shell.js when the burst ends; inherit = hidden with the screen. */
#interConfetti { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  visibility: hidden; }
#interConfetti.on { visibility: inherit; }
#interConfetti i { position: absolute; top: -4vh; width: 9px; height: 15px; border-radius: 2px;
  background: var(--cc, var(--v2-violet)); opacity: 0; }
#interConfetti.on i { animation: v2Conf var(--cd, 2.6s) cubic-bezier(.25,.6,.45,1) var(--cw, 0s) both; }
@keyframes v2Conf {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  8% { opacity: 1; }
  80% { opacity: .95; }
  100% { opacity: 0; transform: translate3d(var(--cx, 0px), 108vh, 0) rotate(var(--cr, 540deg)); } }
@media (prefers-reduced-motion: reduce) { #interConfetti.on { visibility: hidden; } }


/* ==========================================================================
   OBSIDIAN UI KIT — the shell's button family, chips, tabs, toggles and
   surfaces. Replaces the PRISM kit. Driven by the --v2-btn-* tokens, so a
   screen adopts the look by class (or by joining a selector list here).

     .v2-btn                     base: 44px min target, 14px radius, Geist 600
     .v2-btn--primary            solid ivory, ink text — ONE per screen
     .v2-btn--hot                solid violet — the "go" moment (FIGHT, DRAW)
     .v2-btn--secondary          frosted glass on a hairline
     .v2-btn--ghost              text-weight action, hairline on hover
     .v2-btn--icon               44x44 round glass (put an svg/glyph inside)
     .v2-btn--sm / .v2-btn--lg   size steps (sm stays >= 44px hit height)
     .v2-chip  (+ .on)           filter chip; .on = ivory fill
     .v2-tabs > .v2-tab (+ .on)  segmented control; .on = raised glass thumb
     .v2-panel                   modal / sheet surface
   States: hover brightens + a soft cursor-following highlight (src/prism.js
   writes --mx/--my); press is a spring scale (.97); focus is a 2px violet
   ring; disabled goes matte. No idle loops.
   ========================================================================== */
:root {
  --v2-tap: 44px;
  --v2-r-btn: 14px; --v2-r-tile: 12px; --v2-r-pill: 999px; --v2-r-panel: 22px;
  --v2-s1: 4px; --v2-s2: 8px; --v2-s3: 12px; --v2-s4: 16px; --v2-s5: 24px; --v2-s6: 32px;
  --v2-fs-xs: 11px; --v2-fs-sm: 12.5px; --v2-fs-md: 15px; --v2-fs-lg: 17px; --v2-fs-xl: 22px;
  --v2-track: -.01em; --v2-track-caps: .06em;
  --v2-focus: 0 0 0 2px #060609, 0 0 0 4px #9a8cff;
  --v2-btn-primary: #f3f2f7;
  --v2-btn-primary-ink: #0c0b12;
  --v2-btn-primary-glow: rgba(154,140,255,.7);
  --v2-btn-hot: #7c6cf5;
  --v2-btn-hot-hi: #8f80ff;
  --v2-btn-hot-glow: rgba(124,108,245,.75);
  --v2-btn-glass: rgba(255,255,255,.07);
  --v2-btn-glass-hi: rgba(255,255,255,.11);
  --v2-btn-line: rgba(255,255,255,.12);
  --v2-press: scale(.97);
}

/* ---------------------------------------------------------------- base */
.v2-btn {
  position: relative; isolation: isolate; appearance: none; cursor: pointer; border: 0;
  min-height: var(--v2-tap); padding: 0 var(--v2-s5);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--v2-s2);
  border-radius: var(--v2-r-btn);
  font: 600 var(--v2-fs-md)/1.1 var(--v2-ui); letter-spacing: var(--v2-track);
  text-transform: none; color: var(--v2-text);
  -webkit-tap-highlight-color: transparent;
  transition: transform .45s var(--v2-spring), background-color .2s ease, box-shadow .25s var(--v2-ease);
}
.v2-btn--sm { padding: 0 var(--v2-s4); font-size: var(--v2-fs-sm); border-radius: 12px; }
.v2-btn--lg { min-height: 56px; padding: 0 var(--v2-s6); font-size: var(--v2-fs-lg); border-radius: 16px; }
.v2-btn--primary { color: var(--v2-btn-primary-ink); background: var(--v2-btn-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 16px 40px -18px var(--v2-btn-primary-glow); }
.v2-btn--hot { color: #fff; background: var(--v2-btn-hot);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 16px 40px -16px var(--v2-btn-hot-glow); }
.v2-btn--secondary { background: var(--v2-btn-glass);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
  box-shadow: inset 0 0 0 1px var(--v2-btn-line); }
.v2-btn--ghost { background: transparent; color: var(--v2-text-2); box-shadow: none; }
.v2-btn--icon { width: var(--v2-tap); min-width: var(--v2-tap); padding: 0; border-radius: 50%; }
@media (hover: hover) {
  .v2-btn--primary:hover:not(:disabled) { background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(154,140,255,.2), transparent 70%), #fff; }
  .v2-btn--hot:hover:not(:disabled) { background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.2), transparent 70%), var(--v2-btn-hot-hi); }
  .v2-btn--secondary:hover:not(:disabled) { background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.08), transparent 70%), var(--v2-btn-glass-hi); }
  .v2-btn--ghost:hover:not(:disabled) { background: rgba(255,255,255,.06); color: var(--v2-text); }
}
.v2-btn:active:not(:disabled) { transform: var(--v2-press); transition-duration: .1s; }
.v2-btn:focus-visible { outline: none; box-shadow: var(--v2-focus); }
.v2-btn:disabled { cursor: default; opacity: .45; box-shadow: none; transform: none; }

/* chips + tabs + panel */
.v2-chip { appearance: none; cursor: pointer; border: 0; position: relative;
  min-height: 34px; padding: 0 var(--v2-s3); border-radius: var(--v2-r-pill);
  font: 520 var(--v2-fs-sm)/1 var(--v2-ui); letter-spacing: 0; color: var(--v2-text-2);
  background: var(--v2-btn-glass); box-shadow: inset 0 0 0 1px var(--v2-btn-line);
  transition: transform .4s var(--v2-spring), background-color .2s ease, color .2s ease; }
.v2-chip.on { color: var(--v2-btn-primary-ink); background: var(--v2-btn-primary); box-shadow: none; }
.v2-chip:active { transform: scale(.95); transition-duration: .1s; }
.v2-tabs { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--v2-r-pill);
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--v2-line); }
.v2-tab { appearance: none; border: 0; cursor: pointer; min-height: 36px; padding: 0 var(--v2-s4);
  border-radius: var(--v2-r-pill); background: transparent; color: var(--v2-text-3);
  font: 560 var(--v2-fs-sm)/1 var(--v2-ui); letter-spacing: 0; }
.v2-tab.on { color: var(--v2-text); background: rgba(255,255,255,.13);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 4px 12px -6px rgba(0,0,0,.8); }
.v2-panel { border-radius: var(--v2-r-panel); background: var(--v2-glass-solid);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 40px 90px -30px rgba(0,0,0,.95); }

/* ---------------------------------------------------------------- PILLS
   Every shell .pill is the secondary glass button. Sizes stay V1's per
   shape (deck/pack bands are pinned by the geometry suites); only the
   title/settings/modal pills grow to 44px. The results screen
   (#interActions) is R3's and keeps its own look. Mixed case throughout. */
.pill:not(:where(#interActions *)) {
  border-radius: var(--v2-r-pill); font-family: var(--v2-ui); font-weight: 560; font-stretch: 100%;
  letter-spacing: 0; text-transform: none; color: var(--v2-text);
  background: var(--v2-btn-glass);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
  box-shadow: inset 0 0 0 1px var(--v2-btn-line);
  transition: transform .45s var(--v2-spring), background-color .2s ease;
}
.pill:not(:where(#interActions *))::before { content: none; }
@media (hover: hover) {
  .pill:not(:where(#interActions *)):hover:not(:disabled) {
    background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.08), transparent 70%), var(--v2-btn-glass-hi); }
}
.pill:not(:where(#interActions *)):active:not(:disabled) { transform: var(--v2-press); filter: none; transition-duration: .1s; }
.pill:focus-visible { outline: none; box-shadow: var(--v2-focus); }
/* 44px targets. #titleLb / #playerChip are display-toggled by body.on-title
   (V1 already makes them inline-flex there), so this list never sets display
   for them; the panel buttons are shown/hidden by their parents. */
#titleSettings, #titleLb, #playerChip, #settingsDrawer .pill, #settingsClose, #mpBack, .mpPanel .pill,
#typeSheetClose, #gauntPanel button {
  min-height: var(--v2-tap); align-items: center; justify-content: center; }
#titleSettings, #settingsDrawer .pill, #settingsClose, #mpBack, .mpPanel .pill, #gauntPanel button { display: inline-flex; }
#typeSheetClose { display: flex; width: max-content; }
#titleSettings, #titleLb { padding-left: 16px; padding-right: 18px; gap: 8px; }
#playerChip { padding-left: 16px; padding-right: 16px; }
#gauntPanel button { background: var(--v2-btn-glass); color: var(--v2-text); }
/* primary-weight pills: the panel's main action (ivory) */
#mpHostBtn, #settingsClose, #gpBtn, #packAgainBtn, #montDone {
  color: var(--v2-btn-primary-ink); text-shadow: none;
  background: var(--v2-btn-primary); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 14px 34px -16px var(--v2-btn-primary-glow); }
@media (hover: hover) {
  #mpHostBtn:hover, #settingsClose:hover, #gpBtn:hover, #packAgainBtn:hover, #montDone:hover {
    background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(154,140,255,.2), transparent 70%), #fff; }
}
#packDoneBtn { text-shadow: none; }

/* deck / slot primaries: same recipe, their own fills; geometry untouched */
#deckPickBtn:not(.picked) {
  font-family: var(--v2-ui); font-stretch: 100%; font-weight: 650; letter-spacing: .02em;
  color: var(--v2-btn-primary-ink); text-shadow: none; border-color: transparent;
  background: var(--v2-btn-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 16px 40px -18px var(--v2-btn-primary-glow); }
#deckPickBtn.picked { font-family: var(--v2-ui); font-weight: 600; background: rgba(255,255,255,.05);
  color: var(--v2-text-3); border-color: var(--v2-line-2); box-shadow: none; }
#deckStart:not(:disabled), #deckbuilder .dactions #deckStart:not(:disabled), #slotFight {
  font-family: var(--v2-ui); font-stretch: 100%; font-weight: 650; letter-spacing: .02em;
  color: #fff; text-shadow: none; border-color: transparent;
  background: var(--v2-btn-hot);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 16px 40px -16px var(--v2-btn-hot-glow); }
#deckStart:not(:disabled) small { color: rgba(255,255,255,.78); }
#deckStart:not(:disabled):active, #slotFight:active, #deckPickBtn:not(.picked):active {
  transform: var(--v2-press); filter: none; }
#slotFight small { background: rgba(10,8,30,.55); color: #fff; font-family: var(--v2-ui); }

/* chips: the deck filters wear .v2-chip's look (sizes stay V1's) */
.fpill { font-family: var(--v2-ui); font-weight: 560; letter-spacing: .02em; color: var(--v2-text-2);
  border-color: transparent; background: var(--v2-btn-glass); box-shadow: inset 0 0 0 1px var(--v2-btn-line); }
#deckTypeFilters .fpill { background: rgba(16,16,22,.82); }
.fpill.on, .fpill.stage.on, #deckDiff .fpill.diff.on { color: var(--v2-btn-primary-ink); border-color: transparent;
  background: var(--v2-btn-primary); box-shadow: none; }

/* ---------------------------------------------------------------- PACK
   The pack art is the hero; its chrome is quiet mixed-case Geist on ink. */
#packCount { font-family: var(--v2-ui); font-size: 12px; font-weight: 560; letter-spacing: 0;
  text-transform: none; color: var(--v2-text); padding: 7px 13px 6px; border: 0;
  background: rgba(16,16,22,.78); box-shadow: inset 0 0 0 1px var(--v2-line-2);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur); }
#packHint { font-family: var(--v2-ui); font-size: 16px; font-weight: 560; letter-spacing: -.01em;
  text-transform: none; color: var(--v2-text); text-shadow: 0 2px 14px rgba(0,0,0,.9); }
#packSavor { font-family: var(--v2-ui); font-size: 13px; font-weight: 450; letter-spacing: 0;
  text-transform: none; color: var(--v2-text-3); text-shadow: 0 2px 10px rgba(0,0,0,.85); }
#packOpenAll span { font-family: var(--v2-ui); font-size: 12px; font-weight: 450; letter-spacing: 0;
  color: var(--v2-text-3); text-decoration-color: rgba(255,255,255,.18); }
#packDots .dot { background: rgba(255,255,255,.16); }
#packDots .dot.on { background: var(--v2-ivory); box-shadow: none; }

/* ---------------------------------------------------------------- DECK PICKER header
   steps in mixed case; the active step is ivory, done is the good green */
#pickHeader { font-family: var(--v2-ui); font-weight: 600; letter-spacing: -.005em; text-transform: none;
  color: var(--v2-text-4); text-shadow: 0 2px 12px rgba(0,0,0,.9); }
#pickHeader .pickStep b { font-weight: 500; color: var(--v2-text-4); }
#pickHeader .pickStep.active { color: var(--v2-text); text-shadow: 0 2px 12px rgba(0,0,0,.9); }
#pickHeader .pickStep.active b { color: var(--v2-text-3); }
#pickHeader .pickStep.done { color: var(--v2-good); }
#pickHeader .pickArrow { color: var(--v2-text-4); }
.fateCard { border: 0; border-radius: 6px; background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--v2-line-2); }
.fateCard::after { color: var(--v2-text-3); font-family: var(--v2-ui); font-weight: 500; }
#deckFateTray strong { font-family: var(--v2-ui); font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--v2-text-3); }
#deckStart small { font-family: var(--v2-ui); letter-spacing: 0; text-transform: none; font-weight: 500; }

/* ---------------------------------------------------------------- COLLECTION tiles
   ink plates, mixed-case names, one hairline in the rarity colour */
.bcard { background: rgba(255,255,255,.035); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--v2-line); }
.bcard .bimg { border: 0; border-radius: 12px 12px 0 0; box-shadow: none; background: #0b0b10; }
.bcard .bplate { background: transparent; min-height: 64px; }
.bcard .bname { font-family: var(--v2-ui); font-weight: 560; letter-spacing: -.01em; text-transform: none;
  color: var(--v2-text); padding: 8px 10px 2px; }
/* card names render as stored; ALL-CAPS names are title-cased in JS
   (main.js displayName) — a CSS sentence case lowercased proper nouns */
.bcard .brarBand { height: 1px; opacity: .7; }
.bcard .bmeta { padding: 4px 10px 8px; }
.bcard .brar { font-family: var(--v2-ui); font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .9; }
.bcard.unowned .brar { color: var(--v2-text-4); }
.bcard .bownedBadge, .bcard .blevelPip { font-family: var(--v2-ui); font-weight: 600; color: var(--v2-text);
  background: rgba(255,255,255,.08); }
.bcard .blevelPip { color: var(--v2-warm); }
.bcard .bete { font-family: var(--v2-ui); font-size: 12px; font-weight: 600; letter-spacing: .02em;
  right: 8px; border-radius: 999px; padding: 4px 8px 3px; color: var(--v2-warm);
  background: rgba(10,10,14,.78); box-shadow: inset 0 0 0 1px rgba(255,214,160,.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bcard .block { font-size: 0; color: transparent; text-shadow: none; }
.bcard .block::after { content: ''; width: 26px; height: 26px; background: rgba(255,255,255,.7);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }
.bsection, #binderSticky { text-transform: none; border-bottom-color: var(--v2-line); background: rgba(8,8,12,.94); }
.bsection > span:first-child, #binderSticky span { font-family: var(--v2-ui); font-size: 14px; font-weight: 620;
  letter-spacing: -.01em; }
.bsection .bsub, #binderSticky small { font-family: var(--v2-ui); letter-spacing: 0; color: var(--v2-text-3); }
#binderFilterBtn { font-family: var(--v2-ui); font-weight: 560; letter-spacing: 0; text-transform: none;
  border: 0; box-shadow: inset 0 0 0 1px var(--v2-line-2); }
#binderFilterBtn.on::after { background: var(--v2-ivory); color: var(--v2-ivory-ink); }
.bactiveChip { font-family: var(--v2-ui); font-weight: 560; }
.bempty button { color: var(--v2-text); }

/* ---------------------------------------------------------------- MODALS */
#binderClose { box-shadow: inset 0 0 0 1px var(--v2-btn-line); }

@media (prefers-reduced-motion: reduce) {
  .v2-btn, .v2-chip, .pill, .toggle::after { transition: none; }
}
.pill[hidden] { display: none !important; }

/* ==========================================================================
   OBSIDIAN — R3 face-off, results, battle HUD names (typography + chrome only).
   The drama stays: light burst, confetti, card reflections, arena, keyframes.
   ========================================================================== */
/* face-off: one confident mixed-case name per side, the type as a coloured
   eyebrow, a quiet "vs" between them */
#faceOff .fo-name { font-family: var(--v2-ui); font-weight: 700; text-transform: none;
  letter-spacing: -.035em; line-height: 1; color: var(--v2-text);
  text-shadow: 0 0 34px color-mix(in srgb, var(--fc, var(--v2-accent)) 45%, transparent), 0 4px 18px rgba(0,0,0,.9); }
#faceOff .fo-type { font-family: var(--v2-ui); font-weight: 560; font-size: 15px; letter-spacing: 0;
  text-transform: none; margin-bottom: 4px; text-shadow: 0 2px 10px rgba(0,0,0,.95); }
#faceOff .fo-vs { font-family: var(--v2-ui); font-weight: 450; font-style: normal; letter-spacing: -.02em;
  font-size: clamp(22px, 4vw, 40px); background: none; -webkit-text-fill-color: currentColor;
  color: var(--v2-text-3); text-shadow: 0 2px 12px rgba(0,0,0,.9); }
#faceOff .fo-go { font-family: var(--v2-ui); font-weight: 700; letter-spacing: -.05em;
  background: none; -webkit-text-fill-color: currentColor; color: var(--v2-ivory);
  text-shadow: 0 0 60px rgba(154,140,255,.55), 0 6px 30px rgba(0,0,0,.8); }

/* results: an editorial word, sentence-case labels, ivory Continue */
#interWord { font-family: var(--v2-ui); font-weight: 700; letter-spacing: -.05em; text-transform: none;
  font-size: clamp(56px, 17vw, 128px); padding: 0; line-height: 1;
  background: none; -webkit-text-fill-color: currentColor; color: var(--v2-ivory);
  filter: drop-shadow(0 0 40px rgba(154,140,255,.45)) drop-shadow(0 8px 30px rgba(0,0,0,.7)); }
#interstitial.defeat #interWord { background: none; -webkit-text-fill-color: currentColor; color: var(--v2-text-2);
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.8)); }
#interNarr { font-family: var(--v2-ui); font-weight: 450; font-size: 15px; letter-spacing: 0; text-transform: none;
  color: var(--v2-text-2); }
.istat { border: 0; border-radius: 18px; background: rgba(16,16,22,.62); box-shadow: inset 0 0 0 1px var(--v2-line);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur); }
.istat .v { font-family: var(--v2-ui); font-weight: 650; letter-spacing: -.03em; color: var(--v2-text); }
.istat .k { font-family: var(--v2-ui); font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none;
  color: var(--v2-text-3); }
.istat.mvp, .istat.drawmvp { border: 0; background: rgba(154,140,255,.12);
  box-shadow: inset 0 0 0 1px rgba(154,140,255,.45); }
.istat.mvp .k { color: var(--v2-warm); }
.istat.mvp .v, .istat.drawmvp .v { font-family: var(--v2-ui); font-weight: 620; text-transform: none; letter-spacing: -.02em; }
.istat img { border: 0; border-radius: 12px; box-shadow: 0 0 0 1px var(--v2-line-2), 0 8px 20px -10px rgba(0,0,0,.9); }
#interProgress { border: 0; border-radius: 18px; background: rgba(12,12,18,.72); box-shadow: inset 0 0 0 1px var(--v2-line); }
.ixp-head { font-family: var(--v2-ui); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--v2-text-3); }
.ixp-name { font-family: var(--v2-ui); font-weight: 600; letter-spacing: -.01em; text-transform: none; color: var(--v2-text); }
.ixp-name span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--v2-text-3); }
.ixp-track { background: rgba(255,255,255,.08); }
.ixp-fill { background: var(--v2-accent); }
.ixp-near { font-family: var(--v2-ui); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--v2-text-3); }
.ixp-near.hot { color: var(--v2-warm); }
.ixp-gain { font-family: var(--v2-ui); font-weight: 650; letter-spacing: -.01em; color: var(--v2-good); }
.ixp-gain span { letter-spacing: 0; text-transform: none; }
#interReward .rwn { font-family: var(--v2-ui); font-weight: 700; letter-spacing: -.03em; color: var(--v2-warm); text-shadow: none; }
#interReward .rwl { font-family: var(--v2-ui); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--v2-text-2); }
#interReward .rwpart { font-family: var(--v2-ui); letter-spacing: 0; text-transform: none; color: var(--v2-text-3); }
#interReward .rwpart b { color: var(--v2-warm); }
#interActions .pill { font-family: var(--v2-ui); font-weight: 600; font-stretch: 100%; letter-spacing: -.01em;
  text-transform: none; font-size: 16px; border-radius: 16px; color: var(--v2-text);
  background: var(--v2-btn-glass); box-shadow: inset 0 0 0 1px var(--v2-btn-line);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
  transition: transform .45s var(--v2-spring), background-color .2s ease; }
#interActions .pill::before { content: none; }
#interActions #interContinue { color: var(--v2-ivory-ink); background: var(--v2-ivory); text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 16px 40px -18px rgba(154,140,255,.75); }
#interActions .pill:active { transform: var(--v2-press); }

/* battle HUD nameplates: Geist, mixed case (the condensed display face and
   its forced caps retire); the 14px portrait floor stays */
.bfighter .fname, .bfighter .frow .fname { font-family: var(--v2-ui); font-weight: 650; text-transform: none;
  letter-spacing: -.02em; }
.bfighter.left .fname { color: var(--v2-text); }
.bfighter.right .fname { color: var(--v2-text); }
/* side-by-side face-off: the quiet "vs" needs real air between the names */
@media (min-aspect-ratio: 11/10) {
  #faceOff { column-gap: clamp(18px, 3vw, 44px); }
  #faceOff .fo-vs { padding: 0 .2em; }
}
/* phones (360-600 wide): Geist cannot hold a 16-letter name at the 14px floor
   inside the plate (measured 146-150px in a 144px plate at 390), so the HUD
   name keeps V1's condensed face there; tablets and desktop get Geist */
@media (max-width: 600px) {
  .bfighter .fname, .bfighter .frow .fname { font-family: var(--font-display); font-weight: 800;
    letter-spacing: clamp(-0.45px, calc((100vw - 390px) * 0.015), 0.14px); }
}

/* ==========================================================================
   OBSIDIAN — pack reveal chrome + battle callouts (typography/chrome only;
   every reveal FX, arc, shake and keyframe timing stays)
   ========================================================================== */
/* rarity chip: mixed case on ink, the rarity colour as a dot + hairline */
#rarityRibbon { font-family: var(--v2-ui); font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  text-transform: none; padding: 9px 18px 8px; gap: 8px; color: var(--v2-text);
  background: rgba(14,14,20,.84); border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc, #f0c463) 55%, transparent), 0 10px 30px -14px rgba(0,0,0,.9);
  text-shadow: none; -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur); }
/* FLIP: a glass secondary, mixed case */
#packFlipBtn { font: 600 16px/1 var(--v2-ui); letter-spacing: -.01em; text-transform: none;
  color: var(--v2-text); border: 0; border-radius: 16px;
  background: rgba(16,16,22,.72); box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 10px 26px -14px rgba(0,0,0,.9);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur); }
/* PWR badge: a quiet ink disc with a rarity hairline; on phones it stays on screen */
#pwrMedal { background: rgba(12,12,18,.9); border: 0;
  box-shadow: inset 0 0 0 1.5px var(--rc, #f0c463), 0 12px 30px -12px rgba(0,0,0,.9);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur); }
#pwrMedal .pm-num { font-family: var(--v2-ui); font-weight: 700; letter-spacing: -.04em; color: var(--v2-text);
  text-shadow: none; }
#pwrMedal .pm-k { font-family: var(--v2-ui); font-weight: 500; letter-spacing: .04em; padding-left: 0;
  text-transform: none; color: var(--v2-text-3); }
#pwrMedal .pm-verdict { font-family: var(--v2-ui); font-weight: 600; letter-spacing: 0; text-transform: lowercase;
  color: var(--rc, var(--v2-text)); }
#packUI #pwrMedal .pm-k { font-size: calc(9px * min(var(--huds), 1.5)); }
#packUI #pwrMedal .pm-verdict { font-size: calc(11px * min(var(--huds), 1.5)); }
#packUI #pwrMedal { left: min(calc(50% + min(31vw, 150px)), calc(100vw - 96px * min(var(--huds), 1.5) - 10px)); }
@media (orientation: landscape) and (max-height: 560px) {
  #packUI #pwrMedal { left: auto; }
  #packUI #pwrMedal .pm-k { font-size: 8px; } #packUI #pwrMedal .pm-verdict { font-size: 10px; }
}
/* NEW: an ivory tag that lands level (no tilt), DUPE chip on ink */
html #v2Stamp .s { font-family: var(--v2-ui); font-weight: 650; font-size: 18px; letter-spacing: -.01em;
  padding: 8px 14px 7px; border-radius: 999px; border: 0; color: var(--v2-ivory-ink); background: var(--v2-ivory);
  text-shadow: none; transform: translate(-50%, -50%);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.8), 0 0 40px -12px rgba(154,140,255,.7); }
html #v2Stamp.on .s { animation-name: v3Stamp; }
@keyframes v3Stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(.96); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
html #v2Dupe .c { font-family: var(--v2-ui); font-weight: 650; border: 0; background: rgba(14,14,20,.88);
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 8px 20px -8px rgba(0,0,0,.8); }
html #v2Dupe .c small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--v2-warm); }
/* v11 DUPE -> XP chip: +N XP over a filling level bar (LEVEL UP! when it crosses) */
html #v2Dupe.xp .c { flex-direction: column; align-items: center; gap: 6px; padding: 9px 16px 8px; border-radius: 14px; min-width: 148px; }
html #v2Dupe.xp .k { font-size: 20px; letter-spacing: -.01em; color: #fff3d0; }
html #v2Dupe.xp .xb { display: block; width: 132px; height: 7px; border-radius: 9px; overflow: hidden;
  background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
html #v2Dupe.xp .xb i { display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #9a8cff, #ffd166); box-shadow: 0 0 10px rgba(255,209,102,.6);
  transition: width .7s cubic-bezier(.3,.8,.2,1); }
html #v2Dupe.xp .c small { font-size: 11px; font-weight: 650; letter-spacing: .08em; }
html #v2Dupe.lvup .c { box-shadow: inset 0 0 0 1px rgba(255,209,102,.7), 0 0 30px -4px rgba(255,200,90,.6); }
html .v2hp span { font-family: var(--v2-ui); font-weight: 600; letter-spacing: 0; border: 0;
  background: var(--v2-ivory); color: var(--v2-ivory-ink); }
/* the info panel: ink glass, mixed-case name (stored caps stay caps) */
#revealPanel { font-family: var(--v2-ui); }
#revealPanel .rp-name { font-family: var(--v2-ui); font-weight: 650; letter-spacing: -.02em; text-transform: none;
  background: none; -webkit-text-fill-color: currentColor; color: var(--v2-text); }
#revealPanel .rp-tier { font-family: var(--v2-ui); font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: none; }
#revealPanel .rp-type, #revealPanel .rp-hp { font-family: var(--v2-ui); font-weight: 600; letter-spacing: 0; text-transform: none; }
#revealPanel .rp-hp b { color: var(--v2-text); }
#revealPanel .rp-serial { font-family: var(--v2-ui); letter-spacing: .02em; color: var(--v2-text-4); }
#revealPanel .rp-moves b { color: var(--v2-text); font-weight: 600; }
#revealPanel .rp-daily { font-family: var(--v2-ui); letter-spacing: 0; text-transform: none; }

/* battle callouts: the turn tag in sentence case, the actor quiet, the move
   the hero in mixed case (stored ALL-CAPS move names stay caps) */
#beatCard .bc-turn { font-family: var(--v2-ui); font-weight: 600; text-transform: lowercase; letter-spacing: -.005em;
  padding-left: 0; font-size: clamp(16px, 3.1vw, 24px); color: var(--v2-text);
  text-shadow: 0 2px 12px rgba(0,0,0,.95); }
#beatCard .bc-turn::first-letter { text-transform: uppercase; }
#beatCard .bc-turn::after { height: 1px; background: linear-gradient(90deg, transparent, var(--bcs, var(--v2-text-3)), transparent); }
#beatCard .bc-who { font-family: var(--v2-ui); font-weight: 560; text-transform: none; letter-spacing: -.005em;
  padding-left: 0; color: var(--v2-text-2); }
#beatCard .bc-what { font-family: var(--v2-ui); font-weight: 700; text-transform: none; letter-spacing: -.035em; line-height: .95; }
#beatCard .bc-num { font-family: var(--v2-ui); font-weight: 700; letter-spacing: -.05em; }
#beatCard .bc-why { font-family: var(--v2-ui); font-weight: 600; text-transform: none; letter-spacing: 0; padding-left: 0; }
/* SPECIAL READY: an ivory tag, sentence case */
.chgready { font-family: var(--v2-ui); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none;
  border-radius: 999px; padding: 3px 8px; color: var(--v2-ivory-ink); background: var(--v2-ivory);
  box-shadow: 0 0 14px -4px rgba(154,140,255,.8); }
/* the one-time battle hint: a quiet ink chip, sentence case */
#holdHint { font-family: var(--v2-ui); font-weight: 560; letter-spacing: 0; text-transform: none;
  color: var(--v2-text); background: rgba(14,14,20,.84); border: 0;
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 10px 26px -12px rgba(0,0,0,.9); text-shadow: none; }

/* HOLOPACK: hologram replay. One consistent mark for holo-capable cards: a
   small glass "Holo" chip on the Collection tile; the stat sheet offers
   Hologram, and the 3D card shows a press-and-hold "Hold to lift" pill. */
.bcard .bholo { position: absolute; left: 6px; bottom: 6px; z-index: 4; pointer-events: none;
  font-family: var(--v2-ui); font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 1;
  padding: 4px 7px 4px 8px; border-radius: 999px; color: var(--v2-text);
  background: rgba(10,10,16,.72); box-shadow: inset 0 0 0 1px rgba(185,178,255,.38), 0 4px 12px -6px rgba(0,0,0,.9); }
.bcard .bholo::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0;
  border-radius: 50%; background: var(--v2-spectrum); box-shadow: 0 0 6px rgba(154,140,255,.9); }
.bcard.unowned .bholo { opacity: .55; }
#binderSheetNav #binderSheetHolo { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px 9px 11px; flex: none; width: auto; white-space: nowrap;
  font-family: var(--v2-ui); font-size: 13px; font-weight: 600; letter-spacing: -.005em; text-transform: none;
  color: var(--v2-ivory-ink); background: var(--v2-ivory); border: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 8px 24px -10px rgba(154,140,255,.75); }
#binderSheetNav #binderSheetHolo[hidden] { display: none; }
/* left:50% caps a shrink-to-fit box at half the viewport: size to content */
body.binderinspect #binderSheetNav { width: max-content; max-width: calc(100vw - 16px); }
#binderSheetHolo svg, #holoLift svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#holoLift { position: fixed; z-index: 12; left: 50%; bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px));
  transform: translateX(-50%); display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center;
  min-height: 48px; padding: 9px 20px 9px 16px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--v2-ui); color: var(--v2-text); background: rgba(12,12,18,.8);
  -webkit-backdrop-filter: var(--v2-blur); backdrop-filter: var(--v2-blur);
  box-shadow: inset 0 0 0 1px var(--v2-line-2), var(--v2-drop);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;
  visibility: hidden; opacity: 0; transition: opacity .35s var(--v2-ease), visibility 0s linear .35s,
    box-shadow .4s var(--v2-ease), background .4s var(--v2-ease); }
#holoLift svg { grid-row: span 2; }
#holoLift span { font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
#holoLift small { font-size: 11px; font-weight: 500; color: var(--v2-text-3); line-height: 1.2; }
body.solo.soloholo-ready #holoLift { visibility: visible; opacity: 1; transition: opacity .35s var(--v2-ease), visibility 0s,
  box-shadow .4s var(--v2-ease), background .4s var(--v2-ease); }
body.holo-held #holoLift { background: rgba(28,26,44,.9);
  box-shadow: inset 0 0 0 1px rgba(185,178,255,.55), 0 0 28px -6px rgba(154,140,255,.7), var(--v2-drop); }
body.soloholo #hint { visibility: hidden; }
/* the hologram viewer's chrome in the kit: mixed-case Geist, quiet ink pills,
   and a bottom stack (name, rarity, level chip, then Hold to lift) that never
   overlaps */
body.solo #gyroBtn { font-family: var(--v2-ui); font-size: 12px; font-weight: 560; letter-spacing: 0;
  text-transform: none; color: var(--v2-text-2); background: rgba(12,12,18,.55); border: 0;
  box-shadow: inset 0 0 0 1px var(--v2-line-2); padding: 8px 13px; }
body.solo #nameplate .name { font-family: var(--v2-ui); font-size: 24px; font-weight: 650; letter-spacing: -.02em;
  text-transform: none; background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--v2-text); text-shadow: 0 2px 16px rgba(0,0,0,.8); }
body.solo #nameplate .rarity { font-family: var(--v2-ui); font-size: 13px; font-weight: 500; letter-spacing: 0;
  text-transform: none; margin-top: 2px; opacity: .92; }
body.solo #pwrChip { font-family: var(--v2-ui); font-size: 12px; font-weight: 560; letter-spacing: 0;
  text-transform: none; color: var(--v2-text-2) !important; border-color: var(--v2-line-2) !important;
  background: rgba(12,12,18,.55); margin-top: 10px; }
body.solo #pwrChip b { font-size: 12px; letter-spacing: 0; color: var(--v2-text); }
body.soloholo #nameplate { bottom: calc(max(22px, env(safe-area-inset-bottom) + 14px) + 48px + 16px); }
@media (prefers-reduced-motion: reduce) { #holoLift { transition: none; } }

/* ==========================================================================
   v10 HOLO STATUS + AWAKEN (engine10). Obsidian: ivory tag, one accent glow.
   ========================================================================== */
/* Collection tile: Holo STATUS fills the chip ivory (the outline chip remains
   the "has a hologram" hint) */
.bcard .bholo.status { color: var(--v2-ivory-ink); background: var(--v2-ivory);
  box-shadow: 0 0 14px -4px rgba(154,140,255,.85), 0 4px 12px -6px rgba(0,0,0,.9); }
.bcard .bholo.status::before { background: var(--v2-accent-2); box-shadow: none; }
/* Deck forge card mark */
#forge .fc-holomark { position: absolute; z-index: 2; left: 6%; bottom: 5%; pointer-events: none;
  font: 600 10px/1 var(--v2-ui); padding: 3px 6px; border-radius: 999px;
  color: var(--v2-ivory-ink); background: var(--v2-ivory); box-shadow: 0 0 10px -3px rgba(154,140,255,.9); }
#forge .fc-hero .fc-holomark { font-size: 13px; padding: 5px 9px; }
/* Battle HUD: Awakened tag on the plate */
.bsub .awakeTag { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; margin-right: 6px;
  border-radius: 999px; font: 600 11px/1 var(--v2-ui); color: var(--v2-ivory-ink); background: var(--v2-ivory);
  box-shadow: 0 0 14px -3px rgba(154,140,255,.95); vertical-align: middle; }
/* the collapsed plate hides .bsub; an Awakened card always shows its tag */
.bfighter:not(.expand) .bsub:has(.awakeTag) { display: flex; margin-top: 3px; align-items: center; gap: 6px; }
.bfighter:not(.expand) .bsub:has(.awakeTag) > :not(.awakeTag):not(.trapChip.on) { display: none; }
/* one-line tip, first time a Holo card's ULT is armed */
#awakenTip { position: fixed; left: 50%; bottom: calc(var(--abar-h, 168px) + 18px); z-index: 70;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 9px 16px; border-radius: 999px; font: 560 14px/1 var(--v2-ui); color: var(--v2-text);
  background: rgba(14,14,20,.88); box-shadow: inset 0 0 0 1px rgba(154,140,255,.5), 0 10px 26px -12px rgba(0,0,0,.9);
  transition: opacity .3s ease, transform .3s var(--v2-ease); }
#awakenTip.show { opacity: 1; transform: translate(-50%, 0); }
/* Victory: a card that crosses the Holo level lifts off its row */
.ixp-row.holo-up img { animation: holoLift 1.6s var(--v2-ease) .7s both; position: relative; z-index: 1; }
.ixp-row.holo-up { position: relative; }
.ixp-row.holo-up::before { content: ''; position: absolute; left: 0; top: 50%; width: 64px; height: 64px; margin-top: -32px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(154,140,255,.55), transparent 70%); animation: holoGlow 1.6s ease .7s both; }
.ixp-row.holo-up .ixp-gain span { color: var(--v2-ivory-ink); background: var(--v2-ivory); padding: 2px 7px; border-radius: 999px; }
@keyframes holoLift { 0% { transform: none; } 45% { transform: translateY(-10px) scale(1.18); } 100% { transform: translateY(-3px) scale(1.06); } }
@keyframes holoGlow { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ixp-row.holo-up img, .ixp-row.holo-up::before { animation: none; } }

/* ==========================================================================
   NAV AUDIT (v136) — one way out of every layer.
   Overlays close from the same round X at the top-right (it sits exactly
   where the Collection's own X sits); screens go home from the top-left.
   ========================================================================== */
.nav-x { appearance: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; font: 500 17px/1 var(--v2-ui); color: var(--v2-text);
  background: rgba(14,14,20,.82); box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 8px 22px -10px rgba(0,0,0,.9);
  -webkit-tap-highlight-color: transparent; }
.nav-x:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
#binderSheetClose { display: none; position: fixed; z-index: 3;
  top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
body.binderinspect #binderSheetClose { display: grid; }
/* the hologram viewer is an overlay over the Collection: same X, same corner */
#soloBack.nav-x { top: max(12px, env(safe-area-inset-top)); left: auto; right: max(12px, env(safe-area-inset-right)); z-index: 13; }
body.solo #soloBack.nav-x { display: grid; }
#labClose { position: absolute; z-index: 2; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }

/* ---- Collection: the Holo toggle in the tool row, tappable tile chips */
#binderHoloChip { appearance: none; flex: none; min-height: 44px; padding: 0 14px 0 12px; border: 0; border-radius: 12px;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: 560 13px/1 var(--v2-ui); color: var(--v2-text); background: var(--v2-glass);
  box-shadow: inset 0 0 0 1px var(--v2-line-2); }
#binderHoloChip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--v2-spectrum);
  box-shadow: 0 0 8px rgba(154,140,255,.9); }
#binderHoloChip.on { color: var(--v2-ivory-ink); background: var(--v2-ivory); box-shadow: 0 8px 22px -12px rgba(154,140,255,.8); }
.bcard .bholo { pointer-events: auto; cursor: pointer; padding: 7px 10px 7px 10px; left: 4px; bottom: 4px; }
.bcard.unowned .bholo { opacity: 1; }   /* locked cards can be previewed too */
@media (hover: hover) { .bcard .bholo:hover { background: rgba(28,26,44,.92); } }

/* ---- the hologram viewer: "Not owned" preview mark */
#soloNotOwned { display: none; position: fixed; z-index: 12; left: 50%; transform: translateX(-50%);
  top: max(18px, calc(env(safe-area-inset-top) + 8px)); padding: 7px 12px; border-radius: 999px;
  font: 560 12px/1 var(--v2-ui); color: var(--v2-warm); background: rgba(14,14,20,.82);
  box-shadow: inset 0 0 0 1px rgba(255,214,160,.38); pointer-events: none; }
body.solo.solo-unowned #soloNotOwned { display: block; }

/* ---- Collection detail sheet (#ssPanel.detail): one real-size DOM panel,
   crisp text, ink + ivory + one accent, mixed-case Geist. */
body.binderinspect #statSheet { background: rgba(4,4,8,.84); }
#ssPanel.detail { left: 50%; top: 50%; width: min(440px, calc(100vw - 24px)); height: auto;
  max-height: calc(100dvh - 176px - 2 * max(env(safe-area-inset-top), env(safe-area-inset-bottom)));
  transform: translate(-50%, calc(-50% - 22px)); transform-origin: 50% 50%; will-change: auto;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  touch-action: pan-y;   /* a scroll container resets touch-action: keep horizontal swipes (paging) ours */
  padding: 18px 18px 16px; gap: 0; border-radius: var(--v2-r-lg);
  font-family: var(--v2-ui); color: var(--v2-text);
  background: linear-gradient(180deg, #15151f, #0d0d14); border: 0;
  box-shadow: inset 0 0 0 1px var(--v2-line-2), inset 0 1px 0 rgba(255,255,255,.07), var(--v2-drop); }
#ssPanel.detail::before, #ssPanel.detail::after { content: none; display: none; }
#ssPanel.detail .dt-head { display: flex; align-items: center; gap: 14px; }
#ssPanel.detail .dt-thumb { width: 60px; height: 60px; flex: none; border-radius: 14px; object-fit: cover;
  box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 0 0 1px color-mix(in srgb, var(--rc) 45%, transparent); }
#ssPanel.detail .dt-id { min-width: 0; flex: 1; }
#ssPanel.detail .ss-name { font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.12;
  text-transform: none; background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--v2-text); -webkit-text-fill-color: currentColor; overflow-wrap: anywhere; }
#ssPanel.detail .dt-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px;
  font-size: 13px; font-weight: 500; color: var(--v2-text-2); }
#ssPanel.detail .dt-rar { color: var(--rc); font-weight: 600; }
#ssPanel.detail .dt-type { display: inline-flex; align-items: center; gap: 4px; color: var(--tc); }
#ssPanel.detail .dt-type svg { width: 13px; height: 13px; }
#ssPanel.detail .dt-own { display: inline-block; margin-top: 7px; padding: 4px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 560; color: var(--v2-warm); box-shadow: inset 0 0 0 1px rgba(255,214,160,.38); }
#ssPanel.detail .dt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
#ssPanel.detail .dt-stats > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 14px;
  background: var(--v2-glass); box-shadow: inset 0 0 0 1px var(--v2-line); }
#ssPanel.detail .dt-stats b { display: flex; align-items: center; min-height: 26px; font-size: 22px; font-weight: 650;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--v2-text); }
#ssPanel.detail .dt-stats span { font-size: 12px; font-weight: 500; color: var(--v2-text-3); }
#ssPanel.detail .pips { display: inline-flex; gap: 5px; }
#ssPanel.detail .pips i { width: 8px; height: 8px; margin: 0; border-radius: 50%; background: rgba(255,255,255,.16); box-shadow: none; }
#ssPanel.detail .pips i.on { background: var(--v2-text); box-shadow: none; }
#ssPanel.detail .dt-moves { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
#ssPanel.detail .dt-mv { padding: 11px 14px 12px; border-radius: 14px; background: var(--v2-glass);
  box-shadow: inset 0 0 0 1px var(--v2-line); }
#ssPanel.detail .dt-mv.ult { background: linear-gradient(180deg, rgba(154,140,255,.16), rgba(154,140,255,.05));
  box-shadow: inset 0 0 0 1px rgba(154,140,255,.5); }
#ssPanel.detail .dt-mrow { display: flex; align-items: center; gap: 8px; }
#ssPanel.detail .dt-mname { min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
#ssPanel.detail .dt-ult { flex: none; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  line-height: 1; color: var(--v2-accent-ink); background: var(--v2-accent); }
#ssPanel.detail .dt-dmg { margin-left: auto; flex: none; font-size: 20px; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--v2-text); }
#ssPanel.detail .dt-mtext { margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--v2-text-2); }
#ssPanel.detail .dt-charge { margin-top: 6px; font-size: 12px; color: var(--v2-text-3); }
#ssPanel.detail .dt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
#ssPanel.detail .dt-chip { appearance: none; display: inline-flex; align-items: center; gap: 5px; min-height: 34px;
  padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; font: 560 13px/1 var(--v2-ui);
  color: var(--v2-text); background: var(--v2-glass); box-shadow: inset 0 0 0 1px var(--v2-line-2); }
#ssPanel.detail .dt-chip.pass { box-shadow: inset 0 0 0 1px rgba(154,140,255,.55); }
#ssPanel.detail .dt-chip.wr { color: var(--v2-text-2); }
#ssPanel.detail .dt-chip.wr svg { width: 12px; height: 12px; color: var(--cc); fill: currentColor; }
#ssPanel.detail .dt-chip[aria-pressed="true"] { color: var(--v2-ivory-ink); background: var(--v2-ivory); box-shadow: none; }
#ssPanel.detail .dt-chip[aria-pressed="true"] svg { color: var(--v2-ivory-ink); }
#ssPanel.detail .dt-explain { font-size: 13px; line-height: 1.4; color: var(--v2-text-2); }
#ssPanel.detail .dt-explain.on { margin-top: 9px; }
#ssPanel.detail .dt-story { margin-top: 14px; border-top: 1px solid var(--v2-line); padding-top: 4px; }
#ssPanel.detail .dt-story summary { display: flex; align-items: center; justify-content: space-between; min-height: 40px;
  list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--v2-text); }
#ssPanel.detail .dt-story summary::-webkit-details-marker { display: none; }
#ssPanel.detail .dt-story summary::after { content: ''; width: 8px; height: 8px; margin-right: 4px;
  border-right: 1.6px solid var(--v2-text-3); border-bottom: 1.6px solid var(--v2-text-3);
  transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--v2-ease); }
#ssPanel.detail .dt-story[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
#ssPanel.detail .dt-story p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: var(--v2-text-2); }
#ssPanel.detail .dt-story .dt-flav { font-style: italic; color: var(--v2-text-3); }
#ssPanel.detail .dt-story .dt-data { font-size: 12px; color: var(--v2-text-3); }
#ssPanel.detail .dt-foot { margin-top: 12px; font-size: 12px; line-height: 1.45; color: var(--v2-text-3); }
#ssPanel.detail .dt-foot b { font-weight: 600; color: var(--v2-text-2); }
#ssPanel.detail .dt-story + .dt-foot { margin-top: 4px; }
/* the bar under it: quiet arrows, one ivory primary */
body.binderinspect #binderSheetNav { gap: 10px; bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)); }
#binderSheetNav #binderSheetPrev, #binderSheetNav #binderSheetNext { width: 48px; height: 48px; padding: 0; border: 0;
  border-radius: 50%; font: 400 24px/1 var(--v2-ui); color: var(--v2-text); background: rgba(14,14,20,.82);
  box-shadow: inset 0 0 0 1px var(--v2-line-2); }
#binderSheetNav button:disabled { opacity: .35; }
#binderSheetNav #binderSheetHolo { min-height: 48px; padding: 0 20px 0 16px; font-size: 14px; }
/* lineup slots: the Holo mark sits under the star cost, clear of the Lead/number tag */
#forge .fg-slot .fc-holomark { bottom: auto; top: 22%; left: 6%; font-size: 8.5px; padding: 2px 5px; }
#forge .fg-slot.sup .fc-holomark { display: none; }

/* ------------------------------------------------------------------------
   TITLE 6 DOCK ("lit glass"): every tile is the same smoked glass, lit from
   above by the rift — a warm hairline catches the light on the top edge and
   fades down the sides. The lead is NOT inverted: it is the same family,
   larger, warmer inside (a low ember glow + a violet counter-light), with a
   brighter rim and a slow streak of light running along its top edge.
   Legibility first: the glass is dark enough to read over the living stage.
   Hover: the light pools under the pointer; press: a quick settle.
   (transform/opacity keyframes only; reduced motion: no streak)
   ------------------------------------------------------------------------ */
#screenTitle #titleMenu button {
  color: #f4f2f8;
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, -40%), rgba(255,226,190,.10), transparent 70%),
    linear-gradient(180deg, rgba(24,21,34,.68), rgba(10,9,16,.78));
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,236,210,.14), inset 0 0 0 1px rgba(255,255,255,.06), 0 20px 40px -24px #000;
  transition: transform .45s var(--v2-spring), box-shadow .25s ease, background-color .2s ease;
}
#screenTitle #titleMenu button:not(.sealed)::before { content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; display: block;
  background: linear-gradient(180deg, rgba(255,226,190,.40), rgba(255,255,255,.07) 42%, rgba(255,255,255,.025));
  -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); }
#titleMenu button .sub { color: #a9a5bd; }
#titleMenu button .tv svg { stroke: #cfc9e0; }
#screenTitle #titleMenu button.lead:not(.sealed) {
  color: #fff7ec;
  background:
    radial-gradient(140px circle at var(--mx, 50%) var(--my, -40%), rgba(255,226,190,.14), transparent 70%),
    radial-gradient(120% 95% at 18% 125%, rgba(255,184,110,.34), transparent 62%),
    radial-gradient(80% 110% at 100% -10%, rgba(154,140,255,.24), transparent 62%),
    linear-gradient(180deg, rgba(32,25,42,.74), rgba(12,10,18,.82));
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,232,204,.40), 0 0 0 1px rgba(255,208,158,.26), 0 26px 64px -26px rgba(255,166,86,.62);
}
#screenTitle #titleMenu button.lead:not(.sealed)::before {
  background: linear-gradient(115deg, rgba(255,216,166,.95), rgba(255,216,166,.18) 36%, rgba(170,156,255,.55) 72%, rgba(255,216,166,.7)); }
/* the light streak riding the lead's top edge */
#screenTitle #titleMenu button.lead:not(.sealed)::after { content: ''; display: block; position: absolute; top: 0; left: 0;
  width: 46%; height: 2px; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,240,220,.95) 50%, transparent);
  transform: translateX(-110%); animation: tl6Streak 5.6s cubic-bezier(.45,0,.25,1) 1.2s infinite; }
@keyframes tl6Streak { 0% { transform: translateX(-110%); opacity: 0; } 8% { opacity: 1; }
  38% { transform: translateX(230%); opacity: 1; } 42%, 100% { transform: translateX(230%); opacity: 0; } }
#titleMenu button.lead:not(.sealed) .sub { color: var(--v2-warm); }
#titleMenu button.lead:not(.sealed) .tv svg { stroke: var(--v2-warm); }
#titleMenu button.lead.mp { color: #fff7ec; }
#titleMenu button.lead:not(.sealed) .tv-pack img { filter: drop-shadow(0 8px 18px rgba(255,170,80,.35)); }
@media (hover: hover) {
  #screenTitle #titleMenu button:not(.sealed):not(.lead):hover {
    background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(255,226,190,.14), transparent 70%),
      linear-gradient(180deg, rgba(30,27,42,.72), rgba(12,11,19,.80));
    box-shadow: inset 0 1px 0 rgba(255,236,210,.22), inset 0 0 0 1px rgba(255,255,255,.10), 0 22px 44px -22px #000; }
  #screenTitle #titleMenu button.lead:not(.sealed):hover {
    background:
      radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(255,226,190,.20), transparent 70%),
      radial-gradient(120% 95% at 18% 125%, rgba(255,184,110,.42), transparent 62%),
      radial-gradient(80% 110% at 100% -10%, rgba(154,140,255,.28), transparent 62%),
      linear-gradient(180deg, rgba(36,28,46,.76), rgba(14,11,20,.84));
    box-shadow: inset 0 1px 0 rgba(255,232,204,.5), 0 0 0 1px rgba(255,208,158,.4), 0 28px 70px -24px rgba(255,166,86,.8); }
  #screenTitle #titleMenu button:not(.sealed):hover { transform: translateY(-2px); }
}
#screenTitle #titleMenu button:active:not(.sealed) { transform: scale(.97); transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) {
  #screenTitle #titleMenu button.lead:not(.sealed)::after { animation: none; opacity: 0; }
}

/* v10: the tile chip is Holo STATUS only, not a button (the card sheet keeps
   "View hologram"); never on a locked card */
.bcard .bholo.status { pointer-events: none; cursor: default; }
.bcard.unowned .bholo { display: none; }
/* title7: the caption sits on a soft smoked pill so it reads over the rift
   and its reflection at every size (DOM text, no animation) */
#titleTag { align-self: center; width: auto; max-width: calc(100% - 32px); box-sizing: border-box;
  padding: 5px 13px 6px; border-radius: 999px; color: #c4c0d4;
  background: rgba(9,8,14,.58); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 6px 18px -8px rgba(0,0,0,.8);
  text-shadow: 0 1px 2px rgba(0,0,0,.7); }
#titleTag b { color: var(--v2-warm); }

/* v10 AWAKEN popup: Obsidian type, mixed case, ivory with a violet bloom */
#fxPop .fx.awaken { font-family: var(--v2-ui); font-size: clamp(28px, 7.4vw, 52px); font-weight: 600;
  letter-spacing: -0.02em; text-transform: none; color: var(--v2-ivory);
  text-shadow: 0 0 28px rgba(154,140,255,.75), 0 2px 10px rgba(6,6,9,.9);
  animation: fxAwaken 1.7s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes fxAwaken { 0% { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  18% { opacity: 1; transform: none; filter: none; } 80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); } }
/* settings exit lives top-right like every other layer */
#settingsDrawer #settingsClose { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; margin: 0; min-height: 40px; padding: 0 16px; }
/* picker exit: only once the player has a name (no identity = the picker is the front door) */
#pickerOverlay .pk-panel { position: relative; }
#pickerClose { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14); background: rgba(20,18,28,.6); color: #f4efe6; font-size: 16px; cursor: pointer; }
#pickerClose[hidden] { display: none; }

/* ===================================================================
   GUIDE SHEET — "How to play" and "Type chart" (settings, Collection, deck).
   Static reading pages: big Geist type, ink ground, one accent, no caps.
   ========================================================================== */
/* polish5: z 65 — the guide is modal and must sit above everything it can be
   opened over: #homeMedal (38) drew on top of it, and #deckPanel (60) and the
   z44 panels would too if their parent stacking ever went away. Stays below
   #exitConfirm / #awakenTip (70). */
#guideSheet { position: fixed; inset: 0; z-index: 65; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; background: var(--v2-ink); color: var(--v2-text);
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    calc(max(24px, env(safe-area-inset-bottom)) + 24px) max(24px, env(safe-area-inset-left));
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1), visibility .28s; }
#guideSheet.open { opacity: 1; visibility: visible; transform: none; }
#guideSheet #guideClose { position: fixed; z-index: 2; top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right)); }
#guideSheet .gd-body { max-width: 620px; margin: 0 auto; padding-top: 28px;
  font: 400 18px/1.55 var(--v2-ui); letter-spacing: -.005em; }
#guideSheet h4 { font: 680 34px/1.1 var(--v2-ui); letter-spacing: -.025em; text-transform: none;
  color: var(--v2-text); text-align: left; margin: 0 56px 12px 0; }
#guideSheet .gd-lede { font-size: 20px; line-height: 1.45; color: var(--v2-text); margin: 0 0 8px; }
#guideSheet .gd-sec { margin-top: 36px; }
#guideSheet h5 { font: 640 25px/1.2 var(--v2-ui); letter-spacing: -.015em; text-transform: none;
  color: var(--v2-text); margin: 0 0 10px; }
#guideSheet p { font-size: 18px; line-height: 1.55; color: var(--v2-text-2); margin: 0 0 12px; }
#guideSheet b { font-weight: 640; color: var(--v2-text); }
#guideSheet .gd-moves { margin: 16px 0 0; display: grid; gap: 12px; }
#guideSheet .gd-moves > div { padding: 16px 18px; border-radius: 16px; background: var(--v2-deep);
  box-shadow: inset 0 0 0 1px var(--v2-line); }
#guideSheet .gd-moves dt { font: 650 21px/1.2 var(--v2-ui); color: var(--v2-accent); margin-bottom: 4px; }
#guideSheet .gd-moves dd { margin: 0; font-size: 18px; line-height: 1.5; color: var(--v2-text-2); }
#guideSheet .gd-types { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
#guideSheet .gd-types li { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px;
  background: var(--v2-deep); box-shadow: inset 0 0 0 1px var(--v2-line), inset 4px 0 0 var(--tc); }
#guideSheet .gd-t { display: flex; align-items: center; gap: 12px; width: 8.2em; flex: none; }
#guideSheet .gd-t svg { flex: none; }
#guideSheet .gd-t b { font: 650 22px/1.2 var(--v2-ui); color: var(--tc); }
#guideSheet .gd-rel { display: grid; gap: 2px; font-size: 18px; color: var(--v2-text-2); }
#guideSheet .gd-rel b { font-weight: 640; }
@media (min-width: 720px) {
  #guideSheet .gd-body { padding-top: 48px; }
  #guideSheet h4 { font-size: 44px; }
  #guideSheet .gd-lede { font-size: 22px; }
  #guideSheet .gd-rel { display: flex; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { #guideSheet { transition: none; transform: none; } }
/* entry: the medallion IS the button; #entryGo stays as an invisible tap strip (tests + a11y) */
/* not once the entry has faded out: an invisible crest must never eat taps on the screen under it */
#entry.ready:not(.out) .en-crest, body #entry.ready:not(.out) .en-crest { pointer-events: auto !important; cursor: pointer; }
#entry:not(.ready) .en-crest { pointer-events: none; }
#entryGo { opacity: 0; min-height: 36px; padding: 0; box-shadow: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#entrySwitch { font-size: 14px; color: rgba(244,239,230,.62); }
/* wide title: give "Collection" room when the pack gate widens Open Pack */
@media (min-aspect-ratio: 4/3) and (min-width: 1000px) { #titleMenu:has(#gateChip.show) { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------------
   title12 MENU ROW (was the v152 carousel) — no tiles, no pills: three plain
   text items over the vista, all visible. src/title-carousel.js marks the
   lead .is-lead; the corner 3D card pile (#deckHot) is the Collection door.
   ------------------------------------------------------------------------ */
#screenTitle { padding-bottom: calc(max(14px, env(safe-area-inset-bottom)) + 10px); }
body.on-title #playerChip { display: none !important; }
#titleTag { margin: 4px 0 6px; }
#titleCarousel { order: 3; flex: none; position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 0 clamp(6px, 2.6vw, 30px);
  width: min(100vw, 900px); min-height: 70px; padding: 0 12px; box-sizing: border-box; }
#screenTitle #titleCarousel > button {
  position: relative; inset: auto; z-index: auto; flex: none; display: flex !important;
  align-items: center; justify-content: center; height: auto; min-height: 44px; margin: 0; padding: 10px 8px;
  appearance: none; border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; filter: none; cursor: pointer; animation: none;
  font-family: var(--v2-ui); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: -.03em;
  text-transform: none; white-space: nowrap; color: rgba(255,247,238,.74); -webkit-tap-highlight-color: transparent;
  transition: color .2s var(--v2-ease), transform .2s var(--v2-ease); }
#screenTitle #titleCarousel > button::before, #screenTitle #titleCarousel > button::after { content: none; }
#titleCarousel .tl { display: block; text-shadow: 0 2px 12px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6); }
#titleCarousel .sub, #socialBadge { display: none !important; }
#titleRetired { display: none !important; }
@media (hover: hover) and (pointer: fine) {
  #screenTitle #titleCarousel > button:hover { color: #fffaf1; transform: translateY(-3px); }
}
#screenTitle #titleCarousel > button:active { transform: translateY(1px) scale(.95); transition-duration: .08s; }
#screenTitle #titleCarousel > button.sealed, #screenTitle #titleCarousel > button.locked { color: #b4afc6; }
#screenTitle #titleCarousel > button.sealed .tl::after, #screenTitle #titleCarousel > button.locked .tl::after {
  content: ''; display: inline-block; width: .42em; height: .42em; margin-left: .22em; vertical-align: .32em; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8d2ea' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }
#screenTitle #titleCarousel > button.shake { animation: sealShake .45s ease; }
#screenTitle #titleCarousel > button:focus-visible { outline: none; }
#screenTitle #titleCarousel > button:focus-visible .tl { text-decoration: underline 2px rgba(255,214,160,.6); text-underline-offset: 6px; }
#titleInfo { order: 4; flex: none; height: 18px; margin-top: 2px; font-family: var(--v2-ui); font-weight: 500;
  font-size: 12.5px; letter-spacing: .01em; color: var(--v2-text-3); font-variant-numeric: tabular-nums;
  white-space: nowrap; opacity: 0; text-shadow: 0 1px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.7); }
#titleInfo.in { animation: tcInfo .45s var(--v2-ease) .08s forwards; }
@keyframes tcInfo { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
#screenTitle #gateChip { order: 5; display: block; height: 16px; margin: 2px 0 0; padding: 0; grid-column: auto;
  font-family: var(--v2-ui); font-weight: 500; font-size: 11px; letter-spacing: 0; text-transform: none;
  color: var(--v2-warm); opacity: .85; text-shadow: 0 1px 10px rgba(0,0,0,.9); animation: none; background: none; box-shadow: none; }
#screenTitle #gateChip:not(.show) { visibility: hidden; }
#screenTitle.tl-enter #titleCarousel { animation: tlFade .9s var(--v2-ease) .45s backwards; }
@media (orientation: landscape) and (max-height: 460px) { #titleTag { margin: 2px 0 2px; } }
@media (min-width: 1000px) and (min-height: 700px) { #titleInfo { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) {
  #titleInfo.in { animation: none; opacity: 1; }
  #screenTitle.tl-enter #titleCarousel { animation: none; }
}
/* carousel info + gate hint stay readable over the bright floor reflection */
#titleInfo, #gateChip { color: rgba(250,246,238,.92) !important; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.7); }

/* ------------------------------------------------------------------------
   title9/10 — the "Nomad-mon GO!" emblem (assets/bg/logo-v3.svg, title10: Titan One arch + the medallion as the O of GO!; was
   Unbounded Black) rides the foot of the hero card: src/title.js writes
   --card-cx / --card-b / --card-w (px) and .logo-on-card; ~62% of the logo
   sits over the card's bottom third (~27% of the card), the rest hangs below. The
   caption pill is retired. The carousel speaks Unbounded on a smoked band.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Unbounded";
  src: url("../assets/fonts/unbounded-v2.woff2") format("woff2");
  font-weight: 500 900; font-style: normal; font-display: swap;
}
#titleTag { display: none !important; }
#screenTitle.logo-on-card #logoWrap { position: absolute; z-index: 3; order: 0; margin: 0; pointer-events: none;
  left: var(--card-cx); top: var(--card-b); width: min(92vw, calc(var(--card-w) * var(--logo-k, 1.1)));
  transform: translate3d(calc(-50% + var(--tx, 0) * -3px), calc(-62% + var(--ty, 0) * -2px), 0); }
#screenTitle.logo-on-card #titleHero { margin-bottom: calc(var(--card-w) * .2); }
#titleLogo { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.7)); -webkit-filter: drop-shadow(0 12px 22px rgba(0,0,0,.7)); }
/* light sweep: one soft band crosses the letters every ~5s (transform only),
   masked to the logo silhouette */
#logoSheen { display: block !important; position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background: none; animation: none; mix-blend-mode: plus-lighter;
  -webkit-mask: url('../assets/bg/logo-v3-mask.svg?v176') 0 0 / 100% 100% no-repeat;
          mask: url('../assets/bg/logo-v3-mask.svg?v176') 0 0 / 100% 100% no-repeat; }
#logoSheen i { position: absolute; top: 0; bottom: 0; left: -34%; width: 30%; will-change: transform;
  background: linear-gradient(100deg, transparent 0, rgba(255,250,235,.0) 20%, rgba(255,250,235,.72) 50%, rgba(255,250,235,0) 80%, transparent 100%);
  transform: translate3d(0, 0, 0) skewX(-18deg); animation: t9Sweep 5.2s cubic-bezier(.45,0,.25,1) 1.4s infinite; }
@keyframes t9Sweep { 0% { transform: translate3d(0, 0, 0) skewX(-18deg); }
  32%, 100% { transform: translate3d(480%, 0, 0) skewX(-18deg); } }

/* title12 menu row: Unbounded on a smoked band; the lead is bigger + bright
   with a thin warm glow line under it, the other two smaller and dimmer */
#titleCarousel {
  background: linear-gradient(180deg, rgba(6,5,12,0) 0, rgba(6,5,12,.62) 26%, rgba(6,5,12,.62) 74%, rgba(6,5,12,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
@media (max-width: 600px) { #titleCarousel { -webkit-mask-image: none; mask-image: none; } }
#screenTitle #titleCarousel > button { font-family: "Unbounded", var(--v2-ui); font-weight: 700; font-size: 15px; letter-spacing: -.035em; }
#screenTitle #titleCarousel > button.is-lead { font-size: 24px; color: #fffaf1; padding-bottom: 14px; }
#screenTitle #titleCarousel > button.is-lead.sealed { color: #b4afc6; }
#screenTitle #titleCarousel > button.is-lead .tl {
  text-shadow: 0 2px 14px rgba(0,0,0,.8), 0 0 30px rgba(255,186,110,.35); }
#screenTitle #titleCarousel > button.is-lead::after { content: ''; position: absolute; left: 50%; top: auto; right: auto; bottom: 5px;
  width: 62%; height: 2px; border-radius: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(255,195,90,0), #ffc35a 30%, #fff1c4 50%, #ffc35a 70%, rgba(255,195,90,0));
  box-shadow: 0 0 10px rgba(255,160,70,.85), 0 0 22px rgba(255,140,60,.45); animation: t9Line .42s var(--v2-ease) both; }
@keyframes t9Line { from { opacity: 0; width: 0; } to { opacity: 1; width: 62%; } }
@media (max-width: 360px) {
  #screenTitle #titleCarousel > button { font-size: 13px; padding-left: 6px; padding-right: 6px; }
  #screenTitle #titleCarousel > button.is-lead { font-size: 20px; }
}
@media (orientation: landscape) and (max-height: 460px) {
  #titleCarousel { min-height: 56px; }
  #screenTitle #titleCarousel > button { font-size: 14px; padding-top: 8px; padding-bottom: 8px; }
  #screenTitle #titleCarousel > button.is-lead { font-size: 21px; padding-bottom: 12px; }
}
@media (min-width: 1000px) and (min-height: 700px) {
  #titleCarousel { min-height: 92px; }
  #screenTitle #titleCarousel > button { font-size: 22px; padding: 12px 14px; }
  #screenTitle #titleCarousel > button.is-lead { font-size: 38px; padding-bottom: 20px; }
  #screenTitle #titleCarousel > button.is-lead::after { bottom: 8px; height: 3px; }
}
@media (min-width: 1800px) and (min-height: 1100px) {
  #titleCarousel { width: min(70vw, 1200px); min-height: 110px; }
  #screenTitle #titleCarousel > button { font-size: 27px; padding: 14px 18px; }
  #screenTitle #titleCarousel > button.is-lead { font-size: 48px; padding-bottom: 24px; }
  #titleInfo { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #logoSheen i { animation: none; opacity: 0; }
  #screenTitle #titleCarousel > button.is-lead::after { animation: none; }
}

/* ------------------------------------------------------------------------
   title12 card pile — the corner 3D stack of the player's real cards is the
   Collection door on the title. #deckHot is its tap target AND its anchor:
   main.js (updateDeckStack) fits the 3D pile into this box every frame, so
   placement per viewport lives here. Portrait sits above the menu row; wide
   layouts tuck into the corner beside it. The owned count rides to its left.
   ------------------------------------------------------------------------ */
body.on-title #deckHot { display: block; right: max(12px, env(safe-area-inset-right));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + 128px); width: 70px; height: 98px;
  -webkit-tap-highlight-color: transparent; }
/* polish5: the drifting title cards pass behind the count; a dark pill keeps it
   readable over any card art (the text shadow alone lost to bright faces) */
body.on-title #deckHot #deckBadge { right: calc(100% + 4px); top: auto; bottom: 6px; padding: 2px 7px;
  background: rgba(8,8,14,.78); border: 1px solid rgba(255,240,214,.18); border-radius: 999px; font-family: "Unbounded", var(--v2-ui); font-weight: 700;
  font-size: 13px; letter-spacing: -.02em; color: rgba(255,240,214,.9); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.8); }
body.on-title #deckHot #deckBadge:empty { display: none; }
body.on-title #deckHot:focus-visible { outline: 2px solid rgba(255,214,160,.6); outline-offset: 4px; border-radius: 8px; }
@media (min-aspect-ratio: 4/3) {
  body.on-title #deckHot { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 8px);
    right: max(18px, env(safe-area-inset-right)); width: 64px; height: 90px; }
}
@media (min-aspect-ratio: 4/3) and (min-width: 1000px) and (min-height: 700px) {
  body.on-title #deckHot { bottom: 26px; right: 34px; width: 100px; height: 140px; }
  body.on-title #deckHot #deckBadge { font-size: 16px; right: calc(100% + 8px); }
}
@media (min-aspect-ratio: 4/3) and (min-width: 1800px) and (min-height: 1100px) {
  body.on-title #deckHot { bottom: 36px; right: 48px; width: 128px; height: 180px; }
  body.on-title #deckHot #deckBadge { font-size: 19px; }
}
/* entry uses the same colourful logo as the title, a touch smaller in portrait */
#entry .en-lockup { width: min(56vw, 260px); filter: drop-shadow(0 8px 18px rgba(0,0,0,.7)); }
/* the logo stays hidden until the player is through the medallion */
#gate .gate-logo, #entry .en-lockup, #entry .en-logo { display: none !important; }

/* =========================================================================
   COLLECTION 2 — "Simplicity wins."
   Header = title + owned count + three quiet icons (search · grid/carousel ·
   close). One type strip. The tile IS the card: art edge to edge in a 5:7
   card, the rarity as a thin rim of light, POWER big in a badge with PWR/LV
   beside it, the name on a gradient at the foot. Perf law for tablets: no
   filter / backdrop-filter / mix-blend on tiles, no per-tile animation, and
   only the carousel's ~10 mounted cards ever get their own layer.
   ========================================================================= */
#binder { backdrop-filter: none; -webkit-backdrop-filter: none;
  background: radial-gradient(120% 55% at 50% 0%, #151327 0%, rgba(7,7,12,0) 62%), #07070c; }
body.binderopen #homeMedal { display: none !important; }
#binder .bhead { gap: 8px; min-height: 56px; padding: max(14px, env(safe-area-inset-top)) 16px 8px 16px; }
#binder .btitles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#binder .bhead .btitle { font: 700 24px/1.05 var(--v2-ui); letter-spacing: -.02em; color: #f4f3f8; text-transform: none; }
#binder .bhead .bcount { font: 500 13px/1.2 var(--v2-ui); letter-spacing: 0; color: #8b88a0; }
#binder .bicon { appearance: none; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #f4f3f8; background: rgba(255,255,255,.06);
  box-shadow: none; -webkit-tap-highlight-color: transparent; }
#binder .bicon:hover { background: rgba(255,255,255,.1); }
#binder .bicon:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
#binder .bicon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#binder .bicon.on { color: #0c0b12; background: #f3f2f7; }
#binderViewBtn .i-grid, #binder.view-car #binderViewBtn .i-car { display: none; }
#binder.view-car #binderViewBtn .i-grid { display: block; }
#binderClose { margin-left: 0; border: 0; }

#binderTabs { position: relative; z-index: 3; flex: none; display: flex; gap: 22px; overflow-x: auto; overflow-y: hidden;
  padding: 2px 16px 0; border-bottom: 1px solid rgba(255,255,255,.07); scrollbar-width: none; overscroll-behavior-x: contain; }
#binderTabs::-webkit-scrollbar { display: none; }
#binderTabs button { appearance: none; flex: none; position: relative; border: 0; background: none; cursor: pointer;
  padding: 10px 0 12px; font: 600 15px/1.1 var(--v2-ui); color: #8b88a0; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
#binderTabs button i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; background: var(--c); }
#binderTabs button.on { color: #fff; }
#binderTabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--c, #f4f3f8); }
#binderTabs button.forged { color: #c9a768; }
#binderTabs button.forged.on { color: #ffd58a; }
#binderTabs button.forged.on::after { background: #ffd58a; }
#binderTabs button .ct { margin-left: 5px; font-size: 12px; font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
#binderTabs button .dot { display: none; position: absolute; top: 7px; right: -8px; width: 6px; height: 6px; border-radius: 50%; background: #ffd166; }
#binderTabs button.ready .dot { display: block; }

#binderTools { display: none; padding: 10px 16px 2px; }
#binder.tools-open #binderTools, #binder.tools-live #binderTools { display: flex; }
#binder.forge-on #binderTools { display: none; }
#binderFilterBtn { min-height: 44px; border-radius: 12px; }
#binderHoloChip.on { color: var(--v2-ivory-ink); background: var(--v2-ivory); }

#binder #binderGrid { padding: 6px 16px calc(max(20px, env(safe-area-inset-bottom)) + 12px); touch-action: pan-y; }
@media (min-width: 761px) { #binder #binderGrid { padding-left: 32px; padding-right: 32px; }
  #binder .bhead { padding-left: 32px; padding-right: 28px; } #binderTabs { padding-left: 32px; padding-right: 32px; gap: 28px; }
  #binderTools { padding-left: 32px; padding-right: 32px; } }
#binder.view-car #binderGrid, #binder.view-car #forgePanel { display: none !important; }
#binderSticky { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(7,7,12,.96); border-bottom: 0;
  height: 40px; margin-bottom: -40px; padding: 0; }
#binder .bsection { height: 40px; padding: 4px 0 0; border: 0; background: none; align-items: center; }
#binder .bsection > span:first-child, #binderSticky span { font: 650 13px/1 var(--v2-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--sc); }
#binder .bsection .bsub, #binderSticky small { font: 500 12px/1 var(--v2-ui); color: #6f6c84; }

/* ---- the tile ---- */
/* v12b CARD HEFT (Jack): a card is a thin, solid monolith — a 2px darker lip
   under its edge (thickness), a tight contact shadow, a soft lifted drop, and a
   bevel highlight on top. ONE box-shadow per tile (+ the bevel on a pseudo that
   already exists), no filters, no extra layers. Subtle: nothing floats. */
:root { --heft: 0 2px 0 0 rgba(4,4,9,.96), 0 3px 3px -1px rgba(0,0,0,.72), 0 16px 22px -14px rgba(0,0,0,.85);
  --heft-lift: 0 3px 0 0 rgba(4,4,9,.96), 0 5px 6px -2px rgba(0,0,0,.7), 0 44px 64px -34px rgba(0,0,0,.92);
  --heft-bevel: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.55), inset 1px 0 0 rgba(255,255,255,.05), inset -1px 0 0 rgba(0,0,0,.35); }
#binder .bcard { display: block; padding: 0; margin: 0; border: 0; border-radius: 14px; overflow: hidden; background: #0d0c15;
  cursor: pointer; text-align: left; color: #f4f3f8; outline: none;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--rc) 72%, transparent), var(--heft), 0 10px 24px -14px color-mix(in srgb, var(--rc) 45%, transparent);
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease; }
#binder .bcard:focus-visible { box-shadow: 0 0 0 3px #f4f3f8; }
#binderVirt .bcard:active { transform: scale(.97); }
#binder .bcard .ct-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: none; }
#binder .bcard::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(5,5,10,0) 50%, rgba(5,5,10,.92) 100%); box-shadow: var(--heft-bevel); }
#binder .bcard.unowned { box-shadow: 0 0 0 1px rgba(255,255,255,.12); background: #0b0a12; }
#binder .bcard.unowned .ct-img { opacity: .3; }
#binder .bcard.unowned .bname { color: #9a97ae; }
.ct-pw { position: absolute; z-index: 2; top: 8px; left: 8px; display: flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 9px; border-radius: 10px; background: rgba(8,8,14,.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  font-family: var(--v2-ui); color: #f4f3f8; pointer-events: none; }
.ct-pw > b { font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ct-pw > span { display: flex; flex-direction: column; gap: 1px; }
.ct-pw > span i { font-style: normal; font-size: 12px; font-weight: 650; line-height: 1.05; color: #a9a6bc; letter-spacing: .02em; white-space: nowrap; }
.ct-pw > span i + i { color: #ffd58a; }
#binder .bcard .ct-foot { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 9px; display: block; }
#binder .bcard .bname { display: -webkit-box; min-height: 0; padding: 0; margin: 0; font: 700 14px/1.15 var(--v2-ui);
  letter-spacing: -.005em; text-transform: none; color: #f4f3f8; overflow: hidden; overflow-wrap: anywhere;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
#binder .bcard .ct-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 3px; }
#binder .bcard .ct-rar, #binder .bcard .bete { position: static; display: inline-flex; align-items: center; gap: 5px; padding: 0; margin: 0;
  background: none; box-shadow: none; border: 0; transform: none; animation: none;
  font: 600 12px/1.1 var(--v2-ui); letter-spacing: 0; text-transform: none; color: var(--rc); }
#binder .bcard.unowned .ct-rar { color: #7d7a92; }
.ct-holo { width: 7px; height: 7px; border-radius: 50%; background: var(--v2-spectrum, linear-gradient(90deg,#ff7ab8,#4fd8ff)); }
.ct-dots { display: inline-flex; gap: 3px; }
.ct-dots i { width: 6px; height: 6px; border-radius: 50%; background: #f4f3f8; }

/* ---- carousel ---- */
#binderCarousel { display: none; flex: 1; min-height: 0; flex-direction: column; }
#binder.view-car #binderCarousel { display: flex; }
#bcTrack { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; outline: none; }
#bcTrack::-webkit-scrollbar { display: none; }
#bcVirt { position: relative; flex: none; }
.bc-snap { position: absolute; top: 50%; height: 1px; scroll-snap-align: center; scroll-snap-stop: normal; pointer-events: none; }
#binder .bc-item { will-change: transform, opacity; transform-origin: 50% 50%; transition: none; }
#binder .bc-item.bcard { border-radius: 20px; }
#binder .bc-item .ct-pw { top: 12px; left: 12px; padding: 7px 11px 7px 12px; border-radius: 13px; }
#binder .bc-item .ct-pw > b { font-size: 30px; }
#binder .bc-item .ct-foot { left: 16px; right: 16px; bottom: 14px; }
#binder .bc-item .bname { font-size: 20px; }
#binder .bc-item .ct-rar { font-size: 14px; }
.bc-forged { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; }
.bc-forged .fgArt, #cfCard .fgArt { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 20px; }
.bc-forged .fgArt > img, .bc-forged .fgQ, #cfCard .fgArt > img, #cfCard .fgQ { border-radius: 20px; }
#bcCap { flex: none; min-height: 132px; padding: 10px 20px calc(max(16px, env(safe-area-inset-bottom)) + 6px); text-align: center; font-family: var(--v2-ui); }
.bc-name { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #f4f3f8; }
.bc-sub, .cf-sub { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 14px; font-weight: 600; color: #b6b4c6; }
.bc-type { display: inline-flex; align-items: center; gap: 5px; }
.bc-sub .fgSub, .cf-sub .fgSub { font-size: 14px; }
.bc-stat { display: flex; justify-content: center; align-items: baseline; gap: 6px; margin-top: 10px; color: #8b88a0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bc-stat b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #f4f3f8; text-transform: none; margin-left: 12px; font-variant-numeric: tabular-nums; }
.bc-stat b:first-child { margin-left: 0; }
.bc-miss { margin-left: 12px; color: #8b88a0; text-transform: none; letter-spacing: 0; font-size: 13px; }
.bc-n { margin-top: 8px; font-size: 12px; color: #6f6c84; font-variant-numeric: tabular-nums; }

/* ---- focus ---- */
#cfocus { position: fixed; inset: 0; z-index: 24; display: none; flex-direction: column; align-items: center;
  background: radial-gradient(70% 45% at 50% 36%, color-mix(in srgb, var(--rc, #b98aff) 20%, transparent), transparent 72%), #06060b;
  color: #f4f3f8; font-family: var(--v2-ui); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#cfocus.on { display: flex; }
body.cfocus #homeMedal { display: none !important; }
#cfClose { position: absolute; z-index: 5; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
#cfocus .cf-stage { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; padding: calc(max(14px, env(safe-area-inset-top)) + 50px) 20px 12px; box-sizing: border-box; }
#cfCard { position: relative; height: min(100%, calc((100vw - 56px) * 1.4), 780px); aspect-ratio: 5 / 7; border-radius: 22px; overflow: hidden;
  background: #0d0c15; cursor: pointer; outline: none; transform-origin: 50% 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rc) 80%, transparent), var(--heft-lift), 0 30px 80px -30px color-mix(in srgb, var(--rc) 60%, transparent); }
#cfCard:focus-visible { box-shadow: 0 0 0 3px #f4f3f8; }
#cfCard.cf-forged { overflow: visible; background: none; box-shadow: none; }
#cfCard.cf-forged .fgArt { box-shadow: 0 0 0 2px rgba(255,154,232,.6), var(--heft-lift), 0 30px 80px -30px rgba(255,154,232,.5); }
#cfCard .cf-art { position: absolute; inset: 0; }
#cfCard .cf-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
#cfCard .cf-full { opacity: 0; transition: opacity .25s; }
#cfCard .cf-full.on { opacity: 1; }
#cfCard::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(5,5,10,0) 58%, rgba(5,5,10,.9) 100%); border-radius: inherit; box-shadow: var(--heft-bevel); }
#cfCard.cf-forged::after { display: none; }
#cfCard .cf-foil { position: absolute; inset: -10% -60%; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.15) 46%, rgba(160,220,255,.12) 50%, rgba(255,180,240,.1) 54%, transparent 62%);
  transform: translateX(-60%); animation: cfFoil 4.4s cubic-bezier(.45,0,.3,1) infinite; }
@keyframes cfFoil { 0%, 30% { transform: translateX(-60%); } 75%, 100% { transform: translateX(60%); } }
@media (prefers-reduced-motion: reduce) { #cfCard .cf-foil { animation: none; opacity: 0; } }
#cfCard .ct-pw { top: 14px; left: 14px; padding: 8px 12px 8px 13px; border-radius: 14px; }
#cfCard .ct-pw > b { font-size: 34px; }
#cfCard .ct-foot { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; }
#cfCard .bname { display: block; font: 700 24px/1.12 var(--v2-ui); letter-spacing: -.015em; color: #f4f3f8; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
#cfCard .ct-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
#cfCard .ct-rar { font: 600 15px/1.1 var(--v2-ui); color: var(--rc); }
#cfocus .fg-holo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .2s; }
#cfocus .fg-holo.on { opacity: 1; }
#cfInfo { flex: none; width: 100%; max-width: 480px; box-sizing: border-box; padding: 4px 20px calc(max(18px, env(safe-area-inset-bottom)) + 4px);
  text-align: center; transition: opacity .2s; }
#cfocus.holding #cfInfo, #cfocus.holding #cfClose { opacity: .2; }
.cf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.cf-stats > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 14px;
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.cf-stats b { font-size: 22px; font-weight: 750; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cf-stats .cf-pw b { font-size: 26px; color: #fff; }
.cf-stats span { font-size: 12px; font-weight: 500; color: #8b88a0; font-variant-numeric: tabular-nums; }
.cf-xp { display: block; width: 100%; max-width: 120px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.cf-xp i { display: block; height: 100%; border-radius: 2px; background: #ffd58a; }
.cf-holo { padding: 3px 9px; border-radius: 999px; font-size: 12px; color: #0c0b12; background: var(--v2-ivory, #f3f2f7); }
.cf-hint { margin: 12px 0 0; font-size: 12px; color: #6f6c84; }
.cf-recipe { margin-top: 12px; display: flex; justify-content: center; }
.cf-recipe .fgSrc { width: 100%; }
.cf-recipe .fgReq { justify-content: center; }
.cf-what { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: #b6b4c6; }
.cf-explain { appearance: none; border: 0; background: none; padding: 0 2px; font: inherit; font-weight: 650; color: #ffd58a; cursor: pointer; }
.cf-forge { appearance: none; border: 0; cursor: pointer; margin-top: 14px; width: 100%; min-height: 52px; border-radius: 999px;
  font: 700 17px/1 var(--v2-ui); color: #1b1206; background: linear-gradient(100deg, #ffd166, #ff9a3c); box-shadow: 0 0 30px -6px rgba(255,170,60,.8); }
/* landscape screens: card left, its numbers right */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  #cfocus.on { flex-direction: row; justify-content: center; gap: 48px; padding: 0 48px; box-sizing: border-box; }
  #cfocus .cf-stage { flex: 0 1 auto; width: auto; height: 100%; padding: 48px 0; }
  #cfCard { height: min(84vh, 860px); }
  #cfInfo { max-width: 400px; text-align: left; padding: 0; }
  #cfInfo .cf-sub, #cfInfo .cf-recipe, #cfInfo .fgReq { justify-content: flex-start; }
}
#cfocus .cf-name { display: none; }
/* the back of the focused card is the shared stat sheet; paging + close stay, the old button row goes */
body.cf-back #binderSheetNav { display: none !important; }
body.cf-back #statSheet { background: rgba(4,4,8,.9); }
body.cf-back #cfocus .cf-stage, body.cf-back #cfInfo { visibility: hidden; }
/* tilt (on by default): the focus stage leans; a soft light rides across the card */
#cfocus .cf-stage { transform-origin: 50% 50%; }
#cfCard .cf-glare { position: absolute; inset: -25%; z-index: 1; pointer-events: none;
  background: radial-gradient(40% 32% at 50% 40%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%); }