/* Krillion-style layout over the Terraria theme: one world, a clean title at the surface, UI pinned into the world
   (prompt cards, ore seams, results) and docks at the bottom of the screen for input. */

/* ---------- what shows where ---------- */
/* A dig is played in focus. While the miner heads down, a prompt is up or an answer digs ("descend" also covers the
   climb back up between prompts), only the world, the prompt card and the answer box show; the HUD, gauge, depth facts
   and chips come back with each result. There are no side panels: your answers are listed on the summary, and your
   miner, the ores and the landmarks live in the camp's buildings (hub.js). */
#app[data-screen="surface"] .hud,
#app[data-screen="surface"] .gauge,
#app[data-screen="surface"] .facts,
#app:is([data-screen="descend"], [data-screen="prompt"], [data-screen="dig"]) :is(.hud, .gauge, .facts, .tb-right) { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
#app:is([data-screen="descend"], [data-screen="prompt"], [data-screen="dig"]) #btn-menu { display: none; }
#app:is([data-screen="descend"], [data-screen="prompt"], [data-screen="dig"]) .snd:not(:hover, :focus-visible) { opacity: 0.4; }
#app[data-screen="surface"] .lamplight, #app[data-screen="summary"] .lamplight { opacity: 0; }
#app:not([data-screen="surface"]) .acct-chip { opacity: 0.55; }
.gauge, .facts, .tb-right { transition: opacity .4s; }
.depth-shade { transition: opacity .6s; }
#app[data-screen="surface"] .depth-shade { opacity: 0; }

/* ---------- top bar ---------- */
.hud-chip { display: none; }
.topbar { position: absolute; z-index: 6; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 0; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.tb-left, .tb-right { display: flex; gap: 8px; align-items: center; }
/* the top bar's chips wear the camp window's frame (UI round A, "Lantern"): oak wood with the honey bevel, cream-gold
   words, stepped corners, no rounding, no zoom on hover; one look for the menu, sound, coins, account and the dig's boxes */
.icon-btn, .acct-chip, .coin-chip, .pod { --chip-bg: var(--wood-tex) 0 0 / 128px, var(--win);
  --chip-ring: inset 0 0 0 var(--u) var(--win-edge), inset 0 0 0 calc(var(--u) * 2) var(--win-hi), inset 0 calc(var(--u) * -3) 0 calc(var(--u) * 2) rgba(50, 16, 7, 0.35); }
.icon-btn { width: 42px; height: 42px; display: grid; place-content: center; gap: 4px; padding: 0; border: 0; border-radius: 0; clip-path: var(--notch);
  background: var(--chip-bg); box-shadow: var(--chip-ring); color: var(--win-ink); }
.icon-btn:hover, .acct-chip:hover, .coin-chip:hover { background: var(--wood-tex) 0 0 / 128px, var(--amber); }
#btn-menu span { display: block; width: 18px; height: 4px; border-radius: 0; background: var(--win-ink); box-shadow: 0 1px 0 var(--win-edge); }
.icon-btn.snd::before { content: ""; width: 20px; height: 18px; background: var(--win-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2 5h3l4-4v14l-4-4H2z'/%3E%3Crect x='11' y='6' width='2' height='4'/%3E%3Crect x='15' y='3' width='2' height='10'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2 5h3l4-4v14l-4-4H2z'/%3E%3Crect x='11' y='6' width='2' height='4'/%3E%3Crect x='15' y='3' width='2' height='10'/%3E%3C/svg%3E") center / contain no-repeat; }
.icon-btn.snd.off::before { background: var(--ink-faint);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2 5h3l4-4v14l-4-4H2z'/%3E%3Cpath d='M12 5l6 6M18 5l-6 6' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Cpath d='M2 5h3l4-4v14l-4-4H2z'/%3E%3Cpath d='M12 5l6 6M18 5l-6 6' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); }
.acct-chip { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 4px; border: 0; border-radius: 0; clip-path: var(--notch); background: var(--chip-bg);
  box-shadow: var(--chip-ring); color: var(--win-ink); text-decoration: none; font: 700 0.95rem/1 var(--f-label); text-shadow: var(--ol); }
.acct-chip:hover { color: var(--gold); }
/* your profile picture (a 32px portrait: the whole head and hat), centred in its slot */
.acct-av { width: 32px; height: 34px; overflow: hidden; display: block; position: relative; flex: none; }
.acct-av > .avatar { position: absolute; left: 0; top: 1px; }
.acct-av img { image-rendering: pixelated; }

/* HUD pods (only during a dig) */
.hud { position: static; display: flex; align-items: stretch; gap: 8px; padding: 0; transition: opacity .4s; }
.pod { display: grid; justify-items: center; gap: 2px; min-width: 84px; padding: 6px 12px 7px; border: 0; border-radius: 0; clip-path: var(--notch); background: var(--chip-bg);
  box-shadow: var(--chip-ring); }
.pod > small { font: 700 0.68rem/1 var(--f-label); color: var(--ink-faint); text-shadow: var(--ol1); letter-spacing: 0.06em; text-transform: uppercase; }
.pod b { font: 700 1.3rem/1 var(--f-pixel); color: var(--win-ink); text-shadow: var(--ol); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pod b small { font-size: 0.65em; margin-left: 2px; color: var(--ink-dim); }
.pod .ticks { display: flex; gap: 4px; padding-top: 3px; }
.pod .ticks i { width: 13px; height: 11px; border-radius: 0; background: rgba(50, 16, 7, 0.55); border: 1px solid var(--win-edge); }
.pod .ticks i.now { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.pod .ticks i.done:not([style]) { background: var(--ink-faint); }
#hud-score.slam { animation: slam-num .5s steps(5, end); }
@keyframes slam-num { from { transform: scale(1.6); color: var(--gold); } to { transform: none; } }

/* ---------- the stage: docks and panels over the world ---------- */
.stage { inset: 0; padding: calc(env(safe-area-inset-top, 0px) + 64px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); pointer-events: none; }
.stage > .screen { pointer-events: auto; }
.screen.dock { margin: auto auto 0; max-width: 620px; gap: 12px; padding: 16px 18px 18px; }
.screen.enter { animation: dock-in .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes dock-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* the title: just the logo in the sky, and the start dock at the bottom */
#s-surface.hero { max-width: none; width: 100%; height: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 16px; background: transparent; border: 0; box-shadow: none; pointer-events: none; }
/* The heading bobs and the picture inside it carries the glow. With the filter on the moving element itself, the
   browser redid the 30px glow of an 820px logo every frame, for as long as the title showed; on the still picture
   it's drawn once and moves with the heading. */
/* One spacing scale for the title (Colin: the logo and the words mustn't look crammed): the logo stands clear of the
   top bar, the one-liner sits a clear step under it (outside its glow), and the two digs keep a gap between them and
   above the ground's edge. Each step grows with the screen's height, so phones and short screens keep the same rhythm. */
.hero-top { display: grid; justify-items: center; gap: clamp(10px, 2.2vh, 22px); zoom: var(--top-fit, 1); }   /* game.js fitDock: clear of the name tag */
/* the one line that says what the game is, under the logo until a first dig: outlined like the words below */
.hero-line { max-width: min(46ch, 92vw); margin: 0; padding: 0 16px; text-align: center; text-wrap: balance; pointer-events: none;
  font: 700 clamp(1rem, 2.4vw, 1.3rem)/1.45 var(--f-label); color: #fff; text-shadow: var(--ol), 0 3px 0 #000; }
.hero .wordmark.logo { margin-top: clamp(12px, 5vh, 56px); pointer-events: none; animation: logo-bob 4s ease-in-out infinite; }
.hero .wordmark.logo img { width: min(820px, 92vw, 90vh); filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.3)) drop-shadow(0 0 30px rgba(255, 230, 140, 0.25)); }
@keyframes logo-bob { 50% { transform: translateY(-6px); } }
/* The two digs are a game menu, Terraria's title style: outlined words stacked on the dark rock below the camp, no
   buttons or box (#21's rule: nothing else on the title). Only the words take clicks, and each has a 48px tap area.
   At rest both words are white with no glow, and each one's ore floats beside it like a dropped item: gold for today's
   dig, a diamond for endless (the bigger word is the one to play: today's, or endless for a guest, whose daily needs
   an account; game.js renderHero). Under
   the cursor, or a keyboard's or controller's focus, the word turns gold inside a hard pixel rim that pulses, grows
   once with a small bounce, and its ore swings like a pick. A touch never lights a word: the pointer rules leave out
   html[data-input="touch"] and devices without hover. Reduced motion: the ores hold still and a lit word just turns
   gold in its rim. */
.hero-dock { pointer-events: none; display: grid; justify-items: center; margin-bottom: clamp(16px, 5vh, 48px); }
.hero-dock .row { flex-direction: column; align-items: center; gap: clamp(4px, 1vh, 10px); zoom: var(--dock-fit, 1); }   /* game.js fitDock: clear of the name tag */
.hero-dock .row .btn { --rim: #d06a14; pointer-events: auto; display: inline-flex; align-items: center; gap: 0.35em; min-height: 48px; padding: 6px 18px;
  border: 0; border-radius: 0; background: none; box-shadow: none; font: 700 clamp(1.6rem, 4.2vw, 2.3rem)/1 var(--f-pixel); color: #fff;
  text-shadow: var(--ol), 0 4px 0 #000, 0 6px 0 rgba(0, 0, 0, 0.45); transform: none; transition: none;
  /* the rim: a one-pixel band of dark orange just outside the black outline */
  --lit: var(--ol), -3px -3px 0 var(--rim), 3px -3px 0 var(--rim), -3px 3px 0 var(--rim), 3px 3px 0 var(--rim), 0 3px 0 var(--rim), 3px 0 0 var(--rim), -3px 0 0 var(--rim), 0 -3px 0 var(--rim), 0 6px 0 #000; }
.hero-dock .btn.primary { font-size: clamp(2.1rem, 6vw, 3.2rem); }
/* the ore beside each word: it hangs off the left so the words stay centred */
.hero-dock .btn::before { content: ""; flex: none; width: 0.72em; height: 0.72em; margin-left: -1.07em; background: url("art/ore3/diamond.webp") center / contain no-repeat;
  image-rendering: pixelated; filter: drop-shadow(0 3px 0 #000); animation: menu-ore 3.2s ease-in-out infinite; }
#btn-daily::before { background-image: url("art/ore3/gold.webp"); }
/* a guest's longer words ("Play now: endless dig", "Today's dig (free account)") stay on one line on a phone */
.hero-dock.guest .btn { white-space: nowrap; font-size: clamp(1.15rem, 5.4vw, 2.3rem); }
.hero-dock.guest .btn.primary { font-size: clamp(1.5rem, 7.2vw, 3.2rem); }
.hero-dock .btn + .btn::before { animation-delay: -1.6s; }
@keyframes menu-ore { 50% { translate: 0 -3px; } }
/* lit: the keyboard's focus, a controller's, or the cursor (a mouse, never a touch) */
.hero-dock .btn:focus-visible, html[data-input="pad"] #app .hero-dock .btn:focus {
  outline: none; color: var(--gold); text-shadow: var(--lit); animation: menu-grow .3s ease-out both, menu-rim .9s steps(1) infinite; }
.hero-dock .btn:focus-visible::before, html[data-input="pad"] #app .hero-dock .btn:focus::before { animation: menu-swing .7s steps(3) infinite; }
@media (hover: hover) {
  html:not([data-input="touch"]) .hero-dock .btn:hover { color: var(--gold); text-shadow: var(--lit); animation: menu-grow .3s ease-out both, menu-rim .9s steps(1) infinite; }
  html:not([data-input="touch"]) .hero-dock .btn:hover::before { animation: menu-swing .7s steps(3) infinite; }
}
/* the press: a nudge down on `translate`, so the lit word's grow (an animated `transform`) can't override it */
.hero-dock .btn:active { translate: 0 2px; }
/* one small bounce as it lights, then it stays 4% bigger */
@keyframes menu-grow { 0% { transform: scale(1); } 60% { transform: scale(1.055); } 100% { transform: scale(1.04); } }
/* the rim steps between two oranges */
@keyframes menu-rim { 0%, 100% { text-shadow: var(--lit); } 50% { text-shadow: var(--ol), -3px -3px 0 #8f4209, 3px -3px 0 #8f4209, -3px 3px 0 #8f4209, 3px 3px 0 #8f4209, 0 3px 0 #8f4209, 3px 0 0 #8f4209, -3px 0 0 #8f4209, 0 -3px 0 #8f4209, 0 6px 0 #000; } }
/* the pick swing: a plain turn about its foot, so the ore is never seen edge-on */
@keyframes menu-swing { 0%, 100% { rotate: -20deg; } 50% { rotate: 14deg; } }
html[data-motion="reduce"] .hero-dock .btn::before { animation: none !important; }
html[data-motion="reduce"] .hero-dock .btn:focus-visible, html[data-motion="reduce"][data-input="pad"] #app .hero-dock .btn:focus { animation: none; }
@media (hover: hover) { html[data-motion="reduce"]:not([data-input="touch"]) .hero-dock .btn:hover { animation: none; } }
/* Short screens (a phone held sideways): the logo is capped by the height, not the width, so it stops covering the
   camp, and the two digs sit side by side so both stay on screen. */
@media (max-height: 500px) {
  .hero-top { gap: 8px; }
  .hero .wordmark.logo { margin-top: 4px; }
  .hero .wordmark.logo img { width: min(820px, 92vw, 52vh); }   /* the autumn wordmark is taller (1100x395): about the old block's height */
  .hero-line { max-width: min(64ch, 92vw); font-size: clamp(0.85rem, 3.6vh, 1rem); line-height: 1.35; }
  .hero-dock { margin-bottom: 8px; }
  .hero-dock .row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 40px; }
  .hero-dock .row .btn { font-size: clamp(1.1rem, 5vh, 1.4rem); }
  .hero-dock .btn.primary, .hero-dock.guest .btn.primary { font-size: clamp(1.3rem, 6.5vh, 1.7rem); }
  /* the touch pad's buttons sit in the corners, clear of the centred words: no lift needed here */
  html[data-input="touch"] #app[data-screen="surface"] .hero-dock { margin-bottom: 10px; }
}
.btn.big { font-size: 1.4rem; padding: 14px 26px 15px; }

/* the next dock */
.next-dock { background: transparent; border: 0; box-shadow: none; padding: 0; align-items: center; }
.next-dock .row { justify-content: center; }

/* summary panel (at the surface after the ride up) */
#s-summary { margin: auto; max-width: 640px; max-height: 100%; overflow-y: auto; }
#s-summary > * { flex-shrink: 0; }

/* ---------- world-pinned UI ---------- */
.wpins { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; will-change: transform; }
.pin-full { right: 0; }
/* the player's name over the miner (rock.js places it; --s is the world's pixel scale), on the surface only */
/* your name on a small dark plaque, a shade darker than the buildings' signs (hub.css) so it never reads as one */
.hero-tag { translate: -50% -100%; z-index: 1; padding: calc(var(--s, 2) * 1px) calc(var(--s, 2) * 3px); font: 700 calc(var(--s, 2) * 7px)/1 var(--f-label); color: #fff3d6;
  text-shadow: 0 1px 0 #1c0e05; white-space: nowrap; background: #5a3218; clip-path: var(--notch); box-shadow: inset 0 0 0 var(--u, 2px) #1c0e05, inset 0 calc(var(--u, 2px) * 2) 0 #7d4c28; }
.hero-tag[hidden], #app:not([data-screen="surface"]) .hero-tag { display: none; }
.wcard { width: min(calc(560px * var(--ui, 1)), calc(100vw - 32px)); pointer-events: auto; display: grid; gap: 10px; padding: 16px 18px 18px;
  background: var(--panel); border: 2px solid var(--panel-edge); border-radius: var(--radius); box-shadow: inset 0 0 0 2px rgba(150, 170, 255, 0.16), 0 4px 0 rgba(0, 0, 0, 0.45); }
.wcard[hidden] { display: none !important; }
/* The question card (D from the design vote): the question, the answer box, the lamp and Skip in one dark,
   hard-cornered card above the miner, so the eye never travels and a phone keyboard never covers any of it. */
.prompt-card { translate: -50% -100%; width: min(calc(620px * var(--ui, 1)), calc(100vw - 24px)); grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 20px 10px;
  text-align: center; border: 0; border-radius: 0; clip-path: var(--notch); background: var(--wood-tex) 0 0 / 128px, var(--win); backdrop-filter: none;
  box-shadow: inset 0 0 0 var(--u) var(--win-edge), inset 0 0 0 calc(var(--u) * 2) var(--win-hi), inset 0 0 0 calc(var(--u) * 3) var(--win-edge); }
/* the answer is written on parchment (UI round A, "Lantern"): dark ink on cream, the gold ring while you type */
.prompt-card .answer-form input { border: 0; border-radius: 0; clip-path: var(--notch); background: var(--parch-tex) 0 0 / 128px, var(--parch-lit); color: var(--parch-ink);
  text-shadow: none; box-shadow: inset 0 0 0 var(--u) var(--parch-edge), inset 0 3px 0 calc(var(--u) * 1) rgba(122, 74, 42, 0.25); }
.prompt-card .answer-form input::placeholder { color: var(--parch-ink-dim); }
.prompt-card .answer-form input:focus { box-shadow: inset 0 0 0 var(--u) var(--parch-edge), inset 0 0 0 calc(var(--u) * 2) var(--gold), inset 0 0 0 calc(var(--u) * 3) var(--parch-edge); }
.prompt-card .eyebrow { font-size: 1rem; }
.prompt-card .prompt-q { font-size: clamp(1.5rem, 4.4vw, 2.2rem); }
/* the game's goal, under a new player's first two questions (game.js showPrompt) */
.prompt-card .goal-hint { margin: -4px 0 0; font: 700 1rem/1.3 var(--f-label); color: var(--gold); text-shadow: var(--ol1); }
.prompt-card .answer-form { margin-top: 2px; }
.prompt-card .answer-form input { min-height: 52px; font-size: 1.15rem; }
.prompt-card .answer-form .btn { min-height: 52px; padding-inline: 22px; }
/* the lamp: a thick fuse burning down to its seconds, a spark at the burning end (#app's --lamp runs 1 to 0.35) */
.prompt-card .lamp { display: flex; align-items: center; gap: 12px; }
.prompt-card .lamp-bar { position: relative; flex: 1; height: 14px; overflow: visible; border: var(--u) solid var(--win-edge); border-radius: 0; background: rgba(40, 14, 5, 0.9); }
.prompt-card .lamp-bar i { border-radius: 0; }
.prompt-card .lamp-bar::after { content: ""; position: absolute; top: 50%; left: calc((var(--lamp, 1) - 0.35) / 0.65 * 100%); width: 8px; height: 8px; translate: -50% -50%;
  background: #fff6c8; box-shadow: 0 0 0 2px #ffcf4a, 0 0 0 4px rgba(255, 138, 30, 0.85); animation: fuse-spark .3s steps(2) infinite; pointer-events: none; }
@keyframes fuse-spark { 50% { box-shadow: 0 0 0 3px #ffcf4a, 0 0 0 6px rgba(255, 138, 30, 0.6); } }
.prompt-card .lamp.low .lamp-bar::after { background: #ffd2c8; box-shadow: 0 0 0 2px #ff6b4a, 0 0 0 4px rgba(226, 59, 59, 0.85); }
.prompt-card .lamp output { flex: none; min-width: 3.4em; text-align: right; font: 700 1.3rem/1 var(--f-pixel); color: #fff; text-shadow: var(--ol); font-variant-numeric: tabular-nums; }
.prompt-card .lamp.low output { color: #ff9a9a; }
/* a wrong answer costs lamp: the fuse flashes red as it jumps back */
.prompt-card .answer-form.shake ~ .lamp .lamp-bar { animation: fuse-hit .5s steps(4) 1; }
@keyframes fuse-hit { 0%, 50% { border-color: var(--miss); background: rgba(226, 59, 59, 0.55); } }
.prompt-card .feedback { min-height: 0; margin: 0; font: 700 1rem/1.35 var(--f-label); color: #ff9a9a; text-shadow: var(--ol1); }
.prompt-card .feedback:empty { display: none; }
.prompt-card .feedback.messiah { color: var(--gold); }
.prompt-card .skip { justify-self: center; min-height: 44px; padding-inline: 12px; }
/* While the Miner Messiah rules on an off-list answer the lamp is paused (html[data-ruling="pending"]): the spark
   stops and turns icy, the fuse greys a step, and a pause mark sits by the seconds, so it reads as time standing still. */
html[data-ruling="pending"] .prompt-card .lamp-bar::after { animation: fuse-held 1s steps(2) infinite; background: #eaf8ff; box-shadow: 0 0 0 2px #9fd4ff, 0 0 0 4px rgba(120, 180, 255, 0.7); }
@keyframes fuse-held { 50% { box-shadow: 0 0 0 2px #9fd4ff, 0 0 0 6px rgba(120, 180, 255, 0.45); } }
html[data-ruling="pending"] .prompt-card .lamp-bar i { filter: saturate(0.35) brightness(1.15); }
html[data-ruling="pending"] .prompt-card .lamp output { color: #bfe6ff; }
html[data-ruling="pending"] .prompt-card .lamp output::before { content: ""; display: inline-block; width: 4px; height: 0.7em; margin-right: 14px; vertical-align: 0.05em;
  background: currentColor; box-shadow: 7px 0 0 currentColor, 0 0 0 1px #000, 7px 0 0 1px #000; }
html[data-motion="reduce"] .prompt-card .lamp-bar::after, html[data-motion="reduce"] .prompt-card .answer-form.shake ~ .lamp .lamp-bar { animation: none; }
/* The result card (the Lantern UI, Colin's pick A): a parchment card in a wood frame whose inner ring is the ore's
   colour. Top to bottom: the ore and its name with the points on the right, what you answered, a cheeky line, any
   achievements it earned, and one footer line: a new zone on the left, "What others said" folded on the right. The
   dig's depth, score and progress are the HUD's, so the card doesn't repeat them. */
.land-card { --zc: var(--gold); --lc-ink: var(--parch-ink, #321007); --lc-dim: var(--parch-ink-dim, #7a4a2a); --lc-edge: var(--parch-edge, #522919);
  width: min(calc(560px * var(--ui, 1)), calc(100vw - 32px)); gap: 10px; padding: 16px 20px 12px; translate: -50% 0; overscroll-behavior: contain;
  border: 10px solid transparent; border-radius: 0; clip-path: var(--notch); backdrop-filter: none; color: var(--lc-ink);
  background: var(--parch-tex) 0 0 / 128px padding-box, linear-gradient(var(--parch, #f1d6a7), var(--parch, #f1d6a7)) padding-box,
    var(--wood-tex) 0 0 / 128px border-box, linear-gradient(var(--win), var(--win)) border-box;
  outline: var(--u) solid var(--win-edge); outline-offset: calc(var(--u) * -1);
  box-shadow: inset 0 0 0 var(--u) var(--win-edge), inset 0 0 0 calc(var(--u) * 2) var(--zc), inset 0 0 0 calc(var(--u) * 3) var(--lc-edge); }
.land-card p { margin: 0; }
.land-card, .land-card * { text-shadow: none; }
.land-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.land-card .strike { gap: 12px; min-width: 0; }
.land-card .strike img { width: 56px; filter: none; }
.land-card .zone-name { color: var(--zc); font-size: clamp(2.2rem, 7vw, 2.8rem); text-shadow: var(--ol); }
.land-card .pts { flex: none; font: 700 clamp(1.5rem, 4.6vw, 1.8rem)/1 var(--f-num, var(--f-label)); color: var(--amber-lo, #5b2510); font-variant-numeric: tabular-nums; }
.land-card .pts.zero { color: var(--lc-dim); }
/* achievements this answer earned, as rows on the card: nothing pops up over a dig (toasts.js tiers and badges) */
.ach-rows { display: grid; gap: 6px; }
.ach-rows[hidden] { display: none; }
.ach-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px 14px 6px 6px; clip-path: var(--notch); text-align: left;
  background: var(--parch-lit, #f6daaf); box-shadow: inset 0 0 0 var(--u) var(--lc-edge), inset 0 0 0 calc(var(--u) * 2) var(--tc); }
.ach-row .ach-slot { display: grid; place-items: center; width: 44px; height: 44px; clip-path: var(--notch); background: var(--well, #5f321d); }
.ach-row .ach-tx { display: grid; gap: 2px; min-width: 0; }
.ach-row small { font: 700 0.875rem/1.1 var(--f-label); color: var(--lc-dim); }
.ach-row b { font: 700 1.1rem/1.15 var(--f-label); color: var(--lc-ink); }
.said-by-you { display: grid; gap: 4px; }
.land-card .your-answer { font: 700 clamp(1.25rem, 3.6vw, 1.45rem)/1.2 var(--f-label); color: var(--lc-ink); overflow-wrap: anywhere; }
.land-card .your-answer small { display: block; margin-top: 2px; font: 700 0.85rem/1.2 var(--f-label); color: var(--lc-dim); }
.land-card .your-answer .none { font-size: 1.1rem; color: var(--lc-dim); }
.land-card .quip { font: 600 1.02rem/1.4 var(--f-text); color: var(--lc-dim); }

/* the footer line: a zone this answer reached first on the left, "What others said" on the right, and the two lists
   opening under the whole line (they follow the <details>, which holds only its summary, so the row never moves) */
.land-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding-top: 8px;
  box-shadow: inset 0 var(--u) 0 color-mix(in srgb, var(--lc-edge) 40%, transparent); }
.land-card .zone-found { grid-column: 1; font: 700 0.98rem/1.25 var(--f-label); color: var(--lc-dim); }
.land-card .zone-found[hidden] { display: none; }
.land-card .zone-found b { font: 700 1rem/1.25 var(--f-label); text-shadow: var(--ol1); }
.land-card details.more { grid-column: 2; grid-row: 1; }
.land-foot > .more-body { grid-column: 1 / -1; display: none; }
.land-foot > details.more[open] ~ .more-body { display: grid; }
.land-card details.more summary { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 40px; cursor: pointer; list-style: none;
  font: 700 0.98rem/1.2 var(--f-label); color: var(--lc-dim); }
.land-card details.more summary::-webkit-details-marker { display: none; }
.land-card details.more summary::after { content: "›"; font-size: 1.2rem; line-height: 1; transition: rotate .15s; }   /* every fold's mark (hub.css .ac-more) */
.land-card details.more[open] summary::after { rotate: 90deg; }
html[data-motion="reduce"] { .land-card details.more summary::after { transition: none; } }
.land-card details.more summary:hover, .land-card details.more summary:focus-visible { outline: none; color: var(--amber, #a25522); text-decoration: underline 2px; text-underline-offset: 4px; }
.more-body { display: grid; gap: 16px; margin-top: 8px; }
.more-body h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; font: 700 1rem/1.2 var(--f-label); color: var(--lc-ink); }
.more-body h3 small { font: 700 0.8rem/1.2 var(--f-label); color: var(--lc-dim); }
.more-body [hidden] { display: none; }
.more-body .odds { margin: -2px 0 8px; font: 700 0.95rem/1.25 var(--f-label); color: var(--lc-dim); }
/* the most common answers: each row is its own bar, filled in its ore's colour as far as its share goes */
.said-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.said-row { display: grid; grid-template-columns: 1.4rem 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; clip-path: var(--notch);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, var(--parch-lit, #f6daaf)) var(--w), var(--parch-lit, #f6daaf) var(--w));
  box-shadow: inset 0 0 0 var(--u) var(--lc-edge); font: 700 1.02rem/1.2 var(--f-label); color: var(--lc-ink); }
.said-row .rk { font: 700 0.85rem/1 var(--f-num, var(--f-label)); color: var(--lc-dim); text-align: right; font-variant-numeric: tabular-nums; }
.said-row img { width: 26px; height: 26px; image-rendering: pixelated; }
.said-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.said-row .nm em { margin-left: 8px; padding: 2px 7px 3px; background: var(--amber, #a25522); color: #fff1d6; font: 700 0.72rem/1 var(--f-label);
  font-style: normal; text-transform: uppercase; letter-spacing: 0.06em; vertical-align: 2px; }
.said-row .pc { font: 700 0.95rem/1 var(--f-num, var(--f-label)); font-variant-numeric: tabular-nums; }
.said-row.you { box-shadow: inset 0 0 0 var(--u) var(--lc-edge), inset 0 0 0 calc(var(--u) * 2) var(--gold); }
.said-gap { text-align: center; color: var(--lc-dim); font-weight: 700; line-height: 0.7; letter-spacing: 0.3em; }
.said-you { margin-top: 8px !important; font: 700 0.95rem/1.3 var(--f-label); color: var(--lc-dim); }
/* rare answers: ore, answer and points, one tile each */
.rare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rare-grid li { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; clip-path: var(--notch); background: var(--parch-lit, #f6daaf);
  box-shadow: inset 0 0 0 var(--u) var(--lc-edge), inset 0 0 0 calc(var(--u) * 2) color-mix(in srgb, var(--c) 70%, transparent); }
.rare-grid img { flex: none; width: 34px; height: 34px; image-rendering: pixelated; }
.rare-grid span { display: grid; gap: 2px; min-width: 0; }
.rare-grid b { font: 700 1.02rem/1.2 var(--f-label); color: var(--lc-ink); overflow-wrap: anywhere; }
.rare-grid small { font: 700 0.82rem/1.2 var(--f-label); color: var(--lc-dim); }
/* on a wide screen the open card widens: your result stays on the left and what other miners said opens on the
   right, so the card stays short enough to fit above the Next button without scrolling */
@media (min-width: 900px) {
  .land-card:has(details.more[open]) { width: min(calc(940px * var(--ui, 1)), calc(100vw - 2 * var(--gauge-w, 60px) - 24px));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-content: start; column-gap: 26px; }
  .land-card:has(details.more[open]) > :not(.land-foot), .land-card:has(details.more[open]) .land-foot > :not(.more-body) { grid-column: 1; grid-row: auto; }
  .land-card:has(details.more[open]) .land-foot { display: contents; }
  .land-card:has(details.more[open]) details.more summary { justify-content: flex-start; }
  .land-card:has(details.more[open]) .land-foot > .more-body { grid-column: 2; grid-row: 1 / span 8; align-self: start; margin-top: 0; }
}
@media (max-width: 480px) {
  .land-card { padding: 12px 14px 10px; gap: 8px; border-width: 8px; }
  .land-card .strike img { width: 44px; }
  .rare-grid { grid-template-columns: 1fr; }
}
.wcard.enter { animation: card-in .5s cubic-bezier(.2, .9, .3, 1.2); }
.land-card.enter { animation: card-slam .55s steps(8, end); }
@keyframes card-in { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
@keyframes card-slam { 0% { opacity: 0; scale: 1.25; } 60% { opacity: 1; scale: 0.97; } 100% { scale: 1; } }
.wcard.gone { animation: card-out .45s ease-in forwards; pointer-events: none; }
@keyframes card-out { to { opacity: 0; scale: 0.92; } }

/* ore seams: each tier's vein is in the rock itself (rock.js); a tag beside it says which ore and how rare */
.seam { height: 0; opacity: 0; animation: seam-in .5s ease-out forwards; }
.seam-tag { position: absolute; left: calc(50% + clamp(56px, 11vw, 150px)); bottom: -2px; display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 8px;
  background: rgba(40, 14, 5, 0.78); border: 2px solid var(--win-edge); font: 700 0.8rem/1 var(--f-label); color: var(--lc); text-shadow: var(--ol1); white-space: nowrap; opacity: 0.8; }
.seam-tag::before { content: ""; position: absolute; right: 100%; top: 50%; width: clamp(14px, 4vw, 40px); border-top: 2px dotted color-mix(in srgb, var(--lc) 70%, transparent); }
.seam-tag img { width: 22px; height: 22px; image-rendering: pixelated; }
.seam-tag small { color: var(--ink-faint); font-weight: 700; }
.seam.passed .seam-tag { opacity: 1; border-color: var(--lc); color: #fff; box-shadow: 0 0 14px color-mix(in srgb, var(--lc) 60%, transparent); animation: tag-pop .35s steps(4, end); }
.seam.passed .seam-tag::before { border-top-style: solid; border-top-color: var(--lc); }
/* the next seam down, after the strike: how close the answer came */
.seam.next .seam-tag { opacity: 1; border-color: #fff; animation: tag-next .9s ease-in-out infinite alternate; }
.seam.gone { animation: seam-out .6s ease-in forwards; }
.seam.next.gone { animation: seam-out .6s ease-in 1s forwards; }
/* the answer is passing this tag (fx.js shyOf): it steps back until the answer has gone by */
.seam.shy .seam-tag { opacity: 0.12; }   /* at once: the answer moves too fast for a fade */
@keyframes seam-in { to { opacity: 1; } }
@keyframes seam-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes tag-pop { from { scale: 1.35; } to { scale: 1; } }
@keyframes tag-next { from { box-shadow: 0 0 0 color-mix(in srgb, var(--lc) 70%, transparent); } to { box-shadow: 0 0 18px var(--lc); } }

/* the answer, riding above the miner's head */
.dig-chip { translate: -50% -100%; padding: 5px 12px; border-radius: 0; clip-path: var(--notch); background: var(--wood-tex) 0 0 / 128px, var(--win); border: 0;
  box-shadow: inset 0 0 0 var(--u) var(--win-edge), inset 0 0 0 calc(var(--u) * 2) var(--gold), inset 0 0 0 calc(var(--u) * 3) var(--win-edge);
  font: 700 clamp(1rem, 3.4vw, 1.35rem)/1.1 var(--f-pixel); color: #fff; text-shadow: var(--ol); white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; }
/* pinned elements are placed with an inline transform, so their animations must use scale/opacity, never transform */
.dig-chip.landed { animation: chip-pop .35s steps(4, end); }
@keyframes chip-pop { from { scale: 1.35; } to { scale: 1; } }
.dig-chip.gone { animation: card-out .4s ease-in forwards; }

/* each broken seam's ore flies into the miner (fx.js moves it), and its name floats up, Terraria-style */
.pick-ore { translate: -50% -50%; width: 26px; height: 26px; image-rendering: auto; filter: drop-shadow(0 0 6px var(--lc, #fff)) drop-shadow(0 2px 0 #000); }
.pick-text { translate: 0 -100%; font: 700 clamp(0.95rem, 2.6vw, 1.15rem)/1 var(--f-pixel); color: var(--lc); text-shadow: var(--ol); white-space: nowrap; pointer-events: none;
  animation: pick-rise 1.3s cubic-bezier(.2, .7, .3, 1) forwards; }
/* it fades in where it stands, just above the answer (fx.js popY), then rises: no grow-in, which spread it onto the answer */
@keyframes pick-rise { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; translate: 0 calc(-100% - 38px); } }
/* The strike (D from the design vote), an item get: the ore leaps out and is held up over the miner on hard-edged,
   stepped rays in its colour, and a plaque at their feet names it. fx.js sets --rank (0 for Dirt to 1 for the rarest),
   so rarer ores stand bigger on longer rays, and --per, the angle between rays (closer for rarer ores). The rays turn
   on a child: the pinned holder is placed with an inline transform, so turning it would swing it off the miner. */
.ore-get { --ow: calc(clamp(56px, 9vw, 84px) * (1 + var(--rank, 0) * 0.25)); translate: -50% -100%; width: var(--ow); pointer-events: none;
  animation: ore-leap .7s cubic-bezier(.2, 1.4, .4, 1) both, ore-bob 1.6s ease-in-out .7s infinite alternate; }
.ore-get .ore-pop { position: relative; display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 0 #000); }
@keyframes ore-leap { 0% { scale: 0.2; opacity: 0; translate: -50% 10%; } 40% { opacity: 1; } 100% { scale: 1; translate: -50% -100%; } }
@keyframes ore-bob { to { translate: -50% calc(-100% - 6px); } }
.ore-rays { position: absolute; left: 50%; top: 50%; width: calc(var(--ow) * (2 + var(--rank, 0) * 1.4)); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--lc) 80%, transparent) 0 calc(var(--per, 30deg) / 3), transparent calc(var(--per, 30deg) / 3) var(--per, 30deg));
  -webkit-mask: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0.55) 31% 62%, transparent 63%); mask: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, 0.55) 31% 62%, transparent 63%);
  animation: rays-turn 2.4s steps(12) infinite; }
/* the mythical ores get a second, wider ring turning the other way */
.ore-rays.outer { width: calc(var(--ow) * 4.4); opacity: 0.6; animation-direction: reverse;
  -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 53% 74%, transparent 75%); mask: radial-gradient(closest-side, transparent 52%, #000 53% 74%, transparent 75%); }
@keyframes rays-turn { to { rotate: var(--per, 30deg); } }
/* the plaque at the miner's feet: the ore's name and its points on the window's walnut, edged in its colour */
.ore-plaque { translate: -50% 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 14px; max-width: calc(100vw - 24px);
  padding: 10px 20px 12px; clip-path: var(--notch); background: var(--wood-tex) 0 0 / 128px, var(--win); white-space: nowrap; pointer-events: none;
  box-shadow: inset 0 0 0 var(--u) var(--win-edge), inset 0 0 0 calc(var(--u) * 2) var(--lc); animation: plaque-in .3s steps(3, end) .15s both; }
.ore-plaque b { font: 700 clamp(1.9rem, 5vw, 2.6rem)/1 var(--f-pixel); color: var(--lc); text-shadow: var(--ol); }
.ore-plaque em { font: 700 clamp(1.6rem, 4.2vw, 2.1rem)/1 var(--f-pixel); font-style: normal; color: #fff; text-shadow: var(--ol); }
.ore-plaque small { flex-basis: 100%; margin-top: 4px; text-align: center; font: 700 1rem/1.2 var(--f-label); color: var(--ink-dim); text-shadow: var(--ol1); }
.ore-plaque.mythic { box-shadow: inset 0 0 0 var(--u) var(--win-edge), inset 0 0 0 calc(var(--u) * 2) var(--gold), inset 0 0 0 calc(var(--u) * 3) var(--win-edge),
  inset 0 0 0 calc(var(--u) * 4) var(--lc); }
/* sparkle on the mythical plaque: two pixels twinkling in its corners */
.ore-plaque.sparkle::before, .ore-plaque.sparkle::after { content: ""; position: absolute; width: 4px; height: 4px; background: #fff6c8;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lc) 70%, transparent); animation: twinkle .9s steps(2) infinite; }
.ore-plaque.sparkle::before { left: 12px; top: 10px; }
.ore-plaque.sparkle::after { right: 14px; bottom: 12px; animation-delay: .45s; }
@keyframes plaque-in { from { opacity: 0; } }   /* opacity only: scaling a pinned element would slide it off its spot */
@keyframes twinkle { 50% { opacity: 0; } }
/* the struck seam's own tag steps aside: the plaque names the ore now */
.seam.struck .seam-tag { visibility: hidden; }
.pick-ore.gone, .ore-get.gone, .ore-plaque.gone, .pick-text.gone { animation: card-out .4s ease-in forwards; }

/* hold to skip: a small ring in the corner that fills while Space (or a finger) is held */
.hold-skip { position: absolute; z-index: 6; right: calc(env(safe-area-inset-right, 0px) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(40, 14, 5, 0.6); border: 2px solid var(--win-edge); color: var(--ink-dim);
  font: 700 0.8rem/1 var(--f-label); text-shadow: var(--ol1); pointer-events: none; opacity: 0; translate: 0 8px; transition: opacity .3s, translate .3s; --p: 0; }
.hold-skip.on { opacity: 0.85; translate: 0 0; }
.hold-skip.held { opacity: 1; color: #fff; }
.hold-skip svg { width: 28px; height: 28px; rotate: -90deg; }
.hold-skip circle { fill: none; stroke-width: 4; }
.hold-skip .track { stroke: rgba(255, 255, 255, 0.18); }
.hold-skip .fill { stroke: var(--gold); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); stroke-linecap: round; }
.hold-skip .for-touch, .hold-skip .for-pad, html[data-input="touch"] .hold-skip .for-kbd, html[data-input="pad"] .hold-skip .for-kbd { display: none; }
html[data-input="touch"] .hold-skip .for-touch, html[data-input="pad"] .hold-skip .for-pad { display: inline; }
.hold-skip kbd { font: 700 0.72rem/1 var(--f-label); padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; }

/* the strike overlay only carries the flash and rings now */
.fx.strike-only { inset: 0; background: none; pointer-events: none; }
.fx.strike-only > :not(.fx-flash):not(.fx-ring) { display: none; }

/* the Mateus easter egg: the miner art is a tall 2:3 sprite now, so size it by height (whole multiples of 48px) */
.fx.egg .fx-land img { width: auto; height: 288px; max-height: 40vh; }
@media (max-height: 700px) { .fx.egg .fx-land img { height: 192px; } }

/* depth facts alternate sides, Krillion-style */
.facts .fact.l { right: auto; left: calc(var(--gauge-w) + 12px); flex-direction: row-reverse; text-align: left; }

/* ---------- the menu (menu.js): a pause column in the camp window's pixel look ---------- */
/* flat fills and stepped corners like hub.css, no blur, and gold only for the cursor */
.menu { padding: 0; margin: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; overflow: hidden; }
/* a plain dim, no blur: the world keeps moving under it (see terra.css on panels) */
.menu::backdrop { background: rgba(20, 8, 2, 0.72); }
/* the title's two digs step aside while the menu is up (opacity too: their ore marker sets its own visibility) */
html.menu-open :is(.hero-dock, .hero-line) { visibility: hidden; opacity: 0; }
/* and under a camp window or the trading post, so their words never peek out below its bottom edge */
#app:has(dialog.hub[open]) :is(.hero-dock, .hero-line) { visibility: hidden; opacity: 0; }
/* UI round A ("Lantern", Colin's pick): a wood board (the camp window's frame) holding one parchment card of rows,
   dark brown words, an amber arrow for the cursor; the footer in cream on the wood below the card */
.menu-panel { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: min(420px, calc((100vw - 20px) / var(--ui, 1))); max-height: calc((100dvh - 20px) / var(--ui, 1));
  overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 52px calc(var(--u) * 5) 0;
  background: var(--wood-tex) 0 0 / 128px, var(--win); clip-path: var(--notch);
  box-shadow: inset 0 0 0 var(--u) var(--win-edge), inset 0 0 0 calc(var(--u) * 2) var(--win-hi), inset 0 0 0 calc(var(--u) * 3) var(--win-edge); animation: hub-in .16s cubic-bezier(0, 0, .2, 1); }
/* the × on the camp window and the trading post (hub.css and shop.css size and place it per window) */
.menu-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; width: 36px; height: 36px; border-radius: 8px; border: 2px solid var(--panel-edge);
  background: var(--slot); color: #fff; font: 700 1.4rem/1 var(--f-label); text-shadow: var(--ol1); }
/* the menu's own ×: on the board's top strip, like the windows' header row (it stays the list's last child: coop.js
   puts its Leave row before it) */
.menu-x { position: absolute; top: 8px; right: 10px; z-index: 1; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 0; clip-path: var(--notch);
  background: var(--amber); box-shadow: inset 0 calc(var(--u) * -2) 0 var(--amber-lo), inset 0 0 0 var(--u) var(--win-edge); cursor: pointer;
  font: 700 1.35rem/1 var(--f-label); color: var(--win-ink); text-shadow: var(--ol1); }
.menu-x:hover, .menu-x:focus-visible { outline: none; color: var(--gold); background: var(--amber-hi); }
.mn-list { display: grid; padding: 6px 0; background: var(--parch-tex) 0 0 / 128px, var(--parch); box-shadow: inset 0 0 0 var(--u) var(--parch-edge); }   /* no clip-path: the × inside it sits on the board above */
.mn-group { display: grid; padding: 2px 0; }
.mn-group + .mn-group { margin-top: 4px; padding-top: 6px; box-shadow: inset 0 var(--u) 0 rgba(122, 74, 42, 0.35); }
.menu .mn-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 2px 18px 2px 40px; border: 0; border-radius: 0; background: none;
  cursor: pointer; text-align: left; text-decoration: none; font: 700 1.25rem/1 var(--f-label); color: var(--parch-ink); text-shadow: none; }
.menu .mn-row:focus, html[data-input="pad"] #app .menu .mn-row:focus { outline: none; }   /* the amber arrow is the cursor */
/* the cursor: a stepped amber arrow at the left, and the row lit */
.menu .mn-row::before { content: ""; position: absolute; left: 16px; top: 50%; width: 10px; height: 16px; margin-top: -8px; background: var(--amber); opacity: 0;
  clip-path: polygon(0 0, 20% 0, 20% 12.5%, 40% 12.5%, 40% 25%, 60% 25%, 60% 37.5%, 80% 37.5%, 80% 50%, 100% 50%, 80% 50%, 80% 62.5%, 60% 62.5%, 60% 75%, 40% 75%, 40% 87.5%, 20% 87.5%, 20% 100%, 0 100%); }
.menu .mn-row.on, .menu .mn-row:hover { color: var(--amber-lo); background: rgba(162, 85, 34, 0.16); }
.menu .mn-row.on::before, .menu .mn-row:hover::before { opacity: 1; animation: mn-nudge .8s steps(2, jump-none) infinite; }
@keyframes mn-nudge { 50% { transform: translateX(var(--u)); } }
/* each row's building (or a gear), fitted into one box */
.mn-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; }
.mn-ico > img { max-width: 40px; max-height: 40px; width: auto; height: auto; image-rendering: pixelated; }
.mn-ico [data-avatar] { position: relative; display: block; overflow: hidden; clip-path: var(--notch); }
.mn-gear { width: 30px; height: 30px; }
.mn-label { flex: 1; min-width: 0; white-space: nowrap; }
.mn-side { display: inline-flex; align-items: center; gap: 6px; font: 700 1.05rem/1 var(--f-label); color: var(--parch-ink-dim); text-shadow: none; white-space: nowrap; }
.mn-side.ready { color: #3f7a1f; }
.mn-side.done { color: var(--parch-ink-dim); }
.mn-side.faint { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; color: var(--parch-ink-dim); font-size: 1rem; }
.mn-side.coins b { color: var(--parch-ink); font-variant-numeric: tabular-nums; }
.mn-side .coin-ico { width: max(35px, calc(35px / var(--ui, 1))); height: max(30px, calc(30px / var(--ui, 1))); }
/* The footer: one quiet, centred block. Wavy, then the credit on two small lines, then Privacy · Terms, all in the same
   small dim type. The links keep a 44px tap height. No key hints: the keys work without being shown (menu.js). */
.mn-foot { display: grid; justify-items: center; gap: 2px; padding: 12px 16px 4px; text-align: center; }
.studio-credit { margin: 0; font: 700 0.8rem/1.3 var(--f-label); color: var(--ink-dim); text-shadow: var(--ol1); text-align: center; }
.mn-foot .studio-credit { display: grid; justify-items: center; gap: 4px; font-size: 0.78rem; line-height: 1.35; }
.mn-foot .credit-words span { display: block; }
.menu-legal { display: flex; align-items: center; justify-content: center; gap: 2px; margin: 0; font: 700 0.78rem/1 var(--f-label); color: var(--ink-dim); text-shadow: var(--ol1); }
.menu-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink-dim); text-shadow: var(--ol1); }
.menu-legal a:hover, .menu-legal a:focus-visible { color: var(--gold); }
/* Wavy, the studio's whale (scripts/wavy-logo.mjs draws public/art/brand/wavy-spout.png): its spout plays, then it
   rests. Tapping it five times is a secret (game.js). */
.wavy { flex: none; width: 38px; height: 43px; margin: -6px 0 -4px; padding: 0; border: 0; background: url(art/brand/wavy-spout.png) 0 0 / 304px 43px no-repeat;
  image-rendering: pixelated; cursor: pointer; animation: wavy-spout 3s step-end infinite; }
.wavy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@keyframes wavy-spout { 0% { background-position: 0px 0; } 4.67% { background-position: -38px 0; } 8.33% { background-position: -76px 0; } 12% { background-position: -114px 0; } 17.33% { background-position: -152px 0; } 21.33% { background-position: -190px 0; } 25.33% { background-position: -228px 0; } 29.67% { background-position: -266px 0; } 38.33%, 100% { background-position: 0 0; } }
html[data-motion="reduce"] .wavy { animation: none; }
@media (max-width: 480px) {
  .menu-panel { width: calc((100vw - 16px) / var(--ui, 1)); max-height: calc((100dvh - 16px) / var(--ui, 1)); }
  .menu .mn-row { min-height: 48px; padding-left: 36px; font-size: 1.15rem; gap: 10px; }
  .menu .mn-row::before { left: 13px; }
  .mn-ico { width: 34px; height: 34px; }
  .mn-ico > img { max-width: 34px; max-height: 34px; }
  .mn-side { font-size: 1rem; }
}

/* ---------- flying (wings, rock.js): marks in the sky, a clear view up high, the touch dive button ---------- */
/* rock.js sets #app.aloft while the miner is well off the ground: the logo and start dock step aside until they land */
/* "Next dig in 5h 12m" under the dig buttons once today's is dug (progress.js) */
.hero-dock .next-dig { margin: 4px 0 0; text-align: center; font: 700 1rem/1.3 var(--f-label); color: #fff; text-shadow: var(--ol); }
.hero .wordmark, .hero-line, .hero-dock { transition: opacity .35s, visibility 0s; }
#app.aloft :is(.hero .wordmark, .hero-line, .hero-dock) { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
#app.aloft .hero .wordmark { animation-play-state: paused; }
.skyfact { display: flex; justify-content: flex-end; padding: 0 14px; pointer-events: none; }
.skyfact.l { justify-content: flex-start; }
.skyfact span { display: flex; align-items: center; gap: 8px; margin-top: -0.65em; max-width: min(42vw, 320px); font: 700 0.8rem/1.25 var(--f-label); color: var(--ink);
  text-shadow: 0 2px 0 #000, 0 0 6px #000; text-align: right; }
.skyfact.l span { flex-direction: row-reverse; text-align: left; }
.skyfact span::after { content: ""; width: 28px; flex: none; border-top: 2px dashed rgba(255, 246, 230, 0.6); }
.skyfact b { color: var(--gold); flex: none; white-space: nowrap; }

@media (max-width: 560px) {
  #app:not([data-screen="surface"]) .tb-right { display: none; }
  #app:not([data-screen="surface"]) .snd { display: none; }
  .topbar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .hud { gap: 5px; flex: 1; justify-content: flex-end; }
  .pod.mid > small { display: none; }
  .pod { min-width: 0; padding: 4px 8px 5px; }
  .pod b { font-size: 1.05rem; }
  .pod .ticks i { width: 7px; }
  .acct-chip #acct-name { display: none; }
  .acct-chip { padding: 0 4px; }
  .mn-side .coin-ico { width: max(18px, calc(18px / var(--ui, 1))); height: max(15px, calc(15px / var(--ui, 1))); }   /* the small coin, so "Trading post" keeps its line */
  .seam-tag small { display: none; }
  .btn.big { font-size: 1.2rem; padding: 12px 18px 13px; }
  .facts .fact.l { left: 8px; }
}
html[data-motion="reduce"] {
  .hero .wordmark.logo, .wcard.enter, .land-card.enter, .seam, .seam.passed .seam-tag, .seam.next .seam-tag, .ore-get, .ore-rays, .ore-plaque { animation: none; opacity: 1; }
  /* the gentle dig (fx.js, reduced motion): the struck ore and its plaque fade in where they stand, and each ore picked
     up on the way shows its name at the miner for a moment; nothing leaps, turns, bobs, rises or scales */
  .ore-get.gentle, .ore-plaque.gentle { animation: gentle-in .45s ease-out both; }
  .pick-text.gentle { animation: gentle-blink 1.3s ease both; }
  .ore-get.gentle.gone, .ore-plaque.gentle.gone, .pick-text.gentle.gone { animation: gentle-out .35s ease-in forwards; }
}
@keyframes gentle-in { from { opacity: 0; } }
@keyframes gentle-out { to { opacity: 0; } }
@keyframes gentle-blink { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* on the result card: a zone this answer reached for the first time */
/* The Holy Ore's catch (holy.js): the strike's item get, bigger, over a dimmed camp with a clear patch on the ore.
   The camp's menu and prompts step aside meanwhile, and can't be pressed by the tap that ends it. */
.holy-get { --ow: clamp(120px, 15vw, 176px); }
.holy-dim { position: absolute; inset: 0; z-index: 2; pointer-events: none; animation: holy-dim-in .3s ease-out;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 40%), transparent 0 80px, rgba(6, 8, 24, 0.5) 240px, rgba(6, 8, 24, 0.6)); }
.holy-dim.gone { opacity: 0; transition: opacity .35s; }
@keyframes holy-dim-in { from { opacity: 0; } }
.holy-flash { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient(circle at 50% 40%, rgba(255, 228, 140, 0.55), rgba(255, 228, 140, 0) 60%); animation: holy-flash .6s ease-out forwards; }
@keyframes holy-flash { to { opacity: 0; } }
#app.catching :is(.hero-dock, .hub-prompt, .hero-tag, .toast-stack) { opacity: 0; }
#app.catching :is(.hero-dock, .hub-prompt) :is(button, a, .btn) { pointer-events: none; }
html[data-motion="reduce"] .holy-dim { animation: none; }
html[data-flash="off"] .holy-flash { display: none; }

/* The question on a short screen (a phone held sideways): pinned above the miner it would rise off the top, so it sits
   at the top of the screen instead, with the lamp and Skip on one row. The keyboard comes up from below, clear of it. */
@media (max-height: 500px) {
  .prompt-card.pin { transform: none !important; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px); translate: -50% 0;
    width: min(calc(620px * var(--ui, 1)), calc(100vw - 230px)); grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 14px 6px; }
  .prompt-card > :not(.lamp, .skip) { grid-column: 1 / -1; }
  .prompt-card .prompt-q { font-size: clamp(1.15rem, 6vh, 1.5rem); }
  .prompt-card .answer-form input, .prompt-card .answer-form .btn { min-height: 44px; }
  .prompt-card .skip { min-height: 40px; }
  /* the result: under the top bar and above the Next button, smaller, and it scrolls if it still doesn't fit */
  .land-card.pin { transform: none !important; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 60px);
    width: min(calc(640px * var(--ui, 1)), calc(100vw - 2 * var(--gauge-w, 60px) - 24px));
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 60px - 86px); overflow-y: auto; gap: 8px; padding: 12px 16px 10px; }
  .land-card .strike { gap: 12px; }
  .land-card .strike img { width: 40px; }
  .land-card .zone-name { font-size: 1.9rem; }
  .land-card .pts { font-size: 1.2rem; }
  .land-card .your-answer { font-size: 1.2rem; }
  .land-card .quip { font-size: 1rem; }
  .next-dock .btn { min-height: 48px; }
}

/* the menu on a short screen (a phone held sideways): all seven rows and the footer fit in 390px (Lumen's #279
   smoke): a thinner top strip, shorter rows, and the footer on one line (Wavy, the credit, Privacy · Terms) */
@media (max-height: 500px) {
  .menu-panel { padding-top: 36px; width: min(600px, calc((100vw - 20px) / var(--ui, 1))); }
  .menu-x { top: 4px; right: 8px; width: 30px; height: 30px; font-size: 1.1rem; }
  .mn-list { padding: 3px 0; }
  .mn-group + .mn-group { margin-top: 2px; padding-top: 3px; }
  .menu .mn-row { min-height: 36px; font-size: 1.1rem; }
  .mn-ico { width: 30px; height: 30px; }
  .mn-ico > img { max-width: 30px; max-height: 30px; }
  .mn-gear { width: 24px; height: 24px; }
  .mn-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 10px; padding: 2px 8px 0; }
  .mn-foot .studio-credit { display: flex; align-items: center; gap: 6px; }
  .mn-foot .credit-words span { display: inline; }
  .mn-foot .wavy { transform: scale(0.7); margin: -8px -6px; }
  .menu-legal a { min-height: 36px; }
}