:root {
  /* Primitives (Airy palette) */
  --cream: #f5f2eb;
  --surface: #fdfaf4;
  --charcoal: #2c2b24;
  --sage: #c8c4b0;
  --gold: #e8b84b;
  --terracotta: #e8471a;

  /* Semantics */
  --bg-canvas: var(--cream);
  --surface-panel: var(--surface);
  --surface-raised: var(--surface);
  --text-ink: var(--charcoal);
  --text-secondary: rgba(44, 43, 36, 0.72);
  --border-subtle: var(--sage);
  --action-cta: var(--gold);
  --status-alert: var(--terracotta);
  --status-active: var(--charcoal);
  --accent-secondary: var(--sage);

  /* Spacing and radius (8-point) */
  --s8: 8px; --s16: 16px; --s24: 24px; --s32: 32px;
  --radius: 8px;

  --font: Ubuntu, -apple-system, "SF Pro Text", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--bg-canvas);
  color: var(--text-ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body { display: flex; justify-content: center; }

#app {
  width: 100%;
  max-width: 420px;
  padding: 0 var(--s16);
}

/* First screen matches the 393x852 Figma frame */
.screen {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: max(var(--s16), env(safe-area-inset-top));
  padding-bottom: max(var(--s24), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--s16);
}

h1, h2, p, dl, dt, dd { font-weight: inherit; }

.caption {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  opacity: 0.8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Panel 1: State Deck ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s24);
  padding: var(--s24);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-panel);
}
.hero > :not(.fx) { position: relative; z-index: 1; }

/* Shader fills (see shaders.js): moving gradient at 24%, moire at 4% */
.fx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s ease; }
[data-state="bricked"] .fx, [data-state="arming"] .fx { opacity: 1; }
.fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-gradient { opacity: 0.24; }
.fx-moire { opacity: 0.04; }

/* Static fallback when WebGL2 is unavailable */
[data-state="bricked"] .hero.no-gl, [data-state="arming"] .hero.no-gl {
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(232, 184, 75, 0.16), transparent 60%),
    linear-gradient(180deg, transparent 45%, rgba(232, 71, 26, 0.07) 100%),
    var(--surface-panel);
}

.label-row { display: flex; align-items: center; gap: var(--s8); }
.label-row .caption { opacity: 1; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--status-active);
  transition: background-color .3s ease;
}
[data-state="bricked"] .dot { background: var(--status-alert); }
[data-state="arming"] .dot { background: var(--status-alert); animation: pulse .8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.8); opacity: .5; } }

.state-text { display: flex; flex-direction: column; gap: var(--s8); }
#state { font-size: 48px; line-height: 56px; font-weight: 700; }

.timer-block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s8); }
.add-time {
  height: 26px; padding: 4px 8px;
  font: inherit; font-size: 14px; line-height: 16px; font-weight: 500;
  color: var(--text-ink); background: transparent;
  border: 1px solid var(--border-subtle); border-radius: var(--radius);
  cursor: pointer;
}
.add-time[hidden] { display: none; }
.add-time:active { background: var(--border-subtle); }

.timer {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s8);
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--text-ink); text-align: left; cursor: pointer;
}
.timer:disabled { cursor: default; color: var(--text-ink); }
#timerValue {
  font-size: 44px; line-height: 48px; font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.zone { margin-top: auto; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-secondary); }

/* ---------- Essentials ---------- */
.essentials { display: flex; flex-direction: column; gap: var(--s16); }
.essentials .caption { padding: 0 var(--s16); }
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s8); }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--s8);
  color: var(--text-ink); text-decoration: none;
}
.chip {
  width: 52px; height: 52px; border-radius: var(--radius);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  display: grid; place-items: center;
  transition: transform .12s ease;
}
.tile:active .chip { transform: scale(.94); }
.chip svg {
  width: 28px; height: 28px; fill: none; stroke: var(--text-ink);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.tile-label { font-size: 12px; line-height: 16px; font-weight: 500; opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}