:root{color-scheme:dark;--ink:#090e15;--shell:#101a26;--pane:#13202d;--pane2:#1a2b3a;--stroke:#304559;--cream:#f5f2e6;--muted:#9db1c0;--amber:#ffbd62;--blue:#73d5f9;--mint:#9ce8ba;--bad:#fa927e}
*{box-sizing:border-box}html{background:var(--ink)}body{margin:0;background:radial-gradient(ellipse at 13% 0%,#223447 0%,transparent 37%),radial-gradient(ellipse at 100% 10%,#132630 0%,transparent 40%),var(--ink);color:var(--cream);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}button,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{cursor:not-allowed;opacity:.44}button:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:3px}button:where(:not(:disabled)):active{transform:translateY(1px)}[hidden]{display:none!important}.global-head{height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #25394a;padding:0 max(23px,calc((100vw - 1250px)/2));gap:14px}.brand{display:flex;align-items:center;gap:13px;font-weight:900;letter-spacing:.1em;font-size:17px}.brand small{display:block;letter-spacing:.2em;font-size:9px;color:var(--muted);font-weight:700}.brand-symbol{display:grid;place-items:center;background:var(--amber);border-radius:7px;height:41px;width:43px;color:#182431;font-size:23px;letter-spacing:-.13em}.brand-slash{color:#874f23}.private-mark{font-weight:800;font-size:10px;letter-spacing:.11em;border:1px solid #385568;border-radius:100px;padding:8px 12px;color:#d6e1e8;white-space:nowrap}.private-mark:first-letter{color:var(--mint)}.outer{max-width:1250px;margin:auto;padding:32px 23px 18px}.hero{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px;align-items:end;margin:18px 0 30px}.kicker,.section-label,.mini-badge,.micro{font-size:11px;letter-spacing:.14em;font-weight:850;color:var(--muted)}.hero .kicker{color:var(--amber)}h1{font-size:clamp(72px,10.2vw,134px);line-height:.87;margin:17px 0 25px;letter-spacing:-.085em;font-weight:930}.dot{color:var(--amber)}.tagline{font-size:clamp(20px,3vw,30px);line-height:1.2;letter-spacing:-.025em;margin:0 0 15px;color:#f6f3e9}.tagline strong{font-weight:700;color:var(--amber)}.hero-note{font-size:15px;max-width:630px;color:#b7c6d0;margin:0;line-height:1.65}.hero-status{background:linear-gradient(150deg,#1c303b,#12202e);border:1px solid #3a5260;border-radius:17px;padding:23px;position:relative;overflow:hidden}.hero-status:after{content:"";position:absolute;right:-16px;top:33px;width:120px;height:120px;border:1px solid #456077;border-radius:50%;box-shadow:0 0 0 23px #ffffff05,0 0 0 47px #ffffff03;pointer-events:none}.status-top{color:#bdcad6;font-size:10px;letter-spacing:.11em;font-weight:800;display:flex;justify-content:space-between}.live-dot{width:7px;height:7px;background:var(--mint);border-radius:50%;box-shadow:0 0 12px #9ce8ba7d}.status-metric{display:flex;gap:9px;align-items:baseline;margin-top:14px}.status-metric b{font-size:64px;line-height:1;letter-spacing:-.06em;font-variant-numeric:tabular-nums}.status-metric span{font-size:20px;color:var(--muted);font-weight:700}.status-caption{font-size:11px;letter-spacing:.12em;color:#bdccd4;font-weight:750}.progress-strip{height:6px;background:#344b5d;border-radius:999px;margin:18px 0 10px;overflow:hidden}.progress-strip>div{height:100%;width:0%;background:linear-gradient(90deg,var(--amber),var(--mint));border-radius:999px;transition:width .35s}.hero-status .micro{font-size:9px}.stage{border:1px solid #395066;border-radius:18px;background:#121e2b;overflow:hidden;box-shadow:0 30px 80px #0005}.stage-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 27px;border-bottom:1px solid #344b5e;background:#162332}.stage-head h2{font-size:clamp(21px,3vw,29px);margin:6px 0 2px;letter-spacing:-.035em}.stage-head p{margin:0;color:#afc0cb;font-size:13px}.slash{color:#6b8599}.stage-head-actions{display:flex;align-items:end;gap:9px}.level-label{display:grid;gap:4px;font-weight:800;color:var(--muted);font-size:10px;letter-spacing:.1em}.level-label select{min-width:184px;max-width:240px;background:#23374a;border:1px solid #587083;border-radius:8px;color:var(--cream);padding:9px 10px;font-size:12px;font-weight:650}.icon-button{border:1px solid #587083;border-radius:8px;background:#23374a;color:#e8edeb;padding:10px 12px;min-height:44px}.icon-button span{font-size:10px;font-weight:850;letter-spacing:.08em}.stage-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr)}.map-panel{padding:25px;min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at top,#1d3442,#0e1b27 70%)}.panel-top{display:flex;justify-content:space-between;gap:9px;align-items:start;margin-bottom:17px}.legend-inline{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;color:#aec2cf;font-size:12px}.legend-inline span{display:flex;align-items:center;gap:6px}.swatch{display:inline-block;width:10px;height:10px;border-radius:3px;background:#aaa;flex-shrink:0}.swatch.amber{background:var(--amber)}.swatch.azure{background:var(--blue)}.swatch.block{background:repeating-linear-gradient(45deg,#aac0cb,#aac0cb 2px,#415c6c 2px,#415c6c 4px)}.clock{display:grid;justify-items:end;white-space:nowrap}.clock span{color:var(--muted);font-size:10px;letter-spacing:.14em;font-weight:850}.clock b{font-size:20px;font-variant-numeric:tabular-nums}.clock i{color:var(--muted);font-style:normal;font-size:13px}.map-frame{background:linear-gradient(135deg,#132b36,#0b1c2a);border:1px solid #3a5668;border-radius:15px;padding:clamp(10px,2.5vw,25px);display:grid;place-items:center;position:relative;flex:1;min-height:420px;overflow:hidden}.map-frame:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 39px,#5070870a 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,#5070870a 40px)}.board-grid{--n:5;position:relative;width:min(100%,480px);aspect-ratio:1;isolation:isolate}.tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:5px}.tile{position:relative;background:#203b49;border:1px solid #3b586a;border-radius:8px;overflow:hidden}.tile:after{content:"";position:absolute;right:6px;bottom:6px;width:3px;height:3px;border-radius:50%;background:#7fa2b4;opacity:.3}.tile.wall{background:repeating-linear-gradient(135deg,#293e4c,#293e4c 7px,#1b303c 7px,#1b303c 14px);border-color:#5a6872}.tile.wall:after{display:none}.tile.origin-a{box-shadow:inset 0 0 0 2px #ffbd6233}.tile.origin-b{box-shadow:inset 0 0 0 2px #73d5f944}.destination{position:absolute;inset:20%;border:3px dashed;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:950}.destination.a{border-color:#ffcb7a;color:var(--amber)}.destination.b{border-color:#8cdffc;color:var(--blue)}.routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}.route{fill:none;stroke-width:1.15;stroke-dasharray:1.6 1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.7}.amber-route{stroke:var(--amber)}.azure-route{stroke:var(--blue)}.route.error{opacity:.2}.unit{position:absolute;z-index:4;width:calc(66% / var(--n));aspect-ratio:1;border-radius:50%;left:0;top:0;display:grid;place-items:center;transform:translate(-50%,-50%);transition:top .19s cubic-bezier(.16,.8,.35,1),left .19s cubic-bezier(.16,.8,.35,1);font-size:clamp(12px,1.7vw,19px);font-weight:950;border:3px solid #eff6f9;box-shadow:0 5px 19px #0009,0 0 0 5px #ffffff11}.amber-unit{background:linear-gradient(140deg,#ffe3a9,#f6a53e);color:#38271b}.azure-unit{background:linear-gradient(140deg,#b7efff,#44b9ef);color:#112c3f}.unit.delivered{box-shadow:0 0 0 5px #9ce8ba66,0 8px 21px #000a}.collision-mark{position:absolute;z-index:8;width:calc(80% / var(--n));aspect-ratio:1;background:#d74d45;border:3px solid #ffc8aa;color:#fff;border-radius:50%;font-size:22px;font-weight:900;display:grid;place-items:center;transform:translate(-50%,-50%);box-shadow:0 0 22px #ed716c}.map-foot{display:flex;justify-content:space-between;gap:10px;margin-top:13px;color:var(--muted);font-size:10px;letter-spacing:.06em;font-weight:800}.map-foot b{font-size:14px;color:var(--amber)}.console-panel{padding:24px 27px;background:#152332;border-left:1px solid #355065;min-width:0}.console-header{display:flex;justify-content:space-between;align-items:center;gap:8px}.console-header h3{margin:6px 0 0;font-size:24px;letter-spacing:-.035em}.mini-badge{color:#8de0b0;white-space:nowrap;font-size:9px;letter-spacing:.08em;background:#244237;border:1px solid #4f8870;padding:6px 8px;border-radius:6px}.mini-badge.running{background:#433927;color:var(--amber);border-color:#82724d}.mini-badge.paused{background:#3b3d4b;color:#c5c7ff;border-color:#6d709e}.console-instruction{margin:9px 0 20px;color:#afc2cc;font-size:13px}.agents{display:grid;grid-template-columns:1fr 1fr;gap:9px}.agent-card{text-align:left;border:1px solid #436176;background:#203548;border-radius:11px;min-height:74px;padding:12px;display:grid;gap:5px;color:var(--cream)}.agent-card>span{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:900;white-space:nowrap}.agent-card strong{font-size:10px;color:#aebfc9;letter-spacing:.09em}.agent-card.active-a{border-color:var(--amber);background:#413629;box-shadow:inset 0 0 0 1px #efb65a77}.agent-card.active-b{border-color:var(--blue);background:#234154;box-shadow:inset 0 0 0 1px #72c4e999}.commands{margin:18px 0}.section-row{display:flex;justify-content:space-between;gap:7px;flex-wrap:wrap;margin-bottom:9px}.section-row .micro{font-size:9px}.move-pad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.move-pad button{min-height:55px;border:1px solid #607b8b;border-radius:10px;background:#2a465b;color:#f7f5e8;font-size:29px;font-weight:700;box-shadow:0 4px 0 #112535}.move-pad button:hover:not(:disabled){background:#385d76}.move-pad button[data-dir=W]{color:var(--amber)}.keyboard-note{color:#90a9b9;font-size:10px;margin:9px 0 0}.queues{display:grid;gap:10px}.queue{background:#1a2e3d;border:1px solid #395165;border-radius:10px;padding:10px}.queue-head{display:flex;justify-content:space-between;align-items:center;color:#bdd0da;font-size:10px;letter-spacing:.1em;font-weight:850;margin-bottom:7px}.queue-head>span{display:flex;align-items:center;gap:6px}.queue-head b{font-variant-numeric:tabular-nums}.queue-items{display:flex;gap:4px;flex-wrap:wrap;min-height:29px}.order-chip{display:grid;place-items:center;color:var(--cream);background:#2a4658;border:1px solid #597386;border-radius:6px;width:30px;height:29px;font-weight:900;position:relative}.order-chip:hover:not(:disabled){border-color:var(--amber)}.order-chip.active-tick{border-color:var(--mint);background:#375b50}.order-chip.ghost{background:#142735;color:#7794a5;border-style:dashed;width:auto;padding:0 10px;font-size:10px}.score-row{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:#8fa8b8;font-size:10px;letter-spacing:.06em;margin:14px 0 12px}.score-row b{color:var(--cream)}.main-actions{display:flex;gap:8px;flex-wrap:wrap}.main-actions button{min-height:46px;border-radius:9px;border:1px solid #58738a;font-size:11px;font-weight:900;letter-spacing:.065em;padding:11px 13px}.main-actions .launch{background:var(--amber);color:#17212b;border-color:#ffbd62;flex:1 1 190px;font-size:12px}.main-actions .utility{background:#2a4154;color:#edf3ed;flex:1 1 82px}.message{border-left:3px solid var(--blue);background:#1e3444;padding:12px 13px;color:#c5d8e3;font-size:12px;min-height:59px;margin-top:12px}.message.good{color:#d0ffe1;border-color:var(--mint);background:#203d35}.message.bad{color:#ffd8cc;border-color:var(--bad);background:#3e2d30}.completion{border:1px solid #5e9b7d;background:linear-gradient(130deg,#1e403a,#1b2f33);border-radius:10px;padding:13px;margin-top:11px}.completion-heading{font-weight:950;font-size:13px;color:var(--mint);display:flex;justify-content:space-between}.completion-heading span{color:var(--amber);letter-spacing:.14em}.completion p{color:#bddecf;font-size:12px;margin:7px 0 10px}.completion button{min-height:42px;padding:9px 12px;font-size:11px;font-weight:850;border-radius:7px}.completion .next{background:var(--mint);color:#12312a;width:100%;border:0;display:flex;align-items:center;justify-content:space-between}.completion .retry{color:#dae6dd;background:transparent;border:1px solid #799489;width:100%;margin-top:7px}.extras{margin-top:11px;color:#adc1c9;font-size:12px}.extras button{border:0;padding:6px 0;background:transparent;color:var(--blue);text-decoration:underline;text-underline-offset:3px}.extras p{border-left:2px solid var(--amber);margin:5px 0;padding:6px 11px}.info-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.info-strip>div{border:1px solid #304556;border-radius:12px;padding:15px 18px;display:flex;align-items:center;gap:14px;background:#14222e}.info-strip b{font-size:27px;letter-spacing:-.055em;color:var(--amber)}.info-strip span{font-size:11px;font-weight:900;letter-spacing:.06em}.info-strip small{font-size:11px;font-weight:450;letter-spacing:0;color:#91a9b8}.footer{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:26px 0;color:#819baa;font-size:10px;font-weight:800;letter-spacing:.10em}
@media(max-width:1060px){.stage-body{grid-template-columns:1fr}.map-panel{padding:20px}.map-frame{min-height:unset;padding:20px}.board-grid{max-width:480px}.console-panel{border-left:0;border-top:1px solid #355065}.hero{grid-template-columns:minmax(0,1fr) 240px}.global-head{padding:0 18px}}
@media(max-width:690px){.outer{padding:17px 12px}.global-head{height:62px;padding:0 12px}.hero{grid-template-columns:1fr;margin:13px 0 16px;gap:18px}h1{font-size:clamp(63px,16vw,94px);margin:8px 0 16px}.tagline{font-size:23px}.hero-note{font-size:13px}.hero-status{padding:16px}.status-metric b{font-size:43px}.status-metric{margin-top:8px}.progress-strip{margin:8px 0}.stage-head{padding:15px;gap:12px;align-items:flex-start;flex-direction:column}.stage-head-actions{width:100%}.level-label{flex:1}.level-label select{max-width:100%;width:100%;min-width:0}.map-panel{padding:13px}.map-frame{padding:12px}.board-grid{width:min(100%,420px)}.tiles{gap:3px}.tile{border-radius:5px}.console-panel{padding:17px}.info-strip{grid-template-columns:1fr;gap:8px}.info-strip>div{padding:9px 13px}.info-strip b{font-size:22px}.footer{font-size:9px}}
@media(max-width:360px){.brand{gap:7px}.private-mark{font-size:9px;padding:7px}.private-mark span{display:none}.hero .kicker{font-size:10px}.map-frame{padding:7px}.stage-head h2{font-size:22px}.agent-card{padding:8px}.agent-card>span{font-size:10px}.move-pad{gap:4px}.move-pad button{min-height:48px;font-size:23px}.console-header h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* FAR Experiencia 02: the city must stay visible WHILE a player programs routes.
   The board and controls remain in one document; no cloned game state or controls. */
@media (max-width:690px) {
 .stage {overflow:visible}
 .stage-head {border-radius:17px 17px 0 0}
 .stage-body {overflow:visible}
 .map-panel {
   position:sticky;top:0;z-index:6;align-self:start;
   padding:9px 12px 10px;
   background:linear-gradient(135deg,#173140,#0e2432);
   border-bottom:1px solid #446378;
   box-shadow:0 9px 21px #051019bb;
 }
 .map-panel .panel-top {margin-bottom:6px}
 .map-panel .legend-inline {gap:10px;margin-top:3px;font-size:10px}
 .map-panel .section-label {font-size:10px}
 .map-panel .clock b {font-size:17px}
 .map-panel .clock span {font-size:9px}
 .map-frame {padding:4px;min-height:0}
 .map-panel .board-grid {width:min(100%,38vh,258px);max-width:258px}
 .map-foot {display:none}
 .console-panel {border-radius:0 0 17px 17px}
}