/* ─────────────────────────────────────────────────────────────────────────────
   The visual pass.

   Everything before this was correct — it matched the Android app token for token.
   Correct is not the same as considered, and the difference between the two is what
   people mean when they say an app "feels expensive". Four things do the work here:

     1. a display typeface, so headings and numbers stop reading as system default
     2. depth — layered light on cards instead of flat fills with hairline borders
     3. an ambient background, so the screen has atmosphere rather than a colour
     4. a wider type scale, so hierarchy is felt before it is read

   Loaded last, so it refines the ported layout rather than replacing it.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --font-display: "Space Grotesk", "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;

  /* Real elevation. A single hairline border reads as a wireframe; light needs a
     direction, a falloff, and a highlight where it lands. */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ── Type ──────────────────────────────────────────────────────────────────── */

.auth-title, .boot-title, .hub-next-title, .sub-title, .rm-head-title, .rm-title,
.show-name, .pf-name, .victory-title, .stat-value, .pf-metric-value, .pf-streak-num,
.lb-name, .lb-stars, .lb-place, .hub-welcome-name, .cs-entry-title, .pj-name,
.topic-title, .track-name, .drawer-title, .daily-title, .list-title, .show-count strong,
.soon-title, .settings-title, .level-num, .game-top-level, .boot-sub {
  font-family: var(--font-display);
  letter-spacing: -0.015em;   /* display faces need slightly tighter tracking at size */
}

/* Numerals should line up in columns wherever they are compared. */
.stat-value, .pf-metric-value, .lb-stars, .lb-levels, .lb-place, .show-count,
.rm-progress, .hub-progress-label, .pf-streak-num, .vs-total, .vs-online {
  font-variant-numeric: tabular-nums;
}

.auth-title { letter-spacing: -0.02em; font-weight: 700; }
.hub-next-title { letter-spacing: -0.03em; font-weight: 700; }
.victory-title { letter-spacing: 0.02em; font-weight: 700; }

/* Eyebrows carry the hierarchy when headings are quiet, so they get real tracking. */
.card-eyebrow, .hub-section-label, .hub-welcome-label, .hub-next-eyebrow,
.daily-eyebrow, .rm-head-tag, .rm-tag, .show-theme, .map-theme, .cs-section-name {
  font-family: var(--font-display);
  letter-spacing: 0.12em;
}

/* The editor's own rule in juice.css already reads --font-mono, and must keep owning it:
   the highlight layer and the textarea have to resolve to one identical family. */
code, pre, .cs-code, .hint-sql, .data-table,
.col-chip, .table-name, .table-tab, .pj-dataset-url {
  font-family: var(--font-mono);
}

/* ── Atmosphere ────────────────────────────────────────────────────────────── */

/* Two soft colour fields behind everything. Fixed, so content scrolls over the light
   rather than dragging it along — that parallax is most of the depth. */
#app::before {
  content: "";
  position: fixed;
  inset: -20% -20% auto -20%;
  height: 70vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(48% 40% at 22% 8%, rgba(134, 93, 255, 0.20), transparent 70%),
    radial-gradient(42% 36% at 82% 0%, rgba(0, 210, 252, 0.10), transparent 70%);
  filter: blur(24px);
}

#app > .screen { position: relative; z-index: 1; }

/* ── Depth on cards ────────────────────────────────────────────────────────── */

.hub-next, .daily-card, .list-row, .rm-card, .track-card, .topic, .cs-entry, .pj-card,
.pj-block, .show-card, .settings-card, .signin-card, .pf-hero, .pf-metrics, .stat-tile,
.chapter, .lb-row, .objective-card, .schema-card, .editor-card, .blocks-card,
.result-card, .rm-section-card, .auth-card, .soon-card, .victory, .pf-streak {
  box-shadow: var(--shadow-card), var(--edge-light);
}

.victory, .cheat-drawer { box-shadow: var(--shadow-lift), var(--edge-light); }

/* A card the eye should land on first gets a warmer surface than the ones around it. */
.hub-next {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  border-color: rgba(255, 255, 255, 0.10);
}

.hub-header {
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(134, 93, 255, 0.28), transparent 65%),
    linear-gradient(180deg, #1B124C, #0F0B26);
  box-shadow: 0 20px 50px -30px rgba(134, 93, 255, 0.7);
}

/* ── The primary button ────────────────────────────────────────────────────── */

/* A flat fill reads as a coloured rectangle. A gradient plus a lit top edge and a
   coloured shadow reads as a physical thing you can press. */
.hub-cta, .btn-run, .auth-submit:not(.is-signup), .boot-retry {
  background: linear-gradient(180deg, #DDFF4A, var(--neon-lime) 55%, #A9D400);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 8px 20px -8px rgba(205, 255, 0, 0.55);
}
.signin-btn, .auth-submit.is-signup, .nav-fab {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 10px 24px -10px rgba(134, 93, 255, 0.8);
}

.hub-cta:active, .btn-run:active { box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset; }

/* ── Nav ───────────────────────────────────────────────────────────────────── */

.hub-nav-bar {
  background: rgba(13, 9, 27, 0.82);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 -2px 30px -8px rgba(0, 0, 0, 0.9), var(--edge-light);
}
.nav-item.active svg { filter: drop-shadow(0 0 8px rgba(134, 93, 255, 0.9)); }

/* ── SQL blocks: the thing you touch most ──────────────────────────────────── */

.block {
  background: linear-gradient(180deg, rgba(134, 93, 255, 0.18), rgba(134, 93, 255, 0.07));
  border-color: rgba(134, 93, 255, 0.35);
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.6), var(--edge-light);
}
.block:active {
  background: linear-gradient(180deg, rgba(134, 93, 255, 0.34), rgba(134, 93, 255, 0.16));
  border-color: rgba(134, 93, 255, 0.6);
}

/* ── Progress bars ─────────────────────────────────────────────────────────── */

.hub-progress, .pf-metric-bar, .rm-bar, .pj-bar {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.hub-progress-fill:not(.accent):not(.accent-card) {
  background: linear-gradient(90deg, var(--success-green), var(--neon-lime));
  box-shadow: 0 0 12px rgba(205, 255, 0, 0.45);
}

/* ── Result table ──────────────────────────────────────────────────────────── */

.data-table th {
  position: sticky;
  top: 0;
  background: #0F0C1E;
  border-bottom-color: rgba(0, 210, 252, 0.3);
}
.data-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }

/* ── Boot ──────────────────────────────────────────────────────────────────── */

.boot-title {
  background: linear-gradient(180deg, #fff, #9C8CFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-title {
  background: linear-gradient(180deg, #fff 40%, #B9A9FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Screen entrance ───────────────────────────────────────────────────────── */

/* Content rises very slightly as a screen settles. Four pixels — enough to register as
   motion, not enough to notice as an animation. */
@keyframes content-rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.screen.settled .hub-scroll > *,
.screen.settled .sub-screen > * {
  animation: content-rise 320ms var(--ease-standard) both;
}

@media (prefers-reduced-motion: reduce) {
  .screen.settled .hub-scroll > *,
  .screen.settled .sub-screen > * { animation: none; }
}

/* ── Google sign-in button (Supabase flow) ─────────────────────────────────── */
.google-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 46px; border-radius: 999px;
  font-family: var(--font-display); font-size: 13.5px; font-weight: 600;
  color: #1F1F1F; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -12px rgba(0, 0, 0, 0.8);
}
.google-btn:disabled { opacity: 0.65; }
.google-btn svg { flex: none; }