:root {
  color-scheme: dark;
  --night: #040b14;
  --sky: #071829;
  --panel: rgba(5, 16, 29, .92);
  --panel-solid: #091827;
  --line: #164666;
  --line-hot: #2a7195;
  --white: #e7f5ff;
  --muted: #8daabe;
  --cyan: #64f4e1;
  --blue: #68acff;
  --green: #9ff254;
  --gold: #ffc95b;
  --orange: #ff9d54;
  --pink: #e887ff;
  --red: #ff6877;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--night); }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--white); font-family: var(--sans); background: var(--night); }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.game-shell { position: relative; min-height: 100vh; isolation: isolate; padding: 14px 15px 10px; background: #050e1b; overflow: hidden; }
.game-shell::before { content: ""; position: fixed; z-index: -4; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 50% 15%, rgba(33, 91, 129, .2), transparent 38%), linear-gradient(180deg, #07182a 0, #050d18 58%, #071322 100%); }
.game-shell::after { content: ""; position: fixed; z-index: -3; inset: 0; pointer-events: none; opacity: .34; background-image: radial-gradient(circle, rgba(102, 198, 255, .8) 0 1px, transparent 1.5px); background-size: 113px 137px; background-position: 25px 18px; }
.ambient { position: fixed; z-index: -2; width: 390px; height: 390px; border-radius: 50%; pointer-events: none; filter: blur(46px); opacity: .16; }.ambient-one { top: 6%; left: 31%; background: #216cbb; }.ambient-two { right: -90px; bottom: 8%; background: #8e2aa8; }
.panel-glass { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 36px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(118, 215, 255, .08); backdrop-filter: blur(10px); }
.topbar { position: relative; z-index: 5; display: grid; grid-template-columns: 230px minmax(260px, 1fr) 260px; align-items: center; gap: 30px; width: min(1500px, 100%); margin: 0 auto; padding: 0 2px 13px; }
.brand-lockup { display: flex; align-items: center; gap: 11px; text-transform: uppercase; }.brand-lockup > span:last-child { display: grid; gap: 2px; }.brand-lockup strong { color: var(--cyan); font: 700 19px var(--mono); letter-spacing: -.04em; text-shadow: 0 0 16px rgba(100, 244, 225, .45); }.brand-lockup small { color: var(--muted); font: 8px var(--mono); letter-spacing: .18em; }.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; color: var(--cyan); border: 1px solid var(--cyan); border-radius: 6px; font-size: 20px; box-shadow: 0 0 16px rgba(100, 244, 225, .22); }
.repo-search-wrap { position: relative; display: flex; align-items: center; }.repo-search-wrap label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }.repo-search-wrap input { width: 100%; height: 34px; padding: 0 44px 0 16px; color: var(--white); border: 1px solid #355675; border-radius: 8px; background: rgba(6, 14, 25, .72); box-shadow: inset 0 0 12px rgba(31, 120, 191, .1); }.repo-search-wrap input::placeholder { color: #7c9ab5; }.repo-search-wrap kbd { position: absolute; right: 7px; color: var(--cyan); font: 14px var(--mono); pointer-events: none; }.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 11px; }.simulated-pill { display: flex; align-items: center; gap: 7px; color: var(--green); font: 8px var(--mono); letter-spacing: .06em; }.simulated-pill i, .live-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }.icon-button { width: 29px; height: 29px; padding: 0; border: 1px solid var(--line-hot); border-radius: 6px; background: rgba(9, 27, 45, .8); color: var(--cyan); font-size: 17px; line-height: 1; }.icon-button:hover { border-color: var(--cyan); background: rgba(27, 79, 102, .7); }

.left-rail { position: absolute; z-index: 4; top: 72px; left: 15px; width: 254px; padding: 17px 18px; }.panel-title { display: grid; gap: 1px; padding-bottom: 12px; border-bottom: 1px solid rgba(61, 141, 177, .35); }.section-kicker { color: var(--cyan); font: 10px var(--mono); letter-spacing: .14em; }.panel-title h1 { margin: 2px 0 0; color: var(--white); font: 700 19px var(--mono); letter-spacing: .02em; }.panel-title i { width: 56px; height: 2px; margin-top: 9px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }.welcome-copy { margin: 14px 0 0; color: #d2e3ed; font-size: 14px; line-height: 1.45; }.welcome-copy.muted { margin-top: 6px; color: var(--muted); font-size: 12px; }.welcome-copy strong { color: var(--cyan); }.rail-divider { height: 1px; margin: 16px 0 13px; background: var(--line); }.component-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }.component-heading > span { color: var(--cyan); font: 12px var(--mono); letter-spacing: .05em; }.component-heading small { color: #6d8da7; font: 8px var(--mono); }.component-list { display: grid; gap: 9px; margin: 13px 0 0; padding: 0; list-style: none; }.component-list li { display: flex; align-items: center; gap: 9px; color: #bfd3df; font-size: 12px; }.component-list li b { width: 20px; height: 20px; display: grid; place-items: center; color: var(--cyan); border: 1px solid #2e7798; border-radius: 5px; font-size: 13px; }.component-list strong { color: var(--white); }.how-it-works { margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--line); }.how-it-works ol { display: grid; gap: 5px; margin: 10px 0 0; padding-left: 21px; color: var(--muted); font: 10px/1.4 var(--mono); }

.world-stage { position: relative; min-height: 720px; width: min(1500px, 100%); margin: 0 auto; padding: 9px 287px 0 274px; }.stage-heading { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; padding: 5px 18px 10px; }.stage-heading h2 { margin: 4px 0 0; color: var(--white); font: 700 21px var(--mono); letter-spacing: -.03em; text-shadow: 0 0 19px rgba(148, 218, 255, .28); }.stage-heading h2 b { color: var(--cyan); font-weight: 500; }.stage-state { display: flex; gap: 10px; color: var(--green); font: 9px var(--mono); }.stage-state span + span { padding-left: 10px; border-left: 1px solid var(--line); color: var(--muted); }.world-viewport { position: relative; height: 690px; overflow: hidden; border: 1px solid #195174; border-radius: 13px; background: #071725; box-shadow: inset 0 0 50px rgba(5, 43, 69, .55), 0 20px 50px rgba(0, 0, 0, .34); }.world-viewport::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; border: 1px solid rgba(117, 212, 255, .08); border-radius: 12px; box-shadow: inset 0 0 35px rgba(0, 0, 0, .62); }
.world-canvas { position: absolute; width: 1600px; height: 960px; transform-origin: 0 0; transition: transform .25s ease; }.world-ground { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #0b2435 0 40%, #102f3b 40% 46%, #132c31 46% 100%); }.world-ground::before { content: ""; position: absolute; left: -8%; right: -8%; bottom: -25%; height: 64%; transform: perspective(540px) rotateX(57deg); transform-origin: bottom; background-image: linear-gradient(rgba(49, 129, 134, .25) 1px, transparent 1px), linear-gradient(90deg, rgba(49, 129, 134, .22) 1px, transparent 1px); background-size: 42px 42px; opacity: .58; }.world-ground::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 15% 22%, rgba(155, 235, 255, .8) 0 1px, transparent 1.5px); background-size: 87px 73px; opacity: .55; }.ground-grid { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 49.7%, rgba(36, 117, 126, .26) 50%, transparent 50.3%); opacity: .28; }.distant-skyline { position: absolute; z-index: 0; top: 74px; left: 0; right: 0; height: 220px; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 65px; opacity: .8; }.distant-skyline i { display: block; width: 43px; height: 120px; background: #0d2d42; border: 1px solid #1d6383; box-shadow: 9px -24px 0 -8px #0d2c42, inset 9px 16px 0 -8px rgba(114, 218, 255, .28); }.distant-skyline i:nth-child(2n) { height: 172px; width: 66px; }.distant-skyline i:nth-child(3n) { height: 92px; background: #112949; }.moon-orb { position: absolute; z-index: 0; top: 36px; right: 210px; width: 56px; height: 56px; border-radius: 50%; background: #98cbdf; box-shadow: 0 0 36px rgba(100, 216, 255, .45); opacity: .8; }.moon-orb::after { content: ""; position: absolute; inset: 9px 13px 13px 7px; border-radius: 50%; box-shadow: 20px 2px 0 -14px #5a8caa, 10px 27px 0 -13px #6598ac; }
.road { position: absolute; z-index: 1; background: #183e45; border: 2px solid #3b6c67; box-shadow: inset 0 0 0 3px rgba(5, 25, 35, .35), 0 0 22px rgba(32, 153, 157, .12); }.road span { position: absolute; color: rgba(116, 219, 211, .5); font: 10px var(--mono); letter-spacing: .2em; }.road-main { left: -120px; top: 531px; width: 1850px; height: 111px; transform: rotate(-2deg); }.road-main span { top: 47px; left: 215px; }.road-cross { left: 657px; top: 232px; width: 122px; height: 610px; transform: rotate(16deg); }.road-cross span { top: 300px; left: 27px; transform: rotate(-90deg); }.road-branch { left: 975px; top: 406px; width: 700px; height: 73px; transform: rotate(26deg); border-color: #6b5687; background: #2b3145; }.road-branch span { top: 27px; left: 30px; color: rgba(204, 156, 255, .65); }.plaza { position: absolute; z-index: 2; left: 683px; top: 590px; width: 188px; height: 122px; border: 3px solid #a17d51; background: #4b4b3b; transform: rotate(45deg); box-shadow: 0 0 0 7px rgba(32, 68, 64, .7), inset 0 0 0 2px #c6a15f; }.plaza span { position: absolute; left: 45px; top: 48px; transform: rotate(-45deg); color: #f5d894; font: 11px var(--mono); white-space: nowrap; }

.world-building { position: absolute; z-index: 3; left: var(--building-x); top: var(--building-y); width: var(--building-w); height: var(--building-h); padding: 0; border: 1px solid color-mix(in srgb, var(--district-accent) 65%, #1e475b); border-radius: 5px; background: #102531; box-shadow: 8px 13px 0 rgba(4, 13, 19, .45), 0 0 24px color-mix(in srgb, var(--district-accent) 24%, transparent), inset 0 0 0 3px rgba(5, 17, 27, .62); transform: perspective(440px) rotateX(4deg); transition: transform .2s ease, filter .2s ease, border-color .2s ease; overflow: hidden; text-align: left; }.world-building:hover, .world-building.is-selected { z-index: 5; filter: brightness(1.24); transform: perspective(440px) rotateX(4deg) translateY(-5px); border-color: var(--district-accent); }.world-building.is-search-hidden { opacity: .16; filter: grayscale(1); }.building-cap { position: absolute; top: -22px; left: 13px; width: calc(100% - 26px); height: 24px; border: 1px solid var(--district-accent); background: #152f3a; transform: skewX(-23deg); box-shadow: inset 0 0 14px color-mix(in srgb, var(--district-accent) 33%, transparent); }.building-facade { position: absolute; inset: 32px 11px 31px; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 16px; gap: 9px 10px; padding: 9px; background: repeating-linear-gradient(90deg, rgba(53, 111, 116, .16) 0 22px, transparent 22px 40px), #17313a; border: 1px solid rgba(98, 166, 168, .55); }.building-window { height: 9px; background: var(--district-accent); opacity: calc(.25 + (var(--construction) / 130)); box-shadow: 0 0 7px var(--district-accent); animation: window-blink 4s infinite alternate; animation-delay: calc(var(--window-index) * -140ms); }.building-sign { position: absolute; z-index: 1; top: 7px; left: 9px; right: 9px; min-height: 23px; display: flex; align-items: center; gap: 6px; padding: 3px 7px; color: var(--white); background: rgba(7, 20, 29, .92); border-left: 3px solid var(--district-accent); font: 11px var(--mono); letter-spacing: .03em; }.building-sign b { color: var(--district-accent); font-size: 18px; }.building-status { position: absolute; bottom: 7px; left: 12px; color: var(--district-accent); font: 9px var(--mono); letter-spacing: .1em; }.building-floor { position: absolute; left: -8px; right: -8px; bottom: -13px; height: 18px; background: #081a25; border-top: 2px solid var(--district-accent); transform: skewX(-22deg); }.building-issues { transform: perspective(440px) rotateX(4deg) rotate(-1deg); }.building-prs { box-shadow: 8px 13px 0 rgba(4, 13, 19, .45), 0 0 30px rgba(232, 135, 255, .34); }.building-prs .building-sign { color: var(--pink); }.construction-crane { position: absolute; z-index: 2; width: 13px; height: 236px; border-left: 5px solid var(--gold); opacity: .75; }.construction-crane i { position: absolute; top: 22px; left: 0; width: 145px; height: 5px; background: var(--gold); }.construction-crane b { position: absolute; top: 26px; left: 118px; width: 2px; height: 130px; background: var(--gold); }.construction-crane em { position: absolute; top: 151px; left: 109px; width: 20px; height: 20px; border: 2px solid var(--orange); border-radius: 50%; animation: crane-pulse 2s infinite; }.crane-one { left: 480px; top: 115px; transform: rotate(-2deg); }.crane-two { right: 173px; top: 107px; transform: scale(.82) rotate(3deg); }
.agent-bot { position: absolute; z-index: 5; width: 24px; height: 31px; border: 2px solid var(--green); background: #182d33; box-shadow: 0 0 14px rgba(159, 242, 84, .48); animation: bot-walk 4s ease-in-out infinite; }.agent-bot::after { content: ""; position: absolute; left: 4px; right: 4px; top: 6px; height: 7px; background: var(--green); box-shadow: 0 0 7px var(--green); }.agent-bot i, .agent-bot b { position: absolute; bottom: -8px; width: 4px; height: 8px; background: var(--green); }.agent-bot i { left: 2px; }.agent-bot b { right: 2px; }.bot-a { left: 763px; top: 437px; }.bot-b { left: 1086px; top: 453px; animation-delay: -2s; border-color: var(--gold); }.bot-b::after { background: var(--gold); box-shadow: 0 0 7px var(--gold); }.bot-b i, .bot-b b { background: var(--gold); }.quest-marker { position: absolute; z-index: 6; left: 1006px; top: 552px; width: 43px; height: 43px; display: grid; place-items: center; color: var(--gold); border: 4px solid var(--gold); border-radius: 50%; font: bold 28px var(--mono); box-shadow: 0 0 16px rgba(255, 201, 91, .6); animation: quest-pulse 1.8s infinite; }.pr-gate { position: absolute; z-index: 4; left: 695px; top: 415px; width: 130px; height: 76px; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--pink); border: 3px solid var(--pink); border-radius: 5px; background: #2c173d; box-shadow: 0 0 23px rgba(232, 135, 255, .55), inset 0 0 16px rgba(232, 135, 255, .2); transform: perspective(240px) rotateX(8deg); }.pr-gate span { font: 9px var(--mono); }.pr-gate b { font-size: 11px; }.player-avatar { position: absolute; z-index: 8; width: 42px; height: 74px; transform: translate(-50%, -78%); transition: left .13s linear, top .13s linear; filter: drop-shadow(0 7px 3px rgba(0, 0, 0, .55)); }.avatar-shadow { position: absolute; left: 1px; bottom: -3px; width: 40px; height: 11px; border-radius: 50%; background: rgba(0, 0, 0, .48); }.avatar-legs { position: absolute; left: 9px; bottom: 5px; width: 24px; height: 28px; display: flex; gap: 3px; }.avatar-legs i { flex: 1; background: #152d4b; border: 2px solid #09192d; }.avatar-body { position: absolute; left: 7px; bottom: 25px; width: 29px; height: 29px; background: #171b24; border: 2px solid #060d19; }.avatar-body::after { content: "⌘"; position: absolute; inset: 2px; display: grid; place-items: center; color: var(--white); font-size: 17px; }.avatar-pack { position: absolute; z-index: -1; left: -7px; top: 2px; width: 11px; height: 22px; background: #3a2a20; border: 1px solid #9a6d38; }.avatar-head { position: absolute; left: 10px; top: 3px; width: 23px; height: 22px; background: #5f402d; border: 2px solid #09111c; border-radius: 3px 3px 8px 8px; }.avatar-head::before { content: ""; position: absolute; left: -2px; right: -2px; top: -3px; height: 9px; background: #171515; border-radius: 5px 5px 0 0; }.world-sign { position: absolute; z-index: 6; display: grid; gap: 2px; padding: 11px 15px; background: rgba(5, 20, 30, .91); border: 2px solid var(--cyan); box-shadow: 0 0 19px rgba(100, 244, 225, .22), inset 0 0 0 3px rgba(11, 56, 65, .7); transform: perspective(340px) rotateX(4deg); }.world-sign small { color: var(--green); font: 9px var(--mono); }.world-sign strong { color: var(--cyan); font: 17px var(--mono); letter-spacing: .06em; }.world-sign b { color: #bfe6ee; font: 13px var(--mono); }.world-sign em { color: var(--gold); font: 10px var(--mono); font-style: normal; }.repo-sign { left: 631px; top: 155px; width: 255px; transform: perspective(340px) rotateX(4deg) rotate(-1deg); }.build-sign { right: 88px; top: 201px; width: 260px; border-color: var(--green); }.build-sign strong { color: var(--green); }.build-sign b { color: var(--white); }

.nearby-prompt { position: absolute; z-index: 5; left: 300px; bottom: 65px; display: grid; gap: 2px; min-width: 192px; padding: 9px 13px; border-left: 2px solid var(--cyan); background: rgba(5, 19, 30, .84); }.nearby-prompt span, .nearby-prompt small { color: var(--muted); font: 9px var(--mono); letter-spacing: .1em; }.nearby-prompt strong { color: var(--cyan); font: 13px var(--mono); }.nearby-prompt.is-ready { border-color: var(--gold); }.nearby-prompt.is-ready strong { color: var(--gold); }.city-reticle { position: absolute; z-index: 4; left: 50%; top: 53%; width: 45px; height: 45px; transform: translate(-50%, -50%); pointer-events: none; opacity: .35; }.city-reticle i, .city-reticle b { position: absolute; display: block; background: var(--cyan); }.city-reticle i { left: 21px; top: 0; width: 1px; height: 45px; }.city-reticle b { left: 0; top: 21px; width: 45px; height: 1px; }.movement-help { position: absolute; z-index: 5; right: 306px; bottom: 63px; display: flex; align-items: center; gap: 5px; color: var(--muted); font: 9px var(--mono); }.movement-help kbd, .terminal-form input, .repo-search-wrap kbd { font-family: var(--mono); }.movement-help kbd { padding: 3px 5px; border: 1px solid #38556a; border-radius: 4px; color: var(--white); background: #112334; }.movement-help span { margin-right: 6px; }
.feedback-line { position: absolute; z-index: 5; left: 300px; right: 306px; bottom: 14px; display: flex; align-items: center; gap: 8px; min-height: 29px; padding: 0 11px; border-top: 1px solid #1d4d64; background: rgba(5, 17, 27, .82); color: var(--muted); font: 10px var(--mono); }.feedback-line i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }.feedback-line time { margin-left: auto; color: var(--cyan); }

.right-rail { position: absolute; z-index: 4; top: 72px; right: 15px; width: 276px; display: grid; gap: 10px; }.map-panel, .agents-panel, .event-panel { padding: 12px; }.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 9px; color: var(--cyan); border-bottom: 1px solid rgba(61, 141, 177, .35); font: 11px var(--mono); letter-spacing: .08em; }.panel-heading > span { display: flex; align-items: center; gap: 7px; }.panel-heading small { color: var(--muted); font: 8px var(--mono); }.count-badge { display: inline-grid; place-items: center; width: 21px; height: 17px; color: var(--green); border: 1px solid var(--green); border-radius: 4px; font: 9px var(--mono); }.minimap-viewport { position: relative; height: 153px; margin: 11px 0 9px; overflow: hidden; border: 1px solid #22536e; border-radius: 6px; background: #1c3b2b; }.minimap-grid { position: absolute; inset: 0; background-color: #173b2e; background-image: linear-gradient(25deg, transparent 40%, rgba(19, 75, 63, .75) 41% 47%, transparent 48%), repeating-linear-gradient(90deg, rgba(91, 169, 90, .23) 0 3px, transparent 3px 17px), repeating-linear-gradient(0deg, rgba(70, 131, 71, .2) 0 3px, transparent 3px 21px); }.map-road { position: absolute; background: #7a7251; opacity: .8; }.map-road-a { left: -12%; top: 52%; width: 125%; height: 7px; transform: rotate(-15deg); }.map-road-b { left: 42%; top: -12%; width: 8px; height: 125%; transform: rotate(24deg); }.minimap-district { position: absolute; width: 13px; height: 13px; padding: 0; border: 2px solid #081a24; transform: translate(-50%, -50%); box-shadow: 0 0 5px currentColor; }.minimap-district:hover { transform: translate(-50%, -50%) scale(1.4); }.map-player { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-right: 7px solid transparent; border-bottom: 16px solid white; border-left: 7px solid transparent; filter: drop-shadow(0 0 4px var(--cyan)); }.map-caption { display: flex; justify-content: space-between; color: var(--muted); font: 9px var(--mono); }.map-caption b { color: var(--cyan); }.map-legend { display: flex; justify-content: space-between; color: var(--muted); font: 8px var(--mono); }.map-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; }.legend-player { background: white; }.legend-building { background: var(--green); }.legend-road { background: #bca46b; }.agent-list { display: grid; gap: 10px; margin: 12px 0; padding: 0; list-style: none; }.agent-row { display: grid; grid-template-columns: 27px 1fr auto; gap: 7px; align-items: center; min-width: 0; }.agent-avatar { width: 26px; height: 26px; display: grid; place-items: center; color: var(--agent-color); border: 1px solid var(--agent-color); border-radius: 5px; font: 9px var(--mono); }.agent-copy { display: grid; gap: 1px; min-width: 0; }.agent-copy strong { overflow: hidden; color: var(--white); font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; }.agent-copy small { color: var(--muted); font: 8px var(--mono); }.agent-copy em { overflow: hidden; color: var(--agent-color); font: 8px var(--mono); font-style: normal; text-overflow: ellipsis; white-space: nowrap; }.progress-line { display: block; height: 3px; margin-top: 2px; background: #173040; }.progress-line b { display: block; height: 100%; background: var(--agent-color); box-shadow: 0 0 6px var(--agent-color); transition: width .4s ease; }.agent-state { color: var(--green); font: 8px var(--mono); }.swarm-flow { display: grid; justify-items: center; gap: 3px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font: 8px var(--mono); }.swarm-flow span:first-of-type { color: var(--cyan); }.swarm-flow i { color: var(--line-hot); font-style: normal; }.event-panel { max-height: 205px; overflow: hidden; }.event-feed { display: grid; gap: 7px; margin: 11px 0 0; padding: 0; overflow: auto; list-style: none; }.event-row { display: grid; grid-template-columns: 52px 8px 1fr; gap: 6px; align-items: start; color: var(--muted); font-size: 9px; }.event-row time { color: #668aa3; font: 8px var(--mono); }.event-row p { margin: 0; line-height: 1.3; }.event-dot { width: 6px; height: 6px; margin-top: 3px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }.event-repository-issue .event-dot, .event-repository-pull-request .event-dot { background: var(--orange); box-shadow: 0 0 7px var(--orange); }.event-build-started .event-dot, .event-deployment-started .event-dot { background: var(--gold); box-shadow: 0 0 7px var(--gold); }

.inspector-drawer { position: absolute; z-index: 7; top: 385px; right: 307px; width: 330px; min-height: 300px; padding: 15px; opacity: 0; pointer-events: none; transform: translateX(24px); transition: opacity .22s ease, transform .22s ease; }.inspector-drawer.is-open { opacity: 1; pointer-events: auto; transform: translateX(0); }.drawer-heading { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }.drawer-heading div { display: grid; gap: 3px; }.drawer-heading strong { color: var(--white); font: 13px var(--mono); }.inspector-content { min-height: 215px; padding: 14px 0 8px; }.inspect-header { display: grid; gap: 6px; }.inspect-header h2 { margin: 0; color: var(--white); font: 17px var(--mono); }.inspect-header p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }.district-metrics { display: flex; flex-wrap: wrap; gap: 5px 11px; margin-top: 5px; color: var(--cyan); font: 9px var(--mono); }.district-metrics span + span { color: var(--muted); }.inspector-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 10px; }.panel-action { padding: 7px 9px; border: 1px solid var(--line-hot); border-radius: 5px; background: #0c2435; color: var(--cyan); font: 9px var(--mono); }.panel-action:hover { border-color: var(--cyan); }.panel-action.primary { border-color: var(--cyan); background: rgba(43, 111, 117, .3); }.panel-action:disabled { cursor: not-allowed; opacity: .48; }.mini-file-list, .file-list, .commit-list, .issue-list, .pr-list { display: grid; gap: 5px; }.mini-file-list button, .file-row, .commit-row, .issue-row, .pr-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 7px; align-items: center; padding: 6px 7px; border: 1px solid transparent; background: rgba(11, 37, 51, .72); color: var(--muted); text-align: left; }.mini-file-list button:hover, .file-row:hover, .file-row.is-active, .commit-row:hover, .issue-row:hover, .pr-row:hover { border-color: var(--line-hot); color: var(--white); }.mini-file-list b, .file-row b { color: var(--cyan); }.file-row strong, .commit-row strong, .issue-row strong, .pr-row strong { display: block; overflow: hidden; color: var(--white); font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }.file-row small, .commit-row small, .issue-row small, .pr-row small { display: block; color: var(--muted); font-size: 9px; }.collection-heading { display: grid; gap: 4px; margin-bottom: 10px; }.collection-heading span { color: var(--cyan); font: 9px var(--mono); letter-spacing: .1em; }.collection-heading strong { color: var(--white); font: 14px var(--mono); }.collection-heading small { color: var(--muted); font-size: 10px; }.commit-row, .issue-row, .pr-row { grid-template-columns: 15px 1fr auto; }.commit-node, .issue-marker, .pr-marker { width: 9px; height: 9px; display: grid; place-items: center; color: var(--green); border: 1px solid var(--green); border-radius: 50%; font: 8px var(--mono); }.issue-marker { color: var(--orange); border-color: var(--orange); }.pr-marker { color: var(--pink); border-color: var(--pink); border-radius: 2px; }.commit-row em, .issue-row em, .pr-row em { color: var(--green); font: 8px var(--mono); font-style: normal; }.issue-row em { color: var(--orange); }.pr-row em { color: var(--pink); }.code-preview { max-height: 145px; overflow: auto; margin: 13px 0; padding: 11px; color: var(--green); border: 1px solid #244f52; background: #07151c; font: 10px/1.45 var(--mono); white-space: pre-wrap; }.build-stack { display: grid; gap: 9px; color: var(--muted); font: 10px var(--mono); }.build-stack > div:not(.pipeline-steps) { display: flex; justify-content: space-between; gap: 10px; }.build-stack b { color: var(--green); font: 10px var(--mono); }.status-running, .status-launching { color: var(--gold) !important; }.pipeline-steps { display: flex; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }.pipeline-steps i { flex: 1; padding: 5px 2px; border: 1px solid #27404c; color: #5e7a8a; font: 8px var(--mono); font-style: normal; text-align: center; }.pipeline-steps i.done { border-color: #3a764e; color: var(--green); }.pipeline-steps i.active { border-color: var(--cyan); color: var(--cyan); }
.drawer-tabs { display: flex; gap: 4px; padding-top: 9px; border-top: 1px solid var(--line); }.drawer-tabs button { flex: 1; padding: 5px 2px; border: 1px solid #234456; background: transparent; color: var(--muted); font: 8px var(--mono); }.drawer-tabs button:hover { color: var(--cyan); border-color: var(--cyan); }

.terminal-phone { position: fixed; z-index: 10; right: 22px; bottom: 91px; width: 300px; min-height: 405px; padding: 17px 12px 13px; border: 3px solid #2e3c48; border-radius: 27px; background: #060b10; box-shadow: 0 18px 50px rgba(0,0,0,.65), 0 0 0 4px rgba(1, 6, 10, .75), inset 0 0 22px rgba(96, 177, 211, .08); opacity: 0; pointer-events: none; transform: translateY(14px) rotate(1deg); transition: opacity .25s ease, transform .25s ease; }.terminal-phone.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) rotate(1deg); }.phone-speaker { position: absolute; top: 8px; left: 50%; width: 55px; height: 4px; transform: translateX(-50%); border-radius: 5px; background: #29343d; }.terminal-top { display: flex; justify-content: space-between; align-items: center; padding: 3px 4px 11px; color: #d3e6eb; font: 10px var(--mono); }.terminal-top .icon-button { width: 22px; height: 22px; }.terminal-screen { min-height: 344px; padding: 11px; border: 1px solid #213844; border-radius: 7px; background: #020608; }.terminal-header { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid #1c303b; }.terminal-header strong { color: var(--white); font: 13px var(--mono); }.terminal-header small { color: var(--muted); font: 8px var(--mono); }.terminal-output { height: 222px; overflow: auto; padding-top: 9px; color: #8bd35e; font: 9px/1.5 var(--mono); }.terminal-line.command { color: var(--cyan); }.terminal-form { display: flex; gap: 5px; align-items: center; padding: 8px 0; border-top: 1px solid #1c303b; color: var(--green); font: 10px var(--mono); }.terminal-form input { flex: 1; min-width: 0; padding: 3px; border: 0; outline: 0; background: transparent; color: var(--white); font: 10px var(--mono); }.terminal-form button { border: 0; background: transparent; color: var(--cyan); font-size: 17px; }.terminal-shortcuts { display: flex; flex-wrap: wrap; gap: 4px; }.terminal-shortcuts button { padding: 4px 5px; border: 1px solid #244655; border-radius: 3px; background: #091a25; color: var(--muted); font: 8px var(--mono); }.terminal-shortcuts button:hover { color: var(--cyan); border-color: var(--cyan); }.phone-home { width: 54px; height: 4px; margin: 11px auto 0; border-radius: 5px; background: #29343d; }
.toolbelt { position: absolute; z-index: 6; left: 50%; bottom: 61px; display: grid; grid-template-columns: repeat(8, 1fr); width: min(560px, calc(100% - 620px)); transform: translateX(-50%); overflow: hidden; }.tool-slot { min-width: 0; display: grid; place-items: center; gap: 2px; padding: 7px 4px 5px; border: 0; border-right: 1px solid #29495b; background: rgba(6, 18, 29, .94); color: var(--muted); }.tool-slot:last-child { border-right: 0; }.tool-slot:hover, .tool-slot.is-active { background: rgba(16, 57, 69, .96); color: var(--tool-color); box-shadow: inset 0 -2px 0 var(--tool-color); }.tool-slot b { color: var(--tool-color); font-size: 24px; line-height: 1; text-shadow: 0 0 9px var(--tool-color); }.tool-slot strong { overflow: hidden; max-width: 100%; color: var(--white); font: 8px var(--mono); text-align: center; text-overflow: ellipsis; white-space: nowrap; }.tool-slot small { color: var(--muted); font: 7px var(--mono); }.tool-key { position: absolute; margin: 0 0 -49px 0; color: #6a8ca3; font: 8px var(--mono); }
.software-shelf { position: relative; z-index: 8; width: min(1500px, 100%); margin: 8px auto 0; padding: 10px 14px 12px; border: 1px solid #17415b; border-radius: 10px; background: rgba(5, 17, 29, .92); }.shelf-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }.shelf-title span { color: var(--white); font: 700 13px var(--mono); letter-spacing: .04em; }.shelf-title small { color: var(--cyan); font: 8px var(--mono); }.object-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }.object-card { min-height: 105px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 7px 4px; border: 1px solid #1b4056; border-radius: 6px; background: #071521; }.object-card:hover { border-color: var(--cyan); background: #0d2635; transform: translateY(-2px); }.object-card strong { color: var(--white); font: 8px var(--mono); text-align: center; }.object-card small { color: var(--muted); font: 8px var(--mono); }.object-art { display: grid; place-items: center; width: 51px; height: 58px; color: var(--cyan); font-size: 42px; text-shadow: 0 0 13px currentColor; }.hammer-art { color: var(--orange); }.backpack-art { color: #ff7561; }.box-art { color: var(--blue); }.tablet-art { color: var(--pink); }.key-art { color: var(--gold); }.vault-art { color: #a9b1b7; }.rocket-art { color: var(--orange); }.touch-controls { display: none; }.disclaimer { position: relative; z-index: 7; display: flex; justify-content: space-between; width: min(1500px, 100%); margin: 9px auto 0; color: #617f94; font: 8px var(--mono); letter-spacing: .08em; }

@keyframes window-blink { 0%, 77% { opacity: .45; } 86% { opacity: 1; } 92%, 100% { opacity: .58; } }
@keyframes quest-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); box-shadow: 0 0 28px rgba(255, 201, 91, .88); } }
@keyframes crane-pulse { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes bot-walk { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(22px, -4px); } }

@media (max-width: 1240px) {
  .left-rail { width: 222px; }.right-rail { width: 245px; }.world-stage { padding-left: 235px; padding-right: 255px; }.world-viewport { height: 650px; }.toolbelt { width: min(520px, calc(100% - 500px)); }.inspector-drawer { right: 262px; }.feedback-line { left: 260px; right: 260px; }.movement-help { right: 260px; }.nearby-prompt { left: 260px; }
}

@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr minmax(230px, 1fr) auto; gap: 12px; }.left-rail { position: relative; top: auto; left: auto; width: min(100%, 650px); margin: 0 auto 10px; }.left-rail .how-it-works { display: none; }.world-stage { min-height: 600px; padding: 0; }.world-viewport { height: 650px; }.right-rail { position: relative; top: auto; right: auto; width: 100%; grid-template-columns: 1fr 1fr 1fr; margin: 10px auto 0; }.event-panel { max-height: 255px; }.inspector-drawer { position: fixed; top: auto; right: 15px; bottom: 160px; width: min(360px, calc(100% - 30px)); }.toolbelt { position: relative; left: auto; bottom: auto; width: min(640px, 100%); margin: 10px auto 0; transform: none; }.software-shelf { margin-top: 10px; }.feedback-line { left: 0; right: 0; bottom: 0; }.movement-help { right: 12px; bottom: 42px; }.nearby-prompt { left: 12px; bottom: 42px; }.disclaimer { margin-top: 8px; }.world-stage .stage-heading { padding-inline: 2px; }
}

@media (max-width: 680px) {
  .game-shell { padding: 10px 9px 9px; }.topbar { grid-template-columns: 1fr auto; }.repo-search-wrap { grid-column: 1 / -1; grid-row: 2; }.simulated-pill { display: none; }.brand-lockup strong { font-size: 17px; }.stage-heading { align-items: flex-start; flex-direction: column; gap: 6px; }.stage-heading h2 { font-size: 17px; }.world-viewport { height: 500px; }.world-canvas { transform: scale(.7) !important; transform-origin: 0 0; }.right-rail { grid-template-columns: 1fr; }.map-panel, .agents-panel { min-height: 0; }.event-panel { max-height: 210px; }.world-stage { min-height: 550px; }.world-stage .movement-help { display: none; }.nearby-prompt { bottom: 42px; }.toolbelt { grid-template-columns: repeat(4, 1fr); }.tool-slot { min-height: 54px; }.tool-slot b { font-size: 20px; }.tool-key { margin-bottom: -39px; }.object-grid { grid-template-columns: repeat(4, 1fr); }.object-card { min-height: 90px; }.object-art { width: 40px; height: 43px; font-size: 30px; }.shelf-title { align-items: flex-start; flex-direction: column; gap: 3px; }.disclaimer { flex-direction: column; gap: 4px; }.terminal-phone { right: 14px; bottom: 130px; width: min(300px, calc(100% - 28px)); }.inspector-drawer { right: 9px; bottom: 128px; width: calc(100% - 18px); }.left-rail { padding: 14px; }.component-list { grid-template-columns: 1fr 1fr; }.component-list li { font-size: 10px; }.component-list li b { width: 17px; height: 17px; }
}

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

/* Browser-native opening scene and reality plates. These are local assets from
   phase2-unreal/ReferenceSource, so the playable build stays self-contained. */
.opening-scene { position: fixed; z-index: 100; inset: 0; display: grid; place-items: end start; overflow: hidden; background: #02050d; transition: opacity .55s ease, visibility .55s ease; }
.opening-scene.is-dismissed { opacity: 0; visibility: hidden; pointer-events: none; }
.opening-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #050816; filter: saturate(1.15) contrast(1.05) brightness(.72); }
.opening-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 55% 44%, transparent 0 24%, rgba(4, 5, 18, .22) 54%, rgba(2, 4, 12, .92) 100%), linear-gradient(90deg, rgba(2, 5, 13, .9), transparent 55%, rgba(2, 5, 13, .35)); }
.opening-copy { position: relative; z-index: 2; width: min(630px, calc(100% - 48px)); margin: 0 0 11vh 7vw; padding: 24px 28px 27px; border: 1px solid rgba(125, 232, 255, .35); border-radius: 16px; background: linear-gradient(135deg, rgba(4, 14, 32, .86), rgba(20, 10, 46, .72)); box-shadow: 0 0 42px rgba(32, 145, 255, .18), inset 0 0 30px rgba(111, 73, 255, .1); backdrop-filter: blur(7px); }
.opening-copy h1 { margin: 6px 0 7px; color: #f5fbff; font: 800 clamp(50px, 10vw, 104px)/.86 var(--mono); letter-spacing: -.08em; text-shadow: 0 0 28px rgba(181, 140, 255, .75); }
.opening-copy p { margin: 0 0 18px; color: #d5e6f4; font-size: clamp(16px, 2vw, 22px); }
.opening-meta { display: flex; flex-wrap: wrap; gap: 9px 18px; color: #9ab6cf; font: 10px var(--mono); letter-spacing: .06em; }
.opening-meta i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #91e85e; box-shadow: 0 0 12px #91e85e; }
.opening-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.opening-enter, .opening-sound { border: 1px solid rgba(125, 232, 255, .55); border-radius: 8px; color: #effbff; background: rgba(24, 88, 128, .52); font: 700 12px var(--mono); letter-spacing: .06em; cursor: pointer; }
.opening-enter { padding: 14px 17px; box-shadow: 0 0 18px rgba(125, 232, 255, .2); }
.opening-enter b { margin-left: 14px; color: #7de8ff; font-size: 19px; }
.opening-sound { padding: 13px 14px; color: #abc1d7; background: rgba(5, 10, 25, .45); }
.opening-enter:hover, .opening-sound:hover { border-color: #b58cff; box-shadow: 0 0 22px rgba(181, 140, 255, .3); }
.opening-copy > small { display: block; margin-top: 13px; color: #7e9bb6; font: 10px var(--mono); }
.reality-deck { position: absolute; z-index: 5; right: 27px; bottom: 27px; left: 27px; padding: 9px; border: 1px solid rgba(125, 232, 255, .24); border-radius: 10px; background: linear-gradient(90deg, rgba(4, 15, 29, .9), rgba(8, 19, 41, .72)); box-shadow: 0 0 28px rgba(12, 89, 125, .16); backdrop-filter: blur(5px); }
.reality-deck-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 3px 7px; color: #9edff4; font: 10px var(--mono); letter-spacing: .07em; }
.reality-deck-heading small { color: #6c8aa4; font-size: 8px; }
.reality-deck-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.reality-plate { display: block; width: 100%; height: 72px; object-fit: cover; border: 1px solid rgba(125, 232, 255, .22); border-radius: 6px; background: #081322; filter: saturate(1.16) contrast(1.04); }
@media (max-width: 680px) {
  .opening-copy { width: calc(100% - 24px); margin: 0 12px 24px; padding: 18px; }
  .opening-copy h1 { font-size: 53px; }
  .reality-deck { right: 12px; bottom: 12px; left: 12px; }
  .reality-deck-heading small { display: none; }
  .reality-plate { height: 48px; }
}