/* Trailblades' menus (game-hub-D27, Direction A "Trailhead", the owner's pick 2026-10-13): each screen stands in a land
   the engine paints (js/quest/engine.js, scene mode); everything on it is made of the trail's wood, painted. */

.trailhead {
  --oak: #b47a42; --oak2: #9a6232; --walnut: #7c4a22; --walnut2: #5f3517; --edge: #4a2810; --ink: #3b2414;
  --sab: env(safe-area-inset-bottom, 0px); /* read by setup.js: the dirt below the heroes grows by it */
  --cream: #fbf1da; --gold: #fcd34d; --red: #dc2626; --red2: #7f1d1d;
  --grain: repeating-linear-gradient(178deg, rgba(60, 30, 10, 0.1) 0 2px, transparent 2px 7px);
  --nails:
    radial-gradient(circle at 12px 12px, var(--ink) 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 12px) 12px, var(--ink) 3px, transparent 3.6px),
    radial-gradient(circle at 12px calc(100% - 12px), var(--ink) 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--ink) 3px, transparent 3.6px);
}
body[data-screen="qmenu"] #screen-qmenu,
body[data-screen="qshop"] #screen-qshop {
  position: fixed; inset: 0; z-index: 30; display: block; padding: 0; overflow: hidden; text-align: left;
  font-family: "Fredoka", system-ui, sans-serif; color: var(--cream);
}
body[data-screen="qmenu"] .page-nav, body[data-screen="qshop"] .page-nav { display: none; }
.th-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The hub frame, in wood: back to the hub, the coins, and Settings as the gear beside them (game-hub-D63). */
.th-top { position: absolute; z-index: 3; top: calc(12px + env(safe-area-inset-top)); left: 14px; right: 14px; }
.th-right { display: flex; align-items: center; gap: 10px; }
.trailhead .th-gear { display: grid; place-items: center; width: 44px; padding: 0; }
.th-gear svg { width: 24px; height: 24px; fill: var(--cream); stroke: var(--edge); stroke-width: 1.4; stroke-linejoin: round; transition: rotate 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.th-gear svg circle { fill: var(--oak2); }
.th-gear:hover svg { rotate: 60deg; }
.trailhead .th-chip {
  min-height: 44px; padding: 8px 14px; border: 2px solid var(--edge); border-radius: 10px; color: var(--cream);
  background: var(--grain), linear-gradient(180deg, var(--oak), var(--oak2)); box-shadow: 0 3px 0 var(--edge);
  font: 600 16px/1 "Fredoka", system-ui, sans-serif; text-shadow: 0 1px 0 var(--edge);
}
.trailhead .th-chip:active { transform: translateY(3px); box-shadow: 0 0 0 var(--edge); }

/* The name, painted on two planks: oak with cream letters, walnut with gold. */
.th-logo { position: absolute; z-index: 2; margin: 0; display: flex; gap: 4px; left: 50%; transform: translateX(-50%); top: calc(64px + env(safe-area-inset-top)); }
.th-plank {
  font: 700 clamp(30px, 8.5vw, 44px)/1 "Fredoka", system-ui, sans-serif; letter-spacing: 0.5px; padding: 7px 14px 10px;
  border: 3px solid var(--edge); border-radius: 9px; box-shadow: 0 5px 0 var(--edge), inset 0 -4px 0 rgba(0, 0, 0, 0.18);
  text-shadow: 0 2px 0 var(--edge), 0 -1px 0 var(--edge), 2px 0 0 var(--edge), -2px 0 0 var(--edge);
}
.th-plank.p1 { color: var(--cream); background: var(--nails), var(--grain), linear-gradient(180deg, var(--oak), var(--oak2)); transform: rotate(-4deg) translateY(2px); }
.th-plank.p2 { color: var(--gold); background: var(--nails), var(--grain), linear-gradient(180deg, var(--walnut), var(--walnut2)); transform: rotate(3deg); }

/* The sign board: planks with seams and nails, on two posts down to the grass (--post: set from the scene). */
.th-board {
  position: absolute; z-index: 2; padding: 18px 20px 16px; border: 4px solid var(--edge); border-radius: 12px; color: var(--cream);
  background: var(--nails), repeating-linear-gradient(180deg, transparent 0 43px, rgba(40, 20, 5, 0.32) 43px 46px), var(--grain), linear-gradient(180deg, var(--oak), var(--oak2));
  box-shadow: 0 6px 0 var(--edge); text-shadow: 0 1px 0 var(--edge);
}
.th-board::before, .th-board::after {
  content: ""; position: absolute; z-index: -1; top: 100%; width: 14px; height: var(--post, 0px); border: 3px solid var(--edge); border-top: 0;
  background: var(--grain), linear-gradient(90deg, var(--walnut), var(--walnut2));
}
/* On a phone the heroes stand under the board, so its posts go to its edges (setup.js sets --post-in). */
.th-board::before { left: var(--post-in, 18%); }
.th-board::after { right: var(--post-in, 18%); }
.th-board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.th-board h2 { font-size: clamp(30px, 8vw, 40px); line-height: 1; color: var(--cream); }
.th-hp { display: inline-flex; gap: 5px; align-items: center; font-weight: 700; font-size: 19px; }
.th-desc { margin: 8px 0 12px; font: 500 16px/1.35 "Fredoka", system-ui, sans-serif; max-width: 36ch; }
.th-loadout { display: grid; gap: 6px; }
/* A short window (setup.js placeMenu): the description goes first, then the gear line; the special stays. */
.th-board.lean .th-desc { display: none; }
.th-board.lean .th-board-head { margin-bottom: 8px; }
.th-board.leaner .th-gear { display: none; }
.th-board.leaner { padding: 12px 16px; }
.th-board.leaner h2 { font-size: 28px; }
.th-board.leaner .th-shop-link { margin-top: 8px; }
.th-row { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; min-width: 0; }
.th-row.special { background: rgba(59, 36, 20, 0.35); border-radius: 10px; padding: 8px 10px; grid-template-columns: 36px 1fr; margin-bottom: 4px; }
.th-row b { display: block; font-weight: 600; font-size: 16px; }
.th-row small { display: block; font-size: 13.5px; opacity: 0.85; }
.th-gear { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.th-gear .th-row { grid-template-columns: 24px auto; gap: 6px; font-size: 14.5px; font-weight: 600; }
.th-shop-link {
  margin-top: 10px; padding: 8px 14px; border: 2px solid var(--edge); border-radius: 9px; color: var(--ink); font: 700 15px/1 "Fredoka", system-ui, sans-serif;
  background: var(--gold); box-shadow: 0 3px 0 var(--edge); text-shadow: none;
}
.th-shop-link:active { transform: translateY(3px); box-shadow: none; }

/* The heroes on the grass: each a button the size of its hero, its name on a tag in the dirt below. */
.th-heroes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.th-heroes .class-card {
  position: absolute; pointer-events: auto; border: 0; padding: 0; background: none; border-radius: 12px; transform: translateX(-50%);
  display: block; box-shadow: none; min-height: 0; outline: none;
}
.th-heroes .class-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.th-tag {
  position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); white-space: nowrap;
  font: 700 15px/1 "Fredoka", system-ui, sans-serif; color: var(--cream); background: rgba(59, 36, 20, 0.88); padding: 6px 11px; border-radius: 8px;
}
.class-card[aria-pressed="true"] .th-tag { background: var(--gold); color: var(--ink); }

/* The one thing to do: a red painted tile, in the dirt. */
.th-actions { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 10px; }
.th-go {
  width: 100%; max-width: 440px; min-height: 60px; border: 3px solid var(--red2); border-radius: 14px; color: #fff; padding: 14px 18px;
  font: 700 23px/1 "Fredoka", system-ui, sans-serif; background: linear-gradient(180deg, #ef4444, var(--red)); box-shadow: 0 6px 0 var(--red2);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-shadow: 0 2px 0 var(--red2);
}
.th-go:active { transform: translateY(6px); box-shadow: 0 0 0 var(--red2); }
/* Nothing to do (the item is on, or costs more than you have): the tile turns back to plain wood. */
.th-go:disabled {
  transform: none; color: var(--cream); border-color: var(--edge); box-shadow: 0 6px 0 var(--edge); text-shadow: 0 2px 0 var(--edge);
  background: var(--grain), linear-gradient(180deg, var(--oak), var(--oak2));
}
/* The run's top bar (game-hub-D60): every button in it is a 44px target. */
#screen-quest .topbar .back { min-height: 44px; white-space: nowrap; }
/* A narrow phone: tighter gaps and a slimmer back, so the bar stays one row with a 5-digit balance (99,999 at 320:
   tests/smoke.js frameWords, game-hub-D104). */
@media (max-width: 379px) {
  #screen-quest .topbar { gap: 4px; }
  #screen-quest .topbar-right { gap: 4px; }
  #screen-quest .topbar .back { padding-inline: 10px; }
  #screen-quest .topbar-right .coins { padding-inline: 6px; gap: 4px; }
}
#screen-quest .topbar-right .pill.icon-btn, #screen-quest .topbar-right .fs-btn,
#screen-quest .topbar-right .hud-btn { width: 44px; height: 44px; min-width: 44px; padding: 0; display: grid; place-items: center; }
#screen-quest .topbar-right .coins { min-height: 44px; box-sizing: border-box; }

/* The Paused card's Shop and New run (game-hub-D65): two oak planks side by side, 44px tall. */
.th-pause-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.th-pause-row:not(:has(> :not([hidden]))) { display: none; }
.th-wood {
  min-width: 112px; min-height: 44px; padding: 10px 18px; border: 2px solid var(--edge); border-radius: 10px; color: var(--cream);
  background: var(--grain), linear-gradient(180deg, var(--oak), var(--oak2)); box-shadow: 0 4px 0 var(--edge);
  font: 600 17px/1 "Fredoka", system-ui, sans-serif; text-shadow: 0 1px 0 var(--edge); cursor: pointer;
}
.th-wood[hidden] { display: none; }
.th-wood:hover { filter: brightness(1.06); }
.th-wood:active { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
.th-wood:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.th-link { border: 0; background: none; color: var(--cream); font: 600 15px/1.2 "Fredoka", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; padding: 6px; }

/* ---------- the trader's cart ---------- */
/* The tabs: an oak board standing on the cart's awning, its tabs walnut. */
.th-tabs {
  position: absolute; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 8px 8px 10px;
  border: 3px solid var(--edge); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--grain), linear-gradient(180deg, var(--oak), var(--oak2));
}
.th-tabs button {
  border: 2px solid var(--edge); border-radius: 9px; padding: 8px 12px; min-height: 38px; color: var(--cream); font: 600 15px/1 "Fredoka", system-ui, sans-serif;
  background: var(--grain), linear-gradient(180deg, var(--walnut), var(--walnut2)); box-shadow: 0 3px 0 var(--edge);
}
.th-tabs button[aria-selected="true"] { background: var(--gold); color: var(--ink); }
.th-cart {
  position: absolute; z-index: 2; border: 4px solid var(--edge); border-radius: 6px 6px 10px 10px; padding: 34px 14px 14px;
  background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(40, 20, 5, 0.25) 58px 61px), var(--grain), linear-gradient(180deg, var(--oak), var(--oak2));
  box-shadow: 0 6px 0 var(--edge); display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px;
}
.th-awning {
  position: absolute; left: -10px; right: -10px; top: -30px; height: 46px; border: 3px solid var(--edge); border-radius: 8px 8px 0 0;
  background: repeating-linear-gradient(90deg, #dc2626 0 26px, #fff7ed 26px 52px);
  -webkit-mask: radial-gradient(13px at 13px 100%, transparent 98%, #000) 0 0 / 26px 100%; mask: radial-gradient(13px at 13px 100%, transparent 98%, #000) 0 0 / 26px 100%;
}
.th-goods { display: grid; grid-template-columns: repeat(3, var(--slot, minmax(0, 1fr))); justify-content: center; gap: 10px; }
.th-slot {
  position: relative; aspect-ratio: 1; max-width: 100%; border: 3px solid var(--edge); border-radius: 10px; padding: 0 0 12px; display: grid; place-items: center;
  background: var(--grain), linear-gradient(180deg, var(--walnut), var(--walnut2)); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.25);
}
.th-slot svg { width: 64%; height: 64%; }
/* A short phone (setup.js placeCart): flatter slots, so the tabs above the awning clear the top bar. */
.th-cart.short { gap: 8px; padding-top: 30px; }
.th-cart.short .th-slot { aspect-ratio: 1.3; }
.th-cart.short .th-pick { min-height: 40px; margin-top: 2px; }
.th-cart.short .th-slot { padding-bottom: 8px; }
.th-cart.short .th-slot svg { width: 78%; height: 78%; }
.th-cart.short .th-price { font-size: 12px; padding: 2px 5px; bottom: -9px; }
.th-slot[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold), inset 0 3px 0 rgba(0, 0, 0, 0.25); }
.th-slot:focus-visible { outline: 3px solid var(--cream); outline-offset: 2px; }
.th-price {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; display: inline-flex; gap: 4px; align-items: center;
  font: 700 13.5px/1 "Fredoka", system-ui, sans-serif; color: var(--ink); background: var(--cream); border: 2px solid var(--edge); border-radius: 7px; padding: 3px 7px;
}
.th-price.owned { background: #bbf7d0; }
.th-price.worn { background: var(--gold); }
.th-price .coin { width: 13px; height: 13px; }
.th-pick { margin-top: 6px; text-align: center; text-shadow: 0 1px 0 var(--edge); min-height: 48px; }
.th-pick b { display: block; font-size: 22px; }
.th-pick span { font-size: 15.5px; }
.th-pick .up { color: var(--gold); font-weight: 700; }
.th-wheel {
  position: absolute; bottom: -40px; width: 58px; height: 58px; border-radius: 50%; border: 5px solid var(--edge);
  background: radial-gradient(circle, var(--edge) 0 6px, transparent 7px), conic-gradient(from 0deg, transparent 0 40deg, var(--edge) 40deg 48deg, transparent 48deg 130deg, var(--edge) 130deg 138deg, transparent 138deg 220deg, var(--edge) 220deg 228deg, transparent 228deg 310deg, var(--edge) 310deg 318deg, transparent 318deg), var(--walnut);
}
.th-wheel.w1 { left: 12%; }
.th-wheel.w2 { right: 12%; }
.th-note { position: absolute; z-index: 2; left: 16px; right: 16px; margin: 0; text-align: center; font: 500 13.5px/1.3 "Fredoka", system-ui, sans-serif; color: var(--cream); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }

/* A narrow phone: the Archer's five tabs in one row. */
@media (max-width: 379px) {
  .th-tabs { gap: 4px; }
  .th-tabs button { font-size: 13px; padding: 7px 6px; min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .trailhead .th-chip:active, .th-go:active, .th-shop-link:active, .th-wood:active { transform: none; }
  .th-gear:hover svg { rotate: none; }
}

/* ---------- the camp between rounds (js/quest/camp.js) ---------- */
.th-camp { position: fixed; inset: 0; z-index: 40; overflow: hidden; color: var(--cream); font-family: "Fredoka", system-ui, sans-serif; text-align: left; }
.th-go:focus-visible, .th-spells:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.th-camp[hidden] { display: none; }
.th-cleared { top: calc(14px + env(safe-area-inset-top)); text-align: center; padding: 14px 18px 12px; }
.th-cleared::before, .th-cleared::after { display: none; }
.th-cleared h2 { color: var(--gold); font-size: clamp(26px, 7.5vw, 34px); }
.th-stats { display: flex; justify-content: center; gap: 22px; margin-top: 8px; font-weight: 700; font-size: 19px; }
.th-stats > span { display: inline-flex; align-items: center; gap: 6px; }
.th-stats .coin { width: 20px; height: 20px; }

/* The signpost: an arrow board on one post, pointing down the trail. The arrow's outline is the edge colour showing
   4px round a second, inset arrow (a clip-path cuts borders off its slanted sides). */
.th-sign { position: absolute; z-index: 2; color: var(--cream); text-shadow: 0 1px 0 var(--edge); }
.th-arrow {
  --tip: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
  position: relative; isolation: isolate; display: grid; gap: 6px; padding: 14px 38px 14px 20px; background: var(--edge); clip-path: var(--tip);
}
.th-arrow::before {
  content: ""; position: absolute; z-index: -1; inset: 4px 5px 4px 4px; clip-path: var(--tip);
  background: radial-gradient(circle at 12px 12px, var(--ink) 3px, transparent 3.6px), radial-gradient(circle at 12px calc(100% - 12px), var(--ink) 3px, transparent 3.6px), var(--grain), linear-gradient(180deg, var(--oak), var(--oak2));
}
.th-arrow > * { position: relative; }
.th-sign::after {
  content: ""; position: absolute; z-index: -1; left: calc(var(--post-x, 50%) - 9px); top: 100%; width: 12px; height: var(--post, 0px);
  border: 3px solid var(--edge); border-top: 0; background: var(--grain), linear-gradient(90deg, var(--walnut), var(--walnut2));
}
.th-sign b { font-size: 24px; line-height: 1; }
.th-sign span { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 16px; }
.th-sign span:empty { display: none; }
.th-sign small { font-size: 13.5px; opacity: 0.85; }

/* The spell seller (game-hub-D21) and what is for sale, on a tag above. */
.th-seller { position: absolute; z-index: 1; transform: translateX(-50%); display: grid; justify-items: center; }
.th-offer {
  display: grid; gap: 4px; margin-bottom: 8px; padding: 7px 10px; border: 2px solid var(--edge); border-radius: 8px; background: #f3e1bd;
  color: var(--ink); font-size: 14px; box-shadow: 0 3px 0 var(--edge);
}
.th-offer[hidden] { display: none; }
.th-offer span { display: flex; gap: 4px; }
.th-spells {
  position: absolute; z-index: 2; min-width: 130px; min-height: 48px; padding: 10px 18px; border: 3px solid #1e3a8a; border-radius: 12px;
  background: linear-gradient(180deg, #3b82f6, #2563eb); box-shadow: 0 5px 0 #1e3a8a; color: #fff; font: 700 19px/1 "Fredoka", system-ui, sans-serif;
  text-shadow: 0 2px 0 #1e3a8a;
}
.th-spells[hidden] { display: none; }
.th-spells:active { transform: translateY(5px); box-shadow: none; }
.th-leave { position: absolute; z-index: 2; }

/* The Round tile's countdown: a ring that empties over CAMP_WAIT seconds. */
.th-go .th-ring { width: 30px; height: 30px; margin-left: 4px; transform: rotate(-90deg); }
.th-ring circle { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 88; stroke-dashoffset: 0; }
.th-go.counting .th-ring circle { animation: th-count 6s linear forwards; }
@keyframes th-count { to { stroke-dashoffset: 88; } }
@media (prefers-reduced-motion: reduce) {
  .th-go.counting .th-ring circle { animation: none; }
  .th-spells:active { transform: none; }
}