/* V3 HUD + toast queue (owner: ui/clock-hud.js). Kairosoft-style: dark red wood strip with an orange bevel,
   a dark Rank box, a sky tile season icon, cream clock box, white money box. Pixel numerals, sans words. */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

#clockHud.hud-root {
  --hud-font: 'Press Start 2P', ui-monospace, 'Consolas', monospace;
  --hud-wood: #7a2c18; --hud-wood2: #6a2412; --hud-bevel: #f29a2e; --hud-bevel-hi: #ffd07a; --hud-ink: #2a140c;
  --hud-gold: #ffd23f; --hud-cream: #fff4d6; --hud-paper: #fffbf0; --hud-green: #2f9e44; --hud-red: #b8321f; /* 5.7:1 on the paper coin box */
  position: sticky; top: 0; z-index: 40; margin: 0 -4px 10px; padding: 4px 4px 0;
  background: #2b2320; /* covers content scrolling under the stuck bar */
}
.hud-px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; flex-shrink: 0; }
.hud-num { font-family: var(--hud-font); font-weight: normal; font-variant-numeric: tabular-nums; letter-spacing: 0;
  -webkit-font-smoothing: none; font-smooth: never; line-height: 1; }
.hud-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hud {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px; align-items: stretch;
  padding: 4px; border-radius: 3px;
  background:
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(0,0,0,0.10) 5px 6px),
    linear-gradient(var(--hud-wood), var(--hud-wood2));
  border: 2px solid var(--hud-bevel);
  box-shadow: inset 0 0 0 2px var(--hud-ink), inset 0 2px 0 2px var(--hud-bevel-hi), 0 3px 0 #140a06;
}

/* ---------- rank ---------- */
.hud-rank { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 3px; padding: 3px 5px 4px;
  background: #33190e; border: 2px solid var(--hud-ink); box-shadow: inset 0 0 0 1px #a55a22; border-radius: 2px; min-width: 46px; text-align: center; }
.hud-lbl { font: 10px/1 var(--hud-font); color: var(--hud-gold); text-transform: none;
  text-shadow: 1px 1px 0 var(--hud-ink); -webkit-font-smoothing: none; }
.hud-rank-n { font-size: 16px; color: #fff; text-shadow: 2px 2px 0 var(--hud-ink); }
.hud-xp { height: 5px; background: #140a06; border: 1px solid #140a06; box-shadow: 0 0 0 1px #a55a22; }
.hud-xp i { display: block; height: 100%; width: 0; background: var(--hud-gold); box-shadow: inset 0 -1px 0 #d9861c; transition: width 320ms steps(8, end); }
.hud-rank.lvup { animation: hud-lvup 900ms steps(6, end); }
@keyframes hud-lvup { 0%, 40% { background: #8a4418; transform: scale(1.08); } /* gold Rank label 5.0:1 */ 100% { background: #33190e; transform: none; } }

/* ---------- date / time ---------- */
.hud-date { display: flex; align-items: center; gap: 5px; padding: 3px 5px 3px 3px; position: relative;
  background: rgba(0,0,0,0.18); border-radius: 2px; }
.hud-season-tile { display: grid; place-items: center; width: 32px; height: 32px; background: #9fd4f0;
  border: 2px solid var(--hud-ink); box-shadow: inset 0 0 0 1px #fff; border-radius: 2px; flex-shrink: 0; }
.hud-season-tile.summer { background: #8fd0ff; } .hud-season-tile.autumn { background: #f3d69a; } .hud-season-tile.winter { background: #d6e8f6; }
.hud-season { width: 24px; height: 24px; }
.hud-dt { display: flex; flex-direction: column; gap: 3px; }
.hud-ym { display: flex; align-items: baseline; gap: 3px; }
.hud-ym .hud-num { font-size: 10px; color: #fff; text-shadow: 1px 1px 0 var(--hud-ink); margin-right: 3px; }
.hud-ym .hud-lbl { color: #9fd4f0; }
.hud-time { font-size: 16px; color: var(--hud-ink); background: var(--hud-cream); padding: 3px 4px 2px;
  border: 2px solid var(--hud-ink); box-shadow: inset 0 -2px 0 #e8cf95; border-radius: 2px; text-align: center; }

/* ---------- money ---------- */
.hud-money { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0;
  padding: 4px 8px 4px 6px; background: var(--hud-paper); border: 2px solid var(--hud-ink);
  box-shadow: inset 0 -3px 0 #e7dcc4; border-radius: 2px; }
.hud-coin { width: 20px; height: 20px; margin-right: auto; }
.hud-coins { font-size: 16px; color: var(--hud-ink); white-space: nowrap; transition: color 120ms; }
.hud-money.long .hud-coins { font-size: 12px; }
.hud-g { font: 10px/1 var(--hud-font); color: #8a4a12; align-self: flex-end; margin-bottom: 6px; -webkit-font-smoothing: none; }
.hud-money.up .hud-coins { color: #2f7a3a; } /* 4.5:1 on the paper box */
.hud-money.up .hud-coin { animation: hud-coin-hop 360ms steps(4, end); }
.hud-money.down .hud-coins { color: var(--hud-red); }
.hud-money.down { animation: hud-shake 240ms steps(4, end); }
@keyframes hud-coin-hop { 0% { transform: translateY(0); } 50% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes hud-shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
/* delta chips live inside the coin box on every width (N2): left of the number when it fits (.in), else right-aligned
   on the box's bottom edge, rising within it (.over). Never over the stat chips, speed or gear. */
.hud-deltas { position: absolute; inset: 0; pointer-events: none; z-index: 45; }
.hud-delta { position: absolute; font-size: 10px; padding: 3px 3px 2px; white-space: nowrap;
  border: 2px solid var(--hud-ink); border-radius: 2px; background: var(--hud-paper); visibility: hidden;
  animation: hud-delta 1100ms steps(10, end) forwards; }
.hud-delta.in { top: 50%; margin-top: -9px; visibility: visible; }
.hud-delta.over { right: 2px; bottom: 1px; visibility: visible; }
.hud-delta.pos { color: #2f7a3a; } .hud-delta.neg { color: #c2361f; }
/* F1 phones: the chip takes the income-rate line's slot for its life (rate hidden meanwhile), so it never covers
   the coin digits or the /mo line. No border, no rise: fades in place inside that one text row. */
.hud-money.swap .hud-rate { visibility: hidden; }
.hud-delta.swap { visibility: visible; padding: 0; border: 0; background: none; line-height: 1;
  animation: hud-delta-fade 1100ms steps(10, end) forwards; }
@keyframes hud-delta-fade { 0% { opacity: 0; } 12%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hud-delta { 0% { opacity: 0; transform: translateY(4px); } 15% { opacity: 1; transform: none; }
  70% { opacity: 1; transform: translateY(-3px); } 100% { opacity: 0; transform: translateY(-8px); } }

/* ---------- row 2: month progress, pause, income rate ---------- */
.hud-row2 { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 0 2px; }
.hud-track { flex: 1; height: 8px; background: #2a0f07; border: 2px solid var(--hud-ink); box-shadow: 0 0 0 1px #a55a22;
  position: relative; overflow: hidden; }
.hud-track i { display: block; height: 100%; width: 0; background: var(--hud-gold); box-shadow: inset 0 -2px 0 #d9861c; transition: width 240ms linear; }
.hud-track::after { content: ''; position: absolute; inset: 0; pointer-events: none; /* 6-hour ticks */
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(42,20,12,0.7) calc(25% - 1px) 25%); }
.hud-state { font: 10px/1 var(--hud-font); color: var(--hud-gold); text-shadow: 1px 1px 0 var(--hud-ink); -webkit-font-smoothing: none; }
.hud-state:empty { display: none; }
.hud-state.on { animation: hud-blink 1s steps(2, jump-none) infinite; }
@keyframes hud-blink { 50% { opacity: 0.35; } }
.hud-rate { display: flex; align-items: center; gap: 3px; padding: 2px 5px 2px 4px; background: #1c3a22;
  border: 2px solid var(--hud-ink); box-shadow: inset 0 0 0 1px #3f7a4a; border-radius: 2px; white-space: nowrap; }
.hud-up { width: 7px; height: 7px; }
.hud-rate-n { font-size: 10px; color: #b8f5b0; text-shadow: 1px 1px 0 var(--hud-ink); }
.hud-rate-u { font: 10px/1 var(--hud-font); color: #7fbf86; -webkit-font-smoothing: none; }
.hud-rate.idle .hud-up { filter: grayscale(1); opacity: 0.6; }
.hud-rate.idle .hud-rate-n { color: #9aa89c; }

/* ---------- toasts: one at a time, fixed at the hall stage's top edge (left/top/width set by clock-hud.js).
   z 55: under every modal (60+); clock-hud.js also holds the queue while a .modal-open exists ---------- */
.hud-toasts { position: fixed; top: 64px; left: 16px; z-index: 55; pointer-events: none; display: flex; justify-content: center; }
.hud-toast { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 10px 7px 8px;
  background: var(--hud-paper, #fffbf0); color: #2a140c; border: 2px solid #2a140c; border-radius: 3px;
  box-shadow: inset 0 0 0 2px #5b8fd6, 0 3px 0 rgba(20,10,6,0.55);
  font: 600 13px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  animation: hud-toast-in 200ms steps(4, end); }
.hud-toast.good { box-shadow: inset 0 0 0 2px #e0a92a, 0 3px 0 rgba(20,10,6,0.55); }
.hud-toast.bad { box-shadow: inset 0 0 0 2px #d8402c, 0 3px 0 rgba(20,10,6,0.55); }
.hud-toast.money { box-shadow: inset 0 0 0 2px #2f9e44, 0 3px 0 rgba(20,10,6,0.55); }
.hud-t-ic { width: 18px; height: 18px; }
.hud-toast.money .hud-t-ic { width: 20px; height: 20px; }
/* N6: one line, ellipsis; the toast box is the stage width - 16px (clock-hud.js placeToasts) */
.hud-t-tx { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-t-n { font: 8px/1 'Press Start 2P', ui-monospace, monospace; color: #fff; background: #2a140c; padding: 3px 3px 2px;
  border-radius: 2px; vertical-align: 2px; -webkit-font-smoothing: none; }
.hud-t-amt { font: 10px/1 'Press Start 2P', ui-monospace, monospace; white-space: nowrap; -webkit-font-smoothing: none; }
.hud-t-amt.pos { color: #26702f; } .hud-t-amt.neg { color: #c2361f; }
.hud-toast.bump .hud-t-n, .hud-toast.bump .hud-t-amt { display: inline-block; animation: hud-bump 220ms steps(3, end); }
@keyframes hud-bump { 0% { transform: scale(1.35); } 100% { transform: none; } }
.hud-toast.out { opacity: 0; transform: translateY(-6px); transition: opacity 200ms steps(3, end), transform 200ms steps(3, end); }
@keyframes hud-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* phones: the clock steps down to the 12 px size so the money box keeps room for 8-digit balances */
@media (max-width: 440px) {
  .hud-time { font-size: 12px; padding: 4px 4px 3px; }
  .hud { gap: 3px; }
}
@media (max-width: 360px) {
  .hud-time, .hud-rank-n, .hud-coins { font-size: 12px; }
  .hud-rank { min-width: 40px; }
  .hud-season-tile { width: 26px; height: 26px; } .hud-season { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-rank.lvup, .hud-money.down, .hud-money.up .hud-coin, .hud-toast, .hud-delta, .hud-state.on { animation: none; }
}

/* ---------- compact HUD on phones (< 480px, clock-hud.js adds .hud-compact): target <= 110px total with the shell.
   Row 1: rank (+XP) | season + Y/M + time | coins with the income rate as a 2nd line.
   Row 2: month track as a thin strip, then stat chips (moved in by shell.js) + speed + gear, all 44px tall.
   Every label stays >= 10px. ---------- */
#clockHud.hud-root.hud-compact { padding: 0; margin: 0; }
.hud-compact .hud { position: relative; gap: 3px; padding: 3px; }
.hud-compact .hud-rank { gap: 2px; padding: 1px 4px 2px; min-width: 44px; }
.hud-compact .hud-rank-n { font-size: 14px; }
.hud-compact .hud-xp { height: 4px; }
.hud-compact .hud-date { padding: 2px 4px 2px 2px; gap: 4px; }
.hud-compact .hud-season-tile { width: 28px; height: 28px; }
.hud-compact .hud-season { width: 20px; height: 20px; }
.hud-compact .hud-dt { gap: 2px; }
.hud-compact .hud-time { font-size: 12px; padding: 2px 3px 1px; }
.hud-compact .hud-money { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic n g" "ic r r";
  align-items: center; column-gap: 3px; row-gap: 2px; padding: 2px 6px 2px 5px; }
.hud-compact .hud-coin { grid-area: ic; margin: 0; }
.hud-compact .hud-coins { grid-area: n; justify-self: end; }
.hud-compact .hud-g { grid-area: g; align-self: end; margin: 0 0 1px; }
.hud-compact .hud-money .hud-rate { grid-area: r; justify-self: end; padding: 0; background: none; border: 0; box-shadow: none; gap: 2px; }
.hud-compact .hud-money .hud-rate-n { color: #2f7a3a; text-shadow: none; }          /* 5.0:1 on the paper box */
.hud-compact .hud-money .hud-rate-u { color: #5c5040; }                            /* 7.0:1 */
.hud-compact .hud-money .hud-rate.idle .hud-rate-n { color: #5c5040; }
.hud-compact .hud-row2 { flex-wrap: wrap; row-gap: 2px; column-gap: 3px; padding: 0; position: relative; }
.hud-compact .hud-track { flex: 1 1 100%; height: 4px; border-width: 1px; box-shadow: none; }
.hud-compact .hud-state { position: absolute; right: 2px; bottom: 2px; padding: 5px 2px 4px; background: var(--hud-wood2); border: 2px solid var(--hud-ink); border-radius: 2px; }
.hud-compact .hud-speed { min-width: 52px; padding: 0 6px; }
@media (max-width: 370px) {
  .hud-compact .hud-rank { min-width: 38px; }
  .hud-compact .hud-season-tile { width: 24px; height: 24px; } .hud-compact .hud-season { width: 18px; height: 18px; }
  .hud-compact .hud-speed { min-width: 46px; padding: 0 4px; }
}

/* fast-forward toggle (RS1's most-requested fix) */
.hud-speed { min-height: 44px; min-width: 64px; padding: 0 10px; border-radius: 6px; border: 2px solid #6b4a34;
  background: #3d3129; color: #f2e9d8; font: inherit; font-size: 11px; cursor: pointer; }
.hud-speed.on { background: #e8b84b; color: #2b2320; }