/* The game layer: HUD, world map, location scenes, stations and verbs, the
   dialogue box, sheets, the title screen and every effect juice.js makes.
   House rules hold here too: every font-size is max(var(--text-floor), …);
   control labels are near-black on a light fill; motion stops with reduced
   motion or html.motion-off. */

:root { --hud-h: 68px; --region: var(--green-bright); }
@media (max-width: 760px) { :root { --hud-h: 112px; } }

/* the old nav and tabs are gone; toasts sit under the HUD */
#toast-zone { top: calc(var(--hud-h) + 0.6rem); }
main { padding-top: calc(var(--hud-h) + 1rem); }
body[data-view="map"] { overflow: hidden; }
body[data-view="map"] main { position: fixed; inset: var(--hud-h) 0 0 0; max-width: none; padding: 0; }
.boot-msg { text-align: center; margin-top: 30vh; }
html.on-title .hud { visibility: hidden; }

/* ===== HUD ===== */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80; min-height: var(--hud-h);
  display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.9rem; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(5, 6, 4, 0.94), rgba(5, 6, 4, 0.78)); border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.hud-me { display: flex; align-items: center; gap: 0.55rem; background: none; border: 0; color: var(--text); cursor: pointer; padding: 0.2rem 0.4rem 0.2rem 0.2rem; border-radius: var(--r-pill); min-height: 44px; }
.hud-me:hover { background: var(--g-wash); }
.hud-avatar { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: max(var(--text-floor), 1.6rem); background: radial-gradient(circle at 35% 30%, var(--ink-4), var(--ink-1)); }
.hud-ring { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(var(--green-bright) calc(var(--p) * 1%), var(--ink-4) 0); -webkit-mask: radial-gradient(circle, transparent 25px, #000 26px); mask: radial-gradient(circle, transparent 25px, #000 26px); }
.frame-bronze .hud-ring { background: conic-gradient(#d9894a calc(var(--p) * 1%), #4a2f1c 0); }
.frame-silver .hud-ring { background: conic-gradient(#e6ecf2 calc(var(--p) * 1%), #4b525a 0); }
.frame-gold .hud-ring { background: conic-gradient(var(--gold) calc(var(--p) * 1%), #5a3d10 0); }
.frame-diamond .hud-ring { background: conic-gradient(var(--diamond) calc(var(--p) * 1%), #1b3b4f 0); box-shadow: 0 0 14px var(--d-edge); }
.frame-neon .hud-ring { background: conic-gradient(var(--neon-magenta), var(--neon-cyan) calc(var(--p) * 1%), #2a1830 0); }
.frame-royal .hud-ring { background: conic-gradient(var(--neon-violet), var(--gold) calc(var(--p) * 1%), #261b3a 0); box-shadow: 0 0 16px var(--glow-o); }
.hud-who { display: grid; text-align: left; line-height: 1.15; }
.hud-name { font-family: var(--font-disp); font-weight: 400; font-size: max(var(--text-floor), 1.05rem); color: var(--green-bright); }
.hud-title { font-size: max(var(--text-floor), 0.75rem); color: var(--text-dim); font-weight: 700; }
.hud-obj { flex: 1 1 300px; min-width: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 0.7rem; align-items: center; padding: 0.3rem 0.4rem 0.3rem 0.9rem; border-radius: var(--r-3); background: var(--glass-well); border: 1px solid var(--o-edge); }
.hud-obj-ch { grid-column: 1; font-size: max(var(--text-floor), 0.7rem); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-obj-step { grid-column: 1; font-weight: 800; font-size: max(var(--text-floor), 0.95rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-go { grid-column: 2; grid-row: 1 / span 2; }
.hud-purse { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.hud-pill { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.3rem 0.7rem; min-height: 40px; border-radius: var(--r-pill); background: var(--ink-2); border: 1.5px solid var(--ink-5); color: var(--text); font-weight: 800; font-size: max(var(--text-floor), 0.88rem); font-variant-numeric: tabular-nums; }
button.hud-pill { cursor: pointer; } button.hud-pill:hover { border-color: var(--green); }
.hud-num { font-variant-numeric: tabular-nums; }
.hud-streak.hud-alert { border-color: var(--gold); box-shadow: 0 0 0 0 var(--glow-o); animation: hud-alert 1.6s ease-out infinite; }
@keyframes hud-alert { 0% { box-shadow: 0 0 0 0 var(--glow-o); } 100% { box-shadow: 0 0 0 12px transparent; } }
.hud-menu { display: flex; gap: 0.3rem; flex-wrap: nowrap; }
/* desktop: one row while it fits, the objective giving way (ellipsis) down to a readable width; on a
   narrower screen (a tablet) the menu buttons move to a second row instead of running off the edge */
@media (min-width: 761px) {
  .hud { flex-wrap: wrap; row-gap: 0.35rem; }
  .hud-obj { flex: 1 1 200px; min-width: 200px; }
  .hud-purse { flex-wrap: nowrap; }
  .hud-menu { margin-left: auto; }
  .hud-who { flex-shrink: 0; max-width: 15rem; }
  .hud-name, .hud-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (min-width: 761px) and (max-width: 1150px) { .hud-who { display: none; } .hud-purse .hud-pill:nth-child(3) { display: none; } }
.quest-side { display: grid; gap: 0.3rem; justify-items: end; }
.quest-side .chip.btnlike { min-height: 32px; font-size: max(var(--text-floor), 0.72rem); }
.pass-tier.short { opacity: 0.7; }
.hud-btn { position: relative; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: max(var(--text-floor), 1.25rem); background: var(--ctl-fill-lo); border: 1.5px solid var(--ctl-fill-lo); color: var(--ctl-ink); cursor: pointer; transition: transform var(--dur-1) ease, background var(--dur-1) ease; }
.hud-btn:hover { background: var(--green-bright); transform: translateY(-2px); }
.hud-count { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-weight: 900; font-size: max(var(--text-floor), 0.72rem); display: grid; place-items: center; box-shadow: 0 0 0 2px var(--ink-1); }
/* phones: avatar + purse on one row, the objective under it, the menus in a dock at the bottom (thumb reach) */
@media (max-width: 760px) {
  :root { --dock-h: calc(60px + env(safe-area-inset-bottom, 0px)); } /* the dock: 46px buttons, 0.4rem padding, a 1px rule */
  /* no backdrop-filter here: it would make the HUD the containing block of the fixed dock below */
  .hud { gap: 0.35rem 0.4rem; padding: 0.35rem 0.6rem; flex-wrap: wrap; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 6, 4, 0.97); }
  .hud-who { display: none; }
  .hud-me { padding: 0; min-height: 44px; }
  .hud-avatar { width: 42px; height: 42px; }
  .hud-purse { flex: 1; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; overflow: hidden; }
  .hud-pill { padding: 0.25rem 0.55rem; min-height: 36px; }
  .hud-obj { order: 5; flex-basis: 100%; padding: 0.2rem 0.3rem 0.2rem 0.7rem; }
  .hud-menu {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; justify-content: space-around; gap: 0;
    padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom, 0px)); background: rgba(5, 6, 4, 0.94); border-top: 1px solid var(--hair);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .hud-btn { width: 46px; height: 46px; }
  main { padding-bottom: calc(var(--dock-h) + 1rem); }
  body[data-view="map"] main { bottom: var(--dock-h); }
  /* .sheet and .dlg sit above the dock too: their rules follow their base rules below (a rule here would lose to them) */
}
@media (max-width: 420px) { .hud-purse .hud-pill:nth-child(3) { display: none; } }

/* ===== sheets (journal, trophies, calendar, pass, settings…) ===== */
.sheet {
  position: fixed; top: var(--hud-h); right: 0; bottom: 0; z-index: 90; width: min(100vw, 460px); display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--glass-sheen), transparent 30%), rgba(8, 10, 6, 0.97); border-left: 1px solid var(--g-edge); box-shadow: var(--shadow-3);
  transform: translateX(104%); transition: transform var(--dur-3) var(--ease-out);
}
.sheet.open { transform: none; }
.sheet-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1rem 0.6rem; border-bottom: 1px solid var(--hair); }
.sheet-title { flex: 1; font-size: max(var(--text-floor), 1.5rem); color: var(--green-bright); }
/* a column whose children never shrink: a grid here let the sideways-scrolling rows (pass, shop) collapse to a sliver */
.sheet-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.8rem; overscroll-behavior: contain; }
.sheet-body > * { flex-shrink: 0; }
.sheet-sub { font-family: var(--font-disp); font-weight: 400; color: var(--gold); font-size: max(var(--text-floor), 1.15rem); margin-top: 0.4rem; }
.sheet-note { font-size: max(var(--text-floor), 0.82rem); }
.row.wrap { flex-wrap: wrap; }
details.chapter { border: 1px solid var(--hair); border-radius: var(--r-2); background: var(--glass-well); }
details.chapter.complete { border-color: var(--o-edge); }
details.chapter > summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; cursor: pointer; list-style: none; min-height: 44px; }
details.chapter > summary::-webkit-details-marker { display: none; }
.chapter-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-4); font-weight: 900; font-size: max(var(--text-floor), 0.85rem); }
.chapter.complete .chapter-n { background: var(--gold); color: var(--on-gold); }
.chapter-steps { padding: 0 0.8rem 0.8rem; }
.chapter-step { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: start; padding: 0.5rem 0; border-top: 1px solid var(--hair); }
.chapter-step .dim { font-size: max(var(--text-floor), 0.82rem); }
.chapter-step.done { opacity: 0.66; }
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.5rem; }
.trophy { display: grid; gap: 0.15rem; padding: 0.6rem 0.7rem; border-radius: var(--r-2); background: var(--glass-well); border: 1.5px solid var(--ink-4); opacity: 0.6; }
.trophy.got { opacity: 1; border-color: color-mix(in srgb, var(--rar, var(--green)) 60%, transparent); background: color-mix(in srgb, var(--rar, var(--green)) 9%, var(--ink-2)); }
.trophy.rarity-common { --rar: #c9cfc0; } .trophy.rarity-rare { --rar: var(--diamond); } .trophy.rarity-epic { --rar: #b98cff; } .trophy.rarity-legendary { --rar: var(--gold); }
.trophy-icon { font-size: max(var(--text-floor), 1.6rem); }
.trophy small { color: var(--text-dim); font-size: max(var(--text-floor), 0.75rem); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; }
.cal-day { display: grid; justify-items: center; gap: 0.15rem; padding: 0.5rem 0.2rem; border-radius: var(--r-2); background: var(--glass-well); border: 1.5px solid var(--ink-4); text-align: center; }
.cal-day small { font-size: max(var(--text-floor), 0.62rem); color: var(--text-dim); line-height: 1.15; }
.cal-icon { font-size: max(var(--text-floor), 1.5rem); }
.cal-day.claimed { border-color: var(--g-lit); background: var(--g-wash); }
.cal-day.today { border-color: var(--gold); box-shadow: 0 0 18px var(--glow-o); animation: cal-today 1.4s ease-in-out infinite alternate; }
.cal-day.grand { border-style: dashed; }
@keyframes cal-today { to { transform: translateY(-3px); } }
@media (max-width: 420px) { .cal { grid-template-columns: repeat(4, 1fr); } }
.pass-track { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 0.45rem; overflow-x: auto; padding: 0.3rem 0 0.6rem; scroll-snap-type: x proximity; }
.pass-tier { scroll-snap-align: start; display: grid; justify-items: center; align-content: start; gap: 0.25rem; padding: 0.6rem 0.4rem; border-radius: var(--r-2); background: var(--glass-well); border: 1.5px solid var(--ink-4); text-align: center; opacity: 0.6; }
.pass-tier small { font-size: max(var(--text-floor), 0.68rem); color: var(--text-dim); line-height: 1.2; }
.pass-tier.open { opacity: 1; border-color: var(--o-edge); }
.pass-tier.claimed { border-color: var(--g-lit); opacity: 0.85; }
.pass-tier.big { background: color-mix(in srgb, var(--gold) 10%, var(--ink-2)); }
.pass-icon { font-size: max(var(--text-floor), 1.7rem); }
ol.rank { list-style: none; display: grid; gap: 0.35rem; }
.rank-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: var(--r-2); background: var(--glass-well); border: 1px solid var(--hair); }
.rank-row.you { border-color: var(--green); background: var(--g-wash); }
.rank-n { width: 28px; text-align: center; font-weight: 900; } .rank-face { font-size: max(var(--text-floor), 1.3rem); }
.ready-row, .cast-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center; padding: 0.6rem 0.7rem; border-radius: var(--r-2); background: var(--glass-well); border: 1px solid var(--hair); }
.ready-icon, .cast-face { font-size: max(var(--text-floor), 1.6rem); }
.cast-row { grid-template-columns: auto 1fr; width: 100%; text-align: left; color: var(--text); cursor: pointer; font: inherit; }
.cast-row:hover, .cast-row.on { border-color: var(--green); background: var(--g-wash); }
.cast-row .dim { font-size: max(var(--text-floor), 0.8rem); }
dl.keys { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.8rem; align-items: center; }
kbd { display: inline-block; min-width: 2em; padding: 0.1rem 0.45rem; border-radius: 6px; background: var(--ink-4); border: 1px solid var(--ink-5); font-family: var(--mono); font-size: max(var(--text-floor), 0.8rem); text-align: center; }
label.check { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; min-height: 44px; }
label.check input { width: 22px; height: 22px; accent-color: var(--green-bright); }
input[type="range"] { accent-color: var(--green-bright); width: 100%; min-height: 32px; }

/* ===== world map ===== */
.world { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; background: #070b06; }
.world.dragging { cursor: grabbing; }
.world-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.world-terrain, .world-paths, .world-npcs { position: absolute; inset: 0; pointer-events: none; }
.world-terrain > svg, .world-paths > svg { display: block; }
.world-buildings { position: absolute; inset: 0; }
.road { fill: none; stroke: rgba(226, 208, 160, 0.16); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 1 20; }
.road.lit { stroke: color-mix(in srgb, var(--green-bright) 42%, transparent); stroke-dasharray: 2 16; animation: road-flow 2.4s linear infinite; }
@keyframes road-flow { to { stroke-dashoffset: -36; } }
.bld { position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; color: var(--text); }
.bld:focus-visible { outline: none; box-shadow: none; }
.bld-art { position: absolute; inset: 0; display: block; transition: transform var(--dur-2) var(--ease-out), filter var(--dur-2) ease; transform-origin: 50% 92%; }
.bld-art > svg { width: 100%; height: 100%; overflow: visible; display: block; }
.bld-fallback { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); font-size: max(var(--text-floor), 84px); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)); }
/* hover: the building lifts and glows in its family's colour (art/STYLE.md §3) and acts out its function (act-*); press: a squash */
.bld:hover .bld-art, .bld:focus-visible .bld-art { transform: translateY(-6px) scale(1.04); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--fam, var(--green-bright)) 60%, transparent)) brightness(1.08); transition-timing-function: var(--ease-pop), ease; }
.bld:active .bld-art { transform: translateY(-1px) scale(1.07, 0.94); transition-duration: 70ms; }
.bld-scaffold .bld-art { filter: saturate(0.55) brightness(0.85); }
.bld-ruin .bld-art { filter: grayscale(0.9) brightness(0.5); }
.bld-scaffold:hover .bld-art { filter: saturate(0.8) drop-shadow(0 0 16px var(--glow-o)); }
/* names, badges and speech: a screen-space layer over the map, never scaled with it */
.world-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.map-label {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; pointer-events: auto; cursor: pointer;
  padding: 0.2rem 0.65rem; border-radius: 999px; background: rgba(4, 5, 3, 0.86); border: 1px solid var(--hair); color: var(--text);
  font-weight: 800; font-size: max(var(--text-floor), 0.9rem); line-height: 1.25; letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); will-change: transform; transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.map-label.gone { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-1) ease, visibility 0s linear var(--dur-1); }
/* a small pointer from each name towards its building (data-place: 0 below it, 1 above, 2 right, 3 left) */
.map-label::before { content: ""; position: absolute; width: 10px; height: 10px; background: inherit; border: inherit; border-radius: 2px; transform: rotate(45deg); clip-path: polygon(0 0, 100% 0, 0 100%); }
.map-label[data-place="0"]::before { top: -6px; left: calc(50% + 2px); }
.map-label[data-place="1"]::before { bottom: -6px; left: calc(50% + 2px); transform: rotate(225deg); }
.map-label[data-place="2"]::before { left: -6px; top: calc(50% - 5px); transform: rotate(-45deg); }
.map-label[data-place="3"]::before { right: -6px; top: calc(50% - 5px); transform: rotate(135deg); }
.map-label[data-place="4"]::before { top: -6px; left: 7px; }
.map-label[data-place="5"]::before { top: -6px; right: 7px; }
.map-label[data-place="6"]::before { bottom: -6px; left: 7px; transform: rotate(225deg); }
.map-label[data-place="7"]::before { bottom: -6px; right: 7px; transform: rotate(225deg); }
/* the name's cap takes its building's family colour (life.js sets data-fam and --fam), so a glance at a name says what kind of place it is */
.map-label[data-fam] { border-color: color-mix(in srgb, var(--fam) 55%, transparent); box-shadow: inset 6px 0 0 var(--fam), 0 2px 8px rgba(0, 0, 0, 0.45); }
.map-label-scaffold { border-color: var(--o-edge); color: var(--gold); }
.map-label-ruin { color: var(--text-dim); }
.map-label.hot, .map-label.focus { background: var(--green-bright); color: var(--ink-1); border-color: var(--green-bright); }
.map-label[data-fam].hot, .map-label[data-fam].focus { background: var(--fam); border-color: var(--fam); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 16px color-mix(in srgb, var(--fam) 55%, transparent); }
.map-label-badge {
  position: absolute; top: -11px; right: -13px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  background: var(--gold); color: var(--on-gold); font-weight: 900; font-size: max(var(--text-floor), 0.78rem); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.65), 0 0 14px var(--glow-o);
  animation: badge-bob 1.4s ease-in-out infinite;
}
@keyframes badge-bob { 50% { transform: translateY(-3px); } }
.npc-say {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none; padding: 0.2rem 0.6rem; border-radius: 12px; background: #f2f6ec; color: var(--ink-1);
  font-weight: 800; font-size: max(var(--text-floor), 0.8rem); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity var(--dur-2) ease;
}
.npc-say.on { opacity: 1; }
/* zoom buttons */
.map-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 6; display: grid; gap: 6px; }
.map-zoom-btn {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; cursor: pointer; border: 1.5px solid var(--ctl-fill-lo);
  background: var(--ctl-fill-lo); color: var(--ctl-ink); font-weight: 900; font-size: max(var(--text-floor), 1.5rem); line-height: 1; box-shadow: var(--shadow-1);
  transition: transform var(--dur-1) ease, background var(--dur-1) ease;
}
.map-zoom-btn:hover { background: var(--green-bright); transform: translateY(-2px); }
.map-zoom-btn:active { transform: scale(0.94); }
/* the map moves as one GPU layer; at rest it is re-drawn sharp at the zoom it has (see settle() in world.js) */
.world-cam { will-change: transform; }
.world-cam.sharpen { will-change: auto; }
.npc { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; }
.npc-face { display: block; font-size: max(var(--text-floor), 34px); transform: translate(-50%, -100%); filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); }
.npc.flip .npc-face { transform: translate(-50%, -100%) scaleX(-1); }
.npc.walking .npc-face { animation: npc-walk 0.42s ease-in-out infinite; }
@keyframes npc-walk { 50% { translate: 0 -5px; } } /* translate, not margin: the walk bob runs on the compositor instead of re-laying out the map every frame */
.world-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.world-tint { position: absolute; inset: 0; pointer-events: none; transition: background 3s ease; }
/* the terrain bakes in its own light for the hour; buildings take the same light here, labels stay readable */
.world[data-phase="dawn"] .world-tint { background: radial-gradient(120% 90% at 20% 0%, rgba(255, 170, 110, 0.1), transparent 70%); }
/* (no drop-shadow here: blurring 56 buildings every frame costs more than it shows; the windows' halos light up instead, see map-art.css) */
.world[data-phase="dusk"] .bld-built .bld-art { filter: brightness(0.9) sepia(0.12); }
.world[data-phase="night"] .bld-built .bld-art { filter: brightness(0.74) saturate(0.85); }
.world[data-phase="night"] .bld-scaffold .bld-art, .world[data-phase="night"] .bld-ruin .bld-art { filter: grayscale(0.6) brightness(0.45); }
.world-tip {
  position: absolute; z-index: 5; width: 260px; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) ease;
  padding: 0.7rem 0.85rem; border-radius: var(--r-3); background: rgba(6, 8, 5, 0.94); border: 1px solid var(--g-edge); box-shadow: var(--shadow-2); display: grid; gap: 0.3rem; justify-items: start;
}
.world-tip.on { opacity: 1; }
.world-tip b { font-size: max(var(--text-floor), 1.1rem); color: var(--green-bright); }
.world-tip-region { font-size: max(var(--text-floor), 0.7rem); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.world-tip p { font-size: max(var(--text-floor), 0.82rem); color: var(--text-dim); line-height: 1.35; }
.world.zooming .world-cam { transition: none; }
/* map themes from the Forge Pass */
[data-theme="neon-night"] .world-terrain { filter: hue-rotate(200deg) saturate(1.6) brightness(0.85); }
[data-theme="golden-hour"] .world-terrain { filter: sepia(0.45) saturate(1.4) hue-rotate(-12deg); }
[data-theme="frost"] .world-terrain { filter: hue-rotate(150deg) saturate(0.6) brightness(1.15); }
[data-theme="synthwave"] .world-terrain { filter: hue-rotate(250deg) saturate(2) contrast(1.1); }

/* ===== location scene ===== */
.scene { --region-tint: color-mix(in srgb, var(--region) 16%, transparent); animation: scene-in var(--dur-3) var(--ease-out) both; }
@keyframes scene-in { from { opacity: 0; transform: translateY(14px) scale(0.99); } }
.scene-head {
  position: relative; display: grid; grid-template-columns: auto 170px minmax(0, 1fr) minmax(240px, 380px); gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-radius: var(--r-4); overflow: hidden;
  background: radial-gradient(90% 140% at 15% 0%, var(--region-tint), transparent 60%), linear-gradient(180deg, var(--glass-sheen), transparent 40%), var(--glass-lo);
  border: 1px solid color-mix(in srgb, var(--region) 38%, transparent); box-shadow: var(--shadow-2);
}
.scene-back { align-self: start; }
.scene-art { width: 170px; height: 140px; position: relative; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.6)); }
.scene-art > svg { width: 100%; height: 100%; overflow: visible; }
.scene-emoji { display: grid; place-items: center; height: 100%; font-size: max(var(--text-floor), 88px); }
.scene-titles { min-width: 0; display: grid; gap: 0.25rem; }
.scene-name { font-size: max(var(--text-floor), clamp(1.7rem, 3vw, 2.5rem)); color: var(--region); line-height: 1.05; text-shadow: 0 0 10px color-mix(in srgb, var(--region) 50%, transparent); }
.scene-blurb { color: var(--text-dim); font-size: max(var(--text-floor), 0.92rem); }
.scene-mastery { max-width: 360px; }
.scene-host { display: flex; align-items: flex-end; gap: 0.6rem; }
.scene-host-face { flex: 0 0 auto; display: grid; place-items: center; width: 84px; height: 84px; }
.scene-host .say-bubble { flex: 1; }
.scene-tabs { display: flex; gap: 0.4rem; margin: 1rem 0 0.9rem; flex-wrap: wrap; }
.scene-tab { min-height: 44px; padding: 0.45rem 1.1rem; border-radius: var(--r-pill); border: 1.5px solid var(--ctl-fill-lo); background: var(--ctl-fill-lo); color: var(--ctl-ink); font-weight: 900; font-size: max(var(--text-floor), 0.95rem); cursor: pointer; transition: transform var(--dur-1) ease; }
.scene-tab:hover { transform: translateY(-2px); background: var(--ctl-fill); }
.scene-tab[aria-selected="true"] { background: var(--green-bright); border-color: var(--green-bright); box-shadow: 0 0 18px var(--glow-g); }
.scene-body { display: grid; gap: 1rem; }
@media (max-width: 980px) {
  .scene-head { grid-template-columns: auto 120px minmax(0, 1fr); }
  .scene-art { width: 120px; height: 100px; }
  .scene-host { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .scene-head { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "back back" "art titles" "host host"; gap: 0.5rem 0.7rem; padding: 0.7rem; }
  .scene-back { grid-area: back; justify-self: start; min-height: 40px; }
  .scene-art { grid-area: art; width: 88px; height: 76px; }
  .scene-titles { grid-area: titles; }
  .scene-host { grid-area: host; }
  .scene-host-face { width: 60px; height: 60px; }
  .scene-host-face .sendy2d { transform: scale(0.72); }
  .scene-blurb { display: none; }
  .scene-host .say-bubble { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .scene-tabs { margin: 0.7rem 0; }
  .scene-tab { padding: 0.4rem 0.8rem; }
}
.build-site { display: grid; gap: 1rem; margin-top: 1rem; }
.build-log { display: grid; gap: 0.2rem; max-height: 220px; overflow-y: auto; font-family: var(--mono); font-size: max(var(--text-floor), 0.8rem); color: var(--text-dim); }
.build-line { animation: scene-in var(--dur-2) ease both; }

/* ===== stations, verbs, meters, countdowns ===== */
.play-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.station {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.7rem; padding: 1rem 1.1rem; border-radius: var(--r-4); align-content: start;
  background: linear-gradient(180deg, color-mix(in srgb, var(--region) 7%, transparent), transparent 45%), var(--glass-hi);
  border: 1px solid color-mix(in srgb, var(--region) 26%, transparent); box-shadow: var(--shadow-2), inset 0 1px 0 var(--glass-edge);
}
.station-wide { grid-column: 1 / -1; }
.station-glow { border-color: color-mix(in srgb, var(--region) 60%, transparent); box-shadow: var(--shadow-2), 0 0 26px color-mix(in srgb, var(--region) 22%, transparent); }
.station-locked { opacity: 0.75; }
.station-head { display: flex; gap: 0.75rem; align-items: center; }
.station-icon { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: max(var(--text-floor), 1.8rem); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--region) 30%, var(--ink-3)), var(--ink-1)); border: 1px solid color-mix(in srgb, var(--region) 30%, transparent); }
.station-icon svg { width: 40px; height: 40px; }
.station-titles { min-width: 0; }
.station-title { font-size: max(var(--text-floor), 1.25rem); color: var(--region); line-height: 1.15; }
.station-desc { color: var(--text-dim); font-size: max(var(--text-floor), 0.86rem); line-height: 1.4; }
.station-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.station-lock { color: var(--gold); font-weight: 700; font-size: max(var(--text-floor), 0.86rem); }
.station-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.verb { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; flex-wrap: wrap; }
.verb-icon { font-size: max(var(--text-floor), 1.15em); line-height: 1; }
.verb-sub { flex-basis: 100%; font-weight: 700; opacity: 0.8; font-size: max(var(--text-floor), 0.72rem); margin-top: -0.15rem; }
.verb-big { min-height: 58px; padding: 0.8rem 1.6rem; font-size: max(var(--text-floor), 1.15rem); }
.verb.busy { pointer-events: none; }
.verb.busy .verb-label::after { content: " …"; }
.verb.busy::before { opacity: 0.9; animation: mx-rain 0.6s linear infinite; }
.meter { display: grid; gap: 0.25rem; }
.meter-label { display: flex; align-items: center; gap: 0.4rem; font-size: max(var(--text-floor), 0.8rem); font-weight: 800; color: var(--text-dim); }
.meter-val { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.meter-track { height: 12px; border-radius: 999px; background: var(--ink-4); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); }
.meter-fill { display: block; height: 100%; border-radius: inherit; transition: width 0.6s var(--ease-out); background: linear-gradient(90deg, var(--green-dark), var(--green-bright)); position: relative; }
.meter-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: translateX(-100%); animation: meter-shine 2.6s ease-in-out infinite; }
@keyframes meter-shine { 60%, 100% { transform: translateX(100%); } }
.meter-hp .meter-fill { background: linear-gradient(90deg, #a33232, #ff6b6b); }
.meter-mp .meter-fill, .meter-ice .meter-fill { background: linear-gradient(90deg, var(--diamond-deep), var(--diamond)); }
.meter-xp .meter-fill { background: linear-gradient(90deg, #6b3fc4, #b98cff); }
.meter-gold .meter-fill { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.meter-red .meter-fill { background: linear-gradient(90deg, #a33232, var(--red)); }
.countdown { font-variant-numeric: tabular-nums; }
.countdown.is-ready { border-color: var(--g-lit); background: var(--g-tint); color: var(--green-bright); animation: ready-pop 0.5s var(--ease-pop); }
@keyframes ready-pop { 50% { transform: scale(1.15); } }
.stage-box { position: relative; border-radius: var(--r-3); overflow: hidden; background: radial-gradient(80% 70% at 50% 100%, color-mix(in srgb, var(--region) 16%, transparent), transparent 70%), var(--glass-well); border: 1px solid var(--hair); display: grid; place-items: center; }
.say { display: flex; gap: 0.6rem; align-items: flex-end; }
.say-face { flex: 0 0 auto; font-size: max(var(--text-floor), 2rem); }
.say-bubble { position: relative; padding: 0.6rem 0.85rem; border-radius: 16px 16px 16px 4px; background: #f2f6ec; color: var(--ink-1); font-size: max(var(--text-floor), 0.9rem); line-height: 1.4; box-shadow: var(--shadow-1); }
.say-bubble b { color: #2a3a00; }
.rewards { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.reward { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--ink-2); border: 1.5px solid var(--o-edge); color: var(--gold); font-weight: 800; font-size: max(var(--text-floor), 0.8rem); }
.reward.green { border-color: var(--g-lit); color: var(--green-bright); } .reward.ice { border-color: var(--d-edge); color: var(--diamond); }
.reward-icon { font-size: max(var(--text-floor), 1.05rem); }

/* ===== Sendy (2D sheet) ===== */
.sendy2d { position: relative; width: var(--sz); height: var(--sz); flex: 0 0 auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6)); }
.sendy2d-idle { position: absolute; inset: 0; background: url(../img/sendy-idle.png) 0 0 / 100% auto no-repeat; animation: sendy2d-idle 2s steps(30) infinite; }
@keyframes sendy2d-idle { to { background-position: 0 calc(var(--sz) * -30); } }
.sendy2d-act { position: absolute; display: none; background-repeat: no-repeat; }
.sendy2d.acting .sendy2d-act { display: block; }
.sendy2d.acting .sendy2d-idle { visibility: hidden; }

/* ===== dialogue box ===== */
.dlg {
  position: fixed; left: 50%; bottom: 1.2rem; z-index: 420; width: min(calc(100vw - 1.5rem), 860px); transform: translate(-50%, 130%); transition: transform var(--dur-3) var(--ease-out);
  display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: end; padding: 0.9rem 1rem 0.9rem 0.6rem; border-radius: var(--r-4);
  background: linear-gradient(180deg, var(--glass-sheen), transparent 40%), rgba(6, 8, 5, 0.96); border: 2px solid var(--g-edge); box-shadow: var(--shadow-3), 0 0 40px color-mix(in srgb, var(--green) 14%, transparent);
}
.dlg.open { transform: translate(-50%, 0); }
.dlg-portrait { width: 112px; height: 112px; display: grid; place-items: center; margin-top: -40px; }
.dlg-emoji { font-size: max(var(--text-floor), 3.4rem); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)); }
.dlg-body { display: grid; gap: 0.35rem; min-width: 0; }
.dlg-name { color: var(--green-bright); font-size: max(var(--text-floor), 1.2rem); }
.dlg-text { font-size: max(var(--text-floor), 1.05rem); line-height: 1.5; min-height: 3em; cursor: pointer; }
.dlg-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
/* phones: the sheets and the dialogue stop above the bottom dock, which stays usable */
@media (max-width: 760px) { .sheet { bottom: var(--dock-h); } .dlg { bottom: calc(var(--dock-h) + 0.6rem); } }
@media (max-width: 560px) { .dlg { grid-template-columns: 1fr; } .dlg-portrait { width: 80px; height: 80px; margin-top: -50px; } }

/* ===== juice: particles, floating text, flashes, flying icons, reveals, spotlight ===== */
.fx-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 330; }
.fx-float { position: fixed; z-index: 340; pointer-events: none; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--font-disp); font-size: max(var(--text-floor), 1.35rem); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75); }
.fx-float.fx-big { font-size: max(var(--text-floor), 2.2rem); }
.fx-gain { color: var(--green-bright); } .fx-loss { color: var(--red); } .fx-crit { color: var(--gold); font-size: max(var(--text-floor), 1.9rem); }
.fx-xp { color: #c9a6ff; } .fx-info { color: var(--diamond); } .fx-heal { color: #7dffb0; }
.fx-flash { position: fixed; inset: 0; z-index: 335; pointer-events: none; mix-blend-mode: screen; }
.fx-fly { position: fixed; left: 0; top: 0; z-index: 345; pointer-events: none; font-size: max(var(--text-floor), 1.5rem); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.fx-reveal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; align-content: center; gap: 1rem; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rar) 22%, transparent), rgba(0, 0, 0, 0.82) 65%); perspective: 1200px; animation: reveal-in 0.25s ease both; cursor: pointer; }
@keyframes reveal-in { from { opacity: 0; } }
.fx-reveal-card { position: relative; width: min(78vw, 300px); aspect-ratio: 3 / 4; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.3, 1.4, 0.5, 1); animation: reveal-float 2.8s ease-in-out infinite; }
.fx-reveal-card.flipped { transform: rotateY(180deg); }
@keyframes reveal-float { 50% { margin-top: -10px; } }
.fx-face { position: absolute; inset: 0; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; border: 3px solid var(--rar); box-shadow: 0 0 50px color-mix(in srgb, var(--rar) 45%, transparent); }
.fx-back { background: repeating-linear-gradient(45deg, var(--ink-3) 0 12px, var(--ink-2) 12px 24px); }
.fx-back span { font-family: var(--font-disp); font-size: max(var(--text-floor), 5rem); color: var(--rar); }
.fx-front { transform: rotateY(180deg); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rar) 26%, var(--ink-3)), var(--ink-1)); align-content: center; gap: 0.4rem; padding: 1.2rem; text-align: center; }
.fx-rarity { font-weight: 900; letter-spacing: 0.2em; font-size: max(var(--text-floor), 0.75rem); color: var(--rar); }
.fx-icon { font-size: max(var(--text-floor), 4.4rem); line-height: 1.1; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6)); }
.fx-icon svg { width: 110px; height: 110px; }
.fx-title { font-size: max(var(--text-floor), 1.6rem); color: var(--text); }
.fx-sub { color: var(--text-dim); font-weight: 700; font-size: max(var(--text-floor), 0.95rem); }
.fx-note { color: var(--rar); font-weight: 800; font-size: max(var(--text-floor), 0.85rem); }
.fx-reveal-hint { color: var(--text-dim); font-weight: 700; font-size: max(var(--text-floor), 0.85rem); animation: hint-blink 1.6s ease-in-out infinite; }
@keyframes hint-blink { 50% { opacity: 0.4; } }
.fx-spot { position: fixed; inset: 0; z-index: 410; pointer-events: none; }
.fx-spot-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62), 0 0 0 3px var(--gold), 0 0 28px 6px var(--glow-o); transition: all 0.25s var(--ease-out); animation: spot-pulse 1.3s ease-in-out infinite; }
@keyframes spot-pulse { 50% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62), 0 0 0 5px var(--gold), 0 0 40px 10px var(--glow-o); } }
.fx-spot-tip { position: fixed; width: 280px; padding: 0.6rem 0.85rem; border-radius: 14px; background: var(--gold); color: var(--on-gold); font-weight: 900; font-size: max(var(--text-floor), 0.95rem); box-shadow: var(--shadow-2); pointer-events: auto; cursor: pointer; }
.fx-spot-tip::before { content: "👉 "; }

/* ===== title screen ===== */
.title-screen { position: fixed; inset: 0; z-index: 600; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1rem; padding: 2rem clamp(1rem, 5vw, 5rem); background: radial-gradient(120% 90% at 30% 20%, #142010, #040603 70%); overflow: hidden; }
.title-screen.leaving { animation: title-out 0.6s ease forwards; }
@keyframes title-out { to { opacity: 0; transform: scale(1.06); filter: blur(6px); } }
.title-sky { position: absolute; inset: 0; pointer-events: none; }
.title-glow { position: absolute; left: 10%; top: 10%; width: 60vmin; height: 60vmin; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--green-bright) 30%, transparent), transparent 65%); filter: blur(10px); animation: title-glow 6s ease-in-out infinite alternate; }
@keyframes title-glow { to { transform: translate(6vmin, 3vmin) scale(1.15); opacity: 0.75; } }
.title-peak { position: absolute; left: -10%; right: -10%; bottom: -5%; height: 46%; background: linear-gradient(180deg, #16220f, #070a05); clip-path: polygon(0 100%, 0 60%, 14% 38%, 24% 52%, 38% 18%, 50% 40%, 60% 8%, 72% 36%, 84% 22%, 100% 50%, 100% 100%); opacity: 0.9; }
.title-sendy { position: relative; display: grid; place-items: center; min-height: 300px; }
.title-canvas { width: min(46vw, 520px); height: auto; aspect-ratio: 1; }
.title-copy { position: relative; display: grid; gap: 0.6rem; justify-items: start; }
.title-logo { width: 84px; height: 84px; filter: drop-shadow(0 0 18px var(--glow-g)); animation: title-bob 3s ease-in-out infinite; }
@keyframes title-bob { 50% { transform: translateY(-8px) rotate(-3deg); } }
.title-name { font-size: max(var(--text-floor), clamp(4rem, 11vw, 8.5rem)); line-height: 0.9; color: var(--green-bright); }
.title-sub { font-size: max(var(--text-floor), clamp(1.4rem, 3.4vw, 2.4rem)); color: var(--gold); line-height: 1; text-shadow: 0 0 14px var(--glow-o); }
.title-tag { color: var(--text-dim); font-size: max(var(--text-floor), 1.05rem); max-width: 34ch; }
.title-menu { display: grid; gap: 0.6rem; min-width: min(100%, 320px); margin-top: 0.6rem; }
.title-menu .verb-big { display: grid; justify-items: center; }
.title-field input, .title-input { min-height: 52px; font-size: max(var(--text-floor), 1.15rem); }
.title-foot { color: var(--text-mute); font-size: max(var(--text-floor), 0.78rem); max-width: 44ch; margin-top: 0.8rem; }
.title-nets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.title-nets .chip.btnlike { min-height: 40px; font-weight: 800; font-size: max(var(--text-floor), 0.9rem); }
.title-note { color: var(--text-dim); font-size: max(var(--text-floor), 0.92rem); max-width: 38ch; margin: 0; }
.title-note.bad { color: var(--red); }
.title-addr { text-transform: none; letter-spacing: 0.02em; }
.title-wallet-icon { width: 22px; height: 22px; border-radius: 5px; vertical-align: -5px; margin-right: 0.35rem; }
@media (max-width: 760px) { .title-nets { justify-content: center; } }
@media (max-width: 760px) { .title-screen { grid-template-columns: 1fr; align-content: center; text-align: center; } .title-copy { justify-items: center; } .title-sendy { min-height: 200px; } .title-canvas { width: min(70vw, 320px); } }

/* ===== gamepad focus ===== */
html.pad :focus { outline: 3px solid var(--gold) !important; outline-offset: 3px; box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.7), 0 0 24px var(--glow-o) !important; }

/* ===== reduced motion / paused ===== */
@media (prefers-reduced-motion: reduce) {
  .road.lit, .map-label-badge, .npc.walking .npc-face, .meter-fill::after, .cal-day.today, .fx-reveal-card, .title-glow, .title-logo, .hud-streak.hud-alert, .fx-spot-hole, .sendy2d-idle { animation: none !important; }
  .sheet, .dlg, .bld-art { transition: none; }
}
html.motion-off .road.lit, html.motion-off .map-label-badge, html.motion-off .npc.walking .npc-face, html.motion-off .meter-fill::after, html.motion-off .cal-day.today,
html.motion-off .fx-reveal-card, html.motion-off .title-glow, html.motion-off .title-logo, html.motion-off .hud-streak.hud-alert, html.motion-off .fx-spot-hole, html.motion-off .sendy2d-idle { animation: none !important; }

/* ===== shared play pieces: stats, presets, loot tiles, the cast picker ===== */
.stat { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; border-radius: var(--r-2); background: var(--glass-well); border: 1px solid var(--hair); min-width: 0; }
.stat-icon { font-size: max(var(--text-floor), 1.6rem); flex: 0 0 auto; }
.stat-body { display: grid; min-width: 0; }
.stat-label { font-size: max(var(--text-floor), 0.72rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
.stat-value { font-family: var(--font-disp); font-weight: 400; font-size: max(var(--text-floor), 1.35rem); line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-unit { font-family: var(--font-body); font-weight: 800; font-size: max(var(--text-floor), 0.75rem); color: var(--text-dim); }
.stat-green { border-color: var(--g-lit); } .stat-green .stat-value { color: var(--green-bright); }
.stat-ice { border-color: var(--d-edge); } .stat-ice .stat-value { color: var(--diamond); }
.stat-gold { border-color: var(--o-edge); } .stat-gold .stat-value { color: var(--gold); }
.stat-red { border-color: var(--r-edge); } .stat-red .stat-value { color: var(--red); }
.presets { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.loot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.5rem; }
.loot {
  --rar: #c9cfc0; position: relative; display: grid; justify-items: center; align-content: start; gap: 0.15rem; padding: 0.7rem 0.5rem; border-radius: var(--r-3); text-align: center; color: var(--text); font: inherit;
  background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--rar) 20%, var(--ink-3)), var(--ink-1)); border: 2px solid color-mix(in srgb, var(--rar) 55%, transparent);
}
button.loot { cursor: pointer; transition: transform var(--dur-1) ease, box-shadow var(--dur-1) ease; }
button.loot:hover { transform: translateY(-3px); box-shadow: 0 0 18px color-mix(in srgb, var(--rar) 45%, transparent); }
.loot.selected { box-shadow: 0 0 0 3px var(--green-bright), 0 0 22px var(--glow-g); }
.loot.rarity-rare { --rar: var(--diamond); } .loot.rarity-epic { --rar: #b98cff; } .loot.rarity-legendary { --rar: var(--gold); }
.loot-icon { font-size: max(var(--text-floor), 2.2rem); line-height: 1.1; }
.loot-icon svg, .loot-icon img { width: 64px; height: 64px; }
.loot-title { font-size: max(var(--text-floor), 0.88rem); line-height: 1.2; }
.loot-sub { font-size: max(var(--text-floor), 0.72rem); color: var(--text-dim); line-height: 1.2; }
.loot-badge { position: absolute; top: -8px; right: -6px; padding: 0 7px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-weight: 900; font-size: max(var(--text-floor), 0.72rem); }
.cast-pick { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.cast-chip { display: grid; justify-items: center; gap: 0.05rem; min-width: 64px; min-height: 58px; padding: 0.3rem 0.4rem; border-radius: var(--r-2); border: 1.5px solid var(--ctl-fill-lo); background: var(--ctl-fill-lo); color: var(--ctl-ink); cursor: pointer; font: inherit; }
.cast-chip span { font-size: max(var(--text-floor), 1.4rem); line-height: 1.1; }
.cast-chip small { font-weight: 800; font-size: max(var(--text-floor), 0.68rem); white-space: nowrap; }
.cast-chip[aria-checked="true"] { background: var(--green-bright); border-color: var(--green-bright); box-shadow: 0 0 14px var(--glow-g); }

/* ===== the chain and the wallet ===== */
.hud-net b { font-variant-numeric: tabular-nums; }
.hud-net.is-testnet { border-color: color-mix(in srgb, var(--diamond) 55%, transparent); }
.wallet-who { font-size: max(var(--text-floor), 1rem); overflow-wrap: anywhere; }
.wallet-who a { color: var(--diamond); }
.wallet-bals { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: max(var(--text-floor), 0.95rem); }
.wallet-cast { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 40px; }
.wallet-wait { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); z-index: 90; transform: translate(-50%, 140%); padding: 0.7rem 1.1rem; border-radius: 999px; background: var(--ctl-fill-lo); color: var(--ctl-ink); font-weight: 800; font-size: max(var(--text-floor), 1rem); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); transition: transform 0.25s ease; pointer-events: none; }
.wallet-wait.on { transform: translate(-50%, 0); }
html.motion-off .wallet-wait { transition: none; }