/* Trophy Vault v1.9
   Layout: console-dashboard — glass header, big search hero, cover grids and horizontal rails.
   Deliberately single dark theme (console UI at night). */
:root {
  --bg: #070b1a;
  --bg-2: #0c1330;
  --surface: rgba(18, 26, 58, 0.72);
  --surface-2: rgba(28, 38, 80, 0.75);
  --line: rgba(150, 175, 255, 0.14);
  --line-strong: rgba(150, 175, 255, 0.28);
  --text: #e9edff;
  --muted: #8e99c6;
  --accent: #4a74ff;
  --accent-2: #7b5cff;
  --plat-1: #f4f8ff;
  --plat-2: #9fb8e8;
  --gold: #f2c25a;
  --good: #3fd28b;
  --mid: #f2c25a;
  --bad: #ff6b6b;
  --danger: #ff5d6c;

  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm: 10px;
  --r: 16px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--plat-2); }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--plat-2); outline-offset: 3px; border-radius: 6px; }
svg { display: block; }

/* ---------- Ambient background ---------- */
#bg-canvas, #fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#bg-canvas { z-index: 0; }
#fx-canvas { z-index: 300; }
.aurora {
  position: fixed; inset: -20% -10% auto; height: 80vh; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(74, 116, 255, .28), transparent 70%),
    radial-gradient(35% 45% at 80% 20%, rgba(123, 92, 255, .22), transparent 70%),
    radial-gradient(30% 40% at 55% 60%, rgba(60, 200, 255, .10), transparent 70%);
  filter: blur(20px);
  animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, 1%, 0) scale(1.02); }
}

/* ---------- Header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(to bottom, rgba(7, 11, 26, .92), rgba(7, 11, 26, .65));
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.top-inner {
  max-width: 1320px; margin: 0 auto;
  padding-block: 12px; padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand-mark {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 20px rgba(74, 116, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
  color: #fff;
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-name { font: 500 17px/1 var(--f-display); letter-spacing: -.01em; }
.brand-name b { font-weight: 800; background: linear-gradient(90deg, var(--plat-1), var(--plat-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.tabs { display: flex; gap: 4px; margin-left: auto; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.tab {
  border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted);
  display: flex; align-items: center; gap: 8px; transition: color .2s, background .25s var(--ease);
}
.tab:hover { color: var(--text); }
.tab.is-active { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 4px 16px rgba(74, 116, 255, .4); }
.tab-count { font: 700 11px/1 var(--f-mono); padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .15); }
.tab-count.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.5); } }

.top-right { display: flex; align-items: center; gap: 10px; }
.level { position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
.level-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 3.5; }
.ring-fill { fill: none; stroke: url(#g-plat); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); filter: drop-shadow(0 0 4px rgba(160, 190, 255, .7)); }
.level-num { font: 700 13px/1 var(--f-mono); position: relative; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  display: grid; place-items: center; color: var(--muted); transition: color .2s, transform .4s var(--ease), background .2s;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, .08); transform: rotate(60deg); }

/* ---------- Views ---------- */
.view { position: relative; z-index: 1; display: none; max-width: 1320px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-bottom: 40px; }
.view.is-active { display: block; animation: viewIn .5s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Hero ---------- */
.hero { padding-block: 56px 28px; text-align: left; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 600 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(63, 210, 139, .6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(63, 210, 139, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 210, 139, 0); } }
.hero-title {
  margin: 0 0 28px; font: 800 clamp(34px, 6.4vw, 76px)/1.02 var(--f-display); letter-spacing: -.035em; text-wrap: balance;
}
.hero-title, .hero .eyebrow, .search-wrap, .hero-controls { animation: rise .8s var(--ease) both; }
.hero .eyebrow { animation-delay: .05s; }
.hero-title { animation-delay: .12s; }
.search-wrap { animation-delay: .22s; }
.hero-controls { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
.sheen {
  background: linear-gradient(100deg, var(--plat-2) 0%, var(--plat-1) 25%, #8aa6ff 50%, var(--plat-1) 75%, var(--plat-2) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 6s linear infinite;
}
@keyframes sheen { to { background-position: -250% 0; } }

.search-wrap { position: relative; max-width: 760px; }
.search-wrap::before {
  content: ""; position: absolute; inset: -2px; border-radius: 20px; z-index: 0; opacity: .0;
  background: conic-gradient(from var(--ang, 0deg), var(--accent), var(--accent-2), #5fd3ff, var(--accent));
  transition: opacity .3s; animation: spinAng 4s linear infinite;
}
.search-wrap:focus-within::before { opacity: 1; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spinAng { to { --ang: 360deg; } }
#search {
  position: relative; z-index: 1; width: 100%; height: 64px; border-radius: 18px; border: 1px solid var(--line-strong);
  background: rgba(10, 16, 40, .92); padding: 0 56px 0 56px; font-size: 18px; font-weight: 500; outline: none;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .7);
}
#search::placeholder { color: #66729f; }
#search::-webkit-search-cancel-button { display: none; }
.search-ico { position: absolute; z-index: 2; left: 20px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--muted); }
.search-clear { position: absolute; z-index: 2; right: 14px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .08); color: var(--muted); }
.search-clear:hover { color: var(--text); }
.search-spin { position: absolute; z-index: 2; right: 58px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .15); border-top-color: var(--plat-2); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-controls { margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap; }

/* switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--muted); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { width: 42px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid var(--line); position: relative; transition: background .25s; flex: none; }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #c9d2f5; transition: transform .35s var(--spring), background .25s; }
.switch input:checked + .switch-track { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--plat-2); outline-offset: 3px; }

/* ---------- Key panel ---------- */
.key-panel { margin-bottom: 36px; }
.key-card { max-width: 760px; padding: 26px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); backdrop-filter: blur(10px); }
.key-card h2 { margin: 0 0 8px; font: 700 20px/1.2 var(--f-display); }
.key-card p { margin: 0 0 12px; color: var(--muted); max-width: 62ch; }
.key-steps { margin: 0 0 18px; padding-left: 20px; color: var(--text); display: grid; gap: 4px; }
.key-form, .set-inline { display: flex; gap: 10px; flex-wrap: wrap; }
.key-form input, .set-inline input, .field input, .field textarea, .select-wrap select, .mini-search input {
  min-width: 0; flex: 1 1 220px; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: rgba(6, 10, 28, .8); outline: none; transition: border-color .2s, box-shadow .2s;
}
.key-form input:focus, .set-inline input:focus, .field input:focus, .field textarea:focus, .select-wrap select:focus, .mini-search input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 4px rgba(74, 116, 255, .2);
}
.key-msg { margin: 10px 0 0; min-height: 1.3em; font-size: 14px; color: var(--muted); }
.key-msg.ok { color: var(--good); }
.key-msg.err { color: var(--bad); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 12px;
  border: 1px solid transparent; font-weight: 700; font-size: 14px; letter-spacing: .01em; white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .25s, background .2s, border-color .2s;
}
.btn:active { transform: scale(.97); }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 24px -6px rgba(74, 116, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn-primary:hover { box-shadow: 0 12px 30px -6px rgba(74, 116, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .25); transform: translateY(-1px); }
.btn-ghost { background: rgba(255, 255, 255, .05); border-color: var(--line-strong); color: var(--text); cursor: pointer; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.btn-ghost.danger { color: var(--danger); }
.btn-danger { background: var(--danger); color: #fff; }
.btn svg { width: 18px; height: 18px; }

/* ---------- Section heads & rails ---------- */
.section-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; flex-wrap: wrap; }
.section-head h2 { margin: 0; font: 700 22px/1.2 var(--f-display); letter-spacing: -.02em; }
.section-sub { color: var(--muted); font-size: 13px; }
.rails { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; padding-top: 12px; }
.rail, .rail-viewport { min-width: 0; }
.rail-viewport { position: relative; }
.rail-btn {
  position: absolute; z-index: 6; top: calc(50% - 30px); width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(200, 215, 255, .3); color: #fff;
  background: rgba(10, 16, 40, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, .8);
  transition: transform .3s var(--spring), background .2s, box-shadow .25s;
  animation: fade .25s;
}
.rail-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn.prev { left: -10px; }
.rail-btn.next { right: -10px; }
.rail-btn:hover { transform: scale(1.12); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 30px -6px rgba(74, 116, 255, .8); }
.rail-btn:active { transform: scale(.95); }
.rail-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(170px, 19vw, 230px); gap: 18px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 10px 4px 22px; margin: -10px -4px 0; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent;
}
.rail-track > * { scroll-snap-align: start; }
.rail-msg { color: var(--muted); padding: 30px 0; }

/* ---------- Grid & cards ---------- */
.results { padding-bottom: 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 18px; }
.sentinel { height: 1px; }
.empty-note { color: var(--muted); padding: 24px 0; }

.card {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; display: flex; flex-direction: column; border-radius: var(--r); cursor: pointer; outline: none;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--ease);
  animation: cardIn .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes cardIn { from { opacity: 0; transform: perspective(900px) translateY(26px) scale(.94) rotateX(8deg); } }
.card:hover, .card:focus-visible { transition: transform .12s linear; }
.card-art {
  position: relative; aspect-ratio: 3 / 4; max-width: 100%; border-radius: var(--r); overflow: hidden;
  background: linear-gradient(145deg, #1a2550, #0b112b);
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .9);
  transition: box-shadow .35s var(--ease), border-color .35s;
}
.card:hover .card-art, .card:focus-visible .card-art { box-shadow: 0 26px 50px -16px rgba(0, 0, 0, .95), 0 0 0 1px rgba(160, 190, 255, .35), 0 0 40px -6px rgba(74, 116, 255, .45); }
.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transform: scale(1.06); transition: opacity .6s, transform 1.2s var(--ease); }
.card-art img.loaded { opacity: 1; transform: scale(1); }
.card:hover .card-art img.loaded { transform: scale(1.06); }
.card-fallback { position: absolute; inset: 0; display: grid; place-items: center; font: 800 42px/1 var(--f-display); color: rgba(200, 215, 255, .25); letter-spacing: -.04em; }
.card-shine {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .28), transparent 45%);
  mix-blend-mode: overlay;
}
.card:hover .card-shine { opacity: 1; }
.card-art::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; z-index: 2; background: linear-gradient(to top, rgba(5, 8, 20, .75), transparent); pointer-events: none; }
.mc { position: absolute; z-index: 3; top: 10px; left: 10px; font: 700 12px/1 var(--f-mono); padding: 6px 7px; border-radius: 8px; color: #06101c; }
.mc.g { background: var(--good); } .mc.m { background: var(--mid); } .mc.b { background: var(--bad); }
.owned-badge {
  position: absolute; z-index: 3; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; padding: 7px 10px 7px 8px; border-radius: 999px;
  background: rgba(10, 16, 40, .78); border: 1px solid rgba(160, 190, 255, .4); backdrop-filter: blur(8px); color: var(--plat-1);
}
.owned-badge svg { width: 14px; height: 14px; color: var(--gold); }
.is-plat .owned-badge svg { color: var(--plat-1); filter: drop-shadow(0 0 4px rgba(200, 220, 255, .9)); }

/* owned card frames */
.card.is-owned .card-art { border-color: rgba(242, 194, 90, .55); }
.card.is-plat .card-art { border-color: transparent; }
.card.is-plat::before {
  content: ""; position: absolute; z-index: -1; inset: -2px; bottom: auto; aspect-ratio: 3 / 4; width: calc(100% + 4px); border-radius: calc(var(--r) + 2px);
  background: conic-gradient(from var(--ang, 0deg), #f4f8ff, #8aa6ff, #e7d9ff, #9fe3ff, #f4f8ff);
  animation: spinAng 5s linear infinite; filter: blur(.4px);
}
.card.is-plat::after {
  content: ""; position: absolute; z-index: -2; inset: 0; bottom: auto; aspect-ratio: 3 / 4; width: 100%; border-radius: var(--r);
  box-shadow: 0 0 34px 2px rgba(170, 200, 255, .35);
}

.card-body { padding: 12px 4px 0; min-width: 0; }
.card-body h3 { margin: 0; font: 600 15px/1.3 var(--f-body); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-body .meta { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-body .stars-mini { color: var(--gold); letter-spacing: 1px; font-size: 12px; }

.card-add {
  position: absolute; z-index: 4; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(10, 16, 40, .7); backdrop-filter: blur(8px); color: #fff; font-size: 20px; font-weight: 600; line-height: 1;
  display: grid; place-items: center; opacity: 0; transform: translateY(-6px) scale(.85);
  transition: opacity .25s, transform .35s var(--spring), background .2s;
}
.card:hover .card-add, .card:focus-within .card-add, .card.is-owned .card-add { opacity: 1; transform: none; }
.card-add:hover { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.card.is-owned .card-add { background: rgba(242, 194, 90, .9); color: #1a1205; border-color: transparent; font-size: 16px; }
@media (hover: none) { .card-add { opacity: 1; transform: none; } }

/* skeletons */
.skel .card-art { background: linear-gradient(100deg, #121a3c 30%, #1c2754 50%, #121a3c 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
.skel .card-body h3, .skel .card-body .meta { height: 12px; border-radius: 6px; background: #151e44; color: transparent; }
.skel .card-body .meta { width: 60%; margin-top: 8px; }
@keyframes shimmer { to { background-position: -300% 0; } }

/* ---------- Vault ---------- */
.vault-hero { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; padding-block: 44px 28px; }
.vault-id { display: flex; align-items: center; gap: 22px; }
.big-level { position: relative; width: 116px; height: 116px; flex: none; }
.big-level svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.big-level .ring-track, .big-level .ring-fill { stroke-width: 7; }
.big-level-txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.big-level-txt .lbl { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
#big-level-num { font: 800 34px/1 var(--f-display); }
.vault-title { margin: 0; font: 800 clamp(30px, 4.6vw, 52px)/1.05 var(--f-display); letter-spacing: -.035em; }
.xp-line { margin: 8px 0 0; color: var(--muted); font: 500 13px/1 var(--f-mono); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; flex: 1 1 460px; max-width: 640px; }
.stat { padding: 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 4px; }
.stat-num { font: 700 28px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: 12px; color: var(--muted); }
.stat.plat .stat-num { background: linear-gradient(120deg, var(--plat-1), var(--plat-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.vault-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.mini-search { position: relative; flex: 1 1 240px; display: flex; }
.mini-search svg { position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--muted); }
.mini-search input { padding-left: 40px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; transition: all .2s; }
.chip:hover { color: var(--text); }
.chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }
.select-wrap select { height: 40px; flex: none; cursor: pointer; }

.vault-empty { text-align: center; padding: 60px 0 30px; display: grid; justify-items: center; gap: 6px; }
.vault-empty h2 { margin: 12px 0 0; font: 700 22px/1.2 var(--f-display); }
.vault-empty p { margin: 0 0 14px; color: var(--muted); }
.empty-trophy { width: 84px; height: 84px; color: rgba(160, 190, 255, .35); animation: float 4s ease-in-out infinite; }
.empty-trophy svg { width: 100%; height: 100%; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* ---------- Footer ---------- */
.foot { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding-block: 30px calc(30px + env(safe-area-inset-bottom, 0px)); padding-left: var(--gutter-l); padding-right: var(--gutter-r); border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot p { margin: 0; }
.ver { font-family: var(--f-mono); }

/* ---------- Modals ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) var(--gutter-r) max(16px, env(safe-area-inset-bottom, 0px)) var(--gutter-l); }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 14, .72); backdrop-filter: blur(8px); animation: fade .3s; }
@keyframes fade { from { opacity: 0; } }
.modal-panel {
  position: relative; width: 100%; max-height: 100%; overflow: auto; border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line-strong);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9); animation: pop .5s var(--spring);
}
.modal.closing .modal-panel { animation: popOut .22s ease-in forwards; }
.modal.closing .modal-backdrop { animation: fade .22s reverse forwards; }
@keyframes pop { from { opacity: 0; transform: translateY(30px) scale(.94); } }
@keyframes popOut { to { opacity: 0; transform: translateY(16px) scale(.96); } }
.modal-x { position: absolute; z-index: 5; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(6, 10, 28, .6); backdrop-filter: blur(8px); }
.modal-x:hover { background: rgba(255, 255, 255, .12); }

.game-panel { max-width: 960px; }
.gm-hero { position: relative; height: clamp(220px, 34vw, 340px); overflow: hidden; border-radius: 22px 22px 0 0; }
.gm-hero-img { position: absolute; inset: -20px; background-size: cover; background-position: center; transform: scale(1.08); animation: kenburns 14s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform: scale(1.18) translate(-1.5%, -1%); } }
.gm-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg-2) 4%, rgba(12, 19, 48, .55) 50%, rgba(12, 19, 48, .15)); }
.gm-hero-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 28px; }
.gm-hero-txt h2 { margin: 6px 0 4px; font: 800 clamp(24px, 3.6vw, 40px)/1.08 var(--f-display); letter-spacing: -.03em; text-wrap: balance; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.gm-sub { margin: 0; color: #c3cbef; font-size: 14px; }
.gm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gchip { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .15); backdrop-filter: blur(6px); }
.gchip.ps { background: rgba(74, 116, 255, .35); border-color: rgba(120, 150, 255, .5); }
.gm-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; padding: 8px 28px 28px; }
.gm-facts { display: flex; flex-wrap: wrap; gap: 18px 26px; margin-bottom: 16px; }
.fact { display: grid; gap: 2px; }
.fact b { font: 700 18px/1.1 var(--f-mono); }
.fact span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.gm-desc { color: #c3cbef; font-size: 14.5px; line-height: 1.65; max-width: 65ch; }
.gm-desc p { margin: 0 0 10px; }
.gm-desc.clamped { max-height: 12.5em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
.more-btn { display: block; margin-top: 4px; border: 0; background: none; color: var(--plat-2); font-weight: 600; padding: 4px 0; }
.line-skel { height: 12px; border-radius: 6px; margin-bottom: 10px; background: linear-gradient(100deg, #151e44 30%, #222d5c 50%, #151e44 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
.line-skel.short { width: 55%; }
.gm-link { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; text-decoration: none; }

.gm-form { display: grid; gap: 14px; align-content: start; padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.gm-form h3 { margin: 0; font: 700 16px/1.2 var(--f-display); }
.field { display: grid; gap: 6px; }
.field > span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea { flex: none; width: 100%; }
.field textarea { height: auto; padding: 10px 14px; resize: vertical; min-height: 64px; }

.plat-toggle { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line-strong); cursor: pointer; transition: border-color .3s, background .3s; }
.plat-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plat-box { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: rgba(200, 215, 255, .35); transition: all .4s var(--spring); }
.plat-box svg { width: 22px; height: 22px; }
.plat-txt { display: grid; }
.plat-txt small { color: var(--muted); }
.plat-toggle:has(input:checked) { border-color: rgba(200, 220, 255, .7); background: linear-gradient(120deg, rgba(200, 220, 255, .12), rgba(123, 92, 255, .1)); }
.plat-toggle input:checked + .plat-box { background: linear-gradient(135deg, var(--plat-1), var(--plat-2)); color: #1b2550; transform: rotate(-8deg) scale(1.08); box-shadow: 0 0 24px rgba(190, 210, 255, .6); }
.plat-toggle input:focus-visible + .plat-box { outline: 2px solid var(--plat-2); outline-offset: 3px; }

.stars { display: flex; gap: 2px; }
.stars button { border: 0; background: none; font-size: 28px; line-height: 1; padding: 2px; color: rgba(255, 255, 255, .15); transition: color .15s, transform .3s var(--spring); }
.stars button.on { color: var(--gold); text-shadow: 0 0 14px rgba(242, 194, 90, .55); }
.stars button:hover { transform: scale(1.25) rotate(-8deg); }
.form-actions { display: grid; gap: 10px; }
.btn-big { height: 52px; font-size: 15px; width: 100%; }
.remove-zone { display: grid; gap: 8px; }
.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); animation: fade .25s; }
.confirm .btn { height: 36px; padding: 0 14px; }

.settings-panel { max-width: 520px; padding: 28px; display: grid; gap: 22px; }
.settings-panel h2 { margin: 0; font: 700 22px/1.2 var(--f-display); }
.set-row { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.set-row label b, .set-row > b { display: block; }
.set-row small { color: var(--muted); font-size: 13px; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; z-index: 200; top: calc(76px + env(safe-area-inset-top, 0px)); right: var(--gutter-r); display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; overflow: hidden; position: relative;
  background: linear-gradient(120deg, rgba(20, 30, 70, .96), rgba(14, 20, 50, .96)); border: 1px solid var(--line-strong);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .8); animation: toastIn .6s var(--spring) both;
}
.toast.out { animation: toastOut .4s ease-in forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(60px) scale(.9); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(60px); } }
.toast-ico { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #2a1c04; background: radial-gradient(circle at 35% 30%, #ffe7a6, var(--gold) 60%, #b98420); box-shadow: 0 0 20px rgba(242, 194, 90, .5); animation: trophySpin 1s var(--spring) both .15s; }
.toast.plat .toast-ico { color: #1b2550; background: radial-gradient(circle at 35% 30%, #fff, var(--plat-2) 65%, #6d86c4); box-shadow: 0 0 28px rgba(190, 210, 255, .8); }
.toast-ico svg { width: 24px; height: 24px; }
@keyframes trophySpin { from { transform: rotateY(540deg) scale(.4); } }
.toast-txt { min-width: 0; display: grid; }
.toast-txt small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.toast-txt b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-txt span { font: 500 12px/1.3 var(--f-mono); color: var(--plat-2); }
.toast::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .14) 50%, transparent 70%); transform: translateX(-100%); animation: sweep 1.2s ease .4s; }
@keyframes sweep { to { transform: translateX(100%); } }
.toast.info .toast-ico { background: rgba(255, 255, 255, .1); color: var(--text); box-shadow: none; animation: none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .gm-body { grid-template-columns: 1fr; padding: 4px 18px 20px; }
  .gm-hero-txt { padding: 18px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .top-inner { gap: 10px; flex-wrap: wrap; }
  .tabs { order: 3; width: 100%; margin-left: 0; }
  .tab { flex: 1; justify-content: center; }
  .top-right { margin-left: auto; }
  .hero { padding-block: 32px 20px; }
  #search { height: 56px; font-size: 16px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .rail-track { grid-auto-columns: 42vw; gap: 12px; }
  .rail-btn { width: 40px; height: 40px; top: calc(50% - 34px); }
  .rail-btn.prev { left: -6px; }
  .rail-btn.next { right: -6px; }
  .vault-id { gap: 16px; }
  .big-level { width: 92px; height: 92px; }
  .modal { padding: 0; place-items: end center; }
  .modal-panel { border-radius: 22px 22px 0 0; max-height: 94vh; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .settings-panel { padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .toasts { right: 16px; left: 16px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .card { transform: none !important; }
}

/* ---------- Home (search only) ---------- */
.home-hero { padding-block: clamp(56px, 12vh, 130px) 28px; display: grid; justify-items: center; text-align: center; }
.home-hero .search-wrap { width: 100%; }
.home-hero .hero-controls { justify-content: center; }
#view-discover .results .section-head, #view-discover .key-panel .key-card { margin-inline: auto; }
#view-discover .key-card { text-align: left; }

/* ---------- Explore ---------- */
.explore-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-block: 44px 30px; }
.explore-title { margin: 0; font: 800 clamp(34px, 5.4vw, 64px)/1 var(--f-display); letter-spacing: -.035em; }
.explore-title { background: linear-gradient(100deg, var(--plat-1) 0%, var(--plat-2) 40%, #8aa6ff 60%, var(--plat-1) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 8s linear infinite; }
.explore-nokey { color: var(--muted); }
.link-btn { border: 0; background: none; padding: 0; color: var(--plat-2); font-weight: 700; text-decoration: underline; }
@media (max-width: 640px) {
  .tab { padding: 8px 8px; font-size: 13px; gap: 6px; }
}
.tab { white-space: nowrap; }
#view-discover { min-height: 62vh; }

/* ---------- Achievements (v1.2) ---------- */
.gm-ach { padding: 6px 28px 30px; border-top: 1px solid var(--line); margin-top: 4px; }
.ach-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 20px; flex-wrap: wrap; padding-top: 22px; }
.ach-head-txt h3 { margin: 0; font: 700 20px/1.2 var(--f-display); letter-spacing: -.02em; }
.ach-sub { margin: 4px 0 0; color: var(--muted); font: 500 13px/1.3 var(--f-mono); }
.ach-links { display: flex; gap: 8px; flex-wrap: wrap; }
.ach-ext { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-strong); transition: background .2s; }
.ach-ext:hover { background: rgba(255, 255, 255, .1); }

.ach-progress { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ach-bar { flex: 1; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; position: relative; }
.ach-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2), #9fe3ff); background-size: 200% 100%; transition: width .7s var(--ease); animation: sheen 3s linear infinite; box-shadow: 0 0 14px rgba(110, 140, 255, .6); }
.ach-progress.full .ach-bar span { background: linear-gradient(90deg, var(--plat-2), var(--plat-1), #c8b8ff, var(--plat-1)); background-size: 200% 100%; }
.ach-progress b { font: 700 15px/1 var(--f-mono); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }

.ach-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0 12px; }
.ach-tools .mini-search { flex: 1 1 200px; }
.ach-tools .chip { font-variant-numeric: tabular-nums; }
.spoiler-switch { margin-left: auto; }

.ach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ach {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  cursor: pointer; user-select: none; transition: background .25s, border-color .25s, opacity .3s, transform .3s var(--ease);
  animation: achIn .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms);
}
@keyframes achIn { from { opacity: 0; transform: translateY(10px); } }
.ach:hover { background: var(--surface-2); border-color: var(--line-strong); }
.ach.leaving { opacity: 0; transform: translateX(24px); }
.ach-check {
  width: 30px; height: 30px; border-radius: 9px; border: 2px solid rgba(200, 215, 255, .3); background: transparent; padding: 0;
  display: grid; place-items: center; color: transparent; transition: all .3s var(--spring);
}
.ach-check svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s var(--ease) .05s; }
.ach.done .ach-check { background: linear-gradient(135deg, var(--good), #2ab3a0); border-color: transparent; color: #04140c; box-shadow: 0 0 16px rgba(63, 210, 139, .45); }
.ach.done .ach-check svg { stroke-dashoffset: 0; }
.ach.pop .ach-check { animation: checkPop .45s var(--spring); }
@keyframes checkPop { 40% { transform: scale(1.35) rotate(-8deg); } }
.ach.done { border-color: rgba(63, 210, 139, .35); background: linear-gradient(90deg, rgba(63, 210, 139, .09), var(--surface) 55%); }
.ach.done .ach-txt b { color: #bff3d8; }
.ach-img { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex: none; background: linear-gradient(135deg, #1d2858, #121a3c); position: relative; }
.ach-img::before { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; background: rgba(200, 215, 255, .25); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M18 8h28v6h10v8c0 8-6 14-14 15-2 5-6 8-8 9v6h8v6H22v-6h8v-6c-2-1-6-4-8-9C14 36 8 30 8 22v-8h10z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M18 8h28v6h10v8c0 8-6 14-14 15-2 5-6 8-8 9v6h8v6H22v-6h8v-6c-2-1-6-4-8-9C14 36 8 30 8 22v-8h10z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ach-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ach:not(.done) .ach-img img { filter: saturate(.55) brightness(.8); transition: filter .3s; }
.ach:hover .ach-img img { filter: none; }
.ach-txt { min-width: 0; }
.ach-txt b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.ach-txt p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; transition: filter .3s; }
.ach-txt p.secret { font-style: italic; }
.hide-spoilers .spoil:not(.reveal) { filter: blur(5px); cursor: help; }
.ach-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.rar { display: grid; justify-items: end; font: 700 14px/1.1 var(--f-mono); font-variant-numeric: tabular-nums; }
.rar small { font: 600 10px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.r-ultra { color: #ffcf5c; text-shadow: 0 0 12px rgba(255, 207, 92, .5); }
.r-very { color: #c7a6ff; }
.r-rare { color: #7fb4ff; }
.r-common { color: var(--muted); }
.r-unk { color: var(--muted); }
.ach-guide { font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ach-guide:hover { text-decoration: underline; }
.ach-none { color: var(--muted); padding: 18px 4px; }
.ach-empty { margin-top: 16px; padding: 18px; border-radius: 14px; border: 1px dashed var(--line-strong); color: var(--muted); max-width: 70ch; }
.ach.skel { cursor: default; }
.ach.skel .ach-check { border-color: rgba(255, 255, 255, .08); }
.ach.skel .ach-txt b, .ach.skel .ach-txt p { border-radius: 6px; color: transparent; background: linear-gradient(100deg, #151e44 30%, #222d5c 50%, #151e44 70%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
.ach.skel .ach-txt b { width: 40%; } .ach.skel .ach-txt p { width: 75%; margin-top: 6px; }

/* vault card achievement progress */
.card-prog { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.card-prog-bar { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.card-prog-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #9fe3ff); }
.card-prog.full .card-prog-bar span { background: linear-gradient(90deg, var(--plat-2), var(--plat-1)); }
.card-prog em { font: 600 11px/1 var(--f-mono); font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .gm-ach { padding: 4px 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .ach { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 10px; }
  .ach-img { display: none; }
  .spoiler-switch { margin-left: 0; }
  .ach-tools .select-wrap { flex: 1; }
  .ach-tools .select-wrap select { width: 100%; }
}

/* ---------- Settings: hidden API key (v1.4) ---------- */
.key-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: rgba(63, 210, 139, .07); border: 1px solid rgba(63, 210, 139, .3); }
.key-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px rgba(63, 210, 139, .8); flex: none; }
.key-status-txt { font-size: 14px; flex: 1 1 auto; min-width: 0; }
.key-status-txt code { font: 600 13px/1 var(--f-mono); color: var(--muted); letter-spacing: .04em; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.pw-wrap { position: relative; flex: 1 1 220px; min-width: 0; display: flex; }
.pw-wrap input { padding-right: 64px; width: 100%; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 32px; padding: 0 10px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .08); color: var(--muted); font-size: 12px; font-weight: 700; }
.pw-eye:hover { color: var(--text); }

/* =====================================================================
   v1.5 — playing / backlog, Home sections, vault tabs, timeline, stats,
   spinner, cover colours, controller focus
   ===================================================================== */
:root {
  --play: #5fb8ff;
  --backlog: #a9b3de;
  --ch-1: #5f7ae8;      /* chart marks (validated on the dark surface) */
  --ch-2: #b8862a;      /* chart highlight */
  --grid-line: rgba(150, 175, 255, .10);
}
button, a, input, select, textarea, [tabindex] { scroll-margin-block: 100px 30px; }

/* ---------- status picker ---------- */
.status-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(6, 10, 28, .7); border: 1px solid var(--line); }
.status-seg button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 700; transition: background .25s, color .25s, transform .3s var(--spring);
}
.status-seg button svg { width: 18px; height: 18px; }
.status-seg button:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, .05); }
.status-seg button.on { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px -6px rgba(74, 116, 255, .8); transform: translateY(-1px); }
.status-seg button[data-st="playing"].on { background: linear-gradient(135deg, #2f8fe0, #4a74ff); }
.status-seg button[data-st="backlog"].on { background: linear-gradient(135deg, #59648f, #3d4675); }
.status-seg button:disabled { opacity: .35; cursor: not-allowed; }
.st-blurb { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; animation: fade .3s; }
.completed-fields { display: grid; gap: 14px; animation: fade .3s; }
#f-submit:disabled { cursor: default; opacity: 1; background: rgba(255, 255, 255, .06); color: var(--muted); box-shadow: none; transform: none; }

/* watch button in the game window */
.gm-watch {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(6, 10, 28, .55); backdrop-filter: blur(8px); font-size: 13px; font-weight: 700;
  transition: background .25s, border-color .25s;
}
.gw-star { color: rgba(255, 255, 255, .5); font-size: 15px; transition: color .3s, transform .45s var(--spring); }
.gm-watch.on { border-color: rgba(242, 194, 90, .7); background: rgba(242, 194, 90, .14); }
.gm-watch.on .gw-star { color: var(--gold); transform: rotate(72deg) scale(1.15); text-shadow: 0 0 12px rgba(242, 194, 90, .8); }

/* ---------- card extras ---------- */
.card-watch {
  position: absolute; z-index: 4; top: 10px; left: 10px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(10, 16, 40, .7); backdrop-filter: blur(8px); color: rgba(255, 255, 255, .55); font-size: 16px; line-height: 1;
  display: grid; place-items: center; transition: color .25s, transform .4s var(--spring), background .25s;
}
.card-watch:hover { color: #fff; transform: scale(1.1); }
.card-watch.on { color: var(--gold); border-color: rgba(242, 194, 90, .6); background: rgba(40, 30, 8, .7); text-shadow: 0 0 10px rgba(242, 194, 90, .8); }
.cd-chip {
  position: absolute; z-index: 3; right: 10px; bottom: 10px; padding: 6px 9px; border-radius: 999px; font: 700 11px/1 var(--f-mono);
  background: rgba(10, 16, 40, .8); border: 1px solid rgba(160, 190, 255, .35); backdrop-filter: blur(8px); color: var(--plat-1);
}
.card.is-owned .cd-chip, .card.is-playing .cd-chip, .card.is-backlog .cd-chip { bottom: 46px; }
.owned-badge.st-playing { border-color: rgba(95, 184, 255, .55); color: #d6ecff; }
.owned-badge.st-playing svg { color: var(--play); }
.owned-badge.st-backlog { border-color: rgba(169, 179, 222, .4); color: #dfe4fb; }
.owned-badge.st-backlog svg { color: var(--backlog); }
.card.is-playing .card-art { border-color: rgba(95, 184, 255, .55); }
.card.is-backlog .card-art { border-color: rgba(169, 179, 222, .35); }
.card.is-playing .card-add { opacity: 1; transform: none; background: var(--play); color: #04182c; border-color: transparent; font-size: 13px; }
.card.is-backlog .card-add { opacity: 1; transform: none; background: rgba(169, 179, 222, .85); color: #10142a; border-color: transparent; }

/* ---------- Home sections ---------- */
.home-extras { display: grid; gap: 44px; padding-top: 18px; }
.home-sec { animation: rise .7s var(--ease) both; }
.continue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 18px; }
.cont-card {
  --gh: 228; --gs: 75%;
  position: relative; display: grid; grid-template-columns: 42% minmax(0, 1fr); border-radius: 20px; overflow: hidden; cursor: pointer; outline: none;
  background: linear-gradient(120deg, hsl(var(--gh) var(--gs) 22% / .55), var(--surface) 55%); border: 1px solid hsl(var(--gh) var(--gs) 65% / .28);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .9); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
  animation: cardIn .6s var(--ease) both; animation-delay: calc(var(--i) * 70ms);
}
.cont-card:hover, .cont-card:focus-visible { transform: translateY(-4px); border-color: hsl(var(--gh) var(--gs) 70% / .6); box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .95), 0 0 40px -10px hsl(var(--gh) var(--gs) 60% / .5); }
.cont-art { position: relative; min-height: 220px; background: linear-gradient(145deg, #1a2550, #0b112b); }
.cont-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cont-card:hover .cont-art img { transform: scale(1.06); }
.cont-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(10, 16, 40, .55)); }
.cont-badge {
  position: absolute; z-index: 2; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 999px;
  font: 700 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #d6ecff; background: rgba(10, 16, 40, .8); border: 1px solid rgba(95, 184, 255, .5);
}
.cont-badge svg { width: 12px; height: 12px; color: var(--play); animation: pulsePlay 1.6s ease-in-out infinite; }
@keyframes pulsePlay { 50% { opacity: .45; } }
.cont-body { padding: 18px 18px 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.cont-body h3 { margin: 0; font: 700 19px/1.2 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.cont-meta { margin: -4px 0 0; color: var(--muted); font-size: 12.5px; }
.cont-prog { display: flex; align-items: center; gap: 10px; }
.cont-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cont-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, hsl(var(--gh) var(--gs) 58%), #9fe3ff); transition: width .7s var(--ease); }
.cont-prog em { font: 600 11.5px/1 var(--f-mono); font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.cn-h { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cn-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.cn-item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; border: 1px solid transparent; background: rgba(255, 255, 255, .035);
  text-align: left; font-size: 13.5px; transition: background .2s, border-color .2s;
}
.cn-item:hover { background: rgba(255, 255, 255, .08); border-color: var(--line); }
.cn-box { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 2px solid rgba(200, 215, 255, .3); display: grid; place-items: center; color: transparent; transition: all .3s var(--spring); }
.cn-box svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.cn-item.got .cn-box { background: var(--good); border-color: transparent; color: #04140c; transform: scale(1.2); }
.cn-item.got { border-color: rgba(63, 210, 139, .4); }
.cn-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cn-pct { font: 600 11.5px/1 var(--f-mono); color: var(--muted); }
.cn-note { margin: 0; color: var(--muted); font-size: 13px; }
.cn-loading { animation: pulsePlay 1.4s ease-in-out infinite; }
.cont-actions { display: flex; gap: 8px; }
.cont-actions .btn svg { width: 15px; height: 15px; color: var(--gold); }

.picker-banner {
  position: relative; width: 100%; display: flex; align-items: center; gap: 22px; padding: 18px 22px; border-radius: 20px; overflow: hidden; text-align: left;
  border: 1px solid rgba(160, 140, 255, .35); background: linear-gradient(110deg, rgba(123, 92, 255, .28), rgba(74, 116, 255, .14) 50%, rgba(18, 26, 58, .7));
  box-shadow: 0 20px 40px -26px rgba(123, 92, 255, .9); transition: transform .35s var(--ease), box-shadow .35s;
}
.picker-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .1) 50%, transparent 65%); transform: translateX(-100%); animation: sweep 3.5s ease-in-out 1s infinite; }
.picker-banner:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -24px rgba(123, 92, 255, 1); }
.pb-stack { position: relative; width: 108px; height: 72px; flex: none; }
.pb-stack span { position: absolute; top: 0; left: calc(var(--k) * 16px); width: 76px; height: 72px; border-radius: 12px; overflow: hidden; border: 2px solid var(--bg-2); background: linear-gradient(145deg, #2a2f6b, #121a3c); transform: rotate(calc((var(--k) - 1) * 7deg)); box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .8); transition: transform .45s var(--spring); }
.pb-stack span img { width: 100%; height: 100%; object-fit: cover; }
.picker-banner:hover .pb-stack span { transform: rotate(calc((var(--k) - 1) * 14deg)) translateY(calc((var(--k) - 1) * -3px)); }
.pb-txt { display: grid; gap: 3px; min-width: 0; }
.pb-txt b { font: 700 clamp(17px, 2.2vw, 22px)/1.2 var(--f-display); letter-spacing: -.02em; }
.pb-txt small { color: #c3cbef; font-size: 13.5px; }
.pb-go { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; border-radius: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 24px -6px rgba(74, 116, 255, .7); flex: none; }
.pb-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.countdown-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.cd-card {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 16px; cursor: pointer; outline: none;
  background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, transform .3s var(--ease); animation: cardIn .6s var(--ease) both; animation-delay: calc(var(--i) * 60ms);
}
.cd-card:hover, .cd-card:focus-visible { border-color: rgba(242, 194, 90, .45); transform: translateY(-2px); }
.cd-card.is-out { border-color: rgba(63, 210, 139, .45); background: linear-gradient(120deg, rgba(63, 210, 139, .1), var(--surface) 60%); }
.cd-art { aspect-ratio: 3 / 4; max-width: 100%; border-radius: 10px; overflow: hidden; background: linear-gradient(145deg, #1a2550, #0b112b); }
.cd-art img { width: 100%; height: 100%; object-fit: cover; }
.cd-body { min-width: 0; padding-right: 30px; }
.cd-body h3 { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.cd-date { margin: 2px 0 10px; color: var(--muted); font-size: 12.5px; }
.cd-clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.cd-clock span { display: grid; justify-items: center; padding: 7px 2px 5px; border-radius: 9px; background: rgba(6, 10, 28, .75); border: 1px solid var(--line); }
.cd-clock b { font: 700 18px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.cd-clock b.flip { animation: flipNum .45s var(--ease); }
@keyframes flipNum { from { opacity: .2; transform: translateY(-6px) rotateX(70deg); } }
.cd-clock small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.cd-tba { margin: 0; color: var(--muted); font-size: 13px; }
.cd-out { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cd-out-pill { padding: 7px 12px; border-radius: 999px; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #04140c; background: linear-gradient(135deg, var(--good), #2ab3a0); box-shadow: 0 0 18px rgba(63, 210, 139, .5); }
.cd-star { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; color: var(--gold); font-size: 17px; text-shadow: 0 0 10px rgba(242, 194, 90, .7); transition: transform .3s var(--spring); }
.cd-star:hover { transform: scale(1.2) rotate(30deg); }

/* ---------- vault tabs ---------- */
.vtabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 22px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.vtabs::-webkit-scrollbar { display: none; }
.vtab { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; white-space: nowrap; transition: color .2s, background .25s; }
.vtab:hover { color: var(--text); }
.vtab.is-active { color: var(--bg); background: var(--text); }
.vt-n { font: 700 11px/1 var(--f-mono); padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-variant-numeric: tabular-nums; }
.vtab.is-active .vt-n { background: rgba(7, 11, 26, .12); }
.vpane.vp-in { animation: viewIn .45s var(--ease); }
.vp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.vp-head .section-sub { margin: 0; }
.vp-empty { text-align: center; padding: 50px 0 20px; color: var(--muted); display: grid; justify-items: center; gap: 6px; }
.vp-empty h2 { margin: 0; font: 700 20px/1.2 var(--f-display); color: var(--text); }
.vp-empty p { margin: 0; max-width: 48ch; }

/* ---------- timeline ---------- */
.timeline { position: relative; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(to bottom, var(--accent), var(--accent-2) 60%, transparent); opacity: .6; }
.tl-year { position: relative; margin: 8px 0 18px -34px; animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.tl-year span { display: inline-block; font: 800 clamp(26px, 4vw, 40px)/1 var(--f-display); letter-spacing: -.04em; background: linear-gradient(100deg, var(--plat-1), var(--plat-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl-month { position: relative; margin-bottom: 30px; animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.tl-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tl-node { position: absolute; left: -29px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--accent); box-shadow: 0 0 12px rgba(74, 116, 255, .7); }
.tl-node.plat { border-color: var(--plat-1); box-shadow: 0 0 14px rgba(200, 220, 255, .9); }
.tl-head h3 { margin: 0; font: 700 18px/1.2 var(--f-display); letter-spacing: -.02em; }
.tl-count { color: var(--muted); font: 500 12.5px/1 var(--f-mono); }
.tl-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.tl-item {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px; border-radius: 14px; text-align: left;
  border: 1px solid var(--line); background: var(--surface); transition: transform .3s var(--ease), border-color .3s, background .3s;
  animation: cardIn .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms + var(--j) * 40ms);
}
.tl-item:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface-2); }
.tl-item.plat { border-color: rgba(200, 220, 255, .4); }
.tl-cover { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 9px; overflow: hidden; background: linear-gradient(145deg, #1a2550, #0b112b); }
.tl-cover img { width: 100%; height: 100%; object-fit: cover; }
.tl-cover .card-fallback { font-size: 20px; }
.tl-plat { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #1b2550; background: radial-gradient(circle at 35% 30%, #fff, var(--plat-2)); box-shadow: 0 0 10px rgba(200, 220, 255, .8); }
.tl-plat svg { width: 12px; height: 12px; }
.tl-info { min-width: 0; display: grid; gap: 3px; }
.tl-info b { font-size: 14px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tl-info small { color: var(--muted); font-size: 12px; }

/* ---------- stats ---------- */
.st-page { display: grid; gap: 18px; }
.st-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.st-tile { padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; min-width: 0; }
.st-tile b { font: 700 28px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.st-tile b.st-word { font: 700 20px/1.15 var(--f-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.st-tile span { color: var(--muted); font-size: 12.5px; }
.st-note { margin: 0; color: var(--muted); font-size: 13px; animation: pulsePlay 1.4s ease-in-out infinite; }
.chart-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.chart-card { padding: 18px 18px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.chart-card header h3 { margin: 0; font: 700 16px/1.25 var(--f-display); letter-spacing: -.01em; }
.chart-sub { margin: 4px 0 12px; color: var(--muted); font-size: 13px; max-width: 65ch; }
.chart { width: 100%; min-width: 0; }
.chart svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--grid-line); stroke-width: 1; }
.chart .base { stroke: rgba(150, 175, 255, .28); stroke-width: 1; }
.chart .ax { fill: var(--muted); font: 500 11px var(--f-body); }
.chart .ax.lbl { fill: #c3cbef; font-size: 12px; }
.chart .ax-hi { fill: var(--text); font-weight: 700; }
.chart .bar { fill: var(--ch-1); transition: filter .2s; }
.chart .bar.hi { fill: var(--ch-2); }
.chart .track { fill: rgba(255, 255, 255, .035); }
.chart .val { fill: var(--text); font: 700 12px var(--f-mono); }
.chart .val-s { fill: var(--muted); font: 600 11.5px var(--f-mono); }
.chart .hit { fill: transparent; cursor: pointer; outline: none; }
.chart .col:hover .bar, .chart .col:focus-within .bar { filter: brightness(1.3); }
.chart .col:hover .dot, .chart .col:focus-within .dot { r: 7; }
.chart .dot { fill: var(--ch-1); stroke: var(--bg-2); stroke-width: 2; transition: r .2s; }
.chart .ref { stroke: rgba(200, 215, 255, .35); stroke-width: 1.5; stroke-dasharray: 5 5; }
.chart .ref-lbl { fill: var(--muted); font: 600 11px var(--f-body); }
.chart-empty { margin: 8px 0 14px; color: var(--muted); font-size: 13px; }
.chart-table { margin-top: 6px; }
.chart-table summary { cursor: pointer; color: var(--plat-2); font-size: 12.5px; font-weight: 600; padding: 6px 0; width: fit-content; }
.ct-wrap { overflow-x: auto; max-height: 260px; overflow-y: auto; }
.chart-table table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.chart-table th, .chart-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.chart-table th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
.chart-table td:not(:first-child) { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.chart-tip {
  position: fixed; z-index: 400; pointer-events: none; display: grid; gap: 2px; padding: 8px 11px; border-radius: 10px; max-width: 260px;
  background: rgba(14, 20, 50, .97); border: 1px solid var(--line-strong); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .8); font-size: 12.5px;
}
.chart-tip b { font-size: 13px; }
.chart-tip span { color: #c3cbef; font-family: var(--f-mono); font-size: 12px; }

/* ---------- easiest next (game window) ---------- */
.ach-next { margin-top: 16px; animation: fade .3s; }
.ach-next h4 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ach-next h4 small { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; opacity: .8; }
.ach-next-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.next-chip {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; text-align: left;
  border: 1px solid rgba(110, 140, 255, .35); background: linear-gradient(120deg, rgba(74, 116, 255, .14), var(--surface)); transition: transform .3s var(--ease), border-color .3s;
  animation: achIn .45s var(--ease) both; animation-delay: calc(var(--i) * 60ms);
}
.next-chip:hover { transform: translateY(-2px); border-color: rgba(140, 170, 255, .6); }
.next-chip .ach-img { width: 40px; height: 40px; border-radius: 9px; }
.nc-txt { min-width: 0; display: grid; gap: 2px; }
.nc-txt b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-txt small { color: var(--muted); font-size: 12px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.next-chip .rar { font-size: 12.5px; }
.next-chip.got { border-color: rgba(63, 210, 139, .7); background: linear-gradient(120deg, rgba(63, 210, 139, .2), var(--surface)); transform: scale(.97); }

/* ---------- spinner ---------- */
.spin-panel { max-width: 620px; padding: 28px; display: grid; gap: 16px; }
.spin-panel .eyebrow { margin: 0; }
.spin-panel h2 { margin: -6px 0 0; font: 800 clamp(22px, 3.4vw, 30px)/1.1 var(--f-display); letter-spacing: -.03em; }
.spin-filters { display: grid; gap: 10px; }
.sf-group { display: grid; gap: 6px; }
.sf-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.spin-filters .chip small { font-weight: 500; opacity: .7; margin-left: 2px; }
.reel-wrap { --ri: 96px; position: relative; border-radius: 18px; background: rgba(6, 10, 28, .85); border: 1px solid var(--line-strong); box-shadow: inset 0 0 40px rgba(0, 0, 0, .6); overflow: hidden; }
.reel-window { height: calc(var(--ri) * 3); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent); }
.reel { will-change: transform; }
.reel-item { height: var(--ri); display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 16px; padding: 8px 18px; }
.reel-item.ghost { grid-template-columns: 1fr; text-align: center; color: var(--muted); }
.ri-art { position: relative; height: calc(var(--ri) - 18px); border-radius: 10px; overflow: hidden; background: linear-gradient(145deg, #1a2550, #0b112b); }
.ri-art img { width: 100%; height: 100%; object-fit: cover; }
.ri-art .card-fallback { font-size: 22px; }
.ri-txt { display: grid; gap: 3px; min-width: 0; }
.ri-txt b { font: 700 17px/1.2 var(--f-display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-txt small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel-frame { position: absolute; left: 8px; right: 8px; top: var(--ri); height: var(--ri); pointer-events: none; border-radius: 14px; border: 2px solid rgba(160, 190, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 0 30px -4px rgba(110, 140, 255, .6), inset 0 0 24px -8px rgba(110, 140, 255, .6); transition: border-color .4s, box-shadow .4s; }
.reel-frame span { position: absolute; top: 50%; width: 0; height: 0; border: 9px solid transparent; transform: translateY(-50%); }
.reel-frame span:first-child { left: -12px; border-left-color: var(--plat-1); }
.reel-frame span:last-child { right: -12px; border-right-color: var(--plat-1); }
.reel-wrap.done .reel-frame { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 0 44px -2px rgba(242, 194, 90, .75), inset 0 0 30px -8px rgba(242, 194, 90, .6); animation: winPulse 1s var(--spring); }
@keyframes winPulse { 40% { transform: scale(1.03); } }
.reel-wrap.done .reel-item.win .ri-txt b { color: #ffe7a6; }
.spin-count { margin: -4px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.spin-result { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: linear-gradient(120deg, rgba(242, 194, 90, .16), rgba(18, 26, 58, .7)); border: 1px solid rgba(242, 194, 90, .45); animation: pop .5s var(--spring); }
.sr-txt { display: grid; gap: 2px; min-width: 0; }
.sr-txt small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.sr-txt b { font: 700 18px/1.2 var(--f-display); letter-spacing: -.02em; }
.sr-txt span { color: var(--muted); font-size: 12.5px; }
.sr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sr-actions .btn svg { width: 15px; height: 15px; }
.spin-go { width: 100%; }
.spin-go:disabled { opacity: .55; cursor: default; transform: none; }

/* ---------- cover colours in the game window ---------- */
.game-panel { --gh: 228; --gs: 80%; --g-ink: #fff; transition: border-color .6s, box-shadow .6s; }
.game-panel.tinted { border-color: hsl(var(--gh) var(--gs) 65% / .45); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9), 0 0 90px -24px hsl(var(--gh) var(--gs) 60% / .55); }
.game-panel.tinted .gm-hero-shade { background: radial-gradient(70% 90% at 85% 100%, hsl(var(--gh) var(--gs) 50% / .35), transparent 70%), linear-gradient(to top, var(--bg-2) 4%, rgba(12, 19, 48, .55) 50%, rgba(12, 19, 48, .15)); }
.game-panel.tinted .btn-primary:not(:disabled) { color: var(--g-ink); background: linear-gradient(135deg, hsl(var(--gh) var(--gs) 50%), hsl(calc(var(--gh) + 24) var(--gs) 46%)); box-shadow: 0 8px 24px -6px hsl(var(--gh) var(--gs) 50% / .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.game-panel.tinted .status-seg button.on { color: var(--g-ink); background: linear-gradient(135deg, hsl(var(--gh) var(--gs) 50%), hsl(calc(var(--gh) + 24) var(--gs) 46%)); box-shadow: 0 6px 18px -6px hsl(var(--gh) var(--gs) 50% / .8); }
.game-panel.tinted .ach-bar span { background: linear-gradient(90deg, hsl(var(--gh) var(--gs) 55%), hsl(calc(var(--gh) + 30) var(--gs) 65%), hsl(var(--gh) 90% 80%)); background-size: 200% 100%; box-shadow: 0 0 14px hsl(var(--gh) var(--gs) 55% / .6); }
.game-panel.tinted .gchip.ps { background: hsl(var(--gh) var(--gs) 45% / .4); border-color: hsl(var(--gh) var(--gs) 70% / .5); }
.game-panel.tinted .gm-form { border-color: hsl(var(--gh) var(--gs) 65% / .22); }
.game-panel.tinted .next-chip { border-color: hsl(var(--gh) var(--gs) 65% / .4); background: linear-gradient(120deg, hsl(var(--gh) var(--gs) 45% / .18), var(--surface)); }

/* ---------- controller ---------- */
.pad-mode :focus { outline: 3px solid var(--plat-1) !important; outline-offset: 4px; box-shadow: 0 0 0 9px rgba(122, 150, 255, .22); border-radius: 12px; }
.pad-mode .card:focus { outline-offset: 6px; transform: perspective(900px) translateY(-6px) scale(1.04); }
.pad-mode .card:focus .card-art { box-shadow: 0 26px 50px -16px rgba(0, 0, 0, .95), 0 0 40px -6px rgba(74, 116, 255, .6); }
.pad-mode { cursor: none; }
.pad-hints {
  position: fixed; z-index: 90; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 140%);
  display: flex; gap: 16px; padding: 10px 16px; border-radius: 999px; background: rgba(10, 16, 40, .9); border: 1px solid var(--line-strong);
  backdrop-filter: blur(12px); box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .8); font-size: 12.5px; font-weight: 600; color: #c3cbef; white-space: nowrap;
  transition: transform .45s var(--spring), opacity .3s, visibility 0s .45s; max-width: calc(100vw - 32px); overflow: hidden; opacity: 0; visibility: hidden;
}
.pad-mode .pad-hints { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .45s var(--spring), opacity .3s; }
.pad-hints span { display: inline-flex; align-items: center; gap: 6px; }
.pad-hints i, kbd { font-style: normal; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; font: 700 11px/1 var(--f-mono); color: var(--text); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .15); }
.pb { border-radius: 50% !important; width: 22px; padding: 0 !important; font-family: var(--f-body) !important; font-size: 12px !important; }
.pb.x { color: #8fb4ff; } .pb.o { color: #ff8f9a; } .pb.t { color: #6fe0c2; } .pb.s { color: #f0a6e8; }

/* settings: controls list */
.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin-top: 4px; }
.keys-col { display: grid; gap: 6px; align-content: start; }
.keys-h { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.keys p { margin: 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13px; color: #c3cbef; }
.kk { display: flex; gap: 3px; flex-wrap: wrap; }
.settings-panel select { height: 46px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(6, 10, 28, .8); padding: 0 12px; flex: 1 1 200px; min-width: 0; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-row { grid-template-columns: 1fr; }
  .ach-next-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cont-card { grid-template-columns: 1fr; }
  .cont-art { min-height: 0; aspect-ratio: 16 / 8; }
  .cont-art::after { background: linear-gradient(to top, rgba(10, 16, 40, .6), transparent 50%); }
  .picker-banner { flex-wrap: wrap; gap: 14px; padding: 16px; }
  .pb-go { margin-left: 0; width: 100%; justify-content: center; }
  .cd-card { grid-template-columns: 84px minmax(0, 1fr); }
  .cd-clock b { font-size: 15px; }
  .vtabs { width: 100%; }
  .vtab { padding: 0 12px; }
  .timeline { padding-left: 26px; }
  .timeline::before { left: 7px; }
  .tl-node { left: -25px; }
  .tl-year { margin-left: -26px; }
  .spin-panel { padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px)); }
  .reel-wrap { --ri: 84px; }
  .reel-item { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 8px 12px; }
  .keys { grid-template-columns: 1fr; }
  .pad-hints { gap: 10px; font-size: 11.5px; }
}

.home-hero .eyebrow { flex-wrap: wrap; justify-content: center; text-align: center; row-gap: 4px; }

/* ---------- v1.6: in-place updates, no re-animating ---------- */
.no-anim .card, .no-anim .cont-card, .no-anim .cd-card, .no-anim .home-sec, .no-anim .tl-item, .no-anim .tl-month, .no-anim .tl-year,
.no-anim .vpane.vp-in, .no-anim .ach { animation: none !important; }
.ach-next-row .next-chip { animation: none; transition: transform .3s var(--ease), border-color .3s, background .3s, opacity .25s; }
.ach-next-row .next-chip.enter { animation: chipIn .4s var(--ease) both; }
@keyframes chipIn { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.next-chip.got .ach-img { box-shadow: 0 0 0 2px var(--good); }
.next-chip.out { opacity: 0; transform: scale(.92); }
.cn-list li { transition: opacity .25s, transform .28s var(--ease); }
.cn-list li.cn-leave { opacity: 0; transform: translateX(16px); }
.cn-list li.cn-enter { animation: chipIn .4s var(--ease) both; }
.ach { transition: background .25s, border-color .25s, opacity .3s, transform .3s var(--ease); }

/* =====================================================================
   v1.7 — trophy cabinet, platinum shelf, tier list, badges, play calendar,
   year in review
   ===================================================================== */
:root {
  --m-s1: #f4f8ff; --m-s2: #9fb8e8;   /* platinum */
  --m-g1: #ffe7a6; --m-g2: #d39a2c;   /* gold */
  --m-v1: #e4e9f2; --m-v2: #9aa5b8;   /* silver */
  --m-b1: #f0b98a; --m-b2: #a8622f;   /* bronze */
  --m-i1: #a9b1c9; --m-i2: #5b6380;   /* iron */
  --ultra: #ffcf5c; --very: #c7a6ff; --rare: #7fb4ff;
  --h0: rgba(255, 255, 255, .05); --h1: #253a8c; --h2: #3452c2; --h3: #5374ec; --h4: #a3b9ff;  /* activity: one hue, dark → bright */
  --soft: #c3cbef;
}
.pane-title { margin: 0; font: 700 22px/1.2 var(--f-display); letter-spacing: -.02em; }
.pane-sub { margin: 6px 0 0; color: var(--muted); font-size: 14px; max-width: 64ch; }
.btn-done { color: #04140c; background: linear-gradient(135deg, var(--good), #2ab3a0); box-shadow: 0 8px 22px -8px rgba(63, 210, 139, .8); }
.btn-done:hover { filter: brightness(1.08); }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 700; font-size: 13px; white-space: nowrap; transition: color .2s, background .2s; }
.seg button:hover { color: var(--text); }
.seg button.on { color: var(--bg); background: var(--text); }
.glass-card { padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.gc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gc-head h3 { margin: 0; font: 700 17px/1.2 var(--f-display); letter-spacing: -.02em; }
.gc-head p { margin: 0; color: var(--muted); font-size: 13px; }
.toast.badge .toast-ico { color: #1c1030; background: radial-gradient(circle at 35% 30%, #fff1c7, var(--gold) 55%, #9a6bff); box-shadow: 0 0 24px rgba(200, 150, 255, .6); }

/* ---------- game window tabs ---------- */
.gm-tabs { position: relative; display: flex; gap: 4px; width: fit-content; max-width: calc(100% - 56px); margin: 6px 28px 4px; padding: 4px; border-radius: 14px; background: rgba(6, 10, 28, .7); border: 1px solid var(--line); }
.gm-ink { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px -4px rgba(74, 116, 255, .7); transition: transform .45s var(--spring), width .45s var(--spring); }
.game-panel.tinted .gm-ink { background: linear-gradient(135deg, hsl(var(--gh) var(--gs) 50%), hsl(calc(var(--gh) + 24) var(--gs) 46%)); box-shadow: 0 6px 18px -4px hsl(var(--gh) var(--gs) 50% / .7); }
.gm-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-weight: 700; font-size: 14px; white-space: nowrap; transition: color .25s; }
.gm-tab[aria-selected="true"] { color: #fff; }
.game-panel.tinted .gm-tab[aria-selected="true"] { color: var(--g-ink); }
.gt-pill { font: 700 11px/1 var(--f-mono); padding: 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-variant-numeric: tabular-nums; }
.gm-body.in-l, .gm-ach.in-l { animation: paneL .4s var(--ease); }
.gm-body.in-r, .gm-ach.in-r { animation: paneR .4s var(--ease); }
@keyframes paneL { from { opacity: 0; transform: translateX(-24px); } }
@keyframes paneR { from { opacity: 0; transform: translateX(24px); } }
.gm-ach { border-top: 0; margin-top: 0; padding-top: 4px; }
.ov-ach { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.ov-txt { display: grid; gap: 2px; min-width: 0; }
.ov-txt small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-ach .btn { margin-left: auto; flex: none; }
.mini-ring, .cab-ring { position: relative; flex: none; }
.mini-ring { width: 54px; height: 54px; }
.cab-ring { width: 86px; height: 86px; }
.mini-ring svg, .cab-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mini-ring circle, .cab-ring circle { fill: none; stroke-width: 8; }
.mini-ring .trk, .cab-ring .trk { stroke: rgba(255, 255, 255, .08); }
.mini-ring .fil, .cab-ring .fil { stroke: url(#g-prog); stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset .8s var(--ease); filter: drop-shadow(0 0 5px rgba(110, 140, 255, .6)); }
.mini-ring.full .fil, .cab-ring.full .fil { stroke: url(#g-plat); }
.mini-ring b, .cab-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 18px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.mini-ring b { font-size: 12px; }

/* ---------- trophy cabinet ---------- */
.cab-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 18px; }
.cab-title { min-width: 0; }
.cab-title h3 { margin: 0; font: 700 21px/1.15 var(--f-display); letter-spacing: -.02em; }
.cab-tiers { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cab-tier { display: grid; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 78px; }
.cab-tier b { font: 700 15px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.cab-tier span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cab-tier.u b { color: var(--ultra); } .cab-tier.v b { color: var(--very); } .cab-tier.r b { color: var(--rare); }
.gm-ach .ach-links { margin-top: 14px; }
.cabinet {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 12px; padding: 16px; margin-top: 6px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)), rgba(6, 10, 28, .55);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 -30px 60px -40px rgba(74, 116, 255, .25);
}
.tile {
  position: relative; aspect-ratio: 1; max-width: 100%; padding: 0; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(145deg, #23306a, #121a3c);
  transition: transform .35s var(--spring), box-shadow .3s, border-color .3s, filter .3s, opacity .3s;
  animation: tileIn .45s var(--ease) both; animation-delay: calc(var(--i) * 16ms);
}
@keyframes tileIn { from { opacity: 0; transform: scale(.75) translateY(8px); } }
.tile-in { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: grid; place-items: center; }
.tile-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.tile-in .glyph { width: 42%; height: 42%; color: rgba(220, 230, 255, .75); }
.tile-in::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(150deg, rgba(255, 255, 255, .2), transparent 40%); pointer-events: none; }
.tile:not(.done):not(.skel) { filter: grayscale(.85) brightness(.6); }
.tile:not(.done):not(.skel):hover { filter: grayscale(.2) brightness(.92); }
.tile:not(.skel):hover { transform: translateY(-4px) scale(1.06); z-index: 2; }
.tile.done { border-color: rgba(63, 210, 139, .55); box-shadow: 0 0 0 1px rgba(63, 210, 139, .25), 0 10px 26px -8px rgba(63, 210, 139, .45); }
.tile.sel { transform: translateY(-4px) scale(1.06); border-color: var(--plat-1); box-shadow: 0 0 0 2px var(--plat-2), 0 14px 30px -8px rgba(110, 140, 255, .7); filter: none !important; z-index: 2; }
.tile .rdot { position: absolute; z-index: 3; top: 7px; left: 7px; width: 8px; height: 8px; border-radius: 50%; }
.rdot.u { background: var(--ultra); box-shadow: 0 0 8px var(--ultra); } .rdot.v { background: var(--very); box-shadow: 0 0 8px var(--very); } .rdot.r { background: var(--rare); box-shadow: 0 0 8px var(--rare); } .rdot.c { display: none; }
.tile .tick { position: absolute; z-index: 4; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #04140c; background: linear-gradient(135deg, var(--good), #2ab3a0); border: 2px solid var(--bg-2); transform: scale(0); transition: transform .4s var(--spring); }
.tile .tick svg { width: 13px; height: 13px; }
.tile.done .tick { transform: scale(1); }
.tile.burst { animation: tileBurst .6s var(--spring); }
@keyframes tileBurst { 35% { transform: scale(1.22) rotate(-6deg); } }
.tile.leaving { opacity: 0; transform: scale(.7); }
.tile.skel { cursor: default; background: linear-gradient(100deg, #151e44 30%, #222d5c 50%, #151e44 70%); background-size: 300% 100%; animation: tileIn .45s var(--ease) both, shimmer 1.4s linear infinite; }
.cab-none { grid-column: 1 / -1; margin: 0; padding: 18px 4px; color: var(--muted); text-align: center; }
.ach-detail {
  grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 16px 18px; border-radius: 16px; background: linear-gradient(120deg, rgba(40, 52, 110, .92), rgba(20, 28, 64, .96)); border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); animation: detIn .35s var(--ease);
}
@keyframes detIn { from { opacity: 0; transform: translateY(-8px) scaleY(.92); } }
.ach-detail::before { content: ""; position: absolute; top: -8px; left: var(--arrow, 40px); width: 14px; height: 14px; transform: rotate(45deg); background: rgba(40, 52, 110, .96); border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); }
.det-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0; border-radius: 8px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; }
.det-x svg { width: 14px; height: 14px; }
.det-x:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.det-ic { position: relative; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, #2a3a80, #121a3c); border: 1px solid var(--line-strong); }
.det-ic img { width: 100%; height: 100%; object-fit: cover; }
.det-ic svg { width: 46%; height: 46%; color: #fff; }
.det-txt { min-width: 0; padding-right: 20px; }
.det-txt h4 { margin: 0; font: 700 17px/1.25 var(--f-body); }
.det-txt p { margin: 4px 0 0; color: var(--soft); font-size: 14px; line-height: 1.5; max-width: 60ch; transition: filter .3s; }
.det-txt p.secret { font-style: italic; color: var(--muted); }
.hide-spoilers .det-txt p.spoil:not(.reveal) { filter: blur(5px); cursor: help; }
.det-meta { display: flex; gap: 14px; align-items: center; margin-top: 8px; flex-wrap: wrap; font-size: 12.5px; }
.det-meta .rar { font: 700 12.5px/1 var(--f-mono); }
.det-meta a { color: var(--plat-2); font-weight: 600; text-decoration: none; }
.det-meta a:hover { text-decoration: underline; }
.det-btn { height: 42px; }
.cab-legend { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--muted); }
.cab-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cab-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cab-legend i.u { background: var(--ultra); } .cab-legend i.v { background: var(--very); } .cab-legend i.r { background: var(--rare); }
.game-panel.tinted .cab-ring .fil:not(.x) { filter: drop-shadow(0 0 5px hsl(var(--gh) var(--gs) 60% / .7)); }


/* ---------- badges ---------- */
.bd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.bd-total { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.bd-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bd-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--m-b2), var(--m-g2), var(--m-s1)); }
.bd-total b { font: 700 15px/1 var(--f-mono); }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.badge {
  --m1: var(--m-b1); --m2: var(--m-b2);
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  animation: cardIn .5s var(--ease) both; animation-delay: calc(var(--i) * 35ms); transition: border-color .3s, transform .3s var(--ease);
}
.badge.t-silver { --m1: var(--m-v1); --m2: var(--m-v2); } .badge.t-gold { --m1: var(--m-g1); --m2: var(--m-g2); } .badge.t-plat { --m1: var(--m-s1); --m2: var(--m-s2); }
.badge.on { border-color: color-mix(in srgb, var(--m2) 45%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--m2) 14%, transparent), var(--surface) 60%); }
.badge.on:hover { transform: translateY(-2px); }
.badge.new { animation: badgeNew 1s var(--spring) both; }
@keyframes badgeNew { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: none; } }
.medal { position: relative; flex: none; width: 58px; height: 64px; display: grid; place-items: center; }
.medal::before { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, var(--m1), var(--m2)); }
.medal-face { position: relative; width: 46px; height: 52px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: radial-gradient(circle at 40% 30%, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--m2) 85%, #000), color-mix(in srgb, var(--m2) 55%, #000)); overflow: hidden; }
.medal-face svg { width: 22px; height: 22px; color: var(--m1); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.badge.on .medal-face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-120%); animation: medalShine 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
@keyframes medalShine { 0%, 75% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.badge.on .medal { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--m2) 70%, transparent)); }
.medal.locked { filter: grayscale(1) brightness(.55); opacity: .7; }
.bd-txt { display: grid; gap: 3px; min-width: 0; flex: 1; }
.bd-txt b { font-size: 14.5px; }
.bd-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.bd-date { font-style: normal; font: 600 11.5px/1 var(--f-mono); color: var(--m1); margin-top: 2px; }
.bd-prog { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bd-pbar { flex: 1; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.bd-pbar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.bd-prog em { font-style: normal; font: 600 11px/1 var(--f-mono); color: var(--muted); white-space: nowrap; }

/* ---------- play calendar ---------- */
#cal-root { --cell: 13px; margin-bottom: 18px; }
.cal-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.cal-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.cal-tile { padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; min-width: 0; }
.cal-tile b { font: 700 28px/1 var(--f-mono); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 6px; }
.cal-tile b small { font: 600 13px/1 var(--f-body); color: var(--muted); }
.cal-tile span { color: var(--muted); font-size: 12.5px; }
.cal-tile.hot { border-color: rgba(255, 159, 67, .4); background: linear-gradient(120deg, rgba(255, 140, 60, .14), var(--surface) 60%); }
.flame { width: 22px; height: 22px; color: #ffad5c; filter: drop-shadow(0 0 8px rgba(255, 150, 60, .8)); animation: flick 1.6s ease-in-out infinite; align-self: center; }
@keyframes flick { 50% { transform: scale(1.1) rotate(-4deg); filter: drop-shadow(0 0 12px rgba(255, 150, 60, 1)); } }
.wk { display: flex; gap: 4px; margin-top: 4px; }
.wk i { width: 16px; height: 6px; border-radius: 3px; background: var(--h0); }
.wk i.on { background: linear-gradient(90deg, #ffad5c, #ff7a45); box-shadow: 0 0 8px rgba(255, 140, 60, .6); }
.cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.cal-scroller { overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.cal-grid-wrap { display: grid; grid-template-columns: 30px auto; gap: 6px; width: max-content; }
.cal-months { grid-column: 2; position: relative; height: 16px; }
.cal-months span { position: absolute; top: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cal-days { display: grid; grid-template-rows: repeat(7, var(--cell)); gap: 3px; font-size: 10.5px; color: var(--muted); }
.cal-days span { line-height: var(--cell); }
.cal-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, var(--cell)); grid-auto-columns: var(--cell); gap: 3px; }
.cc { position: relative; width: var(--cell); height: var(--cell); border-radius: 3px; border: 0; padding: 0; background: var(--h0); transition: transform .15s var(--ease), box-shadow .2s; animation: cellIn .5s var(--ease) both; animation-delay: calc(var(--w) * 12ms); }
@keyframes cellIn { from { opacity: 0; transform: scale(.4); } }
.cc[data-l="1"] { background: var(--h1); } .cc[data-l="2"] { background: var(--h2); } .cc[data-l="3"] { background: var(--h3); }
.cc[data-l="4"] { background: var(--h4); box-shadow: 0 0 8px -1px rgba(163, 185, 255, .7); }
.cc.out { visibility: hidden; }
.cc.future { background: transparent; box-shadow: inset 0 0 0 1px rgba(150, 175, 255, .06); cursor: default; }
.cc:not(.future):not(.out):hover { transform: scale(1.35); z-index: 2; box-shadow: 0 0 0 1.5px var(--plat-1); }
.cc.sel { box-shadow: 0 0 0 2px var(--plat-1), 0 0 12px rgba(244, 248, 255, .5); z-index: 3; }
.cc.beat::after { content: ""; position: absolute; inset: -3px; border-radius: 5px; border: 1.5px solid var(--gold); box-shadow: 0 0 8px rgba(242, 194, 90, .6); pointer-events: none; }
.cc.plat::after { border-color: var(--plat-1); box-shadow: 0 0 9px rgba(220, 232, 255, .8); }
.cc.today { animation: cellIn .5s var(--ease) both, todayPulse 2.2s ease-in-out 1s infinite; animation-delay: calc(var(--w) * 12ms), 1s; }
@keyframes todayPulse { 50% { box-shadow: 0 0 0 3px rgba(163, 185, 255, .35); } }
.cal-legend { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; color: var(--muted); }
.cl-scale, .cl-marks { display: flex; align-items: center; gap: 5px; }
.cl-marks { gap: 16px; }
.cal-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.cal-legend .mk { display: inline-flex; align-items: center; gap: 7px; }
.cal-legend .mk i { background: var(--h2); position: relative; }
.cal-legend .mk i::after { content: ""; position: absolute; inset: -3px; border-radius: 5px; border: 1.5px solid var(--gold); }
.cal-legend .mk.p i::after { border-color: var(--plat-1); }
.cal-mbar { margin-top: 14px; }
.mb-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 64px; }
.mb-col { display: flex; align-items: flex-end; }
.mb-col i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--h3); min-height: 2px; transform-origin: bottom; animation: grow .7s var(--ease) both; animation-delay: calc(var(--k) * 40ms + .3s); }
.mb-col.cur i { background: var(--h4); }
@keyframes grow { from { transform: scaleY(0); } }
.mb-lbl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin-top: 6px; font-size: 10.5px; color: var(--muted); text-align: center; }
.mb-lbl .cur { color: var(--text); font-weight: 700; }
.cal-detail { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); }
.cd-date { margin: 0; font: 700 17px/1.2 var(--f-display); letter-spacing: -.02em; }
.cd-dsub { margin: 4px 0 14px; color: var(--muted); font: 500 12.5px/1.3 var(--f-mono); }
.cd-ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cd-ev li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer; animation: chipIn .35s var(--ease) both; animation-delay: calc(var(--i) * 50ms); transition: background .2s; }
.cd-ev li:hover { background: rgba(255, 255, 255, .06); }
.ev-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(74, 116, 255, .16); color: #9fb6ff; }
.ev-ic svg { width: 17px; height: 17px; }
.ev-ic.beat { background: rgba(242, 194, 90, .16); color: var(--gold); }
.ev-ic.plat { background: rgba(220, 232, 255, .14); color: var(--plat-1); }
.ev-ic.play { background: rgba(95, 184, 255, .15); color: var(--play); }
.cd-ev b { display: block; font-size: 13.5px; line-height: 1.3; }
.cd-ev small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.4; }
.cd-empty { color: var(--muted); font-size: 13.5px; margin: 10px 0 4px; }

/* ---------- year in review: banner + archive card ---------- */
.yir-banner {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; padding: 26px; border-radius: 22px;
  border: 1px solid rgba(160, 190, 255, .3); background: radial-gradient(70% 120% at 100% 0%, rgba(123, 92, 255, .35), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgba(74, 116, 255, .3), transparent 60%), var(--surface);
  box-shadow: 0 30px 70px -36px rgba(74, 116, 255, .9);
}
.yir-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .08) 50%, transparent 65%); transform: translateX(-100%); animation: sweep 4s ease-in-out 1s infinite; pointer-events: none; }
.yir-banner h2 { margin: 8px 0 0; font: 800 clamp(26px, 4vw, 40px)/1.05 var(--f-display); letter-spacing: -.04em; }
.yir-banner p { margin: 8px 0 0; color: var(--soft); max-width: 52ch; }
.yir-banner .btn { position: relative; z-index: 1; }
.yr { background: linear-gradient(100deg, var(--plat-2), var(--plat-1) 30%, #8aa6ff 55%, var(--plat-1) 75%, var(--plat-2)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 6s linear infinite; }
.yir-badge { display: inline-flex; padding: 5px 10px; border-radius: 999px; font: 700 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #04140c; background: linear-gradient(135deg, var(--good), #2ab3a0); }
#yir-card:not(:empty) { margin-bottom: 18px; }
.yir-card { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding: 22px 24px; border-radius: 20px; border: 1px solid rgba(160, 190, 255, .25); background: radial-gradient(60% 120% at 100% 0%, rgba(123, 92, 255, .25), transparent 60%), radial-gradient(60% 120% at 0% 100%, rgba(74, 116, 255, .18), transparent 60%), var(--surface); }
.yc-main { min-width: 0; flex: 1 1 320px; }
.yc-eyebrow { font: 600 11.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.yc-main h2 { margin: 8px 0 0; font: 800 clamp(22px, 3vw, 30px)/1.1 var(--f-display); letter-spacing: -.03em; }
.yc-main p { margin: 6px 0 0; color: var(--soft); font-size: 14px; }
.yc-years { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.ychip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: 700 12.5px/1 var(--f-mono); transition: all .2s; }
.ychip:hover { color: var(--text); }
.ychip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.yc-side { display: grid; gap: 12px; justify-items: stretch; }
.yc-stats { display: flex; gap: 18px; }
.yc-stats span { display: grid; color: var(--muted); font-size: 12px; }
.yc-stats b { font: 700 24px/1.1 var(--f-mono); color: var(--text); }
.yc-side .btn:disabled { opacity: .5; cursor: default; }

/* ---------- year in review: story ---------- */
.story { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; background: rgba(3, 5, 14, .92); backdrop-filter: blur(12px); animation: fade .35s ease; }
.stage { position: relative; width: min(440px, 100vw); height: min(820px, 100%); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 26px; background: var(--bg-2); border: 1px solid var(--line-strong); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .95); }
.bars { position: absolute; z-index: 5; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; right: 14px; display: flex; gap: 4px; }
.bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.bars span i { display: block; height: 100%; width: 0; background: #fff; border-radius: inherit; }
.st-top { position: absolute; z-index: 5; top: calc(28px + env(safe-area-inset-top, 0px)); left: 16px; right: 12px; display: flex; align-items: center; justify-content: space-between; }
.st-brand { display: flex; align-items: center; gap: 8px; font: 700 12.5px/1 var(--f-body); color: var(--soft); }
.st-brand i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.st-brand svg { width: 12px; height: 12px; }
.st-btns { display: flex; gap: 6px; }
.st-btn { width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .08); color: #fff; display: grid; place-items: center; }
.st-btn:hover { background: rgba(255, 255, 255, .16); }
.st-btn svg { width: 15px; height: 15px; }
.tap { position: absolute; z-index: 3; top: 70px; bottom: 0; width: 35%; border: 0; background: transparent; padding: 0; }
.tap.prev { left: 0; } .tap.next { right: 0; width: 65%; }
.tap:focus-visible { outline-offset: -6px; }
.slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; display: grid; align-content: center; gap: 14px; padding: 96px 28px calc(60px + env(safe-area-inset-bottom, 0px)); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; background: var(--sbg, var(--bg-2)); overflow: hidden; }
.slide.on { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.slide .k { font: 700 11.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.slide h2 { margin: 0; font: 800 clamp(26px, 7.4vw, 34px)/1.08 var(--f-display); letter-spacing: -.035em; text-wrap: balance; }
.slide p { margin: 0; color: var(--soft); font-size: 15.5px; line-height: 1.5; }
.slide .big { font: 800 clamp(84px, 26vw, 128px)/.9 var(--f-display); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.big.plat { background: linear-gradient(160deg, var(--plat-1), var(--plat-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.big.blue { background: linear-gradient(160deg, #c9d6ff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.slide .r { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.slide.on .r { opacity: 1; transform: none; }
.slide .card-fallback { font-size: 22px; }
.fan { position: relative; height: 170px; margin: 6px 0 4px; }
.fan span { position: absolute; left: 50%; bottom: 0; width: 96px; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: linear-gradient(145deg, #1a2550, #0b112b); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .9); transform-origin: 50% 120%; transform: translateX(-50%); opacity: 0; transition: transform .9s var(--spring), opacity .4s; transition-delay: calc(var(--j) * 70ms + 300ms); }
.fan img, .slide .shelf img, .hero-cov img, .ycov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide.on .fan span { opacity: 1; transform: translateX(-50%) rotate(calc((var(--j) - var(--mid)) * 9deg)); }
.genre-bars { display: grid; gap: 10px; margin-top: 6px; }
.gb { display: grid; grid-template-columns: 96px minmax(0, 1fr) 42px; align-items: center; gap: 10px; font-size: 13.5px; }
.gb > span:first-child { color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-track { display: block; }
.gb i { display: block; height: 10px; border-radius: 0 5px 5px 0; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease); transition-delay: calc(var(--j) * 120ms + 400ms); }
.gb:first-child i { background: linear-gradient(90deg, var(--accent), #9fb6ff); }
.slide.on .gb i { transform: scaleX(1); }
.gb b { font: 600 12px/1 var(--f-mono); color: var(--muted); text-align: right; }
.slide .months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; height: 120px; margin-top: 8px; }
.slide .months > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.slide .months .col { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.slide .months i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: rgba(110, 140, 255, .45); transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--spring); transition-delay: calc(var(--j) * 50ms + 300ms); }
.slide .months .top i { background: linear-gradient(var(--gold), #d39a2c); box-shadow: 0 0 16px rgba(242, 194, 90, .5); }
.slide.on .months i { transform: scaleY(1); }
.slide .months small { font-size: 10px; color: var(--muted); }
.slide .months .top small { color: var(--gold); font-weight: 700; }
.rare-card { position: relative; display: grid; justify-items: center; gap: 12px; padding: 24px 20px; border-radius: 20px; text-align: center; background: radial-gradient(70% 70% at 50% 0%, rgba(242, 194, 90, .22), transparent 70%), rgba(255, 255, 255, .04); border: 1px solid rgba(242, 194, 90, .4); }
.rare-ic { width: 84px; height: 84px; border-radius: 22px; display: grid; place-items: center; color: #2a1c04; background: radial-gradient(circle at 35% 30%, #fff1c7, var(--gold) 60%, #b98420); box-shadow: 0 0 40px rgba(242, 194, 90, .55); transform: scale(.4) rotate(-30deg); transition: transform 1s var(--spring) .3s; }
.slide.on .rare-ic { transform: none; }
.rare-ic svg { width: 40px; height: 40px; }
.rare-card b { font: 700 20px/1.2 var(--f-display); letter-spacing: -.02em; }
.rare-card em { font-style: normal; color: var(--soft); font-size: 13.5px; }
.rare-pct { font: 700 13px/1 var(--f-mono); color: #ffe7a6; padding: 6px 10px; border-radius: 999px; background: rgba(242, 194, 90, .14); }
.slide .shelf { display: flex; justify-content: center; gap: 12px; padding: 18px 0 12px; position: relative; }
.slide .shelf::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 10px; border-radius: 4px; background: linear-gradient(rgba(220, 232, 255, .35), rgba(220, 232, 255, .05)); box-shadow: 0 10px 30px rgba(159, 184, 232, .35); }
.slide .shelf span { width: 64px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #1a2550; border: 1px solid rgba(244, 248, 255, .5); box-shadow: 0 0 22px -4px rgba(200, 220, 255, .6); transform: translateY(-60px); opacity: 0; transition: transform .8s var(--spring), opacity .3s; transition-delay: calc(var(--j) * 140ms + 300ms); }
.slide.on .shelf span { transform: none; opacity: 1; }
.hero-cov { justify-self: center; width: 180px; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; position: relative; background: #1a2550; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .95), 0 0 60px -10px rgba(123, 92, 255, .7); transform: scale(.85) rotate(-4deg); transition: transform 1.1s var(--spring) .2s; }
.hero-cov::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); }
.slide.on .hero-cov { transform: none; }
.slide.on .hero-cov::after { animation: shineSweep 1.2s ease 1s; }
.ystars { color: var(--gold); letter-spacing: 3px; font-size: 18px; text-align: center; }
.type-ic { justify-self: start; width: 74px; height: 74px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 16px 40px -10px rgba(74, 116, 255, .8); }
.type-ic svg { width: 36px; height: 36px; color: #fff; }
.traits { display: flex; flex-wrap: wrap; gap: 8px; }
.traits span { padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; }
.ysum { display: grid; gap: 10px; padding: 16px; border-radius: 20px; background: radial-gradient(60% 80% at 100% 0%, rgba(123, 92, 255, .22), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(74, 116, 255, .2), transparent 60%), var(--bg-2); border: 1px solid var(--line-strong); }
.ysum-top { display: grid; gap: 8px; }
.ysum-top small { display: block; font: 600 10.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ysum-top h3 { margin: 0; font: 800 22px/1.05 var(--f-display); letter-spacing: -.035em; }
.type-pill { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(242, 194, 90, .45); background: rgba(242, 194, 90, .1); color: #ffe7a6; font-weight: 700; font-size: 12.5px; }
.type-pill svg { width: 14px; height: 14px; }
.ysum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ysum-grid > div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); display: grid; gap: 3px; }
.ysum-grid b { font: 700 22px/1 var(--f-mono); }
.ysum-grid span { color: var(--muted); font-size: 11.5px; }
.ysum-box { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); min-width: 0; }
.ycov { width: 38px; flex: none; aspect-ratio: 3 / 4; border-radius: 7px; overflow: hidden; background: #1a2550; }
.ysum-box small { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ysum-box b { display: block; font: 700 14px/1.25 var(--f-display); margin-top: 3px; }
.ysum-box em { font-style: normal; color: var(--soft); font-size: 12px; }
.ysum-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--muted); font: 600 11px/1.3 var(--f-mono); }
.end-actions { display: flex; gap: 8px; }
.end-actions .btn { flex: 1; position: relative; z-index: 4; }
.end-actions .btn svg { width: 16px; height: 16px; }
.paused-tag { position: absolute; z-index: 6; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .5); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }

/* ---------- v1.7 responsive ---------- */
@media (max-width: 960px) {
  .cal-wrap { grid-template-columns: 1fr; }
  .cal-detail { position: static; }
}
@media (max-width: 860px) {
  .gm-tabs { margin: 6px 18px 4px; max-width: calc(100% - 36px); }
  .cal-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cabinet { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px; }
  .ach-detail { grid-template-columns: auto minmax(0, 1fr); padding: 14px; gap: 14px; }
  .det-btn { grid-column: 1 / -1; width: 100%; }
  .det-ic { width: 52px; height: 52px; }
  .cab-tiers { margin-left: 0; width: 100%; }
  .cab-tier { flex: 1; min-width: 0; }
  .stage { width: 100vw; height: 100%; border-radius: 0; border: 0; }
  .yir-banner, .yir-card { padding: 20px; }
  .yc-side { width: 100%; }
}

/* =====================================================================
   v1.8 — account & cloud save
   ===================================================================== */
.acct-btn {
  position: relative; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  display: grid; place-items: center; color: var(--muted); padding: 0; transition: color .2s, background .2s, border-color .2s;
}
.acct-btn:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.acct-btn svg { width: 20px; height: 20px; }
.acct-ini { display: none; }
.acct-btn.in { border-color: rgba(160, 190, 255, .35); background: linear-gradient(135deg, rgba(74, 116, 255, .35), rgba(123, 92, 255, .35)); }
.acct-btn.in .acct-cloud { display: none; }
.acct-btn.in .acct-ini { display: block; font: 800 15px/1 var(--f-display); color: #fff; }
.acct-dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg); background: #5b6380; }
.acct-btn[data-status="synced"] .acct-dot { background: var(--good); box-shadow: 0 0 8px rgba(63, 210, 139, .8); }
.acct-btn[data-status="pending"] .acct-dot, .acct-btn[data-status="syncing"] .acct-dot { background: var(--accent); box-shadow: 0 0 8px rgba(74, 116, 255, .9); animation: dotPulse 1s ease-in-out infinite; }
.acct-btn[data-status="offline"] .acct-dot { background: var(--gold); }
.acct-btn[data-status="error"] .acct-dot { background: var(--danger); }
@keyframes dotPulse { 50% { transform: scale(.65); opacity: .6; } }

.acct-row { border-top: 0; padding-top: 0; }
.acct-row label b, .acct-row > b { display: block; }
.acct-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.acct-av { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font: 800 17px/1 var(--f-display); color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 6px 18px -6px rgba(74, 116, 255, .8); }
.acct-who { display: grid; gap: 3px; min-width: 0; }
.acct-who strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-st { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; }
.acct-st i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #5b6380; }
.acct-st.s-synced i { background: var(--good); box-shadow: 0 0 8px rgba(63, 210, 139, .8); }
.acct-st.s-syncing i, .acct-st.s-pending i { background: var(--accent); animation: dotPulse 1s ease-in-out infinite; }
.acct-st.s-offline i { background: var(--gold); }
.acct-st.s-error i { background: var(--danger); }
.acct-confirm { font-size: 13px; color: var(--muted); align-self: center; }
.acct-row input[type="email"] { min-width: 0; flex: 1 1 220px; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(6, 10, 28, .8); outline: none; transition: border-color .2s, box-shadow .2s; }
.acct-row input[type="email"]:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(74, 116, 255, .2); }

.merge-panel { max-width: 520px; padding: 26px; display: grid; gap: 12px; }
.merge-panel .eyebrow { margin: 0; }
.merge-panel h2 { margin: -4px 0 0; font: 800 24px/1.15 var(--f-display); letter-spacing: -.03em; }
.merge-sub { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.merge-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
.merge-box { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); display: grid; gap: 6px; }
.merge-box small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.merge-box b { font-size: 13.5px; line-height: 1.4; font-weight: 600; }
.merge-panel .btn { width: 100%; }
.merge-panel .confirm .btn { width: auto; }
@media (max-width: 480px) { .merge-cols { grid-template-columns: 1fr; } }

/* v1.9: clearer cloud errors */
#acct-msg, .acct-problem { white-space: pre-line; line-height: 1.5; }
.acct-host { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.acct-host code { font: 600 12px/1 var(--f-mono); color: var(--soft); background: rgba(255, 255, 255, .06); padding: 3px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.acct-host .link-btn { font-size: 12.5px; }

/* ===================== v2.0: full trophy lists ===================== */
.tile.gr { --g1: var(--m-b1); --g2: var(--m-b2); }
.tile.gr-s { --g1: var(--m-v1); --g2: var(--m-v2); }
.tile.gr-g { --g1: var(--m-g1); --g2: var(--m-g2); }
.tile.gr-p { --g1: var(--m-s1); --g2: var(--m-s2); }
.tile.gr .tile-in { background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--g2) 38%, transparent), transparent 70%), #121a3a; }
.tile.gr .glyph { color: var(--g1); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--g2) 70%, transparent)); }
.tile.gr::before { content: ""; position: absolute; z-index: 3; top: 6px; left: 6px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 0 0 1.5px rgba(5, 10, 30, .7), 0 0 8px color-mix(in srgb, var(--g2) 80%, transparent); }
.tile.gr .rdot { left: 20px; }

.grade { --g1: var(--m-b1); --g2: var(--m-b2); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--g1); background: color-mix(in srgb, var(--g2) 18%, transparent); border: 1px solid color-mix(in srgb, var(--g2) 55%, transparent); white-space: nowrap; }
.grade::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.grade.gr-s { --g1: var(--m-v1); --g2: var(--m-v2); } .grade.gr-g { --g1: var(--m-g1); --g2: var(--m-g2); } .grade.gr-p { --g1: var(--m-s1); --g2: var(--m-s2); }
.det-meta { flex-wrap: wrap; }

.cab-tier.gr-p b { color: var(--m-s1); } .cab-tier.gr-g b { color: var(--m-g1); } .cab-tier.gr-s b { color: var(--m-v1); } .cab-tier.gr-b b { color: var(--m-b1); }
.cab-legend .lg-gr { display: none; }
.cab-legend.graded .lg-gr { display: inline-flex; }
.cab-legend.graded .lg-rar { display: none; }
.cab-legend i.gr-p { background: linear-gradient(135deg, var(--m-s1), var(--m-s2)); } .cab-legend i.gr-g { background: linear-gradient(135deg, var(--m-g1), var(--m-g2)); }
.cab-legend i.gr-s { background: linear-gradient(135deg, var(--m-v1), var(--m-v2)); } .cab-legend i.gr-b { background: linear-gradient(135deg, var(--m-b1), var(--m-b2)); }

.ach-edit { cursor: pointer; font-family: inherit; }

.list-panel { max-width: 680px; padding: 28px; display: grid; gap: 14px; }
.list-panel .eyebrow { margin: 0; }
.list-panel h2 { margin: -6px 0 0; font: 800 clamp(22px, 3.4vw, 30px)/1.1 var(--f-display); letter-spacing: -.03em; }
.list-sub { margin: 0; color: var(--muted); font-size: 14px; }
.list-help { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.list-help p { margin: 0; }
.list-help code { font-family: var(--f-mono); font-size: 12px; color: var(--text); background: rgba(255, 255, 255, .07); padding: 1px 6px; border-radius: 6px; }
#list-text { width: 100%; min-height: 300px; max-height: 50vh; resize: vertical; padding: 12px 14px; border-radius: 12px; font: 13px/1.6 var(--f-mono); color: var(--text); background: rgba(5, 10, 30, .55); border: 1px solid var(--line-strong); white-space: pre; overflow: auto; }
#list-text:focus { outline: none; border-color: var(--plat-1); box-shadow: 0 0 0 3px rgba(110, 140, 255, .25); }
.list-count { margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.list-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .list-panel { padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px)); }
  #list-text { min-height: 240px; }
}

/* ===================== v2.1: list check, quick tick, trophy lists ===================== */
.list-check { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.list-check .lc-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.list-check.ok .lc-ic { color: #04140c; background: linear-gradient(135deg, var(--good), #2ab3a0); }
.list-check.warn .lc-ic { color: #241800; background: linear-gradient(135deg, var(--m-g1), var(--m-g2)); }
.list-check.bad .lc-ic { color: #fff; background: linear-gradient(135deg, #ff7a8a, #d8405a); }
.list-check.bad { border-color: rgba(255, 110, 130, .45); background: linear-gradient(90deg, rgba(255, 90, 110, .1), var(--surface) 60%); }
.lc-txt { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.lc-txt b { font-size: 14px; }
.lc-txt span { font-size: 13px; color: var(--muted); }
.lc-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--plat-1); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lc-in { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.lc-in input { width: 84px; height: 36px; padding: 0 10px; border-radius: 10px; font: 600 14px var(--f-mono); color: var(--text); background: rgba(5, 10, 30, .55); border: 1px solid var(--line-strong); }
.lc-in input:focus { outline: none; border-color: var(--plat-1); box-shadow: 0 0 0 3px rgba(110, 140, 255, .25); }

.quick-chip.is-active { color: #241800; background: linear-gradient(135deg, var(--m-g1), var(--m-g2)); border-color: transparent; }
.quick-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 10px 12px 10px 16px; border-radius: 14px; font-size: 13px; color: var(--muted); background: linear-gradient(90deg, color-mix(in srgb, var(--m-g2) 18%, transparent), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--m-g2) 45%, transparent); animation: tileIn .3s var(--ease) both; }
.quick-bar > span { flex: 1 1 240px; }
.quick-bar b { color: var(--text); }
.quick-bar .btn { height: 38px; }
#quick-all.confirm { color: #fff; background: linear-gradient(135deg, #ff7a8a, #d8405a); border-color: transparent; }
.cabinet.quick .tile:not(.skel) { cursor: copy; }
.cabinet.quick .tile:not(.done):not(.skel):hover { filter: grayscale(0) brightness(1); }
@media (hover: none) { .qb-desk { display: none; } }

.lists-rows { display: grid; gap: 6px; margin-top: 12px; max-height: 420px; overflow: auto; padding-right: 4px; }
.lr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-align: left; font: inherit; color: var(--text); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer; transition: background .2s, border-color .2s; }
.lr:hover { background: rgba(255, 255, 255, .07); }
.lr-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-n { font: 600 12px var(--f-mono); color: var(--muted); }
.lr-st { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.lr.ok .lr-st { color: var(--good); background: rgba(63, 210, 139, .12); }
.lr.warn .lr-st { color: var(--m-g1); background: color-mix(in srgb, var(--m-g2) 18%, transparent); }
.lr.bad { border-color: rgba(255, 110, 130, .4); }
.lr.bad .lr-st { color: #ff8b9a; background: rgba(255, 90, 110, .14); }
.lr.none .lr-st { color: var(--muted); background: rgba(255, 255, 255, .05); }
@keyframes shineSweep { to { transform: translateX(120%); } }

/* ===================== v2.3: trophy hunting ===================== */
.results-other { margin-top: 34px; }
.results-other .section-head h2 { font-size: clamp(18px, 2.4vw, 22px); }

/* hunt bar */
.hunt-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 16px 0 0; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(5, 10, 30, .5); border: 1px solid var(--line); }
.seg button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 13px var(--f-body); transition: background .2s, color .2s; }
.seg button:hover { color: var(--text); }
.seg button.is-active { color: var(--text); background: linear-gradient(135deg, rgba(110, 140, 255, .35), rgba(123, 92, 255, .3)); box-shadow: inset 0 0 0 1px rgba(160, 190, 255, .35); }
.stack-switch { margin-left: auto; font-size: 13px; }

/* missable + counters on tiles */
.tile .miss-flag { position: absolute; z-index: 4; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 13px/1 var(--f-display); color: #fff; background: linear-gradient(135deg, #ff7a8a, #d8405a); border: 2px solid var(--bg-2); box-shadow: 0 0 12px rgba(255, 90, 110, .6); }
.tile .ctr { position: absolute; z-index: 3; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 7px; font: 700 10.5px/1.3 var(--f-mono); color: var(--text); background: rgba(5, 10, 30, .82); border: 1px solid var(--line-strong); }
.tile .ctr.full { color: #04140c; background: var(--good); border-color: transparent; }
.cab-legend .lg-miss { width: 16px; height: 16px; display: inline-grid; place-items: center; font: 800 10px/1 var(--f-display); font-style: normal; color: #fff; background: linear-gradient(135deg, #ff7a8a, #d8405a); }
.miss-chip.is-active { color: #fff; background: linear-gradient(135deg, #ff7a8a, #d8405a); border-color: transparent; }

/* detail card hunter row */
.det-hunt { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.hchip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .04); color: var(--text); font: 600 13px var(--f-body); cursor: pointer; transition: background .2s, border-color .2s; }
.hchip:hover { background: rgba(255, 255, 255, .09); }
.hchip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.hchip.miss b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--f-display); color: #ff8b9a; border: 1.5px solid currentColor; }
.hchip.miss.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, rgba(255, 122, 138, .9), rgba(216, 64, 90, .9)); }
.hchip.miss.on b { color: #fff; }
.ctr-add { display: inline-flex; align-items: center; gap: 6px; }
.ctr-goal { width: 104px; height: 34px; padding: 0 10px; border-radius: 10px; font: 600 13px var(--f-mono); color: var(--text); background: rgba(5, 10, 30, .55); border: 1px solid var(--line-strong); }
.ctr-goal:focus { outline: none; border-color: var(--plat-1); }
.ctr-goal.bad { border-color: #ff7a8a; box-shadow: 0 0 0 3px rgba(255, 90, 110, .25); }
.ctr-ctl { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(5, 10, 30, .5); border: 1px solid var(--line-strong); }
.ctr-ctl button { width: 34px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--text); cursor: pointer; transition: background .15s, transform .15s var(--spring); }
.ctr-ctl button:hover { background: rgba(255, 255, 255, .14); }
.ctr-ctl button:active { transform: scale(.9); }
.ctr-ctl button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.ctr-ctl b { min-width: 64px; text-align: center; font: 700 15px/1 var(--f-mono); font-variant-numeric: tabular-nums; }
.ctr-ctl b small { font-size: 12px; color: var(--muted); }
.ctr-ctl .ctr-x { width: 26px; background: transparent; color: var(--muted); font-size: 11px; }
.step-sel { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; color: var(--muted); }
.step-sel select, .rstep, .rbulk select { height: 34px; padding: 0 10px; border-radius: 10px; font: 600 12.5px var(--f-body); color: var(--text); background: rgba(5, 10, 30, .55); border: 1px solid var(--line-strong); max-width: 210px; }

/* Home: don't miss */
.cn-h.cn-miss { color: #ff8b9a; }
.miss-list { margin-bottom: 10px; }
.miss-list .cn-item { background: rgba(255, 90, 110, .07); }
.cn-flag { flex: none; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 10.5px/1 var(--f-display); color: #fff; background: linear-gradient(135deg, #ff7a8a, #d8405a); vertical-align: 1px; }
.cn-more { font-size: 12px; color: var(--muted); padding: 2px 8px; }

/* roadmap */
.road { display: grid; gap: 14px; margin-top: 14px; }
.road-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.road-head p { margin: 0; color: var(--muted); font-size: 14px; }
.road-head b { color: var(--text); }
.road-empty, .road-edit { padding: 26px; border-radius: 18px; background: var(--surface); border: 1px dashed var(--line-strong); display: grid; gap: 10px; justify-items: start; }
.road-empty h4, .road-edit h4 { margin: 0; font: 700 19px/1.2 var(--f-display); letter-spacing: -.02em; }
.road-empty p, .road-edit p { margin: 0; color: var(--muted); font-size: 14px; max-width: 62ch; line-height: 1.55; }
.road-edit textarea { width: 100%; max-width: 480px; padding: 12px 14px; border-radius: 12px; font: 14px/1.7 var(--f-body); color: var(--text); background: rgba(5, 10, 30, .55); border: 1px solid var(--line-strong); resize: vertical; }
.road-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.rstep-box { position: relative; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); animation: tileIn .4s var(--ease) both; animation-delay: calc(var(--k) * 60ms); }
.road.no-anim .rstep-box { animation: none; }
.rstep-box.here { border-color: rgba(160, 190, 255, .5); box-shadow: 0 0 0 1px rgba(110, 140, 255, .25), 0 20px 40px -24px rgba(74, 116, 255, .8); }
.rstep-box.complete { border-color: rgba(63, 210, 139, .35); }
.rstep-box.loose { background: transparent; border-style: dashed; }
.rstep-box header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rstep-box header > div { flex: 1 1 200px; min-width: 0; }
.rstep-box h4 { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 700 16px/1.25 var(--f-display); letter-spacing: -.01em; }
.rstep-box header small { color: var(--muted); font-size: 12.5px; }
.rnum { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font: 800 15px/1 var(--f-display); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-strong); }
.here .rnum { color: #0b1230; background: linear-gradient(135deg, var(--plat-1), #9fb8e8); border-color: transparent; }
.complete .rnum { color: #04140c; background: linear-gradient(135deg, var(--good), #2ab3a0); border-color: transparent; }
.here-pill { font: 700 10.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; color: #0b1230; background: linear-gradient(100deg, var(--plat-1), #9fb8e8); }
.rbar { flex: 0 1 160px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.rbar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--plat-2), var(--good)); transition: width .5s var(--ease); }
.rbulk { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.rrows { display: grid; gap: 6px; }
.rrow { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid transparent; transition: background .2s, border-color .2s; }
.rrow:hover { background: rgba(255, 255, 255, .06); border-color: var(--line); }
.rbox { flex: none; width: 26px; height: 26px; padding: 0; border-radius: 8px; border: 2px solid rgba(200, 215, 255, .3); background: transparent; display: grid; place-items: center; color: transparent; cursor: pointer; transition: all .3s var(--spring); }
.rbox svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.rrow.done .rbox { background: var(--good); border-color: transparent; color: #04140c; }
.rrow.done .rtxt b { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(142, 153, 198, .5); }
.rtxt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rtxt b { font-size: 14px; display: flex; align-items: center; }
.rtxt small { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: filter .3s; }
.hide-spoilers .rtxt small.spoil:not(.reveal) { filter: blur(5px); cursor: help; }
.rctr { display: inline-flex; align-items: center; gap: 4px; padding: 2px 2px 2px 8px; border-radius: 9px; background: rgba(5, 10, 30, .5); border: 1px solid var(--line-strong); }
.rctr b { font: 700 12px/1 var(--f-mono); }
.rctr.full b { color: var(--good); }
.rctr button { width: 26px; height: 24px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 7px; background: rgba(255, 255, 255, .07); color: var(--text); cursor: pointer; }
.rctr button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.rnone { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .stack-switch { margin-left: 0; }
  .step-sel { margin-left: 0; }
  .rrow { flex-wrap: wrap; }
  .rtxt { flex-basis: calc(100% - 40px); }
  .rstep { margin-left: 38px; flex: 1; max-width: none; }
  .rbar { flex-basis: 100%; }
}

/* ===================== v2.4: roadmap auto-sort ===================== */
.road-note { color: var(--muted); font-size: 12.5px; }
.road-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.road-tools .btn.armed { color: #fff; border-color: transparent; background: linear-gradient(135deg, #ff7a8a, #d8405a); }

/* ===================== v2.5: series ===================== */
.ser-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-bottom: 16px; }
.ser-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
.ser-tile { min-width: 108px; padding: 11px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 4px; }
.ser-tile b { font: 800 21px/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ser-tile span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ser-tile.gold b { color: var(--m-g1); } .ser-tile.plat b { color: var(--plat-1); }
.ser-bar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ser-switch { margin-left: auto; font-size: 13px; }
.ser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.ser-card { position: relative; display: grid; padding: 0; text-align: left; font: inherit; color: var(--text); border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: transform .35s var(--spring), border-color .25s, box-shadow .3s; animation: tileIn .5s var(--ease) both; animation-delay: calc(var(--i) * 50ms); }
#series-root.no-anim .ser-card { animation: none; }
.ser-card:hover { transform: translateY(-4px); border-color: rgba(160, 190, 255, .35); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .9), 0 0 40px -16px hsl(var(--h) 80% 60% / .7); }
.ser-card.done { border-color: rgba(242, 194, 90, .45); }
.ser-card.allplat { border-color: rgba(220, 232, 255, .55); }
.ser-fan { position: relative; display: block; height: 150px; overflow: hidden; background: radial-gradient(80% 120% at 50% 110%, hsl(var(--h) 70% 50% / .35), transparent 70%), linear-gradient(180deg, rgba(5, 10, 30, .2), rgba(5, 10, 30, .6)); }
.ser-fan-cv { position: absolute; bottom: -18px; left: 50%; width: 92px; transform-origin: 50% 120%; transform: translateX(-50%) rotate(calc(var(--r) * 1deg)) translateY(calc(var(--y) * 1px)); transition: transform .45s var(--spring); }
.ser-card:hover .ser-fan-cv { transform: translateX(-50%) rotate(calc(var(--r) * 1.5deg)) translateY(calc(var(--y) * 1px - 8px)); }
.ser-cv { position: relative; display: grid; align-content: end; width: 100%; aspect-ratio: 3 / 4; max-width: 100%; padding: 8px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); background: linear-gradient(160deg, hsl(var(--ch) 50% 40%), hsl(calc(var(--ch) + 30) 55% 14%)); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .9); }
.ser-cv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ser-cv > span { position: relative; font: 700 9.5px/1.2 var(--f-body); color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ser-cv.dim { filter: grayscale(.85) brightness(.55); }
.ser-cv.mini { width: 30px; flex: none; padding: 0; border-radius: 6px; box-shadow: none; }
.ser-cv.mini > span { display: none; }
.ser-ribbon { position: absolute; top: 12px; left: 12px; z-index: 20; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 700 10.5px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.ser-ribbon svg { width: 12px; height: 12px; }
.ser-ribbon.done { color: #2a1c00; background: linear-gradient(135deg, var(--m-g1), var(--m-g2)); }
.ser-ribbon.allplat { color: #1b2550; background: linear-gradient(135deg, #fff, var(--plat-2)); box-shadow: 0 0 18px rgba(200, 220, 255, .6); }
.ser-body { display: grid; gap: 12px; padding: 16px 18px 18px; }
.ser-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ser-title b { font: 700 18px/1.2 var(--f-display); letter-spacing: -.02em; min-width: 0; }
.ser-title em { font: 700 15px/1 var(--f-mono); font-style: normal; color: hsl(var(--h) 90% 75%); font-variant-numeric: tabular-nums; }
.ser-card.done .ser-title em { color: var(--m-g1); }
.ser-line { margin-top: -6px; font-size: 13px; color: var(--muted); }
.ser-line strong { color: var(--soft); font-weight: 600; }
.ser-segs { display: flex; gap: 4px; }
.ser-segs i, .ser-legend i { flex: 1; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.ser-segs i.plat, .ser-legend i.plat { background: linear-gradient(90deg, var(--plat-2), var(--plat-1)); box-shadow: 0 0 8px rgba(200, 220, 255, .5); }
.ser-segs i.beat, .ser-legend i.beat { background: var(--m-g1); }
.ser-segs i.play, .ser-legend i.play { background: #5fb8ff; }
.ser-segs i.back, .ser-legend i.back { background: repeating-linear-gradient(135deg, rgba(180, 140, 255, .65) 0 3px, rgba(180, 140, 255, .25) 3px 6px); }
.ser-next { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 13px; }
.ser-next small { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.ser-next b { font-weight: 600; }
.ser-legend { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 18px; font-size: 12px; color: var(--muted); }
.ser-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ser-legend i { flex: none; width: 14px; height: 6px; border-radius: 2px; }

.series-panel { max-width: 860px; padding: 0; overflow: auto; }
.ser-phero { position: relative; padding: 28px 28px 22px; background: radial-gradient(70% 140% at 0% 0%, hsl(var(--h) 75% 50% / .35), transparent 65%), radial-gradient(60% 120% at 100% 0%, rgba(123, 92, 255, .25), transparent 60%); border-bottom: 1px solid var(--line); }
.ser-phero .eyebrow { margin: 0 0 8px; }
.ser-phero h2 { margin: 0; padding-right: 44px; font: 800 clamp(24px, 4vw, 36px)/1.05 var(--f-display); letter-spacing: -.04em; }
.ser-prow { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 18px; }
.ser-ring { position: relative; width: 92px; height: 92px; flex: none; }
.ser-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ser-ring circle { fill: none; stroke-width: 10; }
.ser-ring .trk { stroke: rgba(255, 255, 255, .08); }
.ser-ring .fil { stroke: hsl(var(--h) 85% 65%); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease); }
.ser-ring.full .fil { stroke: var(--m-g1); }
.ser-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 20px/1 var(--f-display); letter-spacing: -.03em; }
.ser-pstats { display: flex; gap: 8px 22px; flex-wrap: wrap; }
.ser-pstats div { display: grid; gap: 2px; }
.ser-pstats b { font: 800 22px/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ser-pstats span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ser-pnote { margin: 14px 0 0; font-size: 13.5px; color: var(--soft); }
.ser-tl { padding: 20px 28px 28px; }
.ser-row { display: grid; grid-template-columns: 52px 18px minmax(0, 1fr); gap: 0 14px; }
.ser-yr { font: 700 12.5px/1 var(--f-mono); color: var(--muted); padding-top: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.ser-rail { position: relative; display: flex; justify-content: center; }
.ser-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--line-strong); }
.ser-row:first-child .ser-rail::before { top: 28px; }
.ser-row:last-child .ser-rail::before { bottom: calc(100% - 30px); }
.ser-dot { position: relative; z-index: 1; margin-top: 22px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg-2); }
.st-plat .ser-dot { border-color: transparent; background: radial-gradient(circle at 35% 30%, #fff, var(--plat-2)); box-shadow: 0 0 12px rgba(200, 220, 255, .8); }
.st-beat .ser-dot { border-color: transparent; background: var(--m-g1); box-shadow: 0 0 10px rgba(242, 194, 90, .6); }
.st-play .ser-dot { border-color: #5fb8ff; background: rgba(95, 184, 255, .25); }
.st-back .ser-dot { border-color: #b48cff; }
.ser-game { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid transparent; cursor: pointer; transition: background .2s, border-color .2s; min-width: 0; }
.ser-game:hover { background: rgba(255, 255, 255, .06); border-color: var(--line); }
.ser-game > .ser-cv { width: 44px; flex: none; padding: 0; border-radius: 8px; box-shadow: none; }
.ser-game > .ser-cv > span { display: none; }
.ser-gtxt { flex: 1 1 180px; min-width: 0; }
.ser-gtxt b { display: block; font-weight: 600; font-size: 14.5px; }
.ser-gtxt small { color: var(--muted); font-size: 12.5px; }
.ser-pill { flex: none; font: 700 12px/1 var(--f-body); padding: 6px 10px; border-radius: 999px; white-space: nowrap; color: var(--muted); background: rgba(255, 255, 255, .05); }
.st-plat .ser-pill { color: #1b2550; background: linear-gradient(135deg, #fff, var(--plat-2)); }
.st-beat .ser-pill { color: #2a1c00; background: linear-gradient(135deg, var(--m-g1), var(--m-g2)); }
.st-play .ser-pill { color: #5fb8ff; background: rgba(95, 184, 255, .14); }
.st-back .ser-pill { color: #b48cff; background: rgba(180, 140, 255, .14); }
.ser-act { flex: none; display: flex; align-items: center; gap: 6px; }
.ser-x { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px dashed var(--line-strong); background: transparent; color: var(--muted); font: 600 11.5px var(--f-body); cursor: pointer; }
.ser-x:hover { color: var(--text); }
.ser-x.on { border-style: solid; color: var(--soft); background: rgba(255, 255, 255, .06); }
.ser-row.is-extra .ser-game { opacity: .62; }
.ser-row.is-extra .ser-game:hover { opacity: 1; }
@media (max-width: 640px) {
  .ser-switch { margin-left: 0; }
  .ser-tile { min-width: 0; flex: 1 1 40%; }
  .ser-phero { padding: 22px 18px 18px; }
  .ser-tl { padding: 14px 12px 22px; }
  .ser-row { grid-template-columns: 36px 14px minmax(0, 1fr); gap: 0 8px; }
  .ser-act { flex-basis: 100%; flex-wrap: wrap; padding-left: 58px; }
}

/* ===================== v2.6: my order, cleaner platinum covers ===================== */
/* platinum covers: no rainbow edge or glow, same clean frame as every other completed game */
.card.is-plat::before, .card.is-plat::after { display: none; }
.card.is-plat .card-art { border-color: rgba(242, 194, 90, .55); }

.arrange-hint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -6px 0 18px; padding: 10px 12px 10px 14px; border-radius: 14px; font-size: 13px; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); }
.arrange-hint svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--plat-2); stroke-width: 3.4; stroke-linecap: round; }
.arrange-hint span { flex: 1 1 260px; }
.arrange-hint b { color: var(--text); font-weight: 600; }
#vault-grid.arrange .card { cursor: grab; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#vault-grid.arrange .card img { -webkit-user-drag: none; }
#vault-grid.dragging .card, #vault-grid.settled .card { animation: none; }
#vault-grid .card.drag-src { opacity: .28; }
#vault-grid .card.drag-src .card-art { outline: 2px dashed var(--line-strong); outline-offset: 3px; }
.drag-ghost { position: fixed !important; z-index: 400; left: 0; top: 0; margin: 0; pointer-events: none; animation: none !important; transition: none; cursor: grabbing; }
.drag-ghost .card-art { box-shadow: 0 34px 70px -18px rgba(0, 0, 0, .95), 0 0 0 1px rgba(160, 190, 255, .45), 0 0 40px -8px rgba(74, 116, 255, .6); }
.drag-ghost .card-add, .drag-ghost .card-shine { display: none; }
body.vault-dragging, body.vault-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* ===================== v2.7: always your own order, plainer completed covers ===================== */
/* Completed: no checkmark button and no border on the covers (the game window keeps its own) */
#vault-grid .card-add { display: none; }
#vault-grid .card .card-art, #vault-grid .card.is-owned .card-art, #vault-grid .card.is-plat .card-art { border-color: transparent; }
#vault-grid .card:hover .card-art, #vault-grid .card:focus-visible .card-art { box-shadow: 0 26px 50px -16px rgba(0, 0, 0, .95), 0 0 40px -6px rgba(74, 116, 255, .45); }
.order-reset { margin-left: auto; height: 40px; }
.order-reset svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.order-reset.armed { color: #ffb3bb; border-color: rgba(255, 93, 108, .6); background: rgba(255, 93, 108, .12); }
.arrange-x { flex: none; width: 30px; height: 30px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); }
.arrange-x:hover { color: var(--text); background: rgba(255, 255, 255, .06); }