:root {
  --ink: #f5f0ff;
  --muted: #b3a6dc;
  --faint: rgba(245, 240, 255, 0.5);
  --glass: rgba(30, 20, 70, 0.52);
  --glass-hi: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.13);
  --gold: #ffd27a;
  --pink: #ff9ad5;
  --violet: #b590ff;
  --cyan: #8fe6ff;
  --danger: #ff6c9a;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0824;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body { position: fixed; inset: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.info-links { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 24px; margin-top: 4px; }
.info-links a, .info-links button { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 11px; text-decoration: none; }
.info-links a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Present to screen readers and the keyboard, not drawn. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

#sky { position: fixed; inset: 0; z-index: 0; }

#app {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  touch-action: none;
  padding: calc(var(--sat) + 8px) calc(var(--sar) + 12px) calc(var(--sab) + 8px) calc(var(--sal) + 12px);
}
/* #app takes focus only so keys reach the game. Focus moves there by script
   after a tap too, and a ring around the whole screen would mark nothing. */
#app:focus { outline: none; }

/* ------------------------------------------------------------------ HUD */

#hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  min-height: 64px;
}

.hud-left { justify-self: start; display: flex; gap: 8px; }
.icon-btn {
  justify-self: start;
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.icon-btn svg { width: 20px; height: 20px; fill: var(--ink); }
.icon-btn:active { transform: scale(0.94); }

#scoreBox { text-align: center; line-height: 1; }
#mode {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
#score {
  font-size: 40px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-shadow: 0 0 18px rgba(190, 150, 255, 0.55), 0 2px 0 rgba(20, 10, 50, 0.5);
}
#score.bump { animation: bump 0.32s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.12); } 100% { transform: scale(1); } }
#holes {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px 0 8px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.3s;
}
#holes.none { opacity: 0.45; }
#holes canvas { width: 26px; height: 26px; display: block; }
#holes.bump { animation: bump 0.4s ease-out; }
#best { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }


/* ---------------------------------------------------------------- stage */

/* The HUD, the jar and the strip stay together as one group. On a tall
   phone the spare height goes mostly above it, so the group sits low, where
   a thumb reaches it. */
#app::before { content: ""; flex: 3 1 0; }
#app::after { content: ""; flex: 1 1 0; }
#play {
  flex: none;
  display: grid;
  place-items: center;
  margin-top: 6px;
}
#stage { cursor: crosshair; }
#stage { position: relative; }
#stage canvas { position: absolute; left: 0; top: 0; display: block; }
#jarFront { pointer-events: none; }
/* The jar shows where keyboard focus is when the hidden aim or drop control has it. */
#play:has(.sr-only :focus-visible) #stage { outline: 2px solid var(--cyan); outline-offset: 6px; border-radius: 4px; }

#chain {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  margin: 2px auto 0;
  border-radius: 999px;
  background: rgba(20, 12, 50, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.07);
  max-width: 100%;
}
#chain canvas { display: block; transition: opacity 0.3s, filter 0.3s, transform 0.3s; }
#chain canvas.locked { opacity: 0.22; filter: grayscale(1) brightness(0.8); }
#chain canvas.pulse { animation: chainPulse 0.9s ease-out; }
@keyframes chainPulse { 0% { transform: scale(1); } 30% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* -------------------------------------------------------------- overlays */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);
  background: radial-gradient(ellipse at 50% 40%, rgba(20, 10, 50, 0.35), rgba(6, 4, 20, 0.72));
  animation: fadeIn 0.28s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.card {
  width: min(380px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 26px 24px 22px;
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(180deg, rgba(48, 32, 104, 0.72), rgba(24, 14, 60, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  animation: rise 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.2);
}
@keyframes rise { from { transform: translateY(18px) scale(0.97); opacity: 0; } to { transform: none; opacity: 1; } }

h1, h2 { margin: 0; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 26px; margin-bottom: 14px; }

.title-card { padding-top: 14px; }
#logoOrb { width: 128px; height: 128px; display: block; margin: 0 auto -4px; }
#logoWord {
  font-size: 54px;
  line-height: 1;
  background: linear-gradient(100deg, #ffe2a0 0%, #ff9ad5 45%, #b590ff 75%, #8fe6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(181, 144, 255, 0.45));
  margin-bottom: 22px;
}

.buttons { display: grid; gap: 10px; }
.btn {
  min-height: 52px;
  padding: 10px 18px;
  border-radius: 18px;
  font-size: 18px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  transition: transform 0.12s, background 0.2s;
}
.btn small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.btn:active { transform: scale(0.97); }
.btn.primary {
  color: #1d0f3a;
  background: linear-gradient(100deg, #ffe2a0, #ffa6d6 55%, #c3a2ff);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 30px rgba(255, 150, 210, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); font-size: 16px; min-height: 40px; }
.btn.danger { color: #ff9bb8; background: rgba(255, 108, 154, 0.12); border-color: rgba(255, 108, 154, 0.32); }

.confirm-card h2 { margin-bottom: 18px; }
.help-card h2 { margin-bottom: 4px; }
.rules { list-style: none; counter-reset: rule; margin: 14px 0 22px; padding: 0; display: grid; gap: 10px; text-align: left; }
.rules li { counter-increment: rule; display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 650; line-height: 1.35; }
.rules li::before {
  content: counter(rule); flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; font-weight: 800; color: #d8c1ff;
  background: rgba(181, 144, 255, 0.14); border: 1px solid rgba(181, 144, 255, 0.3);
}

.home-best { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: -14px 0 18px; }
.home-best span { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.home-best strong { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }

.toggles { display: flex; justify-content: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toggle[aria-pressed="true"] { color: var(--ink); background: rgba(181, 144, 255, 0.22); border-color: rgba(181, 144, 255, 0.5); }


.over-card h2 { margin-bottom: 6px; }
.ribbon {
  display: inline-block;
  margin: 4px auto 0;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1d0f3a;
  background: linear-gradient(100deg, #ffe2a0, #ffa6d6);
}
.big-score {
  font-size: 64px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-top: 6px;
  text-shadow: 0 0 26px rgba(190, 150, 255, 0.6);
}
.sub { color: var(--muted); font-size: 14px; font-weight: 600; margin-top: 4px; }
.reached {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 16px auto 6px;
  padding: 10px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  width: fit-content;
}
.reached canvas { width: 52px; height: 52px; }
.reached-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: left; }
.reached-name { font-size: 20px; font-weight: 800; text-align: left; }
.over-card .buttons { margin-top: 16px; }

.stats-holes {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
}
.stats-holes canvas { width: 56px; height: 56px; flex: none; }
.stats-pair { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 18px; text-align: left; }
.stats-pair > div { min-width: 0; max-width: 100%; }
.stat-big { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; overflow-wrap: anywhere; }
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stats-list { margin: 14px 0 18px; display: grid; gap: 2px; }
.stats-list > div { display: flex; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.stats-list dt { color: var(--muted); font-size: 14px; font-weight: 600; }
.stats-list dd { margin: 0; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- toast */

.toast {
  position: fixed;
  z-index: 5;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  width: min(360px, calc(100% - 32px));
  display: flex; gap: 12px; align-items: center;
  padding: 12px 16px 12px 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(56, 36, 120, 0.86), rgba(30, 18, 72, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: none;
  animation: toastIn 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.25);
}
.toast.out { animation: toastOut 0.4s ease-in forwards; }
@keyframes toastIn { from { transform: translate(-50%, -24px) scale(0.95); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes toastOut { to { transform: translate(-50%, -16px); opacity: 0; } }
.toast canvas { width: 52px; height: 52px; flex: none; }
.toast-kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.toast-name { font-size: 19px; font-weight: 800; margin-top: 1px; }
.toast-fact { font-size: 13px; color: var(--muted); line-height: 1.35; margin-top: 2px; }

.hint {
  position: fixed;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(30, 20, 70, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
  white-space: nowrap;
  animation: hintPulse 2.4s ease-in-out infinite;
  transition: opacity 0.35s;
}
.hint.gone { opacity: 0; }
@keyframes hintPulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

#flash {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(255, 245, 220, 0.95), rgba(200, 140, 255, 0.4) 40%, rgba(0, 0, 0, 0) 75%);
  opacity: 0;
}
#flash.go { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }

/* Short screens: tighten the HUD so the jar keeps its size. */
@media (max-height: 640px) {
  #hud { min-height: 54px; }
  #score { font-size: 32px; }
}
/* A phone on its side: the pause card's four buttons sit in two columns so
   the card fits without scrolling. */
@media (max-height: 480px) and (min-width: 560px) {
  #pause .buttons { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .overlay, .toast, .toast.out { animation: none; }
  #score.bump, #holes.bump, #chain canvas.pulse, .hint { animation: none; }
  .btn:active, .icon-btn:active { transform: none; }
  #flash.go { animation-name: flashSoft; }
}
@keyframes flashSoft { 0% { opacity: 0; } 8% { opacity: 0.35; } 100% { opacity: 0; } }

/* Narrow phones: two HUD buttons, the score and the black-hole count still fit. */
@media (max-width: 360px) {
  .hud-left { gap: 6px; }
  .icon-btn { width: 40px; height: 40px; }
  #holes { padding: 0 9px 0 6px; }
}

/* My Jar is a quiet full-screen journal, with one navigation level. */
.home-jar-link { display:flex;align-items:center;gap:12px;text-align:left;min-height:74px;padding:12px 15px;border:1px solid #d4baff2b;border-radius:19px;background:linear-gradient(110deg,#c4a2ff12,#80cfff09); }
.home-jar-icon { width:38px;height:40px;flex:none;display:grid;place-items:center;font-size:34px;font-weight:300;color:#d8c1ff; }
.home-jar-icon svg { width:38px;height:40px;overflow:visible; }
.home-jar-link strong { display:block;font-size:16px;font-weight:650; }
.home-jar-link small { display:block;font-size:11px;font-weight:450;color:var(--muted);margin-top:4px; }
.home-jar-arrow { margin-left:auto;color:var(--muted);font-size:21px; }
.home-records { min-height:32px!important;font-size:12px!important; }
.journal-screen { position:fixed;inset:0;z-index:20;overflow:auto;overscroll-behavior:contain;background:linear-gradient(155deg,#0d0c20f7,#100b20fc 60%,#171027fc);padding:calc(var(--sat) + 24px) calc(var(--sar) + 22px) calc(var(--sab) + 26px) calc(var(--sal) + 22px);animation:fadeIn .25s ease-out; }
.journal-shell { max-width:760px;margin:0 auto; }
.journal-header { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 24px; }
.eyebrow { display:block;font:500 9px/1.5 var(--font);letter-spacing:2px;text-transform:uppercase;color:#b8a8d4; }
.journal-header h1 { font-size:36px;letter-spacing:-1.3px;font-weight:600;margin:5px 0 6px; }
.journal-header p { font-size:11px;color:#9e94b8;margin:0; }
.journal-close { flex-shrink:0;width:44px;height:44px;border:1px solid #ffffff14;border-radius:50%;font-size:27px;line-height:1;color:#c9bfdf;background:#ffffff05; }
.journal-tabs { display:flex;gap:4px;padding:4px;background:#ffffff05;border:1px solid #ffffff0c;border-radius:16px;margin-bottom:24px; }
.journal-tabs button { flex:1;min-width:0;min-height:42px;padding:8px;font-size:13px;font-weight:550;color:#a79bbf;border-radius:12px; }
.journal-tabs button[aria-selected=true] { color:#f4eaff;background:#b697ee1a;box-shadow:inset 0 0 0 1px #d3baff1a; }
.journal-content { padding-bottom:12px; }
.jar-look { position:relative;isolation:isolate;border-radius:26px;overflow:hidden;border:1px solid #ffffff15;background:#161128;height:305px; }
#skyMap { width:100%;height:100%;display:block; }
.sky-map { height:440px; }
.map-head { display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:0 2px 14px; }
.map-head h2 { font-size:25px;font-weight:550;letter-spacing:-.5px;margin:4px 0 0; }
.map-head .eyebrow { font-size:8px;letter-spacing:1.2px;color:var(--sky-accent); }
.map-status { flex-shrink:0;margin-bottom:3px;background:#ffffff08;border:1px solid #ffffff1c;border-radius:20px;padding:7px 11px;font-size:10px;color:#e4d8f4;font-variant-numeric:tabular-nums; }
.look-badge { position:absolute;top:18px;right:18px;background:#0b0a1c70;border:1px solid #ffffff1c;border-radius:20px;padding:6px 10px;font-size:9px;letter-spacing:.4px;color:#ddd2ee; }
.look-caption { position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px;background:linear-gradient(0deg,#0a081ddd,transparent); }
.look-caption h2 { font-size:27px;font-weight:550;letter-spacing:-.5px;margin:3px 0 0; }
.look-caption .eyebrow { font-size:8px;letter-spacing:1.2px;color:var(--sky-accent); }
.journey-heading { display:flex;justify-content:space-between;align-items:center;gap:20px;margin:28px 0 8px; }
.journal-content h3 { font-size:18px;line-height:1.35;font-weight:550;letter-spacing:-.4px;margin:5px 0 0; }
.journal-number { font-size:24px;font-variant-numeric:tabular-nums;text-align:right;color:#e9deff; }
.journal-number small { display:block;font-size:9px;color:#a396b9;letter-spacing:.5px; }
.section-note { margin:10px 0 21px;font-size:12px;line-height:1.7;color:#a99cbd;max-width:360px; }
.sky-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 12px; }
.sky-tile { display:block;text-align:left;min-width:0;border-radius:15px;outline-offset:5px; }
.sky-swatch { aspect-ratio:1.15;position:relative;overflow:hidden;border-radius:15px;background:radial-gradient(ellipse at 20% 20%,#ffffff0b,transparent 70%),linear-gradient(145deg,#0e0a2a,#1d0f3a);box-shadow:inset 0 0 0 1px #ffffff12; }
.sky-tile.chosen .sky-swatch { box-shadow:inset 0 0 0 1.5px var(--star),0 0 20px #c09aff09; }
.sky-name { display:block;font-size:12px;font-weight:550;margin:9px 0 3px;white-space:nowrap; }
.sky-status { display:block;font-size:9px;color:#a89bbd; }
.swatch-check { position:absolute;right:8px;top:6px;color:var(--star);font-size:11px; }
.constellation { width:100%;height:100%;overflow:visible; }
.constellation line { stroke:#ffffff10;stroke-width:1; }
.constellation line.lit { stroke:var(--star);stroke-opacity:.6; }
.constellation circle { fill:#fff;fill-opacity:.16; }
.constellation circle.lit { fill:var(--star);fill-opacity:1;filter:drop-shadow(0 0 4px var(--star)); }
.tiny-track { display:block;height:2px;background:#ffffff0d;margin-top:8px;border-radius:3px;overflow:hidden; }
.tiny-track i { display:block;height:100%;background:var(--star,#c5a3ef);border-radius:3px; }
.journal-footnote { color:#877b9e;font-size:11px;line-height:1.7;text-align:center;margin:27px auto 0;max-width:310px; }
.milestone-intro,.daily-intro { display:flex;gap:18px;align-items:center;margin:8px 0 28px; }
.medal-emblem { width:72px;height:72px;display:grid;place-items:center;border:1px solid #dbc09530;border-radius:50%;background:radial-gradient(circle,#edcfa51a,transparent 70%); }
.medal-emblem svg { width:32px;height:32px;stroke:#e7cea6;fill:#ebc98715;stroke-width:.8; }
.milestone-intro h2 { font-size:34px;margin:2px 0 4px;font-weight:550;font-variant-numeric:tabular-nums; }
.milestone-intro h2 span { font-size:17px;color:#887a9f; }
.milestone-intro p,.daily-intro p { color:#a698bd;font-size:11px;margin:5px 0 0; }
.section-heading { display:flex;justify-content:space-between;align-items:center;gap:12px;margin:24px 0 14px; }
.section-heading h3 { font-size:16px; }
.milestone-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.milestone { position:relative;display:flex;flex-direction:column;min-width:0;padding:17px 14px 14px;min-height:179px;border:1px solid #ffffff0c;background:#ffffff02;border-radius:19px; }
.milestone.earned { border-color:#c6a8ef24;background:linear-gradient(135deg,#cfb5ff08,#ffffff02); }
.milestone-symbol { position:relative;width:44px;height:44px;margin-bottom:12px;color:#7d6d92; }
.milestone-symbol canvas { width:44px;height:44px;filter:grayscale(1);opacity:.3; }
.earned .milestone-symbol canvas { filter:none;opacity:1; }
.milestone-symbol>svg { width:28px;height:28px;margin:7px;fill:none;stroke:currentColor;stroke-width:1; }
.earned .milestone-symbol>svg { color:#dfc698;filter:drop-shadow(0 0 7px #edc28a38);fill:#edc28a0d; }
.milestone-symbol>span { position:absolute;bottom:-1px;right:-4px;font-size:9px;color:#e4d2fa; }
.milestone h4 { font-size:12px;font-weight:550;margin:0 0 5px;line-height:1.4; }
.milestone p { font-size:10px;line-height:1.55;color:#9e91b2;margin:0 0 15px; }
.milestone-bottom { margin-top:auto; }
.earned-label { font-size:9px;color:#c2abd9; }
.milestone-count { font-size:9px;color:#7c708f;font-variant-numeric:tabular-nums; }
.journal-links { display:flex;flex-direction:column;gap:4px;margin-top:30px;border-top:1px solid #ffffff10; }
.journal-links button { display:flex;justify-content:space-between;align-items:center;min-height:52px;color:#b4a5c9;font-size:13px;text-align:left; }
.daily-intro h2 { font-size:19px;font-weight:550;margin:3px 0 0;letter-spacing:-.4px; }
.stamp-seal { display:grid;place-items:center;width:64px;height:64px;flex-shrink:0;border-radius:50%;border:1px dashed #cbb7e13b;background:#ceb0f905;transform:rotate(-9deg); }
.stamp-seal svg { width:28px;height:28px;fill:none;stroke:#ab97c8;stroke-width:1; }
.stamp-seal.stamped { border-color:#e1c59f80;background:#d8ac6310; }.stamp-seal.stamped svg{fill:#e2bf7e22;stroke:#edcf9c;}
.calendar { padding:16px 12px;border:1px solid #ffffff10;border-radius:23px;background:#ffffff03; }
.calendar-heading { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px; }.calendar-heading h3{font-size:14px;margin:0;letter-spacing:0;}
.calendar-heading button { width:44px;height:44px;font-size:25px;font-weight:300;color:#cab5e7; }.calendar-heading button:disabled{opacity:.15;cursor:default;}
.calendar-week,.calendar-days { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px; }
.calendar-week span { text-align:center;font-size:9px;color:#736781;height:25px; }
.calendar-days button { aspect-ratio:1;min-height:39px;border-radius:12px;position:relative;font-size:12px;font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#d6c9e7; }
.calendar-days button:disabled { color:#4f465f;cursor:default; }.calendar-days .today{box-shadow:inset 0 0 0 1px #c5a2ee37;}.calendar-days .selected{background:#c8a9f11a;box-shadow:inset 0 0 0 1px #ceacef66;}
.calendar-days svg { width:11px;height:11px;fill:#e6c58d;stroke:#e6c58d;stroke-width:.3; }.calendar-days i{width:3px;height:3px;border-radius:50%;background:#9f86bd;}
.calendar-days .has-stamp { color:#efdbb6; }
.daily-record { margin-top:26px; }.daily-record .section-heading h3{font-size:18px;}.record-stamp{display:flex;align-items:center;gap:5px;font-size:9px;color:#e8c895;}.record-stamp svg{width:14px;height:14px;fill:#e8c895;stroke:none;}
.daily-figures { display:flex;gap:14px;justify-content:space-between;margin:21px 0; }.daily-figures>div{min-width:0;}.daily-figures strong{display:block;font-size:20px;font-weight:550;font-variant-numeric:tabular-nums;}.daily-figures span{display:block;font-size:8px;letter-spacing:1px;color:#9685ac;margin-top:6px;}
.daily-jar-preview { width:100%;height:240px;border-radius:20px;display:block;border:1px solid #ffffff0d; }.snapshot-caption{font-size:9px;color:#81728f;text-align:center;margin:9px 0 20px;}.daily-play{width:100%;min-height:48px;font-size:14px;margin-top:18px;}.empty-note{font-size:12px;color:#a89ab8;line-height:1.8;margin:14px 0;}
.planet-guide article { display:flex;align-items:center;gap:18px;margin:0 0 26px; }.planet-guide .guide-note{font-size:13px;color:#cdb7fa;margin:6px 0 10px;}.planet-guide canvas{width:60px;height:60px;flex-shrink:0;}.planet-guide h3{font-size:16px;}.planet-guide p{font-size:12px;color:#aa9bbc;line-height:1.7;margin:6px 0 0;}.planet-guide .unseen{opacity:.4;}
@media(min-width:650px){.journal-screen{padding-top:40px;}.jar-look{height:340px;}.sky-map{height:430px;}.sky-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px;}.sky-swatch{aspect-ratio:1.3;}.milestone-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.calendar{max-width:420px;}.daily-intro{margin-bottom:34px;}.daily-record{max-width:560px;}.journal-header h1{font-size:43px;}}
@media(max-width:360px){.journal-screen{padding-left:16px;padding-right:16px;}.journal-header h1{font-size:32px;}.sky-grid{gap:15px 9px;}.sky-name{font-size:11px;}.look-caption{padding:18px;}.look-caption h2{font-size:24px;}.map-status{padding:6px 9px;}.milestone{padding:14px 12px;}}
@media(prefers-reduced-motion:reduce){.journal-screen{animation:none;}}
.journal-screen { overflow:hidden;background:linear-gradient(155deg,#0d0c20,#100b20 60%,#171027); }
.journal-shell { display:flex;flex-direction:column;height:100%;width:100%; }
.journal-header,.journal-tabs { flex-shrink:0; }
.journal-content { overflow:auto;overscroll-behavior:contain;padding-bottom:28px;scrollbar-width:thin;scrollbar-color:#6f5a8730 transparent; }
.milestone-symbol canvas { border-radius:50%; }

.sky-tile.earned .sky-swatch { background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--star) 16%,transparent),transparent 72%),linear-gradient(145deg,#0e0a2a,#1d0f3a);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--star) 28%,transparent); }
.hole-glyph { width:13px;height:13px;fill:none;stroke:#cdb7fa;stroke-width:1.6; }
.hole-glyph circle:last-child { fill:#07060f;stroke:#f2c27e;stroke-width:1.4; }
.calendar-days .has-hole { color:#e6d6ff; }
.record-stamp.hole { color:#d9c6f7; }.record-stamp.hole svg{width:15px;height:15px;fill:none;stroke:#cdb7fa;}
.daily-figures strong small { font-size:11px;font-weight:450;color:#9685ac;margin-left:3px; }
.ranking { margin:4px 0 22px;padding:16px 16px 12px;border-radius:20px;background:#ffffff05;border:1px solid #ffffff0d; }
.ranking-head { display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-size:10px;color:#9685ac; }
.ranking-list { list-style:none;margin:0;padding:0;display:grid;gap:2px; }
.ranking-list li { display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;min-height:34px;padding:0 10px;border-radius:11px;font-size:13px; }
.ranking-list li:nth-child(-n+3) .rank { color:#efd3a3; }
.ranking-list .rank { font-variant-numeric:tabular-nums;color:#a796bf;font-size:12px; }
.ranking-list .who { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e9e0f6; }
.ranking-list .who em { font-style:normal;font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:#cdb7fa;margin-left:4px; }
.ranking-list .score { font-variant-numeric:tabular-nums;color:#f4eefc; }
.ranking-list li.you { background:#c5a3ef18;box-shadow:inset 0 0 0 1px #c5a3ef33; }
.ranking-list li.gap { min-height:18px;display:block;text-align:center;color:#6f6385;font-size:11px;letter-spacing:2px; }
.ranking-note { font-size:12px;color:#a89ab8;line-height:1.7;margin:4px 2px 6px; }
.ranking-you { display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:12px;font-size:11px;color:#9685ac; }
.ranking-you strong { color:#e4d8f4;font-weight:550; }
.rename { margin-left:auto;font-size:11px;color:#cdb7fa;padding:8px 10px;min-height:36px;border-radius:10px;border:1px solid #c5a3ef33; }
.rename:disabled { opacity:.5; }
.practice-note { font-size:10px;color:#7f7192;text-align:center;margin:10px 0 0; }
.over-rank { display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;margin-top:14px;padding:12px 16px;min-height:48px;border-radius:16px;background:#c5a3ef12;border:1px solid #c5a3ef30;color:#f1e8fb;font-size:14px;font-variant-numeric:tabular-nums; }
.over-rank .over-rank-link { font-size:12px;color:#cdb7fa;white-space:nowrap; }
.over-rank[hidden] { display:none; }

.record-figures { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 30px; }
.record-figure { min-width:0;padding:18px 16px;border:1px solid #e8c8952b;border-radius:18px;background:#e8c89509; }
.record-figure span { display:block;font-size:12px;color:#aa9abd; }
.record-figure strong { display:block;font-size:clamp(27px,6vw,38px);font-weight:550;font-variant-numeric:tabular-nums;margin:7px 0;overflow-wrap:anywhere; }
.record-figure small { font-size:10px;color:#aa9abdb3; }
@media(max-width:400px){.journal-tabs button{font-size:11px;padding:8px 4px;}}

/* -------------------------------------------------------------- desktop */

/* body.desk is set by layout() when desk.js finds room beside the jar. Every
   position comes from the variables placeDesk() writes on <body>: --jx --jy
   --jw --jh (the jar), --lx --rx --cw (the two columns), --rim and --floor
   (heights on the glass), --u (type scale, 1 at 900 px tall), --orb (rung
   size) and --logo (the title planet). Phones never match any of it. */

@font-face {
  font-family: "Starjar Rounded";
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body:not(.desk) .desk-only { display: none !important; }
/* Off the desktop layout the run's column is no box at all: the HUD inside it
   stays a direct part of the phone's stack. */
.run-col { display: contents; }

body.desk {
  /* Apple devices keep SF Pro Rounded; everything else gets the Nunito the
     stack always named, instead of whatever system font it fell back to. */
  --font: ui-rounded, "SF Pro Rounded", "Starjar Rounded", system-ui, sans-serif;
}
body.desk #app { display: block; padding: 0; }
body.desk #app::before, body.desk #app::after { content: none; }
body.desk #play { position: absolute; left: var(--jx); top: var(--jy); margin: 0; }
body.desk #chain { display: none; }

/* The run: a column right-aligned against the jar's left side, from the top
   of the jar's frame down to its floor. The HUD moves into it. */
body.desk .run-col {
  position: absolute;
  left: var(--lx);
  top: var(--jy);
  width: var(--cw);
  height: calc(var(--floor) - var(--jy));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  container-type: inline-size;
}
body.desk[data-screen="title"] .run-col { visibility: hidden; }
body.desk[data-screen="play"] .run-col { animation: deskIn 0.45s cubic-bezier(0.2, 0.9, 0.25, 1); }
@keyframes deskIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
body.desk #hud {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-areas: "buttons buttons buttons" "score score score" "merges chain holes";
  justify-content: end;
  column-gap: min(calc(30px * var(--u)), 6cqw);
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
}
body.desk .hud-left { grid-area: buttons; justify-self: end; gap: calc(8px * var(--u)); margin-bottom: calc(34px * var(--u)); }
body.desk .icon-btn { width: calc(42px * var(--u)); height: calc(42px * var(--u)); border-radius: calc(14px * var(--u)); }
body.desk .icon-btn svg { width: calc(19px * var(--u)); height: calc(19px * var(--u)); }
.icon-btn .stroke { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
#muteBtn[aria-pressed="true"] .mute-off, #muteBtn[aria-pressed="false"] .mute-on { display: none; }
#muteBtn[aria-pressed="false"] svg { opacity: 0.6; }

body.desk #scoreBox { grid-area: score; justify-self: end; text-align: right; }
body.desk #mode[hidden] { display: block !important; visibility: hidden; }
body.desk #mode {
  min-height: 1em;
  font-size: calc(15px * var(--u));
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: calc(6px * var(--u));
}
body.desk #score {
  font-size: min(calc(78px * var(--u)), 21cqw);
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-shadow: 0 0 28px rgba(190, 150, 255, 0.5), 0 3px 0 rgba(20, 10, 50, 0.45);
  transform-origin: 100% 60%;
}
body.desk #best { margin-top: calc(8px * var(--u)); font-size: max(13px, calc(16px * var(--u))); }

/* This jar's figures: number over label, like the score above them. */
body.desk .hud-fig, body.desk #holes {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: calc(3px * var(--u));
  height: auto;
  padding: 0;
  margin-top: calc(30px * var(--u));
  background: none;
  border: 0;
  box-shadow: none;
}
body.desk #figMerges { grid-area: merges; }
body.desk #figChain { grid-area: chain; }
body.desk #holes { grid-area: holes; justify-self: end; grid-template-columns: auto auto; column-gap: calc(5px * var(--u)); align-items: center; }
body.desk #holes canvas { width: calc(24px * var(--u)); height: calc(24px * var(--u)); }
body.desk #holes .fig-label { grid-column: 1 / -1; }
body.desk #holes.none { opacity: 0.5; }
body.desk .hud-fig strong, body.desk #holesCount {
  font-size: calc(30px * var(--u));
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.fig-label { font-size: max(12px, calc(14px * var(--u, 1))); font-weight: 700; color: var(--muted); white-space: nowrap; }

/* Below the figures: today's board (Daily Jar only), the next constellation
   and, for a mouse and keyboard, the keys. */
body.desk .desk-run {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(30px * var(--u));
  padding-top: calc(34px * var(--u));
}
body.desk .desk-keys { margin-top: auto; opacity: 0.8; }
.desk-board { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; text-align: left; }
body.desk .desk-board h2 { font-size: calc(17px * var(--u)); font-weight: 800; letter-spacing: 0; color: var(--ink); margin: 0 0 calc(8px * var(--u)); text-align: left; }
.desk-board-list { list-style: none; margin: 0; padding: 0; flex: 1 1 0; min-height: 0; overflow: hidden; }
.desk-board-list li {
  display: grid;
  grid-template-columns: calc(26px * var(--u)) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(8px * var(--u));
  height: max(28px, calc(33px * var(--u)));
  padding: 0 calc(10px * var(--u));
  margin: 0 calc(-10px * var(--u));
  border-radius: calc(10px * var(--u));
  font-size: max(13px, calc(14.5px * var(--u)));
  font-weight: 700;
}
.desk-board-list li.gap { display: block; height: max(18px, calc(20px * var(--u))); line-height: 1; text-align: center; color: var(--muted); letter-spacing: 3px; }
.desk-board-list .rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.desk-board-list li:nth-child(-n+3) .rank { color: var(--gold); }
.desk-board-list .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e9e0f6; }
.desk-board-list .pts { font-variant-numeric: tabular-nums; }
.desk-board-list li.you { background: rgba(197, 163, 239, 0.14); box-shadow: inset 0 0 0 1px rgba(197, 163, 239, 0.26); }
.desk-board-list li.empty { display: block; height: auto; padding: 0; text-align: right; color: var(--muted); font-weight: 600; }

.desk-sky { display: flex; align-items: center; justify-content: flex-end; gap: calc(14px * var(--u)); }
.desk-sky-text { display: grid; justify-items: end; gap: calc(4px * var(--u)); min-width: calc(140px * var(--u)); }
.desk-sky-text strong { font-size: max(14px, calc(17px * var(--u))); font-weight: 800; }
.desk-sky-text span { font-size: max(12px, calc(13.5px * var(--u))); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.desk-sky-bar { display: block; width: 100%; height: 3px; margin-top: calc(3px * var(--u)); border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.desk-sky-bar b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #b590ff, #ff9ad5 60%, #ffe2a0); transition: width 0.6s; }
.desk-sky-icon:empty { display: none; }
.desk-sky-icon svg { display: block; width: calc(58px * var(--u)); height: calc(61px * var(--u)); overflow: visible; }

.desk-keys { margin: 0; display: grid; gap: calc(9px * var(--u)); justify-items: end; }
.desk-keys div { display: flex; align-items: center; gap: calc(10px * var(--u)); }
.desk-keys dt { display: flex; gap: calc(4px * var(--u)); }
.desk-keys dd { margin: 0; min-width: calc(46px * var(--u)); text-align: left; font-size: max(12px, calc(13px * var(--u))); font-weight: 700; color: var(--muted); }
kbd {
  display: inline-grid;
  place-items: center;
  min-width: calc(26px * var(--u, 1));
  height: calc(26px * var(--u, 1));
  padding: 0 calc(8px * var(--u, 1));
  border-radius: calc(7px * var(--u, 1));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-width: 2px;
  background: rgba(255, 255, 255, 0.05);
  font: 800 calc(11.5px * var(--u, 1))/1 var(--font);
  color: #e8defc;
}
kbd svg { width: calc(11px * var(--u, 1)); height: calc(11px * var(--u, 1)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The planet ladder, right of the jar: one rung per body, biggest at the
   top, spread from the rim to the floor. A track lights up the rungs this
   jar has reached (on the title screen, the ones ever found). */
body.desk .desk-ladder {
  position: fixed;
  z-index: 2;
  left: var(--rx);
  top: var(--ltop);
  width: var(--cw);
  height: var(--lh);
}
.ladder-track {
  position: absolute;
  left: calc(var(--orb) / 2 - 1px);
  top: calc(100% / 22);
  bottom: calc(100% / 22);
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
}
.ladder-track i {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--lit, 0) * 100%);
  border-radius: 2px;
  background: linear-gradient(0deg, #ffe2a0, #ff9ad5 55%, #b590ff);
  box-shadow: 0 0 10px rgba(255, 154, 213, 0.45);
  transition: height 0.6s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.desk-ladder ol { position: relative; list-style: none; margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; }
.desk-ladder li { flex: 1 1 0; min-height: 0; display: flex; }
.rung {
  flex: 1;
  display: flex;
  align-items: center;
  gap: calc(14px * var(--u));
  min-width: 0;
  padding-right: calc(10px * var(--u));
  border-radius: calc(14px * var(--u));
  text-align: left;
  transition: opacity 0.4s, background 0.2s;
}
.rung-orb { position: relative; flex: none; display: grid; place-items: center; width: var(--orb); height: var(--orb); }
.rung-orb canvas { display: block; position: relative; transition: filter 0.4s, opacity 0.4s; }
.rung-name { font-size: max(14px, calc(17px * var(--u))); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.4s, opacity 0.4s; }
/* Three states. In play, what this jar has made is lit, what was found in
   earlier games waits at half strength, and what was never found is an empty
   slot. On the title everything found is lit. */
body:not([data-screen="title"]) .rung:not(.made):not(.locked) .rung-name { opacity: 0.55; }
body:not([data-screen="title"]) .rung:not(.made):not(.locked) canvas { opacity: 0.6; }
/* A body not found yet is an empty slot its size, waiting. */
.rung.locked canvas { visibility: hidden; }
.rung.locked .rung-orb::after {
  content: "";
  position: absolute;
  width: calc(var(--s, 20px) * 0.86);
  height: calc(var(--s, 20px) * 0.86);
  border-radius: 50%;
  border: 1px dashed rgba(220, 205, 255, 0.28);
  background: radial-gradient(circle, rgba(11, 8, 36, 0.9) 55%, rgba(11, 8, 36, 0.6));
}
.rung.locked .rung-name { color: var(--muted); opacity: 0.4; }
.rung.top .rung-name { color: #ffe2a0; }
.rung.top .rung-orb::before {
  content: "";
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 170, 0.3), rgba(255, 154, 213, 0.1) 45%, transparent 70%);
}
.rung.pulse .rung-orb { animation: chainPulse 0.9s ease-out; }
.rung:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.ladder-fact {
  position: fixed;
  z-index: 6;
  padding: calc(12px * var(--u, 1)) calc(14px * var(--u, 1));
  border-radius: calc(16px * var(--u, 1));
  background: linear-gradient(180deg, rgba(56, 36, 120, 0.94), rgba(30, 18, 72, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  pointer-events: none;
  font-size: calc(13px * var(--u, 1));
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted);
  animation: fadeIn 0.16s ease-out;
}
.ladder-fact strong { display: block; margin-bottom: 3px; font-size: calc(15px * var(--u, 1)); font-weight: 800; color: var(--ink); }

/* Title: the brand and menu stand where the run's column will be, the jar
   holds a settled pile, and the ladder shows what has been found. */
body.desk #title { display: block; padding: 0; background: none; pointer-events: none; }
body.desk .title-card {
  position: absolute;
  left: var(--lx);
  top: var(--jy);
  width: var(--cw);
  height: calc(var(--floor) - var(--jy));
  max-height: none;
  overflow: visible;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: auto;
}
body.desk #logoOrb { width: var(--logo); height: var(--logo); margin-bottom: calc(-4px * var(--u)); }
body.desk #logoWord { font-size: min(calc(70px * var(--u)), 25cqw); margin-bottom: calc(26px * var(--u)); }
body.desk .title-card { container-type: inline-size; }
body.desk .home-best { margin: calc(-16px * var(--u)) 0 calc(22px * var(--u)); }
body.desk .home-best span { font-size: calc(15px * var(--u)); font-weight: 700; letter-spacing: 0; text-transform: none; }
body.desk .home-best strong { font-size: calc(17px * var(--u)); }
body.desk .ribbon { padding: 0; background: none; color: var(--gold); font-size: calc(16px * var(--u)); letter-spacing: 0; text-transform: none; }
body.desk .reached { padding: 0; background: none; gap: calc(14px * var(--u)); margin: calc(18px * var(--u)) auto calc(8px * var(--u)); }
body.desk .reached canvas { width: calc(60px * var(--u)); height: calc(60px * var(--u)); }
body.desk .reached-label { font-size: calc(14px * var(--u)); letter-spacing: 0; text-transform: none; }
body.desk .reached-name { font-size: calc(22px * var(--u)); }
body.desk .toast-kicker { font-size: calc(13px * var(--u)); letter-spacing: 0; text-transform: none; }
body.desk .sub { font-size: max(13px, calc(15px * var(--u))); }
body.desk .title-card .buttons { gap: calc(12px * var(--u)); }
body.desk .btn { min-height: calc(54px * var(--u)); font-size: calc(18px * var(--u)); border-radius: calc(18px * var(--u)); }
body.desk .btn small { font-size: calc(12.5px * var(--u)); }
body.desk .btn.ghost { min-height: calc(40px * var(--u)); font-size: calc(16px * var(--u)); }
body.desk .home-jar-link { min-height: calc(74px * var(--u)); gap: calc(12px * var(--u)); padding: calc(12px * var(--u)) calc(15px * var(--u)); border-radius: calc(19px * var(--u)); }
body.desk .home-jar-icon, body.desk .home-jar-icon svg { width: calc(38px * var(--u)); height: calc(40px * var(--u)); }
body.desk .home-jar-icon { font-size: calc(34px * var(--u)); }
body.desk .home-jar-link strong { font-size: calc(18px * var(--u)); }
body.desk .home-jar-link small { font-size: max(12px, calc(12.5px * var(--u))); margin-top: calc(4px * var(--u)); }
body.desk .home-jar-arrow { font-size: calc(21px * var(--u)); }
body.desk .over-rank { min-height: calc(48px * var(--u)); padding: calc(12px * var(--u)) calc(16px * var(--u)); border-radius: calc(16px * var(--u)); font-size: max(14px, calc(15px * var(--u))); }
body.desk .over-rank .over-rank-link { font-size: max(12px, calc(13px * var(--u))); }
body.desk .toggles { margin-top: calc(18px * var(--u)); }
body.desk .toggle { min-height: calc(36px * var(--u)); font-size: calc(13px * var(--u)); }
body.desk .info-links a, body.desk .info-links button { font-size: calc(12px * var(--u)); }

/* Sheets: over the jar, the columns still readable around them. */
body.desk .overlay { background: radial-gradient(ellipse at 50% 45%, rgba(20, 10, 50, 0.3), rgba(6, 4, 20, 0.66)); }
body.desk .card {
  width: min(calc(var(--jw) - 72px), calc(420px * var(--u)));
  padding: calc(30px * var(--u)) calc(28px * var(--u)) calc(24px * var(--u));
  border-radius: calc(30px * var(--u));
  background: linear-gradient(180deg, rgba(46, 31, 100, 0.95), rgba(23, 14, 58, 0.97));
}
body.desk .title-card { width: var(--cw); padding: 0; border-radius: 0; background: none; box-shadow: none; }
body.desk .btn.primary:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.45); outline-offset: 4px; }
body.desk h2 { font-size: calc(28px * var(--u)); }
/* One wide primary action, then the other three side by side, alike. */
body.desk #pause .buttons, body.desk .over-card .buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.desk #resumeBtn, body.desk #againBtn { grid-column: 1 / -1; }
body.desk :is(#restartBtn, #pauseJarBtn, #menuBtn, #shareBtn, #overJarBtn, #overMenuBtn) {
  min-height: calc(50px * var(--u));
  padding: 8px 6px;
  font-size: max(14px, calc(16px * var(--u)));
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
body.desk .big-score { font-size: calc(72px * var(--u)); }
@media not ((hover: hover) and (pointer: fine)) {
  .desk-keys { display: none !important; }
}
/* A desktop with a mouse has nothing to vibrate; a tablet keeps the switch. */
@media (hover: hover) and (pointer: fine) {
  body.desk .toggle[data-key="haptics"] { display: none; }
}

/* A mouse gets hover states everywhere, at any window size. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.22); }
  .btn.primary:hover { background: linear-gradient(100deg, #ffe8b0, #ffb3dd 55%, #cdb0ff); box-shadow: 0 12px 36px rgba(255, 150, 210, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.75); }
  .btn.ghost:hover { background: transparent; border-color: transparent; color: var(--ink); }
  .btn.danger:hover { background: rgba(255, 108, 154, 0.2); }
  .icon-btn:hover { background: rgba(62, 42, 126, 0.62); border-color: rgba(255, 255, 255, 0.22); }
  .toggle:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.22); }
  .home-jar-link:hover { border-color: #d4baff4d; background: linear-gradient(110deg, #c4a2ff1f, #80cfff12); }
  .info-links a:hover, .info-links button:hover { color: var(--ink); }
  .over-rank:hover { background: #c5a3ef1f; }
  .rung:hover { background: rgba(255, 255, 255, 0.05); }
  .journal-tabs button:hover { color: #f4eaff; }
}

@media (prefers-reduced-motion: reduce) {
  .ladder-track i, .rung, .rung-orb canvas, .rung-name { transition: none; }
  .rung.pulse .rung-orb, .ladder-fact, body.desk[data-screen="play"] .run-col { animation: none; }
}