/* The canvas owns the screen. The HUD floats over it and never takes a pointer
   unless an element inside it is a control. Cards (the away report, the seed
   pouch) do take pointers while shown, so a tap on them never reaches the map. */
html, body { margin: 0; padding: 0; height: 100%; background: #101512; color: #f1f4ec;
  font: 15px/1.4 "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
#game { position: fixed; inset: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
#game canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
#hud { position: fixed; inset: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
#hud button, #hud a { pointer-events: auto; }
.hud-top { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  background: linear-gradient(rgba(16,21,18,0.85), rgba(16,21,18,0)); font-variant-numeric: tabular-nums; font-size: 13px; }
.stat { white-space: nowrap; }
.stat b:empty::after { content: "·"; opacity: 0.5; }
.stage { margin-left: auto; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.dot.coin { background: #f2c14e; } .dot.relic { background: #9b7bd6; } .dot.wood { background: #b0794a; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.harvest.build { background: #5e7fa8; color: #f1f4ec; }
.harvest[hidden] { display: none; }
.hud-bottom { padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(16,21,18,0), rgba(16,21,18,0.85)); display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; align-items: end; }
.hud-text { display: grid; gap: 6px; min-width: 0; }
.face { width: 64px; height: 64px; border-radius: 16px; background: rgba(255,255,255,0.06); overflow: hidden; }
.face svg { display: block; width: 64px; height: 64px; }
/* The recolour: Noto's yellow shifted toward the harvest orange of the HUD. */
.face { filter: hue-rotate(-14deg) saturate(0.95); }
.links { display: flex; justify-content: flex-end; gap: 6px; }
.links button { border: 0; background: transparent; color: rgba(241,244,236,0.55); font: 12px/1 inherit; font-family: inherit;
  padding: 8px 10px; min-height: 32px; touch-action: manipulation; }
.links button:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
.credits { bottom: calc(60px + env(safe-area-inset-bottom)); font-size: 14px; }
.credits p { margin: 6px 0; }
.line { font-style: italic; min-height: 1.4em; }
.meta { font-size: 13px; opacity: 0.75; font-variant-numeric: tabular-nums; }
.harvest { justify-self: start; min-height: 44px; padding: 8px 18px; border: 0; border-radius: 12px;
  background: #d9722b; color: #14100c; font: inherit; font-weight: 700; touch-action: manipulation; }
.harvest:disabled { background: rgba(255,255,255,0.12); color: rgba(241,244,236,0.6); }
.harvest:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }

.card { position: fixed; left: 12px; right: 12px; z-index: 5; background: #fffcf4; color: #1f2a22;
  border-radius: 14px; padding: 12px 14px 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.35); font-variant-numeric: tabular-nums; }
.card[hidden] { display: none; }
.card h4 { margin: 0 0 6px; font-size: 16px; }
.away { top: calc(64px + env(safe-area-inset-top)); }
.away ul { margin: 0; padding: 0; list-style: none; }
.away li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(0,0,0,0.07); }
.away li:first-child { border-top: 0; }
.away .dismiss { margin-top: 8px; font-size: 12px; color: #6b5b45; text-align: right; }
.away-veil { position: fixed; inset: 0; z-index: 4; }
.away-veil[hidden] { display: none; }
.pouch { bottom: calc(120px + env(safe-area-inset-bottom)); }
.pouch-items { display: grid; gap: 8px; }
.pouch-items button, .pouch-cancel { min-height: 44px; border: 0; border-radius: 10px; font: inherit; text-align: left;
  padding: 8px 12px; background: #eaf0e3; color: #1f2a22; touch-action: manipulation; }
.pouch-items button:focus-visible, .pouch-cancel:focus-visible { outline: 3px solid #d9722b; outline-offset: 2px; }
.pouch-cancel { margin-top: 8px; background: transparent; color: #6b5b45; width: 100%; text-align: center; }

/* The sound offer: one line, two taps, shown once after the first harvest. */
.offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; pointer-events: auto; }
.offer[hidden] { display: none; }
.offer button { min-height: 36px; border: 0; border-radius: 10px; padding: 6px 12px; font: inherit; font-weight: 700;
  background: #eaf0e3; color: #1f2a22; touch-action: manipulation; }
.offer button:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
/* The log: the same card as the credits, one row per entry, a dot where the date is unknown. */
.log ul { margin: 0; padding: 0; list-style: none; max-height: 50vh; overflow-y: auto; }
.log li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(0,0,0,0.07); }
.log li:first-child { border-top: 0; }
.log li.unfound { opacity: 0.45; }
.log .when:empty::after { content: "·"; }
#soundToggle { min-height: 40px; border: 0; border-radius: 10px; font: inherit; padding: 8px 12px; margin-top: 6px;
  background: #eaf0e3; color: #1f2a22; touch-action: manipulation; }
#soundToggle[hidden] { display: none; }

/* The cave: the lineup picker, then the fight (two bars and a log), then the letter. */
.cave { top: calc(64px + env(safe-area-inset-top)); max-height: calc(100vh - 140px); overflow-y: auto; }
.cave-hint { margin: 0 0 8px; font-size: 13px; color: #6b5b45; }
.cave-pick .pouch-items button[aria-pressed="true"] { background: #d9722b; color: #14100c; }
.cave-pick .pouch-items button:disabled { opacity: 0.45; }
.cave-pick .harvest { margin-top: 10px; }
.cave [hidden] { display: none; }
.fight-row { display: flex; justify-content: space-between; font-weight: 700; margin-top: 6px; }
.fight-hp:empty::after { content: "·"; }
.bar { height: 10px; border-radius: 5px; background: rgba(0,0,0,0.08); overflow: hidden; margin: 4px 0 8px; }
.bar i { display: block; height: 100%; width: 100%; background: #b8453a; transform-origin: left; transition: transform 0.25s ease; }
.bar.you i { background: #5e9c4a; }
.fight-log { min-height: 3.2em; font-style: italic; margin: 8px 0; }
.letter-text { white-space: pre-wrap; line-height: 1.5; }

/* A letter, read from a find or again from the log. */
.letter-card { top: calc(64px + env(safe-area-inset-top)); bottom: auto; }
.log li.readable { cursor: pointer; }
.log li.readable span:first-child { text-decoration: underline dotted; text-underline-offset: 3px; }

/* The pill row: the actions an object offers, shown under the line when it is tapped,
   held, or right-clicked. The primary action still happens on the tap; pills carry the rest. */
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills[hidden] { display: none; }
.pills button { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 18px; font: inherit; font-size: 14px;
  background: rgba(255,255,255,0.16); color: #f1f4ec; touch-action: manipulation; }
.pills button:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }