:root{
  color-scheme: dark;

  --bg-primary:#080808;
  --bg-secondary:#101010;
  --surface-elevated:#171717;
  --surface-card:#1C1C1E;
  --border:#292929;
  --border-soft:#222222;

  --crimson:#E3262E;
  --crimson-deep:#A90F18;
  --crimson-bright:#F12B35;

  --gold:#D6A83B;
  --gold-bright:#F2C94C;

  --text-primary:#F5F5F5;
  --text-secondary:#A6A6A6;
  --text-muted:#686868;

  --positive:#20D67B;

  --font-display:'Anton', 'Arial Narrow', sans-serif;
  --font-heading:'Oswald', 'Arial Narrow', sans-serif;
  --font-body:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;

  --frame-w:412px;
  --frame-h:892px;
}

*, *::before, *::after{ box-sizing:border-box; }

/* Safety default: every inline icon below sets its own explicit size via a
   more specific rule; this just stops any icon svg from ever falling back
   to the browser's ~300px intrinsic SVG size. */
svg{ width:1em; height:1em; }

html, body{ margin:0; height:100%; }

/* #root is body's actual flex item; give it a definite box so the
   percentage-width chain below (device-stage -> device-frame) always has
   something real to resolve against, at every breakpoint. */
#root{ width:100%; height:100%; min-width:0; }

body{
  background: radial-gradient(120% 100% at 50% 0%, #141414 0%, var(--bg-primary) 55%);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-inline: 16px;
  padding-block: 28px;
}

h1,h2,h3,h4{ margin:0; text-wrap:balance; }
p{ margin:0; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }
.tabular{ font-variant-numeric: tabular-nums; }

::-webkit-scrollbar{ width:0; height:0; }
*{ scrollbar-width:none; }

/* ============ DEVICE STAGE ============ */
.device-stage{
  width:100%;
  display:flex;
  justify-content:center;
}

.device-frame{
  position:relative;
  width: var(--frame-w);
  height: var(--frame-h);
  max-height: calc(100dvh - 56px);
  background: #000;
  border-radius: 48px;
  border: 1px solid #2a2a2a;
  box-shadow:
    0 0 0 8px #050505,
    0 0 0 9px #2c2c2c,
    0 40px 90px -20px rgba(0,0,0,0.85),
    0 10px 30px -8px rgba(227,38,46,0.12);
  overflow:hidden;
  isolation:isolate;
}

.device-notch{
  position:absolute;
  top: max(10px, env(safe-area-inset-top, 0px));
  left:50%;
  transform:translateX(-50%);
  width:118px;
  height:28px;
  background:#000;
  border-radius:20px;
  z-index:500;
  pointer-events:none;
}

/* On an actual narrow phone screen, drop the decorative bezel and fill it */
@media (max-width: 480px){
  body{ padding:0; align-items:stretch; }
  .device-stage{ width:100%; }
  .device-frame{
    width:100%;
    height:100dvh;
    max-height:none;
    border-radius:0;
    border:none;
    box-shadow:none;
  }
  .device-notch{ display:none; }
}

/* ============ APP SHELL ============ */
.app-shell{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  background:var(--bg-primary);
}

.app-screens{
  position:relative;
  flex:1;
  min-height:0;
}

.screen{
  position:absolute;
  inset:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(6px);
  transition: opacity .22s ease, transform .28s ease;
}
.screen.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.screen-pad{
  padding: calc(18px + env(safe-area-inset-top,0px)) 18px calc(28px + env(safe-area-inset-bottom,0px));
}
.screen-pad.with-nav{ padding-bottom: calc(100px + env(safe-area-inset-bottom,0px)); }

/* ============ TOP LABEL / EYEBROW ============ */
.eyebrow{
  font-family: var(--font-heading);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--text-muted);
}
.eyebrow.accent{ color: var(--crimson-bright); }
.eyebrow.gold{ color: var(--gold); }

/* Visually-hidden-but-accessible: used for the hero's text, which the
   artwork itself already renders — keeps that content in the a11y tree
   (and gives the test suite's page-load selectors something to find)
   without ever drawing it, so nothing doubles up on top of the image. */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============ HOME HERO ============
   A full-bleed, edge-to-edge cinematic banner using the user's own supplied
   artwork (assets/hero/hero-banner.webp) as the background — no card
   border, no rounded box, no drop shadow, so it reads as part of the app
   itself rather than a tile sitting on top of it. The artwork already
   contains the NAKAMA VAULT wordmark, tagline and quote, so nothing is
   drawn on top of it. Sized by the image's own native aspect ratio
   (2048:768 ~ 2.667:1), so at any mobile width the whole picture shows
   with zero cropping and the banner naturally lands compact (~150-180px
   tall) without a fixed height fighting the art. A bottom fade blends the
   banner straight into the #080808 app background below it. */
.hero{
  position:relative;
  aspect-ratio: 2048 / 768;
  max-height:184px;
  overflow:hidden;
  margin: calc(-18px - env(safe-area-inset-top,0px)) -18px 16px -18px;
}
.hero-photo{
  background-image: url('assets/hero/hero-banner.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:22%;
  background: linear-gradient(180deg, rgba(8,8,8,0) 0%, rgba(8,8,8,0.92) 100%);
  pointer-events:none;
}
.hero-stats{
  margin-top:20px;
  display:flex;
  gap:10px;
}
.hero-stat{
  flex:1;
  background: rgba(255,255,255,0.03);
  border:1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding:10px 12px;
}
.hero-stat .num{
  font-family: var(--font-display);
  font-size:20px;
  color: var(--text-primary);
}
.hero-stat .lbl{
  margin-top:2px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--text-muted);
}

/* ============ HOME TABS (All Sets / My Sets / Favorites) ============ */
.home-tabs{ display:flex; gap:8px; margin:18px 0 16px; }
.home-tab{
  flex:1; text-align:center; padding:9px 0; border-radius:20px;
  background:var(--surface-card); border:1px solid var(--border);
  font-family:var(--font-heading); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-secondary); cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.home-tab:active{ transform:scale(.97); }
.home-tab.active{ background:var(--crimson); border-color:var(--crimson); color:#fff; }

/* ============ PREMIUM SET CARDS (Home / Sets / Profile favorites) ============ */
.set-grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.pset-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--surface-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease;
}
.pset-card:active{ transform:scale(.96); }
.pset-card.is-active{ border-color: rgba(214,168,59,0.45); }
.pset-card.is-complete{ border-color:var(--gold); box-shadow:0 0 16px -6px rgba(214,168,59,0.45); }
.pset-card.is-locked{ opacity:.55; cursor:default; }

/* Cover art — now the set's REAL booster-pack photo (the exact same asset
   Shop uses, via getPackImage()/PackArt — components.js), not a flat
   color block. Near-black stage, rounded top corners only, no border line —
   the colorful pack art itself is the only color here, everything around it
   stays dark so the pack reads as the card's hero. aspect-ratio is taller
   than the old 1/1 square specifically to give a portrait pack photo more
   room without widening the 3-per-row grid. */
.pset-cover{
  position:relative;
  aspect-ratio: 4 / 5;
  background:#0B0B0B;
  border-radius:16px 16px 0 0;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
/* PackArt (shop-pack-art-set below) fills this wrapper edge-to-edge — the
   wrapper itself owns the aspect-ratio/rounding so Home's sizing can be
   tuned independently of Shop's card/detail/fullscreen sizes. */
.pset-cover-pack .shop-pack-art{ width:100%; height:100%; }
.pset-cover-code{ font-family:var(--font-display); font-size:22px; color:rgba(255,255,255,0.55); }
.pset-cover-complete{
  position:absolute; top:6px; left:6px; width:18px; height:18px; z-index:5;
  color:var(--gold-bright); filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}

/* Locked (OP-18/OP-19 — not released yet): a premium dark silhouette, a
   lock glyph (the same icon already used app-wide for any locked card) over
   the set number. Deliberately NOT an official One Piece logo and NOT
   fabricated pack art — just a quiet placeholder until a real product photo
   exists, at which point it becomes a normal unlocked cover automatically. */
.pset-cover-locked{
  flex-direction:column; gap:6px;
  background: radial-gradient(120% 90% at 50% 30%, #1a1a1a, #0a0a0a 75%);
}
.pset-cover-locked-icon{ color:rgba(255,255,255,0.24); display:flex; }
.pset-cover-locked-icon svg{ width:18px; height:18px; }
.pset-card.is-locked .pset-cover-code{ color:rgba(255,255,255,0.35); font-size:20px; }

.pset-fav{
  position:absolute; top:6px; right:6px; z-index:5;
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.75); cursor:pointer;
}
.pset-fav:active{ transform:scale(.9); }
.pset-fav svg{ width:13px; height:13px; }
.pset-fav.active{ color:var(--crimson-bright); border-color:rgba(227,38,46,0.5); }

.pset-body{ padding:9px 10px 11px; }
.pset-code{ font-family:var(--font-heading); font-size:9.5px; font-weight:600; letter-spacing:.06em; color:var(--text-muted); text-transform:uppercase; }
.pset-name{
  font-family:var(--font-heading); font-size:11px; font-weight:600; color:var(--text-primary); margin-top:2px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:27px;
}
.pset-pct{ font-family:var(--font-display); font-size:13.5px; color:var(--text-secondary); margin-top:6px; }
.pset-card.is-complete .pset-pct{ color:var(--gold-bright); }
.pset-card .progress-track{ margin-top:6px; height:4px; }
.pset-soon{
  margin-top:8px; display:inline-block;
  font-family:var(--font-heading); font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); background:rgba(255,255,255,0.04); border:1px solid var(--border);
  padding:3px 7px; border-radius:20px;
}

/* ============ PROFILE ============ */
.profile-card{
  display:flex; align-items:center; gap:14px; margin-top:16px;
  background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px;
}
.profile-avatar{
  flex:none; width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg, var(--crimson-bright), var(--crimson-deep));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:21px; color:#fff;
}
.profile-name-input{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  font-family:var(--font-display); font-size:18px; color:var(--text-primary);
  border-bottom:1px solid transparent; padding:3px 0;
}
.profile-name-input:focus{ border-bottom-color:var(--crimson); }

/* ============ SETTINGS ROW (Profile) ============ */
.settings-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:13px 14px; margin-top:10px;
}
.settings-row-title{ font-family:var(--font-heading); font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--text-primary); }
.settings-row-sub{ font-size:11px; color:var(--text-muted); margin-top:3px; line-height:1.4; max-width:230px; }

/* .settings-row used as a tappable <button> (Favorites / Share My Vault /
   Export Collection rows on Profile) rather than a static toggle row —
   resets the button-element defaults so it renders identically. */
.settings-row-nav{ width:100%; text-align:left; font-family:inherit; cursor:pointer; }
.settings-row-nav:active{ background:var(--surface-elevated); }
.settings-row-nav svg{ flex:none; width:16px; height:16px; color:var(--text-muted); }
.switch{
  flex:none; width:44px; height:26px; border-radius:14px; border:1px solid var(--border);
  background:var(--bg-secondary); position:relative; cursor:pointer; padding:0;
  transition: background .2s ease, border-color .2s ease;
}
.switch-knob{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--text-secondary); transition: transform .2s ease, background .2s ease;
}
.switch.on{ background:var(--crimson); border-color:var(--crimson); }
.switch.on .switch-knob{ transform:translateX(18px); background:#fff; }

/* ============ SECTION HEADER ============ */
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin: 6px 2px 14px;
}
.section-title{
  font-family: var(--font-heading);
  font-size:15px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color: var(--text-primary);
}
.section-sub{
  font-size:12px;
  color: var(--text-muted);
}

/* ============ SET TILE ============ */
.set-list{ display:flex; flex-direction:column; gap:12px; }

.set-tile{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px;
  background: var(--surface-card);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.set-tile:active{ transform:scale(.98); }
.set-tile.is-active{ border-color: rgba(214,168,59,0.55); box-shadow: 0 0 0 1px rgba(214,168,59,0.18) inset; }
.set-tile.is-complete{ border-color: var(--gold); box-shadow: 0 0 0 1px rgba(214,168,59,0.35) inset, 0 0 18px -6px rgba(214,168,59,0.45); }
.set-tile.is-locked{ opacity:.55; cursor:default; }

.set-art{
  flex:none;
  width:58px; height:58px;
  border-radius:12px;
  background: linear-gradient(150deg, var(--tile-a,#3a1214), var(--tile-b,#170707));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:15px;
  color:rgba(255,255,255,0.82);
  border:1px solid rgba(255,255,255,0.06);
  position:relative;
  overflow:hidden;
}
.set-art .glyph{ opacity:.9; }
.set-tile.is-locked .set-art{ filter:grayscale(1); opacity:.7; }

.set-info{ flex:1; min-width:0; }
.set-num{ font-family:var(--font-heading); font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--text-muted); }
.set-name{ font-family:var(--font-heading); font-size:14.5px; font-weight:600; color:var(--text-primary); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.set-progress-row{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.set-pct{ font-family:var(--font-display); font-size:13px; color:var(--text-secondary); min-width:34px; text-align:right; }
.set-tile.is-complete .set-pct{ color:var(--gold-bright); }

.set-badge-soon{
  font-family:var(--font-heading); font-size:9.5px; font-weight:600; letter-spacing:.1em;
  color:var(--text-muted); text-transform:uppercase; background:rgba(255,255,255,0.04);
  border:1px solid var(--border); padding:3px 8px; border-radius:20px;
}
.set-badge-complete{
  font-family:var(--font-heading); font-size:9px; font-weight:700; letter-spacing:.08em;
  color:#1a1204; text-transform:uppercase; background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  padding:3px 7px; border-radius:20px;
}

/* ============ PROGRESS BAR ============ */
.progress-track{
  flex:1;
  height:5px;
  border-radius:4px;
  background: rgba(255,255,255,0.06);
  overflow:hidden;
}
.progress-fill{
  height:100%;
  border-radius:4px;
  background: linear-gradient(90deg, var(--crimson-deep), var(--crimson-bright));
  transition: width .6s cubic-bezier(.22,.85,.32,1);
}
.progress-fill.gold{ background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }

/* ============ SET COLLECTION HEADER ============ */
.collection-header{ margin-bottom:18px; }
.back-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.icon-btn{
  width:34px; height:34px; border-radius:50%;
  background: var(--surface-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-primary); cursor:pointer; flex:none;
}
.icon-btn:active{ transform:scale(.92); }
.icon-btn svg{ width:16px; height:16px; }

.set-title-block .set-num{ font-size:12px; }
.set-title-block h2{ font-family:var(--font-display); font-size:26px; letter-spacing:.01em; margin-top:2px; line-height:1; }
.set-title-block .set-sub{ font-family:var(--font-heading); font-size:12.5px; color:var(--text-secondary); margin-top:4px; }

.collected-row{ display:flex; align-items:baseline; gap:10px; margin-top:16px; }
.collected-row .big{ font-family:var(--font-display); font-size:22px; }
.collected-row .pct{ font-family:var(--font-display); font-size:22px; color:var(--crimson-bright); margin-left:auto; }

.stat-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; margin-top:14px; }
.stat-tile{
  background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 10px;
}
.stat-tile .lbl{ font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.stat-tile .val{ font-family:var(--font-display); font-size:17px; margin-top:4px; color:var(--text-primary); }
.stat-tile .val.green{ color:var(--positive); }

/* ============ FILTER / SEARCH ============ */
.filter-row{ display:flex; gap:8px; margin:16px 0 10px; }
.chip{
  padding:7px 14px; border-radius:20px; border:1px solid var(--border);
  background:var(--surface-card); color:var(--text-secondary);
  font-family:var(--font-heading); font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap;
}
.chip.active{ background:var(--crimson); border-color:var(--crimson); color:#fff; }

.search-box{
  display:flex; align-items:center; gap:8px;
  background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 12px; margin-bottom:6px;
}
.search-box input{
  flex:1; background:none; border:none; outline:none; color:var(--text-primary);
  font-family:var(--font-body); font-size:13.5px;
}
.search-box input::placeholder{ color:var(--text-muted); }
.search-box svg{ flex:none; width:17px; height:17px; color:var(--text-muted); }

.rarity-scroll{ display:flex; gap:7px; overflow-x:auto; padding:10px 0 16px; margin:0 -18px; padding-left:18px; padding-right:18px; }
.rarity-chip{
  flex:none; padding:5px 11px; border-radius:16px; border:1px solid var(--border);
  background:transparent; color:var(--text-muted);
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  cursor:pointer;
}
.rarity-chip.active{ border-color:var(--gold); color:var(--gold-bright); background:rgba(214,168,59,0.08); }

.cost-scroll{ display:flex; align-items:center; gap:7px; overflow-x:auto; padding:0 0 8px; margin:-6px -18px 0; padding-left:18px; padding-right:18px; }
.cost-scroll-lbl{ flex:none; font-family:var(--font-heading); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-right:2px; }
.cost-data-note{ font-size:10.5px; color:var(--text-muted); padding:0 0 12px; line-height:1.4; }

/* ============ CARD GRID ============ */
.card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
  padding-bottom:8px;
}

.tcard{
  position:relative;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition: transform .12s ease;
}
.tcard:active{ transform:scale(.96); }

/* The real card image is the hero of this screen: the frame is just a thin
   edge and shadow around it, not a colored block competing with it. */
.tcard-face{
  position:relative;
  aspect-ratio: 5 / 7;
  border-radius:11px;
  overflow:hidden;
  background:#121212;
  border:1px solid var(--border);
}
.tcard.owned .tcard-face{ border-color: rgba(255,255,255,0.22); box-shadow: 0 6px 16px -8px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,0.04) inset; }
.tcard.rarity-sr.owned .tcard-face,
.tcard.rarity-secret.owned .tcard-face{ border-color: rgba(214,168,59,0.6); box-shadow: 0 0 0 1px rgba(214,168,59,0.35), 0 8px 18px -8px rgba(0,0,0,.85); }
.tcard.rarity-leader.owned .tcard-face{ border-color: rgba(227,38,46,0.65); box-shadow: 0 0 0 1px rgba(227,38,46,0.4); }

.tcard-skel{ position:absolute; inset:0; }

.tcard-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition: opacity .35s ease, filter .55s ease;
}
.tcard-img.loaded{ opacity:1; }

/* Missing-card treatment — the real card art, desaturated and dimmed, not a
   generic icon: you can still tell exactly which card belongs here. */
.tcard.locked .tcard-img.loaded{ filter:grayscale(100%) brightness(35%); opacity:.70; }
.tcard.owned .tcard-img.loaded{ filter:none; opacity:1; }
.tcard.locked .tcard-face::before{
  content:''; position:absolute; inset:0; background:rgba(0,0,0,0.20); z-index:2; pointer-events:none;
}
.tcard-locknum{
  position:absolute; top:6px; left:7px; z-index:3;
  font-family:var(--font-heading); font-size:8.5px; font-weight:600; letter-spacing:.03em;
  color:rgba(255,255,255,0.7); text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.tcard-lock{
  position:absolute; z-index:3; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.85);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.6));
}
.tcard-lock svg{ width:18px; height:18px; }

/* This is the card's in-game COLOR dot (Red/Green/etc, via --dot — see
   dotColor() in components.js), not a rarity indicator despite the class
   name. The real OP-17 data has no `color` field so it renders neutral for
   the star 177-card binder; the legacy OP-15/16 placeholder sets still use
   it. Tucked into the one remaining empty corner now that the top-right
   corner belongs to the RarityRibbon (section 36). */
.tcard-rarity-dot{
  position:absolute; bottom:6px; left:7px; z-index:3;
  width:6px; height:6px; border-radius:50%;
  background: var(--dot, var(--text-muted));
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  opacity:.85;
}

/* ============ RARITY RIBBON (sections 36-40) ============
   A small, premium corner marker — never a colored border around the whole
   card, never covering artwork. Sits above the locked-card darkening layer
   (that ::before is z-index:2) so rarity stays legible even before a card
   is collected (section 39), just visibly dimmer than on an owned card. */
.rarity-ribbon{
  position:absolute; top:5px; right:5px; z-index:4;
  font-family:var(--font-heading); font-weight:700; font-size:7.5px;
  letter-spacing:.03em; line-height:1;
  padding:3px 5px 2.5px;
  border-radius:5px;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-shadow:0 1px 3px rgba(0,0,0,.55);
  transition: opacity .3s ease, filter .3s ease;
}
/* Rarity stays visible even on a not-yet-owned card — just dimmer, never
   hidden — so collectors can spot which chase prints they're missing. */
.tcard.locked .rarity-ribbon{ opacity:.58; filter:saturate(65%) brightness(.82); box-shadow:none; }
.tcard.owned .rarity-ribbon{ opacity:1; }

/* Controlled-saturation color hierarchy (section 37) — accents only, the
   binder still reads as black/crimson/premium, never a new colorful theme. */
.rarity-ribbon.rrib-common{ background:linear-gradient(135deg,#3c3c3c,#1f1f1f); color:#c9c9c9; border:1px solid rgba(255,255,255,.12); }
.rarity-ribbon.rrib-uncommon{ background:linear-gradient(135deg,#54555c,#2c2d32); color:#dcdde2; border:1px solid rgba(210,213,224,.22); }
.rarity-ribbon.rrib-rare{ background:linear-gradient(135deg,#3d5b78,#182530); color:#c3dcee; border:1px solid rgba(130,180,220,.4); }
.rarity-ribbon.rrib-leader{ background:linear-gradient(135deg,#6b141b,#2b0709); color:#ffd7d7; border:1px solid rgba(227,38,46,.55); }
.rarity-ribbon.rrib-sr{ background:linear-gradient(135deg,#8a6a26,#3c2b0c); color:#ffedb8; border:1px solid rgba(214,168,59,.75); box-shadow:0 0 6px rgba(214,168,59,.3); }
.rarity-ribbon.rrib-sec{ background:linear-gradient(135deg,#6b141b 0%,#4a350f 55%,#1a0c04 100%); color:#ffdca0; border:1px solid rgba(214,168,59,.6); }
.rarity-ribbon.rrib-alt{ background:linear-gradient(135deg,#3f1f5c,#170a24); color:#e6ccff; border:1px solid rgba(155,93,229,.55); }
.rarity-ribbon.rrib-sp{ background:linear-gradient(135deg,#e7e3d6,#b3ac9e); color:#241f14; border:1px solid rgba(255,255,255,.65); text-shadow:none; }
.rarity-ribbon.rrib-tr{ background:linear-gradient(135deg,#dcb54a,#7a5711); color:#3a2504; border:1px solid rgba(255,224,150,.75); text-shadow:none; }

/* Higher-rarity ribbons get a touch more presence — thin highlight + tiny
   foil sweep — never the whole card animating (section 38). */
.rarity-ribbon.is-premium{ position:relative; overflow:hidden; }
.rarity-ribbon.is-premium::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 62%);
  mix-blend-mode:overlay; pointer-events:none;
}

/* MANGA RARE — the most distinctive badge (black/gold/crimson), with a
   very subtle animated metallic reflection on the badge ONLY, per section
   38's explicit "do NOT animate the entire card continuously". */
.rarity-ribbon.rrib-manga{
  background:linear-gradient(120deg,#100c0c 0%,#5c1016 30%,#8a6a26 55%,#5c1016 75%,#100c0c 100%);
  background-size:260% 260%;
  color:#f5dd9a; border:1px solid rgba(214,168,59,.7);
  box-shadow:0 0 7px rgba(214,168,59,.35);
  animation: rrib-manga-shimmer 3.6s ease-in-out infinite;
}
.tcard.locked .rarity-ribbon.rrib-manga{ animation-duration:5.2s; }
@keyframes rrib-manga-shimmer{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .rarity-ribbon.rrib-manga{ animation:none; }
}

/* Optional, subtle "this is the card I was just viewing" return highlight
   (section 45) — a single thin crimson/gold glow that fades, never a flash
   or an aggressive pulse. */
.tcard.return-highlight .tcard-face{
  animation: tcard-return-glow .65s ease-out;
}
@keyframes tcard-return-glow{
  0%{ box-shadow:0 0 0 2px rgba(214,168,59,.55), 0 0 14px 2px rgba(227,38,46,.35); }
  100%{ box-shadow:0 0 0 0 rgba(214,168,59,0), 0 0 0 0 rgba(227,38,46,0); }
}

.tcard-qty{
  position:absolute; bottom:6px; right:6px; z-index:3;
  background:rgba(0,0,0,0.62); backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,0.14);
  color:var(--text-primary); font-family:var(--font-heading); font-weight:600;
  font-size:9.5px; padding:2px 6px; border-radius:20px;
}

.tcard-gold-corner{
  position:absolute; top:0; right:0; z-index:3; width:0; height:0;
  border-style:solid; border-width:0 20px 20px 0;
  border-color: transparent var(--gold) transparent transparent;
  opacity:0;
}
.tcard.rarity-secret.owned .tcard-gold-corner{ opacity:1; }

.tcard-label{ margin-top:4px; text-align:center; }
.tcard-num{ font-family:var(--font-heading); font-size:9.5px; font-weight:600; color:var(--text-secondary); letter-spacing:.02em; }
.tcard.locked .tcard-num{ color:var(--text-muted); }
.tcard-name{ font-size:9px; color:var(--text-muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Favorite heart in the label strip (section 49, Favorites screen's Cards
   tab only — see TradingCard's `showFavorite` opt). Sits below the
   artwork, never on top of it. */
.tcard-label-row{ display:flex; align-items:center; justify-content:center; gap:5px; position:relative; padding-right:16px; }
.tcard-label-row .tcard-num{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tcard-fav{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:16px; height:16px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.4); background:none; border:none; cursor:pointer; padding:0;
}
.tcard-fav svg{ width:12px; height:12px; }
.tcard-fav.active{ color:var(--crimson-bright); }
.tcard-fav:active{ transform:translateY(-50%) scale(.85); }

.empty-state{
  text-align:center; padding:50px 20px; color:var(--text-muted);
}
.empty-state .glyph{ font-size:30px; margin-bottom:10px; opacity:.5; }
.empty-state p{ font-size:13px; line-height:1.5; }

/* ============ FAVORITES EMPTY STATE (section 50) ============
   A premium, on-brand empty state — never a blank black screen — reused
   for both the Cards and Sets tabs of the Favorites screen. */
.favorites-empty{ text-align:center; padding:64px 28px 40px; }
.favorites-empty-badge{
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  background: linear-gradient(150deg, var(--crimson-bright), var(--crimson-deep));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 1px rgba(227,38,46,0.4), 0 0 40px -8px rgba(227,38,46,0.5);
}
.favorites-empty-badge svg{ width:26px; height:26px; color:#fff; }
.favorites-empty-title{ font-family:var(--font-display); font-size:19px; color:var(--text-primary); letter-spacing:.01em; }
.favorites-empty p{ font-size:13px; color:var(--text-secondary); line-height:1.5; margin-top:8px; }
.favorites-empty .btn{ margin-top:20px; display:inline-flex; width:auto; padding-left:28px; padding-right:28px; }

/* ============ BOTTOM NAV ============ */
.bottom-nav{
  position:absolute; left:0; right:0; bottom:0; z-index:50;
  display:flex;
  background: rgba(16,16,16,0.86);
  backdrop-filter: blur(16px) saturate(140%);
  border-top:1px solid var(--border-soft);
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom,0px));
}
.nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  padding:4px 0;
}
.nav-item svg{ width:21px; height:21px; }
.nav-item span{ font-family:var(--font-heading); font-size:9.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.nav-item.active{ color:var(--text-primary); }
.nav-item.active svg{ color:var(--crimson-bright); }
.nav-item.open-item{ position:relative; top:-14px; }
.nav-item.open-item .open-badge{
  width:46px; height:46px; border-radius:50%;
  background: linear-gradient(150deg, var(--crimson-bright), var(--crimson-deep));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px -6px rgba(227,38,46,0.55), 0 0 0 5px var(--bg-primary);
  margin-bottom:2px;
}
.nav-item.open-item svg{ color:#fff; width:20px; height:20px; }
.nav-item.open-item span{ color:var(--text-secondary); }
.nav-item.open-item.active span{ color:var(--text-primary); }

/* ============ BUTTONS ============ */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px 18px; border-radius:14px; border:none; cursor:pointer;
  font-family:var(--font-heading); font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  transition: transform .12s ease, opacity .15s ease;
}
.btn:active{ transform:scale(.98); }
.btn svg{ width:16px; height:16px; flex:none; }
.btn-primary{ background: linear-gradient(135deg, var(--crimson-bright), var(--crimson-deep)); color:#fff; box-shadow:0 10px 22px -10px rgba(227,38,46,0.65); }
.btn-secondary{ background: var(--surface-card); color:var(--text-primary); border:1px solid var(--border); }
.btn-ghost{ background:transparent; color:var(--text-secondary); border:1px solid var(--border); }
.btn-danger{ background:transparent; color:var(--crimson-bright); border:1px solid rgba(227,38,46,0.4); }
.btn-disabled{ opacity:.4; pointer-events:none; }
.btn[disabled]{ opacity:.35; pointer-events:none; }

/* ============ STACKED CONFIRM OVERLAY (stacks above an open .sheet) ============ */
.confirm-overlay{
  position:absolute; inset:0; z-index:350;
  background: rgba(0,0,0,0.72);
  display:flex; align-items:center; justify-content:center;
  padding: 24px;
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.confirm-overlay.open{ opacity:1; pointer-events:auto; }
.confirm-card{
  width:100%; max-width:340px;
  background: linear-gradient(180deg, #171717, var(--bg-secondary));
  border:1px solid var(--border); border-radius:18px;
  padding:22px 20px 20px;
  text-align:center;
  transform: scale(.94); transition: transform .22s cubic-bezier(.22,.85,.32,1);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.8);
}
.confirm-overlay.open .confirm-card{ transform:scale(1); }
.confirm-icon{
  width:52px; height:52px; margin:0 auto 14px; border-radius:50%;
  background:rgba(227,38,46,0.12); border:1px solid rgba(227,38,46,0.35);
  display:flex; align-items:center; justify-content:center; color:var(--crimson-bright);
}
.confirm-icon svg{ width:24px; height:24px; }
.confirm-title{ font-family:var(--font-heading); font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-primary); }
.confirm-body{ margin-top:10px; font-size:13px; color:var(--text-secondary); line-height:1.5; }
.confirm-actions{ margin-top:20px; display:flex; gap:10px; }
.confirm-actions .btn{ width:auto; flex:1; }

/* ============ CARD DETAIL SHEET ============ */
.sheet-backdrop{
  position:absolute; inset:0; z-index:200;
  background: rgba(0,0,0,0.6);
  opacity:0; pointer-events:none;
  transition: opacity .25s ease;
}
.sheet-backdrop.open{ opacity:1; pointer-events:auto; }

.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:201;
  max-height:92%;
  background: linear-gradient(180deg, #151515, var(--bg-secondary) 40%);
  border-top:1px solid var(--border);
  border-radius:26px 26px 0 0;
  padding: 14px 20px calc(22px + env(safe-area-inset-bottom,0px));
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.22,.85,.32,1);
  overflow-y:auto;
  box-shadow: 0 -20px 60px -20px rgba(0,0,0,0.7);
}
.sheet.open{ transform:translateY(0); }
.sheet-handle{ width:36px; height:4px; border-radius:3px; background:var(--border); margin:0 auto 16px; }
.sheet-close{ position:absolute; top:14px; right:16px; z-index:2; }

/* Card-favorite heart on the Card Detail sheet (section 49) — mirrored to
   the close button on the opposite corner. Independent of owned/locked
   state: the outline shows "not favorited", the filled crimson heart
   shows "favorited" — exactly the same two states used everywhere else a
   heart appears in NAKAMA Vault (PremiumSetCard's .pset-fav). */
.sheet-fav{ position:absolute; top:14px; left:16px; z-index:2; }
.sheet-fav svg{ color:inherit; }
.sheet-fav.active{ color:var(--crimson-bright); border-color:rgba(227,38,46,0.5); }

.detail-layout{ display:flex; gap:16px; }
.detail-art{
  flex:none; width:132px; aspect-ratio:5/7; border-radius:14px; overflow:hidden;
  background:#121212;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
}
.detail-art img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:none; opacity:1;
  transition: filter .4s ease, opacity .3s ease;
}
.detail-art.locked img{ filter:grayscale(100%) brightness(35%); opacity:.70; }
.detail-art.locked::after{
  content:''; position:absolute; inset:0; background:rgba(0,0,0,0.20); pointer-events:none;
}
.detail-art .detail-art-lock{
  position:absolute; z-index:2; width:30px; height:30px; color:#fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}
.detail-art:not(.locked){ border-color: rgba(214,168,59,0.35); }

.detail-status{
  display:inline-block; margin-top:2px;
  font-family:var(--font-heading); font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.detail-status.locked{ color:var(--text-muted); }
.detail-status.owned{ color:var(--positive); }

.detail-info{ flex:1; min-width:0; }
.detail-num{ font-family:var(--font-heading); font-size:11.5px; color:var(--text-muted); font-weight:600; }
.detail-name{ font-family:var(--font-display); font-size:21px; line-height:1.05; margin-top:4px; }
.badge-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.badge{
  font-family:var(--font-heading); font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:4px 9px; border-radius:20px; border:1px solid var(--border); color:var(--text-secondary);
}
.badge.rare-common{ color:#9aa; border-color:#333; }
.badge.rare-rare{ color:#9fc2ff; border-color:#2c3e5c; }
.badge.rare-sr{ color:var(--gold-bright); border-color: rgba(214,168,59,0.4); background:rgba(214,168,59,0.06); }
.badge.rare-secret{ color:#0b0705; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border:none; }
.badge.rare-leader{ color:#ffd7d7; border-color: rgba(227,38,46,0.45); background:rgba(227,38,46,0.08); }
.badge.color-tag{ }

.detail-owned-tag{ margin-top:10px; font-size:11.5px; color:var(--positive); font-weight:600; }

.price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-top:20px; }
.price-tile .lbl{ font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); }
.price-tile .val{ font-family:var(--font-display); font-size:16px; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.price-tile .val.main{ color:var(--positive); font-size:18px; }
.price-delta{ font-size:10px; font-weight:700; margin-top:3px; }
.price-delta.up{ color:var(--positive); }
.price-delta.down{ color:var(--crimson-bright); }
.price-delta.unavailable{ color:var(--text-muted); font-weight:600; }

/* Development-only marker shown only for locally generated placeholder art
   (imageStatus === 'temporary' — legacy OP-15/OP-16 sets). Real OP-17 card
   images from the snapshot (imageStatus === 'external') never show this. */
.artwork-preview-tag{
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-heading); font-size:8.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-muted);
}
.artwork-preview-tag::before{ content:'◆'; font-size:6px; opacity:.6; }
.detail-art .artwork-preview-tag{
  position:absolute; left:8px; bottom:8px; z-index:2;
  background:rgba(0,0,0,0.6); padding:3px 7px; border-radius:5px;
  color:#e8e8e8;
}
.artwork-preview-tag.standalone{ justify-content:center; margin-top:4px; opacity:.75; }

.qty-row{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding:12px 14px; background:var(--surface-card); border:1px solid var(--border); border-radius:14px; }
.qty-lbl{ font-family:var(--font-heading); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.qty-controls{ display:flex; align-items:center; gap:16px; }
.qty-btn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--bg-secondary);
  color:var(--text-primary); font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.qty-btn:active{ transform:scale(.9); }
.qty-num{ font-family:var(--font-display); font-size:18px; min-width:18px; text-align:center; }

.detail-actions{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }

/* ============ SHARE MY VAULT / EXPORT COLLECTION SHEETS ============ */
.share-sub{ font-size:12.5px; color:var(--text-secondary); line-height:1.55; margin:10px 0 16px; }
.share-preview-wrap{
  margin-top:12px; border-radius:16px; overflow:hidden; border:1px solid var(--border);
  background:#060606; display:flex; align-items:center; justify-content:center;
}
/* max-height (not height:100% of an auto-sized parent, which resolves to
   nothing and previously let the tall 9:16 canvas overflow its wrap and
   get cropped at the bottom) is what actually keeps the whole card, footer
   included, visible and never clipped. */
.share-preview-img{ display:block; max-width:100%; max-height:56vh; width:auto; height:auto; object-fit:contain; }

/* ============ UNLOCK ANIMATION ============ */
.unlock-overlay{
  position:absolute; inset:0; z-index:550;
  background: radial-gradient(120% 90% at 50% 30%, rgba(30,4,4,0.92), rgba(0,0,0,0.98));
  display:flex; flex-direction:column; align-items:center;
  opacity:0; pointer-events:none;
  transition: opacity .35s ease;
  padding: max(30px, env(safe-area-inset-top,0px)) 24px 30px;
  text-align:center;
  overflow-y:auto;
}
.unlock-overlay::before{ content:''; flex:1 0 0; min-height:6px; }
.unlock-overlay::after{ content:''; flex:1 0 0; min-height:6px; }
.unlock-overlay.open{ opacity:1; pointer-events:auto; }

.unlock-stage{
  position:relative;
  width:172px; aspect-ratio:5/7;
  margin-bottom:22px;
}

/* Crimson energy glow behind the card — RARE tier and up (section 29,
   tiers 2-5: "red light travels around card border" / "crimson energy
   builds behind card" / etc). Sits fully behind the stage via z-index:-1. */
.unlock-energy{
  position:absolute; inset:-40px; z-index:-1; border-radius:50%;
  background: radial-gradient(circle, rgba(227,38,46,0.5), rgba(227,38,46,0) 70%);
  opacity:0; transition: opacity .6s ease;
  pointer-events:none;
}
.unlock-energy.show{ opacity:1; }
.unlock-energy.pulse{ animation: energyPulse .55s ease-out 1; }
@keyframes energyPulse{
  0%{ transform:scale(1); opacity:.55; }
  50%{ transform:scale(1.18); opacity:1; }
  100%{ transform:scale(1); opacity:.8; }
}

/* Thin gold line that traces/spins once around the card border — SUPER_RARE
   tier and up ("thin gold line travels around card border" / "metallic
   gold border traces around the card" / "gold outline begins drawing").
   Sits just behind the opaque card face, which covers everything except a
   thin ring at the edges — no masking trickery needed. */
.unlock-gold-trace{
  position:absolute; inset:-4px; z-index:0; border-radius:19px;
  opacity:0; transition: opacity .35s ease;
  background: conic-gradient(from 0deg, transparent 0%, var(--gold-bright) 12%, rgba(242,201,76,0.3) 26%, transparent 42%, transparent 100%);
  pointer-events:none;
}
.unlock-gold-trace.show{ opacity:1; }
.unlock-gold-trace.show.spin{ animation: goldTraceSpin 1.1s linear 1; }
@keyframes goldTraceSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

.unlock-card-face{
  position:absolute; z-index:2; inset:0; border-radius:16px; overflow:hidden;
  background:#121212;
  border:1px solid rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .9s ease, box-shadow .9s ease, transform .5s cubic-bezier(.2,.9,.3,1.2);
}
/* "the card slightly lifts forward" (RARE+) / "card slowly moves forward"
   (CHASE) — works whether the card is still grayscale (.pre) or already
   revealed (.post), since CHASE's spec timeline lifts the card BEFORE the
   color reveal starts. */
.unlock-card-face.lifted{ transform: translateY(-8px) scale(1.03); }
.unlock-card-face.post.lifted{ transform: translateY(-8px) scale(1.06); }

/* CHASE tier only (section 33) — after the card is fully revealed, a very
   subtle, slow-drifting diagonal reflection plays continuously across the
   REAL artwork underneath, like museum-case glass catching the light. Never
   a rainbow/neon effect — just a soft white/gold pass, low opacity. */
.unlock-card-face.chase-shimmer::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.16) 45%, rgba(242,201,76,0.2) 50%, rgba(255,255,255,0.16) 55%, transparent 70%);
  background-size:250% 250%;
  animation: chaseFoilDrift 3.2s ease-in-out infinite;
  mix-blend-mode: overlay;
}
@keyframes chaseFoilDrift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.unlock-card-face img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* Grayscale->color resolves over ~350ms starting when app.js's
     synchronized unlock timeline flips .pre->.post at 0.55s, landing full
     color right around the spec's 0.90s "full-color artwork" beat. */
  transition: filter .35s ease, opacity .3s ease;
}
.unlock-card-face.pre img{ filter:grayscale(100%) brightness(35%); opacity:.70; }
.unlock-card-face.post img{ filter:grayscale(0) brightness(1); opacity:1; }
.unlock-card-face.post{
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 40px -4px rgba(242,201,76,0.75), 0 20px 40px -12px rgba(0,0,0,0.8);
  transform: scale(1.04);
}
.unlock-lockwrap{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.35); border-radius:16px;
  /* No built-in delay — app.js's timeline decides exactly when this class
     flips (0.15s, "lock begins opening"), so the delay lives in JS only. */
  transition: opacity .4s ease, transform .4s ease;
}
.unlock-lockwrap svg{ width:30px; height:30px; color:#fff; }
.unlock-lockwrap.hidden{ opacity:0; transform:scale(1.6); pointer-events:none; }

/* Red light sweep — plays once as the lock opens, just before the card
   resolves to full color. A diagonal crimson-white band crosses the face. */
.unlock-sweep{
  position:absolute; inset:0; z-index:4; border-radius:16px; overflow:hidden;
  pointer-events:none;
}
.unlock-sweep::before{
  content:'';
  position:absolute; top:-40%; bottom:-40%; left:-60%; width:45%;
  background: linear-gradient(100deg,
    rgba(227,38,46,0) 0%,
    rgba(227,38,46,0.55) 42%,
    rgba(255,255,255,0.9) 50%,
    rgba(227,38,46,0.55) 58%,
    rgba(227,38,46,0) 100%);
  transform: translateX(0) skewX(-14deg);
  opacity:0;
  filter: blur(1px);
}
.unlock-sweep.run::before{
  animation: unlockSweep .5s cubic-bezier(.3,.05,.2,1) forwards;
}
@keyframes unlockSweep{
  0%{ transform: translateX(0) skewX(-14deg); opacity:0; }
  12%{ opacity:1; }
  85%{ opacity:1; }
  100%{ transform: translateX(320%) skewX(-14deg); opacity:0; }
}
/* PREMIUM/CHASE tiers' "premium foil/reflection sweep" — the same sweep
   mechanic, gold/white instead of crimson/white. */
.unlock-sweep.foil::before{
  background: linear-gradient(100deg,
    rgba(242,201,76,0) 0%,
    rgba(242,201,76,0.6) 40%,
    rgba(255,255,255,0.95) 50%,
    rgba(242,201,76,0.6) 60%,
    rgba(242,201,76,0) 100%);
}

.unlock-ring{
  position:absolute; inset:-14px; border-radius:22px;
  border:1px solid rgba(242,201,76,0.5);
  opacity:0; transform:scale(.85);
}
.unlock-card-face.post ~ .unlock-ring,
.unlock-stage.burst .unlock-ring{
  animation: ringPulse .9s ease-out forwards;
}
@keyframes ringPulse{
  0%{ opacity:0; transform:scale(.85); }
  35%{ opacity:1; transform:scale(1.04); }
  100%{ opacity:0; transform:scale(1.35); }
}

.particle{
  position:absolute; left:50%; top:50%;
  width:5px; height:5px; border-radius:50%;
  background: var(--gold-bright);
  opacity:0;
  pointer-events:none;
}
.unlock-stage.burst .particle{ animation: particleBurst 0.9s cubic-bezier(.16,.8,.3,1) forwards; }

@keyframes particleBurst{
  0%{ opacity:1; transform: translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(0); }
}

/* Rarity name callout — RARE tier and up only (STANDARD's tierLabel is
   empty; see UnlockOverlayShell). Sits just above "Unlocked!" — e.g.
   "SUPER RARE" / "SECRET RARE" / "MANGA RARE" above "Unlocked!" below it. */
.unlock-tier-label{
  font-family:var(--font-heading); font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color: var(--gold-bright);
  opacity:0; transform:translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.unlock-overlay.revealed .unlock-tier-label{ opacity:1; transform:translateY(0); }

.unlock-label{
  font-family:var(--font-display); font-size:26px; letter-spacing:.02em;
  color: var(--gold-bright);
  opacity:0; transform:translateY(6px);
  transition: opacity .4s ease .1s, transform .4s ease .1s;
}
.unlock-overlay.revealed .unlock-label{ opacity:1; transform:translateY(0); }

.unlock-name{
  margin-top:10px; font-family:var(--font-heading); font-size:18px; font-weight:600; color:var(--text-primary);
  opacity:0; transition: opacity .4s ease .18s;
}
.unlock-num{
  margin-top:3px; font-size:12px; color:var(--text-muted); font-family:var(--font-heading);
  opacity:0; transition: opacity .4s ease .18s;
}
.unlock-overlay.revealed .unlock-name, .unlock-overlay.revealed .unlock-num{ opacity:1; }

.unlock-value{
  margin-top:20px; opacity:0; transition: opacity .4s ease .3s;
}
.unlock-overlay.revealed .unlock-value{ opacity:1; }
.unlock-value .lbl{ font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--text-muted); text-transform:uppercase; }
.unlock-value .val{ font-family:var(--font-display); font-size:24px; color:var(--positive); margin-top:4px; }

.unlock-dup-tag{
  margin-top:14px; font-family:var(--font-heading); font-size:12px; font-weight:600;
  color:var(--gold-bright); opacity:0; transition:opacity .4s ease .3s;
}
.unlock-overlay.revealed .unlock-dup-tag{ opacity:1; }

.unlock-actions{
  width:100%; max-width:260px; margin-top:26px; display:flex; flex-direction:column; gap:10px;
  opacity:0; transform:translateY(8px);
  transition: opacity .32s ease .32s, transform .32s ease .32s;
}
.unlock-overlay.revealed .unlock-actions{ opacity:1; transform:translateY(0); }

/* ============ BOOSTER ============ */
.booster-hero{
  border-radius:var(--radius-lg); padding:28px 20px; text-align:center;
  background: radial-gradient(120% 140% at 50% 0%, rgba(227,38,46,0.18), rgba(0,0,0,0)) , linear-gradient(165deg,#171010,#0c0808);
  border:1px solid var(--border-soft);
  margin-bottom:20px;
}
.booster-pack{
  width:108px; height:150px; margin:0 auto 16px; border-radius:12px;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold) 40%, var(--crimson-deep) 100%);
  position:relative; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.7);
}
.booster-pack::before{
  content:''; position:absolute; inset:6px; border-radius:8px; border:1px dashed rgba(0,0,0,0.25);
}
.booster-pack svg{ width:40px; height:40px; color:rgba(0,0,0,0.55); }
.booster-title{ font-family:var(--font-display); font-size:19px; }
.booster-desc{ margin-top:8px; font-size:13px; color:var(--text-secondary); line-height:1.5; max-width:280px; margin-inline:auto; }
.booster-actions{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }

.booster-select-header{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
  position:sticky; top:0; background:var(--bg-primary); padding:8px 0; z-index:10;
}
.booster-counter{ font-family:var(--font-display); font-size:15px; color:var(--crimson-bright); }
.booster-confirm-bar{
  position:sticky;
  bottom:0;
  padding-top:12px;
  background:linear-gradient(180deg, rgba(8,8,8,0), var(--bg-primary) 30%);
  z-index:20;
  isolation:isolate;
}

.tcard.pull-selected .tcard-face{ outline:2px solid var(--crimson-bright); outline-offset:2px; }
.tcard-check{
  position:absolute; top:6px; right:7px; z-index:4; width:16px; height:16px; border-radius:50%;
  background:var(--crimson-bright); display:none; align-items:center; justify-content:center;
}
.tcard.pull-selected .tcard-check{ display:flex; }
.tcard-check svg{ width:10px; height:10px; color:#fff; }

/* ============ VALUE SCREEN ============ */
.value-hero{ text-align:center; padding: 10px 0 6px; }
.value-total{ font-family:var(--font-display); font-size:40px; color:var(--text-primary); margin-top:6px; }
.value-delta{ margin-top:6px; font-family:var(--font-heading); font-size:12.5px; font-weight:600; color:var(--positive); }
.value-delta.unavailable{ color:var(--text-muted); }

.chart-wrap{ margin-top:18px; }
.chart-placeholder{
  height:64px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-size:11px; color:var(--text-muted); text-align:center; line-height:1.4;
  padding:0 24px; border:1px dashed var(--border); border-radius:10px;
}
.value-set-row{
  display:flex; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--border-soft);
}
.value-set-row:last-child{ border-bottom:none; }
.value-set-art{ width:40px; height:40px; border-radius:9px; flex:none; background:linear-gradient(150deg, var(--tile-a,#3a1214), var(--tile-b,#170707)); }
.value-set-name{ font-family:var(--font-heading); font-size:12.5px; font-weight:600; }
.value-set-meta{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.value-set-amt{ margin-left:auto; text-align:right; }
.value-set-amt .amt{ font-family:var(--font-display); font-size:14.5px; }
.value-set-amt .frac{ font-size:10px; color:var(--text-muted); margin-top:1px; }

.seg-control{ display:flex; background:var(--surface-card); border:1px solid var(--border); border-radius:12px; padding:3px; margin-top:16px; }
.seg-btn{ flex:1; text-align:center; padding:8px 0; border-radius:9px; font-family:var(--font-heading); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); cursor:pointer; }
.seg-btn.active{ background:var(--surface-elevated); color:var(--text-primary); }

/* ============ MY COLLECTION ============ */
.dup-row{ display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--border-soft); }
.dup-row .tcard-mini{ width:42px; aspect-ratio:5/7; border-radius:7px; background:#121212; flex:none; border:1px solid var(--border); position:relative; overflow:hidden; }
.dup-row .tcard-mini img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dup-name{ font-family:var(--font-heading); font-weight:600; font-size:13px; }
.dup-num{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.dup-qty{ margin-left:auto; font-family:var(--font-display); font-size:15px; color:var(--gold-bright); }

/* ============ CELEBRATION ============ */
.celebrate-overlay{
  position:absolute; inset:0; z-index:560;
  background: radial-gradient(120% 90% at 50% 20%, rgba(40,26,4,0.95), rgba(0,0,0,0.985));
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding: max(30px, env(safe-area-inset-top,0px)) 26px 30px;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
  overflow-y:auto;
}
.celebrate-overlay::before{ content:''; flex:1 0 0; min-height:6px; }
.celebrate-overlay::after{ content:''; flex:1 0 0; min-height:6px; }
.celebrate-overlay.open{ opacity:1; pointer-events:auto; }
.celebrate-badge{
  width:96px; height:96px; border-radius:50%; margin-bottom:22px;
  background: linear-gradient(150deg, var(--gold-bright), var(--gold) 60%, var(--crimson-deep));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 1px rgba(242,201,76,0.5), 0 0 60px -6px rgba(242,201,76,0.6);
}
.celebrate-badge svg{ width:44px; height:44px; color:#1a1204; }
.celebrate-title{ font-family:var(--font-display); font-size:28px; color:var(--gold-bright); letter-spacing:.02em; }
.celebrate-set{ margin-top:14px; font-family:var(--font-heading); font-size:12px; color:var(--text-muted); letter-spacing:.06em; text-transform:uppercase; }
.celebrate-name{ font-family:var(--font-heading); font-size:16px; font-weight:600; color:var(--text-primary); margin-top:3px; }
.celebrate-frac{ margin-top:16px; font-family:var(--font-display); font-size:22px; color:var(--text-primary); }
.celebrate-tag{ margin-top:6px; font-size:11.5px; color:var(--positive); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.celebrate-actions{ margin-top:26px; width:100%; max-width:260px; }

/* ============ TOAST (+1 duplicate) ============ */
.toast{
  position:absolute; left:50%; bottom:96px; transform:translateX(-50%) translateY(10px);
  background:var(--surface-elevated); border:1px solid var(--border); color:var(--text-primary);
  padding:10px 18px; border-radius:24px; font-family:var(--font-heading); font-size:12.5px; font-weight:600;
  box-shadow:0 12px 24px -10px rgba(0,0,0,0.6);
  z-index:300; opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease;
  white-space:normal;
  width:max-content;
  max-width:calc(100% - 40px);
  box-sizing:border-box;
  text-align:center;
  overflow-wrap:break-word;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast .plus{ color:var(--positive); margin-right:6px; }

/* ============ LOADING SKELETON ============ */
.skel{ background: linear-gradient(90deg, var(--surface-card) 25%, var(--surface-elevated) 37%, var(--surface-card) 63%); background-size:400% 100%; animation: skelShine 1.4s ease infinite; border-radius:11px; }
@keyframes skelShine{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }

/* ============ FULLSCREEN CARD VIEWER (sections 58-70) ============
   Stacks above EVERYTHING else, including the Card Detail sheet and the
   unlock overlay (both of which can open it) — z-index higher than the
   celebrate-overlay (560), the highest overlay before this one. The
   artwork is the hero: no market value, no quantity controls, no bottom
   nav, no stats, no filters — see FullscreenViewerShell in screens.js. */
.fs-overlay{
  position:absolute; inset:0; z-index:700;
  background:#080808;
  opacity:0; pointer-events:none;
  transition: opacity .25s ease;
  overflow:hidden;
}
.fs-overlay.open{ opacity:1; pointer-events:auto; }

.fs-stage{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  touch-action:none; /* pinch/pan/double-tap are handled by app.js's own pointer-event gestures */
}

/* Premium ambient effects (section 64) — sit BEHIND the card via z-index,
   never touch the <img> itself, so the real artwork always stays accurate.
   SUPER_RARE gets a soft still reflection glow; PREMIUM (Secret/Alt/SP/
   Treasure) a slow-drifting metallic light; CHASE (Manga) a richer gold +
   crimson glow. STANDARD/RARE get no special treatment — just the plain
   near-black stage. */
.fs-ambient{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  transition:opacity .5s ease;
}
.fs-stage[data-tier="super_rare"] .fs-ambient{
  opacity:1;
  background: radial-gradient(58% 52% at 50% 46%, rgba(214,168,59,0.16), rgba(8,8,8,0) 72%);
}
.fs-stage[data-tier="premium"] .fs-ambient{
  opacity:1;
  background: conic-gradient(from 0deg at 50% 50%, rgba(242,201,76,0.10), rgba(8,8,8,0) 30%, rgba(242,201,76,0.07) 60%, rgba(8,8,8,0) 85%);
  animation: fsAmbientDrift 10s linear infinite;
}
.fs-stage[data-tier="chase"] .fs-ambient{
  opacity:1;
  background:
    radial-gradient(62% 56% at 50% 47%, rgba(227,38,46,0.22), rgba(8,8,8,0) 55%),
    radial-gradient(52% 48% at 50% 53%, rgba(214,168,59,0.16), rgba(8,8,8,0) 72%);
}
@keyframes fsAmbientDrift{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .fs-stage[data-tier="premium"] .fs-ambient{ animation:none; }
}

.fs-imgwrap{
  position:relative; z-index:1;
  width:min(84vw, calc((var(--frame-h) - 140px) * 5 / 7));
  max-width:80%;
  aspect-ratio: 5 / 7;
  border-radius:16px;
  overflow:hidden;
  background:#101010;
  box-shadow: 0 24px 70px -20px rgba(0,0,0,0.85);
  will-change:transform;
  transform-origin:center center;
}
.fs-imgwrap .fs-skel{ position:absolute; inset:0; z-index:0; border-radius:16px; }
.fs-img{
  position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .3s ease;
  -webkit-user-drag:none; user-select:none;
}
.fs-img.loaded{ opacity:1; }
/* Locked-card treatment (section 63) — identical visual language to every
   other locked card in the app (grid tiles, Card Detail, unlock overlay):
   grayscale + darkened, never implying ownership. */
.fs-img.fs-img-locked{ filter:grayscale(100%) brightness(38%); opacity:.72; }
.fs-lock{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.22); color:#fff; pointer-events:none;
}
.fs-lock svg{ width:34px; height:34px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
.fs-imgwrap .artwork-preview-tag.standalone{
  position:absolute; left:0; right:0; bottom:10px; z-index:2; justify-content:center; margin-top:0;
}

/* Foil Effect (section 65) — a soft moving highlight ON the card itself
   (clipped to the artwork by fs-imgwrap's own overflow:hidden), driven by
   device tilt or touch/mouse position via --foil-x/--foil-y custom
   properties app.js updates directly. A visual simulation only — never
   claimed to be the card's real physical foil (see the "Foil Effect",
   never "Real Foil" button label in screens.js). */
.fs-foil{
  position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:overlay; opacity:.85;
  background: radial-gradient(130px 240px at var(--foil-x,50%) var(--foil-y,50%), rgba(255,255,255,0.55), rgba(255,255,255,0) 62%);
  transition: background-position .1s linear;
}

.fs-controls{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  display:flex; flex-direction:column; justify-content:space-between;
  padding: max(18px, env(safe-area-inset-top,0px)) 18px calc(20px + env(safe-area-inset-bottom,0px));
  opacity:1; transition:opacity .25s ease;
}
/* Tap-to-hide (section 62) — the controls fade out, leaving only the card
   visible; a second tap brings them back. */
.fs-controls.hidden{ opacity:0; }
/* Only clickable while the overlay is actually open — otherwise these
   children's explicit pointer-events:auto would float on top of whatever
   screen is showing underneath even after the overlay fades out (it stays
   in the DOM, just invisible, between one card and the next). */
.fs-controls > *{ pointer-events:none; }
.fs-overlay.open .fs-controls > *{ pointer-events:auto; }

.fs-top-row{ display:flex; align-items:center; justify-content:space-between; }
.fs-badge{
  font-family:var(--font-heading); font-weight:700; font-size:10.5px; letter-spacing:.07em;
  padding:5px 11px; border-radius:20px; text-transform:uppercase;
  background:rgba(0,0,0,0.55); color:var(--gold-bright); border:1px solid rgba(214,168,59,0.4);
}
.fs-fav.active{ color:var(--crimson-bright); }

.fs-bottom{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.fs-bottom-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.fs-pill{
  padding:9px 16px; border-radius:20px; border:1px solid var(--border);
  background:rgba(255,255,255,0.07); backdrop-filter:blur(6px);
  color:var(--text-primary);
  font-family:var(--font-heading); font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  cursor:pointer;
}
.fs-pill:active{ transform:scale(.96); }
.fs-pill.active{ background:var(--crimson); border-color:var(--crimson); }
.fs-hint{
  font-size:10.5px; color:var(--text-muted); text-align:center;
}

/* Expand icon on the Card Detail artwork (section 59) */
.detail-art{ cursor:pointer; }
.detail-art-expand{
  position:absolute; right:8px; bottom:8px; z-index:3;
  width:28px; height:28px;
  background:rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.16);
  color:#fff;
}
.detail-art-expand svg{ width:14px; height:14px; }
.unlock-fullscreen-btn{ order:-1; }

/* ============ PACK SHOP ============
   Real, physical sealed booster packs only. The pack photo itself is meant
   to be the color in this screen — product tiles stay dark/neutral with
   only a small, contained glow behind the art (never a large colorful
   card-background). Reuses the app's existing visual vocabulary elsewhere
   (.btn/.badge/.chip/.section-head/.stat-tile/.empty-state, the generic
   .sheet overlay) so the Shop, Cart, Checkout and My Orders screens read as
   part of one premium NAKAMA Vault app rather than a bolted-on storefront. */

.shop-header-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.shop-header-row .section-head{ flex:1; min-width:0; }
.shop-cart-btn{ position:relative; margin-top:2px; }
.shop-cart-badge{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px;
  border-radius:20px; background:var(--crimson-bright); color:#fff;
  font-family:var(--font-heading); font-size:9px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--bg-primary);
}

.shop-physical-note, .shop-physical-tag{
  display:flex; align-items:flex-start; gap:8px;
  border-radius:var(--radius-sm); padding:10px 12px;
  font-size:11.5px; line-height:1.5; color:var(--text-secondary);
}
.shop-physical-note{ margin:14px 0 16px; background:var(--surface-card); border:1px solid var(--border); }
.shop-physical-note svg{ flex:none; width:15px; height:15px; margin-top:1px; color:var(--gold); }
.shop-physical-tag{ margin-top:18px; background:rgba(214,168,59,0.08); border:1px solid rgba(214,168,59,0.3); }
.shop-physical-tag svg{ flex:none; width:15px; height:15px; margin-top:1px; color:var(--gold); }

/* ---- PackArt: the one shared pack-photo component (card/detail/fullscreen
   sizes) used by ProductCard, Product Detail and the Fullscreen Pack View.
   Real, approved product photography is PRIMARY; when a pack's image file
   isn't available, JS (window.__shopImgError) flags the wrapper with
   .img-error, which this CSS uses to swap the broken <img> for the honest
   "Product Image Unavailable" block below — never a random placeholder.
   Presented like a premium collector-store display case: a near-black
   stage (never the lighter --surface-card, so no washed-out rectangle
   breaks the pack out of the dark screen), rounded and clipped with no
   hard border line around it, the pack sitting on a soft contact shadow
   with a contained crimson/gold glow behind it — never a bright outline or
   a large colorful card background. */
.shop-pack-art{
  position:relative; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 90% at 50% 8%, #131313, #0a0a0a 70%);
  border-radius:inherit; overflow:hidden;
}
.shop-pack-art-card{ aspect-ratio:4/5; }
.shop-pack-art-detail{ aspect-ratio:5/7; width:100%; border-radius:18px; cursor:pointer; }
.shop-pack-art-fullscreen{ width:100%; height:100%; background:transparent; }
/* 'set' — Home/Sets/Favorites/Profile's PremiumSetCard cover (components.js).
   Fills its .pset-cover wrapper edge-to-edge; that wrapper owns the aspect
   ratio and top-corner rounding, kept as its own size (not reusing 'card')
   so Home's proportions can be tuned independently of Shop's. */
.shop-pack-art-set{ width:100%; height:100%; }
.shop-pack-art-set .shop-pack-img{ padding:7%; }

/* Subtle premium glow + soft contact shadow contained behind the pack art —
   crimson/gold, low opacity, never a full-tile colorful background. The
   dark ellipse near the bottom reads as a soft shadow the pack casts,
   giving it a slightly elevated, "photographed in a display case" feel. */
.shop-pack-glow{
  position:absolute; inset:-10%; z-index:0; pointer-events:none;
  opacity:.85; transition:opacity .25s ease;
  background: radial-gradient(46% 42% at 50% 42%, rgba(227,38,46,0.16), rgba(0,0,0,0) 70%),
              radial-gradient(34% 30% at 58% 34%, rgba(214,168,59,0.09), rgba(0,0,0,0) 75%),
              radial-gradient(42% 16% at 50% 84%, rgba(0,0,0,0.55), rgba(0,0,0,0) 78%);
}
.shop-card:hover .shop-pack-glow,
.shop-card:active .shop-pack-glow,
.shop-pack-art-detail:hover .shop-pack-glow,
.shop-pack-art-detail:active .shop-pack-glow,
.pset-card:hover .shop-pack-glow,
.pset-card:active .shop-pack-glow{ opacity:1; }

.shop-pack-img{
  position:relative; z-index:1; width:100%; height:100%; object-fit:contain; padding:6%;
  opacity:0; transition:opacity .25s ease;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,0.55));
}
.shop-pack-img.loaded{ opacity:1; }
.shop-pack-art-detail .shop-pack-img{ padding:5%; }
.shop-pack-art-fullscreen .shop-pack-img{ padding:6%; object-fit:contain; }

.shop-pack-unavailable{
  display:none; position:relative; z-index:1; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:14px; text-align:center;
  color:var(--text-muted);
}
.shop-pack-unavailable svg{ width:26px; height:26px; opacity:.6; }
.shop-pack-unavailable span{
  font-family:var(--font-heading); font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1.5;
}
.shop-pack-art-detail .shop-pack-unavailable svg{ width:34px; height:34px; }
.shop-pack-art-detail .shop-pack-unavailable span{ font-size:10px; }
/* .img-error: the real photo failed to load (or was never bundled) — hide
   the broken <img>, reveal the honest fallback in its place. */
.shop-pack-art.img-error .shop-pack-img{ display:none; }
.shop-pack-art.img-error .shop-pack-unavailable{ display:flex; }

/* Favorite heart — shown on every ProductCard (unlike card favorites,
   which only surface inside the Favorites screen), same visual language as
   PremiumSetCard's .pset-fav. */
.shop-pack-fav{
  position:absolute; top:6px; right:6px; z-index:5;
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,0.14);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.75); cursor:pointer;
}
.shop-pack-fav:active{ transform:scale(.9); }
.shop-pack-fav svg{ width:13px; height:13px; }
.shop-pack-fav.active{ color:var(--crimson-bright); border-color:rgba(227,38,46,0.5); }

/* ---- Product grid / ProductCard ---- */
.shop-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.shop-card{
  position:relative; display:flex; flex-direction:column;
  background:#141414; border:1px solid rgba(255,255,255,0.07); border-radius:18px;
  overflow:hidden;
  transition: border-color .2s ease;
}
.shop-card:active{ border-color:rgba(227,38,46,0.35); }
.shop-card.is-coming-soon{ opacity:.68; }

.shop-body{ padding:10px 11px 12px; display:flex; flex-direction:column; }
.shop-set-code{ font-family:var(--font-heading); font-size:9.5px; font-weight:600; letter-spacing:.06em; color:var(--text-muted); text-transform:uppercase; }
.shop-set-name{
  font-family:var(--font-heading); font-size:12px; font-weight:600; color:var(--text-primary); margin-top:2px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:30px;
}
.shop-kind{ font-size:10px; color:var(--text-muted); margin-top:2px; }
.shop-price{ font-family:var(--font-display); font-size:17px; color:var(--positive); margin-top:7px; }
.shop-add-btn{ margin-top:9px; width:100%; padding:9px 0; font-size:10.5px; }

/* Stock row — a colored dot + label, replacing the old pill badge. */
.shop-stock-row{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:10.5px; font-weight:600; letter-spacing:.02em; color:var(--text-secondary); }
.shop-stock-dot{ width:6px; height:6px; border-radius:50%; background:var(--text-muted); flex:none; }
/* The modifier class lands on the dot itself (.shop-stock-dot.in-stock) —
   :has() lets the row's own text pick up the same color from that dot. */
.shop-stock-dot.in-stock{ background:var(--positive); }
.shop-stock-row:has(.shop-stock-dot.in-stock){ color:var(--positive); }
.shop-stock-dot.low-stock{ background:var(--gold-bright); }
.shop-stock-row:has(.shop-stock-dot.low-stock){ color:var(--gold-bright); }
.shop-stock-row:has(.shop-stock-dot.out-of-stock),
.shop-stock-row:has(.shop-stock-dot.coming-soon){ color:var(--text-muted); }

/* ---- Filter chips (ALL / IN STOCK / COMING SOON) ---- reuses the generic
   .filter-row/.chip vocabulary already used for rarity/cost filters. */
.shop-filter-row{ margin:14px 0 4px; }
/* "EXPAND YOUR VAULT" tagline — an all-caps departure from the app's usual
   sentence-case .section-sub, used only on the Shop header per spec. */
.section-sub.shop-tagline{ text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-size:10.5px; color:var(--gold); margin-top:2px; }

/* ---- Shop <-> Collection connection banner (section 10) — appears on a
   Collection set screen (link to that set's shop product) and inside a
   Product Detail (that set's live Collection progress). Read-only both
   ways: it never changes Collection ownership or Shop stock. ---- */
.shop-collection-banner{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:14px 0; padding:12px 14px;
  background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.shop-collection-banner-text{ min-width:0; }
.shop-collection-banner-label{ font-family:var(--font-heading); font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
.shop-collection-banner-value{ font-family:var(--font-heading); font-size:13px; font-weight:700; color:var(--text-primary); margin-top:2px; }
.shop-collection-banner .btn{ flex:none; width:auto; padding:8px 14px; font-size:10.5px; }

/* ---- Product Detail sheet ---- */
.shop-detail-name{ font-family:var(--font-heading); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); margin-top:10px; }

/* ============ FULLSCREEN PACK VIEW ============
   A deliberately separate, minimal overlay from the Fullscreen CARD Viewer
   (.fs-*) above — its own state/handlers in app.js (state.packFullscreen),
   so nothing here can regress the card viewer. Black stage, the pack image,
   pinch/drag to zoom, one close button. No unnecessary UI: no stats, no
   controls, no bottom nav. */
.pfs-overlay{
  position:absolute; inset:0; z-index:710;
  background:#000;
  opacity:0; pointer-events:none;
  transition: opacity .25s ease;
  overflow:hidden;
}
.pfs-overlay.open{ opacity:1; pointer-events:auto; }
.pfs-stage{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  touch-action:none;
}
/* The pack photo itself is rendered by the shared PackArt component
   (.shop-pack-art-fullscreen / .shop-pack-img above) — app.js's gesture
   engine applies its pinch/pan transform directly to that .shop-pack-img
   element inside .pfs-stage, so no separate .pfs-img rule is needed here. */
.pfs-stage .shop-pack-img{ will-change:transform; }
.pfs-close{
  position:absolute; top:14px; right:16px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
  color:#fff; display:flex; align-items:center; justify-content:center;
}
.pfs-close svg{ width:15px; height:15px; }

/* ---- Cart ---- */
.cart-line{ background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px; margin-bottom:10px; }
.cart-line-top{ display:flex; align-items:center; gap:10px; }
.cart-line-cover{
  flex:none; width:44px; height:44px; border-radius:10px; overflow:hidden;
}
.shop-pack-art-cart{ padding:0; }
.shop-pack-art-cart .shop-pack-img{ padding:8%; }
.shop-pack-art-cart .shop-pack-unavailable svg{ width:14px; height:14px; }
.shop-pack-art-cart .shop-pack-unavailable span{ display:none; }
.cart-line-info{ flex:1; min-width:0; }
.cart-line-name{ font-family:var(--font-heading); font-size:12.5px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-line-kind{ font-size:10.5px; color:var(--text-muted); margin-top:2px; }
.cart-line-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.cart-line-subtotal{ font-family:var(--font-display); font-size:15px; color:var(--positive); }
/* "REMOVE" is visible text per spec, not an icon-only button. */
.cart-remove{
  width:auto; height:auto; padding:4px 2px;
  background:transparent; border:none;
  font-family:var(--font-heading); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-muted);
}
.cart-remove:active{ color:var(--crimson-bright); }

.cart-summary{ background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; margin-top:8px; }
.cart-summary-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-secondary); padding:4px 0; }
.cart-summary-row.muted{ color:var(--text-muted); font-size:11.5px; }
.cart-summary-row.total{ margin-top:6px; padding-top:10px; border-top:1px solid var(--border-soft); font-family:var(--font-heading); font-size:14px; font-weight:700; color:var(--text-primary); }

/* ---- Checkout ---- */
.checkout-line{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-secondary); padding:6px 2px; border-bottom:1px solid var(--border-soft); }
.checkout-payment-card{ background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; margin-top:16px; text-align:center; }
.checkout-payment-icon{
  width:34px; height:34px; margin:0 auto 8px; border-radius:50%;
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--text-muted);
}
.checkout-payment-icon svg{ width:16px; height:16px; }
.checkout-payment-title{ font-family:var(--font-heading); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-primary); }
.checkout-payment-card p{ margin-top:8px; font-size:11.5px; line-height:1.5; color:var(--text-muted); }

/* ---- My Orders ---- */
.order-card{ background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; margin-bottom:12px; }
.order-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.order-num{ font-family:var(--font-heading); font-size:13px; font-weight:700; color:var(--text-primary); }
.order-date{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.order-items{ margin-top:10px; display:flex; flex-direction:column; gap:4px; }
.order-item-row{ font-size:12px; color:var(--text-secondary); }
.order-total{
  display:flex; justify-content:space-between; margin-top:10px; padding-top:10px;
  border-top:1px solid var(--border-soft);
  font-family:var(--font-heading); font-size:12px; font-weight:700; color:var(--text-primary);
}
.order-status{
  font-family:var(--font-heading); font-size:8.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border-radius:20px; border:1px solid var(--border); color:var(--text-secondary); white-space:nowrap;
}
.order-status.paid{ color:#9fc2ff; border-color:#2c3e5c; background:rgba(60,120,255,0.06); }
.order-status.processing{ color:var(--gold-bright); border-color:rgba(214,168,59,0.4); background:rgba(214,168,59,0.06); }
.order-status.shipped{ color:#9fc2ff; border-color:#2c3e5c; background:rgba(60,120,255,0.1); }
.order-status.delivered{ color:var(--positive); border-color:rgba(32,214,123,0.4); background:rgba(32,214,123,0.06); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}

/* NAKAMA Collector Rank */
.profile-rank-badge{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;padding:5px 10px;border:1px solid rgba(255,38,56,.45);border-radius:999px;background:rgba(255,38,56,.10);color:#ff2638;font-size:10px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;box-shadow:0 0 18px rgba(255,38,56,.08);}


/* NAKAMA Achievements */
.achievements-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.achievement-card{position:relative;display:flex;align-items:center;gap:10px;min-height:76px;padding:12px;background:#1c1c1e;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden}.achievement-card.locked{opacity:.38;filter:grayscale(1)}.achievement-card.unlocked{border-color:rgba(255,38,56,.45);box-shadow:0 0 18px rgba(255,38,56,.08)}.achievement-icon{width:36px;height:36px;flex:0 0 36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#29292c;font-size:17px}.achievement-card.unlocked .achievement-icon{background:rgba(255,38,56,.15)}.achievement-info{min-width:0;flex:1}.achievement-name{font-size:11px;font-weight:900;letter-spacing:.5px;color:#fff}.achievement-desc{font-size:9px;line-height:1.3;color:#777;margin-top:3px}.achievement-state{position:absolute;right:8px;top:7px;font-size:7px;font-weight:900;letter-spacing:.7px;color:#666}.achievement-card.unlocked .achievement-state{color:#ff2638}


/* ===== NAKAMA VAULT ACHIEVEMENT POPUP ===== */
.achievement-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
}

.achievement-overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.achievement-popup{
  position:relative;
  width:min(340px,90vw);
  overflow:hidden;
  padding:32px 24px 26px;
  text-align:center;
  background:linear-gradient(180deg,#202020 0%,#111 100%);
  border:1px solid rgba(255,38,56,.55);
  border-radius:22px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),
             0 25px 70px rgba(0,0,0,.75),
             0 0 40px rgba(255,38,56,.16);
  transform:scale(.78) translateY(20px);
  animation:achievementPop .45s cubic-bezier(.2,.9,.25,1.25) forwards;
}

.achievement-popup-glow{
  position:absolute;
  width:180px;
  height:180px;
  left:50%;
  top:-110px;
  transform:translateX(-50%);
  border-radius:50%;
  background:rgba(255,38,56,.30);
  filter:blur(45px);
}

.achievement-popup-icon{
  position:relative;
  width:72px;
  height:72px;
  margin:0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#ff2638;
  color:#fff;
  font-size:32px;
  box-shadow:0 0 30px rgba(255,38,56,.45);
}

.achievement-popup-kicker{
  color:#ff2638;
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
  margin-bottom:8px;
}

.achievement-popup-name{
  color:#fff;
  font-size:27px;
  font-weight:900;
  letter-spacing:.5px;
  text-transform:uppercase;
}

.achievement-popup-desc{
  margin-top:8px;
  color:#888;
  font-size:13px;
}

.achievement-popup-xp{
  display:inline-block;
  margin-top:20px;
  padding:7px 15px;
  border:1px solid rgba(255,38,56,.45);
  border-radius:999px;
  color:#ff2638;
  background:rgba(255,38,56,.08);
  font-size:12px;
  font-weight:900;
  letter-spacing:1px;
}

@keyframes achievementPop{
  to{
    transform:scale(1) translateY(0);
  }
}

/* ===== ACHIEVEMENT PROGRESS ===== */
.achievement-progress-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:9px;
  font-size:10px;
  font-weight:800;
  color:#777;
  letter-spacing:.4px;
}

.achievement-card.unlocked .achievement-progress-row{
  color:#aaa;
}

.achievement-progress-track{
  width:100%;
  height:4px;
  margin-top:5px;
  background:#292929;
  border-radius:99px;
  overflow:hidden;
}

.achievement-progress-fill{
  height:100%;
  background:#ff2638;
  border-radius:99px;
  transition:width .45s ease;
  box-shadow:0 0 8px rgba(255,38,56,.35);
}

.achievement-card.locked .achievement-progress-fill{
  opacity:.55;
}

/* ===== NAKAMA VAULT LEVEL UP ===== */

.levelup-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .25s ease, visibility .25s ease;
}

.levelup-overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.levelup-popup{
  position:relative;
  width:min(88vw,390px);
  text-align:center;
  padding:50px 24px;
  transform:scale(.65);
  opacity:0;
}

.levelup-overlay.open .levelup-popup{
  animation:nakamaLevelUpPop .65s cubic-bezier(.16,1,.3,1) forwards;
}

.levelup-glow{
  position:absolute;
  width:330px;
  height:330px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(255,38,56,.32) 0%,
    rgba(255,38,56,.12) 35%,
    transparent 70%
  );
  filter:blur(12px);
  animation:nakamaLevelGlow 1.2s ease-in-out infinite alternate;
  pointer-events:none;
}

.levelup-brand{
  position:relative;
  color:#777;
  font-size:11px;
  font-weight:900;
  letter-spacing:4px;
  margin-bottom:18px;
}

.levelup-kicker{
  position:relative;
  color:#ff2638;
  font-size:18px;
  font-weight:1000;
  letter-spacing:7px;
  text-shadow:0 0 20px rgba(255,38,56,.65);
  animation:nakamaLevelText .7s ease both;
}

.levelup-number{
  position:relative;
  margin:2px 0 -8px;
  color:#fff;
  font-size:132px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-8px;
  text-shadow:
    0 0 15px rgba(255,255,255,.25),
    0 0 45px rgba(255,38,56,.65);
  animation:nakamaLevelNumber .85s cubic-bezier(.16,1,.3,1) both;
}

.levelup-label{
  position:relative;
  color:#fff;
  font-size:27px;
  font-weight:1000;
  letter-spacing:4px;
}

.levelup-xp{
  position:relative;
  display:inline-block;
  margin-top:22px;
  padding:8px 18px;
  border:1px solid rgba(255,38,56,.45);
  border-radius:999px;
  background:rgba(255,38,56,.08);
  color:#ff2638;
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
}

@keyframes nakamaLevelUpPop{
  0%{
    transform:scale(.65);
    opacity:0;
  }
  60%{
    transform:scale(1.06);
    opacity:1;
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}

@keyframes nakamaLevelNumber{
  0%{
    transform:scale(.25);
    opacity:0;
    filter:blur(12px);
  }
  65%{
    transform:scale(1.12);
    opacity:1;
    filter:blur(0);
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}

@keyframes nakamaLevelGlow{
  from{
    transform:translate(-50%,-50%) scale(.85);
    opacity:.55;
  }
  to{
    transform:translate(-50%,-50%) scale(1.15);
    opacity:1;
  }
}

@keyframes nakamaLevelText{
  from{
    opacity:0;
    letter-spacing:14px;
  }
  to{
    opacity:1;
    letter-spacing:7px;
  }
}


/* ===== NAKAMA VAULT REWARD UNLOCK ===== */

.reward-overlay{
  position:fixed;
  inset:0;
  z-index:10001;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(8px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease;
}

.reward-overlay.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.reward-popup{
  position:relative;
  width:min(330px,82vw);
  padding:38px 24px 34px;
  text-align:center;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,38,56,.55);
  background:
    radial-gradient(circle at 50% 20%,rgba(255,38,56,.18),transparent 45%),
    linear-gradient(180deg,#1d1d1f 0%,#0c0c0d 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 30px 80px rgba(0,0,0,.75),
    0 0 45px rgba(255,38,56,.18);
  transform:scale(.72) translateY(25px);
  opacity:0;
}

.reward-overlay.open .reward-popup{
  animation:rewardPop .65s cubic-bezier(.17,.89,.32,1.35) forwards;
}

.reward-popup-glow{
  position:absolute;
  width:220px;
  height:220px;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,38,56,.18);
  filter:blur(45px);
  animation:rewardGlow 1.4s ease-in-out infinite alternate;
  pointer-events:none;
}

.reward-popup-brand{
  position:relative;
  font-size:11px;
  font-weight:900;
  letter-spacing:3px;
  color:#777;
  margin-bottom:14px;
}

.reward-popup-kicker{
  position:relative;
  color:#ff2638;
  font-size:14px;
  font-weight:900;
  letter-spacing:2px;
}

.reward-popup-icon{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:96px;
  margin:22px auto 18px;
  border-radius:50%;
  font-size:48px;
  background:linear-gradient(145deg,#3b1117,#16090b);
  border:1px solid rgba(255,38,56,.7);
  box-shadow:
    0 0 35px rgba(255,38,56,.35),
    inset 0 0 25px rgba(255,38,56,.15);
  animation:rewardIcon 1s ease both;
}

.reward-popup-name{
  position:relative;
  font-size:32px;
  line-height:1;
  font-weight:1000;
  letter-spacing:1px;
  color:#fff;
  text-shadow:0 0 22px rgba(255,255,255,.15);
}

.reward-popup-level{
  position:relative;
  margin-top:12px;
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  color:#888;
}

@keyframes rewardPop{
  0%{
    transform:scale(.72) translateY(25px);
    opacity:0;
  }
  65%{
    transform:scale(1.04) translateY(0);
    opacity:1;
  }
  100%{
    transform:scale(1) translateY(0);
    opacity:1;
  }
}

@keyframes rewardIcon{
  0%{
    transform:scale(.25) rotate(-25deg);
    opacity:0;
  }
  70%{
    transform:scale(1.15) rotate(4deg);
    opacity:1;
  }
  100%{
    transform:scale(1) rotate(0);
    opacity:1;
  }
}

@keyframes rewardGlow{
  from{
    opacity:.35;
    transform:translate(-50%,-50%) scale(.85);
  }
  to{
    opacity:.85;
    transform:translate(-50%,-50%) scale(1.15);
  }
}


/* ===== NAKAMA VAULT RANK PROGRESS ===== */
.rank-progress{
  margin-top:12px;
  padding:12px 14px;
  background:#1c1c1e;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}

.rank-progress-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  color:#888;
}

.rank-progress-top span:first-child{
  color:#ff2638;
}

.rank-progress-track{
  height:6px;
  width:100%;
  overflow:hidden;
  border-radius:99px;
  background:#333;
}

.rank-progress-fill{
  height:100%;
  border-radius:99px;
  background:#ff2638;
  box-shadow:0 0 12px rgba(255,38,56,.35);
  transition:width .5s ease;
}

.rank-max{
  text-align:center;
  color:#ff2638;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.5px;
}

/* ===== NAKAMA VAULT DYNAMIC RANK BADGES ===== */

.profile-rank-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:all .3s ease;
}

.rank-icon{
  font-size:11px;
  line-height:1;
}

/* ROOKIE */
.profile-rank-badge.rank-rookie{
  color:#ff2638;
  border-color:#ff2638;
}

/* PIRATE */
.profile-rank-badge.rank-pirate{
  color:#ff3547;
  border-color:#ff3547;
  background:rgba(255,38,56,.08);
  box-shadow:0 0 10px rgba(255,38,56,.16);
}

/* SUPERNOVA */
.profile-rank-badge.rank-supernova{
  color:#ff6573;
  border-color:#ff6573;
  background:rgba(255,60,80,.10);
  box-shadow:0 0 12px rgba(255,60,80,.28);
}

/* WARLORD */
.profile-rank-badge.rank-warlord{
  color:#e7e7e7;
  border-color:#777;
  background:linear-gradient(135deg,#202020,#101010);
  box-shadow:0 0 12px rgba(255,255,255,.12);
}

/* EMPEROR */
.profile-rank-badge.rank-emperor{
  color:#ffd76a;
  border-color:#b99638;
  background:linear-gradient(135deg,rgba(185,150,56,.18),rgba(255,215,106,.04));
  box-shadow:0 0 14px rgba(255,215,106,.18);
}

/* PIRATE KING */
.profile-rank-badge.rank-pirate-king{
  color:#ffd76a;
  border-color:#ffd76a;
  background:linear-gradient(135deg,#321015,#17100a);
  box-shadow:
    0 0 8px rgba(255,38,56,.35),
    0 0 18px rgba(255,215,106,.22);
  text-shadow:0 0 8px rgba(255,215,106,.30);
}

.profile-rank-badge.rank-pirate-king .rank-icon{
  filter:drop-shadow(0 0 5px rgba(255,215,106,.65));
}


/* ===== NAKAMA VAULT RANK ROAD ===== */

.rank-road{
  margin-top:10px;
  padding:14px 10px 12px;
  background:#1c1c1e;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
}

.rank-road-title{
  margin-bottom:12px;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.5px;
  color:#777;
}

.rank-road-track{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  position:relative;
  gap:3px;
}

.rank-road-track::before{
  content:'';
  position:absolute;
  top:15px;
  left:8%;
  right:8%;
  height:2px;
  background:#333;
  z-index:0;
}

.rank-road-item{
  position:relative;
  z-index:1;
  min-width:0;
  text-align:center;
  opacity:.28;
}

.rank-road-icon{
  width:30px;
  height:30px;
  margin:0 auto 7px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#29292b;
  border:2px solid #3a3a3c;
  font-size:13px;
  filter:grayscale(1);
}

.rank-road-name{
  font-size:7px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:.3px;
  color:#888;
  min-height:17px;
}

.rank-road-level{
  margin-top:3px;
  font-size:7px;
  font-weight:800;
  color:#555;
}

/* Unlocked ranks */
.rank-road-item.unlocked{
  opacity:1;
}

.rank-road-item.unlocked .rank-road-icon{
  color:#fff;
  border-color:#ff2638;
  background:#36171c;
  filter:none;
}

/* Current rank */
.rank-road-item.current .rank-road-icon{
  background:#ff2638;
  border-color:#ff2638;
  color:#fff;
  box-shadow:
    0 0 0 4px rgba(255,38,56,.12),
    0 0 14px rgba(255,38,56,.45);
  transform:scale(1.08);
}

.rank-road-item.current .rank-road-name{
  color:#ff2638;
}

.rank-road-item.current .rank-road-level{
  color:#aaa;
}

/* Pirate King */
.rank-road-item:last-child.current .rank-road-icon{
  background:linear-gradient(135deg,#ff2638,#8d6513);
  border-color:#ffd76a;
  box-shadow:
    0 0 0 4px rgba(255,215,106,.10),
    0 0 18px rgba(255,215,106,.38);
}

.rank-road-item:last-child.current .rank-road-name{
  color:#ffd76a;
}


/* ===== RANK ROAD ACTIVE PROGRESS LINE ===== */

.rank-road-progress-line{
  position:absolute;
  top:15px;
  left:8%;
  height:2px;
  max-width:84%;
  background:#ff2638;
  box-shadow:0 0 8px rgba(255,38,56,.65);
  z-index:0;
  transition:width .6s ease;
}


/* ===== COMPLETED RANK STYLING ===== */

.rank-road-item.unlocked:not(.current) .rank-road-icon{
  background:#241417;
  border-color:#8f2630;
  color:#ff5967;
  box-shadow:none;
  filter:none;
  font-size:13px;
  font-weight:900;
}

.rank-road-item.unlocked:not(.current) .rank-road-name{
  color:#a84a53;
}

.rank-road-item.unlocked:not(.current) .rank-road-level{
  color:#666;
}

/* Current rank always strongest */
.rank-road-item.current{
  opacity:1;
}

.rank-road-item.current .rank-road-icon{
  background:#ff2638;
  border-color:#ff2638;
  color:#fff;
  box-shadow:
    0 0 0 4px rgba(255,38,56,.12),
    0 0 14px rgba(255,38,56,.45);
}


/* ============================================================
   NAKAMA RANK POPUP V2
   Locked / Unlocked / Pirate King
   ============================================================ */

.rank-detail-v2{
  position:relative;
  overflow:hidden;
  width:min(330px,calc(100vw - 48px));
  min-height:390px;
  padding:38px 28px 30px;
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 28%,rgba(255,38,56,.10),transparent 38%),
    linear-gradient(180deg,#202023 0%,#111113 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 30px 80px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.05);
  text-align:center;
}

.rank-detail-v2 .rank-v2-aura{
  position:absolute;
  width:220px;
  height:220px;
  left:50%;
  top:70px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,38,56,.18),transparent 67%);
  filter:blur(10px);
  pointer-events:none;
}

.rank-detail-v2 .reward-popup-brand{
  position:relative;
  font-size:11px;
  font-weight:900;
  letter-spacing:4px;
  color:#777;
}

.rank-detail-v2 .reward-popup-kicker{
  position:relative;
  margin-top:14px;
  font-size:13px;
  font-weight:900;
  letter-spacing:2.5px;
  color:#ff2638;
}

.rank-v2-icon-wrap{
  position:relative;
  width:96px;
  height:96px;
  margin:24px auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid #ff2638;
  background:#171719;
  box-shadow:
    0 0 0 8px rgba(255,38,56,.025),
    0 0 35px rgba(255,38,56,.18);
}

.rank-v2-icon-wrap .reward-popup-icon{
  font-size:36px;
  line-height:1;
  position:relative;
  z-index:2;
}

.rank-v2-state{
  position:absolute;
  right:-3px;
  top:-3px;
  z-index:4;
  width:25px;
  height:25px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ff2638;
  border:3px solid #171719;
  color:#fff;
  font-size:11px;
  font-weight:900;
}

.rank-detail-v2 .reward-popup-name{
  position:relative;
  font-size:31px;
  line-height:1;
  font-weight:1000;
  letter-spacing:1px;
  color:#fff;
  text-transform:uppercase;
}

.rank-detail-v2 .reward-popup-level{
  position:relative;
  margin-top:13px;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  color:#888;
}

.rank-detail-v2 .rank-detail-status{
  position:relative;
  margin-top:7px;
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.4px;
}

.rank-v2-divider{
  position:relative;
  width:54px;
  height:2px;
  margin:20px auto 17px;
  border-radius:99px;
  background:#ff2638;
  box-shadow:0 0 12px rgba(255,38,56,.5);
}

.rank-detail-v2 .rank-detail-reward{
  position:relative;
  font-size:11px;
  font-weight:800;
  letter-spacing:.5px;
  color:#ccc;
}

.rank-v2-current{
  position:relative;
  display:inline-flex;
  margin-top:17px;
  padding:7px 11px;
  border-radius:99px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  color:#777;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.3px;
}


/* LOCKED */

.rank-detail-v2.locked{
  filter:none;
}

.rank-detail-v2.locked .reward-popup-icon{
  opacity:.55;
  filter:grayscale(1);
}

.rank-detail-v2.locked .rank-v2-icon-wrap{
  border-color:#555;
  box-shadow:none;
}

.rank-detail-v2.locked .rank-v2-state{
  background:#303034;
  color:#aaa;
}

.rank-detail-v2.locked .rank-v2-aura{
  opacity:.25;
}

.rank-detail-v2.locked .rank-v2-divider{
  background:#555;
  box-shadow:none;
}

.rank-detail-v2.locked .rank-detail-status{
  color:#ff5967;
}


/* UNLOCKED */

.rank-detail-v2.unlocked{
  border-color:rgba(255,38,56,.75);
  box-shadow:
    0 30px 90px rgba(0,0,0,.8),
    0 0 45px rgba(255,38,56,.12),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.rank-detail-v2.unlocked .rank-v2-icon-wrap{
  animation:rankV2Pulse 1.8s ease-in-out infinite;
}


/* PIRATE KING */

.rank-detail-v2.pirate-king{
  background:
    radial-gradient(circle at 50% 25%,rgba(255,194,76,.18),transparent 38%),
    linear-gradient(180deg,#211c13 0%,#11100e 58%,#090909 100%);
  border-color:rgba(255,194,76,.65);
  box-shadow:
    0 35px 100px rgba(0,0,0,.85),
    0 0 55px rgba(255,194,76,.12),
    inset 0 1px 0 rgba(255,235,190,.10);
}

.rank-detail-v2.pirate-king .reward-popup-kicker,
.rank-detail-v2.pirate-king .rank-detail-status{
  color:#ffc24c;
}

.rank-detail-v2.pirate-king .rank-v2-icon-wrap{
  border-color:#ffc24c;
  background:linear-gradient(145deg,#2b2112,#120f0a);
  box-shadow:
    0 0 0 8px rgba(255,194,76,.035),
    0 0 42px rgba(255,194,76,.25);
  animation:rankKingPulse 1.6s ease-in-out infinite;
}

.rank-detail-v2.pirate-king .rank-v2-state{
  background:#ffc24c;
  color:#17120a;
  border-color:#17120a;
}

.rank-detail-v2.pirate-king .rank-v2-divider{
  background:#ffc24c;
  box-shadow:0 0 15px rgba(255,194,76,.55);
}

.rank-detail-v2.pirate-king .rank-v2-aura{
  background:radial-gradient(circle,rgba(255,194,76,.28),transparent 68%);
}

@keyframes rankV2Pulse{
  0%,100%{
    box-shadow:
      0 0 0 8px rgba(255,38,56,.025),
      0 0 25px rgba(255,38,56,.18);
  }
  50%{
    box-shadow:
      0 0 0 13px rgba(255,38,56,.045),
      0 0 48px rgba(255,38,56,.38);
  }
}

@keyframes rankKingPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:
      0 0 0 8px rgba(255,194,76,.035),
      0 0 30px rgba(255,194,76,.20);
  }
  50%{
    transform:scale(1.045);
    box-shadow:
      0 0 0 13px rgba(255,194,76,.055),
      0 0 58px rgba(255,194,76,.40);
  }
}


/* ===== NAKAMA PREMIUM LOCK ICON ===== */

.rank-css-lock{
  position:relative;
  display:block;
  width:9px;
  height:8px;
  border:1.5px solid #aaa;
  border-radius:2px;
  box-sizing:border-box;
}

.rank-css-lock::before{
  content:'';
  position:absolute;
  left:50%;
  top:-6px;
  width:6px;
  height:6px;
  transform:translateX(-50%);
  border:1.5px solid #aaa;
  border-bottom:0;
  border-radius:6px 6px 0 0;
  box-sizing:border-box;
}

.rank-detail-v2.locked .rank-v2-state{
  background:#242426;
  border-color:#171719;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 4px 12px rgba(0,0,0,.35);
}


/* ===== NAKAMA LEVEL UP V2 ===== */

.levelup-popup.levelup-v2{
  position:relative;
  overflow:hidden;
  width:min(330px,calc(100vw - 48px));
  min-height:390px;
  padding:42px 28px 34px;
  box-sizing:border-box;
  border-radius:28px;
  text-align:center;

  background:
    radial-gradient(circle at 50% 47%,
      rgba(255,38,56,.18),
      transparent 38%),
    linear-gradient(180deg,#211d20 0%,#111113 100%);

  border:1px solid rgba(255,38,56,.70);

  box-shadow:
    0 35px 100px rgba(0,0,0,.88),
    0 0 60px rgba(255,38,56,.14),
    inset 0 1px 0 rgba(255,255,255,.07);

  animation:
    levelV2Enter .48s cubic-bezier(.2,.85,.3,1.15);
}


/* RED BACKGROUND GLOW */

.levelup-v2-aura{
  position:absolute;
  z-index:0;
  left:50%;
  top:185px;

  width:230px;
  height:230px;

  transform:translate(-50%,-50%);
  border-radius:50%;

  background:
    radial-gradient(circle,
      rgba(255,38,56,.30) 0%,
      rgba(255,38,56,.12) 35%,
      transparent 70%);

  filter:blur(15px);

  animation:
    levelV2Aura 1.6s ease-in-out infinite;

  pointer-events:none;
}


/* BRAND */

.levelup-v2 .levelup-brand{
  position:relative;
  z-index:2;

  font-size:11px;
  font-weight:900;
  letter-spacing:4px;

  color:#777;
}


/* LEVEL UP TITLE */

.levelup-v2 .levelup-kicker{
  position:relative;
  z-index:2;

  margin-top:15px;

  color:#ff2638;

  font-size:14px;
  font-weight:1000;
  letter-spacing:3px;
}


/* OLD LEVEL > NEW LEVEL */

.levelup-v2-levels{
  position:relative;
  z-index:3;

  margin:43px auto 15px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:16px;
}


.levelup-v2-old{
  font-size:30px;
  font-weight:900;

  color:#555;
}


.levelup-v2-arrow{
  color:#ff2638;

  font-size:30px;
  font-weight:400;

  animation:
    levelV2Arrow .75s ease-in-out infinite alternate;
}


/* NEW LEVEL CIRCLE */

.levelup-v2-new{
  display:flex;
  align-items:center;
  justify-content:center;

  width:88px;
  height:88px;

  border-radius:50%;

  color:#fff;

  font-size:44px;
  line-height:1;
  font-weight:1000;

  background:
    linear-gradient(145deg,#ff3043,#b90c20);

  border:1px solid #ff5b69;

  box-shadow:
    0 0 0 8px rgba(255,38,56,.06),
    0 0 25px rgba(255,38,56,.40),
    0 0 55px rgba(255,38,56,.22);

  animation:
    levelV2Number 1.35s ease-in-out infinite;
}


/* NEW LEVEL REACHED */

.levelup-v2-unlocked{
  position:relative;
  z-index:2;

  margin-top:18px;

  color:#ff2638;

  font-size:10px;
  font-weight:900;

  letter-spacing:2px;
}


/* LEVEL X */

.levelup-v2 .levelup-label{
  position:relative;
  z-index:2;

  margin-top:7px;

  color:#fff;

  font-size:25px;
  font-weight:1000;

  letter-spacing:.5px;
}


/* DIVIDER */

.levelup-v2-divider{
  position:relative;
  z-index:2;

  width:55px;
  height:2px;

  margin:20px auto 16px;

  border-radius:99px;

  background:#ff2638;

  box-shadow:
    0 0 14px rgba(255,38,56,.55);
}


/* XP */

.levelup-v2 .levelup-xp{
  position:relative;
  z-index:2;

  color:#777;

  font-size:10px;
  font-weight:900;

  letter-spacing:1.5px;
}


/* ENERGY RINGS */

.levelup-v2-ring{
  position:absolute;
  z-index:1;

  left:50%;
  top:185px;

  border:1px solid rgba(255,38,56,.25);
  border-radius:50%;

  pointer-events:none;
}


.levelup-v2-ring.ring-one{
  width:145px;
  height:145px;

  margin:-72px 0 0 -72px;

  animation:
    levelV2Ring 1.8s ease-out infinite;
}


.levelup-v2-ring.ring-two{
  width:190px;
  height:190px;

  margin:-95px 0 0 -95px;

  animation:
    levelV2Ring 1.8s .55s ease-out infinite;
}


/* ===== ANIMATIONS ===== */

@keyframes levelV2Enter{

  0%{
    opacity:0;
    transform:
      scale(.78)
      translateY(25px);
  }

  65%{
    opacity:1;
    transform:
      scale(1.035)
      translateY(0);
  }

  100%{
    opacity:1;
    transform:
      scale(1)
      translateY(0);
  }
}


@keyframes levelV2Number{

  0%,100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.07);
  }
}


@keyframes levelV2Arrow{

  from{
    transform:translateX(-3px);
    opacity:.55;
  }

  to{
    transform:translateX(3px);
    opacity:1;
  }
}


@keyframes levelV2Aura{

  0%,100%{
    opacity:.55;
    transform:
      translate(-50%,-50%)
      scale(.90);
  }

  50%{
    opacity:1;
    transform:
      translate(-50%,-50%)
      scale(1.12);
  }
}


@keyframes levelV2Ring{

  0%{
    opacity:.70;
    transform:scale(.65);
  }

  100%{
    opacity:0;
    transform:scale(1.40);
  }
}


/* ============================================================
   NAKAMA RANK UNLOCK V2
   ============================================================ */

.rank-unlock-v2{
  position:relative;
  width:min(330px, calc(100vw - 48px));
  min-height:430px;
  padding:38px 28px 30px;
  box-sizing:border-box;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
  color:#fff;

  background:
    radial-gradient(circle at 50% 42%, rgba(255,38,56,.13), transparent 35%),
    linear-gradient(180deg,#202023 0%,#171719 100%);

  border:1px solid #ff2638;
  border-radius:26px;

  box-shadow:
    0 25px 80px rgba(0,0,0,.75),
    0 0 45px rgba(255,38,56,.10);

  animation:rankUnlockV2Enter .45s cubic-bezier(.2,.8,.2,1) both;
}

.rank-unlock-v2-glow{
  position:absolute;
  width:230px;
  height:230px;
  top:105px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;

  background:radial-gradient(
    circle,
    rgba(255,38,56,.20) 0%,
    rgba(255,38,56,.08) 35%,
    transparent 70%
  );

  filter:blur(5px);
  pointer-events:none;
}

.rank-unlock-v2-brand{
  position:relative;
  z-index:2;
  margin-bottom:16px;

  font-size:11px;
  font-weight:800;
  letter-spacing:4px;
  color:#777;
}

.rank-unlock-v2-kicker{
  position:relative;
  z-index:2;

  font-size:13px;
  font-weight:900;
  letter-spacing:3px;
  color:#ff2638;

  margin-bottom:25px;
}

.rank-unlock-v2-icon{
  position:relative;
  z-index:3;

  width:92px;
  height:92px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  border:1px solid #ff2638;

  background:#141416;

  font-size:40px;

  box-shadow:
    0 0 0 8px rgba(255,38,56,.035),
    0 0 32px rgba(255,38,56,.20);

  margin-bottom:22px;

  animation:rankUnlockIcon .7s cubic-bezier(.2,.9,.2,1) both;
}

.rank-unlock-v2-name{
  position:relative;
  z-index:2;

  font-size:30px;
  line-height:1;
  font-weight:950;
  letter-spacing:-1px;

  margin-bottom:13px;
}

.rank-unlock-v2-level{
  position:relative;
  z-index:2;

  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  color:#888;
}

.rank-unlock-v2-line{
  position:relative;
  z-index:2;

  width:54px;
  height:2px;

  background:#ff2638;

  margin:22px 0;
}

.rank-unlock-v2-reward{
  position:relative;
  z-index:2;

  font-size:11px;
  font-weight:800;
  color:#c8c8c8;
}

.rank-unlock-v2-acquired{
  position:relative;
  z-index:2;

  margin-top:15px;
  padding:8px 14px;

  border:1px solid rgba(255,38,56,.35);
  border-radius:999px;

  font-size:9px;
  font-weight:900;
  letter-spacing:1.5px;

  color:#ff2638;
  background:rgba(255,38,56,.06);
}


/* expanding energy rings */

.rank-unlock-v2-ring{
  position:absolute;
  z-index:1;

  width:92px;
  height:92px;

  top:157px;
  left:50%;

  margin-left:-46px;

  border:1px solid rgba(255,38,56,.35);
  border-radius:50%;

  pointer-events:none;
}

.rank-unlock-v2-ring.ring-one{
  animation:rankUnlockRing 1.8s ease-out infinite;
}

.rank-unlock-v2-ring.ring-two{
  animation:rankUnlockRing 1.8s .55s ease-out infinite;
}


/* ============================================================
   PIRATE KING LEGENDARY
   ============================================================ */

.rank-unlock-v2.legendary{
  border-color:#f5b82e;

  background:
    radial-gradient(circle at 50% 42%, rgba(245,184,46,.18), transparent 38%),
    linear-gradient(180deg,#211d14 0%,#121212 100%);

  box-shadow:
    0 25px 90px rgba(0,0,0,.8),
    0 0 55px rgba(245,184,46,.15);
}

.rank-unlock-v2.legendary .rank-unlock-v2-glow{
  background:radial-gradient(
    circle,
    rgba(245,184,46,.30),
    rgba(245,184,46,.08) 40%,
    transparent 70%
  );
}

.rank-unlock-v2.legendary .rank-unlock-v2-kicker,
.rank-unlock-v2.legendary .rank-unlock-v2-acquired{
  color:#f5b82e;
}

.rank-unlock-v2.legendary .rank-unlock-v2-icon{
  border-color:#f5b82e;

  box-shadow:
    0 0 0 8px rgba(245,184,46,.04),
    0 0 40px rgba(245,184,46,.30);
}

.rank-unlock-v2.legendary .rank-unlock-v2-line{
  background:#f5b82e;
}

.rank-unlock-v2.legendary .rank-unlock-v2-acquired{
  border-color:rgba(245,184,46,.38);
  background:rgba(245,184,46,.07);
}

.rank-unlock-v2.legendary .rank-unlock-v2-ring{
  border-color:rgba(245,184,46,.40);
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes rankUnlockV2Enter{
  from{
    opacity:0;
    transform:scale(.88) translateY(18px);
  }

  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

@keyframes rankUnlockIcon{
  0%{
    opacity:0;
    transform:scale(.45) rotate(-8deg);
  }

  65%{
    opacity:1;
    transform:scale(1.10) rotate(2deg);
  }

  100%{
    transform:scale(1) rotate(0);
  }
}

@keyframes rankUnlockRing{
  0%{
    opacity:.65;
    transform:scale(.85);
  }

  100%{
    opacity:0;
    transform:scale(2.15);
  }
}


/* ============================================================
   NAKAMA ACHIEVEMENT V2
   ============================================================ */

.achievement-v2{
  position:relative;
  width:min(330px, calc(100vw - 48px));
  min-height:440px;
  padding:38px 28px 30px;
  box-sizing:border-box;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
  color:#fff;

  background:
    radial-gradient(circle at 50% 40%, rgba(255,38,56,.15), transparent 36%),
    linear-gradient(180deg,#202023 0%,#161618 100%);

  border:1px solid #ff2638;
  border-radius:26px;

  box-shadow:
    0 25px 80px rgba(0,0,0,.78),
    0 0 50px rgba(255,38,56,.10);

  animation:achievementV2Enter .45s cubic-bezier(.2,.8,.2,1) both;
}

.achievement-v2-glow{
  position:absolute;
  width:230px;
  height:230px;
  top:105px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;

  background:radial-gradient(
    circle,
    rgba(255,38,56,.22) 0%,
    rgba(255,38,56,.07) 42%,
    transparent 70%
  );

  filter:blur(5px);
  pointer-events:none;
}

.achievement-v2-brand{
  position:relative;
  z-index:3;

  margin-bottom:16px;

  font-size:11px;
  font-weight:800;
  letter-spacing:4px;
  color:#777;
}

.achievement-v2-kicker{
  position:relative;
  z-index:3;

  margin-bottom:25px;

  font-size:13px;
  font-weight:900;
  letter-spacing:2.6px;

  color:#ff2638;
}

.achievement-v2-icon{
  position:relative;
  z-index:3;

  width:92px;
  height:92px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  border:1px solid #ff2638;

  background:#141416;

  font-size:42px;
  color:#fff;

  box-shadow:
    0 0 0 8px rgba(255,38,56,.035),
    0 0 35px rgba(255,38,56,.22);

  margin-bottom:22px;

  animation:achievementIconV2 .7s cubic-bezier(.2,.9,.2,1) both;
}

.achievement-v2-name{
  position:relative;
  z-index:3;

  font-size:27px;
  line-height:1.05;
  font-weight:950;

  margin-bottom:10px;
}

.achievement-v2-desc{
  position:relative;
  z-index:3;

  max-width:240px;

  font-size:11px;
  line-height:1.5;
  font-weight:600;

  color:#888;
}

.achievement-v2-line{
  position:relative;
  z-index:3;

  width:54px;
  height:2px;

  margin:20px 0;

  background:#ff2638;
}

.achievement-v2-xp-label{
  position:relative;
  z-index:3;

  font-size:10px;
  font-weight:800;
  letter-spacing:1.4px;

  color:#999;
}

.achievement-v2-xp{
  position:relative;
  z-index:3;

  margin-top:5px;

  font-size:25px;
  line-height:1;
  font-weight:950;

  color:#ff2638;

  text-shadow:0 0 20px rgba(255,38,56,.30);

  animation:achievementXpV2 .65s .25s cubic-bezier(.2,.9,.2,1) both;
}

.achievement-v2-acquired{
  position:relative;
  z-index:3;

  margin-top:16px;
  padding:8px 15px;

  border:1px solid rgba(255,38,56,.38);
  border-radius:999px;

  background:rgba(255,38,56,.06);

  color:#ff2638;

  font-size:9px;
  font-weight:900;
  letter-spacing:1.5px;
}


/* ENERGY RINGS */

.achievement-v2-ring{
  position:absolute;
  z-index:1;

  width:92px;
  height:92px;

  top:158px;
  left:50%;
  margin-left:-46px;

  border:1px solid rgba(255,38,56,.34);
  border-radius:50%;

  pointer-events:none;
}

.achievement-v2-ring.ring-one{
  animation:achievementRingV2 1.8s ease-out infinite;
}

.achievement-v2-ring.ring-two{
  animation:achievementRingV2 1.8s .55s ease-out infinite;
}


/* ANIMATIONS */

@keyframes achievementV2Enter{
  from{
    opacity:0;
    transform:scale(.88) translateY(18px);
  }

  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

@keyframes achievementIconV2{
  0%{
    opacity:0;
    transform:scale(.4) rotate(-15deg);
  }

  65%{
    opacity:1;
    transform:scale(1.12) rotate(4deg);
  }

  100%{
    transform:scale(1) rotate(0);
  }
}

@keyframes achievementXpV2{
  from{
    opacity:0;
    transform:scale(.65) translateY(8px);
  }

  to{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

@keyframes achievementRingV2{
  0%{
    opacity:.65;
    transform:scale(.85);
  }

  100%{
    opacity:0;
    transform:scale(2.15);
  }
}


/* ============================================================
   NAKAMA XP GAIN V2
   Floating collection XP feedback
   ============================================================ */

.xp-gain-v2{
  position:fixed;
  left:50%;
  bottom:92px;
  z-index:9999;

  transform:translate(-50%, 18px) scale(.92);
  opacity:0;

  min-width:130px;
  padding:10px 18px 11px;

  text-align:center;

  background:
    linear-gradient(
      180deg,
      rgba(31,31,34,.96),
      rgba(16,16,18,.96)
    );

  border:1px solid rgba(255,38,56,.55);
  border-radius:14px;

  box-shadow:
    0 12px 35px rgba(0,0,0,.55),
    0 0 25px rgba(255,38,56,.12);

  pointer-events:none;

  transition:
    opacity .28s ease,
    transform .42s cubic-bezier(.2,.8,.2,1);
}

.xp-gain-v2.show{
  opacity:1;
  transform:translate(-50%, 0) scale(1);
}

.xp-gain-v2-label{
  margin-bottom:3px;

  font-size:8px;
  font-weight:900;
  letter-spacing:1.7px;

  color:#888;
}

.xp-gain-v2-value{
  font-size:20px;
  line-height:1;
  font-weight:950;

  color:#ff2638;

  text-shadow:
    0 0 18px rgba(255,38,56,.35);
}

.xp-gain-v2.show .xp-gain-v2-value{
  animation:xpGainPulse .55s cubic-bezier(.2,.9,.2,1);
}

@keyframes xpGainPulse{
  0%{
    transform:scale(.65);
    opacity:0;
  }

  65%{
    transform:scale(1.13);
    opacity:1;
  }

  100%{
    transform:scale(1);
    opacity:1;
  }
}



/* XP GAIN V2 — force inside Nakama Vault app */
.app-shell .xp-gain-v2{
  position:absolute !important;
  left:50% !important;
  bottom:88px !important;
  transform:translate(-50%, 18px) scale(.92);
  z-index:9000 !important;
}

.app-shell .xp-gain-v2.show{
  transform:translate(-50%, 0) scale(1);
}

/* ============================================================
   NAKAMA VAULT — PROFILE XP BAR V2
   ============================================================ */

.profile-xp-track{
  position:relative;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#333;
}

.profile-xp-fill{
  position:relative;
  height:100%;
  border-radius:999px;
  background:var(--crimson-bright,#ff2638);

  transition:
    width 1.15s cubic-bezier(.22,.8,.22,1);

  box-shadow:
    0 0 10px rgba(255,38,56,.28);
}

.profile-xp-fill::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:18px;
  height:100%;

  background:rgba(255,255,255,.45);
  filter:blur(5px);
  opacity:.55;
}



/* ==========================================================================
   NAKAMA VAULT — PACK HISTORY
   ========================================================================== */

.pack-history-list{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-top:20px;
}

.pack-history-item{
  width:100%;
  display:block;
  padding:16px;
  border:1px solid rgba(227,38,46,.34);
  border-radius:18px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(227,38,46,.10), transparent 55%),
    linear-gradient(160deg,#151111,#090909);
  color:var(--text-primary);
  text-align:left;
  font:inherit;
  cursor:pointer;
  overflow:hidden;
  box-shadow:
    0 14px 36px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.035);
}

/* Pack header */
.pack-history-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.pack-history-set{
  font-family:var(--font-display);
  font-size:25px;
  line-height:1;
  letter-spacing:.04em;
  color:var(--text-primary);
}

.pack-history-date{
  margin-top:7px;
  font-family:var(--font-heading);
  font-size:11px;
  color:var(--text-muted);
}

.pack-history-count{
  flex:0 0 auto;
  padding:7px 10px;
  border:1px solid rgba(227,38,46,.35);
  border-radius:8px;
  background:rgba(227,38,46,.08);
  font-family:var(--font-heading);
  font-size:10px;
  font-weight:700;
  letter-spacing:.10em;
  color:var(--gold-bright);
}

/* --------------------------------------------------------------------------
   THE IMPORTANT PART:
   Always exactly 3 equal card slots per row.
   -------------------------------------------------------------------------- */

.pack-history-preview{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
  align-items:start;
}

/* Every card gets exactly the same 5:7 frame */
.pack-history-preview-card{
  position:relative;
  width:100%;
  aspect-ratio:5 / 7;
  min-width:0;
  overflow:hidden;
  border-radius:7px;
  background:#101010;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 5px 12px rgba(0,0,0,.30);
}

/* Character, Event and DON!! artwork are forced into identical slots */
.pack-history-preview-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:inherit;
}

/* Pack statistics */
.pack-history-stats{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:15px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.07);
  font-family:var(--font-heading);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--text-muted);
  text-transform:uppercase;
}

.pack-history-stats span:first-child{
  color:var(--positive);
}

.pack-history-stats span:last-child{
  color:var(--gold-bright);
}

/* Small phone optimization */
@media (max-width:380px){
  .pack-history-item{
    padding:12px;
  }

  .pack-history-preview{
    gap:6px;
  }

  .pack-history-set{
    font-size:22px;
  }
}


/* ==========================================================================
   NAKAMA VAULT — PACK DETAIL
   ========================================================================== */

.pack-detail-screen{
  padding-bottom:calc(110px + env(safe-area-inset-bottom,0px));
}

/* Premium summary panel */
.pack-detail-hero{
  margin:18px 0 22px;
  padding:18px;
  border-radius:18px;
  background:
    radial-gradient(circle at 90% 0%, rgba(227,38,46,.16), transparent 42%),
    linear-gradient(145deg,#171717,#0d0d0d);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 14px 36px rgba(0,0,0,.28);
}

.pack-detail-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.pack-detail-set{
  font-family:var(--font-display);
  font-size:26px;
  line-height:1;
  letter-spacing:.03em;
  color:var(--text-primary);
}

.pack-detail-date{
  margin-top:7px;
  font-size:11px;
  color:var(--text-muted);
}

.pack-detail-total{
  min-width:64px;
  text-align:right;
  font-family:var(--font-display);
  font-size:28px;
  line-height:.85;
  color:var(--gold-bright);
}

.pack-detail-total span{
  display:block;
  margin-top:7px;
  font-family:var(--font-heading);
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--text-muted);
}

/* NEW / DUP / XP */
.pack-detail-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.07);
}

.pack-detail-stat{
  min-width:0;
  text-align:center;
  padding:9px 4px;
  border-radius:10px;
  background:rgba(255,255,255,.035);
}

.pack-detail-stat strong{
  display:block;
  font-family:var(--font-display);
  font-size:20px;
  line-height:1;
  color:var(--text-primary);
}

.pack-detail-stat span{
  display:block;
  margin-top:6px;
  font-family:var(--font-heading);
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--text-muted);
}

/* Exactly 3 cards per row */
.pack-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  align-items:start;
  width:100%;
}

/* Every card has identical dimensions */
.pack-detail-card{
  min-width:0;
  width:100%;
}

.pack-detail-art{
  position:relative;
  width:100%;
  aspect-ratio:5 / 7;
  overflow:hidden;
  border-radius:8px;
  background:#121212;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 15px rgba(0,0,0,.25);
}

.pack-detail-art img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* NEW / DUP badge on card */
.pack-detail-badge{
  position:absolute;
  top:5px;
  left:5px;
  z-index:2;
  padding:4px 6px;
  border-radius:5px;
  font-family:var(--font-heading);
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1;
  color:#fff;
  backdrop-filter:blur(6px);
}

.pack-detail-badge.is-new{
  background:rgba(214,24,35,.92);
}

.pack-detail-badge.is-dup{
  background:rgba(25,25,25,.9);
  border:1px solid rgba(255,255,255,.15);
}

.pack-detail-card-number{
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--font-heading);
  font-size:9px;
  color:var(--text-muted);
}

/* Bottom actions */
.pack-detail-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:24px;
  padding-bottom:8px;
}

.pack-detail-actions .btn{
  width:100%;
}


/* ==========================================================================
   NAKAMA VAULT — PREMIUM 3D HOLOGRAPHIC CARD
   ========================================================================== */

.fs-stage{
  perspective:1200px;
}

.fs-imgwrap{
  --tilt-x:0deg;
  --tilt-y:0deg;
  transform-style:preserve-3d;
  will-change:transform;
}

/* Premium depth when foil is active */
.fs-imgwrap:has(.fs-foil){
  box-shadow:
    0 28px 60px rgba(0,0,0,.68),
    0 0 30px rgba(255,255,255,.08);
}

/* Holographic rainbow reflection */
.fs-foil{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;

  background:
    radial-gradient(
      circle at var(--foil-x,50%) var(--foil-y,50%),
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.32) 10%,
      rgba(255,255,255,0) 31%
    ),
    linear-gradient(
      115deg,
      rgba(255,0,110,0) 0%,
      rgba(255,0,110,.25) 18%,
      rgba(0,220,255,.30) 38%,
      rgba(255,230,80,.24) 55%,
      rgba(120,80,255,.30) 72%,
      rgba(255,0,110,0) 100%
    );

  background-size:
    100% 100%,
    180% 180%;

  background-position:
    center,
    var(--foil-x,50%) var(--foil-y,50%);

  mix-blend-mode:screen;
  opacity:.68;

  filter:
    saturate(1.5)
    contrast(1.08);

  transition:
    background-position .08s linear,
    opacity .15s ease;
}

/* Fine foil texture */
.fs-foil::before{
  content:'';
  position:absolute;
  inset:0;

  background:
    repeating-linear-gradient(
      115deg,
      transparent 0px,
      transparent 7px,
      rgba(255,255,255,.055) 8px,
      transparent 9px
    );

  mix-blend-mode:overlay;
  opacity:.70;
}

/* Moving light reflection */
.fs-foil::after{
  content:'';
  position:absolute;
  inset:-25%;

  background:
    radial-gradient(
      ellipse at var(--foil-x,50%) var(--foil-y,50%),
      rgba(255,255,255,.75),
      rgba(255,255,255,.20) 18%,
      transparent 45%
    );

  mix-blend-mode:screen;
  opacity:.68;
}

/* ==========================================================================
   NAKAMA VAULT — RARITY BASED HOLOGRAPHIC TIERS
   ========================================================================== */

/* ----------------------------------------------------------
   SUPER RARE
   Soft / elegant foil
   ---------------------------------------------------------- */

.fs-stage[data-tier="super_rare"] .fs-foil{
  opacity:.42;
  filter:
    saturate(1.15)
    contrast(1.04);
}

.fs-stage[data-tier="super_rare"] .fs-foil::after{
  opacity:.38;
}

.fs-stage[data-tier="super_rare"] .fs-imgwrap:has(.fs-foil){
  box-shadow:
    0 24px 48px rgba(0,0,0,.62),
    0 0 18px rgba(255,255,255,.06);
}


/* ----------------------------------------------------------
   PREMIUM
   Secret Rare / Alt Art / SP / Treasure etc.
   Strong premium holographic finish
   ---------------------------------------------------------- */

.fs-stage[data-tier="premium"] .fs-foil{
  opacity:.68;
  filter:
    saturate(1.55)
    contrast(1.08);
}

.fs-stage[data-tier="premium"] .fs-foil::before{
  opacity:.72;
}

.fs-stage[data-tier="premium"] .fs-foil::after{
  opacity:.72;
}

.fs-stage[data-tier="premium"] .fs-imgwrap:has(.fs-foil){
  box-shadow:
    0 30px 65px rgba(0,0,0,.70),
    0 0 30px rgba(255,255,255,.10);
}


/* ----------------------------------------------------------
   CHASE
   Manga Rare / ultra chase
   Maximum rainbow holographic treatment
   ---------------------------------------------------------- */

.fs-stage[data-tier="chase"] .fs-foil{
  opacity:.88;

  background:
    radial-gradient(
      circle at var(--foil-x,50%) var(--foil-y,50%),
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.48) 8%,
      rgba(255,255,255,.12) 20%,
      rgba(255,255,255,0) 34%
    ),

    linear-gradient(
      115deg,
      rgba(255,0,100,0) 0%,
      rgba(255,0,100,.42) 14%,
      rgba(255,120,0,.34) 27%,
      rgba(255,240,70,.38) 40%,
      rgba(0,255,190,.38) 52%,
      rgba(0,190,255,.44) 65%,
      rgba(125,80,255,.45) 78%,
      rgba(255,0,150,.38) 90%,
      rgba(255,0,100,0) 100%
    );

  background-size:
    100% 100%,
    190% 190%;

  background-position:
    center,
    var(--foil-x,50%) var(--foil-y,50%);

  filter:
    saturate(1.85)
    contrast(1.12)
    brightness(1.06);
}

.fs-stage[data-tier="chase"] .fs-foil::before{
  opacity:.88;
}

.fs-stage[data-tier="chase"] .fs-foil::after{
  opacity:.92;
}

.fs-stage[data-tier="chase"] .fs-imgwrap:has(.fs-foil){
  box-shadow:
    0 35px 80px rgba(0,0,0,.78),
    0 0 38px rgba(255,255,255,.14),
    0 0 70px rgba(150,60,255,.10);
}

/* ==========================================================================
   NAKAMA VAULT — SUPER RARE METALLIC OVERRIDE
   No rainbow — clean reflective card finish
   ========================================================================== */

.fs-stage[data-tier="super_rare"] .fs-foil{
  opacity:.48;

  background:
    radial-gradient(
      circle at var(--foil-x,50%) var(--foil-y,50%),
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.24) 12%,
      rgba(255,255,255,.07) 25%,
      rgba(255,255,255,0) 42%
    ),
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255,255,255,.05) 35%,
      rgba(255,255,255,.20) 48%,
      rgba(255,255,255,.05) 61%,
      transparent 78%
    );

  background-size:100% 100%, 170% 170%;

  background-position:
    center,
    var(--foil-x,50%) var(--foil-y,50%);

  mix-blend-mode:screen;

  filter:
    saturate(.85)
    contrast(1.05)
    brightness(1.02);
}

.fs-stage[data-tier="super_rare"] .fs-foil::before{
  opacity:.25;
}

.fs-stage[data-tier="super_rare"] .fs-foil::after{
  opacity:.38;
}

/* ==========================================================================
   NAKAMA VAULT — PREMIUM VS CHASE HOLOGRAPHIC MATERIALS
   ========================================================================== */


/* --------------------------------------------------------------------------
   PREMIUM
   Secret Rare / Alternate Art / SP / Treasure Rare
   Smooth luxury rainbow foil
   -------------------------------------------------------------------------- */

.fs-stage[data-tier="premium"] .fs-foil{
  opacity:.64;

  background:
    radial-gradient(
      circle at var(--foil-x,50%) var(--foil-y,50%),
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.26) 10%,
      rgba(255,255,255,0) 30%
    ),

    linear-gradient(
      120deg,
      rgba(255,70,120,0) 0%,
      rgba(255,70,120,.24) 18%,
      rgba(255,190,70,.20) 32%,
      rgba(100,255,210,.22) 48%,
      rgba(70,190,255,.26) 64%,
      rgba(160,90,255,.24) 80%,
      rgba(255,70,120,0) 100%
    );

  background-size:
    100% 100%,
    185% 185%;

  background-position:
    center,
    var(--foil-x,50%) var(--foil-y,50%);

  mix-blend-mode:screen;

  filter:
    saturate(1.40)
    contrast(1.06)
    brightness(1.03);
}

.fs-stage[data-tier="premium"] .fs-foil::before{
  opacity:.45;
}

.fs-stage[data-tier="premium"] .fs-foil::after{
  opacity:.62;
}


/* --------------------------------------------------------------------------
   CHASE / MANGA
   Exclusive prism holographic finish
   -------------------------------------------------------------------------- */

.fs-stage[data-tier="chase"] .fs-foil{
  opacity:.84;

  background:

    /* moving white light source */
    radial-gradient(
      circle at var(--foil-x,50%) var(--foil-y,50%),
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.48) 7%,
      rgba(255,255,255,.14) 17%,
      rgba(255,255,255,0) 31%
    ),

    /* prism bands */
    repeating-linear-gradient(
      125deg,
      rgba(255,40,100,.20) 0px,
      rgba(255,170,50,.24) 24px,
      rgba(255,245,80,.20) 48px,
      rgba(40,255,180,.23) 72px,
      rgba(40,180,255,.28) 96px,
      rgba(150,70,255,.26) 120px,
      rgba(255,40,150,.20) 144px
    ),

    /* larger rainbow sweep */
    linear-gradient(
      115deg,
      rgba(255,0,100,0) 0%,
      rgba(255,0,100,.34) 16%,
      rgba(255,210,50,.28) 34%,
      rgba(0,255,190,.30) 52%,
      rgba(0,170,255,.36) 68%,
      rgba(150,60,255,.38) 84%,
      rgba(255,0,100,0) 100%
    );

  background-size:
    100% 100%,
    230% 230%,
    190% 190%;

  background-position:
    center,
    var(--foil-x,50%) var(--foil-y,50%),
    var(--foil-x,50%) var(--foil-y,50%);

  mix-blend-mode:screen;

  filter:
    saturate(1.70)
    contrast(1.10)
    brightness(1.05);
}


/* Diamond/prism micro texture */
.fs-stage[data-tier="chase"] .fs-foil::before{
  opacity:.70;

  background:
    linear-gradient(
      45deg,
      rgba(255,255,255,.09) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255,255,255,.09) 75%
    ),
    linear-gradient(
      -45deg,
      rgba(255,255,255,.07) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255,255,255,.07) 75%
    );

  background-size:24px 24px;
  background-position:
    var(--foil-x,50%) var(--foil-y,50%),
    var(--foil-y,50%) var(--foil-x,50%);

  mix-blend-mode:screen;
}


/* Strong moving reflection */
.fs-stage[data-tier="chase"] .fs-foil::after{
  opacity:.88;
}


/* Chase gets more physical depth */
.fs-stage[data-tier="chase"] .fs-imgwrap:has(.fs-foil){
  box-shadow:
    0 38px 85px rgba(0,0,0,.80),
    0 0 35px rgba(255,255,255,.15),
    0 0 70px rgba(100,180,255,.10),
    0 0 95px rgba(180,70,255,.10);
}


/* ==========================================================================
   NAKAMA VAULT — PUBLIC VAULT
   Read-only shared collection
   ========================================================================== */

.public-vault-screen {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding: 44px 14px 32px;
  overflow-x: hidden;
}

.public-vault-hero {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 4px 22px;
}

.public-vault-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  opacity: .55;
  margin-bottom: 7px;
}

.public-vault-hero h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.public-vault-subtitle {
  margin: 7px 0 18px;
  opacity: .65;
}

.public-vault-stats {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.public-vault-stat {
  flex: 1;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.public-vault-stat strong,
.public-vault-stat span {
  display: block;
}

.public-vault-stat strong {
  font-size: 22px;
}

.public-vault-stat span {
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: .08em;
  opacity: .55;
}

.public-vault-readonly {
  margin: 0 4px 20px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}

.public-vault-readonly span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.public-vault-readonly p {
  margin: 4px 0 0;
  font-size: 12px;
  opacity: .6;
}

.public-vault-footer {
  width: 100%;
  box-sizing: border-box;
  padding: 28px 8px 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .5;
  white-space: normal;
}

/* ==========================================================================
   NAKAMA ACCOUNT
   ========================================================================== */

.nakama-account-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(circle at top right, rgba(220,20,45,.15), transparent 42%),
    var(--surface, #1c1c1e);
}

.nakama-account-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.nakama-account-label {
  color: var(--crimson-bright, #ff2638);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.nakama-account-title {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 900;
}

.nakama-account-status {
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: #aaa;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}

.nakama-account-copy {
  margin: 12px 0 16px;
  color: var(--text-secondary, #999);
  font-size: 12px;
  line-height: 1.55;
}

.nakama-account-btn {
  width: 100%;
  margin-top: 8px;
}

.nakama-account-note {
  margin-top: 13px;
  color: #666;
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

/* =========================================================
   NAKAMA ACCOUNT AUTH SHEET
   ========================================================= */

.account-auth-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px 0 4px;
}

.account-auth-kicker {
  margin-bottom: 5px;
  color: var(--crimson-bright, #ff2638);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.account-auth-sheet .detail-name {
  margin-bottom: 8px;
}

.account-auth-copy {
  margin: 0 0 20px;
  color: var(--text-secondary, #999);
  font-size: 13px;
  line-height: 1.5;
}

.account-auth-label {
  display: block;
  width: 100%;
  margin: 0 0 7px;
  color: var(--text-primary, #fff);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.account-auth-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0 0 16px;
  padding: 0 14px;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px;
  outline: none;

  background: rgba(255,255,255,.055);
  color: #fff;

  font: inherit;
  font-size: 14px;
}

.account-auth-input::placeholder {
  color: rgba(255,255,255,.32);
}

.account-auth-input:focus {
  border-color: var(--crimson-bright, #ff2638);
  box-shadow: 0 0 0 2px rgba(255,38,56,.12);
}

.account-auth-message {
  margin: 0 0 14px;
  padding: 11px 12px;

  border: 1px solid rgba(255,38,56,.25);
  border-radius: 10px;

  background: rgba(255,38,56,.08);
  color: #ff7b86;

  font-size: 12px;
  line-height: 1.4;
}

.account-auth-submit {
  width: 100%;
  margin-top: 2px;
}

.account-auth-switch {
  width: 100%;
  margin-top: 10px;
}


/* ===== NAKAMA DAILY LIMIT PREMIUM POPUP ===== */

.daily-limit-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 30px 24px 26px;
  border-radius: 22px;
  border: 1px solid rgba(230, 35, 55, .45);
  background: linear-gradient(160deg, #21151a 0%, #101014 55%, #09090c 100%);
  box-shadow: 0 24px 70px rgba(0,0,0,.85);
  text-align: center;
}

.daily-limit-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  color: #aaa;
  font-size: 27px;
  cursor: pointer;
}

.daily-limit-brand {
  color: #e72b45;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 22px;
}

.daily-limit-lock {
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(220,20,45,.12);
  border: 1px solid rgba(230,35,55,.4);
  font-size: 35px;
}

.daily-limit-title {
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .5px;
  line-height: 1.2;
}

.daily-limit-counter {
  margin-top: 14px;
  color: #ff4359;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

.daily-limit-description {
  margin-top: 18px;
  color: #aaaab2;
  font-size: 13px;
  line-height: 1.7;
}

.daily-limit-price {
  margin: 24px 0 20px;
  color: #fff;
  font-size: 30px;
  font-weight: 900;
}

.daily-limit-price span {
  color: #999;
  font-size: 13px;
  font-weight: 500;
}

.daily-limit-upgrade {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: .7px;
  background: #d71936;
}

.daily-limit-later {
  margin-top: 18px;
  border: 0;
  background: transparent;
  color: #888;
  font-size: 12px;
  cursor: pointer;
}