<!-- SOLID CITY · part 3471 -->
polygon(0 0,94% 0,100% 50%,94% 100%,0 100%)}
    .launch:hover{background:#ffe092}
    .city-back{display:block;width:max-content;margin:14px auto 0;color:#9eb2b4;font-size:.72rem;text-decoration:none}.city-back:hover,.city-back:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:4px}
    dialog{width:min(860px,calc(100% - 20px));max-height:calc(100dvh - 20px);overflow:auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:0;box-shadow:0 30px 100px rgba(0,0,0,.55)}
    dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
    .dialog-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;background:var(--panel);padding:14px 16px;border-bottom:1px solid var(--line)}
    .dialog-head h2{font-size:1rem;margin:0}.close{min-height:42px;min-width:42px;border:1px solid var(--line);background:var(--panel2);cursor:pointer}
    .stats-body{padding:14px}.stats-summary{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.stats-summary .metric{border:1px solid var(--line)}
    .stats-section{margin-top:18px}.stats-section h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.11em;margin:0 0 9px;color:var(--muted)}
    .event-list{display:grid;gap:5px}.event{display:grid;grid-template-columns:62px 110px 1fr;gap:8px;padding:8px;background:var(--soft);font-size:.72rem}.event time,.event b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.event time{color:var(--muted)}.event b{color:var(--teal)}
    .drone-table{width:100%;border-collapse:collapse;font-size:.71rem}.drone-table th,.drone-table td{text-align:left;padding:7px;border-bottom:1px solid var(--line)}.drone-table th{color:var(--muted);font-size:.61rem;text-transform:uppercase;letter-spacing:.08em}.owner-human{color:var(--gold);font-weight:800}.owner-ai{color:var(--teal);font-weight:800}
    .help-note{padding:10px 12px;color:var(--muted);font-size:.67rem;line-height:1.4;border-top:1px solid var(--line)}
    .debrief{position:absolute;inset:0;z-index:4;background:rgba(2,8,10,.94);display:grid;place-items:center;padding:24px;color:#f4f8f7}.debrief[hidden]{display:none}.debrief-card{max-width:520px;text-align:center}.debrief h2{font-size:clamp(2rem,5vw,4rem);margin:0 0 10px;letter-spacing:-.05em}.debrief p{color:#aababc}.debrief-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:18px 0}.debrief-grid div{border:1px solid #30474c;padding:13px}.debrief-grid b{font:800 1.35rem ui-monospace,SFMono-Regular,Menlo,monospace;display:block;color:#ffc34d}.debrief-grid span{font-size:.62rem;color:#9daeb0;text-transform:uppercase}
    @media(max-width:980px){
      .app{padding:8px}.mission-bar{grid-template-columns:minmax(0,1fr) auto auto;gap:8px}.progress-wrap{grid-column:1/-1;grid-row:2}.layout{grid-template-columns:1fr}.field-shell,canvas{height:52dvh;min-height:380px}.field-shell{min-height:380px}.rail{grid-template-columns:1fr 1fr}.rail .roster-panel{grid-column:1/-1}.control-card{padding:8px}.dpad-wrap{grid-template-columns:1fr 110px}.pulse{min-height:145px}.order-btn{min-height:54px}.roster{grid-template-columns:repeat(6,1fr)}
    }
    @media(max-width:620px){
      .objective p{display:none}.integrity{padding:7px 9px}.integrity strong{font-size:1rem}.mission-bar{gap:8px;margin-bottom:8px}.layout{gap:8px}.field-shell,canvas{height:43dvh;min-height:330px}.field-shell{min-height:330px}.rail{grid-template-columns:1fr}.rail .roster-panel{grid-column:auto}.order-grid{grid-template-columns:repeat(3,1fr)}.dpad-wrap{grid-template-columns:1fr 96px}.dpad{grid-template-rows:repeat(2,48px)}.pulse{min-height:101px}.roster{grid-template-columns:repeat(6,1fr)}.drone-tile{min-height:45px;padding:5px 2px}.swarm-strip{grid-template-columns:repeat(4,1fr)}.start-screen{padding:12px;overflow-y:auto}.start-content .mark{font-size:.6rem;margin-bottom:7px}.start-content h2{font-size:2rem;margin-bottom:7px}.start-content p{font-size:.72rem;line-height:1.35;margin-bottom:9px}.brief{display:none}.launch{min-height:48px}.stats-summary{grid-template-columns:repeat(3,1fr)}.event{grid-template-columns:52px 86px 1fr}.drone-table{font-size:.62rem}.drone-table th,.drone-table td{padding:6px 3px}
    }
    @media(max-width:380px){.roster{grid-template-columns:repeat(4,1fr)}.field-shell,canvas{height:40dvh;min-height:290px}.field-shell{min-height:290px}.hud-chip{font-size:.58rem}.advisory{font-size:.65rem}}
    @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
  </style>
</head>
<body>
<main class="app">
  <section class="mission-bar" aria-label="Mission status">
    <div class="objective"><h1>Clear the convoy lane</h1><p>12 drones · 3 AI sub-commanders · escalating debris</p></div>
    <div class="progress-wrap"><div class="progress-label"><span id="phaseText">WAVE 1 · APPROACH</span><span id="progressText">0% TO EXIT VECTOR</span></div><div class="progress-track"><div class="progre