/* ============================================================
   hud.css — the game HUD (ui/hud.js): deep-green glass with
   sand-gold hairlines over the world. In the store the same
   controls re-skin to papyrus with deep-green ink.
   Also: the prompt pill and the toasts.
   ============================================================ */

/* ---- Layers ---- */
#hud {
  position: fixed; inset: 0; pointer-events: none; z-index: var(--z-hud);
  transition: opacity .5s var(--ease), visibility 0s linear 0s;
}
/* over the podium overlay and the store (below the reader and the cart) */
html[data-mode="podium"] #hud, html[data-mode="store"] #hud { z-index: 27; }
html[data-mode="loading"] #hud, html[data-mode="title"] #hud {
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
#prompt { position: fixed; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; }
#toasts { position: fixed; top: 76px; right: 18px; width: 420px; max-width: calc(100vw - 36px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
html[data-mode="loading"] #toasts { display: none; }
html:has(#cart.is-open) #toasts { right: calc(min(452px, 100vw) + 18px); }
/* the store's sheets close from their top-right corner: toasts wait at the bottom there */
html[data-mode="store"] #toasts { top: auto; bottom: 22px; }
@media (max-width: 900px) { html:has(#cart.is-open) #toasts { right: 18px; top: auto; bottom: 18px; } }

/* shared glass */
.hud-glass, .hud-brand, .hud-btn, .hud-switch, .hud-pop, .pr, .toast, .hud-sheet-card {
  --hud-bg: linear-gradient(180deg, rgba(12, 38, 25, .78), rgba(5, 19, 12, .82));
  --hud-line: rgba(201, 174, 124, .38);
  --hud-ink: var(--sand-lt);
  --hud-ink-2: rgba(232, 211, 160, .66);
}

/* ---- Brand, top left ---- */
#ui #hud .hud-brand {
  position: fixed; top: 16px; left: 18px; pointer-events: none;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 20px 7px 9px; border-radius: 999px;
  background: var(--hud-bg); border: 1px solid var(--hud-line);
  box-shadow: 0 8px 30px rgba(3, 10, 6, .32), inset 0 1px 0 rgba(255, 241, 196, .07);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.hud-mark { width: 30px; height: 36px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.hud-brand-t { display: flex; flex-direction: column; gap: 3px; }
.hud-name {
  font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--hud-ink); line-height: 1.1; padding-left: .02em;
}
.hud-who { font-family: var(--util); font-weight: 300; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--hud-ink-2); line-height: 1.2; white-space: nowrap; }
.hud-who:empty { display: none; }
.hud-who-n { color: var(--sand); font-weight: 400; }
.hud-who-sep { margin: 0 .55em; opacity: .6; }
html[data-mode="podium"] #hud .hud-brand,
html[data-mode="store"] #hud .hud-brand,
html[data-mode="reader"] #hud .hud-brand { opacity: 0; transform: translateY(-8px); }

/* ---- The cluster, top right ---- */
.hud-cluster {
  position: fixed; top: 16px; right: 18px; display: flex; align-items: center; gap: 10px;
}
.hud-btn {
  height: 42px; min-width: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 12px; border-radius: 999px; cursor: pointer; color: var(--hud-ink);
  background: var(--hud-bg); border: 1px solid var(--hud-line);
  box-shadow: 0 8px 26px rgba(3, 10, 6, .3), inset 0 1px 0 rgba(255, 241, 196, .08);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease-out), color .25s var(--ease), box-shadow .25s var(--ease);
}
.hud-btn:hover { border-color: var(--glass-line-2); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(3, 10, 6, .38), 0 0 0 3px rgba(232, 211, 160, .06), inset 0 1px 0 rgba(255, 241, 196, .1); }
.hud-btn:active { transform: translateY(0) scale(.97); }
.hud-btn svg { width: 19px; height: 19px; }
.hud-gear { width: 42px; padding: 0; }
.hud-gear svg { width: 18px; height: 18px; stroke-width: 1.35; transition: transform .6s var(--ease-out); }
.hud-gear:hover svg, .hud-gear.is-on svg { transform: rotate(60deg); }
.hud-gear.is-on { border-color: var(--glass-line-2); }

/* The switch: Basilica | Store, with a sliding gold pill */
.hud-switch {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 42px; padding: 4px; border-radius: 999px;
  background: var(--hud-bg); border: 1px solid var(--hud-line);
  box-shadow: 0 8px 26px rgba(3, 10, 6, .3), inset 0 1px 0 rgba(255, 241, 196, .08);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
}
.hud-sw-opt {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 0 17px; min-width: 94px;
  font-family: var(--util); font-weight: 400; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--hud-ink-2); border-radius: 999px; transition: color .35s var(--ease);
}
.hud-sw-opt:hover { color: var(--hud-ink); }
.hud-sw-opt[aria-selected="true"] { color: var(--green-deep); cursor: default; }
.hud-sw-pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background:
    radial-gradient(120% 140% at 30% 0%, rgba(255, 246, 214, .9), transparent 55%),
    linear-gradient(180deg, #F1DDAC, var(--sand) 72%, #B99A62);
  box-shadow: 0 1px 0 rgba(255, 246, 214, .55) inset, 0 -1px 0 rgba(110, 71, 16, .35) inset, 0 2px 8px rgba(0, 0, 0, .28), 0 0 14px rgba(232, 211, 160, .18);
  transition: transform .55s cubic-bezier(.3, 1.35, .45, 1);
}
.hud-switch.is-store .hud-sw-pill { transform: translateX(100%); }

/* The shelf (cart) */
.hud-cart { padding: 0 14px 0 13px; position: relative; }
.hud-cart-ic svg { width: 20px; height: 20px; stroke-width: 1.35; }
.hud-cart-ic { display: grid; place-items: center; }
.hud-cart-l { font-family: var(--util); font-weight: 400; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.hud-badge {
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; display: none; place-items: center;
  font-family: var(--util); font-weight: 400; font-size: 11px; letter-spacing: .02em; color: var(--gold-4); line-height: 1;
  background: radial-gradient(circle at 35% 28%, var(--gold-hi) 0 14%, transparent 40%), radial-gradient(circle at 50% 60%, var(--gold-1), var(--gold-2) 62%, var(--gold-3));
  box-shadow: 0 0 0 1px rgba(110, 71, 16, .5), 0 2px 6px rgba(0, 0, 0, .35), 0 0 12px var(--gold-glow);
  margin-right: -4px;
}
.hud-cart.has-items .hud-badge { display: inline-grid; }
.hud-badge.is-pop { animation: hud-badge-pop .55s cubic-bezier(.3, 1.6, .4, 1); }
.hud-cart.is-bump .hud-cart-ic { animation: hud-bag-bump .6s var(--ease-out); }
@keyframes hud-badge-pop { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes hud-bag-bump { 0% { transform: none; } 25% { transform: translateY(-3px) rotate(-8deg); } 55% { transform: translateY(0) rotate(5deg); } 100% { transform: none; } }

/* ---- Settings popover ---- */
.hud-pop {
  position: fixed; top: 68px; right: 18px; width: 316px; padding: 18px 18px 8px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(12, 38, 25, .92), rgba(5, 19, 12, .95));
  border: 1px solid var(--hud-line); color: var(--hud-ink);
  box-shadow: 0 24px 60px rgba(2, 8, 5, .5), inset 0 1px 0 rgba(255, 241, 196, .08);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: var(--caret-x, 30px) 0;
  transition: opacity .2s var(--ease), transform .25s var(--ease-out);
}
.hud-pop.is-open { opacity: 1; transform: none; }
.hud-pop::before { content: ''; position: absolute; top: -6px; left: calc(var(--caret-x, 30px) - 6px); width: 11px; height: 11px; transform: rotate(45deg);
  background: rgba(12, 38, 25, .95); border-left: 1px solid var(--hud-line); border-top: 1px solid var(--hud-line); }
.hud-pop-h { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; color: var(--sand-lt); padding-bottom: 12px; border-bottom: 1px solid rgba(201, 174, 124, .2); }
.hud-pop-sec { padding: 14px 0; border-bottom: 1px solid rgba(201, 174, 124, .14); }
.hud-pop-sec--last { border-bottom: 0; padding: 6px 0; }
.hud-pop-k { font-family: var(--util); font-weight: 400; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--sand); margin-bottom: 10px; }
.hud-pop-note { margin: 8px 0 0; font-family: var(--body); font-style: italic; font-size: 14px; color: var(--hud-ink-2); }
.hud-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(201, 174, 124, .22); }
.hud-seg-opt { border: 0; background: none; cursor: pointer; height: 30px; border-radius: 999px; font-family: var(--util); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--hud-ink-2); transition: color .2s, background .2s; }
.hud-seg-opt:hover { color: var(--sand-lt); }
.hud-seg-opt.is-on { color: var(--green-deep); background: linear-gradient(180deg, #F1DDAC, var(--sand)); box-shadow: inset 0 1px 0 rgba(255, 246, 214, .5), 0 1px 4px rgba(0, 0, 0, .3); }
.hud-vol { display: grid; grid-template-columns: 22px 70px 1fr 28px; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; }
.hud-vol-ic { display: grid; place-items: center; color: var(--sand); }
.hud-vol-ic svg { width: 16px; height: 16px; stroke-width: 1.3; }
.hud-vol-l { font-family: var(--body); font-size: 16px; color: var(--hud-ink); }
.hud-vol-v { font-family: var(--util); font-size: 10.5px; letter-spacing: .06em; color: var(--hud-ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.hud-range { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; margin: 0; }
.hud-range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--sand-dim), var(--sand-lt) var(--p, 50%), rgba(201, 174, 124, .2) var(--p, 50%)); }
.hud-range::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi) 0 18%, transparent 45%), radial-gradient(circle at 50% 60%, var(--gold-1), var(--gold-2) 60%, var(--gold-3));
  box-shadow: 0 0 0 1px rgba(110, 71, 16, .55), 0 2px 5px rgba(0, 0, 0, .45); transition: transform .2s var(--ease-out); }
.hud-range:hover::-webkit-slider-thumb { transform: scale(1.18); }
.hud-range::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(201, 174, 124, .2); }
.hud-range::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--sand-lt); }
.hud-range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--gold-2); }
.hud-pop-link { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 2px; border: 0; background: none; cursor: pointer;
  font-family: var(--util); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--sand-lt); border-radius: 10px; }
.hud-pop-link .ic { display: grid; place-items: center; color: var(--sand); }
.hud-pop-link .ic svg { width: 17px; height: 17px; stroke-width: 1.3; }
.hud-pop-link-go { margin-left: auto; opacity: .6; transition: transform .25s var(--ease-out), opacity .2s; }
.hud-pop-link:hover .hud-pop-link-go { transform: translateX(3px); opacity: 1; }

/* ---- Controls sheet ---- */
.hud-sheet {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 5;
  background: radial-gradient(ellipse at center, rgba(3, 10, 6, .38), rgba(3, 10, 6, .66));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s var(--ease);
}
#ui #hud .hud-sheet { pointer-events: auto; }
.hud-sheet.is-open { opacity: 1; }
.hud-sheet-card {
  position: relative; width: min(580px, calc(100vw - 40px)); max-height: calc(100vh - 32px); overflow-y: auto; padding: 34px 44px 26px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(14, 42, 28, .95), rgba(5, 19, 12, .97));
  border: 1px solid var(--hud-line); color: var(--hud-ink);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 241, 196, .08), inset 0 0 0 6px rgba(5, 19, 12, .6), inset 0 0 0 7px rgba(201, 174, 124, .14);
  transform: translateY(10px) scale(.985); transition: transform .35s var(--ease-out);
}
.hud-sheet.is-open .hud-sheet-card { transform: none; }
.hud-sheet-x { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--hud-ink-2); cursor: pointer; display: grid; place-items: center; }
.hud-sheet-x:hover { color: var(--sand-lt); border-color: var(--hud-line); }
.hud-sheet-x svg { width: 16px; height: 16px; }
.hud-sheet-eyebrow { font-family: var(--util); font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--sand); text-align: center; }
.hud-sheet-t { margin: 10px 0 24px; text-align: center; font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: .16em; text-transform: uppercase; color: var(--sand-lt); }
.hud-sheet-list { margin: 0; border-top: 1px solid rgba(201, 174, 124, .18); }
.hud-sheet-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 18px; padding: 9px 0; border-bottom: 1px solid rgba(201, 174, 124, .12); }
.hud-sheet-row dt { margin: 0; }
.hud-sheet-row dd { margin: 0; font-family: var(--body); font-size: 18px; color: var(--paper); line-height: 1.3; }
.hud-keys { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.hud-sheet kbd, .pr kbd {
  display: inline-grid; place-items: center; min-width: 26px; height: 25px; padding: 0 8px; border-radius: 6px;
  font-family: var(--util); font-weight: 400; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sand-lt);
  background: linear-gradient(180deg, rgba(232, 211, 160, .12), rgba(232, 211, 160, .04));
  border: 1px solid rgba(201, 174, 124, .42); border-bottom-width: 2px;
}
.hud-sheet-foot { margin: 20px 0 0; text-align: center; font-family: var(--body); font-style: italic; font-size: 15.5px; color: var(--hud-ink-2); }
@media (max-height: 800px) {
  .hud-sheet-card { padding-top: 26px; padding-bottom: 20px; }
  .hud-sheet-t { margin: 6px 0 14px; font-size: 26px; }
  .hud-sheet-row { padding: 6px 0; }
  .hud-sheet-foot { margin-top: 12px; }
}

/* ---- Store mode: papyrus, deep-green ink ---- */
html[data-mode="store"] #hud .hud-btn,
html[data-mode="store"] #hud .hud-switch {
  --hud-bg: linear-gradient(180deg, rgba(250, 243, 226, .92), rgba(240, 228, 200, .9));
  --hud-line: rgba(10, 36, 22, .2);
  --hud-ink: var(--store-ink);
  --hud-ink-2: rgba(10, 36, 22, .62);
  box-shadow: 0 6px 20px rgba(74, 52, 18, .16), inset 0 1px 0 rgba(255, 255, 255, .6);
}
html[data-mode="store"] #hud .hud-btn:hover { border-color: rgba(10, 36, 22, .4); box-shadow: 0 8px 24px rgba(74, 52, 18, .22), 0 0 0 3px rgba(10, 36, 22, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
html[data-mode="store"] #hud .hud-sw-pill {
  background: linear-gradient(180deg, var(--green-mid), var(--green-panel) 70%, var(--green-deep));
  box-shadow: inset 0 1px 0 rgba(232, 211, 160, .25), 0 2px 8px rgba(5, 19, 12, .3);
}
html[data-mode="store"] #hud .hud-sw-opt[aria-selected="true"] { color: var(--sand-lt); }
html[data-mode="store"] #hud .hud-pop { --hud-ink: var(--sand-lt); }

/* ---- Prompt, bottom centre ---- */
.pr {
  position: absolute; left: 50%; bottom: 60px; display: flex; align-items: center; gap: 16px;
  padding: 11px 20px 11px 16px; border-radius: 999px; white-space: nowrap;
  background: var(--hud-bg); border: 1px solid var(--hud-line);
  box-shadow: 0 14px 40px rgba(3, 10, 6, .38), inset 0 1px 0 rgba(255, 241, 196, .08), 0 0 0 5px rgba(5, 19, 12, .12);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  opacity: 0; transform: translate(-50%, 10px) scale(.98); filter: blur(2px);
  transition: opacity .32s var(--ease), transform .45s var(--ease-out), filter .32s var(--ease);
}
.pr.is-on { opacity: 1; transform: translate(-50%, 0); filter: none; }
.pr-orn {
  width: 30px; height: 30px; flex: none; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 50% 50%, rgba(255, 214, 120, .5), rgba(255, 214, 120, 0) 70%);
}
.pr-orn::before { content: ''; position: absolute; inset: 9px; transform: rotate(45deg); border: 1px solid var(--sand-lt); box-shadow: 0 0 10px rgba(255, 214, 120, .6); }
.pr-orn::after { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: var(--gold-1); box-shadow: 0 0 8px var(--gold-glow); }
.pr-text { display: flex; flex-direction: column; gap: 2px; }
.pr-label { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--hud-ink); line-height: 1.15; }
.pr-sub { font-family: var(--util); font-weight: 300; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--sand); line-height: 1.3; }
.pr-hint { display: inline-flex; align-items: center; gap: 7px; padding-left: 16px; margin-left: 2px; border-left: 1px solid rgba(201, 174, 124, .28);
  font-family: var(--util); font-weight: 300; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--hud-ink-2); align-self: stretch; }
.pr-hint[hidden] { display: none; }
.pr-hint-i { display: grid; place-items: center; color: var(--sand); }
.pr-hint-i svg { width: 16px; height: 16px; stroke-width: 1.3; }
.pr-hint-or { opacity: .7; text-transform: lowercase; letter-spacing: .1em; font-style: italic; font-family: var(--body); font-size: 14px; }
.pr.is-far .pr-sub { color: #F0B37A; }
.pr.is-far .pr-orn::after { background: #F0B37A; }

/* ---- Toasts ---- */
.toast {
  position: relative; pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 100%;
  padding: 11px 14px 11px 14px; border-radius: 14px; overflow: hidden; cursor: default;
  background: linear-gradient(180deg, rgba(14, 42, 28, .9), rgba(5, 19, 12, .92));
  border: 1px solid var(--hud-line);
  box-shadow: 0 16px 40px rgba(3, 10, 6, .4), inset 0 1px 0 rgba(255, 241, 196, .07);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  opacity: 0; transform: translateX(22px) scale(.98);
  transition: opacity .3s var(--ease), transform .45s var(--ease-out), max-height .35s var(--ease), margin .35s var(--ease);
}
.toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); box-shadow: 0 0 10px var(--gold-glow); }
.toast.is-on { opacity: 1; transform: none; }
.toast.is-off { opacity: 0; transform: translateX(14px) scale(.98); }
.toast-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--sand-lt);
  background: radial-gradient(circle at 50% 35%, rgba(232, 211, 160, .16), rgba(232, 211, 160, .04)); border: 1px solid rgba(201, 174, 124, .3); }
.toast-ic svg { width: 16px; height: 16px; stroke-width: 1.4; }
.toast-ic img { width: 16px; height: 19px; object-fit: contain; }
.toast-t { font-family: var(--body); font-size: 17px; line-height: 1.3; color: var(--paper); min-width: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.toast-act { flex: none; margin-left: 4px; border: 1px solid rgba(201, 174, 124, .45); background: none; border-radius: 999px; padding: 6px 11px; cursor: pointer;
  font-family: var(--util); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--sand-lt); transition: background .2s, color .2s; }
.toast-act:hover { background: var(--sand-lt); color: var(--green-deep); }
.toast-time { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(232, 211, 160, .0), rgba(232, 211, 160, .55)); transform-origin: left; animation: toast-time linear forwards; }
.toast.is-held .toast-time { animation-play-state: paused; }
@keyframes toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast--cart .toast-ic { color: var(--gold-4); border-color: rgba(110, 71, 16, .5);
  background: radial-gradient(circle at 35% 28%, var(--gold-hi) 0 14%, transparent 40%), radial-gradient(circle at 50% 60%, var(--gold-1), var(--gold-2) 62%, var(--gold-3)); box-shadow: 0 0 12px var(--gold-glow); }
.toast--error::before { background: linear-gradient(180deg, #F0A27A, #A0452A); box-shadow: none; }
.toast--error .toast-ic { color: #F0B79A; }
.toast--success .toast-ic { color: var(--green-deep); background: var(--sand-lt); }

/* store mode: the scheme reversed, papyrus cards with green ink */
html[data-mode="store"] .toast {
  background: linear-gradient(180deg, rgba(251, 245, 229, .94), rgba(240, 228, 199, .95));
  border-color: rgba(10, 36, 22, .16);
  box-shadow: 0 16px 38px rgba(74, 52, 18, .24), inset 0 1px 0 rgba(255, 255, 255, .7);
}
html[data-mode="store"] .toast-t { color: var(--green-deep); }
html[data-mode="store"] .toast-ic { color: var(--green-deep); background: rgba(10, 36, 22, .05); border-color: rgba(10, 36, 22, .18); }
html[data-mode="store"] .toast--cart .toast-ic { color: var(--gold-4); border-color: rgba(110, 71, 16, .5);
  background: radial-gradient(circle at 35% 28%, var(--gold-hi) 0 14%, transparent 40%), radial-gradient(circle at 50% 60%, var(--gold-1), var(--gold-2) 62%, var(--gold-3)); }
html[data-mode="store"] .toast--success .toast-ic { color: var(--sand-lt); background: var(--green-deep); }
html[data-mode="store"] .toast-act { color: var(--green-deep); border-color: rgba(10, 36, 22, .3); }
html[data-mode="store"] .toast-act:hover { background: var(--green-deep); color: var(--sand-lt); }
html[data-mode="store"] .toast-time { background: linear-gradient(90deg, rgba(10, 36, 22, 0), rgba(10, 36, 22, .35)); }

@media (max-width: 760px) {
  .hud-cart-l, .hud-who { display: none; }
  .hud-sw-opt { min-width: 70px; padding: 0 10px; letter-spacing: .12em; }
  .pr-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-sw-pill, .pr, .toast, .hud-pop { transition-duration: .01s !important; }
}

/* the Traveler's stamina, shown only while sprinting or catching his breath */
.stamina { position: fixed; left: 50%; bottom: 74px; width: 180px; height: 6px; margin-left: -90px; z-index: 30; pointer-events: none;
  border-radius: 99px; background: rgba(6, 23, 14, .55); box-shadow: 0 0 0 1px rgba(201, 174, 124, .45); opacity: 0; transition: opacity .35s; }
.stamina.on { opacity: 1; }
.stamina i { display: block; height: 100%; width: 100%; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, #8fd16a, #e8d36a); transition: transform .08s linear, background .3s; }
.stamina.tired i { background: linear-gradient(90deg, #c4583c, #e09a4a); }
html.no-hud .stamina, html[data-mode="store"] .stamina { display: none; }