:root {
  --ground: #0A0D16;
  --surface: #121728;
  --surface-2: #1A2138;
  --line: #262E4A;
  --text: #F3F5FF;
  --muted: #8A92B2;
  --lime: #C8FF3D;
  --magenta: #FF3DC6;
  --cyan: #3DF0FF;
  --orange: #FFB43D;
  --ink-on-fx: #0A0D16;
  --fx: var(--lime);
  --radius: 18px;
  --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { color-scheme: dark; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.1; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(24px, 6.5vw, 32px); font-weight: 700; }
h2 { font-size: 20px; font-weight: 600; }
p { margin: 0; }
button, input, select, label { font: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.label.fx { color: var(--fx); }

.glow { position: fixed; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: 0.18; pointer-events: none; z-index: 0; }
.glow-a { background: var(--lime); top: -30vmax; left: -20vmax; }
.glow-b { background: var(--magenta); bottom: -30vmax; right: -20vmax; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

.app { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding: 16px 16px 24px; padding-top: max(16px, env(safe-area-inset-top)); display: grid; gap: 16px; min-height: 100dvh; grid-template-rows: auto 1fr auto; }

.hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pips { display: flex; gap: 5px; flex: 1; }
.pips i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.pips i.done { background: var(--lime); }
.pips i.price { border-radius: 3px; }
.pips i.price.done { background: var(--cyan); }
.pips i.now { background: var(--surface-2); outline: 2px solid var(--lime); outline-offset: -1px; animation: pulse 1.2s ease-in-out infinite; }
.pips i.price.now { outline-color: var(--cyan); }
.pts { font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--lime); display: flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; }
.pts small { font-size: 10px; letter-spacing: 0.14em; color: var(--muted); font-family: var(--font-body); }

.screen { display: grid; gap: 16px; align-content: start; animation: rise 320ms ease-out; }
.stack { display: grid; gap: 10px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.btn {
  appearance: none; border: 0; cursor: pointer; font-weight: 700; font-size: 16px;
  display: inline-block; text-align: center; text-decoration: none;
  padding: 15px 20px; border-radius: 14px; width: 100%;
  background: var(--fx); color: var(--ink-on-fx);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--fx) 0%, transparent);
  transition: transform 120ms ease, box-shadow 200ms ease, opacity 150ms ease;
}
.btn:hover { box-shadow: 0 0 28px -4px var(--fx); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line); }
.btn.ghost:hover { border-color: var(--fx); box-shadow: none; }
.btn.link { background: transparent; color: var(--muted); padding: 8px; width: auto; font-weight: 600; justify-self: center; }
.btn.link:hover { box-shadow: none; color: var(--text); }
.btn.small { padding: 10px 14px; font-size: 14px; width: auto; border-radius: 10px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 10px; }
.card.fx { border-color: color-mix(in srgb, var(--fx) 50%, var(--line)); box-shadow: 0 0 40px -18px var(--fx); }

/* Project card */
.pcard {
  appearance: none; text-align: left; padding: 0; width: 100%; cursor: pointer; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: grid; transition: transform 160ms ease, border-color 160ms ease, box-shadow 200ms ease, opacity 200ms ease, filter 200ms ease;
}
.pcard:hover { border-color: var(--lime); }
.pcard:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.pcard img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-2); }
.pcard .body { padding: 12px 14px 14px; display: grid; gap: 5px; }
.pcard .name { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.pcard .meta { color: var(--muted); font-size: 13px; }
.pcard .price { font-family: var(--font-mono); color: var(--cyan); font-size: 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text); }
.pcard.win { border-color: var(--lime); box-shadow: 0 0 40px -10px var(--lime); transform: scale(1.02); }
.pcard.lose { opacity: 0.35; filter: saturate(0.3); transform: scale(0.97); }
.pcard.static { cursor: default; }
.pcard.static:hover { border-color: var(--line); }

.duel { display: grid; gap: 10px; position: relative; }
.vs { justify-self: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.2em; color: var(--muted); padding: 2px 0; }

/* Duel entrance: card A from the left, card B from the right, collide, then glow alternately until picked. */
.pcard.enter-l { animation: fromLeft 620ms cubic-bezier(0.2, 0.9, 0.3, 1.12) both; }
.pcard.enter-r { animation: fromRight 620ms cubic-bezier(0.2, 0.9, 0.3, 1.12) both; }
.duel.collide { animation: shake 340ms ease-out; }
.duel.collide .vs { animation: vsflash 520ms ease-out; }
.pcard.idle { animation: glowAlt 1.8s ease-in-out infinite; }
.pcard.idle.b { animation-delay: 0.9s; }
@keyframes fromLeft { from { transform: translateX(-115%); opacity: 0.3; } to { transform: none; opacity: 1; } }
@keyframes fromRight { from { transform: translateX(115%); opacity: 0.3; } to { transform: none; opacity: 1; } }
@keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-3px); } 100% { transform: none; } }
@keyframes vsflash { 0% { transform: scale(1); } 40% { transform: scale(1.9); color: var(--lime); text-shadow: 0 0 24px var(--lime); } 100% { transform: scale(1); } }
@keyframes glowAlt { 0%, 100% { border-color: var(--line); box-shadow: none; } 50% { border-color: var(--lime); box-shadow: 0 0 36px -6px var(--lime); } }

/* Stage-complete cheer */
.cheer { position: fixed; inset: 0; z-index: 7; display: grid; place-content: center; text-align: center; padding: 24px; pointer-events: none; background: rgba(10, 13, 22, 0.55); animation: cheerbg 2800ms ease forwards; }
.cheer b { display: block; font-family: var(--font-display); font-size: clamp(30px, 9vw, 46px); font-weight: 700; color: var(--lime); text-shadow: 0 0 40px currentColor; animation: cheer 2800ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
.cheer small { display: block; margin-top: 8px; font-weight: 600; font-size: 15px; color: var(--text); animation: cheer 2800ms ease forwards; }
@keyframes cheer { 0% { opacity: 0; transform: scale(0.6) translateY(24px); } 10% { opacity: 1; transform: scale(1.06) translateY(0); } 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12) translateY(-30px); } }
@keyframes cheerbg { 0% { opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }

.pop { position: fixed; z-index: 6; font-family: var(--font-mono); font-weight: 700; font-size: 22px; color: var(--lime); pointer-events: none; animation: popup 900ms ease-out forwards; text-shadow: 0 0 18px var(--lime); }

/* Price shot */
.guess { display: grid; gap: 14px; --fx: var(--cyan); }
.guess .big { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--cyan); font-variant-numeric: tabular-nums; text-align: center; }
.guess input[type=range] { width: 100%; accent-color: var(--cyan); height: 32px; }
.guess .ends { display: flex; justify-content: space-between; }
.reveal { --fx: var(--cyan); }
.reveal .earn { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--cyan); }
.badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--fx); color: var(--ink-on-fx); }

/* Reveal */
.type { text-align: center; padding: 26px 18px; display: grid; gap: 8px; --fx: var(--magenta); }
.type h1 { color: var(--fx); text-shadow: 0 0 30px color-mix(in srgb, var(--fx) 60%, transparent); font-size: clamp(28px, 8vw, 38px); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.stat b { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--text); }
.stat.fx b { color: var(--fx); }
.claim { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

/* Studio */
.studio-grid { display: grid; gap: 14px; }
.cardwrap { position: relative; width: 100%; max-width: 320px; margin: 0 auto; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; background: var(--surface); }
#cardcv { width: 100%; height: auto; display: block; transition: filter 400ms ease; }
.cardwrap.veiled #cardcv { filter: blur(18px) brightness(0.45) saturate(0.7); transform: scale(1.06); }
.cardveil { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 28px; }
.cardwrap.veiled .cardveil { display: grid; }
.cardveil p { font-weight: 600; font-size: 15px; line-height: 1.45; text-wrap: balance; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.ring { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(243, 245, 255, 0.18); border-top-color: var(--fx); display: none; }
.cardwrap.busy .ring { display: block; animation: spin 900ms linear infinite; }
.cardwrap.busy { animation: busy 1.4s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes busy { 0%, 100% { border-color: var(--line); box-shadow: none; } 50% { border-color: var(--fx); box-shadow: 0 0 40px -8px var(--fx); } }
.consent { --fx: var(--orange); border: 1.5px solid var(--orange); border-radius: 14px; padding: 14px; display: grid; gap: 10px; background: color-mix(in srgb, var(--orange) 6%, var(--surface)); }
.file-btn { display: block; text-align: center; }

/* Forms */
form { display: grid; gap: 12px; }
label.field { display: grid; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 600; }
input:not([type=range]), select { width: 100%; color: var(--text); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; font-size: 16px; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; border-color: var(--lime); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 380px) { .grid2 { grid-template-columns: 1fr; } }

/* Leaderboard */
.board { display: grid; gap: 6px; }
.board .rowl { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.board .rowl.me { border-color: var(--lime); box-shadow: 0 0 24px -12px var(--lime); }
.board .rank { font-family: var(--font-mono); color: var(--muted); width: 28px; height: 28px; border-radius: 50%; display: grid; place-content: center; font-weight: 700; font-size: 13px; }
.board .rank.gold { background: #F5C842; color: #2A1F00; box-shadow: 0 0 16px -2px #F5C842; }
.board .rank.silver { background: #CBD3E1; color: #1A2030; }
.board .rank.bronze { background: #D68B4E; color: #2A1400; }
.linkrow { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 12px 14px; }
.linkrow .label { grid-column: 1 / -1; }
.linkrow .linka { font-family: var(--font-mono); font-size: 14px; color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.linkrow .linka:hover { color: var(--text); }
.chip { appearance: none; cursor: pointer; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; background: var(--surface); color: var(--muted); border: 1.5px solid var(--line); }
.chip.on { background: var(--fx); color: var(--ink-on-fx); border-color: var(--fx); }
.chip:disabled { opacity: 0.5; cursor: default; }
.chip:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.share-grid .btn { padding: 13px 12px; font-size: 15px; }
.board .score { font-family: var(--font-mono); font-weight: 700; color: var(--lime); }
.board .who small { display: block; color: var(--muted); font-size: 11px; }

.steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.steps b { color: var(--text); }
.challenge { --fx: var(--orange); border-left: 3px solid var(--orange); padding: 10px 14px; background: var(--surface); border-radius: 0 12px 12px 0; }
.foot { display: grid; gap: 2px; color: var(--muted); font-size: 11px; text-align: center; padding-bottom: env(safe-area-inset-bottom); }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes popup { 0% { opacity: 0; transform: translate(-50%, 0) scale(0.8); } 20% { opacity: 1; transform: translate(-50%, -14px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}