@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("fonts/silkscreen.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}

:root {
  --paper: #f7f9fc;
  --paper-2: #edf1f7;
  --ink: #2d3c53;
  --ink-2: #4f6a87;
  --line: #dde4ee;
  --green: #4cbf57;
  --green-dark: #2a8a34;
  --orange: #e8602c;
  --shell: #bfe6c4;
  --shell-dark: #93c99b;
  --shell-key: #ecf8ee;
  --shell-ink: #3f7a48;
  --ring: #f4a988;
  --lcd: #1e2a3d;
  --lcd-2: #2a3850;
  --lcd-ink: #e8eef6;
  --lcd-dim: #8fa3bd;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-hero: cubic-bezier(0.16, 1, 0.3, 1);
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --pixel: "Silkscreen", ui-monospace, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--shell); color: var(--ink); }
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--green-dark); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-weight: 700; margin: 0; letter-spacing: -0.035em; text-wrap: balance; }
p { text-wrap: pretty; }

/* nav */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px;
  height: 72px; padding: 0 max(24px, 4vw);
  background: color-mix(in oklab, var(--paper) 94%, transparent);
}
.logo { font-family: var(--pixel); font-size: 24px; text-decoration: none; text-transform: uppercase; }
.logo.small { font-size: 16px; }
.tabs { display: flex; gap: 28px; }
.tabs a { text-decoration: none; color: var(--ink-2); font-weight: 500; padding: 6px 0; border-bottom: 1.5px solid transparent; transition: color 160ms ease, border-color 160ms ease; }
.tabs a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }
.pill {
  text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 10px 20px; border-radius: 999px; background: var(--paper-2);
  transition: background 160ms ease, transform 160ms var(--ease-out);
}
.btn {
  font: 600 16px/1 var(--sans); border: 0; cursor: pointer; white-space: nowrap;
  padding: 0 24px; height: 52px; border-radius: 999px; background: var(--ink); color: var(--paper);
  transition: background 160ms ease, transform 160ms var(--ease-out);
}
.btn:focus-visible { outline-color: var(--green); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.pill:active, .btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .tabs a:hover { color: var(--ink); }
  .btn:hover { background: #3a4c68; }
  .pill:hover { background: var(--line); }
}

/* hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px;
  padding: 56px max(24px, 6vw) 72px; max-width: 1360px; margin: 0 auto;
}
.hero h1 { font-size: clamp(42px, 4.6vw, 68px); line-height: 1; }
.lede { font-size: 19px; color: var(--ink-2); max-width: 36ch; margin: 22px 0 32px; }
.hero-timer { display: grid; gap: 4px; margin-bottom: 28px; }
.hero-timer-label { font-size: 15px; color: var(--ink-2); }
.hero-timer-value { font-family: var(--pixel); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-copy > * { animation: rise 800ms var(--ease-hero) both; }
.hero-copy > :nth-child(2) { animation-delay: 60ms; }
.hero-copy > :nth-child(3) { animation-delay: 120ms; }
.hero-copy > :nth-child(4) { animation-delay: 180ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
/* keychain: the device hangs from its ring (52px from the right edge, 54px wide, so its centre sits
   79px from the right and 3px above the top). Rotating around that point puts the body under the ring. */
.hero-device { --w: 360px; display: grid; justify-items: start; min-width: 0; padding: 76px 0 130px; }
.charm { position: relative; width: var(--w); margin-left: calc(50% - var(--w) + 79px);
  /* the shadow is cast in screen space from the hanging silhouette, so it falls down the page, not along the tilt */
  filter: drop-shadow(0 2px 2px rgba(45, 60, 83, 0.16)) drop-shadow(8px 26px 22px rgba(45, 60, 83, 0.26));
}
.charm-body { transform-origin: calc(100% - 79px) -3px; transform: rotate(-30deg); animation: sway 4.5s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-27deg); } to { transform: rotate(-33deg); } }
/* hold still while someone is aiming at the keys */
.charm:hover .charm-body, .charm:focus-within .charm-body { animation-play-state: paused; }
/* the device is turned 30deg, so its own light and depth are turned back to match the page:
   light from the top left of the screen, the plastic edge on the screen's bottom side */
.charm-body .device {
  --lx: -0.08; --ly: -0.97; width: 100%;
  background:
    linear-gradient(calc(180deg + var(--lx) * 20deg), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 42%, rgba(63, 122, 72, 0.08)),
    var(--shell);
  box-shadow: inset 5px -8.7px 0 var(--shell-dark), inset -1px 1.7px 0 rgba(255, 255, 255, 0.6);
}
.charm-body .key { box-shadow: inset 2.5px -4.3px 0 var(--shell-dark), -1px 4px 6px -1px rgba(45, 90, 55, 0.3); }
.charm-body .key:active { box-shadow: inset 1px -1.7px 0 var(--shell-dark), 0 1px 2px rgba(45, 90, 55, 0.3); }
/* a ball chain looped through the ring: its bottom sits in the ring's hole (the ring's centre is
   79px from the right and 3px above the top), it runs behind the ring's band and up to a clasp */
.charm-chain {
  position: absolute; left: calc(100% - 99px); top: -119px; width: 40px; height: 116px; z-index: -1;
  overflow: visible; transform-origin: 20px 108px; pointer-events: none;
}
.charm-chain-front { z-index: 1; }

/* waitlist */
.waitlist { max-width: 460px; }
.waitlist label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; }
.waitlist-row { display: flex; gap: 8px; }
.waitlist input {
  flex: 1; min-width: 0; height: 52px; padding: 0 20px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font: 400 16px var(--sans); transition: border-color 160ms ease;
}
.waitlist input::placeholder { color: #8396ad; }
.waitlist input:focus { outline: none; border-color: var(--green-dark); }
.waitlist input[aria-invalid="true"] { border-color: var(--orange); }
.waitlist-msg { min-height: 1.5em; margin: 8px 0 0 20px; font-size: 15px; color: var(--ink-2); }
.waitlist-msg.ok { color: var(--green-dark); }
.waitlist-msg.err { color: #b8461c; }

/* device
   Lit like a plastic toy on a desk. --lx/--ly place the light (-1..1, default top-left);
   on desktop app.js moves it with the pointer, so the highlight follows and the shadow falls away. */
.device {
  --lx: -0.55; --ly: -0.8;
  position: relative; width: 440px; max-width: 100%;
  padding: 30px 30px 24px; border-radius: 60px;
  background:
    linear-gradient(calc(150deg + var(--lx) * 20deg), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 42%, rgba(63, 122, 72, 0.08)),
    var(--shell);
  box-shadow:
    inset 0 -10px 0 var(--shell-dark),
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset calc(var(--lx) * -10px) 0 18px -10px rgba(255, 255, 255, 0.45),
    0 2px 3px rgba(45, 60, 83, 0.14),
    calc(var(--lx) * -22px) calc(26px - var(--ly) * 16px) 40px -18px rgba(45, 60, 83, 0.32),
    calc(var(--lx) * -40px) calc(56px - var(--ly) * 24px) 80px -40px rgba(45, 60, 83, 0.28);
}
/* desktop only: the shell turns slightly toward the lamp */
.device.lamp { transform: perspective(1000px) rotateY(calc((var(--lx) + 0.55) * 3deg)) rotateX(calc((var(--ly) + 0.8) * -2.5deg)); }
/* specular spot on the shell, where the light hits */
.device::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at calc(50% + var(--lx) * 42%) calc(50% + var(--ly) * 44%), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 38%);
  mix-blend-mode: soft-light;
}
.device-ring {
  position: absolute; top: -30px; right: 52px; width: 54px; height: 54px;
  border-radius: 50%; border: 12px solid var(--ring);
  box-shadow: inset 2px 3px 0 rgba(255, 255, 255, 0.35), inset -2px -3px 0 rgba(160, 70, 30, 0.2);
  clip-path: inset(0 0 24px 0); /* the rest of the ring is hidden behind the shell */
}
.screen {
  position: relative; border-radius: 30px; overflow: hidden; background: var(--lcd); padding: 12px 14px 14px;
  box-shadow:
    inset 0 0 0 6px var(--lcd-2),
    inset 0 10px 14px -6px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 rgba(63, 122, 72, 0.3);
}
/* glass over the LCD: a soft diagonal reflection that slides with the light */
.screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.07) 42%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(calc(var(--lx) * 14%));
}
.screen.lights-off { box-shadow: inset 0 0 0 6px var(--lcd-2), inset 0 10px 18px -4px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.55), 0 -1px 0 rgba(63, 122, 72, 0.3); }
.lcd-top {
  display: flex; justify-content: space-between; gap: 12px; padding: 4px 8px 10px;
  font-family: var(--pixel); font-size: 14px; color: var(--lcd-dim); text-transform: uppercase;
}
.lcd-top [data-countdown] { color: var(--lcd-ink); font-variant-numeric: tabular-nums; }
.scene-wrap { position: relative; }
.scene { display: block; width: 100%; aspect-ratio: 4 / 3; image-rendering: pixelated; border-radius: 12px; }
.bubble {
  position: absolute; left: 50%; top: 10%; margin: 0;
  background: var(--lcd-ink); color: var(--lcd); padding: 7px 12px 8px; border-radius: 8px;
  font: 14px/1.1 var(--pixel); white-space: nowrap; text-transform: uppercase;
  opacity: 0; transform: translate(-50%, 4px) scale(0.96);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
  pointer-events: none;
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px;
  background: inherit; transform: translateX(-50%) rotate(45deg);
}
.bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.controls { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 6px 0; }
.key {
  width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background:
    radial-gradient(circle at calc(50% + var(--lx) * 26%) calc(50% + var(--ly) * 26%), #fff, rgba(255, 255, 255, 0) 55%),
    var(--shell-key);
  box-shadow:
    inset 0 -5px 0 var(--shell-dark),
    calc(var(--lx) * -3px) calc(4px - var(--ly) * 2px) 6px -1px rgba(45, 90, 55, 0.3);
  display: grid; place-items: center; color: var(--ink);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
  touch-action: manipulation;
}
.key svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.key[data-action="feed"] { color: var(--green-dark); }
.key[data-action="love"] { color: var(--orange); }
.key[data-action="sleep"] { color: var(--ink-2); }
.key:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--shell-dark), 0 1px 2px rgba(45, 90, 55, 0.3); }
.brand { margin-left: auto; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); font-family: var(--pixel); font-size: 17px; color: var(--shell-ink); text-transform: uppercase; }
.device.bump .scene { animation: bump 380ms var(--ease-out); }
@keyframes bump { 30% { transform: translateY(-3px) rotate(-1deg); } 60% { transform: translateY(1px) rotate(1deg); } }

/* sections */
.streak, .wallet { max-width: 1160px; margin: 0 auto; padding: 96px max(24px, 6vw) 0; }
.streak h2, .wallet h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.05; }

/* streak */
.streak-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.streak-head p { margin: 0; color: var(--ink-2); max-width: 42ch; }
.streak-row {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.streak-row li {
  display: grid; justify-items: center; gap: 4px; padding: 20px 8px 16px;
  border-radius: 16px; background: var(--paper-2);
}
.streak-row canvas { width: 64px; height: 64px; image-rendering: pixelated; margin-bottom: 8px; }
.streak-row span { font-family: var(--pixel); font-size: 13px; color: var(--ink-2); text-transform: uppercase; }
.streak-row b { font-weight: 600; font-size: 16px; }
.streak-row .is-miss { background: #fbe7dd; }
.streak-row .is-miss b { color: #a63d15; }
.streak-row .is-gone { background: var(--lcd); }
.streak-row .is-gone span { color: var(--lcd-dim); }
.streak-row .is-gone b { color: var(--lcd-ink); }

/* wallet */
.wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.wallet-copy p { color: var(--ink-2); margin: 18px 0 0; max-width: 44ch; }
.receipt {
  background: var(--lcd); color: var(--lcd-ink); border-radius: 24px; padding: 28px 32px;
  box-shadow:
    inset 0 0 0 6px var(--lcd-2),
    inset 0 12px 16px -8px rgba(0, 0, 0, 0.4),
    0 2px 3px rgba(45, 60, 83, 0.14),
    14px 30px 50px -26px rgba(45, 60, 83, 0.4);
  font-family: var(--pixel); font-size: 14px; text-transform: uppercase;
}
.receipt-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; }
.receipt-row span { color: var(--lcd-dim); }
.receipt-row i { flex: 1; border-bottom: 2px dotted #46597a; transform: translateY(-4px); }
.receipt-row b { font-weight: 400; color: var(--green); }
.receipt-row b span { color: inherit; }

/* token */
.token { max-width: 1160px; margin: 0 auto; padding: 112px max(24px, 6vw) 0; }
.token h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.05; }
.token-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.token-head p { margin: 0; color: var(--ink-2); max-width: 44ch; }
.token-card {
  margin-top: 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px 48px;
  background: var(--lcd); color: var(--lcd-ink); border-radius: 24px; padding: 32px;
  box-shadow:
    inset 0 0 0 6px var(--lcd-2),
    inset 0 12px 16px -8px rgba(0, 0, 0, 0.4),
    0 2px 3px rgba(45, 60, 83, 0.14),
    14px 30px 50px -26px rgba(45, 60, 83, 0.4);
  font-family: var(--pixel); text-transform: uppercase;
}
.token-label { display: block; font-size: 13px; color: var(--lcd-dim); }
.token-ticker strong { display: block; font-weight: 400; font-size: clamp(44px, 6vw, 72px); line-height: 1.1; margin: 6px 0 4px; letter-spacing: 0.04em; }
.token-note { font-size: 13px; color: var(--green); }
.token-rows { font-size: 14px; align-self: center; }
.token-ca {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 16px; padding-top: 20px; border-top: 2px dotted #46597a;
}
.token-ca .token-label { margin-right: 4px; }
.token-ca code { font: 14px var(--pixel); color: var(--lcd-dim); overflow-wrap: anywhere; text-transform: none; }
.token-ca code.is-live { color: var(--lcd-ink); }
.token-copy {
  margin-left: auto; font: 13px var(--pixel); text-transform: uppercase; color: var(--lcd); cursor: pointer;
  background: var(--green); border: 0; border-radius: 999px; padding: 9px 16px;
  box-shadow: inset 0 -3px 0 var(--green-dark); transition: transform 140ms var(--ease-out);
}
.token-copy:active { transform: translateY(2px); }
.token-path {
  list-style: none; margin: 72px 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
}
.token-path li { position: relative; }
/* the route the token travels, from one icon to the next */
.token-path li:not(:last-child)::after {
  content: ""; position: absolute; top: 31px; left: 84px; right: -20px;
  border-top: 2px dashed var(--line);
}
.token-path canvas { width: 64px; height: 64px; image-rendering: pixelated; display: block; margin-bottom: 18px; }
.token-path h3 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 8px; }
.token-path p { margin: 0; color: var(--ink-2); max-width: 34ch; }
.token-link { display: inline-block; margin-top: 12px; font-weight: 600; }
.token-link[hidden] { display: none; }
.token-warn { margin: 48px 0 0; font-size: 15px; color: var(--ink-2); }
.token-warn::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--orange); margin-right: 10px; transform: translateY(-1px); }

/* faq view: questions on the left, the device screen answers on the right */
.faqv { max-width: 1160px; margin: 0 auto; padding: 56px max(24px, 6vw) 96px; }
.faqv-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.faqv-head h1 { font-size: clamp(42px, 4.6vw, 68px); line-height: 1; }
.faqv-head p { margin: 0; color: var(--ink-2); max-width: 40ch; }
.faqv-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; margin-top: 48px; align-items: start; }
.faqv-list { display: grid; gap: 8px; }
.faqv-q {
  display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer;
  font: 500 18px/1.3 var(--sans); color: var(--ink);
  padding: 18px 20px; border: 0; border-radius: 16px; background: var(--paper-2);
  transition: background 160ms ease, transform 160ms var(--ease-out);
}
.faqv-q:active { transform: scale(0.98); }
.faqv-num { font: 13px var(--pixel); color: var(--ink-2); min-width: 2.2em; }
.faqv-q[aria-selected="true"] { background: var(--shell); }
.faqv-q[aria-selected="true"] .faqv-num { color: var(--shell-ink); }
@media (hover: hover) and (pointer: fine) { .faqv-q:not([aria-selected="true"]):hover { background: var(--line); } }
.faqv-screen {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px);
  border-radius: 40px; padding: 22px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 42%, rgba(63, 122, 72, 0.08)), var(--shell);
  box-shadow:
    inset 0 -8px 0 var(--shell-dark),
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    0 2px 3px rgba(45, 60, 83, 0.14),
    12px 34px 44px -22px rgba(45, 60, 83, 0.32),
    20px 60px 80px -44px rgba(45, 60, 83, 0.26);
}
.faqv-panel {
  min-height: 280px; background: var(--lcd); color: var(--lcd-ink); border-radius: 24px; padding: 32px;
  box-shadow: inset 0 0 0 6px var(--lcd-2), inset 0 10px 14px -6px rgba(0, 0, 0, 0.45);
}
.faqv-panel:not([hidden]) { animation: lcd-in 220ms var(--ease-out); }
@keyframes lcd-in { from { opacity: 0; filter: blur(2px); } }
.faqv-label { margin: 0 0 16px; font: 13px var(--pixel); color: var(--green); }
.faqv-panel h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 14px; }
.faqv-panel p:last-child { margin: 0; color: #c3d0e0; font-size: 18px; max-width: 46ch; }

/* footer */
.foot {
  max-width: 1160px; margin: 112px auto 0; padding: 28px max(24px, 6vw) 44px;
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; color: var(--ink-2); font-size: 15px;
  border-top: 1px solid var(--line);
}
.foot a { margin-left: auto; font-weight: 600; color: var(--ink); }

/* play */
.play {
  height: calc(100dvh - 72px); min-height: 600px; max-width: 1240px; margin: 0 auto; padding: 8px max(24px, 4vw) 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 40px;
}
.play-device { display: grid; justify-items: center; gap: 16px; }
/* the device sizes to the viewport height so the whole screen fits without scrolling */
.play-device > [data-device-slot] { width: min(440px, calc((100dvh - 72px - 110px) * 0.9)); }
.play .device { width: 100%; }

/* HUD plates: same mint plastic as the device, a round key with a pixel icon, a small LCD readout */
.hud-col { display: grid; gap: 16px; }
.hud-left { justify-items: end; }
.hud-right { justify-items: start; }
.hud {
  display: flex; align-items: center; gap: 12px; width: min(100%, 270px);
  padding: 10px 14px 12px 10px; border-radius: 26px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 45%, rgba(63, 122, 72, 0.08)), var(--shell);
  box-shadow:
    inset 0 -5px 0 var(--shell-dark),
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    0 2px 3px rgba(45, 60, 83, 0.12),
    10px 20px 30px -18px rgba(45, 60, 83, 0.35);
}
.hud-key {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, #fff, rgba(255, 255, 255, 0) 55%), var(--shell-key);
  box-shadow: inset 0 -4px 0 var(--shell-dark), 2px 3px 5px -1px rgba(45, 90, 55, 0.3);
}
.hud-key canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.hud-body { display: grid; gap: 5px; min-width: 0; flex: 1; }
.hud-label { font: 12px var(--pixel); text-transform: uppercase; color: var(--shell-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }
.hud-lcd {
  display: flex; align-items: baseline; gap: 6px; min-height: 34px; padding: 6px 10px;
  border-radius: 10px; background: var(--lcd); color: var(--lcd-ink);
  box-shadow: inset 0 0 0 3px var(--lcd-2), inset 0 5px 8px -4px rgba(0, 0, 0, 0.5);
  font: 16px var(--pixel); text-transform: uppercase; white-space: nowrap; overflow: hidden;
}
.hud-lcd b { font-weight: 400; font-variant-numeric: tabular-nums; }
.hud-lcd small { font-size: 11px; color: var(--lcd-dim); }
.hud-lcd [data-earn-status] { font-size: 12px; color: var(--green); }
.hud-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 100%; align-self: center; }
.hud-week i { height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 2px #46597a; }
.hud-week i.is-fed { background: var(--green); box-shadow: none; }
.play-hint { font-size: 16px; color: var(--ink-2); margin: 0; text-align: center; min-height: 1.6em; max-width: 34ch; }

/* hatched state */
body.hatched .hero-timer-value { color: var(--green-dark); }

/* mobile */
@media (max-width: 860px) {
  .nav { grid-template-columns: auto 1fr; gap: 20px; padding: 0 16px; }
  .nav .pill { display: none; }
  .tabs { justify-content: flex-end; gap: 20px; }
  .hero { grid-template-columns: minmax(0, 1fr); padding: 24px 16px 40px; gap: 40px; }
  .hero-device { --w: 300px; padding: 40px 0 80px; overflow-x: clip; }
  /* keep the device's real proportions and just shrink it around the ring */
  .charm-body { scale: 0.72; }
  .charm { margin-bottom: -40px; }
  .charm-chain { scale: 0.72; }
  .hero h1 { font-size: 44px; }
  .lede { font-size: 18px; }
  .waitlist-row { flex-direction: column; }
  .waitlist .btn { width: 100%; }
  .waitlist input { flex: none; }
  .streak, .wallet { padding: 72px 16px 0; }
  .streak-head, .wallet, .faqv-head, .faqv-body, .token-head { grid-template-columns: 1fr; gap: 16px; }
  .token { padding: 72px 16px 0; }
  /* on phones the device keeps its full size; the farm plates follow below and scroll */
  .play { height: auto; min-height: 0; grid-template-columns: 1fr; padding: 40px 16px 48px; gap: 16px; }
  .play-device { order: -1; gap: 12px; margin-bottom: 8px; }
  .play-device > [data-device-slot] { width: min(100%, 440px); }
  .hud-col, .hud-left, .hud-right { justify-items: stretch; gap: 12px; }
  .hud { width: 100%; }
  .token-card { grid-template-columns: 1fr; padding: 22px; gap: 16px; }
  .token-copy { margin-left: 0; }
  .token-path { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .token-path li:not(:last-child)::after { top: 76px; bottom: -16px; left: 31px; right: auto; border-top: 0; border-left: 2px dashed var(--line); }
  .token-path li { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; }
  .token-path canvas { grid-row: span 3; margin: 0; }
  .faqv { padding: 24px 16px 64px; }
  .faqv-body { margin-top: 32px; }
  .faqv-screen { position: static; order: -1; border-radius: 32px; padding: 14px; }
  .faqv-panel { min-height: 0; padding: 24px; }
  .faqv-panel h2 { font-size: 22px; }
  .faqv-q { font-size: 17px; padding: 16px; }
  .streak-row { grid-template-columns: repeat(3, 1fr); }
  .wallet { gap: 32px; }
  .receipt { padding: 20px; font-size: 12px; }
  .foot { padding: 24px 16px 40px; margin-top: 80px; }
  .foot a { margin-left: 0; }
  .device { padding: 20px 20px 16px; border-radius: 44px; }
  .screen { border-radius: 24px; padding: 8px 10px 10px; }
  .lcd-top { font-size: 12px; }
  .key { width: 54px; height: 54px; }
  .controls { gap: 10px; padding-top: 16px; }
  .brand { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy > * { animation: fade 400ms ease both; }
  .device.bump .scene { animation: none; }
  .charm-body { animation: none; }
  .bubble { transform: translate(-50%, 0); }
  @keyframes fade { from { opacity: 0; } }
}