:root {
  --cream: #f7f0e3;
  --paper: #fcf7ee;
  --ink: #4b3a48;
  --ink-soft: rgba(75, 58, 72, 0.72);
  --plum: #7a4e63;
  --butter: #f3d98a;
  --rose: #d99a9e;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(120% 90% at 50% 0%, #fbf6ec 0%, #f1e7d6 70%, #eaddc9 100%);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
}

.page {
  height: 100%;
  display: block;
  padding: 0;
}

/* The scene fills the whole window; the camera pulls back until the garden fits. */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  overflow: hidden;
  container-type: inline-size;
  background: #c4d0ae;
  box-shadow:
    0 0 0 1px rgba(75, 58, 72, 0.18),
    0 0 0 9px var(--paper),
    0 0 0 10px rgba(75, 58, 72, 0.14),
    0 24px 50px -18px rgba(75, 58, 72, 0.45);
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Paper grain laid over the whole picture. */
.paper {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.26;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.38  0 0 0 0 0.3  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  box-shadow: inset 0 0 90px rgba(120, 96, 70, 0.28);
}

.ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: clamp(10px, 1.32cqw, 19px);
}
.ui > * { pointer-events: auto; }

/* ---------- Top bar ---------- */
.hud-top {
  position: absolute;
  top: 1.2em;
  left: 1.4em;
  right: 1.4em;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.hud-top > * { pointer-events: auto; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 1em 0.45em 0.55em;
  background: rgba(252, 247, 238, 0.93);
  border: 1px solid rgba(75, 58, 72, 0.2);
  border-radius: 999px;
}
.brand svg { width: 2.2em; height: 2.2em; }
.brand strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.2em;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.brand small {
  display: block;
  font-size: 0.72em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hud-actions {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.tally {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1em;
  padding: 0.5em 0.95em;
  background: rgba(252, 247, 238, 0.93);
  border: 1px solid rgba(75, 58, 72, 0.2);
  border-radius: 999px;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.pill {
  font-size: 0.9em;
  font-weight: 600;
  padding: 0.55em 1em;
  background: var(--paper);
  border: 1.5px solid rgba(75, 58, 72, 0.45);
  border-radius: 999px;
  transition: background 0.2s, transform 0.2s;
}
.pill:hover { background: var(--butter); }
.pill[aria-pressed="true"] { background: var(--butter); border-color: var(--ink); }

button:focus-visible {
  outline: 3px solid var(--plum);
  outline-offset: 3px;
}

/* ---------- Hint line ---------- */
.hint {
  position: absolute;
  left: 50%;
  bottom: 1.3em;
  transform: translateX(-50%);
  margin: 0;
  max-width: 82%;
  padding: 0.65em 1.3em;
  font-size: 1.05em;
  font-weight: 600;
  text-align: center;
  background: rgba(252, 247, 238, 0.95);
  border: 1.5px solid rgba(75, 58, 72, 0.35);
  border-radius: 999px;
  box-shadow: 0 6px 16px -8px rgba(75, 58, 72, 0.5);
  pointer-events: none;
}

/* ---------- Cards ---------- */
.card {
  position: absolute;
  background: var(--paper);
  border: 1px solid rgba(75, 58, 72, 0.22);
  border-radius: 1.8em;
  box-shadow:
    0 0 0 0.45em rgba(252, 247, 238, 0.55),
    0 22px 46px -16px rgba(75, 58, 72, 0.55);
  padding: 1.6em 2.2em;
  animation: rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.card[hidden] { display: none; }

@keyframes rise {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

.card h1, .card h2 {
  margin: 0 0 0.3em;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.1;
}
.card h1 { font-size: 2.2em; }
.card h2 { font-size: 2.1em; }

.lead {
  margin: 0 0 1.1em;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.22em;
  line-height: 1.4;
  color: var(--ink);
}

.intro {
  top: 52%;
  left: 50%;
  width: 50em;
  max-width: 90%;
  transform: translate(-50%, -50%);
}

.steps {
  list-style: none;
  margin: 0 0 1.1em;
  padding: 0;
  display: grid;
  gap: 0.7em;
}
.steps li {
  display: flex;
  gap: 0.85em;
  align-items: flex-start;
  font-size: 1.05em;
  line-height: 1.4;
}
.num {
  flex: none;
  width: 1.9em;
  height: 1.9em;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 700;
  background: var(--butter);
  border: 1.5px solid #d9ae45;
  border-radius: 50%;
}

.fine {
  margin: 0 0 1.2em;
  font-size: 0.95em;
  line-height: 1.45;
  color: var(--ink-soft);
}
.fine.quiet {
  margin: 1em 0 0;
  font-size: 0.8em;
}

.primary {
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.75em 1.6em;
  color: #fff9f0;
  background: var(--plum);
  border: none;
  border-radius: 999px;
  box-shadow: 0 6px 0 -1px #5d394b, 0 12px 18px -8px rgba(75, 58, 72, 0.6);
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
}
.primary:hover { background: #8a5a71; transform: translateY(-1px); }
.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 -1px #5d394b; }

.landed {
  left: 6%;
  top: 34%;
  width: 26em;
  max-width: 44%;
}
.landed .lead { margin-bottom: 1.3em; }

/* ---------- Calm motion ---------- */
.calm *, .calm *::before, .calm *::after {
  animation: none !important;
  transition: none !important;
}

/* ---------- Version 2: stats, tags, banner, hold ---------- */
.hud-left { display: flex; flex-direction: column; gap: 0.5em; align-items: flex-start; }

.stats {
  display: flex;
  align-items: center;
  gap: 1.1em;
  padding: 0.4em 1.1em;
  background: rgba(252, 247, 238, 0.93);
  border: 1px solid rgba(75, 58, 72, 0.2);
  border-radius: 999px;
}
.stats span { display: flex; align-items: baseline; gap: 0.4em; }
.stats small {
  font-size: 0.68em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.stats b { font-family: var(--serif); font-size: 1.15em; font-variant-numeric: tabular-nums; }
.hearts { gap: 0.15em !important; align-items: center !important; }
.hearts svg { width: 1.5em; height: 1.5em; transition: opacity 0.4s, filter 0.4s, transform 0.4s; }
.hearts svg.gone { opacity: 0.28; filter: grayscale(1); transform: scale(0.8); }

.labels { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; font-size: clamp(9px, 1.15cqw, 16px); }
.tag, .padtag {
  position: absolute;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  color: var(--ink);
}
.tag {
  display: grid;
  gap: 0.22em;
  padding: 0.28em 0.75em 0.36em;
  background: rgba(252, 247, 238, 0.95);
  border: 1.5px solid rgba(75, 58, 72, 0.4);
  border-radius: 0.9em;
  box-shadow: 0 4px 10px -6px rgba(75, 58, 72, 0.6);
}
.tag .row { display: flex; align-items: center; gap: 0.4em; }
.tag i { width: 0.7em; height: 0.7em; border-radius: 50%; border: 1.5px solid rgba(75, 58, 72, 0.55); }
.tag[data-pad="daisy"] i { background: #f3d98a; }
.tag[data-pad="lily"] i { background: #ef9fb9; }
.tag .dew { height: 0.34em; border-radius: 1em; background: rgba(75, 58, 72, 0.16); overflow: hidden; }
.tag .dew span { display: block; height: 100%; width: 100%; border-radius: 1em; background: #7fa27a; }
.tag.mid .dew span { background: #d9ae45; }
.tag.low .dew span { background: #c2566b; }
.tag.low { border-color: #c2566b; animation: throb 0.9s ease-in-out infinite; }
.tag.sel { border-color: var(--ink); border-width: 2px; background: #fffdf8; }
.tag.holding em::after { content: " · holding"; font-weight: 400; color: var(--ink-soft); }
.tag.cleared em::after { content: " · cleared"; font-weight: 400; color: var(--ink-soft); }
.tag em { font-style: italic; }
@keyframes throb { 50% { box-shadow: 0 0 0 0.35em rgba(194, 86, 107, 0.3); } }

.padtag {
  transform: translate(-50%, 0);
  font-size: 1.05em;
  text-shadow: 0 0 4px #fcf7ee, 0 0 4px #fcf7ee, 0 0 6px #fcf7ee, 0 0 2px #fcf7ee;
}

.banner {
  position: absolute;
  top: 17%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.7em 1.6em;
  text-align: center;
  font-family: var(--serif);
  background: var(--paper);
  border: 1.5px solid rgba(75, 58, 72, 0.4);
  border-radius: 1.4em;
  box-shadow: 0 0 0 0.4em rgba(252, 247, 238, 0.5), 0 16px 30px -14px rgba(75, 58, 72, 0.6);
  animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  pointer-events: none;
}
.banner[hidden] { display: none; }
.banner b { display: block; font-size: 1.5em; font-weight: 600; }
.banner span { font-style: italic; font-size: 1.05em; color: var(--ink-soft); }

.hold {
  position: absolute;
  left: 1.4em;
  bottom: 1.2em;
  font-size: 1em;
}
.hold[hidden] { display: none; }
kbd {
  font: inherit;
  font-size: 0.8em;
  margin-left: 0.4em;
  padding: 0.05em 0.45em;
  border: 1px solid rgba(255, 249, 240, 0.6);
  border-radius: 0.4em;
}
.hint { max-width: 62%; }
.steps { gap: 0.55em; }
.steps li { font-size: 1em; }

.ui { z-index: 1; }

/* Full-window layout: the garden fills the whole browser window. */
.stage { box-shadow: none; }
.ui { font-size: clamp(11px, 1.15cqw, 19px); }
.intro { max-height: 92%; overflow: auto; }

/* ---------- Radar inset (tower view) ---------- */
.radar {
  position: absolute;
  right: 1.2em;
  bottom: 1.1em;
  width: clamp(250px, 30cqw, 520px);
  aspect-ratio: 1600 / 1000;
  border-radius: 1.1em;
  border: 2px solid rgba(75, 58, 72, 0.55);
  box-shadow: 0 0 0 0.35em rgba(252, 247, 238, 0.75), 0 16px 30px -14px rgba(75, 58, 72, 0.7);
  background: #eef1e2;
  touch-action: none;
  cursor: crosshair;
}
.radar[hidden] { display: none; }
.view-tower .hint { left: 39%; max-width: 36%; }

/* ---------- Tag notes, hold labels, compass ---------- */
.tag.holding em::after, .tag.cleared em::after { content: none; }
.tag small { font-style: normal; font-family: var(--sans); font-size: 0.72em; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; }
.holdtag { font-size: 0.92em; color: #5d4a8f; text-transform: capitalize; }
.compass {
  position: absolute;
  top: 4.6em;
  left: 50%;
  width: 4.6em;
  height: 4.6em;
  margin-left: -2.3em;
  border-radius: 50%;
  background: rgba(252, 247, 238, 0.93);
  border: 1.5px solid rgba(75, 58, 72, 0.45);
  box-shadow: 0 6px 14px -8px rgba(75, 58, 72, 0.6);
  pointer-events: none;
}
.compass .dial { position: absolute; inset: 0; }
.compass b { position: absolute; font-family: var(--serif); font-size: 0.9em; line-height: 1; transform: translate(-50%, -50%); }
.compass .n { left: 50%; top: 17%; color: #c2566b; }
.compass .s { left: 50%; top: 83%; }
.compass .e { left: 83%; top: 50%; }
.compass .w { left: 17%; top: 50%; }
.compass i { /* the fixed pointer: the way you are facing */
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -0.95em 0 0 -0.32em;
  border-left: 0.32em solid transparent; border-right: 0.32em solid transparent; border-bottom: 0.95em solid var(--plum);
}
.banner { top: 24%; }
.intro { width: 54em; }

/* ---------- Command panel, flight strips, traffic alert ---------- */
.cmd {
  position: absolute;
  left: 1.2em;
  bottom: 1.1em;
  display: grid;
  gap: 0.45em;
  padding: 0.8em 1em;
  background: rgba(252, 247, 238, 0.96);
  border: 1.5px solid rgba(75, 58, 72, 0.45);
  border-radius: 1.2em;
  box-shadow: 0 14px 28px -14px rgba(75, 58, 72, 0.7);
}
.cmd[hidden] { display: none; }
.cmd > b { font-family: var(--serif); font-style: italic; font-size: 1.05em; }
.cmd-row { display: flex; align-items: center; gap: 0.35em; }
.cmd-row > span { width: 3em; font-size: 0.7em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.cmd button {
  font-size: 0.86em; font-weight: 600; padding: 0.45em 0.7em;
  background: var(--paper); border: 1.5px solid rgba(75, 58, 72, 0.45); border-radius: 0.8em;
  transition: background 0.15s, transform 0.1s;
}
.cmd button:hover { background: var(--butter); }
.cmd button:active { transform: translateY(1px); }
.cmd kbd { border-color: rgba(75, 58, 72, 0.4); color: var(--ink-soft); margin-left: 0.3em; }

.strips { display: grid; gap: 0.25em; pointer-events: auto; }
.strips[hidden] { display: none; }
.strip {
  display: grid; grid-template-columns: 0.8em 8.2em 6.2em 4.6em; align-items: center; gap: 0.5em;
  padding: 0.32em 0.7em 0.5em; text-align: left; font-size: 0.82em;
  background: rgba(252, 247, 238, 0.93); border: 1.5px solid rgba(75, 58, 72, 0.25); border-radius: 0.7em;
}
.strip:hover { background: #fffdf8; }
.strip i { width: 0.8em; height: 0.8em; border-radius: 50%; border: 1.5px solid rgba(75, 58, 72, 0.55); }
.strip b { font-family: var(--serif); font-style: italic; font-weight: 600; }
.strip span { color: var(--ink-soft); font-size: 0.9em; white-space: nowrap; }
.strip > u { grid-column: 1 / -1; display: block; height: 0.28em; border-radius: 1em; background: rgba(75, 58, 72, 0.14); text-decoration: none; overflow: hidden; }
.strip > u > u { display: block; height: 100%; border-radius: 1em; background: #7fa27a; text-decoration: none; }
.strip.low > u > u { background: #c2566b; }
.strip.low { border-color: #c2566b; }
.strip.near { border-color: #c2566b; background: #fbe6e6; }
.strip.sel { border-color: var(--ink); border-width: 2px; background: #fffdf8; }

.stage.alert::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 0.35em rgba(194, 86, 107, 0.55), inset 0 0 7em rgba(194, 86, 107, 0.35);
  animation: alertPulse 0.7s ease-in-out infinite;
}
.stage.calm.alert::after { animation: none; }
@keyframes alertPulse { 50% { opacity: 0.35; } }
.view-tower .hint { left: 54.5%; max-width: 25%; font-size: 0.95em; }

/* ---------- Version 4: menu, pause, radar range, leaderboard, decluttered tags ---------- */
.menu { position: relative; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 0.5em); z-index: 5;
  display: grid; gap: 0.4em; padding: 0.6em; min-width: 12em;
  background: rgba(252, 247, 238, 0.98); border: 1.5px solid rgba(75, 58, 72, 0.35); border-radius: 1em;
  box-shadow: 0 16px 30px -14px rgba(75, 58, 72, 0.7);
}
.menu-pop[hidden] { display: none; }
.menu-pop .pill { text-align: left; }
#pauseBtn[aria-pressed="true"] { background: var(--butter); border-color: var(--ink); }

/* hide the brand once play starts; the top-left is for the stats and strips */
.playing .brand { display: none; }

/* tags show only the callsign, unless the airship needs attention */
.tag .dew, .tag small { display: none; }
.tag.sel .dew, .tag.low .dew, .tag.near .dew, .tag.sel small, .tag.low small, .tag.near small { display: block; }
.tag.sel small, .tag.low small, .tag.near small { display: inline; }
.tag { padding: 0.2em 0.65em 0.25em; }
.tag.near { border-color: #c2566b; }

/* hold names appear only while you are choosing where to send someone */
.holdtag { opacity: 0; transition: opacity 0.25s; }
.has-sel .holdtag { opacity: 1; }

/* radar with its range switch */
.radar-wrap { position: absolute; right: 1.2em; bottom: 1.1em; width: clamp(250px, 30cqw, 520px); }
.radar-wrap[hidden] { display: none; }
.radar-wrap .radar { position: relative; right: auto; bottom: auto; width: 100%; display: block; }
.radar-range {
  position: absolute; right: 0.6em; top: 0.55em; font-size: 0.78em; font-weight: 600; padding: 0.3em 0.7em;
  background: rgba(252, 247, 238, 0.95); border: 1.5px solid rgba(75, 58, 72, 0.4); border-radius: 999px;
}
.radar-range:hover { background: var(--butter); }
.radar-range kbd { border-color: rgba(75, 58, 72, 0.35); color: var(--ink-soft); }
.view-tower .hint, .hint { left: 50%; max-width: 34%; }

/* pause card */
.pausecard { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 22em; }
.pausecard[hidden] { display: none; }
.pausecard .primary kbd { border-color: rgba(255, 249, 240, 0.6); }

/* leaderboard card */
.board { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30em; max-width: 92%; max-height: 92%; overflow: auto; }
.board .lead { margin-bottom: 0.8em; }
.score-form { margin: 0 0 1em; }
.score-form[hidden] { display: none; }
.score-form label { display: block; font-size: 0.85em; font-weight: 600; margin-bottom: 0.35em; color: var(--ink-soft); }
.score-row { display: flex; gap: 0.5em; }
.score-row input {
  flex: 1; font: inherit; font-size: 1em; padding: 0.55em 0.9em; color: var(--ink);
  background: #fffdf8; border: 1.5px solid rgba(75, 58, 72, 0.45); border-radius: 999px;
}
.score-row input:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
.primary.small { font-size: 0.95em; padding: 0.55em 1.1em; }
.board-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0.4em 0 0.4em; }
.board-head h3 { margin: 0; font-family: var(--serif); font-size: 1.15em; font-weight: 600; }
.board-head span { font-size: 0.75em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.board-list { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: 0.2em; }
.board-list li { display: grid; grid-template-columns: 2em 1fr 4.6em 4.2em; align-items: baseline; gap: 0.5em; padding: 0.35em 0.6em; border-radius: 0.7em; }
.board-list li:nth-child(odd) { background: rgba(75, 58, 72, 0.05); }
.board-list li.you { background: var(--butter); }
.board-list li.empty { display: block; color: var(--ink-soft); font-style: italic; }
.board-list .rank { font-family: var(--serif); font-weight: 700; color: var(--ink-soft); }
.board-list .who { font-family: var(--serif); font-style: italic; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .lvl { font-size: 0.8em; color: var(--ink-soft); }
.board-list .pts { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Map-only layout ---------- */
.stage:not(.view-tower) .compass { display: none; }
.stage:not(.view-tower) .radar-wrap { width: clamp(210px, 21cqw, 380px); }
#viewBtn[hidden] { display: none; }

.stats .time b { font-size: 0.95em; font-style: italic; font-weight: 600; white-space: nowrap; }

/* time-of-day colour wash */
.grade { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; transition: background 0.6s linear; }

/* ---------- Priority flights ---------- */
.tag.priority { border-color: #d9a22e; border-width: 2px; background: #fff6dc; }
.tag.priority small { display: inline; color: #8a5a00; font-weight: 700; }
.tag.priority .dew { display: block; }
.strip.priority { border-color: #d9a22e; background: #fff6dc; }
.strip.priority span:first-of-type { color: #8a5a00; font-weight: 700; }