:root {
  --ink: #140f24; --n1: #2a2440; --n2: #3f3a5c; --n3: #5c5a80; --n4: #8a88a8; --n5: #b9b8cf; --n6: #e8e6f2;
  --pu1: #3b1f5c; --pu2: #6b38a8; --pu3: #a66bf0; --pu4: #d4a8ff;
  --gr2: #1f7a4d; --gr3: #34c16b; --gr4: #8ef0a0;
  --or2: #e08a1e; --or3: #ffc233; --or4: #fff07a;
  --rd2: #d6283a; --rd3: #ff6b6b; --bl2: #2a6fd6; --bl3: #5cc8ff;
  --fs: 1;
  --font: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--n6); font: calc(14px * var(--fs))/1.4 var(--font); -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; overscroll-behavior-y: contain; }
canvas { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
h1, h2, h3 { margin: 0 0 8px; }
h3 { font-size: calc(15px * var(--fs)); color: var(--or3); margin-top: 16px; }
p { margin: 0 0 10px; }
small { color: var(--n4); }
.fine { color: var(--n4); font-size: calc(12px * var(--fs)); }
.warn { color: var(--or3); }
.problem { color: var(--rd3); }
.empty { color: var(--n4); padding: 16px 4px; }

/* pixel-style buttons: a chunky border made of box-shadows */
button {
  background: var(--n2); border: 0; padding: 8px 12px; color: var(--n6);
  box-shadow: inset -3px -3px 0 var(--n1), inset 3px 3px 0 var(--n3), 0 0 0 2px var(--ink);
}
button:active:not(:disabled) { box-shadow: inset 3px 3px 0 var(--n1), inset -3px -3px 0 var(--n3), 0 0 0 2px var(--ink); transform: translateY(1px); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--or3); outline-offset: 2px; }
button.go { background: var(--gr2); box-shadow: inset -3px -3px 0 #0f3d2e, inset 3px 3px 0 var(--gr3), 0 0 0 2px var(--ink); }
button.danger { background: var(--rd2); box-shadow: inset -3px -3px 0 #7a1420, inset 3px 3px 0 var(--rd3), 0 0 0 2px var(--ink); }
button.cant { opacity: 0.5; }
button.big { width: 100%; padding: 14px; font-size: calc(16px * var(--fs)); font-weight: bold; margin: 8px 0; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.row-btns > button { flex: 1; }

input {
  width: 100%; background: var(--ink); border: 0; padding: 10px 12px; margin-bottom: 10px;
  box-shadow: inset 3px 3px 0 var(--n1), 0 0 0 2px var(--n3);
}

/* landing */
.landing { max-width: 420px; margin: 0 auto; padding: 32px 18px; text-align: center; }
.landing h1 { font-size: calc(34px * var(--fs)); letter-spacing: 1px; color: var(--or4); text-shadow: 3px 3px 0 var(--pu2); margin-top: 8px; }
.landing .tagline { color: var(--n5); margin-bottom: 22px; }
.parade { width: 384px; max-width: 100%; height: auto; aspect-ratio: 192 / 32; }
form.auth { text-align: left; }

/* game layout: phone first */
.game { display: flex; flex-direction: column; min-height: 100vh; }
.side { position: sticky; top: 0; z-index: 5; background: var(--ink); box-shadow: 0 4px 0 var(--n1); }
.hud { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px 6px; align-items: center; }
.brand { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.brand small { font-size: calc(11px * var(--fs)); }
.clout { display: flex; align-items: center; gap: 6px; font-size: calc(26px * var(--fs)); font-weight: bold; color: var(--or4); }
.clout small { font-size: calc(12px * var(--fs)); font-weight: normal; }
.coin-icon { width: 24px; height: 24px; }
.goal { grid-column: 1 / -1; font-size: calc(12px * var(--fs)); color: var(--n5); min-height: 16px; }
.goal.ready { color: var(--gr4); }
.chip.daily { color: var(--ink); background: var(--or3); animation: pulse 1s steps(2) infinite; }
.rate-num { color: var(--gr4); justify-self: end; font-size: calc(15px * var(--fs)); }
.chips { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chip { font-size: calc(11px * var(--fs)); padding: 2px 8px; background: var(--n1); color: var(--n5); border: 0; box-shadow: 0 0 0 1px var(--n3); }
.chip.btn { margin-left: auto; padding: 2px 10px; }
.chip.buff { color: var(--ink); background: var(--or3); box-shadow: none; }
.chip.legacy { color: var(--pu4); background: var(--pu1); box-shadow: 0 0 0 1px var(--pu3); }
.mood-bull { color: var(--gr4); } .mood-bear { color: var(--rd3); } .mood-crab { color: var(--or4); }
.mood-euphoria { color: var(--pu4); } .mood-panic { color: var(--bl3); }
.stage { padding: 0 10px 8px; }
.scene-wrap { max-height: 27vh; overflow-y: auto; overflow-x: hidden; background: #0c0818; box-shadow: 0 0 0 2px var(--n2); scrollbar-width: thin; }
.scene { display: block; position: relative; left: 50%; transform: translateX(-50%); }
.tap { width: 100%; margin-top: 8px; padding: 10px; display: flex; justify-content: space-between; align-items: center; font-size: calc(16px * var(--fs)); background: var(--pu2); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.tap small { color: var(--pu4); }
.tap.hit { transform: translateY(2px); }
.main { flex: 1; padding: 0 10px 40px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 2px 8px; scrollbar-width: none; }
.tab { white-space: nowrap; padding: 6px 10px; font-size: calc(13px * var(--fs)); }
.tab.on { background: var(--pu2); }
.tab.ready { color: var(--or4); }
.panel { padding-top: 4px; }

@media (min-width: 900px) {
  .game { flex-direction: row; height: 100vh; }
  .side { position: static; width: 440px; flex: none; display: flex; flex-direction: column; height: 100vh; box-shadow: 4px 0 0 var(--n1); }
  .scene-wrap { max-height: none; flex: 1; }
  .stage { flex: 1; display: flex; flex-direction: column; min-height: 0; padding-bottom: 12px; }
  .main { overflow-y: auto; height: 100vh; padding: 0 24px 40px; max-width: 760px; }
  .tap { padding: 16px; font-size: calc(18px * var(--fs)); }
}

/* operations and upgrades */
.modes { display: flex; gap: 6px; margin: 4px 0 10px; }
.mode { flex: 1; padding: 5px; font-size: calc(13px * var(--fs)); }
.mode.on { background: var(--pu2); }
.gen, .up { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 8px; margin-bottom: 8px; background: var(--n1); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 1px var(--n2); }
.gen[hidden] { display: none; }
.gen.unowned { opacity: 0.85; }
.icon { width: 64px; height: 64px; background: #0c0818; box-shadow: 0 0 0 2px var(--n2); }
.icon.small { width: 48px; height: 48px; }
.up { grid-template-columns: 48px 1fr auto; }
.info { min-width: 0; }
.info .name { display: flex; gap: 8px; align-items: baseline; }
.info .count { color: var(--or3); }
.info .blurb { display: block; color: var(--n5); font-size: calc(12px * var(--fs)); line-height: 1.3; }
.info .rate { display: block; color: var(--gr4); font-size: calc(12px * var(--fs)); margin-top: 2px; }
.buy { min-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; background: var(--gr2); }
.buy .cost { font-size: calc(12px * var(--fs)); color: var(--or4); }
.buy.cant { background: var(--n2); }
.more { color: var(--n4); font-size: calc(12px * var(--fs)); text-align: center; padding: 6px; }

/* launches */
.lede { color: var(--n5); }
.cards { display: grid; gap: 8px; }
.card { display: grid; grid-template-columns: 64px 1fr; gap: 10px; text-align: left; padding: 8px; background: var(--n1); }
.card.on { background: var(--pu1); box-shadow: inset 0 0 0 3px var(--pu3), 0 0 0 2px var(--ink); }
.card .ctext small { display: block; }
.card .odds { color: var(--n4); font-size: calc(11px * var(--fs)); margin-top: 2px; }
.tag { margin-left: 8px; font-size: calc(11px * var(--fs)); padding: 1px 6px; background: var(--n2); }
.tag.safe { color: var(--gr4); } .tag.risky { color: var(--or4); } .tag.insane { color: var(--rd3); }
.coin { image-rendering: pixelated; }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.size { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; }
.size.on { background: var(--pu2); }
.cooldown { color: var(--or3); text-align: center; min-height: 20px; }
.live { text-align: center; }
.live-head { display: flex; gap: 12px; align-items: center; text-align: left; margin-bottom: 4px; }
.live-head .ctext b { display: block; }
.game.live .scene-wrap { max-height: 11vh; }
.chart { margin-top: 8px; }
.chart { width: 100%; max-width: 480px; max-height: 120px; height: auto; aspect-ratio: 160 / 72; background: var(--ink); box-shadow: 0 0 0 2px var(--n2); }
.hype { font-size: calc(40px * var(--fs)); font-weight: bold; color: var(--gr4); margin-left: auto; }
.hype.hot { color: var(--rd3); animation: pulse 0.5s steps(2) infinite; }
.meter { height: 10px; background: var(--ink); box-shadow: 0 0 0 2px var(--n2); margin: 6px 0; }
.meter-fill { height: 100%; background: var(--rd2); width: 0; }
.payout { color: var(--or4); }
.risk { color: var(--n5); }
.risk.danger { color: var(--rd3); }
.cash { background: var(--gr2) !important; font-size: calc(20px * var(--fs)) !important; padding: 20px !important; }
.result { text-align: center; padding: 16px 8px; }
.result.won h3 { color: var(--gr4); }
.result.lost h3 { color: var(--rd3); font-size: calc(28px * var(--fs)); }

/* rebrand, board, help */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.stat { background: var(--n1); padding: 8px; text-align: center; }
.stat b { display: block; font-size: calc(20px * var(--fs)); color: var(--pu4); }
.stat small { display: block; font-size: calc(11px * var(--fs)); }
.rows { list-style: none; margin: 8px 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 8px; padding: 6px 8px; background: var(--n1); margin-bottom: 4px; align-items: center; }
.rows li.me { background: var(--pu1); box-shadow: inset 0 0 0 2px var(--pu3); }
.rows .rank { color: var(--or3); }
.rows .score { color: var(--or4); }
.you { color: var(--gr4); }
.help h3 { margin-top: 18px; }
.help p { color: var(--n5); max-width: 62ch; }

/* modal, toasts, floats */
.modal-back { position: fixed; inset: 0; background: rgba(10, 6, 20, 0.82); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal { width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; background: var(--n1); padding: 18px; box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--pu2); }
.modal.incident { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--or3); }
.modal h2 { color: var(--or4); }
.ev-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.ev-icon, .res-icon { background: #0c0818; box-shadow: 0 0 0 2px var(--n2); flex: none; }
.res-icon { margin: 0 auto 8px; display: block; }
.memo { font-style: italic; color: var(--n5); }
.opt { display: block; width: 100%; text-align: left; margin-bottom: 10px; padding: 10px 12px; }
.opt small { display: block; margin-top: 2px; }
.timer { display: block; margin-top: 6px; }
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; width: min(92vw, 460px); display: flex; flex-direction: column; gap: 6px; z-index: 60; pointer-events: none; }
.toast { background: var(--n1); padding: 10px 12px; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--n3); transition: opacity 0.4s; font-size: calc(13px * var(--fs)); }
.toast.good { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--gr3); }
.toast.bad { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--rd2); }
.toast.out { opacity: 0; }
.float { position: fixed; z-index: 70; pointer-events: none; color: var(--or4); font-weight: bold; text-shadow: 2px 2px 0 var(--ink); animation: rise 0.9s steps(9) forwards; transform: translateX(-50%); }
@keyframes rise { to { transform: translate(-50%, -48px); opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.06); } }
.shake { animation: shake 0.6s steps(6); }
@keyframes shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -2px); } }
@media (prefers-reduced-motion: reduce) { .shake, .hype.hot { animation: none; } .float { animation-duration: 0.01s; } }

/* hover, keys and tooltips (mouse and keyboard) */
button:hover:not(:disabled):not(.cant) { filter: brightness(1.18); }
.gen:hover, .up:hover, .rows li:hover { background: var(--n2); }
.card, .size, .mode, .tab, .opt, .chip.btn { cursor: pointer; }
kbd { font: inherit; font-size: calc(11px * var(--fs)); padding: 0 5px; margin: 0 1px; color: var(--n6); background: var(--ink); box-shadow: inset 0 -2px 0 var(--n3), 0 0 0 1px var(--n3); }
.rail, .keyhint, kbd.key { display: none; }

/* wide screens: HQ tower | operations and upgrades | launch and board.
   Keep the media query in step with wideMq in client/game.ts. */
@media (min-width: 1000px) and (min-height: 560px) {
  :root { --hq: 420px; --rail: 360px; }
  .game { display: grid; grid-template-columns: var(--hq) minmax(0, 1fr) var(--rail); height: 100vh; overflow: hidden; }
  .side { width: auto; }
  .main { max-width: none; padding: 0 20px 24px; min-width: 0; }
  .rail { display: flex; flex-direction: column; gap: 14px; height: 100vh; overflow-y: auto; padding: 10px 16px 24px 10px; border-left: 4px solid var(--n1); scrollbar-width: thin; }
  .rail-box { background: #1a1430; padding: 10px 12px 12px; box-shadow: 0 0 0 2px var(--n1); }
  .rail-box h3 { margin-top: 0; }
  .tab[hidden] { display: none; }
  .keyhint { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 12px 10px; font-size: calc(12px * var(--fs)); color: var(--n4); }
  kbd.key { display: inline-block; margin-left: auto; color: var(--n4); }
  .modal { max-width: 520px; }
  .game .scene-wrap { max-height: none; }
  .game.live .scene-wrap { max-height: none; }
  .game .chart { max-width: none; }
  .game .cards { grid-template-columns: 1fr; }
  .game .card { grid-template-columns: 64px 1fr; }
}
@media (min-width: 1700px) and (min-height: 560px) {
  :root { --fs: 1.1; --hq: 440px; --rail: 420px; }
}
@media (min-width: 2300px) and (min-height: 560px) {
  :root { --fs: 1.3; --hq: 620px; --rail: 540px; }
  .ops, .ups { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; align-items: start; }
  .ops .gen, .ups .up { grid-template-columns: 96px 1fr auto; }
  .ops .icon { width: 96px; height: 96px; }
  .more { grid-column: 1 / -1; }
}