/* PONDUCK — the HUD.
 *
 * Every panel in the reference is the same object: a hard-edged card with a
 * 2px black border and a solid black shadow offset down-and-right, with a small
 * tab label riding on its top edge. Six of those and a telemetry readout is the
 * whole interface. It is built once here as `.card` + `.tab` and every panel is
 * a use of it — the reference is visibly one component repeated, and copying it
 * as six bespoke panels is how you end up with six slightly different borders.
 *
 * NO WEBFONT
 *   The reference's face is a pixel mono. Shipping one would be the only binary
 *   asset in the game and would flash unstyled text on every load. A system mono
 *   stack with the letter-spacing and the uppercasing dialled in gets close
 *   enough that the difference is invisible at HUD size, and it paints on the
 *   first frame.
 *
 * ⚠ The HUD sits over a WebGL canvas that owns the pointer for camera drag.
 *   #hud is pointer-events:none and only the interactive cards turn it back on.
 *   Drop that and the whole bottom third of the screen silently stops orbiting
 *   the camera, with no visible element to blame.
 */

:root {
  --ink: #101216;
  --card: #f4f1e6;
  --accent: #ff7a1a;
  --accent-ink: #2a1200;
  --dim: #8d9488;
  --panel: rgba(16, 22, 12, 0.82);
  --done: #7fc24a;
  --shadow: 4px 4px 0 #101216;
  --mono: ui-monospace, "SF Mono", "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
}

#hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  font-family: var(--mono);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  /* The safe-area insets keep the corner cards off a notch and off the home
     indicator without a second mobile stylesheet. */
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

/* --------------------------------------------------------------- the card */

.card {
  position: relative;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* The tab rides ON the card's top border, overlapping it by half its height —
   which is why it needs its own background and a z-index, not just a margin. */
.tab {
  position: absolute;
  white-space: nowrap;
  top: -9px;
  left: 6px;
  z-index: 2;
  background: var(--card);
  border: 2px solid var(--ink);
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.25;
}

.tab.right { left: auto; right: 6px; }

button.card {
  pointer-events: auto;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  /* The press moves the card INTO its own shadow. A transform-only press slides
     the card and its shadow together and reads as a wobble, not a click. */
  transition: transform 60ms linear, box-shadow 60ms linear;
}

button.card:active,
button.card.is-press {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}

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

.card.accent { background: var(--accent); color: var(--accent-ink); }

/* ------------------------------------------------------------ the corners */

#hud .corner {
  position: absolute;
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

#nav { top: max(20px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); }
#shop { top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); }

/* ---------------------------------------------------------- the to-do list */

#todo {
  position: absolute;
  top: calc(max(20px, env(safe-area-inset-top)) + 58px);
  right: max(20px, env(safe-area-inset-right));
  width: min(430px, 46vw);
  background: var(--panel);
  border: 2px solid var(--card);
  box-shadow: var(--shadow);
  padding: 14px 16px 12px;
  color: var(--card);
}

#todo .tab { background: var(--card); color: var(--ink); }

#todo ol {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.62;
}

#todo li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  /* The strike-through is drawn on the text span, not the row, so the checkbox
     stays crisp when a task completes. */
}

#todo .box { flex: none; opacity: 0.85; }
#todo li.done .box { color: var(--done); opacity: 1; }
#todo li.done .txt { color: var(--done); opacity: 0.72; text-decoration: line-through; }

/* The win condition sits below a dashed rule, exactly as the reference draws
   it: it is not the tenth chore, it is the reason for the other nine. */
#todo li.final {
  margin-top: 9px;
  padding-top: 10px;
  border-top: 1px dashed rgba(244, 241, 230, 0.45);
}

/* A task that just ticked flashes once. Two frames of attention on a panel the
   player is not looking at is the difference between noticing and not. */
@keyframes tick-flash {
  0% { background: rgba(127, 194, 74, 0.55); }
  100% { background: rgba(127, 194, 74, 0); }
}
#todo li.just { animation: tick-flash 620ms ease-out; }

/* --------------------------------------------------------- the realm chip */

/* A footer inside the to-do panel, so it stays put when the realm adds three
   missions to the list above it. */
#realm {
  display: block;
  width: 100%;
  margin-top: 11px;
  padding-top: 9px;
  border: 0;
  border-top: 1px solid rgba(244, 241, 230, 0.28);
  background: none;
  pointer-events: auto;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--dim);
}

#realm.is-live { color: #ffb87d; }
#realm.is-watch { color: #b6e08c; }
#realm:disabled { cursor: default; }
#realm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#todo li.realm { color: #ffd0ab; }
#todo li.realm .box { color: var(--accent); }

/* -------------------------------------------------------------- the dock */

#dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  padding: 0 max(20px, env(safe-area-inset-left));
}

/* COLOR and MODE hug the left edge, the two buttons stay dead centre and the
   telemetry hugs the right — the reference's layout. The centre group is
   centred by the flex container, and the two side groups are absolute so that
   a long telemetry line can never push QUACK! off centre. */
.dock-group { display: flex; align-items: flex-end; gap: 14px; }
.dock-left { position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: 0; }
.dock-right { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: 2px; }
.dock-mid { gap: 14px; }
/* The two action buttons stay side by side at every width — they are the only
   two controls the game actually needs, and stacking them costs more vertical
   room than the whole rest of the dock. */
.dock-mid { flex-direction: row; flex-wrap: nowrap; }

#swatches .row { display: flex; gap: 8px; }

.swatch {
  pointer-events: auto;
  cursor: pointer;
  width: 44px;
  height: 34px;
  border: 2px solid var(--ink);
  padding: 0;
  background-clip: padding-box;
}

/* The selected swatch gets a light inner ring, not a coloured border: a border
   change moves the layout by a pixel and the whole row shifts when you pick. */
.swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--ink); }

#mode .seg { display: flex; }

.seg button {
  pointer-events: auto;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 9px 16px;
  border: 0;
  background: transparent;
  color: var(--dim);
}

.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* The keycap hints above QUACK! and PICK UP. Small, grey, and unmissable once
   you have looked at them once — which is all a hint has to be. */
.act { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.key {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--dim);
  background: rgba(244, 241, 230, 0.5);
  border: 1px solid var(--dim);
  padding: 1px 5px;
  line-height: 1.3;
}

#quack { font-size: 21px; padding: 13px 30px; letter-spacing: 0.12em; }
#pickup { font-size: 14px; padding: 11px 18px; }

/* A quack flashes the button, because the only other feedback is a puff of
   smoke on a chimney that may well be off screen. */
@keyframes quack-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
#quack.is-quacking { animation: quack-pop 260ms ease-out; }

/* ----------------------------------------------------------- telemetry */

#telemetry {
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.58);
  text-transform: uppercase;
  line-height: 1.5;
  /* Over a light lawn this is nearly invisible and that is correct — it is
     instrumentation, not UI. The shadow is what keeps it readable at all. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

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

#toast {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translateX(-50%);
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 180ms linear;
}

#toast.show { opacity: 1; }
#toast.win { background: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------------- narrow
 *
 * The reference is a desktop shot and has nothing to say about a phone. Below
 * 820px the dock stops being three pinned positions and becomes a stack,
 * because at 320px those three positions are the same position and the cards
 * simply draw on top of one another. Everything else just gets smaller.
 */

@media (max-width: 900px) {
  #todo { width: min(320px, 62vw); padding: 12px 12px 10px; }
  #todo ol { font-size: 11px; line-height: 1.5; }
  #realm { font-size: 9px; }
  #quack { font-size: 17px; padding: 12px 22px; }
  #toast { font-size: 13px; padding: 9px 14px; max-width: min(84vw, 420px); text-align: center; }
}

@media (max-width: 820px) {
  #dock {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* The groups are static again, so the dock's own height is what keeps the
       cards off the bottom edge — `bottom: 0` plus absolute children gave it
       no height at all. */
    position: absolute;
    bottom: max(14px, env(safe-area-inset-bottom));
  }
  .dock-left, .dock-right { position: static; }
  .dock-right { order: -1; }
  .dock-left { order: 1; gap: 8px; flex-wrap: wrap; justify-content: center; }
  #telemetry { text-align: center; font-size: 10px; }
  .swatch { width: 32px; height: 26px; }
  #swatches, #mode { padding: 8px 10px; }
  .seg button { padding: 7px 10px; font-size: 11px; }
  #quack { font-size: 15px; padding: 11px 18px; }
  #pickup { font-size: 12px; padding: 10px 13px; }
  .act { gap: 4px; }
}

@media (max-width: 620px) {
  /* ⚠ The collapsed panel must be at least as wide as its own tab. The tab is
     absolutely positioned and nowrap, so a panel that shrinks to nothing leaves
     "TO-DO 0/10" hanging off the right edge of the screen. */
  #todo { width: auto; max-width: 52vw; }
  #todo.collapsed { min-width: 106px; min-height: 22px; }
  #todo.collapsed ol { display: none; }
  #todo.collapsed #realm { display: none; }
  #todo.collapsed { padding: 12px 12px 6px; }
  #todo { pointer-events: auto; cursor: pointer; }
  #nav .card, #shop .card { font-size: 10px; padding: 6px 8px; letter-spacing: 0.08em; }
  #nav, #shop { top: max(16px, env(safe-area-inset-top)); }
  #toast { top: 12%; font-size: 12px; }
}

/* Very narrow: the swatch row and the mode switch stop fitting side by side. */
@media (max-width: 400px) {
  .dock-left { flex-direction: column; align-items: center; gap: 10px; }
  #quack { font-size: 14px; padding: 10px 14px; }
  #pickup { font-size: 11px; padding: 9px 10px; }
}