/* =====================================================================
   STYLE
   1. Design tokens (colours, fonts, sizes) — change the look here
   2. Base
   3. Start screen
   4. Compass screen: header, compass, stats, footer
   5. Landscape / small screens
   ===================================================================== */


/* 1. DESIGN TOKENS ---------------------------------------------------- */

:root {
  /* Colours — light theme */
  --color-bg:       #f5f4f0;
  --color-surface:  #ffffff;
  --color-text:     #16181d;
  --color-muted:    #737881;
  --color-line:     #dcdbd4;
  --color-north:    #E8472B; /*#12263A;/*#c8372d;  /* the "N" on the dial */
  --color-accent:   #E8472B; /*#12263A;/*#0b7a72;  /* target pointer, button, "aligned" state */
  --color-on-accent:#ffffff;
  --color-warning:  #b45309;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* Size of the compass: the smallest of these three wins */
  --compass-size: min(88vw, 54vh, 440px);

  /* Spacing & shape */
  --space: 16px;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:       #0e1013;
    --color-surface:  #171a1f;
    --color-text:     #eceae4;
    --color-muted:    #8c919a;
    --color-line:     #2b2f36;
    --color-north:    #E8472B; /*#12263A;/*#ff6b5e;*/
    --color-accent:   #E8472B; /*#12263A;/*#2ec4b6;*/
    --color-on-accent:#0e1013;
    --color-warning:  #f5a524;
  }
}

/* Use dynamic viewport units where supported (avoids the URL-bar jump) */
@supports (height: 100dvh) {
  :root { --compass-size: min(88vw, 54dvh, 440px); }
}


/* 2. BASE ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  /* Keep content clear of notches and home indicators */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

[hidden] { display: none !important; }

.button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 14px 40px;
  font: 600 17px/1 var(--font-sans);
  background: var(--color-accent);
  color: var(--color-on-accent);
  cursor: pointer;
}
.button:active   { transform: scale(0.97); }
.button:disabled { opacity: 0.5; }


/* 3. START SCREEN ----------------------------------------------------- */

.start {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: calc(var(--space) * 2) var(--space);
  text-align: center;
}

.start__logo    { width: 96px; height: 96px; margin-bottom: 12px; }
.start__eyebrow { margin: 0; color: var(--color-muted); font-size: 15px; }
.start__title   { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.start__hint    { margin: 8px 0 20px; max-width: 30ch; color: var(--color-muted); font-size: 15px; line-height: 1.45; }
.start__error   { margin: 8px 0 0; max-width: 32ch; color: var(--color-warning); font-size: 14px; }
.start__error:empty { display: none; }


/* 4. COMPASS SCREEN --------------------------------------------------- */

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  padding: var(--space);
}

/* Header */
.header {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}
.header__logo   { width: 32px; height: 32px; }
.header__target { font-size: 18px; font-weight: 600; }

/* Compass: three SVG layers stacked on top of each other */
.compass {
  position: relative;
  width: var(--compass-size);
  height: var(--compass-size);
  flex-shrink: 0;
}

.compass__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: transform; /* rotated by app.js */
}

.dial__ring {
  fill: var(--color-surface);
  stroke: var(--color-line);
  stroke-width: 1.5;
  transition: stroke 0.3s;
}
.dial__tick         { stroke: var(--color-muted); stroke-width: 0.8; stroke-linecap: round; }
.dial__tick--major  { stroke: var(--color-text);  stroke-width: 1.4; }
.dial__letter {
  fill: var(--color-muted);
  font: 600 13px var(--font-sans);
  text-anchor: middle;
  dominant-baseline: central;
}
.dial__letter--north { fill: var(--color-north); font-weight: 700; }

.pointer { fill: var(--color-accent); }

.index {
  fill: var(--color-text);
  transition: fill 0.3s;
}

/* "Aligned" = target straight ahead */
.compass.is-aligned .dial__ring { stroke: var(--color-accent); stroke-width: 3; }
.compass.is-aligned .index      { fill: var(--color-accent); }

/* Centre text */
.compass__center {
  position: absolute;
  inset: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.compass__distance {
  font-size: calc(var(--compass-size) * 0.15);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.compass__unit {
  margin-top: 4px;
  color: var(--color-muted);
  font-size: calc(var(--compass-size) * 0.045);
  font-weight: 600;
}
.compass__hint {
  margin-top: 8px;
  color: var(--color-muted);
  font-size: calc(var(--compass-size) * 0.036);
  white-space: nowrap;
}
.compass.is-aligned .compass__hint { color: var(--color-accent); font-weight: 600; }

/* Stats: 2 × 2 grid of small cards */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin: 0;
}
.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.stat dt {
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat dd {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Footer: one warning line + one info line */
.footer {
  width: 100%;
  max-width: 440px;
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
}
.footer p           { margin: 0; }
.footer__warning    { color: var(--color-warning); }
.footer__info       { color: var(--color-muted); }


/* 5. LANDSCAPE / SMALL SCREENS --------------------------------------- */

/* Phone held sideways: compass left, numbers right */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --compass-size: min(78vh, 48vw); }
  @supports (height: 100dvh) {
    :root { --compass-size: min(78dvh, 48vw); }
  }
  .app {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    column-gap: calc(var(--space) * 2);
  }
  .header  { grid-column: 2; grid-row: 1; }
  .compass { grid-column: 1; grid-row: 1 / 4; }
  .stats   { grid-column: 2; grid-row: 2; }
  .footer  { grid-column: 2; grid-row: 3; text-align: left; }
}

/* Very narrow phones */
@media (max-width: 340px) {
  .stat dd { font-size: 17px; }
}