/* Retro CRT phosphor terminal. Designed for clarity at 320px and up.
   The datacenter floor is the main visual stage  -  it should always be
   readable above a fold even on a small phone. */

:root {
  --bg: #050a07;
  --bg-panel: #0a1410;
  --bg-deep: #020503;
  --fg: #46f08a;
  --fg-dim: #2a8c50;
  --fg-bright: #b4ffd0;
  --warn: #f0c846;
  --bad: #ff5050;
  --good: #46f08a;
  --frontier: #b46aff;     /* B200 accent  -  distinguishes tiers visually */
  --premium: #6ab4ff;      /* H100 */
  --border: #1d3a28;
  --mono: 'Courier New', 'Menlo', 'Consolas', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: none;
}

body.crt {
  text-shadow: 0 0 2px var(--fg), 0 0 6px rgba(70, 240, 138, 0.4);
}

/* Phosphor scanlines  -  overlay layer, pointer-events: none so it never
   blocks the action. Tiny flicker animation gives it warmth. */
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
  animation: flicker 6s infinite;
}
.bloom {
  position: fixed; inset: 0; pointer-events: none; z-index: 99;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.5) 100%);
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.97; }
}

.screen {
  max-width: 920px;
  margin: 0 auto;
  padding: 16px 12px 80px;
  min-height: 100vh;
}

/* CRITICAL: ensure the [hidden] attribute actually hides elements. CSS
   selectors like `.game-screen { display: flex }` can override the browser
   default `[hidden] { display: none }` because they're more specific. Force
   it back. */
[hidden] { display: none !important; }

/* Game screen specifically: fit to viewport, no scroll. The scene takes the
   middle flex space; everything else stacks tight. */
.screen.game-screen:not([hidden]) {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  padding: 6px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.screen.game-screen .scene {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 4px;
  margin-bottom: 0;
}
.screen.game-screen .scene .scene-svg {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
}
.screen.game-screen .topbar { margin-bottom: 0; padding: 6px 10px; }
.screen.game-screen .ticker { margin-bottom: 0; padding: 4px 10px; }
.screen.game-screen .actionbar {
  margin-bottom: 0;
  padding: 4px 8px;
  gap: 4px;
}
.screen.game-screen .actions {
  margin-top: 0;
  padding: 6px 0 4px;
}

.banner {
  color: var(--fg-bright);
  white-space: pre;
  text-align: center;
  font-size: 11px;
  margin: 8px 0 20px;
  overflow-x: auto;
}
@media (min-width: 600px) { .banner { font-size: 14px; } }

.banner-small {
  color: var(--fg-bright);
  font-size: 18px;
  margin: 12px 0 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.log {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 12px;
  margin: 12px 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 60vh;
  overflow-y: auto;
}
.log p { margin: 6px 0; }
.log ol, .log ul { margin: 6px 0 6px 24px; }
.log b { color: var(--fg-bright); }

.prompt {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}

/* Buttons */
.btn, .btn-primary, .btn-ghost, .btn-small {
  font-family: var(--mono);
  font-size: 14px;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg);
  padding: 10px 14px;
  cursor: pointer;
  text-shadow: inherit;
  transition: background 0.1s, color 0.1s, transform 0.05s;
  min-height: 44px; /* touch target */
}
.btn:hover, .btn-primary:hover, .btn-small:hover {
  background: var(--fg); color: var(--bg);
}
.btn:active, .btn-primary:active, .btn-small:active { transform: translateY(1px); }
.btn-primary { color: var(--fg-bright); border-color: var(--fg-bright); }
.btn-ghost { border-color: var(--fg-dim); color: var(--fg-dim); }
.btn-ghost:hover { background: var(--fg-dim); color: var(--bg); }
.btn-small {
  padding: 6px 10px; font-size: 12px; min-height: 34px;
}
.btn-clear { border-color: var(--fg-dim); color: var(--fg-dim); padding: 6px 10px; }

/* Top bar / news ticker */
.topbar {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--border);
  padding: 10px 14px;
  margin-bottom: 8px;
}
.topbar .stat { color: var(--fg-bright); font-size: 13px; }
.topbar .btn-ghost { margin-left: auto; padding: 4px 10px; min-height: 32px; }

.ticker {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 13px;
}
.ticker-line { color: var(--warn); }
.ticker-effect {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 1px;
}
.ticker-pre { color: var(--fg); margin-right: 8px; font-weight: bold; }

/* Region selector  -  three big chunky cards with pixel art previews. */
.region-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
}
@media (min-width: 600px) { .region-grid { grid-template-columns: 1fr 1fr 1fr; } }

.region-card {
  font-family: var(--mono);
  background: var(--bg-panel);
  border: 1px solid var(--fg);
  color: var(--fg);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  text-shadow: inherit;
  display: flex; flex-direction: column; gap: 6px;
  min-height: auto;
  transition: background 0.12s, transform 0.05s;
}
.region-card:hover { background: rgba(70, 240, 138, 0.08); }
.region-card:active { transform: translateY(1px); }
.region-art {
  width: 100%;
  height: 60px;
  image-rendering: pixelated;
}
.region-name {
  color: var(--fg-bright);
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: bold;
}
.region-blurb {
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1.4;
}

/* DATACENTER FLOOR  -  the main visual stage */
.floor {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  padding: 14px 14px 10px;
  margin-bottom: 12px;
  position: relative;
}
.floor-title {
  color: var(--fg-bright);
  font-size: 11px;
  letter-spacing: 3px;
  margin-bottom: 12px;
  text-align: center;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 8px;
}

.rack-row {
  display: grid;
  grid-template-columns: 80px 1fr 30px;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
@media (min-width: 600px) {
  .rack-row { grid-template-columns: 130px 1fr 40px; }
}
.rack-label {
  font-size: 13px;
  color: var(--fg-bright);
  line-height: 1.15;
}
.rack-sub {
  display: block;
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.5px;
}
.rack-slots {
  display: flex; flex-wrap: wrap; gap: 4px;
  min-height: 28px;
  align-content: center;
}
.gpu-card {
  width: 36px; height: 27px;
  display: inline-block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
}
@media (min-width: 600px) {
  .gpu-card { width: 44px; height: 33px; }
}
.gpu-card.pending {
  animation: gpu-pending 0.7s ease-in-out infinite;
}
.gpu-card.serving {
  animation: gpu-pulse 0.5s ease-out;
}
.gpu-card.h100 { filter: drop-shadow(0 0 3px var(--premium)); }
.gpu-card.b200 { filter: drop-shadow(0 0 4px var(--frontier)); }
@keyframes gpu-pending {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@keyframes gpu-pulse {
  0%   { transform: scale(1) translateY(0);   filter: brightness(1); }
  40%  { transform: scale(1.2) translateY(-3px); filter: brightness(1.6); }
  100% { transform: scale(1) translateY(0);   filter: brightness(1); }
}
.rack-empty {
  color: var(--fg-dim);
  font-style: italic;
  font-size: 11px;
  opacity: 0.6;
}
/* Legacy slot class kept for fallback */
.rack-slot {
  width: 14px; height: 14px;
  display: inline-block;
  color: var(--fg);
  font-size: 14px;
}
@keyframes rack-pulse {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.3); filter: brightness(1.6); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.rack-count {
  color: var(--fg-bright);
  text-align: right;
  font-size: 13px;
}

.power-bar {
  margin: 10px 0 8px;
  padding: 6px 10px;
  border: 1px dashed var(--border);
  display: flex; align-items: center; gap: 12px;
  font-size: 12px;
  color: var(--fg);
}
.power-icon { font-size: 16px; }
.power-flow {
  letter-spacing: 4px;
  color: var(--warn);
  animation: power-flow 1s linear infinite;
}
@keyframes power-flow {
  0%   { opacity: 0.4; transform: translateX(-2px); }
  50%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0.4; transform: translateX(2px); }
}

.queue-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px; align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
@media (min-width: 600px) {
  .queue-row { grid-template-columns: 130px 1fr; }
}
.queue-label {
  color: var(--fg-bright);
  font-size: 12px;
}
.queue-bar { display: flex; flex-direction: column; gap: 4px; }
.queue-icons {
  display: flex; flex-wrap: wrap; gap: 2px;
  min-height: 18px;
  font-size: 12px;
}
.queue-icon { display: inline-block; }
.queue-icon.waiting { color: var(--fg-dim); }
.queue-icon.served  { color: var(--good); animation: served-pop 0.3s ease-out; }
.queue-icon.dropped { color: var(--bad); animation: dropped-fade 0.5s ease-out; }
@keyframes served-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  50%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes dropped-fade {
  0%   { opacity: 1; }
  100% { opacity: 0.5; }
}
.queue-stat {
  font-size: 11px; color: var(--fg-dim);
}

/* Action bar */
.actionbar {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.action-group, .action-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.action-row { font-size: 12px; }
.action-sep { color: var(--fg-dim); opacity: 0.4; padding: 0 2px; }
.tally-strip { display: inline-flex; gap: 8px; align-items: center; }
.tally-strip b { color: var(--fg-bright); }
.tally-strip .tally-h100 b { color: var(--premium); }
.tally-strip .tally-b200 b { color: var(--frontier); }
.action-label {
  font-size: 11px; color: var(--fg-dim); letter-spacing: 2px; min-width: 50px;
}
.action-cart {
  font-size: 11px; color: var(--warn); margin-left: auto;
}
.action-meta {
  font-size: 11px; color: var(--fg-dim);
}
.radio-chip {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--fg-dim);
  color: var(--fg-dim);
  cursor: pointer;
}
.radio-chip:has(input:checked) {
  border-color: var(--fg);
  color: var(--fg-bright);
  background: rgba(70, 240, 138, 0.08);
}
.radio-chip.locked {
  opacity: 0.45;
  pointer-events: none;
  border-style: dashed;
}
.radio-chip.locked .chip-price { color: var(--fg-dim); }
.radio-chip input { display: none; }
#price {
  background: var(--bg);
  border: 1px solid var(--fg-dim);
  color: var(--fg-bright);
  padding: 4px 8px;
  font-family: var(--mono);
  font-size: 14px;
  width: 80px;
  text-align: right;
  text-shadow: inherit;
}
#price:focus {
  outline: none; border-color: var(--fg-bright); box-shadow: 0 0 4px var(--fg-bright);
}

/* Sticky bottom bar so RUN DAY is always reachable without scrolling. */
.actions {
  position: sticky;
  bottom: 0;
  left: 0; right: 0;
  display: flex; justify-content: center;
  padding: 8px 0 10px;
  margin: 8px -12px 0;
  background: linear-gradient(to top, var(--bg) 70%, rgba(5,10,7,0.85) 90%, rgba(5,10,7,0));
  z-index: 50;
  backdrop-filter: blur(4px);
}
.actions .btn-primary {
  font-size: 16px;
  padding: 14px 32px;
  letter-spacing: 2px;
  background: var(--bg-panel);
  box-shadow: 0 0 14px rgba(70, 240, 138, 0.35);
}
.actions .btn-primary.running {
  pointer-events: none;
  opacity: 0.7;
  animation: run-pulse 0.8s ease-in-out infinite;
}
@keyframes run-pulse {
  0%, 100% { box-shadow: 0 0 0 var(--fg); }
  50%      { box-shadow: 0 0 12px var(--fg); }
}

/* Day-transition flash  -  quick scanline wipe between days. */
.day-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 200;
  background: linear-gradient(to bottom, transparent 0%, var(--fg) 49%, var(--fg) 51%, transparent 100%);
  background-size: 100% 6px;
  opacity: 0;
  animation: day-wipe 0.5s ease-out;
}
@keyframes day-wipe {
  0%   { opacity: 0; transform: translateY(-100%); }
  50%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(100%); }
}

/* P&L flash on cash counter */
@keyframes cash-up   { 0% { color: var(--good); transform: scale(1.15); } 100% { color: var(--fg-bright); transform: scale(1); } }
@keyframes cash-down { 0% { color: var(--bad);  transform: scale(1.15); } 100% { color: var(--fg-bright); transform: scale(1); } }
.cash-up   { animation: cash-up   0.6s ease-out; }
.cash-down { animation: cash-down 0.6s ease-out; }

.good { color: var(--good); }
.warn { color: var(--warn); }
.bad  { color: var(--bad); }
.dim  { color: var(--fg-dim); }
.premium-c  { color: var(--premium); }
.frontier-c { color: var(--frontier); }

/* GPU sprite blocks in the primer screen  -  original ASCII art rendered in
   the same phosphor palette as the rest of the game. */
.gpu-sprite {
  font-family: var(--mono);
  font-size: 11px;
  white-space: pre;
  color: var(--fg);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  padding: 10px;
  margin: 10px 0;
  overflow-x: auto;
  text-shadow: 0 0 3px var(--fg);
}
@media (min-width: 600px) { .gpu-sprite { font-size: 13px; } }

.action-cart.bad { color: var(--bad); }

/* Power chip shows today's spot price next to the fuel name. */
.chip-fuel { font-weight: bold; letter-spacing: 1px; }
.chip-price {
  font-size: 10px;
  color: var(--warn);
  margin-left: 4px;
  letter-spacing: 0.5px;
}
.radio-chip:has(input:checked) .chip-price { color: var(--fg-bright); }

.grid-strain-warn {
  flex-basis: 100%;
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--bad);
  border: 1px dashed var(--bad);
  background: rgba(255, 80, 80, 0.06);
  letter-spacing: 0.5px;
}

/* Sell buttons. Different border so they don't blur with buy. */
.btn-small.btn-sell {
  border-color: var(--warn);
  color: var(--warn);
}
.btn-small.btn-sell:hover {
  background: var(--warn);
  color: var(--bg);
}

/* Tier info modal */
.tier-modal {
  background: var(--bg-panel);
  color: var(--fg);
  border: 1px solid var(--fg);
  font-family: var(--mono);
  padding: 16px;
  max-width: 920px;
  width: 92%;
}
.tier-modal::backdrop { background: rgba(0, 0, 0, 0.7); }
.tier-modal h2 {
  color: var(--fg-bright);
  font-size: 16px;
  letter-spacing: 3px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.tier-table {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (min-width: 700px) { .tier-table { grid-template-columns: 1fr 1fr 1fr; } }
.tier-col {
  border: 1px solid var(--border);
  padding: 10px;
  background: var(--bg-deep);
}
.tier-col h3 {
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.a100-col h3 { color: var(--fg-bright); }
.h100-col h3 { color: var(--premium); }
.b200-col h3 { color: var(--frontier); }
.tier-col ul {
  list-style: none;
  font-size: 11px;
  line-height: 1.6;
  color: var(--fg-dim);
}
.tier-col ul li b { color: var(--fg-bright); }
.tier-modal-art {
  width: 100%;
  height: 40px;
  margin-bottom: 6px;
}

/* SCENE  -  composited isometric SVG datacenter. */
.scene {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  padding: 6px;
  margin-bottom: 12px;
}
.scene-svg { width: 100%; height: auto; display: block; }
.scene-card.pending { animation: gpu-pending 0.7s ease-in-out infinite; }
.scene-customer.waiting { opacity: 0.7; }
.scene-customer.served {
  filter: drop-shadow(0 0 3px var(--good));
  animation: served-pop 0.35s ease-out;
}
.scene-customer.dropped {
  opacity: 0.35;
  filter: hue-rotate(120deg) saturate(0.5) brightness(0.7);
  animation: dropped-fade 0.5s ease-out;
}

.inv-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 12px;
  border-top: 1px dashed var(--border);
}
.tally-a100 b { color: var(--fg-bright); }
.tally-h100 b { color: var(--premium); }
.tally-b200 b { color: var(--frontier); }
.btn-tiny {
  background: transparent;
  border: 1px solid var(--fg-dim);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 6px;
  cursor: pointer;
  margin-left: auto;
}
.btn-tiny:hover { background: var(--fg-dim); color: var(--bg); }

/* Eco viz - escalates with served customers during run.
   diesel: smoke puffs drift up; grid: sparks flicker; ppa: sun pulses. */
.smoke-puff {
  animation: smoke-rise 1.4s ease-out forwards;
}
@keyframes smoke-rise {
  0%   { opacity: 0.7; transform: translate(0, 0) scale(1); }
  100% { opacity: 0;   transform: translate(0, -50px) scale(2.2); }
}
.grid-spark {
  animation: spark-flash 0.35s ease-out forwards;
}
@keyframes spark-flash {
  0%   { opacity: 1;   filter: drop-shadow(0 0 4px #f0c846); }
  100% { opacity: 0;   filter: drop-shadow(0 0 0 transparent); }
}
.ppa-sun.pulse { animation: sun-pulse 0.6s ease-out; }
@keyframes sun-pulse {
  0%   { filter: drop-shadow(0 0 0 #ffd700); }
  50%  { filter: drop-shadow(0 0 10px #ffd700) brightness(1.4); }
  100% { filter: drop-shadow(0 0 0 #ffd700); }
}
.scene-power.eco-on.eco-diesel { filter: drop-shadow(0 0 8px rgba(120,120,120,0.4)); }
.scene-power.eco-on.eco-ppa    { filter: drop-shadow(0 0 8px #ffd700); }

/* Idle-state diesel still belches occasional puffs even when not running -
   reinforces "this is dirty" before the player even hits RUN DAY. */
.scene-power.eco-diesel { animation: drum-idle-smoke 4s ease-in-out infinite; }
@keyframes drum-idle-smoke {
  0%, 80%, 100% { filter: drop-shadow(0 -4px 6px rgba(120,120,120,0.0)); }
  90%           { filter: drop-shadow(0 -10px 8px rgba(140,140,140,0.5)); }
}
.scene-power.eco-grid .grid-spark { animation: spark-idle 3s ease-in-out infinite; }
@keyframes spark-idle {
  0%, 70%, 100% { opacity: 0.3; }
  80%           { opacity: 1;   filter: drop-shadow(0 0 4px #f0c846); }
}
.scene-power.eco-ppa .ppa-sun {
  animation: sun-idle-glow 3.5s ease-in-out infinite;
}
@keyframes sun-idle-glow {
  0%, 100% { filter: drop-shadow(0 0 3px #f0c846); }
  50%      { filter: drop-shadow(0 0 9px #ffd700) brightness(1.15); }
}

/* Empty slot outlines so the player sees rack capacity visually. */
.scene-card.empty-slot { opacity: 0.55; }

/* Filled GPU cards: subtle LED blink so racks feel alive. Cards inherit
   their tier color via inline style; the gpu-slot symbol's LED rect uses
   #f0c846 so this just adds a glow. */
.scene-card:not(.empty-slot):not(.pending) {
  animation: gpu-led-blink 2.2s ease-in-out infinite;
}
.scene-card.a100:not(.empty-slot):not(.pending) { filter: drop-shadow(0 0 1px #46f08a); }
.scene-card.h100:not(.empty-slot):not(.pending) { filter: drop-shadow(0 0 2px #6ab4ff); }
.scene-card.b200:not(.empty-slot):not(.pending) { filter: drop-shadow(0 0 3px #b46aff); }
@keyframes gpu-led-blink {
  0%, 90%, 100% { opacity: 1; }
  95%           { opacity: 0.65; }
}

/* News ticker reacts to event days. Spike = pulse yellow glow; bad = red. */
.ticker.event-spike { animation: ticker-spike 1.6s ease-out 1; border-left-color: var(--warn); }
.ticker.event-bad   { animation: ticker-bad   1.6s ease-out 1; border-left-color: var(--bad); }
@keyframes ticker-spike {
  0%   { box-shadow: 0 0 0 transparent; }
  30%  { box-shadow: 0 0 18px rgba(240, 200, 70, 0.55), inset 0 0 12px rgba(240, 200, 70, 0.2); }
  100% { box-shadow: 0 0 0 transparent; }
}
@keyframes ticker-bad {
  0%   { box-shadow: 0 0 0 transparent; }
  30%  { box-shadow: 0 0 18px rgba(255, 80, 80, 0.55), inset 0 0 12px rgba(255, 80, 80, 0.2); }
  100% { box-shadow: 0 0 0 transparent; }
}

/* Cash floater - drifts up + fades when cash changes. */
.cash-float {
  position: fixed;
  transform: translate(-50%, 0);
  font-family: var(--mono);
  font-size: 22px;
  font-weight: bold;
  text-shadow: 0 0 6px currentColor;
  pointer-events: none;
  z-index: 300;
  animation: cash-float 1.4s ease-out forwards;
  letter-spacing: 1px;
}
@keyframes cash-float {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  20%  { opacity: 1; transform: translate(-50%, -8px); }
  100% { opacity: 0; transform: translate(-50%, -54px); }
}

/* Power-bus cable pulses to show electricity flowing. */
.power-bus {
  animation: bus-pulse 1.4s linear infinite;
  stroke-dashoffset: 0;
}
@keyframes bus-pulse {
  0%   { stroke-dashoffset: 0;  opacity: 0.4; }
  50%  { stroke-dashoffset: -9; opacity: 0.85; }
  100% { stroke-dashoffset: -18; opacity: 0.4; }
}

/* Live drop overlay during runDay - pinned to scene top-right so the
   running served + lost counts are HUGE and unmissable. */
.drop-overlay {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(5, 10, 7, 0.85);
  border: 1px solid var(--border);
  padding: 8px 12px;
  font-family: var(--mono);
  text-align: right;
  line-height: 1.3;
  pointer-events: none;
  z-index: 30;
  text-shadow: 0 0 4px currentColor;
}
.scene { position: relative; }
.drop-served { color: var(--fg-bright); font-size: 13px; letter-spacing: 1px; }
.drop-lost   { color: var(--bad); font-size: 18px; letter-spacing: 1px; font-weight: bold; margin-top: 4px; }
.drop-overlay.drop-flash { animation: drop-flash-anim 0.35s ease-out; }
@keyframes drop-flash-anim {
  0%   { background: rgba(5, 10, 7, 0.85);  transform: scale(1); }
  30%  { background: rgba(255, 80, 80, 0.4); transform: scale(1.06); }
  100% { background: rgba(5, 10, 7, 0.85);  transform: scale(1); }
}
.drop-overlay.drop-final {
  border-color: var(--bad);
  box-shadow: 0 0 18px rgba(255, 80, 80, 0.45);
}

/* Day log popup overlay so the report doesn't push RUN DAY off-screen. */
.day-log-wrap {
  position: fixed;
  inset: 0;
  background: rgba(2, 5, 3, 0.78);
  backdrop-filter: blur(3px);
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.day-log-wrap[hidden] { display: none; }
.day-log-panel {
  max-width: 720px;
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--fg);
  padding: 16px;
  font-size: 13px;
  white-space: pre-wrap;
  text-shadow: 0 0 4px currentColor;
  box-shadow: 0 0 32px rgba(70, 240, 138, 0.35);
}
.day-log-wrap .btn-small {
  margin-top: 12px;
  font-size: 14px;
  letter-spacing: 2px;
  padding: 10px 24px;
  border-color: var(--fg-bright);
  color: var(--fg-bright);
}