:root {
  color-scheme: dark;
  --ink: #d8eff4;
  --muted: #82a4b3;
  --panel: #071927;
  --panel-2: #0c2c42;
  --panel-3: #144d62;
  --edge: #396d83;
  --edge-light: #84bdc8;
  --green: #42f59e;
  --green-deep: #0cae61;
  --cyan: #5be7ff;
  --amber: #ffc448;
  --red: #ff6571;
  --violet: #a96bff;
  --shadow: #02090f;
  --pixel: "Courier New", "Lucida Console", monospace;
  --ui: "Trebuchet MS", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html, body { margin: 0; background: #020912; color: var(--ink); }
html { min-height: 100%; }
body { min-width: 320px; min-height: 100dvh; overflow: auto; font: 16px/1.25 var(--ui); }
button, select, input { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

.game-shell {
  height: 100dvh;
  min-height: 660px;
  display: grid;
  grid-template-rows: 72px 82px minmax(0, 1fr);
  gap: 5px;
  padding: 5px;
  background:
    linear-gradient(90deg, rgba(83, 227, 255, .025) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(rgba(83, 227, 255, .025) 1px, transparent 1px) 0 0 / 20px 20px,
    radial-gradient(circle at 50% 0, rgba(34,137,176,.15), transparent 45%),
    #020912;
}

.pixel-frame {
  border: 2px solid #183f51;
  box-shadow: inset 0 0 0 2px #02090f, inset 0 0 0 3px #558296, 0 2px 0 #000, 0 0 12px rgba(26,151,188,.08);
  background: linear-gradient(145deg, #0a2131, #061521 70%);
}

button {
  border: 1px solid #3f6e80;
  border-radius: 3px;
  background: linear-gradient(#153f55, #0b2637 55%, #071b29);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 2px 0 #02080d;
  cursor: pointer;
  min-height: 34px;
  padding: 7px 10px;
  transition: filter .12s, transform .12s, border-color .12s;
}
button:hover:not(:disabled) { filter: brightness(1.2); border-color: var(--cyan); }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 1px 0 #02080d; }
button:disabled { cursor: not-allowed; opacity: .38; }
button.primary { background: linear-gradient(#30e98c, #109557); color: #03130c; border-color: #83ffc0; font-weight: 900; }
button.danger { border-color: #8b3841; color: #ffafb5; background: #301219; }
.eyebrow { color: var(--cyan); font: 700 .72rem/1.2 var(--pixel); letter-spacing: .08em; text-transform: uppercase; }

.topbar { display: grid; grid-template-columns: minmax(330px, 26%) minmax(0, 1fr) auto; overflow: hidden; }
.brand { position: relative; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 0; min-width: 0; background: #061722; padding: 7px 19px; text-align: left; overflow: hidden; }
.brand::before { content: ""; position: absolute; inset: 5px; border: 1px solid #3f7283; box-shadow: inset 0 0 0 2px #081b28; pointer-events: none; }
.brand strong { display: block; font: 900 clamp(.95rem, 1.38vw, 1.4rem)/1 var(--pixel); letter-spacing: -.04em; color: #f3fbfb; white-space: nowrap; }
.brand-chip { display: block; flex: none; width: 42px; height: 42px; object-fit: contain; align-self: center; }
.system-tabs, .utility-tabs { display: flex; gap: 4px; padding: 5px; }
.system-tabs { justify-content: center; }
.system-tabs button { position: relative; flex: 1 1 140px; max-width: 230px; font-size: 1rem; padding-bottom: 11px; }
.tab-progress { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 5px; background: #320c17; border: 1px solid #a84252; }
.tab-progress > i { display: block; height: 100%; background: linear-gradient(90deg, #ff7569, #f3344e); box-shadow: 0 0 7px #f35a69; transition: width .35s; }
.system-tabs button span { margin-right: 7px; color: var(--cyan); }
.system-tabs button.active { background: linear-gradient(#32617a, #17394c); border-color: var(--cyan); box-shadow: inset 0 -3px var(--cyan), 0 0 15px rgba(74,220,255,.15); }
.system-tabs button[data-tab="energy"].active { box-shadow: inset 0 -3px var(--amber), 0 0 15px rgba(255,190,64,.15); border-color: var(--amber); }
.system-tabs button[data-tab="ai"].active { box-shadow: inset 0 -3px var(--violet), 0 0 15px rgba(174,75,255,.22); border-color: var(--violet); }
.utility-tabs { align-items: stretch; justify-content: end; min-width: 210px; }
.utility-tabs button { font-size: .82rem; white-space: nowrap; }

.resource-ribbon { display: grid; grid-template-columns: minmax(0, 17.5%) minmax(0, 1fr) minmax(0, 12.5%); gap: 3px; overflow: hidden; }
.resource-ribbon:has(.conversion-panel[hidden]) { grid-template-columns: minmax(0, 17.5%) minmax(0, 1fr); }
.resource-ribbon > div { padding: 5px 8px; border-right: 1px solid #315a6b; min-width: 0; }
.meter-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 7px; align-items: center; margin-top: 6px; font-size: .78rem; }
.meter { height: 12px; padding: 2px; border: 1px solid #517384; background: #020a11; }
.meter i { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, var(--amber) 0 8px, #926813 8px 10px); box-shadow: 0 0 8px rgba(255,196,72,.45); }
.meter.violet i { background: repeating-linear-gradient(90deg, var(--violet) 0 8px, #503078 8px 10px); box-shadow: 0 0 8px rgba(169,107,255,.45); }
.resources { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; align-items: stretch; gap: 2px; }
.resource { display: grid; align-content: center; min-width: 0; text-align: center; padding: 2px 3px; }
.resource small { color: #9bc3ce; font-size: clamp(.72rem, .9vw, .95rem); }
.resource small { overflow-wrap: anywhere; line-height: 1.04; }
.resource strong { display: block; max-width: 100%; color: var(--green); font: 900 1.5rem/1.08 var(--pixel); white-space: nowrap; overflow: hidden; }
.resource em { display: block; max-width: 100%; color: #84c9d3; font: normal .78rem/1.12 var(--pixel); white-space: nowrap; overflow: hidden; }
.resource .long-number { overflow-x: auto; scrollbar-width: thin; }
.resource.debt strong, .negative { color: var(--red) !important; text-shadow: 0 0 7px rgba(255,70,80,.35); }
.conversion-panel { display: grid; align-content: center; gap: 3px; }
.allocation-mystery { margin-top: 7px; color: #557c8b; font: 700 1.05rem/1 var(--pixel); letter-spacing: .12em; }
.reveal-flash { animation: reveal-flash 1.2s ease-out; }
.conversion-panel > div:not(.mystery) { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; min-width: 0; font-size: .75rem; }
.conversion-panel > div:not(.mystery) > span { flex-basis: 100%; overflow-wrap: anywhere; line-height: 1.05; }
.mystery { color: #4e7280; font: 700 1.05rem var(--pixel); letter-spacing: .2em; }
.button-row { display: flex; gap: 3px; }
.button-row.compact { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); width: 100%; gap: 2px; }
.button-row.compact button { min-width: 0; padding: 2px 1px; min-height: 22px; font-size: .61rem; }
.auto-convert { display: flex; gap: 4px; align-items: center; }
select { background: #092130; color: var(--ink); border: 1px solid #477184; border-radius: 3px; padding: 5px; }

.play-grid { min-height: 0; display: grid; grid-template-columns: minmax(310px, 22%) minmax(0, 1fr) minmax(355px, 27%); gap: 5px; }
.left-rail, .visual-stage, .market { min-height: 0; overflow: hidden; }
.left-rail { display: grid; grid-template-rows: auto minmax(235px, 1fr) auto; }
.quick-stats { padding: 9px 10px 7px; border-bottom: 2px solid #234a5a; }
.quick-stats h2 { margin: 0 0 7px; font: 800 .8rem var(--pixel); text-transform: uppercase; color: var(--amber); }
dl { margin: 0; }
dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 2px 0; font-size: .75rem; }
dt { color: #a0bec8; min-width: 0; }
dd { margin: 0; max-width: 145px; font: 700 .69rem/1.1 var(--pixel); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.mini-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 0 8px; }
.mini-actions button { font-size: .68rem; padding: 5px 2px; overflow-wrap: anywhere; }
.mini-actions button span { display: block; }
.click-zone { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; padding: 10px; background: radial-gradient(circle at 50% 52%, rgba(40,243,153,.2), transparent 47%), linear-gradient(160deg, rgba(12,77,69,.38), rgba(5,20,31,.15)); }
.click-zone p { color: var(--green); font: 700 clamp(.72rem, .9vw, .92rem) var(--pixel); text-align: center; margin: 0 0 12px; max-width: 100%; overflow-wrap: anywhere; }
.compute-button { position: relative; display: grid; place-items: center; width: clamp(145px, 14vw, 215px); aspect-ratio: 1; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; }
.compute-button img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; transition: transform .09s ease-out, filter .12s; }
.compute-button:hover img { filter: brightness(1.09); }
.compute-button:active { transform: none !important; box-shadow: none !important; }
.compute-button:active img { transform: scale(.91); filter: brightness(.96); }
.click-burst { pointer-events: none; position: absolute; color: #fff; font: 900 1rem var(--pixel); opacity: 0; }
.click-burst.pop { animation: burst .5s ease-out; }
.click-zone > strong { max-width: 100%; margin-top: 12px; font: 900 clamp(.72rem, 1.2vw, 1.15rem)/1.1 var(--pixel); text-align: center; overflow-wrap: anywhere; }
.click-zone > small { color: #8db0ba; }
.flop-counter { display: grid; justify-items: center; gap: 3px; width: 100%; margin-top: 18px; padding: 9px 5px 4px; border-top: 1px solid #2f665d; text-align: center; }
.flop-counter > span { color: var(--cyan); font: 800 .72rem var(--pixel); }
.flop-counter strong, .flop-counter em { max-width: 100%; color: var(--green); font: 800 clamp(.77rem, .9vw, 1rem)/1.15 var(--pixel); overflow-wrap: anywhere; font-style: normal; }
.flop-counter em { color: #87cfdb; }
.left-bottom-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; border-top: 2px solid #234a5a; }
.left-bottom-actions button { min-height: 56px; padding: 6px; font-size: .75rem; }

.visual-stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); }
.building-lanes { min-height: 0; overflow: auto; scrollbar-color: #3d7890 #06141f; padding: 4px; background: #04101a; }
.building-lane { position: relative; min-height: calc(var(--field-height, 112px) + 31px); margin-bottom: 4px; overflow: hidden; border: 1px solid #477b8e; background-position: 50% var(--lane-y); background-repeat: no-repeat; box-shadow: inset 0 0 24px rgba(0,0,0,.28); }
.building-lane::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(2,10,15,.1), transparent 25% 75%, rgba(2,10,15,.14)), linear-gradient(0deg, rgba(2,8,12,.14), transparent 65%); }
.lane-hardware-a { background-image: url("../assets/hardware-backgrounds-a.png"); background-size: 100% 700%; }
.lane-hardware-b { background-image: url("../assets/hardware-backgrounds-b.png"); background-size: 100% 700%; }
.lane-energy-a { background-image: url("../assets/energy-backgrounds-a.png"); background-size: 100% 700%; }
.lane-energy-b { background-image: url("../assets/energy-backgrounds-b.png"); background-size: 100% 700%; }
.lane-ai-a { background-image: url("../assets/ai-backgrounds-a.png"); background-size: 100% 500%; }
.lane-ai-b { background-image: url("../assets/ai-backgrounds-b.png"); background-size: 100% 500%; }
.lane-head { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; background: rgba(2,11,17,.82); border-bottom: 1px solid #375b6b; }
.lane-head b { font: 800 .76rem var(--pixel); }
.lane-head span { max-width: 50%; color: var(--green); font: 700 .75rem var(--pixel); text-align: right; overflow-wrap: anywhere; }
.sprite-field { position: relative; z-index: 2; height: var(--field-height, 112px); overflow: hidden; }
.sprite { position: absolute; width: 105px; height: 93px; bottom: -1px; transform-origin: bottom center; background-repeat: no-repeat; filter: drop-shadow(0 0 1px rgba(255,255,255,.88)) drop-shadow(0 0 3px var(--sprite-glow, #bdefff)) drop-shadow(3px 5px 2px rgba(0,0,0,.9)); image-rendering: pixelated; animation: idle 2.4s steps(2,end) infinite alternate; }
.building-lane.powered-off .sprite { filter: grayscale(1) brightness(.16); animation: none; }
.building-lane.powered-off .lane-head { background: rgba(13, 15, 18, .94); }
.lane-off { position: absolute; z-index: 5; inset: 30px auto auto 50%; transform: translateX(-50%); color: #ff777d; font: 900 clamp(1.6rem, 4vw, 3rem) var(--pixel); text-shadow: 0 2px 5px #000, 0 0 18px #ff455c; pointer-events: none; }
.building-card.powered-off .card-icon { filter: grayscale(1) brightness(.2); }
.building-card.powered-off { border-color: #a64f60; background: #191c25; }
.building-card.catalyst { border-color: #d7ae4e; background: linear-gradient(115deg, #29341c, #152b3a); }
.upgrade.catalyst-upgrade { border-color: #d7ae4e; background: #28311c; }
.upgrade.catalyst-upgrade button { border-color: #eac765; }
.building-lane.catalyst { border-color: #f3c65a; box-shadow: inset 0 0 18px #7450156b, 0 0 10px #d7a54256; }
.catalyst-pin { display: inline-block; width: fit-content; padding: 2px 5px; border: 1px solid #f0c35b; background: #533913; color: #ffe4a0; font: 800 .55rem/1.15 var(--pixel); }
.sprite.hardware { background-image: url("../assets/hardware-atlas.png"); background-size: 700% 200%; }
.sprite.energy { background-image: url("../assets/energy-atlas.png"); background-size: 700% 200%; }
.sprite.ai { background-image: url("../assets/ai-atlas.png"); background-size: 500% 200%; }
.sprite.hardware, .card-icon.hardware { --sprite-glow: #6be8ff; }
.sprite.energy, .card-icon.energy { --sprite-glow: #ffd05b; }
.sprite.ai, .card-icon.ai { --sprite-glow: #bf78ff; }
.empty-lane { display: grid; place-items: center; height: 100%; color: #486b79; font: 700 .72rem var(--pixel); }

.market { display: grid; grid-template-rows: auto minmax(145px, 1fr) minmax(155px, 38%); }
.market-controls { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6px; padding: 6px; border-bottom: 2px solid #315667; }
.segmented { display: flex; gap: 3px; }
.segmented button { flex: 1; min-width: 0; padding: 5px 6px; font-size: .75rem; }
.segmented button.active { background: linear-gradient(#43f29d, #12a665); color: #02110a; border-color: #8effc4; font-weight: 900; }
.building-list { min-height: 0; overflow-y: scroll; scrollbar-width: auto; scrollbar-gutter: stable; scrollbar-color: #67cce6 #06141f; }
.building-list::-webkit-scrollbar { width: 11px; }
.building-list::-webkit-scrollbar-track { background: #06141f; border-left: 1px solid #315667; }
.building-list::-webkit-scrollbar-thumb { background: #4b9cb4; border: 2px solid #06141f; border-radius: 8px; }
.building-card { display: grid; grid-template-columns: minmax(0,1fr) 112px; align-items: center; gap: 7px; width: 100%; min-height: 65px; padding: 5px 6px; border: 0; border-radius: 0; border-bottom: 1px solid #396275; text-align: left; background: linear-gradient(90deg, #0b2638, #11364a); box-shadow: none; cursor: pointer; }
.building-card:nth-child(even) { background: linear-gradient(90deg, #102c3c, #17445a); }
.building-card.selected { background: linear-gradient(90deg, #17465c, #1b5368); box-shadow: inset 4px 0 var(--cyan); }
.building-card.locked { filter: saturate(.2); color: #76909a; }
.building-card.locked .card-icon { opacity: .28; }
.card-main { display: grid; grid-template-columns: 44px minmax(0,1fr) 4ch; align-items: center; gap: 7px; min-width: 0; }
.card-icon { width: 44px; height: 44px; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 2px var(--sprite-glow, #bdefff)) drop-shadow(2px 2px #000); }
.card-icon.hardware { background-image: url("../assets/hardware-atlas.png"); background-size: 700% 200%; }
.card-icon.energy { background-image: url("../assets/energy-atlas.png"); background-size: 700% 200%; }
.card-icon.ai { background-image: url("../assets/ai-atlas.png"); background-size: 500% 200%; }
.card-copy { min-width: 0; }
.card-copy b { display: block; overflow-wrap: anywhere; line-height: 1.12; font-size: .76rem; }
.card-copy small { display: block; color: #9bc0ca; font-size: .71rem; line-height: 1.1; overflow-wrap: anywhere; }
.card-copy small + small { margin-top: 2px; color: #d5b66a; }
.card-count { width: 4ch; color: #f6fcff; font: 900 clamp(1.05rem, 1.4vw, 1.42rem)/1 var(--pixel); text-align: center; text-shadow: 0 2px #000; letter-spacing: -.08em; }
.card-buy { min-width: 0; padding: 5px 2px; color: #02120a; background: linear-gradient(#46ed97, #0b9b59); border-color: #74ffb4; font: 800 .64rem/1.1 var(--pixel); white-space: nowrap; overflow-x: auto; scrollbar-width: thin; text-align: center; }
.card-buy.sell { color: #ffe9be; background: linear-gradient(#8b5c23, #5d3515); border-color: var(--amber); }
.card-buy:disabled { opacity: 1; color: #7b8c92; border-color: #4c5f66; background: linear-gradient(#344750, #1e2d34); box-shadow: inset 0 1px rgba(255,255,255,.05); }
.building-details { min-height: 0; overflow-y: auto; border-top: 2px solid #315667; background: #071824; padding: 8px; }
.detail-empty { height: 100%; display: grid; place-items: center; align-content: center; text-align: center; color: #608290; }
.detail-empty > span { font-size: 2rem; }
.detail-empty p { max-width: 250px; font-size: .75rem; }
.upgrade-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 7px; }
.upgrade-panel-head h3 { margin: 0; color: var(--cyan); font: 800 .72rem var(--pixel); text-transform: uppercase; }
.upgrade { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: center; padding: 5px; margin-bottom: 4px; border: 1px solid #294d5e; background: #0d2635; }
.upgrade > div { min-width: 0; }
.upgrade.locked { opacity: .45; }
.upgrade b { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; }
.upgrade b span { color: var(--amber); font: 700 .68rem var(--pixel); white-space: nowrap; }
.upgrade small { display: block; color: #91adb7; font-size: .75rem; overflow-wrap: anywhere; }
.upgrade button { min-width: 80px; padding: 4px; font-size: .75rem; }
.power-toggle { min-height: 27px; padding: 3px 7px; font-size: .75rem; }
.power-toggle.off { color: #ff9ea6; border-color: var(--red); }

.mobile-nav { display: none; }
.blue-cursor { position: fixed; z-index: 60; left: 50%; top: 50%; color: #53ceff; font-size: 2.1rem; transform: translate(var(--cursor-idle-x, 0px), var(--cursor-idle-y, 0px)) rotate(-35deg); filter: drop-shadow(0 0 6px #1e9fff); pointer-events: none; opacity: 0; transition: left .55s cubic-bezier(.25,.8,.25,1), top .55s cubic-bezier(.25,.8,.25,1), transform .6s ease, opacity .22s; }
.blue-cursor.visible { opacity: 1; }
.toast-stack { position: fixed; z-index: 80; left: 50%; top: 95px; transform: translateX(-50%); display: grid; gap: 6px; width: min(500px, calc(100% - 24px)); pointer-events: none; }
.toast { padding: 10px 14px; color: #eafff3; border: 1px solid #49d990; background: rgba(3,29,30,.96); box-shadow: 0 4px 22px #000; text-align: center; font-size: .82rem; animation: toast-in .25s ease-out, toast-out .3s ease-in 3.7s forwards; }
.phase-announcement { position: absolute; z-index: 12; top: 66px; left: 50%; width: min(560px, calc(100% - 24px)); display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 12px; padding: 12px 15px; border: 2px solid var(--cyan); background: linear-gradient(100deg, rgba(10,43,58,.97), rgba(11,29,45,.97)); box-shadow: 0 10px 35px rgba(0,0,0,.55), inset 0 0 22px rgba(76,221,255,.08); transform: translate(-50%, -12px); opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; }
.visual-stage { position: relative; }
.phase-announcement.visible { opacity: 1; transform: translate(-50%, 0); }
.phase-announcement.leaving { opacity: 0; transform: translate(-50%, -8px); }
.phase-announcement > span { display: grid; place-items: center; width: 46px; height: 46px; color: var(--green); border: 1px solid #3e7d90; background: #071b27; font: 900 1.8rem var(--pixel); text-shadow: 0 0 12px currentColor; }
.phase-announcement b { color: #fff; font: 900 .86rem var(--pixel); }
.phase-announcement p { margin: 4px 0 0; color: #b7d6de; font-size: .82rem; }
.building-tooltip { position: fixed; z-index: 120; width: min(350px, calc(100vw - 20px)); padding: 12px 14px; border: 2px solid #64d9ef; background: linear-gradient(145deg, rgba(8,35,50,.98), rgba(10,22,37,.98)); box-shadow: 0 12px 40px #000, inset 0 0 18px rgba(64,221,250,.08); pointer-events: none; }
.building-tooltip b { display: block; color: #fff; font: 900 .82rem var(--pixel); }
.building-tooltip p { margin: 7px 0; color: #c4dce2; font-size: .78rem; }
.building-tooltip small { display: block; padding-top: 7px; border-top: 1px solid #315969; color: var(--amber); font-size: .72rem; line-height: 1.4; }

dialog { color: var(--ink); }
.modal { width: min(620px, calc(100% - 24px)); max-height: min(88vh, 820px); overflow: auto; border: 2px solid #4f7d8d; border-radius: 3px; padding: 18px; background: #071927; box-shadow: inset 0 0 0 2px #02090f, inset 0 0 0 3px #315f71, 0 20px 80px #000; }
.modal::backdrop { background: rgba(0,5,10,.78); backdrop-filter: blur(2px); }
.wide-modal { width: min(1180px, calc(100% - 24px)); }
.modal > header { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #315566; }
.modal h2 { margin: 0; color: #f1fbfc; font: 900 clamp(1rem, 2vw, 1.35rem) var(--pixel); }
.modal > header > button { min-width: 38px; padding: 3px; font-size: 1.4rem; }
.narrative-modal { text-align: center; }
.modal-icon { display: block; margin: 0 auto 10px; color: var(--green); font-size: 3rem; text-shadow: 0 0 18px rgba(66,245,158,.55); }
.narrative-modal p { color: #b8d1d8; font-size: 1rem; }
.narrative-modal .primary { min-width: 180px; }
.tech-tree, .automation-tree { position: relative; overflow: auto; padding-top: 10px; }
.tree-legend { display: flex; gap: 18px; margin: 4px 0 8px; padding: 7px 10px; color: #b6ccd5; border: 1px solid #2c5465; background: #091e2b; font-size: .72rem; }
.tree-legend span:first-child { color: var(--green); }
.tree-legend span:nth-child(2) { color: var(--cyan); }
.tree-map { position: relative; width: 1110px; margin: auto; border: 1px solid #284e5c; background: radial-gradient(circle at 50% 0, rgba(45,153,96,.15), transparent 48%), linear-gradient(90deg, rgba(87,182,170,.035) 1px, transparent 1px) 0 0 / 35px 35px, linear-gradient(rgba(87,182,170,.035) 1px, transparent 1px) 0 0 / 35px 35px, #071824; }
.tree-map.automation-map { background: radial-gradient(circle at 50% 0, rgba(50,122,220,.23), transparent 50%), linear-gradient(90deg, rgba(89,151,255,.045) 1px, transparent 1px) 0 0 / 35px 35px, linear-gradient(rgba(89,151,255,.045) 1px, transparent 1px) 0 0 / 35px 35px, #071525; }
.tree-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tree-wire { fill: none; stroke: var(--wire); stroke-width: 3.2; opacity: .57; stroke-linejoin: bevel; stroke-linecap: square; }
.tree-wire.lit { opacity: .96; filter: drop-shadow(0 0 5px var(--wire)); }
.tree-wire-port { fill: var(--wire); stroke: #071824; stroke-width: 2; }
.tree-node { --wire: #73e993; position: absolute; z-index: 2; display: flex; flex-direction: column; width: 180px; height: 190px; gap: 4px; padding: 8px; border: 2px solid var(--wire); background: linear-gradient(150deg, #0c2e35, #071923 75%); box-shadow: 0 0 0 3px #071824, 0 0 13px color-mix(in srgb, var(--wire), transparent 65%), inset 0 0 16px color-mix(in srgb, var(--wire), transparent 89%); }
.tree-node::before { content: none; }
.tree-node.blue, .tree-wire.blue { --wire: #54caff; }
.tree-node.green, .tree-wire.green { --wire: #68df85; }
.tree-node.amber, .tree-wire.amber { --wire: #ffbd55; }
.tree-node.teal, .tree-wire.teal { --wire: #4fd9df; }
.tree-node.violet, .tree-wire.violet { --wire: #9e9bff; }
.tree-port.blue { fill: #54caff; } .tree-port.green { fill: #68df85; } .tree-port.amber { fill: #ffbd55; } .tree-port.teal { fill: #4fd9df; } .tree-port.violet { fill: #9e9bff; }
.tree-wire-port.blue { --wire: #54caff; }.tree-wire-port.green { --wire: #68df85; }.tree-wire-port.amber { --wire: #ffbd55; }.tree-wire-port.teal { --wire: #4fd9df; }.tree-wire-port.violet { --wire: #9e9bff; }
.tree-node.locked { border-color: #607989; opacity: .76; box-shadow: 0 0 0 3px #071824; }
.tree-node.owned { background: linear-gradient(150deg, color-mix(in srgb, var(--wire), #061923 83%), #071923 78%); }
.tree-node-top { display: flex; justify-content: space-between; align-items: center; gap: 5px; }
.tree-node-icon { color: var(--wire); font: 900 1.35rem/1 var(--pixel); text-shadow: 0 0 8px var(--wire); }
.tree-node-status { color: var(--wire); font: 700 .58rem var(--pixel); text-align: right; }
.tree-node h4 { margin: 0; color: #f1faff; font: 900 .71rem/1.13 var(--pixel); overflow-wrap: anywhere; }
.tree-node p { flex: 1; min-height: 0; margin: 0; color: #b7d0d8; font-size: .68rem; line-height: 1.17; overflow-y: auto; scrollbar-width: thin; }
.tree-node small { display: none; }
.tree-node button { width: 100%; min-height: 26px; padding: 2px 4px; font-size: .66rem; overflow-wrap: anywhere; }
.automation-switch { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 12px 0; }
.automation-switch p { margin: 0; color: #8baab6; font-size: .8rem; }
.toggle-button.on { color: #03140c; background: linear-gradient(#4cf8a5,#11a663); border-color: #8effc3; font-weight: 900; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 12px; }
.stat-grid > div { padding: 10px; border: 1px solid #315667; background: #0b2533; }
.stat-grid small { display: block; color: #8ca9b4; }
.stat-grid strong { display: block; margin-top: 3px; color: var(--green); font-family: var(--pixel); overflow-wrap: anywhere; }
.option-list { display: grid; gap: 10px; padding-top: 14px; }
.option-list label { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.file-button { border: 1px solid #3f6e80; border-radius: 3px; background: #0b2637; padding: 9px 12px; cursor: pointer; }
.file-button input { display: none; }
.achievement-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; padding-top: 14px; }
.achievement { min-height: 100px; padding: 8px; border: 1px solid #284a5b; background: #091e2b; text-align: center; opacity: .35; }
.achievement.unlocked { opacity: 1; border-color: var(--amber); box-shadow: inset 0 0 20px rgba(255,196,72,.08); }
.achievement span { display: block; font-size: 1.4rem; }
.achievement b { display: block; margin-top: 5px; font: 700 .75rem var(--pixel); }
.achievement small { color: #89a6b0; font-size: .75rem; }
.game-info { padding: 14px 0 4px; }
.info-lead { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; padding: 12px; border: 1px solid #3c6d7d; background: linear-gradient(110deg, #0f3d4b, #111b35); }
.info-lead > span { color: var(--green); font-size: 2.5rem; text-align: center; text-shadow: 0 0 16px currentColor; }
.info-lead h3 { margin: 0 0 5px; color: #fff; font: 900 .9rem var(--pixel); }
.info-lead img { width: 54px; height: 54px; object-fit: contain; image-rendering: pixelated; }
.info-lead p + p { margin-top: 8px; }
.info-lead a { color: #ffe4a0; }
.info-lead p { margin: 0; color: #b8d2da; font-size: .78rem; line-height: 1.5; }
.section-title { margin-top: 18px; padding-bottom: 7px; border-bottom: 1px solid #315667; }
.section-title h3 { margin: 3px 0 0; font: 900 .92rem var(--pixel); }
.encyclopedia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 14px; }
.encyclopedia-group { grid-column: 1 / -1; border: 1px solid #315667; background: #081c29; }
.encyclopedia-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 9px; }
.encyclopedia-group summary { cursor: pointer; list-style: none; }
.encyclopedia-group summary::-webkit-details-marker { display: none; }
.encyclopedia-group summary::after { content: "+"; margin-left: auto; color: #73e993; }
.encyclopedia-group[open] summary::after { content: "−"; }
.encyclopedia-group summary small { color: #9dc0c7; font: 500 .68rem var(--ui); }
.encyclopedia-group-title { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 7px 9px; color: #fff; border-left: 4px solid var(--cyan); background: linear-gradient(90deg, #16475a, transparent); font: 900 .82rem var(--pixel); }
.encyclopedia-group-title span { color: var(--green); font-size: 1.1rem; }
.encyclopedia-card { display: grid; grid-template-columns: 52px 1fr; gap: 8px; min-height: 124px; padding: 8px; border: 1px solid #315667; background: #0a2230; }
.encyclopedia-card.locked { filter: grayscale(1); opacity: .35; }
.encyclopedia-card h3 { margin: 0; font: 800 .75rem var(--pixel); }
.encyclopedia-card p { margin: 4px 0; color: #91adb7; font-size: .75rem; }
.encyclopedia-card p.history { color: #c4d6db; font-size: .7rem; line-height: 1.4; }
.encyclopedia-card small { color: var(--amber); font-size: .75rem; }
@keyframes reveal-flash { 0% { box-shadow: inset 0 0 0 2px #fff, 0 0 22px var(--cyan); filter: brightness(2); } 100% { box-shadow: none; filter: brightness(1); } }
.conclusion-modal { width: min(780px, calc(100% - 24px)); text-align: center; border-color: var(--violet); }
.conclusion-modal h2 { margin: 14px 0 18px; color: #fff; font-size: clamp(1.2rem, 3vw, 2rem); }
.conclusion-modal p { color: #aec6cf; line-height: 1.55; }
.credits-modal { text-align: center; padding: 45px 20px; }
.credits-modal h2 { margin: 15px 0 5px; font-size: 2rem; }
.credits-modal p { color: var(--green); font: 800 1rem var(--pixel); }
.credits-modal small { display: block; color: #7f9ca8; margin-bottom: 25px; }

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes idle { to { transform: translateY(-2px); } }
@keyframes energy-warning { to { box-shadow: inset 0 0 20px rgba(255,191,54,.18), 0 0 10px rgba(255,191,54,.16); } }
@keyframes burst { 0% { opacity: 1; transform: translateY(0) scale(.7); } 100% { opacity: 0; transform: translateY(-65px) scale(1.25); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-12px); } }

@media (min-width: 901px) and (max-height: 780px) {
  .game-shell { grid-template-rows: 58px 78px minmax(0,1fr); min-height: 640px; }
  .topbar { min-height: 58px; }
  .resource-ribbon > div { padding-top: 6px; padding-bottom: 6px; }
  .quick-stats { padding: 7px 9px 5px; }
  dl > div { padding: 1px 0; }
  .mini-actions { margin-bottom: 5px; }
  .mini-actions button { min-height: 29px; padding: 3px; font-size: .68rem; }
  .left-rail { grid-template-rows: auto minmax(185px, 1fr) auto; }
  .compute-button { width: clamp(112px, 18vh, 145px); }
  .click-zone p { margin-bottom: 8px; }
  .click-zone > strong { margin-top: 8px; }
  .building-lane { min-height: calc(var(--field-height, 112px) + 31px); }
  .market { grid-template-rows: auto minmax(140px, 1fr) minmax(140px, 35%); }
}

@media (max-width: 1180px) {
  .game-shell { grid-template-rows: 64px 82px minmax(0,1fr); }
  .topbar { grid-template-columns: 250px minmax(0,1fr) auto; }
  .brand { padding: 6px 10px; }
  .brand small, .utility-tabs span { display: none; }
  .resource-ribbon { grid-template-columns: minmax(0,17.5%) minmax(0,1fr) minmax(0,12.5%); }
  .resource-ribbon:has(.conversion-panel[hidden]) { grid-template-columns: minmax(0,17.5%) minmax(0,1fr); }
  .play-grid { grid-template-columns: 285px minmax(0,1fr) 320px; }
  .achievement-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .game-shell { min-height: 100dvh; height: auto; grid-template-rows: 60px auto minmax(0,1fr) 58px; padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .topbar { grid-template-columns: 190px 1fr auto; position: sticky; top: 0; z-index: 20; }
  .brand strong { font-size: .9rem; }
  .brand-chip { width: 34px; height: 34px; }
  .system-tabs button { min-width: 45px; padding: 5px; }
  .system-tabs button b { display: none; }
  .utility-tabs button:not(:last-child) { display: none; }
  .resource-ribbon { grid-template-columns: 1fr; max-height: none; }
  .resource-ribbon:has(.conversion-panel[hidden]) { grid-template-columns: 1fr; }
  .allocation-panel, .conversion-panel { min-height: 52px; }
  .allocation-panel { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 1px 6px; }
  .allocation-panel .eyebrow { grid-column: 1 / -1; }
  .allocation-panel .meter-row { margin-top: 0; }
  .resources { min-height: 65px; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)); }
  .resource { padding: 4px; }
  .resource strong { font-size: .78rem; }
  .play-grid { display: block; min-height: 620px; }
  .left-rail, .visual-stage, .market { display: none; min-height: calc(100dvh - 195px); }
  .left-rail.mobile-active { display: grid; }
  .visual-stage.mobile-active { display: grid; grid-template-rows: minmax(520px,1fr); }
  .market.mobile-active { display: grid; min-height: calc(100dvh - 195px); }
  .mobile-nav { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; z-index: 30; inset: auto 5px 5px; padding: 5px; padding-bottom: calc(5px + env(safe-area-inset-bottom)); }
  .mobile-nav button { border-radius: 0; }
  .mobile-nav button.active { color: #03130b; background: var(--green); }
  .compute-button { width: min(55vw, 220px); }
  .achievement-grid { grid-template-columns: repeat(3, 1fr); }
  .encyclopedia-grid { grid-template-columns: repeat(2, 1fr); }
  .encyclopedia-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phase-announcement { top: 65px; }
}

@media (max-width: 560px) {
  .game-shell { grid-template-rows: 54px auto minmax(0,1fr); gap: 3px; padding: 3px 3px 70px; }
  .topbar { grid-template-columns: 150px 1fr 42px; }
  .brand { gap: 5px; }
  .brand strong { font-size: .7rem; letter-spacing: -.07em; }
  .brand-chip { width: 28px; height: 28px; }
  .system-tabs { gap: 2px; padding: 3px; }
  .system-tabs button { flex-basis: 36px; min-width: 36px; }
  .utility-tabs { padding: 3px; }
  .resource-ribbon { min-height: 60px; }
  .resources { min-height: 58px; gap: 0; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: minmax(44px, auto); }
  .resource { min-width: 0; }
  .resource small { font-size: .55rem; }
  .market-controls { grid-template-columns: 1fr; }
  .building-card { grid-template-columns: minmax(0,1fr) clamp(80px, 28vw, 112px); gap: 5px; }
  .card-main { grid-template-columns: 43px minmax(0,1fr) 3.5ch; gap: 5px; }
  .card-count { width: 3.5ch; font-size: 1rem; }
  .card-buy { width: 100%; min-width: 0; }
  .achievement-grid { grid-template-columns: repeat(2, 1fr); }
  .encyclopedia-grid { grid-template-columns: 1fr; }
  .encyclopedia-group-grid { grid-template-columns: 1fr; }
  .info-lead { grid-template-columns: 42px 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .modal { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}