/* Winter Gains Pass. Battle-pass client look: deep blue horizon, gold serif, hextech frames. */
:root {
  --bg: #010a13;
  --bg-2: #0a1428;
  --panel: #0b1527;
  --panel-2: #0e1c33;
  --line: #1e2d47;
  --gold: #c8aa6e;
  --gold-hi: #f0e6d2;
  --gold-mid: #c89b3c;
  --gold-dark: #785a28;
  --gold-line: #463714;
  --cyan: #0ac8b9;
  --cyan-hi: #7ff3ea;
  --blue: #0397ab;
  --violet: #a77bff;
  --text: #f0e6d2;
  --muted: #a09b8c;
  --dim: #5b5a56;
  --danger: #ff6f7d;
  --p0: #ff8fb4; /* player 1 accent */
  --p1: #5ad1ff; /* player 2 accent */
  --serif: 'Cinzel', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --item-w: 92px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { display: block; max-width: 100%; -webkit-user-drag: none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }

.app { max-width: 1280px; margin: 0 auto; min-height: 100vh; background: var(--bg); box-shadow: 0 0 0 1px #0d1a2e; }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 24px; height: 46px;
  background: linear-gradient(#0b1220, #050a14);
  border-bottom: 1px solid #1a2436;
  position: relative; z-index: 3;
}
.tabs { display: flex; gap: 26px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: none; border: 0; padding: 0; height: 100%;
  font-family: var(--serif); font-weight: 700; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold); opacity: .78; white-space: nowrap; position: relative;
}
.tab:hover { opacity: 1; }
.tab.is-active { color: var(--gold-hi); opacity: 1; }
.tab.is-active::after {
  content: ''; position: absolute; left: -4px; right: -4px; bottom: 8px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.me-chip {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  background: rgba(10, 20, 40, .8); border: 1px solid var(--gold-dark); border-radius: 18px;
  padding: 3px 12px 3px 3px; font-weight: 600; font-size: 13px; color: var(--gold-hi);
}
.me-chip:hover { border-color: var(--gold); box-shadow: 0 0 12px rgba(200, 170, 110, .25); }
.me-avatar { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(#22336b, #0b1430); display: grid; place-items: center; overflow: hidden; border: 1px solid var(--gold-mid); }
.me-avatar img { width: 26px; height: 26px; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 600px;
  background:
    radial-gradient(ellipse 55% 38% at 50% 2%, rgba(98, 120, 255, .55), transparent 70%),
    radial-gradient(ellipse 95% 70% at 50% 40%, #2c47dc 0%, #1a2aa6 30%, #0d1766 58%, #060b33 80%, #040722 100%);
}
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.horizon {
  position: absolute; left: 0; right: 0; top: 43%; height: 2px;
  background: linear-gradient(90deg, transparent 4%, rgba(190, 210, 255, .5) 25%, #f2f6ff 50%, rgba(190, 210, 255, .5) 75%, transparent 96%);
  box-shadow: 0 0 18px 4px rgba(150, 180, 255, .45), 0 0 80px 18px rgba(80, 120, 255, .35);
}
.horizon::after {
  content: ''; position: absolute; left: 30%; right: 30%; top: -60px; height: 120px;
  background: radial-gradient(ellipse at center, rgba(255, 220, 160, .22), transparent 70%);
}
.planet {
  position: absolute; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, #10208a 0%, #0a145c 25%, #050a30 60%);
}
.planet.p1 {
  width: 260%; height: 200%; left: -80%; top: 57%;
  box-shadow: inset 0 2px 0 rgba(150, 180, 255, .55), 0 -6px 40px rgba(80, 120, 255, .35);
}
.planet.p2 {
  width: 170%; height: 160%; left: 10%; top: 61%; opacity: .85;
  background: radial-gradient(ellipse at 40% 0%, #0d1a78, #050a30 50%);
  box-shadow: inset 0 2px 0 rgba(130, 160, 255, .4);
}
.stars {
  position: absolute; inset: 0 0 55% 0; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 28% 12%, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 43% 30%, #fff, transparent), radial-gradient(1px 1px at 61% 16%, #fff, transparent),
    radial-gradient(1px 1px at 77% 26%, #cfe0ff, transparent), radial-gradient(1.5px 1.5px at 88% 10%, #fff, transparent),
    radial-gradient(1px 1px at 6% 40%, #fff, transparent), radial-gradient(1px 1px at 94% 36%, #fff, transparent);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { to { opacity: .25; } }

.hero-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px 0; flex-wrap: wrap; }
.hero-head h1 {
  margin: 0; font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: .01em; color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px;
  border-radius: 14px; background: rgba(5, 10, 40, .55); border: 1px solid rgba(160, 180, 255, .18);
  font-weight: 700; font-size: 13px; color: #e6ecff; backdrop-filter: blur(4px);
}
.chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.chip-level { color: var(--gold-hi); border-color: rgba(200, 170, 110, .45); }
.chip-level b { color: #fff; font-size: 14px; }

.stage {
  display: grid; grid-template-columns: 1fr minmax(260px, 340px) 1fr; align-items: center;
  gap: 16px; padding: 6px 24px 0; min-height: 380px;
}
.stage-left { justify-self: end; padding-right: 20px; }
.ghost-level {
  font-family: var(--serif); font-weight: 800; font-size: 120px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(200, 220, 255, .16);
  background: linear-gradient(rgba(200, 220, 255, .12), transparent); -webkit-background-clip: text; background-clip: text;
}

.showcase { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring .arc { fill: none; stroke: url(#arcGold); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(255, 220, 160, .6)); }
.ring .ticks { fill: none; stroke: rgba(170, 195, 255, .28); stroke-width: 9; stroke-dasharray: 1.2 5.5; transform-origin: 160px 160px; animation: spin 90s linear infinite; }
.ring .ticks-2 { stroke: rgba(170, 195, 255, .12); stroke-width: 4; stroke-dasharray: 1 9; animation-direction: reverse; animation-duration: 140s; }
@keyframes spin { to { transform: rotate(360deg); } }
.emote-glow {
  position: absolute; width: 58%; height: 58%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 120, .45), rgba(255, 160, 60, .12) 45%, transparent 70%);
  filter: blur(6px); animation: pulse 3.2s ease-in-out infinite;
}
.hero-emote {
  position: relative; width: 56%; height: 56%; object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)) drop-shadow(0 0 22px rgba(255, 210, 140, .35));
  animation: float 4s ease-in-out infinite;
  transition: filter .4s ease;
}
.hero-emote.swap { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1), float 4s ease-in-out .45s infinite; }
@keyframes float { 50% { transform: translateY(-9px); } }
@keyframes pulse { 50% { transform: scale(1.12); opacity: .75; } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

.showcase.is-silhouette .hero-emote { filter: brightness(0) drop-shadow(0 0 2px rgba(190, 160, 255, .9)) drop-shadow(0 0 22px rgba(140, 100, 255, .7)); }
.showcase.is-silhouette .emote-glow, .showcase.is-hidden .emote-glow { background: radial-gradient(circle, rgba(150, 110, 255, .45), transparent 70%); }
.showcase.is-golden .hero-emote, .golden img { filter: sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.08) drop-shadow(0 0 12px rgba(255, 210, 90, .7)); }
.showcase.is-locked .hero-emote { filter: saturate(.75) drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }

/* details (right of showcase) */
.details { max-width: 340px; padding-left: 8px; }
.d-label { font-family: var(--serif); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.d-name {
  margin: 6px 0 8px; font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.15;
  letter-spacing: .03em; text-transform: uppercase; color: var(--gold-hi); text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.d-status { display: flex; align-items: center; gap: 7px; font-weight: 700; font-style: italic; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-mid); }
.d-status svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.d-status.ok { color: var(--cyan-hi); }
.d-hint { margin: 12px 0 0; color: #c9d3ff; font-style: italic; opacity: .9; }
.d-blurb { margin: 12px 0 0; color: #dfe5ff; }
.d-meta { margin-top: 10px; font-size: 12.5px; color: #9fb0e8; }

/* hextech button */
.hx-btn {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border: 2px solid transparent; border-radius: 2px;
  background: linear-gradient(#1e2328, #1e2328) padding-box, linear-gradient(var(--gold-hi), var(--gold-dark)) border-box;
  font-family: var(--serif); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .4);
  transition: box-shadow .2s, transform .1s;
}
.hx-btn:hover { box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 18px rgba(240, 230, 210, .35); }
.hx-btn:active { transform: translateY(1px); }
.hx-btn.cyan { background: linear-gradient(#0c2a33, #0a1c26) padding-box, linear-gradient(var(--cyan-hi), var(--blue)) border-box; color: #dffcff; }

/* ---------- level track ---------- */
.track-wrap { position: relative; display: flex; align-items: flex-end; padding: 0 8px 22px; margin-top: -12px; }
.chev {
  flex-shrink: 0; width: 40px; height: 80px; background: none; border: 0; display: grid; place-items: center;
  color: var(--gold); opacity: .85; margin-bottom: 10px;
}
.chev:hover { opacity: 1; color: var(--gold-hi); }
.chev svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.track-scroll { flex: 1; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.track-scroll::-webkit-scrollbar { display: none; }
.track { position: relative; display: flex; align-items: flex-end; padding: 14px 40px 6px; width: max-content; }
.track-line, .track-fill, .track-secret {
  position: absolute; height: 4px; bottom: 19px; left: 0; border-radius: 2px; pointer-events: none;
}
.track-line { background: #2a3550; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.track-fill {
  background: linear-gradient(90deg, #0b5f7a, var(--cyan) 85%, #d9fffb);
  box-shadow: 0 0 10px rgba(10, 200, 185, .8), 0 0 2px #fff;
  transition: width .9s cubic-bezier(.3, .8, .3, 1);
}
.track-secret { background: repeating-linear-gradient(90deg, rgba(167, 123, 255, .5) 0 8px, transparent 8px 14px); height: 2px; bottom: 20px; }

.node {
  position: relative; width: var(--item-w); flex-shrink: 0; background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.node-icon { position: relative; width: 54px; height: 54px; display: grid; place-items: center; transition: transform .2s; }
.node-icon img { width: 48px; height: 48px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
@media (hover: hover) { .node:hover .node-icon { transform: translateY(-3px); } }
.node-lock { height: 16px; color: #c8b98f; opacity: .9; }
.node-lock svg { width: 13px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.node-check {
  position: absolute; right: -2px; bottom: 0; width: 20px; height: 20px; border-radius: 50%;
  background: #0b2b33; border: 1.5px solid var(--cyan); display: grid; place-items: center;
  box-shadow: 0 0 8px rgba(10, 200, 185, .6);
}
.node-check svg { width: 12px; height: 12px; fill: none; stroke: var(--cyan-hi); stroke-width: 3; }
.node.is-done .node-icon img { opacity: .55; filter: grayscale(.4) drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.node.is-perk.is-done .node-icon img, .node.is-wish.is-done .node-icon img { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 210, 120, .7)); }
.node.golden .node-icon img { filter: sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.08) drop-shadow(0 0 8px rgba(255, 210, 90, .7)); }
.node.golden.is-done .node-icon img { opacity: .7; }
.node.is-silhouette .node-icon img { filter: brightness(0) drop-shadow(0 0 2px rgba(190, 160, 255, .95)) drop-shadow(0 0 8px rgba(140, 100, 255, .7)); }
.node.is-hidden .node-icon img { opacity: .8; }
.node.is-perk .node-icon, .node.is-wish .node-icon { width: 64px; height: 64px; }
.node.is-perk .node-icon img, .node.is-wish .node-icon img { width: 60px; height: 60px; }
.node.is-perk .node-icon::before, .node.is-wish .node-icon::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 120, .35), transparent 65%); z-index: -1;
}
.node.is-secret .node-icon { opacity: .35; filter: blur(1.5px); }

.hex {
  position: relative; width: 50px; height: 26px; margin-top: 2px;
  clip-path: polygon(16% 0, 84% 0, 100% 50%, 84% 100%, 16% 100%, 0 50%);
  background: #3d4a66; display: grid; place-items: center; z-index: 1;
}
.hex::before {
  content: ''; position: absolute; inset: 2px;
  clip-path: polygon(16% 0, 84% 0, 100% 50%, 84% 100%, 16% 100%, 0 50%);
  background: linear-gradient(#141d33, #0b1222);
}
.hex span { position: relative; font-weight: 700; font-size: 13px; color: #b8c2db; }
.node.is-done .hex { background: #1593a6; }
.node.is-done .hex::before { background: linear-gradient(#0b3a4a, #072230); }
.node.is-done .hex span { color: #c9fbff; }
.node.is-current .hex { background: linear-gradient(var(--gold-hi), var(--gold-mid)); box-shadow: 0 0 14px rgba(240, 230, 210, .8); }
.node.is-current .hex::before { background: linear-gradient(#f7f3ea, #d7cdb6); }
.node.is-current .hex span { color: #1a1408; }
.node.is-secret .hex { background: #4a3a7a; }
.node.is-secret .hex span { color: #b9a6ef; }
.node.is-selected .node-icon { transform: translateY(-4px) scale(1.08); }
.node.is-selected .hex { outline: none; box-shadow: none; }
.node.is-selected::after {
  content: ''; position: absolute; bottom: -10px; left: 50%; width: 8px; height: 8px; margin-left: -4px;
  transform: rotate(45deg); background: var(--gold-hi); box-shadow: 0 0 8px var(--gold);
}
.node-kind { position: absolute; top: -6px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.track-divider {
  position: relative; width: 40px; flex-shrink: 0; display: grid; place-items: end center; padding-bottom: 14px;
  font-family: var(--serif); font-weight: 800; color: var(--violet); font-size: 18px; text-shadow: 0 0 10px rgba(167, 123, 255, .8);
}

/* ---------- panels ---------- */
.panels {
  display: grid; gap: 16px; padding: 20px 24px 40px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(30, 60, 160, .18), transparent), var(--bg);
}
.panel {
  position: relative; padding: 18px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--gold-line); border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(240, 230, 210, .05), 0 10px 30px rgba(0, 0, 0, .35);
}
.panel::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.panel-log { grid-column: span 5; }
.panel-quests { grid-column: span 7; }
.panel-team { grid-column: span 7; }
.panel-feed { grid-column: span 5; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); }
.muted { color: var(--muted); font-size: 13px; }
.fine { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }

.seg { display: inline-flex; border: 1px solid var(--gold-dark); border-radius: 2px; overflow: hidden; }
.seg-btn { background: transparent; border: 0; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.seg-btn.is-active { background: linear-gradient(#2b2516, #1a160c); color: var(--gold-hi); }

.log-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.log-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px 14px;
  border: 2px solid transparent; border-radius: 3px; text-align: center;
  background: linear-gradient(#0f2a3a, #0a1a28) padding-box, linear-gradient(var(--cyan-hi), #0b5f7a) border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 22px rgba(10, 200, 185, .18);
  transition: transform .12s, box-shadow .2s, filter .2s;
}
@media (hover: hover) { .log-btn:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 30px rgba(10, 200, 185, .45); transform: translateY(-2px); } }
.log-btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.log-btn img { width: 64px; height: 64px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.log-text { display: flex; flex-direction: column; }
.log-text b { font-family: var(--serif); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #e8fffd; }
.log-text small { font-weight: 700; color: var(--cyan-hi); font-size: 13px; }
.log-btn:disabled { cursor: default; filter: saturate(.3); background: linear-gradient(#141c26, #0d131c) padding-box, linear-gradient(#4a5568, #2a3240) border-box; box-shadow: none; }
.log-btn:disabled img { opacity: .55; }
.log-btn:disabled .log-text small { color: #9fe8c0; }
.log-btn.is-busy { pointer-events: none; opacity: .7; }

/* quests */
.q-player { padding: 12px 0; border-top: 1px solid var(--line); }
.q-player:first-child { border-top: 0; padding-top: 0; }
.q-name { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 700; }
.q-name img { width: 30px; height: 30px; }
.q-name .muted { margin-left: auto; font-weight: 500; }
.q-rows { display: grid; gap: 8px; }
.q-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; font-size: 13.5px; }
.q-row > span:first-child { color: var(--muted); }
.pips { display: flex; gap: 6px; flex-wrap: wrap; }
.pip {
  width: 22px; height: 12px; clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);
  background: #26324d;
}
.pip.on { background: linear-gradient(var(--cyan-hi), var(--cyan)); box-shadow: 0 0 8px var(--cyan); }
.pip.extra { background: linear-gradient(#ffe7a6, var(--gold-mid)); }
.q-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold-hi); min-width: 34px; text-align: right; }
.q-count.done { color: var(--cyan-hi); }

/* team */
.team-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.big-level {
  width: 74px; height: 74px; flex-shrink: 0; display: grid; place-items: center; position: relative;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  background: linear-gradient(var(--gold-hi), var(--gold-dark));
}
.big-level::before { content: ''; position: absolute; inset: 3px; clip-path: inherit; background: radial-gradient(#1b2b5a, #0a1230); }
.big-level span { position: relative; text-align: center; line-height: 1; }
.big-level small { display: block; font-size: 10px; letter-spacing: .12em; color: var(--gold); font-weight: 700; }
.big-level b { font-family: var(--serif); font-size: 26px; color: #fff; }
.team-bars { flex: 1; min-width: 0; }
.bar-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.bar-label b { color: var(--gold-hi); font-weight: 700; }
.bar { height: 10px; background: #1a2440; border-radius: 1px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, #0b5f7a, var(--cyan)); box-shadow: 0 0 8px var(--cyan); transition: width .8s ease; }
.bar.violet > i { background: linear-gradient(90deg, #4b2a9a, var(--violet)); box-shadow: 0 0 8px var(--violet); }
.bar + .bar-label { margin-top: 10px; }
.split { display: flex; height: 14px; border-radius: 1px; overflow: hidden; margin: 6px 0 6px; background: #1a2440; }
.split i { display: block; height: 100%; transition: width .8s ease; }
.split i:nth-child(1) { background: linear-gradient(90deg, #b8406e, var(--p0)); }
.split i:nth-child(2) { background: linear-gradient(90deg, var(--p1), #2a6fb8); }
.split-legend { display: flex; justify-content: space-between; font-size: 13px; }
.split-legend span:nth-child(1) b { color: var(--p0); }
.split-legend span:nth-child(2) b { color: var(--p1); }
.overdrive {
  margin-top: 14px; padding: 10px 12px; border: 1px dashed rgba(167, 123, 255, .45); background: rgba(80, 50, 160, .12);
  font-size: 13px; color: #d9ccff; display: flex; gap: 10px; align-items: center;
}
.overdrive img { width: 34px; height: 34px; flex-shrink: 0; }
.overdrive b { color: #fff; }

/* feed */
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 360px; overflow-y: auto; }
.feed li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid rgba(30, 45, 71, .6); }
.feed img { width: 30px; height: 30px; }
.feed .who { font-weight: 600; font-size: 13.5px; }
.feed .when { font-size: 12px; color: var(--muted); }
.feed .xp { font-weight: 700; font-size: 13px; color: var(--cyan-hi); text-align: right; }
.feed .xp.od { color: var(--violet); }
.feed .undo { display: block; margin-top: 2px; margin-left: auto; background: none; border: 0; padding: 0; font-size: 12px; color: var(--muted); text-decoration: underline; }
.feed .undo:hover { color: var(--danger); }
.feed-empty { color: var(--muted); font-size: 13.5px; padding: 8px 0; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(1, 4, 14, .78); backdrop-filter: blur(4px); }
.modal-card {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 24px; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, #1c2e78, #0a1230 60%);
  border: 2px solid transparent; border-image: linear-gradient(var(--gold-hi), var(--gold-dark)) 1;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.modal-card h2 { margin: 0 0 6px; font-family: var(--serif); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-hi); }
.modal-card p { color: #c9d3ff; margin: 0 0 18px; }
.pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pick button {
  background: linear-gradient(#0f1d40, #0a1430) padding-box, linear-gradient(var(--gold), var(--gold-dark)) border-box;
  border: 2px solid transparent; padding: 18px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: .06em; color: var(--gold-hi);
  transition: transform .15s, box-shadow .2s;
}
@media (hover: hover) { .pick button:hover { transform: translateY(-3px); box-shadow: 0 0 24px rgba(200, 170, 110, .35); } }
.pick button:active { transform: scale(.97); }
.pick img { width: 96px; height: 96px; animation: float 4s ease-in-out infinite; }
.pick button:nth-child(2) img { animation-delay: -2s; }
.code-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.code-form input {
  background: #050a1e; border: 1px solid var(--gold-dark); color: var(--gold-hi); padding: 10px 12px; font-size: 16px; min-width: 0; flex: 1 1 180px; max-width: 260px;
}
.rules { text-align: left; color: #d8def5; font-size: 14px; }
.rules h3 { font-family: var(--serif); color: var(--gold); letter-spacing: .08em; text-transform: uppercase; font-size: 13px; margin: 18px 0 6px; }
.rules ul { margin: 0; padding-left: 18px; }
.rules li { margin: 4px 0; }
.rules b { color: #fff; }

/* ---------- celebration ---------- */
.celebrate {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; text-align: center; padding: 16px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(40, 70, 220, .85), rgba(3, 6, 25, .96) 60%);
  animation: fade-in .35s ease;
}
.celebrate .rays {
  position: absolute; left: 50%; top: 45%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px;
  background: repeating-conic-gradient(rgba(255, 230, 170, .12) 0 6deg, transparent 6deg 18deg);
  mask-image: radial-gradient(circle, #000 10%, transparent 55%);
  animation: spin 40s linear infinite;
}
.celebrate .c-inner { position: relative; max-width: 480px; }
.celebrate .c-kicker { font-family: var(--serif); font-weight: 700; letter-spacing: .3em; color: var(--gold); text-transform: uppercase; font-size: 14px; animation: rise .6s ease both .1s; }
.celebrate .c-title { font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 8vw, 46px); color: #fff; margin: 4px 0 6px; text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 0 30px rgba(255, 220, 150, .6); animation: rise .6s ease both .2s; }
.celebrate img { width: min(240px, 60vw); height: min(240px, 60vw); margin: 10px auto; filter: drop-shadow(0 0 30px rgba(255, 210, 130, .8)); animation: reveal 1.1s cubic-bezier(.2, 1.4, .4, 1) both .3s, float 4s ease-in-out 1.4s infinite; }
.celebrate .c-sub { color: #dfe6ff; margin: 0 0 6px; animation: rise .6s ease both .6s; }
.celebrate .c-list { color: var(--gold-hi); font-size: 14px; margin: 0 0 18px; animation: rise .6s ease both .7s; }
.celebrate .hx-btn { animation: rise .6s ease both .9s; }
.confetti { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: drop linear forwards; }
@keyframes drop { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }
@keyframes reveal { 0% { transform: scale(.2); filter: brightness(0) drop-shadow(0 0 30px #fff); opacity: 0; } 50% { filter: brightness(0) drop-shadow(0 0 30px #fff); opacity: 1; } 100% { transform: scale(1); } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70;
  background: #0b1527; border: 1px solid var(--gold-dark); color: var(--gold-hi); padding: 10px 16px; font-size: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6); max-width: calc(100vw - 32px); animation: rise .25s ease;
}
.toast.error { border-color: #7a2a35; color: #ffd0d6; }
.xp-pop { position: fixed; z-index: 65; pointer-events: none; font-family: var(--serif); font-weight: 800; font-size: 22px; color: var(--cyan-hi); text-shadow: 0 0 12px var(--cyan); animation: xp-float 1.1s ease-out forwards; }
@keyframes xp-float { to { transform: translateY(-70px); opacity: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .panel-log, .panel-quests, .panel-team, .panel-feed { grid-column: span 12; }
  .stage { grid-template-columns: minmax(220px, 300px) 1fr; }
  .stage-left { display: none; }
}
/* Phones: compact hero, swipeable track, and the log buttons as a sticky bottom bar. */
@media (max-width: 640px) {
  :root { --item-w: 70px; --bar-h: 118px; }
  .topbar {
    height: calc(46px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  }
  .tabs { gap: 16px; }
  .tab { font-size: 11px; }
  #me-name { display: none; }
  .me-chip { padding: 3px; }
  .me-avatar { width: 34px; height: 34px; }
  .me-avatar img { width: 32px; height: 32px; }

  .hero { min-height: 0; }
  .hero-head { padding: 12px 16px 0; gap: 8px; }
  .hero-head h1 { font-size: 17px; width: 100%; }
  .chip { height: 26px; font-size: 12px; }
  .stage { grid-template-columns: 1fr; justify-items: center; gap: 0; padding: 0 16px; min-height: 0; }
  .showcase { width: min(220px, 60vw); }
  .details { text-align: center; padding: 0; max-width: 440px; }
  .d-label { font-size: 11.5px; }
  .d-name { font-size: 20px; margin: 4px 0 6px; }
  .d-status { justify-content: center; font-size: 12.5px; }
  .d-hint, .d-blurb { margin-top: 8px; font-size: 14px; }
  .hx-btn { margin-top: 12px; min-height: 44px; }

  .track-wrap { padding: 0 0 14px; margin-top: 10px; }
  .track { padding: 12px 16px 6px; }
  .track-scroll { scroll-snap-type: x proximity; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
  .node { scroll-snap-align: center; }
  .node-icon { width: 46px; height: 46px; }
  .node-icon img { width: 42px; height: 42px; }
  .node.is-perk .node-icon, .node.is-wish .node-icon { width: 54px; height: 54px; }
  .node.is-perk .node-icon img, .node.is-wish .node-icon img { width: 50px; height: 50px; }
  .hex { width: 46px; height: 24px; }
  .chev { width: 24px; }
  .chev svg { width: 20px; height: 20px; }

  .panels { padding: 12px 12px calc(var(--bar-h) + 20px + env(safe-area-inset-bottom)); gap: 12px; }
  .panel { padding: 14px; }

  /* sticky log bar */
  .panel-log {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: 8px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    border-width: 1px 0 0; border-radius: 0;
    background: rgba(5, 10, 26, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .55);
  }
  .panel-log::before { left: 0; right: 0; }
  .panel-log .panel-head { margin-bottom: 8px; flex-wrap: nowrap; }
  .panel-log h2 { font-size: 12px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .panel-log .fine { display: none; }
  .seg { flex-shrink: 0; }
  .seg-btn { padding: 6px 12px; min-height: 32px; }
  .log-buttons { gap: 8px; }
  .log-btn { flex-direction: row; justify-content: flex-start; text-align: left; gap: 8px; padding: 8px 10px; min-height: 60px; }
  .log-btn img { width: 40px; height: 40px; flex-shrink: 0; }
  .log-text { min-width: 0; }
  .log-text b { font-size: 12px; letter-spacing: .04em; }
  .log-text small { font-size: 12.5px; }

  .q-row { grid-template-columns: 56px 1fr auto; gap: 8px; }
  .pips { gap: 5px; }
  .pip { width: 20px; }
  .team-top { gap: 12px; }
  .big-level { width: 62px; height: 62px; }
  .big-level b { font-size: 22px; }
  .feed { max-height: none; overflow: visible; }
  .feed .undo { padding: 6px 0 2px 12px; }
  .toast { bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom)); }
  .modal-card { padding: 22px 16px; }
  .pick img { width: 80px; height: 80px; }
}
@media (max-width: 360px) {
  .log-btn img { width: 32px; height: 32px; }
  .log-btn { padding: 8px; }
}
/* Touch screens swipe the track; arrows only waste space there. */
@media (pointer: coarse) and (max-width: 640px) {
  .chev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 420px) { .tab-long { display: none; } }

/* ---------- season not started yet: locked state ---------- */
.stage { position: relative; }
.season-lock {
  position: absolute; inset: -10px 0 -24px; z-index: 6; display: grid; place-items: center; overflow: hidden; padding: 0 12px;
  background: radial-gradient(ellipse 58% 78% at 50% 52%, rgba(3, 6, 25, .9), rgba(3, 6, 25, .62) 55%, rgba(3, 6, 25, 0) 88%);
  animation: fade-in .4s ease;
}
.chain {
  position: absolute; left: -10%; right: -10%; top: 52%; height: 22px; margin-top: -11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='22'%3E%3Crect x='3' y='4' width='24' height='14' rx='7' fill='none' stroke='%232a1638' stroke-width='7'/%3E%3Crect x='3' y='4' width='24' height='14' rx='7' fill='none' stroke='%23c8aa6e' stroke-width='3.5'/%3E%3Cpath d='M25 11h19' stroke='%232a1638' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M25 11h19' stroke='%23e8d5a6' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 44px 22px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
}
.chain-a { transform: rotate(-12deg); }
.chain-b { transform: rotate(12deg); }
.lock-card {
  position: relative; text-align: center; width: min(460px, 100%); padding: 16px 24px 22px; margin-top: 40px;
  background: radial-gradient(ellipse at 50% 0%, rgba(40, 60, 170, .96), rgba(8, 14, 48, .97) 70%);
  border: 2px solid transparent; border-image: linear-gradient(var(--gold-hi), var(--gold-dark)) 1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 20px 60px rgba(0, 0, 0, .7), 0 0 60px rgba(200, 170, 110, .2);
}
.padlock {
  display: block; width: 92px; height: 108px; margin: -66px auto 2px; transform-origin: 50% 25%;
  filter: drop-shadow(0 0 18px rgba(255, 210, 120, .55)) drop-shadow(0 8px 12px rgba(0, 0, 0, .6));
  animation: lock-shake 4.5s ease-in-out infinite;
}
@keyframes lock-shake { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(-8deg); } 90% { transform: rotate(7deg); } 93% { transform: rotate(-4deg); } 96% { transform: rotate(2deg); } }
.lock-kicker { font-family: var(--serif); font-weight: 700; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.lock-title { margin: 4px 0 0; font-family: var(--serif); font-weight: 800; font-size: 30px; line-height: 1.1; color: var(--gold-hi); text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 0 24px rgba(255, 220, 150, .35); }
.countdown { display: flex; justify-content: center; gap: 10px; margin: 16px 0 12px; }
.countdown span {
  width: 72px; padding: 9px 0 7px; display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(#0d1840, #050a1e); border: 1px solid var(--gold-dark);
  box-shadow: inset 0 1px 0 rgba(240, 230, 210, .08), 0 4px 12px rgba(0, 0, 0, .4);
}
.countdown b { font-family: var(--serif); font-size: 30px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(127, 243, 234, .55); }
.countdown small { margin-top: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.lock-sub { margin: 0; color: #c9d3ff; font-size: 14.5px; }
.season-lock .hx-btn { margin-top: 14px; }

body.is-locked .hero { box-shadow: inset 0 0 0 2px rgba(200, 170, 110, .3), inset 0 0 140px rgba(0, 0, 0, .55); }
body.is-locked .showcase, body.is-locked .details, body.is-locked .stage-left { filter: grayscale(.75) brightness(.5) blur(2px); }
body.is-locked.is-peek .showcase, body.is-locked.is-peek .details { filter: grayscale(.35); }
body.is-locked .track-scroll { filter: grayscale(.9) brightness(.7); }
body.is-locked.is-peek .track-scroll { filter: grayscale(.5) brightness(.85); }
body.is-locked .track-fill { display: none; }
#days-chip { cursor: default; }
#days-chip .i-lock { display: none; }
body.is-locked #days-chip {
  cursor: pointer; color: var(--gold-hi); border-color: var(--gold); background: rgba(48, 36, 10, .7);
  animation: chip-pulse 2.2s ease-in-out infinite;
}
body.is-locked #days-chip .i-lock { display: block; }
body.is-locked #days-chip .i-clock { display: none; }
@keyframes chip-pulse { 50% { box-shadow: 0 0 18px rgba(200, 170, 110, .6); } }

.btn-lock { display: none; }
.log-btn.is-locked {
  filter: none; box-shadow: none;
  background: repeating-linear-gradient(-45deg, #161c2b 0 10px, #10151f 10px 20px) padding-box, linear-gradient(var(--gold-mid), var(--gold-dark)) border-box;
}
.log-btn.is-locked img { opacity: .3; filter: grayscale(1); }
.log-btn.is-locked .log-text b { color: var(--muted); }
.log-btn.is-locked .log-text small { color: var(--gold); }
.log-btn.is-locked .btn-lock {
  display: grid; place-items: center; position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border-radius: 50%;
  background: #2a2210; border: 1px solid var(--gold); color: var(--gold-hi); box-shadow: 0 0 10px rgba(200, 170, 110, .4);
}
.btn-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; }

@media (max-width: 640px) {
  .season-lock { inset: -6px -16px -10px; }
  .lock-card { padding: 12px 14px 16px; margin-top: 34px; }
  .padlock { width: 70px; height: 82px; margin-top: -50px; }
  .lock-title { font-size: 21px; }
  .countdown { gap: 6px; margin: 12px 0 10px; }
  .countdown span { width: 58px; padding: 7px 0 6px; }
  .countdown b { font-size: 23px; }
  .countdown small { font-size: 9.5px; }
  .lock-sub { font-size: 13px; }
  .log-btn.is-locked { padding-right: 40px; }
  .log-btn.is-locked .btn-lock { top: 50%; margin-top: -13px; right: 8px; }
}