/* SnackWars — playful candy-stand UI */
:root {
  --ink: #3a2b4f;
  --sub: #7a6a8f;
  --bg1: #ffd9a0;
  --bg2: #ff9ec2;
  --card: rgba(255, 255, 255, 0.94);
  --pink: #ff5fa8;
  --orange: #ff9d3f;
  --teal: #11a8b8;
  --green: #2ecc71;
  --red: #ff5f5f;
  --gold: #ffc933;
  --shadow: 0 10px 22px rgba(80, 50, 90, 0.22);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

@font-face { font-family: 'Fredoka'; font-weight: 400; src: url('/fonts/fredoka-400.ttf') format('truetype'); }
@font-face { font-family: 'Fredoka'; font-weight: 600; src: url('/fonts/fredoka-600.ttf') format('truetype'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; src: url('/fonts/fredoka-700.ttf') format('truetype'); }

body {
  font-family: 'Fredoka', 'Trebuchet MS', 'Comic Sans MS', system-ui, sans-serif;
  background: linear-gradient(160deg, var(--bg1), var(--bg2) 60%, #ff8fb0);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
}
.hidden { display: none !important; }

h1, h2, h3 { font-weight: 700; }

/* ---------- title ---------- */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 200, 170, 0.45); z-index: 40; }
#title, #gameover { flex-direction: column; align-items: center; }
#title { gap: 18px; overflow-y: auto; }
#scores-title { width: min(92vw, 460px); }
#title .title-card, #modal .card, #gameover .card { background: var(--card); border-radius: 26px; box-shadow: var(--shadow); padding: 28px 34px; max-width: 460px; width: min(92vw, 460px); max-height: 88vh; overflow: auto; }
/* ---------- animated logo ---------- */
.logo-wrap { position: relative; text-align: center; padding: 10px 0; }
.float { position: absolute; font-size: 2rem; opacity: 0.55; animation: floaty 6s ease-in-out infinite; }
.float.f1 { top: -14px; left: 4%;  animation-delay: 0s;   }
.float.f2 { top: -6px;  right: 8%; animation-delay: 0.7s; }
.float.f3 { top: 38px;  left: -4px; animation-delay: 1.4s; }
.float.f4 { top: 46px;  right: -6px; animation-delay: 2.1s; }
.float.f5 { bottom: -12px; left: 16%; animation-delay: 2.8s; }
.float.f6 { bottom: -6px;  right: 20%; animation-delay: 3.5s; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-12px) rotate(8deg); } }
.logo { font-size: 3.4rem; text-align: center; margin: 4px 0 8px; line-height: 1.15; text-shadow: 0 6px 18px rgba(255, 95, 168, 0.45); }
.logo-text {
  background: linear-gradient(90deg, #ff5fa8, #ff9d3f, #ffd24d, #ff5fa8);
  background-size: 300% 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hue 4s linear infinite;
  filter: drop-shadow(0 3px 0 #fff8);
}
@keyframes hue { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
.bob { display: inline-block; font-size: 2.6rem; animation: bob 1.2s ease-in-out infinite; }
.bob.d2 { animation-delay: 0.6s; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-7px) rotate(10deg); } }
.tagline { color: var(--sub); margin-bottom: 14px; }

/* ---------- difficulty ---------- */
.difficulty h3 { margin: 0 0 8px; }
.diff-cards { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.diff {
  font-family: inherit; font-weight: 700; background: #fff; border: 2px solid #e8cfe9;
  border-radius: 16px; cursor: pointer; padding: 8px 12px; text-align: center; flex: 1 1 130px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1); transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}
.diff:hover { transform: translateY(-2px); }
.diff.selected { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 95, 168, 0.4), 0 6px 12px rgba(0,0,0,0.15); }
.diff .d-emoji { display: block; font-size: 1.9rem; line-height: 1.2; }
.diff .d-name { font-size: 1.05rem; display: block; }
.diff .d-stats { font-size: 0.78rem; color: var(--sub); display: block; line-height: 1.25; white-space: normal; }
.name-row { display: block; font-weight: 700; margin: 10px 0; font-size: 1.02rem; text-align: center; }
.term-cursor { display: none; font-family: 'Courier New', monospace; }
.title-btns { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 12px; }
#name-input { font-family: inherit; font-size: 1.15rem; font-weight: 700; border: 2px solid var(--teal); border-radius: 12px; padding: 6px 10px; width: 180px; }
#name-input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255,95,168,0.25); }
#title .title-card { text-align: center; }
.tagline { color: var(--sub); margin-bottom: 18px; }
.howto { text-align: left; font-size: 0.92rem; line-height: 1.45; margin-top: 12px; }
.howto li { margin-bottom: 6px; }
#scores-title, #scores-end { margin: 12px auto 0; width: 100%; max-height: 320px; overflow: auto; text-align: left; }

/* ---------- buttons ---------- */
.btn { font-family: inherit; font-weight: 700; font-size: 1.15rem; background: linear-gradient(180deg, #fff, #fbe8d7); color: #7c4aa0; border: 2px solid #e8cfe9; border-radius: 999px; padding: 9px 18px; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,0.12); transition: transform 0.08s, box-shadow 0.15s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 14px rgba(0,0,0,0.18); }
.btn:active { transform: translateY(1px) scale(0.97); }
.btn.big { font-size: 1.4rem; padding: 13px 26px; background: linear-gradient(180deg, #ff8fb6, #ff5fa8); color: #fff; border: none; box-shadow: 0 8px 16px rgba(255, 95, 168, 0.35); }
.btn.plain { font-size: 0.95rem; }
.btn.good { background: linear-gradient(180deg, #7ce6a3, #2ecc71); color: #fff; border: none; }
.btn.bad { background: linear-gradient(180deg, #ff8a8a, #ff5f5f); color: #fff; border: none; }
.btn.tiny { padding: 4px 10px; font-size: 0.85rem; }
.btn:disabled, .btn.disabled { opacity: 0.45; cursor: default; box-shadow: none; transform: none; }
.icon-btn { border: none; background: rgba(255,255,255,0.9); border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 1.35rem; }

/* ---------- HUD ---------- */
#hud { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; align-items: center; gap: 10px; background: rgba(255, 248, 230, 0.92); padding: 10px 14px; border-radius: 18px; margin: 10px; box-shadow: var(--shadow); }
.hud-left { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }
.hud-title { font-weight: 700; font-size: 1.2rem; }
.hud-right { display: flex; flex-wrap: nowrap; gap: 8px; flex: 0 0 auto; }
.chip { background: #fff; border: 1.5px solid #e8cfe9; border-radius: 14px; padding: 2px 10px; font-size: 1.02rem; white-space: nowrap; line-height: 1.5; }
button.chip { cursor: pointer; font: inherit; border-radius: 14px; padding: 3px 10px; }
button.chip:disabled { opacity: 0.55; cursor: default; }
.chip.money { background: #dff6e8; border-color: #9fe0b8; color: #127a3d; font-weight: 700; }
.chip.debt { background: #ffe9e9; border-color: #ffc4c4; color: #c43c3c; font-weight: 700; }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: minmax(340px, 3fr) minmax(240px, 2fr); gap: 14px; align-items: start; padding: 6px 14px 150px; }
.panel { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 14px 16px; }

.market-panel .panel-head h2 { margin: 0 0 8px; font-size: 1.4rem; }
.busts { margin-top: 6px; }
.bust { display: inline-block; background: linear-gradient(180deg, #fff3c4, #ffd97a); color: #8a5a00; border-radius: 999px; padding: 3px 12px; font-size: 0.82rem; margin: 0 4px 6px 0; }
.bust.hot { background: linear-gradient(180deg, #ffe1e1, #ffb3b3); color: #a83636; }

.market { display: grid; grid-template-columns: 1fr; gap: 8px; }
.snack-row { display: grid; grid-template-columns: 38px 1fr auto auto auto; gap: 6px; align-items: center; background: #fff; border: 1.5px solid #eedcf3; border-radius: 14px; padding: 6px 8px; }
.snack-emoji { font-size: 1.85rem; text-align: center; line-height: 1.3; }
.snack-info { display: flex; flex-direction: column; line-height: 1.1; }
.snack-name { font-weight: 700; font-size: 1.1rem; }
.snack-price { color: var(--sub); font-size: 0.95rem; }
.snack-price.hot { color: #c43c3c; font-weight: 700; }
.snack-price.steal { color: #127a3d; font-weight: 700; }
.snack-price-row { display: flex; align-items: center; gap: 6px; }
.snack-price-row + .snack-price-row, .snack-price-row + .snack-name { margin-top: 0; }
.snack-price-row .pill { font-size: 0.66rem; }
.snack-qty { font-weight: 700; text-align: center; min-width: 2ch; }
.snack-ctrl { display: flex; gap: 4px; align-items: center; }
.stepper { width: 36px; height: 36px; font-size: 1.25rem; font-weight: 700; border-radius: 50%; border: 1.5px solid var(--teal); background: #fff; color: var(--teal); cursor: pointer; }
.snack-acts { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.snack-row .snack-info { min-width: 0; }

/* ---------- side panel ---------- */
.side-panel { display: flex; flex-direction: column; gap: 12px; }
.side-block h3 { margin: 0 0 8px; font-size: 1.02rem; }
.free-label { color: var(--sub); font-size: 0.85rem; }
#map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.district { border: 1.5px solid #e0d2e9; background: #fff; border-radius: 12px; padding: 7px 2px; text-align: center; cursor: pointer; font-size: 0.95rem; line-height: 1.15; transition: transform 0.1s, box-shadow 0.15s; }
.district .d-emoji { font-size: 1.7rem; display: block; }
.district:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0,0,0,0.15); }
.district.home { box-shadow: inset 0 0 0 2px #ffe08a; }
.district.hub { box-shadow: inset 0 0 0 2px #9ee6ff; }
.district.here { background: linear-gradient(180deg, #ffd9f2, #ffb9e2); box-shadow: 0 0 0 2px var(--pink); animation: pulse 1.6s infinite; }
.district.disabled { opacity: 0.45; cursor: not-allowed; }
.district.rival { outline: 2px dotted #7a4ec2; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 2px var(--pink); } 50% { box-shadow: 0 0 0 4px rgba(255,95,168,0.5); } }

#inventory, #crew { background: #fdf6ec; border: 1.5px dashed #e8cfe9; border-radius: 12px; padding: 8px; max-height: 220px; overflow: auto; min-height: 48px; }
.inv-line { display: flex; justify-content: space-between; font-size: 0.98rem; color: var(--ink); }
.inv-empty { color: var(--sub); font-size: 0.95rem; text-align: center; padding: 10px; }

/* ---------- story ticker ---------- */
#story { position: fixed; bottom: 0; left: 0; right: 0; height: 104px; z-index: 15; background: linear-gradient(90deg, rgba(60,44,80,0.92), rgba(90,60,110,0.92)); color: #ffeef7; overflow: hidden; }
.story-inner { margin: 6px 16px; padding-bottom: 8px; font-size: 1.05rem; }
.story-line { padding: 2px 0; line-height: 1.3; }
.story-line.danger { color: #ffd0c4; font-weight: 700; }
.story-line.good { color: #bff5c8; }
.story-line.fight { color: #7ee0ff; }
.story-line.travel { color: #ffe9a8; }
.story-line.say { color: #e3d9ff; font-style: italic; }

/* ---------- modal ---------- */
#modal .card { text-align: center; }
#modal h2 { margin-top: 0; }
#modal .modal-text { color: var(--ink); line-height: 1.5; margin-bottom: 18px; }
#modal .btn-row { display: flex; gap: 12px; justify-content: center; margin-top: 14px; }
#modal .btn-row .btn { min-width: 110px; }
.visit-big { font-size: 2.9rem; margin-bottom: 4px; }

/* visit panes */
.pane { text-align: center; margin-bottom: 10px; }
.pane .col { display: flex; justify-content: space-between; font-size: 0.95rem; padding: 2px 0; }
.pane .pay-note { margin-top: 8px; color: var(--green); font-weight: 700; font-size: 0.98rem; }
.pane .pay-done { margin-top: 8px; color: var(--green); font-weight: 700; font-size: 1.05rem; padding: 6px 10px; background: rgba(46, 204, 113, 0.14); border-radius: 10px; }
input.amount { font-family: inherit; font-size: 1.4rem; font-weight: 700; text-align: center; width: 170px; border: 2px solid var(--teal); border-radius: 12px; padding: 8px; }
.quick-amt { display: flex; gap: 6px; flex-wrap: wrap; }
.quick-amt .btn.tiny { min-width: 74px; }
.gun-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 6px 4px; border-bottom: 1px dashed #e8cfe9; }

/* ---------- battle ---------- */
#battle .battle-card { background: linear-gradient(180deg, #0f2b45, #123b5c); color: #dfeefc; border: 3px solid #7ec8ff; border-radius: 24px; box-shadow: 0 12px 26px rgba(20,60,110,0.4); width: min(94vw, 680px); max-height: 90vh; overflow: auto; padding: 18px 26px; }
#battle h2 { margin: 0 0 10px; text-align: center; }
.hpbar { height: 16px; border-radius: 8px; background: #3b3b4d; overflow: hidden; }
.hpbar > i { display: block; height: 100%; background: linear-gradient(90deg, #43e97b, #2ecc71); transition: width 0.35s; }
.hpbar.damaged > i { background: linear-gradient(90deg, #ffd24d, #ff9d3f); }
.hpbar.critical > i { background: linear-gradient(90deg, #ff8a8a, #ff4d4d); }
.battle-side { display: flex; align-items: center; gap: 10px; padding: 8px; }
.battle-side .big-emoji { font-size: 2.9rem; }
.battle-side .bar-caption { font-size: 0.9rem; }
.battle-side.you { background: rgba(46, 204, 113, 0.14); border-radius: 12px; }
.battle-side.enemy { background: rgba(255, 93, 93, 0.14); border-radius: 12px; }
.cadets { display: flex; flex-wrap: wrap; gap: 5px; }
.cadet { font-size: 1.2rem; }
.battle-log { max-height: 170px; overflow: auto; margin-top: 10px; font-size: 1rem; }
.battle-log div { padding: 2px 0; }

/* ---------- game over ---------- */
#gameover .card { text-align: center; }
.over-msg { color: var(--sub); }
.score-label { color: var(--sub); margin: 0; }
.over-score { font-size: 3rem; font-weight: 700; color: var(--gold); margin: 2px; }
.over-breakdown { color: var(--sub); font-size: 0.9rem; }
.over-ach { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 2px; font-size: 1.6rem; }
.over-ach .ach-big { cursor: help; padding: 2px 4px; }
#score-form { margin: 10px 0; }
.score-table { width: 100%; font-size: 0.95rem; }
.score-table { width: 100%; font-size: 0.95rem; text-align: left; }
.score-table .row { display: grid; grid-template-columns: 2.6em minmax(0,1fr) 5em minmax(0,1.5fr) 11ch; align-items: center; column-gap: clamp(1em, 4vw, 2.5em); padding: 11px 26px; border-bottom: 1px solid #eedcf3; text-align: left; }
.score-table .row.me { font-weight: 700; background: #fff6dd; }
.score-table .cell { white-space: nowrap; }
.score-table .cell.rank { justify-self: start; color: var(--sub); font-weight: 400; }
.score-table .cell.name { font-weight: 600; }
.score-table .cell.mode { color: var(--sub); font-size: 0.78rem; }
.score-table .cell.mode.empty { opacity: 0; }
.score-table .cell.ach { justify-self: center; display: inline-flex; align-items: center; gap: 5px; }
.score-table .cell.score { justify-self: end; text-align: right; min-width: 11ch; font-variant-numeric: tabular-nums; font-weight: 600; } /* fixed width (scores cap at $9,999,999) so the achievements column never shifts */
.score-table .row-score, .score-table .row-name, .score-table .row-tag, .score-table .row-sep { display: none; }
.ach-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em; font-size: 0.85rem; cursor: help; }
.ach-slot.locked { color: var(--sub); background: #f2e9f3; border: 1px solid #e2d3e6; border-radius: 4px; font-size: 0.76rem; opacity: 0.8; }
.score-group-head { font-weight: 700; font-size: 0.92rem; margin: 16px 0 4px; color: var(--sub); text-align: left; padding-left: 26px; }
.ach-help { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 4px; font-size: 1.5rem; }
.ach-help .badge { cursor: default; font-size: 1.5rem; padding: 2px 4px; }
.ach-mystery { font-size: 0.9rem; color: var(--sub); font-style: italic; }
.ach-help { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0 4px; font-size: 1.5rem; }
.ach-help .badge { cursor: default; font-size: 1.5rem; padding: 2px 4px; }
.ach-mystery { font-size: 0.9rem; color: var(--sub); font-style: italic; }
.score-group-empty { color: var(--sub); font-size: 0.85rem; text-align: left; }
/* market memory: sparklines & lore chips */
.spark { display: inline-flex; gap: 2px; align-items: flex-end; height: 10px; margin-left: 7px; }
.spark i { width: 3px; background: var(--teal); }
.district .spark { margin-top: 1px; }
.lore-chip { font-size: 0.72rem; color: var(--sub); cursor: help; }


/* ---------- help ---------- */
#help .help-card { background: var(--card); border-radius: 26px; box-shadow: var(--shadow); padding: 24px 30px; width: min(94vw, 560px); max-height: 86vh; display: flex; flex-direction: column; }
#help .help-card h2 { text-align: center; margin: 0 0 10px; }
.help-body { flex: 1; overflow: auto; }
.help-body section { margin-bottom: 10px; }
.help-body h3 { font-size: 1.08rem; margin: 4px 0; }
.help-body p, .help-body li { font-size: 0.98rem; line-height: 1.5; color: var(--ink); }
.help-body ul { padding-left: 18px; }
.pill { border-radius: 999px; padding: 0 8px; font-weight: 700; }
.pill.steal { background: #dff6e8; color: #127a3d; }
.pill.hot { background: #ffe1e1; color: #a83636; }
#help .btn-row { text-align: center; margin-top: 10px; }

/* ---------- toast ---------- */
#toast { position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); background: #3a2b4f; color: #ffeef7; border: 2px solid #ff9ec2; border-radius: 999px; padding: 8px 20px; font-weight: 700; font-size: 1.02rem; box-shadow: var(--shadow); z-index: 90; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
#toast.show { opacity: 1; }

/* ================= DESKTOP: keep it all on one screen ================= */
@media (min-width: 861px) {
  html, body { overflow: hidden; } /* desktop: everything fits, never scroll */
  /* Title screen reads a bit better ~10% bigger on desktop (matches ~110% browser zoom). */
  #title { zoom: 1.1; }
  .market-panel { max-height: calc(100vh - 240px); }
  #market { overflow-y: auto; }
  .side-panel { max-height: calc(100vh - 240px); overflow-y: auto; }
  .layout { padding: 8px 14px 130px; }
  #story { height: 100px; }
}

/* ================= MOBILE / SMALL SCREENS ================= */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  .layout { grid-template-columns: 1fr; padding: 8px 8px 160px; gap: 10px; }
  .panel { padding: 12px 10px; border-radius: 14px; }

  /* High scores on mobile: 2 lines per row.
     Line 1: rank, name, mode, score. Line 2: achievements (centered, full width).
     Unearned '?' boxes are hidden on mobile so only earned icons show. */
  .score-table .row { display: grid; grid-template-columns: 2.2em minmax(0,1fr) auto auto; grid-template-areas: "rank name mode score" "ach ach ach ach"; column-gap: 10px; row-gap: 5px; padding: 9px 12px; }
  .score-table .cell.rank { grid-area: rank; justify-self: start; }
  .score-table .cell.name { grid-area: name; justify-self: start; }
  .score-table .cell.mode { grid-area: mode; justify-self: start; }
  .score-table .cell.score { grid-area: score; justify-self: end; }
  .score-table .cell.ach { grid-area: ach; justify-self: center; gap: 8px; }
  .score-table .ach-slot { font-size: 1.1rem; min-width: 1.5em; height: 1.5em; }
  .score-table .ach-slot.locked { display: none; }

  /* HUD: single swipeable chip bar */
  #hud { margin: 8px; padding: 8px 10px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 7px; border-radius: 12px; }
  #hud .hud-left, #hud .hud-right { flex: 0 0 auto; flex-wrap: nowrap; }
  #hud .hud-title { display: none; }
  #hud .chip { flex: 0 0 auto; font-size: 0.92rem; padding: 2px 8px; }
  #hud .icon-btn { width: 36px; height: 36px; }

  /* market rows: two stacked lines, fat tap targets */
  .snack-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 6px; }
  .snack-row .snack-emoji { flex: 0 0 40px; font-size: 1.7rem; }
  .snack-row .snack-info { flex: 1 1 auto; }
  .snack-row .snack-qty { flex: 0 0 30px; font-size: 1rem; }
  .snack-row .snack-ctrl { display: flex; align-items: center; }
  .snack-row .snack-acts { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; justify-content: flex-end; }
  .snack-acts .btn { flex: 1 1 30%; min-width: 0; padding: 8px 2px; min-height: 40px; font-size: 0.98rem; }
  .stepper { width: 38px; height: 38px; }

  /* map: 2-up keeps 8 (or 6) districts readable */
  #map { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .district { font-size: 0.88rem; padding: 7px 1px; }
  .district .d-emoji { font-size: 1.5rem; }
  #inventory, #crew { max-height: 180px; }

  /* story ticker: shorter on phones */
  #story { height: 78px; }
  .story-inner { font-size: 0.95rem; margin: 4px 10px; }

  /* title */
  #title .title-card { padding: 22px 16px; max-height: 94vh; }
  .logo { font-size: 2.15rem; }
  .bob { font-size: 1.8rem; }
  .float { font-size: 1.5rem; }
  .diff-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .diff { padding: 7px 6px; }
  .diff .d-name { font-size: 0.98rem; }
  .diff .d-emoji { font-size: 1.5rem; }
  .diff .d-stats { font-size: 0.7rem; }
  #name-input, input.amount { width: min(210px, 88%); }
  .title-btns .btn { width: 88%; }
  #scores-title { max-height: 220px; }

  /* modals & overlays */
  #modal .card, #gameover .card { padding: 18px 14px; max-width: 94vw; }
  #modal .btn-row { flex-wrap: wrap; }
  #modal .btn-row .btn { min-width: 0; }
  .visit-big { font-size: 2.4rem; }
  .quick-amt .btn.tiny { min-width: 0; flex: 1 1 30%; }
  #gameover .card input { width: 70%; }

  /* battle */
  #battle .battle-card { padding: 12px 14px; }
  .battle-side { flex-wrap: wrap; }
  .battle-side .big-emoji { font-size: 2.2rem; }
  .battle-log { max-height: 120px; }

  /* help */
  #help .help-card { padding: 16px 16px; width: min(96vw, 560px); }
  .help-body { font-size: 0.95rem; }
  .help-body p, .help-body li { font-size: 0.92rem; }

  #toast { bottom: 92px; max-width: 86vw; }
}

@media (max-width: 380px) {
  .diff-cards { grid-template-columns: 1fr; }
  .logo { font-size: 1.9rem; }
  .snack-acts .btn { flex: 1 1 100%; }
}.score-table .row .row-tag { color: var(--sub); font-size: 0.78rem; }

/* ================= DRUG WARS THEME (easter-egg original) ================= */
body.orig {
  background: radial-gradient(ellipse at 50% 30%, #150a1a 0%, #0d0710 55%, #060409 100%);
  color: #e8d6f2;
  --ink: #e8d6f2; --sub: #9c86b8; --card: rgba(22, 13, 26, 0.94);
  --pink: #ff3bbf; --orange: #ff8a3c; --teal: #3ce8ff; --gold: #ffd24d;
  --shadow: 0 8px 20px rgba(120, 20, 180, 0.35);
}
body.orig::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 2000;
  background: radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(20, 8, 30, 0.28) 100%);
}
body.orig .logo-text { background: linear-gradient(90deg, #ff3bbf, #ff8a3c, #ffd24d, #ff3bbf); background-size: 300% 100%; }
body.orig .logo { text-shadow: 0 0 16px rgba(255, 59, 191, 0.5), 0 0 3px rgba(255, 138, 60, 0.7); }
body.orig .float { filter: saturate(0.7) drop-shadow(0 0 6px rgba(255, 59, 191, 0.4)); }
body.orig .tagline { color: #cf92f2; }
body.orig .panel, body.orig .card, body.orig .title-card, body.orig .scores-card, body.orig .snack-row, body.orig .district {
  background: rgba(18, 11, 24, 0.94); border: 1.5px solid #4a2f6e; box-shadow: 0 6px 14px rgba(90, 20, 140, 0.3);
}
body.orig .chip { background: #140c1c; border: 1px solid #4a2f6e; color: #e8d6f2; }
body.orig .chip.money { background: #101b10; border-color: #2e8a5e; color: #7fff9b; }
body.orig .chip.debt { background: #1f0a0a; border-color: #8a2f2f; color: #ff8a8a; }
body.orig .btn { background: linear-gradient(180deg, #1a1026, #120a1c); color: #ff9df2; border: 2px solid #ff3bbf; }
body.orig .btn.big { background: linear-gradient(180deg, #ff3bbf, #d61f9e); color: #fff; border: none; box-shadow: 0 0 14px rgba(255, 59, 191, 0.45); }
body.orig .btn.good { background: linear-gradient(180deg, #2e7d4f, #1f5a38); color: #bfffd0; }
body.orig .btn.bad { background: linear-gradient(180deg, #8a2030, #5e141e); color: #ffb3b3; }
body.orig .icon-btn, body.orig .stepper { background: #140c1c; border-color: #ff3bbf; color: #ff9df2; }
body.orig .snack-name { color: #ffe9fb; }
body.orig .snack-price { color: #cfb3e8; }
body.orig .bust { background: #170c24; color: #ffd24d; }
body.orig #hud { background: rgba(16, 10, 22, 0.95); border-bottom: 2px solid #ff3bbf; }
body.orig #story { background: linear-gradient(90deg, #120820, #1a0c2c); color: #f3d8ff; }
body.orig .battle-card { background: linear-gradient(180deg, #0d0516, #150a20); border: 2px solid #ff3bbf; color: #f3d8ff; }
body.orig .hpbar > i { background: linear-gradient(90deg, #3ce8ff, #9ff8ff); }
body.orig .hpbar.damaged > i { background: linear-gradient(90deg, #ffd24d, #ff8a3c); }
body.orig .hpbar.critical > i { background: linear-gradient(90deg, #ff5f8f, #ff2f5f); }
body.orig .over-score { color: #ffd24d; }
body.orig input.amount, body.orig #name-input, body.orig #score-name { background: #120a1c; color: #e8d6f2; border-color: #ff3bbf; }
body.orig .diff { background: #140c1c; color: #e8d6f2; border-color: #4a2f6e; }
body.orig .diff.selected { border-color: #ff3bbf; box-shadow: 0 0 0 3px rgba(255, 59, 191, 0.35); }
body.orig .help-body p, body.orig .help-body li { color: #e8d6f2; }
body.orig .pill.steal { background: #101b10; color: #7fff9b; }
body.orig .pill.hot { background: #1f0a0a; color: #ff8a8a; }

/* ================= RETRO (terminal) THEME ================= */
.retro-note { font-size: 0.9rem; color: var(--sub); margin: 8px 0 4px; text-align: center; }
.diff.retro { background: #051505; color: #aaffaa; border-color: #3fae3f; border-radius: 2px; font-family: 'Courier New', 'Nimbus Mono PS', 'Liberation Mono', monospace; }
.diff.retro .d-emoji { filter: brightness(0.9) saturate(0.6); }
.diff.retro.selected { border-color: #7fff7f; box-shadow: 0 0 0 3px rgba(70,255,70,0.35), 0 0 14px rgba(50,255,90,0.5); }

body.retro {
  background: radial-gradient(ellipse at 50% 35%, #0f3d0f 0%, #072607 55%, #031203 100%);
  color: #9dff9d;
  font-family: 'Courier New', 'Nimbus Mono PS', 'Liberation Mono', 'DejaVu Sans Mono', monospace;
}
body.retro .overlay { background: rgba(3, 26, 3, 0.42); }
body.retro::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 2000;
  background: repeating-linear-gradient(0deg, rgba(120,255,120,0.05) 0 1px, transparent 1px 3px);
}
body.retro .logo { text-shadow: 0 0 14px rgba(60,255,120,0.6), 0 0 2px rgba(60,255,120,0.9); }
body.retro .logo-text { color: #66ff66; background: none; -webkit-background-clip: initial; }
body.retro .float { filter: brightness(0.75) saturate(0.55); opacity: 0.4; }
body.retro .tagline { color: #7fd97f; }
body.retro .panel, body.retro .title-card, body.retro .card, body.retro .snack-row, body.retro .district, body.retro .gun-row {
  background: #041204; border: 2px solid #1c5c1c; border-radius: 3px;
  box-shadow: 0 4px 0 rgba(0,26,0,0.7);
}
body.retro .snack-price, body.retro .d-stats, body.retro .inv-empty, body.retro .retro-note { color: #79c879; }
body.retro .snack-name { color: #c8ffc8; }
body.retro .chip { background: #041204; border: 1px solid #2e7a2e; color: #b6ffb6; border-radius: 2px; }
body.retro .chip.money { background: #031503; border-color: #3fae3f; color: #7eff7e; }
body.retro .chip.debt { background: #170505; border-color: #9a2f2f; color: #ff6b6b; }
body.retro .btn { background: #041204; border: 2px solid #3fae3f; color: #c8ffc8; border-radius: 2px; box-shadow: none; }
body.retro .btn:hover { background: #0d3f0d; }
body.retro .btn.big { background: #0c3a0c; border: 2px solid #57c957; color: #e0ffe0; box-shadow: 0 0 12px rgba(60,255,120,0.4); }
body.retro .btn.good { background: #0a2f0a; color: #9aff9a; }
body.retro .btn.bad { background: #2f0a0a; color: #ff9a9a; }
body.retro .icon-btn { background: #041204; color: #9dff9d; border: 1px solid #2e7a2e; }
body.retro .stepper { background: #041204; border-color: #3fae3f; color: #7fff7f; }
body.retro #hud { background: #031203; border: 2px solid #194f19; box-shadow: 0 4px 0 rgba(0,26,0,0.7); }
body.retro #story { background: #020b02; color: #b4ffb4; border: 2px solid #194f19; }
body.retro .story-line { background: none; }
body.retro .story-line.danger { color: #ff9a9a; }
body.retro .story-line.good { color: #a4ffa4; }
body.retro .story-line.fight { color: #7ee0ff; }
body.retro .battle-card { background: #020b02; border: 3px solid #3fae3f; color: #b8ffb8; box-shadow: none; }
body.retro .hpbar { background: #06200622; }
body.retro .hpbar > i { background: linear-gradient(90deg, #3fae3f, #7fff7f); }
body.retro .hpbar.damaged > i { background: linear-gradient(90deg, #ffd24d, #ff9d3f); }
body.retro .hpbar.critical > i { background: linear-gradient(90deg, #ff8a8a, #ff4d4d); }
body.retro .battle-log { color: #b8ffb8; }
body.retro .modal-text, body.retro .over-msg, body.retro .score-breakdown, body.retro .over-breakdown { color: #9dff9d; }
body.retro .over-score { color: #7fff7f; }
body.retro input.amount, body.retro #name-input, body.retro #score-name {
  background: #041204; color: #9dff9d; border-color: #3fae3f; border-radius: 0;
  caret-color: #7fff7f;
}
body.retro .term-cursor { display: inline-block; color: #7fff7f; font-size: 1.15rem; line-height: 1.05; animation: blink 1.1s steps(2) infinite; text-shadow: 0 0 8px rgba(127,255,127,0.8); margin-left: 2px; }
body.retro #name-input:focus { border-color: #7fff7f; box-shadow: 0 0 0 3px rgba(127,255,127,0.25); }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
body.retro .help-body p, body.retro .help-body li { color: #b6ffb6; }
body.retro .pill.steal { background: #0a2f0a; color: #7eff7e; }
body.retro .pill.hot { background: #2f0a0a; color: #ff9a9a; }
body.retro .bust { background: #0a2f0a; color: #9aff9a; }
body.retro .bust.hot { background: #2f0a0a; color: #ff9a9a; }
body.retro .name-row, body.retro .difficulty h3, body.retro .score-label { color: #9dff9d; }
.help-version { color: var(--sub); font-size: 0.82rem; font-weight: 400; }

/* ================= leaderboard card + easter egg + space budget ================= */
.scores-card { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 18px; width: min(92vw, 460px); text-align: center; }
.scores-card h3 { margin: 0 0 6px; }
.scores-title-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; font-family: inherit; font-weight: 700; font-size: 1.02rem; background: none; border: none; color: inherit; cursor: pointer; padding: 2px 0; margin: 0 0 6px; }
.scores-title-btn:hover { color: var(--pink); }
.scores-title-btn .chevron { display: inline-block; transition: transform 0.18s ease; font-size: 0.9rem; }
.scores-card.open .scores-title-btn .chevron { transform: rotate(90deg); }
.scores-list { max-height: 240px; overflow: auto; }
.tap-hint { font-size: 0.8rem; color: var(--sub); margin-top: 4px; }
#egg { cursor: pointer; z-index: 5; }
#egg:hover { transform: scale(1.25) rotate(-15deg); }
#egg:active { animation: eggwiggle 0.6s infinite; }
@keyframes eggwiggle { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg) translateY(-3px); } }
#egg-dialog .card { text-align: center; }
.space-budget { font-size: 0.82rem; color: var(--sub); line-height: 1.4; padding: 6px 8px; margin-top: 4px; text-align: left; border-top: 1px dashed #e8cfe9; }
.space-budget b { float: right; color: var(--ink); }
.slot-tag { background: #fff0c9; color: #8a5a00; border-radius: 6px; padding: 0 7px; font-size: 0.8rem; font-weight: 700; }
body.retro .scores-card { background: #041204; border: 2px solid #1c5c1c; color: #b6ffb6; border-radius: 3px; }
body.retro #egg-dialog .card { background: #041204; border: 2px solid #3fae3f; color: #b8ffb8; border-radius: 3px; }
body.retro .slot-tag { background: #0a2f0a; color: #9aff9a; }

/* easter-egg dialog: its own prize card, above every other overlay */
#egg-dialog { z-index: 60; }
#egg-dialog .egg-card {
  background: linear-gradient(180deg, #fff8e1, #ffe9c0);
  border: 3px solid var(--gold);
  border-radius: 22px;
  box-shadow: 0 0 24px rgba(255, 200, 60, 0.55), var(--shadow);
  padding: 20px 26px;
  width: min(92vw, 380px);
  text-align: center;
  animation: eggpoke 0.4s;
}
@keyframes eggpoke { 0% { transform: scale(0.9); } 100% { transform: scale(1); } }
#egg-dialog .egg-card h2 { font-size: 3rem; margin: 0 0 6px; }
.egg-question { font-size: 1.35rem; color: #6a5433; margin: 6px 0 18px; }
.egg-answers { gap: 12px; }
.egg-answers .btn { min-width: 108px; flex: 1 1 auto; font-size: 1.1rem; }
body.retro #egg-dialog .egg-card { background: #041204; border: 3px solid #57c957; color: #b8ffb8; box-shadow: 0 0 18px rgba(60,255,120,0.35); }
body.retro .egg-question { color: #c8ffc8; }
#theme-toggle { display: block; margin: 14px auto 0; }
body.orig .logo-text { background: none; color: #ffffff; -webkit-background-clip: initial; background-clip: initial; animation: none; text-shadow: 0 0 14px rgba(255, 80, 220, 0.95), 0 0 4px rgba(255, 190, 90, 0.8); }
#confirm-dialog { z-index: 58; }
#confirm-dialog .confirm-card {
  background: #fffdf6;            /* fully opaque — readable over the title card */
  border: 3px solid var(--orange);
  border-radius: 18px;
  box-shadow: 0 0 18px rgba(255, 160, 70, 0.45), var(--shadow);
  padding: 18px 24px;
  width: min(92vw, 400px);
  text-align: center;
}
body.orig #confirm-dialog .confirm-card { background: #120a1c; border-color: #ff3bbf; color: #e8d6f2; box-shadow: 0 0 18px rgba(255, 59, 191, 0.4); }
body.retro #confirm-dialog .confirm-card { background: #041204; border-color: #57c957; color: #b8ffb8; border-radius: 3px; box-shadow: 0 0 16px rgba(60,255,120,0.3); }
#confirm-dialog { z-index: 58; }
#confirm-dialog .confirm-card {
  background: #fffdf6;            /* fully opaque — readable over the title card */
  border: 3px solid var(--orange);
  border-radius: 18px;
  box-shadow: 0 0 18px rgba(255, 160, 70, 0.45), var(--shadow);
  padding: 18px 24px;
  width: min(92vw, 400px);
  text-align: center;
}
body.orig #confirm-dialog .confirm-card { background: #120a1c; border-color: #ff3bbf; color: #e8d6f2; box-shadow: 0 0 18px rgba(255, 59, 191, 0.4); }
body.retro #confirm-dialog .confirm-card { background: #041204; border-color: #57c957; color: #b8ffb8; border-radius: 3px; box-shadow: 0 0 16px rgba(60,255,120,0.3); }
/* district busy-ness meter */
.busy-meter { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 4px; }
.busy-meter i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.map-legend { font-size: 0.8rem; color: var(--sub); line-height: 1.5; margin-top: 4px; }
body.retro .busy-meter i { border-radius: 0; }
.inv-item { display: flex; flex-direction: column; }
.inv-avg { font-size: 0.78rem; color: var(--sub); padding-left: 6px; }
#drop-dialog { z-index: 47; }
#drop-dialog .drop-card {
  background: #fffdf6;            /* fully opaque — was transparent (same bug as confirm/egg) */
  border: 3px solid var(--orange);
  border-radius: 18px;
  box-shadow: 0 0 18px rgba(255, 160, 70, 0.45), var(--shadow);
  padding: 18px 24px;
  width: min(92vw, 400px);
  text-align: center;
}
body.orig #drop-dialog .drop-card { background: #120a1c; border-color: #ff3bbf; color: #e8d6f2; box-shadow: 0 0 18px rgba(255, 59, 191, 0.4); }
body.retro #drop-dialog .drop-card { background: #041204; border: 2px solid #57c957; color: #b8ffb8; border-radius: 3px; box-shadow: 0 0 16px rgba(60,255,120,0.3); }
.inv-right { display: inline-flex; gap: 6px; align-items: center; }
.inv-right .btn.tiny { padding: 2px 8px; font-size: 0.78rem; }
.drop-risk { font-size: 0.8rem; color: var(--red); margin: 6px 0; }