/* Holy Ore settings, in two parts:
   1. The Settings section of the camp window (settings.js draws it), in UI round A ("Lantern", Colin's pick): the
      pages (Audio / Video / Interface / Controls / More) as amber pills and a search box along the top, the quick
      set-ups as a row of chips, then parchment rows (pixel icon, name, every choice as a pill, volumes as block
      meters); the row you're on explains itself in one line under it. Same pixel rules as the rest of the window
      (hub.css): flat fills, stepped corners, gold only for the cursor.
   2. The player's settings applied to the page. prefs.js puts them on <html> as --ui, --text, --bright and
      data-motion / data-shake / data-flash / data-hints / data-nametag / data-bright. */

/* ---------- the section: pages and search, then one column of rows ---------- */
.st { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); height: 100%; container-type: inline-size; }
.pxi { display: block; flex: none; width: 24px; height: 24px; }
.st-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 18px 8px; }
.st-pages { display: flex; flex-wrap: wrap; gap: 4px; }
.st-page { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 6px 14px; border: 0; border-radius: 0; clip-path: var(--notch); background: transparent;
  cursor: pointer; font: 700 1rem/1 var(--f-label); color: var(--ink-dim); text-shadow: var(--ol1); }
.st-page:hover { color: var(--gold); }
.st-page[aria-selected="true"] { background: var(--amber); color: var(--win-ink); box-shadow: inset 0 calc(var(--u) * -2) 0 var(--amber-lo), inset 0 0 0 var(--u) var(--win-edge); }
.st-page:focus-visible { outline: none; box-shadow: var(--ring-on); }
.st-pi { width: 22px; height: 22px; }
.st-find { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; max-width: 320px; height: 42px; margin-left: auto; padding: 0 12px; clip-path: var(--notch);
  background: rgba(40, 14, 5, 0.6); box-shadow: inset 0 0 0 var(--u) var(--win-edge); cursor: text; }
.st-find:focus-within { box-shadow: var(--ring-on); }
.st-fi { width: 20px; height: 20px; }
.st-find input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; outline: none; color: var(--win-ink); font: 700 1rem/1 var(--f-label); }
.st-find input::placeholder { color: var(--ink-faint); }
.st-mid { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
/* a plain column: a grid would size its rows before the narrow layouts stack them */
.st-list { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 820px; min-height: 0; margin: 0 auto; padding: 6px 18px 20px; }
.st-list > * { flex: none; }
/* the list is its own container: its rows stack their meters when it is narrow, whatever the window's width */
.st-list { container: st-list / inline-size; }
.st-head { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 700 1rem/1.2 var(--f-label); color: var(--ink-dim); text-shadow: var(--ol1); }
.st-head:first-child { margin-top: 2px; }
.st-hi { width: 22px; height: 22px; }
.st-note { margin-top: 10px; font-size: 1rem; }

/* the quick set-ups: chips over the list; the one that matches your settings is lit */
.st-sets { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin-bottom: 6px; }
.st-set { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 10px; border: 0; border-radius: 0; cursor: pointer;
  font: 700 0.98rem/1 var(--f-label); }
.st-set.on { background: var(--amber); color: var(--win-ink); text-shadow: var(--ol1); box-shadow: inset 0 calc(var(--u) * -2) 0 var(--amber-lo), inset 0 0 0 var(--u) var(--win-edge); }
.st-set.on span::after { content: " ✓"; }
.st-set:not(.on) { background: var(--parch-tex) 0 0 / 128px, var(--parch); color: var(--parch-ink); clip-path: var(--notch); box-shadow: inset 0 0 0 var(--u) var(--parch-edge); }
.st-set:not(.on):hover { background-color: var(--parch-lit); }
.st-set:focus-visible { outline: none; box-shadow: var(--ring-on); }
.st-set .st-pi { width: 20px; height: 20px; }

/* one row: a parchment slat (hub.css .parch's look), icon, name, the value on the right; the gold ring is the cursor */
.st-row { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; min-height: 56px; padding: 6px 10px 6px 12px;
  clip-path: var(--notch); background: var(--parch-tex) 0 0 / 128px, var(--parch); color: var(--parch-ink);
  box-shadow: inset 0 0 0 var(--u) var(--parch-edge), inset 0 calc(var(--u) * -2) 0 var(--u) rgba(122, 74, 42, 0.25); cursor: pointer; outline: none; }
.st-row:hover { background-color: var(--parch-lit); }
.st-row: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); }
.st-row[hidden] { display: none; }
.st-row.slider { grid-template-columns: 26px minmax(0, 1fr) minmax(150px, 280px) 3.6em; }
.st-row.sub { grid-template-columns: minmax(0, 1fr) minmax(150px, 280px) 3.6em; min-height: 50px; margin-left: 22px; }
.st-row.bind { grid-template-columns: minmax(0, 1fr) auto 6em; cursor: default; }
.st-row.link .st-val { font-size: 1.3rem; color: var(--parch-ink-dim); }
.st-ic { width: 24px; height: 24px; }
.st-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font: 700 1.05rem/1.2 var(--f-label); color: var(--parch-ink); text-shadow: none; }
.st-row.sub .st-name { font-size: 1rem; color: var(--parch-ink-dim); }
/* a setting moved from where it started says so in words, not just a mark */
.st-changed { padding: 3px 6px; clip-path: var(--notch); background: var(--amber); font: 700 0.82rem/1 var(--f-label); font-style: normal; color: var(--win-ink); text-shadow: none; }
.st-changed[hidden] { display: none; }
.st-val { font: 700 1.05rem/1 var(--f-label); color: var(--parch-ink); text-shadow: none; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st.muted .st-row.slider.aud { opacity: 0.55; }

/* a choice: every option as a pill in a dark well; the one in use is amber, gold on the row under the cursor */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--win); clip-path: var(--notch); box-shadow: inset 0 0 0 var(--u) var(--parch-edge); }
.pill { display: grid; place-items: center; min-width: 4.4em; min-height: 40px; padding: 0 12px; clip-path: var(--notch); cursor: pointer;
  font: 700 1rem/1 var(--f-label); color: var(--ink-faint); text-shadow: var(--ol1); white-space: nowrap; }
.pill:hover { color: var(--win-ink); }
.pill.on { background: var(--amber); color: var(--win-ink); box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, 0.18), inset 0 calc(var(--u) * -2) 0 var(--amber-lo); }
.st-row:focus .pill.on { background: var(--gold); color: #2a1a00; text-shadow: none; box-shadow: inset 0 calc(var(--u) * -2) 0 #c98a12; }

/* a level: a block meter in a dark well, filled to the level (gold under the cursor); tap or drag anywhere along it */
.meter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; min-width: 150px; height: 34px; padding: 6px; cursor: pointer; touch-action: pan-y;
  background: var(--win); clip-path: var(--notch); box-shadow: inset 0 0 0 var(--u) var(--parch-edge); }
.meter i { background: rgba(234, 183, 109, 0.18); }
.meter i.on { background: #e9a25a; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); }
.st-row:focus .meter i.on { background: var(--gold); box-shadow: inset 0 -3px 0 #c98a12; }
.st-row.off .meter { opacity: 0.6; }
.st-row.off .st-val { color: var(--parch-ink-dim); }
@media (pointer: coarse) { .meter { height: 44px; } }

/* a folded list of sounds, a key binding, the reset button */
.st-row.fold .st-val { font-size: 1rem; color: var(--parch-ink-dim); }
.st-keys, .st-pads { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.st-keys kbd { font-size: 0.85rem; }
.st-none { font: 700 1rem/1 var(--f-label); color: var(--parch-ink-dim); }
.st-row.st-btnrow { display: block; justify-self: start; align-self: flex-start; min-height: 0; margin-top: 14px; padding: 0; background: none; box-shadow: none; clip-path: none; }
.st-btnrow:focus .btn { color: var(--gold); box-shadow: var(--ring-on); }
.st-btnrow.armed .btn { background: #9a3a2a; }

/* ---------- the tip: one line under the row you're on ---------- */
.st-tip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: -2px 4px 4px 50px; font: 600 0.98rem/1.4 var(--f-text); color: var(--ink-dim); text-shadow: var(--ol1); }
.st-tip .st-help, .st-tip .st-def { flex: 0 1 auto; }
.st-tip .st-def { color: var(--ink-faint); }
.st-pkeys { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.st-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.st-acts .btn { min-height: 36px; padding: 6px 12px; font-size: 0.95rem; }

/* ---------- narrow rooms (a phone, or a big UI scale) ---------- */
@container (max-width: 760px) {
  .st-top { padding: 10px 10px 6px; }
  .st-pages { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .st-page { flex: none; padding: 6px 10px; font-size: 0.95rem; }
  .st-find { flex-basis: 100%; max-width: none; margin-left: 0; }
  .st-list { padding: 6px 10px 14px; }
  .st-sets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .st-set { flex: none; }
  .st-tip { margin-left: 8px; }
}
@container (max-width: 600px) {
  .st-row.slider { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .st-row.slider .meter { grid-column: 1 / -1; grid-row: 2; }
  .st-row.sub { grid-template-columns: minmax(0, 1fr) auto; margin-left: 12px; }
  .st-row.sub .meter { grid-column: 1 / -1; grid-row: 2; }
  /* three or more choices go under the name; On / Off stays beside it */
  .st-row.choice:has(.pill:nth-child(3)) { grid-template-columns: 26px minmax(0, 1fr); }
  .st-row.choice:has(.pill:nth-child(3)) .seg { grid-column: 2 / -1; justify-self: start; }
  .pill { min-width: 3.6em; padding: 0 10px; }
  .st-row.bind { grid-template-columns: minmax(0, 1fr) auto auto; }
}
@container st-list (max-width: 540px) {
  .st-row.slider { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .st-row.slider .meter { grid-column: 1 / -1; grid-row: 2; }
  .st-row.sub { grid-template-columns: minmax(0, 1fr) auto; }
  .st-row.sub .meter { grid-column: 1 / -1; grid-row: 2; }
}
/* short screens (a phone held sideways): a slimmer top so the list keeps its room */
@media (max-height: 500px) {
  .st-top { padding: 6px 10px; }
  .st-page { min-height: 36px; }
  .st-find { flex: 1 1 160px; min-width: 160px; height: 36px; margin-left: auto; }
  .st-row { min-height: 48px; }
}

/* ---------- the player's settings on the page ---------- */
/* Text size: every rem-sized word grows or shrinks; frames, icons and the world don't. */
html { font-size: calc(100% * var(--text, 1)); }

/* UI scale: the HUD, the windows and the cards zoom as a whole, never the world canvas. The windows' size caps in
   hub.css, shop.css and dig.css grow with --ui too, so they still fit the screen. Pinned things (the prompt and
   result cards, the bubbles over buildings) are placed with transforms, which zoom would scale as well, so their
   insides zoom instead. The title's logo belongs to the scene, so it keeps its size. */
.topbar, .stage, .toast-stack, .coin-pop, .camp-note, .hold-skip, .hub-panel, .menu-panel, .world-chip, .world-talk, .sc-wrap { zoom: var(--ui, 1); }
.wcard > *, .hub-prompt > *, .world-menu > *, .tp > * { zoom: var(--ui, 1); }
.hero .wordmark.logo { zoom: calc(1 / var(--ui, 1)); }

/* Brightness: the world only */
html[data-bright] #world-canvas { filter: brightness(var(--bright, 1)); }

/* Screen shake: rock.js scales the world's own shake; this is the whole screen's jolt on a big strike */
html[data-shake="off"] #app.shake, html[data-shake="off"] #app.quake { animation: none; }
html[data-shake="low"] #app.shake { animation-name: rumble-low; }
html[data-shake="low"] #app.quake { animation-name: quake-low; }
@keyframes rumble-low { 10%, 50%, 90% { transform: translate(-3px, 1px); } 30%, 70% { transform: translate(3px, -1px); } }
@keyframes quake-low { 10%, 40%, 70% { transform: translate(-6px, 3px); } 25%, 55%, 85% { transform: translate(6px, -3px); } }

/* Screen flashes: the strike's flash (rock.js skips the lightning) */
html[data-flash="off"] .fx-flash { display: none; }

/* Key hints: the keys and buttons named over buildings, and Hold to skip (the windows show none) */
html[data-hints="off"] .hub-prompt kbd,
html[data-hints="off"] .hub-prompt .pad, html[data-hints="off"] .hold-skip { display: none; }

/* Your name over your miner */
html[data-nametag="off"] .hero-tag { display: none; }

/* Reduced motion (the player's pick in Settings): the CSS that used to wait for the system's setting keys off
   data-motion now, and this catches every other animation (it jumps to its end) and transition (none at all).
   .gentle elements are the exception: the reduced-motion dig's opacity-only fades (dig.css) */
html[data-motion="reduce"] :not(.gentle), html[data-motion="reduce"] :not(.gentle)::before, html[data-motion="reduce"] :not(.gentle)::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }