/* ==========================================================================
   Idle Junkyard Empire 3D — "Hazard Yard" UI components (R16).
   Ported from the approved mockup (mockup/css/game.css). Viewport classes on
   #app (set by main.js from the same rule the mockup used):
     .vp-desktop | .vp-portrait (w<700 & h>w) | .vp-land (h<=500 & w>h)
   Layer stack inside #ui-root (see --z-* in theme.css):
     world-labels / world-ui 10 · joystick 15 · hud 20 · notify 30 · coach 40
     scrim 50 · menus 60 · dialogs 70 · fx 80 · system 90
   Nothing may render above an open menu except dialogs / fx / system.
   ========================================================================== */
#ui-root, #ui-root * { box-sizing: border-box; }
#ui-root { font-family: var(--font-body); color: var(--ink); -webkit-tap-highlight-color: transparent; }
:where(#ui-root) button { font: inherit; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; margin: 0; }
svg.i { width: 1em; height: 1em; fill: currentColor; flex: none; display: block; }

.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }

/* ---------- layers -------------------------------------------------------- */
#world-labels, #world-ui { z-index: var(--z-world-ui); }
#world-labels > *, #world-ui { pointer-events: none; }
#world-ui > .zsign { pointer-events: none; }
#joystick { z-index: 15; }
#hud     { z-index: var(--z-hud); }
#notify  { z-index: var(--z-notify); }
#coach   { z-index: var(--z-coach); }
#scrim   { z-index: var(--z-scrim); }
#menus   { z-index: var(--z-menu); }
#dialogs { z-index: var(--z-dialog); }
#fx      { z-index: var(--z-fx); }
#system  { z-index: var(--z-system); }
#fx > *, #system > * { pointer-events: none; }
#app.menu-open #notify, #app.menu-open #coach { opacity: 0; pointer-events: none; transition: opacity .15s; }
#app.menu-open #notify *, #app.menu-open #coach * { pointer-events: none !important; }

/* ==========================================================================
   Primitives
   ========================================================================== */
/* 3D "physical" button */
.b3 {
  --c: var(--buy); --cd: var(--buy-dk); --tx: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 20px; border: var(--bw) solid var(--outline); border-radius: var(--r-md);
  background: var(--c); color: var(--tx);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.38), inset 0 -5px 0 var(--cd), 0 var(--lift) 0 var(--outline);
  font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: .5px; line-height: 1;
  text-shadow: 0 2px 0 var(--cd);
  transform: translateY(0); transition: transform var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out), filter .2s;
  white-space: nowrap; overflow: hidden;
}
.b3:active, .b3.pressed { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), inset 0 -2px 0 var(--cd), 0 1px 0 var(--outline); }
.b3 .i { font-size: 1.15em; filter: drop-shadow(0 2px 0 var(--cd)); }
.b3.buy    { --c: var(--buy); --cd: var(--buy-dk); }
.b3.idle   { --c: var(--idle); --cd: var(--idle-dk); }
.b3.danger { --c: var(--danger); --cd: var(--danger-dk); }
.b3.info   { --c: var(--info); --cd: var(--info-dk); }
.b3.gold   { --c: var(--hz-yellow); --cd: var(--hz-yellow-dk); --tx: var(--hz-black); text-shadow: 0 2px 0 rgba(255,255,255,.45); }
.b3.steel  { --c: var(--steel-700); --cd: var(--steel-900); }
.b3.ghost  { --c: var(--paper-2); --cd: var(--paper-line); --tx: var(--ink-2); text-shadow: none; }
.b3.big    { min-height: 64px; font-size: var(--fs-xl); border-radius: var(--r-lg); }
.b3.wide   { width: 100%; }
.b3[disabled] { filter: saturate(.3) brightness(.9); pointer-events: none; }

/* outlined display text */
.dtxt { font-family: var(--font-display); color: #fff; text-shadow: var(--txt-outline); letter-spacing: .5px; }

/* HUD pill */
.pill {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(var(--steel-800), var(--steel-900));
  border: var(--bw) solid var(--outline); border-radius: var(--r-pill);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 0 4px 0 var(--outline), 0 8px 18px rgba(0,0,0,.25);
  color: #fff;
}

/* round rail button */
.rbtn {
  --c: var(--steel-700); --cd: var(--steel-900);
  position: relative; width: 60px; height: 60px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; border: var(--bw) solid var(--outline); background: var(--c); color: #fff;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.3), inset 0 -5px 0 var(--cd), 0 var(--lift) 0 var(--outline);
  transition: transform var(--t-press) var(--ease-out), box-shadow var(--t-press) var(--ease-out);
}
.rbtn:active, .rbtn.pressed { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.25), inset 0 -2px 0 var(--cd), 0 1px 0 var(--outline); }
.rbtn svg.i { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.rbtn .lbl { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 12px; color: #fff; text-shadow: var(--txt-outline); white-space: nowrap; pointer-events: none; }
.rbtn.trophy  { --c: #F2A516; --cd: #A86400; }
.rbtn.orders  { --c: var(--hz-orange); --cd: var(--hz-orange-dk); }
.rbtn.arrange { --c: #4C9BD9; --cd: #255F94; }
.rbtn.gear    { --c: var(--steel-500); --cd: var(--steel-800); }
.rbtn.crew    { --c: #F5C518; --cd: #A87F00; color: var(--hz-black); }
.rbtn.crew svg.i { filter: drop-shadow(0 2px 0 rgba(255,255,255,.35)); }
.rbtn.crew .badge { display: none; }
.rbtn.crew.ping .badge { display: block; animation: badgePulse 1.4s infinite; }

/* badge */
.badge {
  position: absolute; top: -6px; right: -6px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  background: var(--badge); color: #fff; border: 2.5px solid var(--outline);
  font: 15px/19px var(--font-display); text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,.4);
  animation: badgePulse 1.8s var(--ease-out) infinite; pointer-events: none;
}
.badge.dot { min-width: 18px; height: 18px; padding: 0; top: -4px; right: -4px; }
.badge:empty:not(.dot), .badge.hide { display: none; }
@keyframes badgePulse { 0%,70%,100% { transform: scale(1); } 80% { transform: scale(1.25); } 90% { transform: scale(.95); } }

/* hazard stripe band */
.stripe { height: 10px; background: var(--stripe); border-bottom: 2px solid var(--outline); }

/* rivets on panels (4 corners) */
.rivets::after {
  content: ''; position: absolute; inset: 8px; pointer-events: none;
  background:
    radial-gradient(circle at 5px 5px, #D8DEE5 0 3px, #5D6875 3.5px 4.5px, transparent 5px) top left / 10px 10px no-repeat,
    radial-gradient(circle at 5px 5px, #D8DEE5 0 3px, #5D6875 3.5px 4.5px, transparent 5px) top right / 10px 10px no-repeat;
}

/* ==========================================================================
   HUD
   ========================================================================== */
/* money */
#money { left: calc(var(--sa-l) + var(--edge)); top: calc(var(--sa-t) + var(--edge)); height: 60px; padding: 0 20px 0 6px; min-width: 186px; }
#money .coin { width: 56px; height: 56px; margin: -8px 0 -8px -14px; filter: drop-shadow(0 3px 0 var(--outline)); }
#money .amt { font-family: var(--font-display); font-size: 30px; line-height: 1; text-shadow: var(--txt-outline); font-variant-numeric: tabular-nums; }
#money .rate { font-family: var(--font-display); font-size: 14px; color: var(--buy-lt); line-height: 1; margin-top: 3px; text-shadow: 0 2px 0 var(--outline); }
#money.bump .coin { animation: coinBump .35s var(--spring); }
#money.spend .amt { color: #FFB4AE; }
@keyframes coinBump { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-12deg); } 100% { transform: scale(1); } }

/* speed chip */
#speed { left: calc(var(--sa-l) + var(--edge)); top: calc(var(--sa-t) + var(--edge) + 72px); height: var(--tap); padding: 0 14px 0 10px; gap: 6px; font-family: var(--font-display); font-size: 20px; }
#speed svg.i { width: 24px; height: 24px; color: var(--steel-300); }
#speed[data-s="2"] { background: linear-gradient(#2E8A3A, #1F6B2A); } #speed[data-s="2"] svg.i { color: var(--buy-lt); }
#speed[data-s="3"] { background: linear-gradient(#D9761A, #A8520A); } #speed[data-s="3"] svg.i { color: var(--hz-yellow-lt); }
#speed:active { transform: translateY(3px); }

/* day pill */
#day { left: 50%; top: calc(var(--sa-t) + var(--edge)); transform: translateX(-50%); height: 60px; padding: 0 8px 0 5px; gap: 8px; }
#day .ring { position: relative; width: 48px; height: 48px; flex: none; }
#day .ring svg.r { width: 48px; height: 48px; transform: rotate(-90deg); }
#day .ring .bg { fill: var(--steel-950); stroke: #0B0E12; stroke-width: 6; }
#day .ring .fg { fill: none; stroke: var(--hz-yellow); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
#day.low .ring .fg { stroke: var(--danger); }
#day .ring .fc { position: absolute; inset: 0; display: grid; place-items: center; }
#day .ring .fc svg.i { width: 22px; height: 22px; }
#day .txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
#day .lbl { font-family: var(--font-display); font-size: 13px; color: var(--hz-yellow); letter-spacing: 1px; }
#day .time { font-family: var(--font-display); font-size: 26px; text-shadow: var(--txt-outline); font-variant-numeric: tabular-nums; }
#day.low .time { color: #FF8B83; animation: tick 1s steps(1) infinite; }
@keyframes tick { 50% { transform: scale(1.08); } }
#day .pz { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--steel-700); border: 2.5px solid var(--outline); margin-left: 4px; box-shadow: inset 0 -3px 0 var(--steel-900); }
#day .pz svg.i { width: 22px; height: 22px; }
#day:active .pz { transform: translateY(2px); }

/* right rail */
#rail { position: absolute; right: calc(var(--sa-r) + var(--edge)); top: calc(var(--sa-t) + var(--edge)); display: flex; flex-direction: column; gap: 16px; padding: 2px 0 8px; }

/* upgrades primary */
#upg-btn { overflow: visible;
  position: absolute; right: calc(var(--sa-r) + var(--edge) + 4px); bottom: calc(var(--sa-b) + var(--edge) + 6px);
  height: 84px; padding: 0 26px 0 14px; gap: 10px; border-radius: 26px; font-size: 30px;
}
#upg-btn .ico { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.22); border: 3px solid var(--outline); display: grid; place-items: center; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
#upg-btn .ico svg.i { width: 32px; height: 32px; }
#upg-btn .badge { top: -10px; right: -10px; min-width: 32px; height: 32px; font-size: 19px; line-height: 27px; border-radius: 16px; }
#upg-btn.can { animation: glow 1.6s ease-in-out infinite; }
#upg-btn.can .ico svg.i { animation: arrowHop 1.6s var(--spring) infinite; }
@keyframes glow { 0%,100% { box-shadow: inset 0 3px 0 rgba(255,255,255,.38), inset 0 -5px 0 var(--cd), 0 var(--lift) 0 var(--outline), 0 0 0 0 rgba(140,245,91,.0); }
                  50% { box-shadow: inset 0 3px 0 rgba(255,255,255,.38), inset 0 -5px 0 var(--cd), 0 var(--lift) 0 var(--outline), 0 0 0 10px rgba(140,245,91,.35); } }
@keyframes arrowHop { 0%,60%,100% { transform: translateY(0); } 75% { transform: translateY(-5px); } }

/* ==========================================================================
   Notification column (order slot + toasts). Never overlaps HUD controls:
   it lives in the left column under money/speed, width-capped before the rail.
   ========================================================================== */
#notify .col { position: absolute; left: calc(var(--sa-l) + var(--edge)); top: calc(var(--sa-t) + var(--edge) + 134px); width: 340px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
#notify .col > * { pointer-events: auto; }
.ocard {
  position: relative; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px;
  padding: 10px 12px 10px 10px; min-height: 76px; border-radius: var(--r-md); text-align: left;
  background: var(--paper); border: var(--bw) solid var(--outline); box-shadow: 0 4px 0 var(--outline), 0 10px 20px rgba(0,0,0,.25);
  animation: slideIn var(--t-open) var(--spring);
}
.ocard .oi { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--hz-orange); border: 2.5px solid var(--outline); color: #fff; box-shadow: inset 0 -4px 0 var(--hz-orange-dk); }
.ocard .oi svg.i { width: 30px; height: 30px; }
.ocard .on { font-family: var(--font-display); font-size: 18px; line-height: 1.05; color: var(--ink); }
.ocard .oq { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.ocard .bar { height: 10px; border-radius: 5px; background: var(--paper-2); border: 2px solid var(--outline); margin-top: 6px; overflow: hidden; }
.ocard .bar i { display: block; height: 100%; background: var(--hz-orange); border-radius: 3px; }
.ocard .or { text-align: right; }
.ocard .pay { font-family: var(--font-display); font-size: 20px; color: var(--buy-dk); display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.ocard .pay svg { width: 20px; height: 20px; }
.ocard .tm { font-family: var(--font-display); font-size: 15px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; justify-content: flex-end; margin-top: 3px; }
.ocard .tm svg { width: 16px; height: 16px; }
.ocard .tag { position: absolute; top: -12px; left: 12px; padding: 2px 10px; border-radius: 8px; background: var(--hz-yellow); border: 2px solid var(--outline); font: 12px/16px var(--font-display); letter-spacing: 1px; color: var(--hz-black); }
.ocard.offer { grid-template-columns: 52px 1fr; padding-bottom: 12px; }
.ocard.offer .acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
.ocard.offer .acts .b3 { font-size: 18px; min-height: 48px; }

.toast {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 16px;
  background: rgba(30,38,48,.94); border: var(--bw) solid var(--outline); box-shadow: 0 4px 0 var(--outline);
  color: #fff; font-weight: 600; font-size: 15px; line-height: 1.25; white-space: normal;
  animation: slideIn var(--t-open) var(--spring);
}
.toast .ti { width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center; border: 2px solid var(--outline); }
.toast .ti svg { width: 22px; height: 22px; }
.toast.reward .ti { background: var(--gold); color: var(--hz-black); }
.toast.info .ti   { background: var(--info); color: #fff; }
.toast.warn .ti   { background: var(--warn); color: #fff; }
.toast.good .ti   { background: var(--buy); color: #fff; }
.toast b { font-family: var(--font-display); font-weight: 400; color: var(--hz-yellow-lt); letter-spacing: .3px; }
.toast.out { animation: slideOut .25s var(--ease-in) forwards; }
@keyframes slideIn { from { transform: translateX(-30px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideOut { to { transform: translateX(-30px); opacity: 0; } }

/* ==========================================================================
   World UI: build-zone signs, floating income, worker bubbles
   ========================================================================== */
.zsign { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: auto; cursor: pointer; animation: signBob 2.6s ease-in-out infinite; }
.zsign .board { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; background: var(--paper); border: var(--bw) solid var(--outline); border-radius: 14px; box-shadow: 0 4px 0 var(--outline); position: relative; overflow: hidden; }
.zsign .board::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--stripe); }
.zsign .zi { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--info); color: #fff; border: 2px solid var(--outline); margin-top: 4px; }
.zsign .zi svg { width: 26px; height: 26px; }
.zsign .zn { font-family: var(--font-display); font-size: 16px; color: var(--ink); line-height: 1; margin-top: 4px; white-space: nowrap; }
.zsign .zp { display: flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 17px; color: var(--buy-dk); margin-top: 2px; }
.zsign .zp svg { width: 18px; height: 18px; }
.zsign .zp.no { color: var(--ink-2); }
.zsign .zbar { height: 8px; width: 100%; margin-top: 4px; border-radius: 4px; background: var(--paper-2); border: 1.5px solid var(--outline); overflow: hidden; }
.zsign .zbar i { display: block; height: 100%; background: var(--buy); }
.zsign .post { width: 8px; height: 22px; background: linear-gradient(90deg, #8a96a3, #5d6875); border: 2px solid var(--outline); border-top: 0; }
.zsign.small .zi { width: 32px; height: 32px; } .zsign.small .zn { font-size: 14px; }
.zsign.locked .zi { background: var(--idle); }
@keyframes signBob { 0%,100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, calc(-100% - 4px)); } }
.zone-glow { position: absolute; border: 4px dashed var(--hz-yellow); border-radius: 8px; background: rgba(255,194,26,.18); animation: zonePulse 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes zonePulse { 50% { background: rgba(255,194,26,.35); } }

.floater { position: absolute; font-family: var(--font-display); font-size: 22px; color: var(--buy-lt); text-shadow: var(--txt-outline); pointer-events: none; animation: floatUp 1.6s var(--ease-out) forwards; }
@keyframes floatUp { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -60px) scale(1); opacity: 0; } }

/* ==========================================================================
   Coach mark (first-time hint)
   ========================================================================== */
.coach-ring { position: absolute; width: 120px; height: 120px; transform: translate(-50%, -50%); border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 4px var(--outline), 0 0 0 9999px rgba(10,14,20,.38); animation: ringPulse 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes ringPulse { 50% { transform: translate(-50%, -50%) scale(1.08); } }
.coach-hand { position: absolute; width: 64px; height: 64px; pointer-events: none; animation: handTap 1.4s var(--ease-out) infinite; transform-origin: 30% 10%; }
.coach-hand svg { width: 100%; height: 100%; overflow: visible; }
@keyframes handTap { 0%,100% { transform: translate(0,0) rotate(-12deg); } 45% { transform: translate(-6px,-10px) rotate(-12deg) scale(.92); } }
.coach-bubble { position: absolute; max-width: 270px; padding: 12px 16px 12px 14px; background: #fff; border: var(--bw) solid var(--outline); border-radius: 18px; box-shadow: 0 5px 0 var(--outline); font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--ink); display: flex; gap: 10px; align-items: flex-start; animation: popIn var(--t-open) var(--spring); }
.coach-bubble .av { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--hz-yellow); border: 2.5px solid var(--outline); display: grid; place-items: center; }
.coach-bubble .av svg { width: 26px; height: 26px; color: var(--hz-black); }
.coach-bubble b { font-family: var(--font-display); font-weight: 400; color: var(--hz-orange-dk); }
.coach-bubble .steps { display: flex; gap: 5px; margin-top: 8px; }
.coach-bubble .steps i { width: 18px; height: 6px; border-radius: 3px; background: var(--paper-line); }
.coach-bubble .steps i.on { background: var(--hz-orange); }
.coach-bubble .skip { margin-left: auto; font-size: 13px; color: var(--ink-2); text-decoration: underline; background: none; border: 0; padding: 12px 4px; min-height: 44px; }
.coach-bubble::after { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border: var(--bw) solid var(--outline); border-top: 0; border-left: 0; transform: rotate(45deg); bottom: -11px; left: var(--tail, 40px); }
.coach-bubble.tail-top::after { bottom: auto; top: -11px; transform: rotate(-135deg); }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ==========================================================================
   Scrim + menus (panels / bottom sheets)
   ========================================================================== */
#scrim { position: absolute; inset: 0; background: rgba(8,12,18,.55); opacity: 0; pointer-events: none; transition: opacity var(--t-close); backdrop-filter: blur(0px); }
#scrim.on { opacity: 1; pointer-events: auto; transition-duration: var(--t-open); backdrop-filter: blur(2px); }

.sheet {
  position: absolute; left: 50%; top: 50%; width: min(760px, calc(100% - 48px)); max-height: min(780px, calc(100% - 64px));
  display: flex; flex-direction: column; background: var(--paper);
  border: 4px solid var(--outline); border-radius: var(--r-lg); box-shadow: 0 8px 0 var(--outline), 0 30px 60px rgba(0,0,0,.45);
  transform: translate(-50%, -50%); overflow: hidden; pointer-events: auto;
  animation: sheetIn var(--t-open) var(--spring);
}
.sheet.closing { animation: sheetOut var(--t-close) var(--ease-in) forwards; }
@keyframes sheetIn { from { transform: translate(-50%, -50%) scale(.7); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes sheetOut { to { transform: translate(-50%, -50%) scale(.85); opacity: 0; } }
.sheet.sm { width: min(460px, calc(100% - 48px)); }

.sh-head { position: relative; flex: none; background: linear-gradient(var(--steel-700), var(--steel-800)); border-bottom: 4px solid var(--outline); }
.sh-head .bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 12px 18px; min-height: 72px; }
.sh-head .ttl { font-family: var(--font-display); font-size: 32px; color: #fff; text-shadow: var(--txt-outline); display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.sh-head .ttl svg.i { width: 36px; height: 36px; color: var(--hz-yellow); filter: drop-shadow(0 3px 0 var(--outline)); }
.sh-head .sub { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--steel-300); text-shadow: none; display: block; margin-top: 2px; letter-spacing: 0; }
.sh-head .x { width: 52px; height: 52px; border-radius: 50%; padding: 0; display: grid; place-items: center; background: var(--steel-100); color: var(--hz-black); border: var(--bw) solid var(--outline); box-shadow: inset 0 -4px 0 var(--steel-300), 0 4px 0 var(--outline); flex: none; }
.sh-head .x svg { width: 28px; height: 28px; }
.sh-head .x:active { transform: translateY(3px); box-shadow: inset 0 -2px 0 var(--steel-300), 0 1px 0 var(--outline); }
.sh-head .grab { display: none; }
.sh-head::after { content: ''; position: absolute; left: 10px; right: 10px; top: 18px; height: 0; }

.sh-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 20px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.sh-body::-webkit-scrollbar { width: 10px; } .sh-body::-webkit-scrollbar-thumb { background: var(--paper-line); border-radius: 5px; border: 2px solid var(--paper); }
.sh-foot { flex: none; padding: 12px 18px calc(14px + var(--sa-b-sheet, 0px)); border-top: 3px dashed var(--paper-line); background: var(--paper-2); display: flex; gap: 12px; }

/* tabs */
.tabs { display: flex; gap: 8px; padding: 12px 18px 0; flex: none; align-items: flex-end; background: var(--paper-2); border-bottom: 3px solid var(--outline); }
.tab {
  position: relative; flex: 1; min-height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: var(--bw) solid var(--outline); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--paper-line); color: var(--ink-2);
  font-family: var(--font-display); font-size: 15px; letter-spacing: .5px; padding: 6px 4px 6px; margin-bottom: 0;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4);
}
.tab svg.i { width: 26px; height: 26px; }
.tab.on { background: var(--paper); color: var(--ink); min-height: 68px; margin-bottom: -3px; padding-bottom: 9px; z-index: 1; }
.tab.on svg.i { color: var(--hz-orange); }
.tab.locked { color: #9C8B73; }
.tab.locked .lk { position: absolute; top: 6px; right: 8px; width: 18px; height: 18px; color: #9C8B73; }
.tab .badge { top: -9px; right: -6px; }

.seg { display: inline-flex; border: var(--bw) solid var(--outline); border-radius: 14px; overflow: hidden; background: var(--paper-2); box-shadow: 0 3px 0 var(--outline); flex: none; }
.seg button { min-width: 56px; min-height: 44px; border: 0; background: transparent; font-family: var(--font-display); font-size: 17px; color: var(--ink-2); padding: 0 12px; }
.seg button + button { border-left: 2px solid var(--paper-line); }
.seg button.on { background: var(--info); color: #fff; text-shadow: 0 2px 0 var(--info-dk); box-shadow: inset 0 -3px 0 var(--info-dk); }

.toolrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.toolrow .hint { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.toolrow .hint b { color: var(--buy-dk); font-family: var(--font-display); font-weight: 400; font-size: 16px; }

/* upgrade card */
.ucard {
  position: relative; display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center;
  padding: 12px 12px 12px 12px; margin-bottom: 12px; background: var(--card); border: var(--bw) solid var(--outline); border-radius: 18px;
  box-shadow: 0 4px 0 var(--outline);
}
.ucard.afford { box-shadow: 0 4px 0 var(--outline), inset 0 0 0 3px rgba(60,199,78,.35); }
.ucard .uic { position: relative; width: 72px; height: 72px; border-radius: 16px; display: grid; place-items: center; background: var(--tile, var(--info)); border: var(--bw) solid var(--outline); color: #fff; box-shadow: inset 0 -6px 0 rgba(0,0,0,.2), inset 0 3px 0 rgba(255,255,255,.3); }
.ucard .uic svg.i { width: 42px; height: 42px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.ucard .lv { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 8px; background: var(--hz-black); color: var(--hz-yellow); font: 13px/17px var(--font-display); border: 2px solid var(--outline); white-space: nowrap; }
.ucard .un { font-family: var(--font-display); font-size: 21px; line-height: 1.05; color: var(--ink); }
.pips { display: flex; gap: 4px; margin: 6px 0 6px; }
.pips i { width: 16px; height: 9px; border-radius: 5px; background: var(--paper-2); border: 2px solid #CDB58A; }
.pips i.on { background: var(--hz-orange); border-color: var(--outline); }
.pips i.next { background: repeating-linear-gradient(-45deg, var(--hz-yellow) 0 3px, #fff 3px 6px); border-color: var(--outline); animation: badgePulse 1.4s infinite; }
.ucard .ue { font-size: 15px; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.ucard .ue .from { color: var(--ink-2); }
.ucard .ue .to { color: var(--buy-dk); font-family: var(--font-display); font-weight: 400; font-size: 17px; }
.ucard .ue .arr { color: var(--buy-dk); font-weight: 700; margin: 0 2px; }
.ucard .new { position: absolute; top: -10px; right: 14px; padding: 1px 9px; border-radius: 8px; background: var(--badge); color: #fff; font: 13px/17px var(--font-display); border: 2px solid var(--outline); letter-spacing: .5px; }
.price { min-width: 128px; flex-direction: column; gap: 2px; padding: 6px 14px 10px; min-height: 64px; font-size: 22px; }
.price .row { display: flex; align-items: center; gap: 6px; }
.price .row svg { width: 22px; height: 22px; filter: none; }
.price .sub { font-family: var(--font-body); font-weight: 600; font-size: 12px; text-shadow: none; opacity: .9; }
.price .fill { position: absolute; left: 6px; right: 6px; bottom: 7px; height: 7px; border-radius: 4px; background: rgba(0,0,0,.22); overflow: hidden; }
.price .fill i { display: block; height: 100%; width: var(--p, 0%); background: var(--hz-yellow); border-radius: 4px; }
.price.idle { --tx: #fff; }
.price.maxed { --c: var(--gold); --cd: var(--gold-dk); --tx: var(--hz-black); text-shadow: none; }

.lockbox { text-align: center; padding: 28px 16px 12px; }
.lockbox .big { width: 92px; height: 92px; margin: 0 auto 12px; border-radius: 24px; display: grid; place-items: center; background: var(--idle); color: #fff; border: 4px solid var(--outline); box-shadow: 0 5px 0 var(--outline), inset 0 -6px 0 var(--idle-dk); }
.lockbox .big svg { width: 54px; height: 54px; }
.lockbox h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin: 4px 0 4px; color: var(--ink); }
.lockbox p { font-weight: 600; color: var(--ink-2); margin: 0 0 14px; font-size: 16px; }
.pbar { height: 22px; border-radius: 11px; border: var(--bw) solid var(--outline); background: var(--paper-2); overflow: hidden; position: relative; }
.pbar i { display: block; height: 100%; background: linear-gradient(var(--hz-yellow-lt), var(--hz-yellow)); }
.pbar span { position: absolute; inset: 0; display: grid; place-items: center; font: 14px/1 var(--font-display); color: var(--ink); }
.preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 18px; text-align: left; }
.preview div { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; border: 2px dashed var(--paper-line); color: var(--ink-2); font-weight: 600; font-size: 14px; }
.preview svg { width: 26px; height: 26px; color: #9C8B73; }

/* staff */
.hire { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 12px; margin-bottom: 14px; border-radius: 18px; border: var(--bw) dashed var(--outline); background: #FFFBEF; }
.wcard { padding: 12px; margin-bottom: 12px; background: var(--card); border: var(--bw) solid var(--outline); border-radius: 18px; box-shadow: 0 4px 0 var(--outline); }
.wcard .top { display: flex; align-items: center; gap: 12px; }
.wcard .av { width: 56px; height: 56px; border-radius: 50%; background: var(--hz-yellow); border: var(--bw) solid var(--outline); display: grid; place-items: center; color: var(--hz-black); flex: none; box-shadow: inset 0 -5px 0 var(--hz-yellow-dk); }
.wcard .av svg { width: 34px; height: 34px; }
.wcard .nm { font-family: var(--font-display); font-size: 21px; line-height: 1; }
.wcard .meta { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-top: 3px; }
.wcard .meta b { color: var(--buy-dk); }
.wcard .dismiss { margin-left: auto; min-height: 44px; padding: 0 12px; font-size: 15px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.stat { border-radius: 14px; background: var(--paper); border: 2px solid var(--paper-line); padding: 8px 8px 8px; text-align: center; }
.stat .k { font-size: 13px; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; justify-content: center; gap: 4px; }
.stat .k svg { width: 16px; height: 16px; }
.stat .v { font-family: var(--font-display); font-size: 17px; color: var(--ink); margin: 2px 0 6px; }
.stat .v .to { color: var(--buy-dk); }
.stat .b3 { width: 100%; min-height: 48px; font-size: 17px; padding: 0 6px; border-radius: 12px; }

/* settings */
.sgroup { margin-bottom: 18px; }
.sgroup h4 { margin: 0 0 8px 4px; font-family: var(--font-display); font-weight: 400; font-size: 15px; letter-spacing: 1.5px; color: var(--ink-2); text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.sgroup h4::after { content: ''; flex: 1; height: 3px; border-radius: 2px; background: var(--paper-line); }
.srow { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px; background: var(--card); border: var(--bw) solid var(--outline); border-radius: 16px; margin-bottom: 8px; box-shadow: 0 3px 0 var(--outline); }
.srow .si { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--steel-700); color: #fff; border: 2px solid var(--outline); flex: none; }
.srow .si svg { width: 26px; height: 26px; }
.srow .sl { flex: 1; min-width: 0; }
.srow .sl .t { font-family: var(--font-display); font-size: 18px; line-height: 1.1; }
.srow .sl .d { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.srow.link { cursor: pointer; }
.srow.link .chev { width: 28px; height: 28px; color: var(--ink-2); }
.srow .val { font-family: var(--font-display); font-size: 17px; color: var(--ink-2); width: 44px; text-align: right; }
input[type=range].slider { -webkit-appearance: none; appearance: none; width: 42%; min-width: 120px; height: 48px; background: transparent; margin: 0; }
input[type=range].slider::-webkit-slider-runnable-track { height: 16px; border-radius: 8px; border: var(--bw) solid var(--outline); background: linear-gradient(90deg, var(--hz-yellow) 0 var(--v, 50%), var(--paper-2) var(--v, 50%)); }
input[type=range].slider::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -12px; border-radius: 50%; background: #fff; border: var(--bw) solid var(--outline); box-shadow: inset 0 -4px 0 var(--steel-300), 0 3px 0 var(--outline); }
input[type=range].slider::-moz-range-track { height: 12px; border-radius: 8px; border: var(--bw) solid var(--outline); background: var(--paper-2); }
input[type=range].slider::-moz-range-progress { height: 12px; border-radius: 8px; background: var(--hz-yellow); }
input[type=range].slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: var(--bw) solid var(--outline); }
.tog { position: relative; width: 76px; height: 44px; border-radius: 22px; border: var(--bw) solid var(--outline); background: var(--idle); box-shadow: inset 0 4px 0 rgba(0,0,0,.15); flex: none; padding: 0; }
.tog::after { content: ''; position: absolute; top: 3px; left: 3px; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: var(--bw) solid var(--outline); box-shadow: inset 0 -4px 0 var(--steel-300); transition: left .22s var(--spring); }
.tog.on { background: var(--buy); }
.tog.on::after { left: 35px; }
.tog span { position: absolute; top: 50%; transform: translateY(-50%); font: 12px/1 var(--font-display); color: #fff; }
.tog span.y { left: 10px; } .tog span.n { right: 8px; }
.tog.on span.n, .tog:not(.on) span.y { display: none; }
.srow.danger .si { background: var(--danger); }
.select { min-height: 48px; padding: 0 14px; border: var(--bw) solid var(--outline); border-radius: 12px; background: var(--paper-2); font-family: var(--font-display); font-size: 16px; color: var(--ink); display: flex; align-items: center; gap: 6px; }

/* pause */
.pause-body { display: flex; flex-direction: column; gap: 14px; }
.pause-body .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pause-body .b3.big { min-height: 76px; font-size: 32px; }
.pause-body .row2 .b3 { min-height: 64px; font-size: 20px; }
.saved { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--buy-dk); font-size: 15px; margin-top: 2px; }
.saved .ck { width: 26px; height: 26px; border-radius: 50%; background: var(--buy); color: #fff; display: grid; place-items: center; border: 2px solid var(--outline); }
.saved .ck svg { width: 16px; height: 16px; }
.restart-link { align-self: center; min-height: 48px; padding: 0 18px; border-radius: 12px; border: 2px dashed var(--danger); background: transparent; color: var(--danger-dk); font-family: var(--font-display); font-size: 17px; display: flex; align-items: center; gap: 8px; }
.restart-link svg { width: 22px; height: 22px; }
.stats-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats-mini div { text-align: center; padding: 8px; border-radius: 12px; background: var(--card); border: 2px solid var(--paper-line); }
.stats-mini b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--ink); }
.stats-mini span { font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .5px; }

/* dialogs */
#dialogs .dlg-wrap { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,12,18,.45); animation: fadeIn .2s; padding: 20px; }
.dialog { position: relative; width: min(420px, 100%); background: var(--paper); border: 4px solid var(--outline); border-radius: var(--r-lg); box-shadow: 0 8px 0 var(--outline), 0 30px 60px rgba(0,0,0,.5); padding: 52px 20px 18px; text-align: center; animation: popIn var(--t-open) var(--spring); }
.dialog .di { position: absolute; top: -38px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; background: var(--danger); color: #fff; border: 4px solid var(--outline); box-shadow: inset 0 -6px 0 var(--danger-dk), 0 5px 0 var(--outline); }
.dialog .di svg { width: 44px; height: 44px; }
.dialog.neutral .di { background: var(--info); box-shadow: inset 0 -6px 0 var(--info-dk), 0 5px 0 var(--outline); }
.dialog h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--ink); line-height: 1.1; }
.dialog p { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.dialog .loss { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 16px; }
.dialog .loss span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #FFE3E0; border: 2px solid #F3A39B; color: var(--danger-dk); font-weight: 700; font-size: 14px; }
.dialog .loss svg { width: 18px; height: 18px; }
.dialog .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.dialog .acts .b3 { min-height: 58px; font-size: 20px; padding: 0 10px; }
.dialog .step { font: 13px/1 var(--font-display); letter-spacing: 1px; color: var(--danger-dk); margin-bottom: 8px; }
.hold { position: relative; }
.hold .hf { position: absolute; inset: 0; background: rgba(255,255,255,.35); transform-origin: left; transform: scaleX(0); pointer-events: none; }
.hold.holding .hf { transform: scaleX(1); transition: transform 1.4s linear; }
@keyframes fadeIn { from { opacity: 0; } }

/* day summary */
.summary { width: min(620px, calc(100% - 32px)); background: var(--paper); overflow: visible; max-height: calc(100% - 40px); }
.summary .ribbon { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); padding: 10px 34px 12px; background: var(--hz-yellow); border: 4px solid var(--outline); border-radius: 16px; box-shadow: 0 5px 0 var(--outline); white-space: nowrap; font-family: var(--font-display); font-size: 30px; color: var(--hz-black); z-index: 2; }
.summary .ribbon::before, .summary .ribbon::after { content: ''; position: absolute; top: 14px; width: 30px; height: 40px; background: var(--hz-orange); border: 4px solid var(--outline); z-index: -1; }
.summary .ribbon::before { left: -22px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%); }
.summary .ribbon::after { right: -22px; clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%); }
.summary .sum-in { overflow-y: auto; padding: 44px 20px 18px; display: flex; flex-direction: column; gap: 12px; border-radius: inherit; }
.stars { display: flex; justify-content: center; align-items: flex-end; gap: 6px; }
.stars svg { fill: currentColor; width: 64px; height: 64px; color: #D9C9A6; filter: drop-shadow(0 4px 0 var(--outline)); stroke: var(--outline); stroke-width: 1.4px; paint-order: stroke; }
.stars svg:nth-child(2) { width: 82px; height: 82px; }
.stars svg.on { color: var(--gold); animation: starPop .5s var(--spring) both; }
.stars svg.on:nth-child(2) { animation-delay: .25s; } .stars svg.on:nth-child(3) { animation-delay: .5s; }
@keyframes starPop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.earn { text-align: center; }
.earn .k { font: 14px/1 var(--font-display); color: var(--ink-2); letter-spacing: 1.5px; }
.earn .v { font-family: var(--font-display); font-size: 52px; line-height: 1.05; color: var(--buy); text-shadow: var(--txt-outline); display: inline-flex; align-items: center; gap: 8px; }
.earn .v svg { width: 44px; height: 44px; filter: drop-shadow(0 3px 0 var(--outline)); }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chips > div { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--card); border: 2px solid var(--paper-line); border-radius: 14px; }
.chips svg { width: 28px; height: 28px; flex: none; color: var(--info); }
.chips b { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1; display: block; }
.chips > div > div { min-width: 0; }
.chips span { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.chips .bad svg { color: var(--danger); }
.best { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(90deg, #FFF0B8, #FFE38A); border: var(--bw) solid var(--outline); box-shadow: 0 3px 0 var(--outline); }
.best .bi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--gold); border: 2px solid var(--outline); flex: none; }
.best .bi svg { width: 28px; height: 28px; color: var(--hz-black); }
.best .t { font: 12px/1 var(--font-display); letter-spacing: 1.5px; color: var(--hz-orange-dk); }
.best .d { font-weight: 700; font-size: 16px; line-height: 1.2; }
.best .more { margin: 6px 0 0; padding: 0 0 0 16px; font-size: 13px; font-weight: 600; line-height: 1.25; }
.best .more li { margin-top: 2px; } .best .more li.good { color: #1f7a33; }
.fore { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--ink-2); flex-wrap: wrap; }
.fore .tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 9px; background: var(--card); border: 2px solid var(--paper-line); color: var(--ink); }
.fore svg { width: 18px; height: 18px; }
.strat-h { text-align: center; font: 16px/1 var(--font-display); color: var(--ink); letter-spacing: .5px; }
.strats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.strat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 10px; min-height: 120px; border: var(--bw) solid var(--outline); border-radius: 16px; background: var(--card); box-shadow: 0 4px 0 var(--outline); text-align: center; }
.strat .sic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; border: 2px solid var(--outline); }
.strat .sic svg { width: 28px; height: 28px; }
.strat .sn { font-family: var(--font-display); font-size: 18px; line-height: 1; }
.strat .se { font-size: 12.5px; font-weight: 700; line-height: 1.25; color: var(--ink-2); }
.strat .se .p { color: var(--buy-dk); } .strat .se .m { color: var(--danger-dk); }
.strat.on { background: #EAF7FF; box-shadow: 0 4px 0 var(--outline), 0 0 0 4px var(--info); transform: translateY(-3px); }
.strat.on::after { content: ''; position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; background: var(--info) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center/18px no-repeat; border: 2.5px solid var(--outline); }

/* trophies */
.rank { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: linear-gradient(90deg, var(--steel-800), var(--steel-700)); border: var(--bw) solid var(--outline); color: #fff; margin-bottom: 14px; box-shadow: 0 4px 0 var(--outline); }
.rank .ri { width: 56px; height: 56px; border-radius: 14px; background: var(--gold); color: var(--hz-black); display: grid; place-items: center; border: 2.5px solid var(--outline); flex: none; }
.rank .ri svg { width: 36px; height: 36px; }
.rank .rn { font-family: var(--font-display); font-size: 22px; line-height: 1; text-shadow: var(--txt-outline); }
.rank .rs { font-size: 13px; font-weight: 600; color: var(--steel-300); margin: 4px 0 6px; }
.rank .pbar { height: 16px; } .rank .pbar span { font-size: 11px; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tcard { position: relative; padding: 10px; border-radius: 16px; background: var(--card); border: var(--bw) solid var(--outline); box-shadow: 0 3px 0 var(--outline); display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; }
.tcard .tic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--gold); color: var(--hz-black); border: 2px solid var(--outline); }
.tcard .tic svg { width: 30px; height: 30px; }
.tcard.lock .tic { background: var(--paper-2); color: #B49F7C; }
.tcard .tn { font-family: var(--font-display); font-size: 16px; line-height: 1.05; }
.tcard .td { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 2px 0 5px; line-height: 1.2; }
.tcard .pbar { height: 12px; border-width: 2px; } .tcard .pbar span { display: none; }
.tcard .st { position: absolute; top: 8px; right: 10px; font: 13px/1 var(--font-display); color: var(--gold-dk); display: flex; align-items: center; gap: 2px; }
.tcard .st svg { width: 14px; height: 14px; color: var(--gold); }
.tcard.claim { box-shadow: 0 3px 0 var(--outline), 0 0 0 3px var(--buy); }
.tcard .claimb { grid-column: 1 / -1; min-height: 48px; font-size: 17px; }

/* orders panel */
.obig { padding: 14px; border-radius: 18px; background: var(--card); border: var(--bw) solid var(--outline); box-shadow: 0 4px 0 var(--outline); margin-bottom: 14px; }
.obig .hd { display: flex; align-items: center; gap: 12px; }
.obig .reqs { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.obig .req { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--paper); border: 2px solid var(--paper-line); font-weight: 700; }
.obig .req svg { width: 24px; height: 24px; color: var(--hz-orange-dk); }
.obig .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.obig .row .grow { flex: 1; }
.obig .pays { display: flex; gap: 14px; font-weight: 700; color: var(--ink-2); font-size: 15px; margin-bottom: 12px; }
.obig .pays b { font-family: var(--font-display); font-weight: 400; color: var(--buy-dk); font-size: 20px; }
.obig .pays .bonus b { color: var(--hz-orange-dk); }
.olabel { font: 15px/1 var(--font-display); letter-spacing: 1.5px; color: var(--ink-2); margin: 4px 0 10px 4px; }

/* how to play */
.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hstep { padding: 14px 12px; border-radius: 18px; background: var(--card); border: var(--bw) solid var(--outline); box-shadow: 0 4px 0 var(--outline); text-align: center; position: relative; }
.hstep .n { position: absolute; top: -12px; left: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--hz-yellow); border: 2.5px solid var(--outline); font: 17px/25px var(--font-display); }
.hstep .hi { width: 68px; height: 68px; margin: 4px auto 8px; border-radius: 18px; display: grid; place-items: center; color: #fff; border: var(--bw) solid var(--outline); box-shadow: inset 0 -6px 0 rgba(0,0,0,.2); }
.hstep .hi svg { width: 40px; height: 40px; }
.hstep h5 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 19px; }
.hstep p { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.keys { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.keys div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 2px solid var(--paper-line); font-weight: 600; font-size: 14px; }
kbd { font: 14px/1 var(--font-display); padding: 6px 8px; border-radius: 8px; background: var(--steel-800); color: #fff; border: 2px solid var(--outline); box-shadow: 0 3px 0 var(--outline); min-width: 30px; text-align: center; }
.credits { text-align: center; font-weight: 600; color: var(--ink-2); line-height: 1.6; }
.credits h5 { font-family: var(--font-display); font-weight: 400; color: var(--ink); font-size: 18px; margin: 12px 0 2px; }
.credits .cr-list p { margin: 0 0 8px; font-size: 14px; line-height: 1.35; }
.credits .cr-list b { color: var(--ink); font-weight: 700; }
.credits .cr-note { margin: 2px 0 0; font-size: 12px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }

/* system: saved chip */
.saved-chip { position: absolute; left: 50%; top: calc(var(--sa-t) + 84px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 20px; background: rgba(30,38,48,.94); color: #fff; border: 2.5px solid var(--outline); font-weight: 700; font-size: 14px; animation: popIn .3s var(--spring); }
.saved-chip .ck { width: 26px; height: 26px; border-radius: 50%; background: var(--buy); display: grid; place-items: center; border: 2px solid var(--outline); }
.saved-chip .ck svg { width: 16px; height: 16px; }

/* fx */
.coin-fx { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
.confetti { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; pointer-events: none; }

/* ==========================================================================
   Viewport: PHONE PORTRAIT
   ========================================================================== */
.vp-portrait #money { min-width: 0; height: 54px; padding-right: 16px; }
.vp-portrait #money .coin { width: 50px; height: 50px; }
.vp-portrait #money .amt { font-size: 25px; }
.vp-portrait #money .rate { font-size: 13px; }
.vp-portrait #speed { top: calc(var(--sa-t) + var(--edge) + 66px); }
.vp-portrait #day { left: auto; right: calc(var(--sa-r) + var(--edge)); transform: none; height: 54px; }
.vp-portrait #day .ring, .vp-portrait #day .ring svg.r { width: 42px; height: 42px; }
.vp-portrait #day .time { font-size: 23px; }
.vp-portrait #day .pz { width: 36px; height: 36px; }
.vp-portrait #rail { top: calc(var(--sa-t) + var(--edge) + 68px); gap: 14px; }
.vp-portrait .rbtn { width: 56px; height: 56px; }
.vp-portrait #upg-btn { right: auto; left: 50%; transform: translateX(-50%); height: 78px; font-size: 28px; padding: 0 28px 0 12px; }
.vp-portrait #upg-btn:active { transform: translate(-50%, 4px); }
.vp-portrait #notify .col { top: calc(var(--sa-t) + var(--edge) + 128px); width: calc(100% - var(--sa-l) - var(--sa-r) - 2 * var(--edge) - 56px - 12px); }
.vp-portrait .ocard { grid-template-columns: 44px 1fr auto; gap: 8px; padding: 8px 10px 8px 8px; min-height: 68px; }
.vp-portrait .ocard .oi { width: 44px; height: 44px; } .vp-portrait .ocard .oi svg.i { width: 26px; height: 26px; }
.vp-portrait .ocard .on { font-size: 16px; }
.vp-portrait .ocard.offer { grid-template-columns: 44px 1fr; }
.vp-portrait .toast { font-size: 14px; }
.vp-portrait .saved-chip { top: calc(var(--sa-t) + 74px); }

/* bottom sheet */
.vp-portrait .sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: calc(100% - var(--sa-t) - 28px); border-radius: 28px 28px 0 0; border-bottom: 0; transform: none; animation: sheetUp var(--t-open) var(--ease-out); --sa-b-sheet: var(--sa-b); box-shadow: 0 -10px 40px rgba(0,0,0,.4); }
.vp-portrait .sheet.closing { animation: sheetDown var(--t-close) var(--ease-in) forwards; }
.vp-portrait .sheet.tall { height: calc(100% - var(--sa-t) - 28px); }
.vp-portrait .sh-head .grab { display: block; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 48px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.4); }
.vp-portrait .sh-head .bar { min-height: 66px; padding-top: 14px; }
.vp-portrait .sh-head .ttl { font-size: 27px; }
.vp-portrait .sh-body { padding: 14px 12px calc(18px + var(--sa-b)); }
.vp-portrait .sheet:has(.sh-foot) .sh-body { padding-bottom: 14px; }
.vp-portrait .tabs { padding: 10px 10px 0; gap: 6px; }
.vp-portrait .tab { font-size: 13px; min-height: 56px; } .vp-portrait .tab.on { min-height: 64px; }
.vp-portrait .ucard { grid-template-columns: 60px 1fr auto; gap: 10px; padding: 10px; }
.vp-portrait .ucard .uic { width: 60px; height: 60px; } .vp-portrait .ucard .uic svg.i { width: 34px; height: 34px; }
.vp-portrait .ucard .un { font-size: 18px; }
.vp-portrait .ucard .ue { font-size: 13.5px; }
.vp-portrait .pips i { width: 12px; }
.vp-portrait .price { min-width: 104px; font-size: 19px; padding: 6px 10px 11px; }
.vp-portrait .price .sub { font-size: 11px; }
.vp-portrait .hire { grid-template-columns: 56px 1fr; } .vp-portrait .hire .b3 { grid-column: 1 / -1; }
.vp-portrait .hire .uic { width: 56px !important; height: 56px !important; }
.vp-portrait .howto { grid-template-columns: 1fr; }
.vp-portrait .hstep { display: grid; grid-template-columns: 60px 1fr; text-align: left; gap: 10px; align-items: center; }
.vp-portrait .hstep .hi { width: 56px; height: 56px; margin: 0; grid-row: span 2; } .vp-portrait .hstep .hi svg { width: 32px; height: 32px; }
.vp-portrait .keys { grid-template-columns: 1fr; }
.vp-portrait .srow .sl .t { font-size: 17px; }
.vp-portrait input[type=range].slider { width: 38%; min-width: 0; }
.vp-portrait .tgrid { grid-template-columns: 1fr; }
/* dialogs on phone: still centred cards (they are interruptions), full-width */
.vp-portrait .dialog { width: 100%; }
/* summary on phone */
.vp-portrait .summary { left: 12px; right: 12px; width: auto; top: calc(var(--sa-t) + 38px); bottom: calc(var(--sa-b) + 10px); transform: none; max-height: none; animation: popIn var(--t-open) var(--spring); border-radius: 24px; border-bottom: 4px solid var(--outline); }
.vp-portrait .summary .ribbon { font-size: 24px; padding: 8px 22px 10px; top: -24px; }
.vp-portrait .summary .sum-in { padding: 38px 14px 14px; gap: 10px; height: 100%; }
.vp-portrait .stars svg { width: 54px; height: 54px; } .vp-portrait .stars svg:nth-child(2) { width: 70px; height: 70px; }
.vp-portrait .earn .v { font-size: 44px; }
.vp-portrait .chips { gap: 6px; } .vp-portrait .chips > div { flex-direction: column; text-align: center; gap: 2px; padding: 6px 4px; }
.vp-portrait .chips svg { width: 24px; height: 24px; }
.vp-portrait .strats { gap: 8px; }
.vp-portrait .strat { min-height: 128px; padding: 10px 4px; }
.vp-portrait .strat .sn { font-size: 16px; }
.vp-portrait .strat .se { font-size: 12px; }
.vp-portrait .summary .b3.big { min-height: 66px; flex: none; }

/* ==========================================================================
   Viewport: PHONE LANDSCAPE
   ========================================================================== */
.vp-land { --edge: 10px; }
.vp-land #money { height: 52px; min-width: 0; padding-right: 16px; }
.vp-land #money .coin { width: 48px; height: 48px; }
.vp-land #money .amt { font-size: 24px; } .vp-land #money .rate { font-size: 12px; }
.vp-land #speed { top: calc(var(--sa-t) + var(--edge) + 62px); height: 48px; }
.vp-land #day { height: 52px; } .vp-land #day .ring, .vp-land #day .ring svg.r { width: 40px; height: 40px; }
.vp-land #day .time { font-size: 22px; } .vp-land #day .pz { width: 36px; height: 36px; }
.vp-land #rail { gap: 12px; }
.vp-land .rbtn { width: 52px; height: 52px; } .vp-land .rbtn svg.i { width: 26px; height: 26px; }
.vp-land .rbtn .lbl { display: none; }
.vp-land #upg-btn { height: 66px; font-size: 24px; padding: 0 20px 0 10px; right: calc(var(--sa-r) + var(--edge) + 64px); bottom: calc(var(--sa-b) + var(--edge)); }
.vp-land #upg-btn .ico { width: 44px; height: 44px; } .vp-land #upg-btn .ico svg.i { width: 26px; height: 26px; }
.vp-land #notify .col { top: calc(var(--sa-t) + var(--edge) + 120px); width: 290px; gap: 8px; }
.vp-land .ocard { min-height: 62px; padding: 6px 10px 6px 6px; grid-template-columns: 42px 1fr auto; }
.vp-land .ocard .oi { width: 42px; height: 42px; } .vp-land .ocard .oi svg.i { width: 24px; height: 24px; }
.vp-land .ocard .on { font-size: 15px; } .vp-land .ocard .bar { height: 8px; margin-top: 4px; }
.vp-land .toast { font-size: 13.5px; padding: 5px 12px 5px 5px; } .vp-land .toast .ti { width: 30px; height: 30px; }
.vp-land .saved-chip { top: calc(var(--sa-t) + 70px); }
.vp-land .sheet { width: min(720px, calc(100% - var(--sa-l) - var(--sa-r) - 24px)); height: calc(100% - var(--sa-b) - 16px); max-height: none; top: calc(50% - var(--sa-b) / 2); border-radius: 22px; }
.vp-land .sheet.sm { height: auto; max-height: calc(100% - var(--sa-b) - 16px); }
.vp-land .sh-head .bar { min-height: 54px; padding: 6px 10px 6px 16px; }
.vp-land .sh-head .stripe { height: 7px; }
.vp-land .sh-head .ttl { font-size: 24px; } .vp-land .sh-head .ttl svg.i { width: 28px; height: 28px; }
.vp-land .sh-head .x { width: 48px; height: 48px; }
.vp-land .sheet.tabbed { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto 1fr; }
.vp-land .sheet.tabbed .sh-head { grid-column: 1 / -1; }
.vp-land .sheet.tabbed .tabs { flex-direction: column; align-items: stretch; padding: 10px 0 10px 8px; border-bottom: 0; border-right: 3px solid var(--outline); gap: 6px; overflow: hidden; }
.vp-land .sheet.tabbed .tab { flex: none; min-height: 58px; border-radius: 14px 0 0 14px; border-bottom: var(--bw) solid var(--outline); border-right: 0; font-size: 13px; padding: 4px; }
.vp-land .sheet.tabbed .tab.on { margin: 0 -3px 0 0; min-height: 58px; padding: 4px; }
.vp-land .sheet.tabbed .tab svg.i { width: 22px; height: 22px; }
.vp-land .sh-body { padding: 12px 14px 14px; }
.vp-land .ucard { padding: 8px 10px; grid-template-columns: 56px 1fr auto; gap: 12px; margin-bottom: 10px; }
.vp-land .ucard .uic { width: 56px; height: 56px; } .vp-land .ucard .uic svg.i { width: 32px; height: 32px; }
.vp-land .ucard .un { font-size: 18px; }
.vp-land .price { min-height: 56px; }
.vp-land .dialog { padding-top: 44px; } .vp-land .dialog .di { width: 64px; height: 64px; top: -30px; } .vp-land .dialog .di svg { width: 36px; height: 36px; }
.vp-land .dialog p { font-size: 14.5px; } .vp-land .dialog .loss { margin: 6px 0 10px; }
.vp-land #dialogs .dlg-wrap { padding-top: 40px; }
.vp-land .summary { width: min(780px, calc(100% - var(--sa-l) - var(--sa-r) - 24px)); height: calc(100% - 46px); top: calc(50% + 12px); max-height: none; }
.vp-land .summary .ribbon { font-size: 22px; padding: 6px 22px 8px; top: -22px; }
.vp-land .summary .sum-in { display: grid; grid-template-columns: 1fr 1.15fr; grid-auto-rows: min-content; gap: 8px 16px; padding: 30px 16px 12px; height: 100%; }
.vp-land .summary .lcol, .vp-land .summary .rcol { display: flex; flex-direction: column; gap: 8px; }
.vp-land .stars svg { width: 40px; height: 40px; } .vp-land .stars svg:nth-child(2) { width: 52px; height: 52px; }
.vp-land .earn .v { font-size: 36px; } .vp-land .earn .v svg { width: 32px; height: 32px; }
.vp-land .chips > div { padding: 5px 6px; gap: 5px; } .vp-land .chips b { font-size: 17px; } .vp-land .chips svg { width: 22px; height: 22px; }
.vp-land .best { padding: 6px 10px; } .vp-land .best .d { font-size: 14px; } .vp-land .best .bi { width: 36px; height: 36px; } .vp-land .best .more { font-size: 12px; margin-top: 3px; }
.vp-land .strat { min-height: 104px; padding: 8px 4px; } .vp-land .strat .sic { width: 36px; height: 36px; }
.vp-land .summary .b3.big { min-height: 56px; font-size: 24px; }
.vp-land .howto { grid-template-columns: repeat(3, 1fr); }

/* desktop: slightly larger chrome */
.vp-desktop { --edge: 18px; }
.vp-desktop .summary .lcol, .vp-desktop .summary .rcol, .vp-portrait .summary .lcol, .vp-portrait .summary .rcol { display: contents; }

/* ==========================================================================
   Reduce motion (settings toggle + OS preference)
   ========================================================================== */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }

/* ---- polish pass 1 ---- */
.vp-desktop .tab { flex-direction: row; gap: 10px; font-size: 21px; min-height: 60px; }
.vp-desktop .tab.on { min-height: 66px; }
.vp-desktop .tab svg.i { width: 30px; height: 30px; }
.vp-desktop .price { min-width: 150px; }
.vp-desktop .sheet.tabbed .sh-body { -webkit-mask: linear-gradient(#000 calc(100% - 26px), transparent); mask: linear-gradient(#000 calc(100% - 26px), transparent); }
#dialogs .dlg-wrap { background: rgba(8,12,18,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html.reduce-motion #dialogs .dlg-wrap { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* compact world signs: only the next goal gets the full board; others show price, locked ones a lock pin */
.zsign.mini .board { padding: 4px 10px 4px 4px; gap: 6px; }
.zsign.mini .zi { width: 30px; height: 30px; margin-top: 3px; } .zsign.mini .zi svg { width: 20px; height: 20px; }
.zsign.mini .zp { font-size: 16px; margin-top: 3px; }
.zsign.mini .post { height: 14px; }
.zsign.pin .board { padding: 0; width: 40px; height: 40px; border-radius: 50%; justify-content: center; background: var(--idle); }
.zsign.pin .board::before { display: none; }
.zsign.pin .zi { margin: 0; border: 0; background: none; width: 32px; height: 32px; } .zsign.pin .zi svg { width: 22px; height: 22px; }
.zsign.pin .post { height: 10px; }
.zsign.pin { animation: none; opacity: .92; }
/* (tutorial branch: zone signs stay visible during the tutorial — step 5 points at one) */
.obig .hd > div:first-child svg { width: 32px; height: 32px; }
.tgrid { align-items: start; }
.wcard .av svg { width: 34px; height: 34px; }
.hire .uic svg { width: 44px; height: 44px; }
.vp-land .stats-mini { display: none; }
.vp-land .pause-body { gap: 10px; }
.vp-land .pause-body .b3.big { min-height: 64px; font-size: 28px; }
.vp-land .pause-body .row2 .b3 { min-height: 54px; }
.vp-land .pause-body .saved { margin: 0; }


/* ==========================================================================
   R16 implementation additions (components the mockup only sketched)
   ========================================================================== */
/* upgrades: locked / maxed cards */
.ucard.locked { opacity: .78; background: repeating-linear-gradient(-45deg, var(--card) 0 14px, #F4ECDB 14px 28px); }
.ucard.locked .uic { background: var(--idle); }
.ucard .lockline { display: flex; align-items: center; gap: 6px; color: var(--ink-2); margin-top: 6px; }
.ucard .lockline svg { width: 16px; height: 16px; }
.ucard.maxed .uic { box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), 0 0 0 3px var(--gold); }
/* upgrades-overhaul: goal line, Best next, fold rows, next-unlock line, owned list */
.toolrow .hint.goal { font-size: 14px; line-height: 1.2; min-width: 0; }
.bestnext { position: relative; margin: 4px 0 16px; padding: 10px 10px 0; border-radius: 20px; border: var(--bw) solid var(--outline);
  background: repeating-linear-gradient(-45deg, var(--hz-yellow) 0 12px, var(--hz-black) 12px 24px); box-shadow: 0 4px 0 var(--outline); }
.bestnext .bn-h { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 10px; background: var(--hz-black);
  color: var(--hz-yellow); font: 15px/1 var(--font-display); letter-spacing: 1px; border: 2px solid var(--outline); }
.bestnext .bn-h svg.i { width: 18px; height: 18px; color: var(--hz-yellow); }
.bestnext .bn-h .where { color: #fff; font-size: 12px; letter-spacing: .5px; padding-left: 6px; border-left: 2px solid rgba(255,255,255,.35); }
.bestnext .bn-why { margin: 8px 0 8px; padding: 6px 10px; border-radius: 12px; background: var(--paper); border: 2px solid var(--outline);
  font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.bestnext .ucard { margin-bottom: 10px; }
.ucard .ue .sl { display: block; color: var(--ink); font-weight: 700; font-size: 12.5px; letter-spacing: .2px; text-transform: uppercase; opacity: .8; margin-bottom: 1px; }
.ucard .ue .vals { white-space: nowrap; }
.fold { display: flex; width: 100%; align-items: center; gap: 8px; min-height: 48px; margin: 2px 0 12px; padding: 0 14px; border-radius: 14px;
  border: var(--bw) dashed var(--outline); background: var(--paper-2); font: 17px/1 var(--font-display); color: var(--ink-2); text-align: left; }
.fold svg.i { width: 22px; height: 22px; flex: none; }
.fold span { flex: 1; }
.fold svg.i:last-child { transform: rotate(90deg); transition: transform var(--t-fast, .15s); }
.fold.open svg.i:last-child { transform: rotate(-90deg); }
.nextun { display: flex; align-items: flex-start; gap: 8px; margin: 0 2px 12px; padding: 10px 12px; border-radius: 14px; border: 2px dashed var(--paper-line);
  font-size: 14px; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
.nextun svg.i { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #9C8B73; }
.nextun b { color: var(--ink); }
.uempty { padding: 6px 6px 14px; font-weight: 600; color: var(--ink-2); }
.crew-empty { padding: 4px 6px 12px; font-weight: 600; color: var(--ink-2); }
.owned { margin: -4px 0 14px; border: 2px solid var(--outline); border-radius: 14px; background: var(--card); overflow: hidden; }
.owned .orow { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; }
.owned .orow + .orow { border-top: 2px solid var(--paper-line); }
.owned .oi { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--tile); border: 2px solid var(--outline); color: #fff; }
.owned .oi svg.i { width: 18px; height: 18px; }
.owned .on { font: 16px/1.1 var(--font-display); color: var(--ink); min-width: 0; }
.owned .ov { font-size: 13px; font-weight: 700; color: var(--buy-dk); text-align: right; }
.wcard .wfoot { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.vp-portrait .bestnext { padding: 8px 8px 0; }
/* upg-guide: upgrades guidance — Best next focus ring + "why" callout */
#app[data-upgtut="1"] #adv-slot { visibility: hidden; }
.bestnext.tut-focus { outline: 4px solid var(--hz-yellow); outline-offset: 3px; animation: tutPulse 1s ease-in-out infinite; }
html.reduce-motion .bestnext.tut-focus { animation: none; }
.tut-call { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 8px 8px 10px; border-radius: 14px;
  background: var(--steel-900); color: #fff; border: 2px solid var(--outline); box-shadow: 0 3px 0 var(--outline); }
.tut-call .tc-ic { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--hz-yellow); border: 2px solid var(--outline);
  display: grid; place-items: center; color: var(--hz-black); }
.tut-call .tc-ic svg { width: 17px; height: 17px; }
.tut-call .tc-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.25; }
.tut-call .b3.sm { flex: none; min-height: 36px; padding: 0 12px; font-size: 15px; border-radius: 12px; }
.bestnext > .tut-call { margin-top: 0; }
.vp-portrait .toolrow .hint.goal { font-size: 13px; }
/* ── CREW screen (crew-screen) ── */
.crew-tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 8px; }
.crew-tot div { text-align: center; padding: 8px 4px; border-radius: 14px; background: var(--card); border: var(--bw) solid var(--outline); box-shadow: 0 3px 0 var(--outline); min-width: 0; }
.crew-tot b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--ink); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-tot span { font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .4px; }
.crew-net { font-size: 14px; font-weight: 700; color: var(--ink-2); margin: 0 4px 12px; text-align: center; }
.crew-net span { font-weight: 600; opacity: .8; font-size: 13px; }
.crew-net b, .mnet b { font-family: var(--font-display); font-weight: 400; font-size: 17px; }
b.pos { color: var(--buy-dk); } b.neg { color: var(--danger-dk, #B3261E); }
.mcard { position: relative; }
.mcard.top1 { box-shadow: 0 4px 0 var(--outline), 0 0 0 3px var(--hz-yellow) inset; }
.mcard .mid { min-width: 0; flex: 1; }
.mcard .nm { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mcard .nm .st { color: var(--gold-dk); font-size: 17px; }
.mcard .topt { font: 12px/16px var(--font-display); letter-spacing: .5px; padding: 1px 7px; border-radius: 8px; background: var(--hz-black); color: var(--hz-yellow); }
.mcard .av.csh { background: #FFB3D0; box-shadow: inset 0 -5px 0 #D9739A; }
.mcard .state { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 14px; font-weight: 700; color: var(--ink); min-width: 0; }
.mcard .state .dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--outline); flex: none; background: #B8AE9C; }
.mcard .state .dot.work { background: var(--buy); } .mcard .state .dot.walk { background: var(--info); }
.mcard .state .dot.warn { background: var(--hz-orange); }
.mstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.mstats div { text-align: center; padding: 6px 4px; border-radius: 12px; background: var(--paper); border: 2px solid var(--paper-line); min-width: 0; }
.mstats span { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.mstats b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--ink); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mstats i { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.mnet { margin: 8px 2px 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.mnet span { font-weight: 600; }
.mcard .stat .pips { justify-content: center; margin: 4px 0 2px; gap: 3px; }
.mcard .stat .pips i { width: 12px; height: 8px; }
.mcard .stat .v { font-size: 16px; white-space: nowrap; }
.mfoot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.mfoot .b3 { min-height: 44px; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.mfoot .b3 svg.i { width: 18px; height: 18px; }
.mfoot .dismiss { color: var(--danger-dk, #B3261E); }
.crew-emptybox { text-align: center; padding: 14px 12px 16px; margin-bottom: 8px; border: 2px dashed var(--paper-line); border-radius: 18px; }
.crew-emptybox .big { width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; background: var(--hz-yellow); border: var(--bw) solid var(--outline); }
.crew-emptybox .big svg { width: 38px; height: 38px; }
.crew-emptybox h4 { font: 400 21px/1.1 var(--font-display); margin: 4px 0; color: var(--ink); }
.crew-emptybox p { margin: 0; font-weight: 600; color: var(--ink-2); font-size: 15px; }
.crew-lock { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px; border-radius: 16px; border: 2px dashed var(--paper-line); background: rgba(255,255,255,.35); }
.crew-lock .li { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--idle); color: #fff; border: 2px solid var(--outline); flex: none; }
.crew-lock .li svg { width: 22px; height: 22px; }
.crew-lock .lt { min-width: 0; flex: 1; }
.crew-lock .ln { font: 400 18px/1.1 var(--font-display); color: var(--ink-2); }
.crew-lock .lw { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.crew-lock .lw b { color: var(--ink); }
.crew-lock .pb { display: block; height: 7px; margin-top: 6px; border-radius: 4px; background: var(--paper-2); border: 1.5px solid #CDB58A; overflow: hidden; }
.crew-lock .pb i { display: block; height: 100%; background: var(--hz-yellow); }
.hl { animation: crewHl 0.8s ease-in-out 3; }
@keyframes crewHl { 0%, 100% { box-shadow: 0 4px 0 var(--outline); } 50% { box-shadow: 0 4px 0 var(--outline), 0 0 0 5px var(--hz-yellow); } }
.crewlink, .bestnext .bn-go { display: flex; width: 100%; align-items: center; gap: 8px; min-height: 48px; margin: 4px 0 12px; padding: 6px 12px; border-radius: 14px;
  border: 2px solid var(--outline); background: var(--hz-yellow); color: var(--hz-black); font-weight: 700; font-size: 14.5px; text-align: left; }
.crewlink span, .bestnext .bn-go span { flex: 1; }
.crewlink svg.i, .bestnext .bn-go svg.i { width: 22px; height: 22px; flex: none; }
.bestnext .bn-go { margin: -2px 0 10px; min-height: 44px; font-family: var(--font-display); font-weight: 400; font-size: 16px; }
.locate-mark { position: absolute; left: 0; top: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; transform: translate3d(-999px, -999px, 0); }
.locate-mark > * { position: relative; left: -50%; }
.locate-mark .lm-tag { font: 15px/1 var(--font-display); color: var(--hz-black); background: var(--hz-yellow); border: 2.5px solid var(--outline); border-radius: 10px; padding: 4px 8px; white-space: nowrap; animation: lmBounce .7s ease-in-out infinite; }
.locate-mark .lm-arrow { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 16px solid var(--hz-yellow); filter: drop-shadow(0 2px 0 var(--outline)); animation: lmBounce .7s ease-in-out infinite; }
.locate-mark.edge .lm-arrow { display: none; }
@keyframes lmBounce { 0%, 100% { transform: translateY(-46px); } 50% { transform: translateY(-58px); } }
html.reduce-motion .locate-mark *, html.reduce-motion .hl { animation: none !important; }

/* settings: save-data buttons + version line */
.sbtn { font-size: 17px; min-height: 48px; padding: 0 14px; }
.ver { text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-top: 10px; }
/* day summary: 5 stars, ledger, warnings */
.stars.s5 { gap: 2px; }
.stars.s5 svg { width: 44px; height: 44px; }
.stars.s5 svg:nth-child(2) { width: 44px; height: 44px; }
.stars.s5 svg:nth-child(2), .stars.s5 svg:nth-child(4) { width: 52px; height: 52px; }
.stars.s5 svg:nth-child(3) { width: 64px; height: 64px; }
.stars.s5 svg.on:nth-child(1) { animation-delay: 0s; } .stars.s5 svg.on:nth-child(2) { animation-delay: .15s; }
.stars.s5 svg.on:nth-child(3) { animation-delay: .3s; } .stars.s5 svg.on:nth-child(4) { animation-delay: .45s; }
.stars.s5 svg.on:nth-child(5) { animation-delay: .6s; }
/* short landscape: smaller stars + tighter ledger leave room for the tip list */
.vp-land .stars.s5 svg { width: 30px; height: 30px; } .vp-land .stars.s5 svg:nth-child(2), .vp-land .stars.s5 svg:nth-child(4) { width: 36px; height: 36px; } .vp-land .stars.s5 svg:nth-child(3) { width: 44px; height: 44px; }
.vp-land .ledger { margin-top: 2px; gap: 6px; }
.earn.neg .v { color: var(--danger); }
.ledger { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-weight: 700; font-size: 14px; color: var(--ink-2); }
.ledger span { padding: 3px 10px; border-radius: 9px; background: var(--card); border: 2px solid var(--paper-line); }
.ledger b { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin-left: 4px; }
.fore .tag.warn { background: #FFE3E0; border-color: var(--danger); color: var(--danger-dk); }
/* trophies */
.tcard .pbar span { display: grid; font-size: 10.5px; }
.tcard .td.done { display: flex; align-items: center; gap: 4px; color: var(--buy-dk); margin: 2px 0 0; }
.tcard .td.done svg { width: 16px; height: 16px; }
.tcard.got { background: linear-gradient(#FFFDF6, #FFF4D6); }
.confetti { border: 2px solid #12171D; }
/* advisor bubble (OPPORTUNITY / TIP) + pointer arrow */
.adv { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 10px; background: #fff; border: var(--bw) solid var(--outline); border-radius: 18px; box-shadow: 0 4px 0 var(--outline); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--ink); animation: slideIn .3s var(--spring) both; }
.adv .av { width: 42px; height: 42px; border-radius: 50%; flex: none; background: var(--hz-yellow); border: 2.5px solid var(--outline); display: grid; place-items: center; color: var(--hz-black); }
.adv .av svg { width: 26px; height: 26px; }
.adv .tx { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.adv .tx b { display: block; font: 12px/1 var(--font-display); letter-spacing: 1.5px; color: var(--hz-orange-dk); margin-bottom: 3px; font-weight: 400; }
.adv .got { flex: none; min-height: 48px; min-width: 48px; padding: 0 12px; border-radius: 14px; border: 2.5px solid var(--outline); background: var(--buy); color: #fff; font-family: var(--font-display); font-size: 16px; box-shadow: inset 0 -4px 0 var(--buy-dk), 0 3px 0 var(--outline); display: grid; place-items: center; }
.adv .got svg { width: 22px; height: 22px; }
.adv.tier-tip .got { background: var(--paper-2); color: var(--ink-2); box-shadow: 0 3px 0 var(--outline); }
.adv.tier-opportunity { box-shadow: 0 4px 0 var(--outline), inset 0 0 0 3px rgba(60,199,78,.35); }
.adv.out { animation: slideOut .22s var(--ease-in) forwards; }
.adv-arrow { position: absolute; width: 44px; height: 44px; margin-left: -22px; display: none; pointer-events: none; color: var(--hz-yellow); filter: drop-shadow(0 0 0 var(--outline)) drop-shadow(0 3px 0 var(--outline)); }
.adv-arrow svg { width: 100%; height: 100%; transform: rotate(90deg); stroke: var(--outline); stroke-width: 1.5px; paint-order: stroke; }
.adv-arrow.on { display: block; transform: translateY(-100%); animation: advBounce 1s ease-in-out infinite; }
.adv-arrow.up { transform: none; }
.adv-arrow.up svg { transform: rotate(-90deg); }
.adv-arrow.on.up { animation-name: advBounceUp; }
@keyframes advBounce { 50% { transform: translateY(calc(-100% - 8px)); } }
@keyframes advBounceUp { 50% { transform: translateY(8px); } }
/* coach */
#coach .cm { pointer-events: none; }
#coach .coach-bubble { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; }
.coach-bubble::after { left: var(--tail, 30px); }
.coach-edge { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--hz-yellow); border: var(--bw) solid var(--outline); box-shadow: 0 4px 0 var(--outline); display: grid; place-items: center; color: var(--hz-black); animation: ringPulse2 1.2s ease-in-out infinite; }
.coach-edge > svg { width: 30px; height: 30px; }
.coach-edge .tip { position: absolute; inset: -14px; pointer-events: none; }
.coach-edge .tip::after { content: ''; position: absolute; right: -8px; top: 50%; margin-top: -12px; border: 12px solid transparent; border-left: 17px solid var(--outline); }
@keyframes ringPulse2 { 50% { transform: scale(1.08); } }
#world-ui.signs-off .zsign { display: none; }
/* order card used as the "active order" button */
button.ocard.active { width: 100%; font: inherit; text-align: left; color: inherit; }
/* free-camera chip */
.cam-chip { position: absolute; left: 50%; bottom: calc(var(--sa-b) + var(--edge) + 96px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 18px; background: rgba(18,23,29,.78); border: 2px solid rgba(255,255,255,.25); color: #fff; font: 14px/1 var(--font-display); letter-spacing: .5px; pointer-events: none; }
.cam-chip svg { width: 18px; height: 18px; }
.vp-desktop .cam-chip { bottom: calc(var(--sa-b) + var(--edge) + 6px); }
.vp-land .cam-chip { bottom: calc(var(--sa-b) + var(--edge) + 6px); }
/* day banner */
.day-banner { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); font-size: 64px; color: var(--hz-yellow); pointer-events: none; animation: dayBanner 1.8s var(--ease-out) forwards; white-space: nowrap; }
@keyframes dayBanner { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%); } }
.toast.bad .ti { background: var(--danger); color: #fff; }
.toast .tt { min-width: 0; overflow-wrap: anywhere; }

/* ---------- joystick (touch) ----------------------------------------------- */
#joystick { position: absolute; inset: 0; pointer-events: none; display: none; }
#joystick.touch-enabled { display: block; }
#joy-capture { position: absolute; left: 0; bottom: 0; width: 50%; height: 65%; pointer-events: auto; touch-action: none; }
#joystick.joy-wide #joy-capture { width: 100%; height: 66%; }
.vp-land #joystick.joy-wide #joy-capture { height: 78%; }
#joy-base { position: absolute; left: calc(var(--sa-l) + 24px); bottom: calc(var(--sa-b) + 24px); width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(18,23,29,.10) 40%, rgba(18,23,29,.32)); border: 3px solid rgba(255,255,255,.55); box-shadow: 0 0 0 2px rgba(18,23,29,.35); opacity: .55; pointer-events: none; transition: opacity .15s; }
#joystick.active #joy-base { opacity: .9; }
.vp-portrait #joy-base { bottom: calc(var(--sa-b) + var(--edge) + 100px); width: 104px; height: 104px; }
#joy-thumb { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: var(--hz-yellow); border: 3px solid var(--outline); box-shadow: inset 0 -4px 0 var(--hz-yellow-dk); transition: transform 120ms ease-out; will-change: transform; }
#joystick.active #joy-thumb { transition: none; }
.joy-hint { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 6px; white-space: nowrap; font: 12px/1 var(--font-display); letter-spacing: 1px; color: #fff; text-shadow: var(--txt-outline); }
#joystick.active .joy-hint, #joystick.hint-off .joy-hint { display: none; }

/* ---------- arrange bar ----------------------------------------------------- */
#arrange-bar { position: absolute; z-index: 25; left: 50%; top: calc(var(--sa-t) + var(--edge)); transform: translateX(-50%); width: min(760px, calc(100% - var(--sa-l) - var(--sa-r) - 2 * var(--edge)));
  display: none; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: 12px; pointer-events: auto; }
#arrange-bar.open { display: grid; animation: popIn .25s var(--spring) both; }
#arrange-bar .oi { background: #4C9BD9; box-shadow: inset 0 -4px 0 #255F94; }
#arrange-bar .arr-sel { font: 15px/1.1 var(--font-display); color: var(--ink); padding: 6px 10px; border-radius: 10px; background: var(--paper-2); border: 2px solid var(--paper-line); white-space: nowrap; }
#arrange-bar .arr-acts { display: flex; gap: 10px; }
#arrange-bar .b3 { min-height: 52px; font-size: 19px; padding: 0 16px; }
#arrange-bar .b3:disabled { filter: grayscale(.7); opacity: .6; }
.vp-portrait #arrange-bar { grid-template-columns: 44px 1fr; gap: 8px 10px; padding: 10px; }
.vp-portrait #arrange-bar .oi { width: 44px; height: 44px; }
.vp-portrait #arrange-bar .oq { font-size: 13px; }
.vp-portrait #arrange-bar .arr-sel { grid-column: 1 / -1; text-align: center; }
.vp-portrait #arrange-bar .arr-acts { grid-column: 1 / -1; }
.vp-portrait #arrange-bar .arr-acts .b3 { flex: 1; }
.vp-land #arrange-bar { grid-template-columns: 44px 1fr auto auto; padding: 8px 10px; }
.vp-land #arrange-bar .oi { width: 44px; height: 44px; }
.vp-land #arrange-bar .oq { display: none; }
#ui-root.arrange-mode #hud, #ui-root.arrange-mode #notify, #ui-root.arrange-mode #coach,
#ui-root.arrange-mode #world-ui, #ui-root.arrange-mode #joystick { visibility: hidden; }

/* ---------- title screen ---------------------------------------------------- */
#ui-root.title-mode #hud, #ui-root.title-mode #world-labels, #ui-root.title-mode #world-ui,
#ui-root.title-mode #joystick, #ui-root.title-mode #notify, #ui-root.title-mode #coach,
#ui-root.title-mode #debug-overlay { visibility: hidden; }
#title-screen { position: absolute; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 14px; padding: 0 20px calc(10vh + var(--sa-b)); pointer-events: auto; color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(14,20,28,0) 40%, rgba(14,20,28,.6) 100%); font-family: var(--font-body); transition: opacity .45s ease; }
#title-screen.leaving { opacity: 0; pointer-events: none; }
#title-screen .title-logo { font-family: var(--font-display); font-size: clamp(38px, 7vw, 76px); line-height: .95; letter-spacing: 1px; color: #fff;
  text-shadow: 0 0 0 var(--outline), 3px 3px 0 var(--outline), -3px 3px 0 var(--outline), 3px -3px 0 var(--outline), -3px -3px 0 var(--outline), 0 7px 0 var(--outline); }
#title-screen .title-logo span { color: var(--hz-yellow); display: inline-block; }
#title-screen .title-sub { font-size: clamp(15px, 1.6vw, 19px); font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,.7); max-width: 520px; }
#title-screen .title-start { margin-top: 6px; min-height: 64px; padding: 0 44px; font-family: var(--font-display); font-size: 26px; letter-spacing: 1px; color: var(--hz-black);
  background: var(--hz-yellow); border: 4px solid var(--outline); border-radius: var(--r-lg); box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -6px 0 var(--hz-yellow-dk), 0 6px 0 var(--outline);
  text-shadow: 0 2px 0 rgba(255,255,255,.45); animation: titlePulse 2.2s ease-in-out infinite; backdrop-filter: none; }
#title-screen .title-start:hover { transform: translateY(-2px); background: var(--hz-yellow-lt); }
#title-screen .title-start:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.4), inset 0 -2px 0 var(--hz-yellow-dk), 0 2px 0 var(--outline); }
#title-screen .title-hint { font-size: 14px; font-weight: 600; opacity: .92; text-shadow: 0 1px 4px rgba(0,0,0,.8); max-width: 420px; }
@keyframes titlePulse { 50% { transform: scale(1.04); } }
.vp-land #title-screen { padding-bottom: calc(5vh + var(--sa-b)); gap: 8px; }
.vp-land #title-screen .title-logo { font-size: 44px; }
#order-slot, #adv-slot, #toast-slot { display: flex; flex-direction: column; gap: 10px; }
#order-slot:empty, #adv-slot:empty, #toast-slot:empty { display: none; }
.vp-land #order-slot, .vp-land #adv-slot, .vp-land #toast-slot { gap: 8px; }
.vp-land .coach-bubble { font-size: 14px; padding: 8px 12px 8px 10px; }
.vp-land .coach-bubble .av { width: 34px; height: 34px; } .vp-land .coach-bubble .av svg { width: 20px; height: 20px; }
.vp-land .coach-bubble .steps { margin-top: 4px; }
.vp-land .coach-bubble .skip { padding: 4px 4px; }
.coach-bubble .skip { min-height: 48px; min-width: 48px; }
/* touch targets ≥ 48px (audit) */
.tog { width: 80px; height: 48px; border-radius: 24px; }
.tog::after { width: 36px; height: 36px; top: 3px; }
.tog.on::after { left: 35px; }
.seg button { min-height: 48px; min-width: 52px; }
/* arrange bar: centered without transform (popIn animates transform) */
#arrange-bar { left: 0; right: 0; margin: 0 auto; transform: none; }
.dialog .acts .b3 { white-space: normal; line-height: 1.1; padding-left: 10px; padding-right: 10px; min-width: 0; }
/* portrait: arrange controls live at the bottom, in thumb reach */
.vp-portrait #arrange-bar { top: auto; bottom: calc(var(--sa-b) + var(--edge)); }

/* ---------- R16 polish (post-approval) ------------------------------------- */
/* NEW ORDER / ONLINE ORDER tag: clear the title at every viewport */
.ocard.offer { padding-top: 24px; }
.ocard.offer [data-a="no"] svg.i { display: none; }        /* text-only Decline (mockup) */

/* Landscape phone: notifications never form a tall left column.
   - order card stays top-left under the speed chip, compact single row
   - advisor bubble + toasts sit top-centre, between the order card and the rail
   - max 1 toast (Toasts.js queues the rest; they wait while an advisor tip is up)
   - smaller joystick base so the order card always clears it */
.vp-land #notify .col { left: 0; top: 0; right: 0; bottom: 0; width: auto; display: block; }
.vp-land #order-slot { position: absolute; left: calc(var(--sa-l) + var(--edge)); top: calc(var(--sa-t) + var(--edge) + 120px); width: 300px; }
.vp-land #adv-slot, .vp-land #toast-slot { position: absolute; top: calc(var(--sa-t) + var(--edge) + 62px);
  left: calc(var(--sa-l) + var(--edge) + 300px + 14px); right: calc(var(--sa-r) + var(--edge) + 52px + 14px);
  align-items: center; pointer-events: none; }
.vp-land #adv-slot > * { pointer-events: auto; width: 100%; max-width: 400px; }
.vp-land #toast-slot > .toast { width: fit-content; max-width: min(400px, 100%); pointer-events: none; }
.vp-land .adv { padding: 8px; font-size: 13.5px; line-height: 1.25; }
.vp-land .adv .av { width: 36px; height: 36px; } .vp-land .adv .av svg { width: 22px; height: 22px; }
.vp-land .ocard.offer { grid-template-columns: 42px 1fr auto; gap: 8px; padding: 18px 8px 7px 6px; min-height: 0; }
.vp-land .ocard.offer .tag { top: -10px; font-size: 11px; line-height: 14px; padding: 1px 8px; }
.vp-land .ocard.offer .oq { font-size: 12.5px; gap: 4px; }
.vp-land .ocard.offer .oq svg.i { width: 14px; height: 14px; }
.vp-land .ocard.offer .bn { display: none; }               /* bonus lives in the Orders panel */
.vp-land .ocard.offer .acts { grid-column: auto; display: flex; gap: 6px; margin: 0; }
.vp-land .ocard.offer .acts .b3 { min-height: 48px; min-width: 48px; padding: 0 12px; font-size: 16px; }
.vp-land .ocard.offer .acts .bt { display: none; }
.vp-land .ocard.offer [data-a="no"] svg.i { display: inline-block; }
.vp-land #joy-base { width: 96px; height: 96px; left: calc(var(--sa-l) + 18px); bottom: calc(var(--sa-b) + 14px); }
.vp-land .joy-hint { left: 100%; top: 50%; transform: translateY(-50%); margin: 0 0 0 10px; }
.ocard.offer .pay-line { flex-wrap: wrap; column-gap: 5px; row-gap: 0; }
.ocard.offer .pay-line .bn, .ocard.offer .pay-line .tmr { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.vp-land .ocard.offer .pay-line .bn { display: none; }
.ocard.offer .pay-line { column-gap: 10px; }
/* crew-screen: equal stat columns on member cards (pips never widen one) */
.mcard .stats { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.mcard .stat { min-width: 0; padding-left: 4px; padding-right: 4px; }
.mcard .stat .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-land .crew-roster, .vp-desktop .crew-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; align-items: start; }
/* crew-screen maxfix: buy / MAX always fit their stat box (any width) */
.mcard .stat { display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; }
.mcard .stat .v { overflow: hidden; text-overflow: ellipsis; }
.mcard .stat .sbuy, .mcard .stat .smax { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; height: 48px; min-height: 48px; margin-top: auto; }
.mcard .stat .sbuy { padding: 0 4px; font-size: clamp(14px, 4.2vw, 17px); text-overflow: ellipsis; }
.mcard .stat .smax { display: flex; align-items: center; justify-content: center; border-radius: 12px;
  border: 2px dashed var(--gold-dk); background: rgba(255, 210, 63, .22); color: var(--gold-dk);
  font: 400 17px/1 var(--font-display); letter-spacing: 1px; margin-bottom: 4px; }
.mcard .stat .pips { flex-wrap: wrap; }
.mnet .eq { font-size: 12.5px; opacity: .85; white-space: nowrap; }

/* ==========================================================================
   First-time tutorial (tutorial branch) — ui/Coach.js
   Compact banner under the HUD top row (left of the rail on phones, centred
   on desktop), a dark steel header + cream body; edge pointer reuses
   .coach-edge; step 6 pulses the UPGRADES / CREW buttons.
   ========================================================================== */
#coach .tut-banner { position: absolute; pointer-events: auto; background: var(--paper); border: var(--bw) solid var(--outline);
  border-radius: var(--r-md); box-shadow: 0 5px 0 var(--outline), 0 10px 22px rgba(10,14,20,.25); overflow: hidden;
  font-family: var(--font-body); color: var(--ink); animation: popIn var(--t-open) var(--spring); }
.tut-banner .th { display: flex; align-items: center; gap: 8px; background: var(--steel-900); color: #fff; padding: 5px 6px 5px 6px;
  border-bottom: var(--bw) solid var(--outline); position: relative; }
.tut-banner .th::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--stripe); background-size: 34px 34px; opacity: .9; }
.tut-banner .ic { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--hz-yellow); border: 2px solid var(--outline);
  display: grid; place-items: center; color: var(--hz-black); }
.tut-banner .ic svg { width: 19px; height: 19px; }
.tut-banner .tt { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 15px; letter-spacing: .3px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 var(--outline); }
.tut-banner .tx { flex: none; width: 34px; height: 34px; margin: -3px -2px -3px 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.12);
  color: var(--steel-100); display: grid; place-items: center; padding: 0; }
.tut-banner .tx svg { width: 18px; height: 18px; }
.tut-banner .tb { display: flex; align-items: center; gap: 10px; padding: 9px 11px 6px; }
.tut-banner .tc { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.25; }
.tut-banner .tc b { font-family: var(--font-display); font-weight: 400; color: var(--hz-orange-dk); letter-spacing: .3px; }
.tut-banner .ta { display: flex; gap: 6px; flex: none; }
.tut-banner .b3.sm { min-height: 38px; padding: 0 12px; font-size: 16px; border-radius: 12px; }
.tut-banner .tb.conf { padding-bottom: 10px; flex-direction: column; align-items: stretch; gap: 8px; }
.tut-banner .tb.conf .ta { justify-content: flex-end; }
.tut-banner .b3.no { --c: var(--steel-700); --cd: var(--steel-900); }
.tut-banner .dots { display: flex; gap: 4px; padding: 0 11px 8px; }
.tut-banner .dots i { flex: 1; max-width: 26px; height: 5px; border-radius: 3px; background: var(--paper-line); }
.tut-banner .dots i.done { background: var(--buy); }
.tut-banner .dots i.on { background: var(--hz-orange); }
.tut-banner.ready .th { background: var(--buy-dk); }
.tut-banner.ready .tb { padding-bottom: 10px; }
.vp-land .tut-banner .tb { padding: 6px 10px 5px; }
.vp-land .tut-banner .tc { font-size: 14px; }
#upg-btn.tut-pulse, #rail .rbtn.tut-pulse { outline: 4px solid var(--hz-yellow); outline-offset: 3px; animation: tutPulse 1s ease-in-out infinite; z-index: 2; }
@keyframes tutPulse { 0%,100% { outline-offset: 3px; outline-color: rgba(255,194,26,1); } 50% { outline-offset: 9px; outline-color: rgba(255,194,26,.55); } }
html.reduce-motion #upg-btn.tut-pulse, html.reduce-motion #rail .rbtn.tut-pulse { animation: none; }

/* ── decor-shop: Decor & Style sheet ─────────────────────────────────── */
.rbtn.decor   { --c: #A55EEA; --cd: #6B2FA8; }
.decor-sheet .tab .tcount { font-style: normal; font: 12px/1 var(--font-body); font-weight: 700; color: var(--ink-2); background: var(--paper); border: 1.5px solid var(--paper-line); border-radius: 8px; padding: 2px 5px; }
.decor-sheet .tab.on .tcount { background: var(--paper-2); }
.dsum { display: flex; gap: 10px; align-items: stretch; margin: 2px 0 14px; }
.dcol { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 74px; padding: 6px 8px; background: var(--steel-800); color: #fff; border: var(--bw) solid var(--outline); border-radius: 14px; box-shadow: 0 3px 0 var(--outline); }
.dcol b { font: 26px/1 var(--font-display); color: var(--hz-yellow); }
.dcol span { font-size: 12px; font-weight: 700; opacity: .85; white-space: nowrap; }
.dbon { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.db { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--card); border: 2px solid var(--paper-line); border-radius: 12px; color: var(--ink-2); min-width: 0; }
.db svg.i { width: 22px; height: 22px; flex: none; opacity: .55; }
.db span { display: flex; flex-direction: column; min-width: 0; }
.db b { font: 18px/1 var(--font-display); }
.db i { font-style: normal; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db.on { border-color: var(--buy-dk); background: #EFFBEA; color: var(--buy-dk); }
.db.on svg.i { opacity: 1; }
.decor-sheet .olabel .dcur { color: var(--ink); letter-spacing: .5px; }
.dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.vp-desktop .dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vp-land .dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dcard {
  --rc: #9AA5B1; --rc2: #E7ECF1;
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 8px; min-width: 0;
  background: var(--card); border: var(--bw) solid var(--outline); border-radius: 16px;
  box-shadow: inset 0 0 0 3px var(--rc), 0 4px 0 var(--outline);
}
.dcard.r-stock     { --rc: #C9C2B4; --rc2: #F3EEE4; }
.dcard.r-common    { --rc: #9AA5B1; --rc2: #E7ECF1; }
.dcard.r-rare      { --rc: #3D8BFD; --rc2: #DCEBFF; }
.dcard.r-epic      { --rc: #A55EEA; --rc2: #EFE2FC; }
.dcard.r-legendary { --rc: #F5B700; --rc2: #FFF1C2; }
.dcard.r-legendary { background: linear-gradient(#FFFDF3, #FFF6D6); }
.dc-art { position: relative; aspect-ratio: 1.25; border-radius: 11px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #fff 0%, var(--rc2) 70%); border: 2px solid var(--rc); }
.r-legendary .dc-art { background: radial-gradient(circle at 50% 40%, #FFF8DA 0%, #FFD66B 75%); }
.r-epic .dc-art { background: radial-gradient(circle at 50% 40%, #FBF6FF 0%, #D9B8F7 80%); }
.dc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dc-art .dc-ph { color: var(--rc); opacity: .5; }
.dc-art .dc-ph svg { width: 40px; height: 40px; }
.dc-art.has .dc-ph { display: none; }
.dc-r { position: absolute; left: 0; top: 0; padding: 3px 8px 3px 6px; border-bottom-right-radius: 10px; background: var(--rc); color: #fff;
  font: 11px/1 var(--font-display); letter-spacing: .8px; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.r-legendary .dc-r { color: var(--hz-black); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.dc-new { position: absolute; right: 4px; top: 4px; padding: 2px 6px; border-radius: 8px; background: var(--badge); color: #fff; border: 2px solid var(--outline); font: 11px/1 var(--font-display); animation: badgePulse 1.6s infinite; }
.dc-eq { position: absolute; right: 4px; bottom: 4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--buy); border: 2px solid var(--outline); color: #fff; }
.dc-eq svg { width: 15px; height: 15px; }
.dc-name { font: 16px/1.1 var(--font-display); color: var(--ink); min-height: 2.2em; display: flex; align-items: center; padding: 0 2px; }
.dc-bonus { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--buy-dk); padding: 0 2px; min-width: 0; }
.dc-bonus span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-bonus svg.i { width: 18px; height: 18px; flex: none; }
.dc-bonus.cos { color: var(--ink-2); font-weight: 600; }
.dc-bonus.cos svg.i { opacity: .5; }
.dc-set { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #8C6A1C; min-height: 16px; padding: 0 2px; }
.dc-set svg.i { width: 14px; height: 14px; flex: none; }
.dc-set span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-acts { display: grid; grid-template-columns: 44px 1fr; gap: 6px; margin-top: auto; }
.dc-acts .b3 { min-height: 44px; padding: 0 6px; font-size: 16px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.dc-acts .b3 svg.i { width: 20px; height: 20px; flex: none; }
.dc-acts .b3 span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-acts .dprev { padding: 0; }
.dc-acts .dstate[disabled] { filter: none; color: var(--buy-dk); }
.dc-acts .dhide { color: var(--buy-dk); }
.dc-acts .dmove { grid-column: 1 / -1; min-height: 38px; font-size: 15px; }   /* decor-place */
.dcard.eq { box-shadow: inset 0 0 0 3px var(--rc), 0 4px 0 var(--outline), 0 0 0 3px var(--buy); }
.dcard.afford:not(.owned) { box-shadow: inset 0 0 0 3px var(--rc), 0 4px 0 var(--outline), 0 0 14px rgba(60,199,78,.45); }
.dcard.hl { animation: crewHl .7s 3; }
.dcard.nope { animation: dNope .35s; }
@keyframes dNope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.dcard.just { animation: dJust .9s var(--spring); z-index: 2; }
@keyframes dJust { 0% { transform: scale(1); } 25% { transform: scale(1.1) rotate(-1.5deg); } 55% { transform: scale(.97); } 100% { transform: none; } }
.dcard.just .dc-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.9) 50%, transparent 70%); transform: translateX(-120%); animation: dShine .9s .1s ease-out forwards; }
@keyframes dShine { to { transform: translateX(120%); } }
.dc-burst { position: absolute; left: 50%; top: 40%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 0 var(--rc); animation: dBurst 1.1s ease-out forwards; }
@keyframes dBurst { 0% { box-shadow: 0 0 0 0 var(--rc), 0 0 0 0 rgba(255,214,90,.9); opacity: 1; } 100% { box-shadow: 0 0 0 90px transparent, 0 0 0 140px transparent; opacity: 0; } }
.dnote { margin: 2px 4px 16px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
/* sets */
.dset { padding: 10px; margin-bottom: 12px; background: var(--card); border: var(--bw) solid var(--outline); border-radius: 16px; box-shadow: 0 4px 0 var(--outline); }
.dset.done { background: linear-gradient(#F3FFEE, #E2F8D9); box-shadow: inset 0 0 0 3px var(--buy), 0 4px 0 var(--outline); }
.ds-h { display: flex; align-items: center; gap: 10px; }
.ds-ic { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--hz-yellow); border: var(--bw) solid var(--outline); color: var(--hz-black); box-shadow: inset 0 -4px 0 var(--hz-yellow-dk); }
.ds-ic svg { width: 24px; height: 24px; }
.ds-t { flex: 1; min-width: 0; }
.ds-n { font: 19px/1.05 var(--font-display); }
.ds-b { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ds-p { flex: none; text-align: right; display: flex; flex-direction: column; }
.ds-p b { font: 20px/1 var(--font-display); }
.ds-p span { font-size: 11px; font-weight: 800; letter-spacing: .6px; color: var(--ink-2); }
.dset.done .ds-p span { color: var(--buy-dk); }
.dset .pb { display: block; height: 8px; margin: 8px 0 6px; border-radius: 4px; background: var(--paper-2); border: 1.5px solid #CDB58A; overflow: hidden; }
.dset .pb i { display: block; height: 100%; background: var(--buy); }
.ds-bonus { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 800; color: var(--buy-dk); margin-bottom: 8px; }
.ds-bonus svg.i { width: 18px; height: 18px; }
.ds-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.dsi { --rc: #9AA5B1; --rc2: #E7ECF1; position: relative; display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 12px; border: 2px solid var(--rc); background: #fff; min-width: 0; }
.dsi.r-rare { --rc: #3D8BFD; --rc2: #DCEBFF; } .dsi.r-epic { --rc: #A55EEA; --rc2: #EFE2FC; } .dsi.r-legendary { --rc: #F5B700; --rc2: #FFF1C2; }
.dsi:not(.own):not(.eq) .dc-art { filter: grayscale(.85) brightness(.9); opacity: .7; }
.dsi .dc-art.sm { aspect-ratio: 1.3; border-width: 0; border-radius: 8px; }
.dsi .dc-art.sm .dc-ph svg { width: 24px; height: 24px; }
.dsn { font-size: 11.5px; font-weight: 800; line-height: 1.1; min-height: 2.2em; color: var(--ink); }
.dsi i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--ink-2); }
.dsi i.ok { position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--buy); border: 2px solid var(--outline); color: #fff; }
.dsi i.ok svg { width: 12px; height: 12px; }
.dsi i.st { color: var(--info-dk); }
.dad { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 12px; background: var(--steel-800); color: #fff; border: var(--bw) solid var(--outline); border-radius: 16px; }
.dad > svg { width: 30px; height: 30px; color: var(--hz-yellow); }
.dad div { flex: 1; display: flex; flex-direction: column; } .dad b { font: 17px/1 var(--font-display); } .dad span { font-size: 13px; opacity: .8; }
.vp-portrait .dc-name { font-size: 15px; }
.vp-portrait .dbon { gap: 4px; } .vp-portrait .db { padding: 5px 6px; gap: 4px; } .vp-portrait .db svg.i { width: 18px; height: 18px; }
.vp-portrait .db b { font-size: 16px; } .vp-portrait .db i { font-size: 10.5px; }
.vp-portrait .dcol { min-width: 64px; } .vp-portrait .dcol b { font-size: 22px; }
/* preview bar (world preview of an item) */
#decor-pv { position: absolute; left: 50%; bottom: calc(var(--sa-b) + 18px); transform: translateX(-50%); z-index: var(--z-notify);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; max-width: calc(100% - 24px);
  background: linear-gradient(var(--steel-800), var(--steel-900)); color: #fff; border: var(--bw) solid var(--outline); border-radius: 18px;
  box-shadow: 0 4px 0 var(--outline), 0 10px 24px rgba(0,0,0,.35); animation: popIn .25s var(--spring); pointer-events: auto; }
#decor-pv .pv-t { display: flex; flex-direction: column; min-width: 0; }
#decor-pv .pv-k { font: 11px/1 var(--font-display); letter-spacing: 1.2px; color: var(--hz-yellow); }
#decor-pv .pv-n { font: 18px/1.1 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#decor-pv .b3 { min-height: 46px; padding: 0 14px; font-size: 16px; display: flex; align-items: center; gap: 6px; flex: none; }
#decor-pv .b3 svg.i { width: 20px; height: 20px; }
#decor-pv .pv-bar { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.15); overflow: hidden; }
#decor-pv .pv-bar i { display: block; height: 100%; background: var(--hz-yellow); transform-origin: left; }
html.reduce-motion .dcard.just, html.reduce-motion .dc-new, html.reduce-motion .dc-burst { animation: none; }
@media (max-width: 420px) { .vp-portrait .db svg.i { display: none; } .vp-portrait .db { padding: 5px 7px; } }
/* Decor preview: clear the stage so the item is the star */
#app.decor-pv-on #rail, #app.decor-pv-on #upg-btn, #app.decor-pv-on #speed, #app.decor-pv-on #joystick,
#app.decor-pv-on #adv-slot, #app.decor-pv-on #coach, #app.decor-pv-on #order-slot, #app.decor-pv-on #world-ui { visibility: hidden !important; }

/* ---------- random-events: event card + rain tint ------------------------- */
#event-slot { display: flex; flex-direction: column; gap: 10px; }
#event-slot:empty { display: none; }
.evcard { position: relative; padding-top: 22px; }
.evcard .on { overflow-wrap: anywhere; }
.evcard .oq { flex-wrap: wrap; }
.evcard .ev-hint { font-size: 12.5px; color: var(--ink-2); opacity: .9; }
.evcard .ev-ok { color: var(--buy-dk); } .evcard .ev-bad { color: var(--danger); }
.evcard .acts .b3 { white-space: nowrap; }
.evcard[data-phase="done"] { animation: popIn .25s ease-out; }
.vp-portrait .evcard.offer { grid-template-columns: 54px 1fr; }
/* landscape phone: under the order card's spot, left column */
.vp-land #event-slot { position: absolute; left: calc(var(--sa-l) + var(--edge)); top: calc(var(--sa-t) + var(--edge) + 120px); width: 300px; }
.vp-land #order-slot:not(:empty) + #event-slot { top: calc(var(--sa-t) + var(--edge) + 120px + 96px); }
.vp-land .evcard.offer { grid-template-columns: 46px 1fr auto; gap: 8px; padding: 18px 8px 7px 6px; min-height: 0; }
.vp-land .evcard.offer .acts { grid-column: auto; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.vp-land .evcard.offer .acts .b3 { min-height: 40px; padding: 0 10px; font-size: 14px; }
.vp-land .evcard.offer .acts .bt { display: inline; }
.vp-land .evcard .ev-hint { display: none; }
#app.decor-pv-on #event-slot { visibility: hidden !important; }
/* rain: a light blue tint + soft streaks over the 3D view, under all UI */
#weather-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.2s;
  background: linear-gradient(rgba(70,110,160,.16), rgba(40,70,120,.22)),
    repeating-linear-gradient(105deg, rgba(220,235,255,.0) 0 22px, rgba(220,235,255,.18) 22px 23px, rgba(220,235,255,0) 23px 46px);
  background-size: 100% 100%, 240px 240px; animation: evRain .6s linear infinite; }
#weather-fx.on { opacity: 1; }
@keyframes evRain { to { background-position: 0 0, -60px 240px; } }
html.reduce-motion #weather-fx { animation: none; }

/* ---------- event-icons: illustrated art tile + per-event accent ---------- */
.evcard { --ev: var(--info); --ev-dk: var(--info-dk); grid-template-columns: 68px 1fr auto;
  box-shadow: inset 7px 0 0 var(--ev), 0 4px 0 var(--outline), 0 10px 20px rgba(0,0,0,.25); padding-left: 14px; animation: none; }
.evcard.offer { grid-template-columns: 68px 1fr; }
.evcard[data-ev="touristBus"]  { --ev: #4FB6E8; --ev-dk: #2584B5; }
.evcard[data-ev="rushOrder"]   { --ev: #FF8A1F; --ev-dk: #C25E0A; }
.evcard[data-ev="inspector"]   { --ev: #3F6FB2; --ev-dk: #24477A; }
.evcard[data-ev="rain"]        { --ev: #6F8FB4; --ev-dk: #465F80; }
.evcard[data-ev="luckyCar"]    { --ev: #9160D8; --ev-dk: #5E35A0; }
.evcard[data-ev="coffeeTruck"] { --ev: #C68B55; --ev-dk: #8A5A2E; }
.evcard .tag { background: var(--ev); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.evcard.ev-good .tag { background: var(--buy); } .evcard.ev-bad .tag { background: var(--danger); }
.ev-art { position: relative; width: 68px; height: 68px; border-radius: 16px; border: 2.5px solid var(--outline);
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%), var(--ev);
  box-shadow: inset 0 -5px 0 var(--ev-dk); display: grid; place-items: center; overflow: visible; }
.ev-art .ev-svg { width: 58px; height: 58px; display: block; margin-top: -2px; }
.ev-badge { position: absolute; right: -8px; bottom: -8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--buy); color: #fff; border: 2.5px solid var(--outline); }
.ev-bad .ev-badge { background: var(--danger); }
.ev-badge svg.i { width: 16px; height: 16px; }
.evcard.ev-enter { animation: slideIn var(--t-open) var(--spring); }
.evcard.ev-enter .ev-art { animation: evArtPop .55s var(--spring) .08s both; }
.evcard[data-phase="done"] .ev-badge { animation: popIn .3s var(--spring) both; }
.evcard[data-phase="active"][data-ev="touristBus"] .ev-svg, .evcard[data-phase="active"][data-ev="luckyCar"] .ev-svg { animation: evBob 1.6s ease-in-out infinite; }
@keyframes evArtPop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } 70% { transform: scale(1.12) rotate(3deg); opacity: 1; } to { transform: none; } }
@keyframes evBob { 50% { transform: translateY(-2px); } }
html.reduce-motion .evcard.ev-enter, html.reduce-motion .evcard .ev-art, html.reduce-motion .evcard .ev-svg { animation: none !important; }
.vp-portrait .evcard { grid-template-columns: 54px 1fr auto; padding-left: 12px; }
.vp-portrait .ev-art { width: 54px; height: 54px; border-radius: 14px; }
.vp-portrait .ev-art .ev-svg { width: 46px; height: 46px; }
.vp-land .evcard { grid-template-columns: 46px 1fr auto; padding-left: 10px; box-shadow: inset 5px 0 0 var(--ev), 0 4px 0 var(--outline), 0 10px 20px rgba(0,0,0,.25); }
.vp-land .ev-art { width: 46px; height: 46px; border-radius: 12px; box-shadow: inset 0 -3px 0 var(--ev-dk); }
.vp-land .ev-art .ev-svg { width: 40px; height: 40px; }
.vp-land .ev-badge, .vp-portrait .ev-badge { width: 22px; height: 22px; right: -6px; bottom: -6px; }
/* keep the event tag clear of the title + art on phones */
.vp-portrait .evcard { padding-top: 20px; }
.vp-land .evcard { padding-top: 16px; }
.vp-land .evcard.offer { padding-top: 18px; }

/* ==========================================================================
   Opening Day checklist (opening-day branch) — ui/OpeningDay.js
   First card of the left notification column (#od-slot), so the order card,
   advisor tip and toasts stack under it. Steel header (tap = collapse) +
   cream body; ticked rows pop green. Narrow on phones (clear of the owner,
   the rail and the Doors slot on the right).
   ========================================================================== */
#od-slot { align-self: flex-start; transition: margin-top .2s var(--ease-out, ease-out); }
#od-slot:empty { display: none; }
.odp { width: 272px; background: var(--paper); border: var(--bw) solid var(--outline); border-radius: var(--r-md);
  box-shadow: 0 4px 0 var(--outline), 0 10px 20px rgba(0,0,0,.25); overflow: hidden; font-family: var(--font-body); color: var(--ink);
  animation: slideIn var(--t-open) var(--spring); }
.odp .od-h { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 4px 8px 4px 6px; border: 0; margin: 0;
  background: var(--steel-900); color: #fff; text-align: left; cursor: pointer; position: relative; font: inherit; }
.odp:not(.min) .od-h { border-bottom: var(--bw) solid var(--outline); }
.odp:not(.min) .od-h::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--stripe); background-size: 34px 34px; opacity: .9; }
.odp .od-h .ic { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--hz-yellow); border: 2px solid var(--outline);
  display: grid; place-items: center; color: var(--hz-black); }
.odp .od-h .ic svg { width: 18px; height: 18px; }
.odp .od-h .tt { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 16px; letter-spacing: .4px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 var(--outline); }
.odp .od-h .cnt { flex: none; font-family: var(--font-display); font-size: 15px; padding: 1px 7px; border-radius: 8px; background: var(--hz-yellow);
  color: var(--hz-black); border: 2px solid var(--outline); }
.odp .od-h .chev { flex: none; width: 26px; height: 26px; display: grid; place-items: center; color: var(--steel-100); transform: rotate(-90deg); transition: transform .15s; }
.odp .od-h .chev svg { width: 20px; height: 20px; }
.odp.min .od-h .chev { transform: rotate(90deg); }
.odp.rw .od-h, .odp.rw .od-h .ic { background: var(--buy-dk); }
.odp.rw .od-h .ic { background: var(--gold); }
.odp .od-b { padding: 6px 9px 8px; }
.odp .od-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.odp .od-l li { display: flex; align-items: center; gap: 7px; min-height: 26px; padding: 1px 4px; border-radius: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.15; }
.odp .od-l .bx { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 2px solid var(--outline); background: #fff; display: grid; place-items: center; color: #fff; }
.odp .od-l .bx svg { width: 15px; height: 15px; }
.odp .od-l .lb { flex: 1; min-width: 0; }
.odp .od-l .pg { flex: none; font-family: var(--font-display); font-weight: 400; font-size: 14.5px; color: var(--hz-orange-dk); letter-spacing: .3px; }
.odp .od-l li.done .bx { background: var(--buy); }
.odp .od-l li.done .lb { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 2px; }
.odp .od-l li.done .pg { color: var(--buy-dk); }
.odp .od-l li.tick { animation: odTick .9s var(--spring); }
.odp .od-l li.tick .bx { animation: odBox .5s var(--spring); }
@keyframes odTick { 0% { background: rgba(46,204,113,.0); } 20% { background: rgba(46,204,113,.35); transform: scale(1.04); } 100% { background: rgba(46,204,113,0); transform: none; } }
@keyframes odBox { from { transform: scale(.3) rotate(-25deg); } to { transform: none; } }
.odp .od-gift { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 2px dashed var(--paper-line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.odp .od-gift svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.odp .od-gift b, .odp .tc b { font-family: var(--font-display); font-weight: 400; color: var(--hz-orange-dk); letter-spacing: .3px; }
.odp .od-rw .tc, .odp .od-gl .tc { font-size: 15px; font-weight: 600; line-height: 1.25; }
.odp .od-rw .ta { display: flex; gap: 8px; margin-top: 8px; }
.odp .od-rw .b3 { flex: 1; min-height: 44px; padding: 0 10px; font-size: 16px; border-radius: 12px; }
.odp .od-rw .b3 svg.i { width: 18px; height: 18px; margin-right: 4px; }
.odp .od-rw .b3.no { --c: var(--steel-700); --cd: var(--steel-900); }
.odp .od-gl .bar { height: 10px; border-radius: 5px; background: var(--paper-2); border: 2px solid var(--outline); margin-top: 6px; overflow: hidden; }
.odp .od-gl .bar i { display: block; height: 100%; background: var(--hz-orange); border-radius: 3px; transition: width .3s; }
.odp .od-gl .sub { margin-top: 4px; font-family: var(--font-display); font-size: 14px; color: var(--ink-2); letter-spacing: .3px; }
.odp.rw { animation: popIn var(--t-open) var(--spring); }
html.reduce-motion .odp, html.reduce-motion .odp .od-l li.tick, html.reduce-motion .odp .od-l li.tick .bx { animation: none; }
/* phones: narrower, 48px header target */
.vp-portrait .odp { width: 228px; }
.vp-portrait .odp .od-h .ic { width: 24px; height: 24px; }
.vp-portrait .odp .od-h .ic svg { width: 16px; height: 16px; }
.vp-portrait .odp .od-h .cnt { font-size: 14px; padding: 1px 5px; }
.vp-portrait .odp .od-h, .vp-land .odp .od-h { min-height: 48px; }
.vp-portrait .odp .od-h .tt { font-size: 13.5px; letter-spacing: .1px; }
.vp-portrait .odp .od-h { gap: 5px; padding-right: 2px; }
.vp-portrait .odp .od-h .chev { width: 22px; }
.vp-portrait .odp .od-l li { font-size: 13px; min-height: 22px; gap: 6px; }
.vp-portrait .odp .od-l .pg { font-size: 13px; }
.vp-portrait .odp .od-gift { font-size: 12px; }
.vp-portrait .odp .od-rw .tc, .vp-portrait .odp .od-gl .tc { font-size: 13.5px; }
.vp-portrait .odp .od-rw .b3 { min-height: 48px; font-size: 15px; padding: 0 6px; }
.vp-land .odp { width: 236px; }
.vp-land .odp .od-l li { min-height: 20px; font-size: 13px; }
.vp-land .odp .od-gift { display: none; }

/* ==========================================================================
   first-minute — 2D-style tutorial (ui/Coach.js): a short caption pill under
   the target, small cards (first buy / Got it / Let's go) under the HUD with
   a bouncing pointer, a 48 px Skip X top-left, the first-sale card and the
   "While you were away" card (main.js).
   ========================================================================== */
#coach .tut-cap { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: center; gap: 8px;
  max-width: min(320px, 80vw); padding: 6px 12px; background: var(--paper); color: var(--ink); border: var(--bw) solid var(--outline);
  border-radius: 999px; box-shadow: 0 4px 0 var(--outline); font: 17px/1.1 var(--font-display); letter-spacing: .3px; white-space: nowrap;
  animation: popIn var(--t-open) var(--spring); }
#coach .tut-cap .b3.sm { min-height: 34px; padding: 0 12px; font-size: 15px; border-radius: 12px; }
#coach .tut-card { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: auto; display: flex; flex-direction: column;
  align-items: center; gap: 6px; min-width: 210px; max-width: min(360px, calc(100vw - 150px)); padding: 10px 14px 12px; background: var(--paper);
  color: var(--ink); border: var(--bw) solid var(--outline); border-radius: var(--r-md); box-shadow: 0 5px 0 var(--outline), 0 10px 22px rgba(10,14,20,.25); }
#coach .tut-card .tc { font: 20px/1.1 var(--font-display); letter-spacing: .3px; text-align: center; }
#coach .tut-card .ts { font: 600 13px/1.2 var(--font-body); opacity: .75; margin-top: -2px; }
#coach .tut-card .ta { display: flex; gap: 8px; }
#coach .tut-card .b3.go { min-height: 46px; padding: 0 18px; font-size: 19px; display: inline-flex; align-items: center; gap: 6px; }
#coach .tut-card .b3.go svg { width: 20px; height: 20px; }
#coach .tut-card.ready { border-color: var(--buy-dk); }
#coach .tut-card .b3.no { --c: var(--steel-700); --cd: var(--steel-900); }
#coach .tut-skip { position: absolute; left: 10px; width: 48px; height: 48px; padding: 0; pointer-events: auto; border-radius: 50%;
  border: var(--bw) solid var(--outline); background: rgba(30,36,44,.82); color: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 var(--outline); }
#coach .tut-skip svg { width: 22px; height: 22px; }
#coach .tut-hand { position: absolute; width: 40px; height: 40px; margin-left: -20px; color: var(--hz-yellow); pointer-events: none;
  animation: tutBob .8s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
#coach .tut-hand.up svg { transform: rotate(180deg); }
#coach .tut-hand svg { width: 40px; height: 40px; display: block; }
@keyframes tutBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
#coach .tut-hand.up { animation-name: tutBobUp; }
#coach .tut-hand.side svg { transform: rotate(-90deg); }
#coach .tut-hand.side { animation-name: tutBobSide; }
@keyframes tutBobSide { 0%,100% { translate: 0 0; } 50% { translate: -9px 0; } }
@keyframes tutBobUp { 0%,100% { translate: 0 0; } 50% { translate: 0 9px; } }
#coach .sale-card { position: absolute; left: 50%; top: 68%; white-space: nowrap; text-align: center; transform: translate(-50%, -50%); pointer-events: none; display: flex; flex-direction: column;
  align-items: center; padding: 10px 22px; background: var(--buy); color: #fff; border: var(--bw) solid var(--outline); border-radius: var(--r-md);
  box-shadow: 0 5px 0 var(--outline); font-family: var(--font-display); text-shadow: 0 2px 0 rgba(0,0,0,.35); animation: saleCard 2.2s var(--spring) both; }
#coach .sale-card b { font-weight: 400; font-size: 20px; letter-spacing: .6px; }
#coach .sale-card span { font-size: 34px; line-height: 1; }
@keyframes saleCard { 0% { opacity: 0; scale: .6; } 12% { opacity: 1; scale: 1.08; } 20% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: 0 -24px; } }
.wb-card { position: absolute; inset: 0; z-index: var(--z-dialog); display: grid; place-items: center; background: rgba(10,14,20,.45); pointer-events: auto; }
.wb-card .in { background: var(--paper); color: var(--ink); border: var(--bw) solid var(--outline); border-radius: var(--r-md); box-shadow: 0 6px 0 var(--outline);
  padding: 16px 26px 14px; text-align: center; font-family: var(--font-display); animation: popIn var(--t-open) var(--spring); }
.wb-card .in b { display: block; font-weight: 400; font-size: 18px; letter-spacing: .6px; color: var(--hz-orange-dk); }
.wb-card .in .amt { display: block; font-size: 40px; line-height: 1.1; color: var(--buy-dk); }
.wb-card .in small { display: block; font: 600 13px/1.3 var(--font-body); opacity: .7; margin-top: 4px; }
html.reduce-motion #coach .tut-hand, html.reduce-motion #coach .sale-card { animation: none; }

/* Cyrillic fallback + long Russian labels; English / CG styling unchanged. */
html[lang="ru"] { --font-display: 'Trebuchet MS', system-ui, sans-serif; --font-body: system-ui, sans-serif; }
html[lang="ru"] .rbtn .lbl { font-size: 10px; letter-spacing: 0; }
html[lang="ru"] #coach .tut-cap { white-space: normal; max-width: min(270px, calc(100vw - 96px)); text-align: center; }
html[lang="ru"] #coach .tut-card .tc { font-size: 18px; }
html[lang="ru"] .summary .ribbon { font-size: clamp(17px, 3.6vw, 28px); max-width: calc(100vw - 32px); text-align: center; }