<!-- SOLID CITY · part 2017 -->
;padding:max(24px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom));background:#020807}.start-overlay.closed{display:none}.start-card{width:min(720px,100%);background:#071412;border:1px solid var(--line);box-shadow:0 24px 80px #000;padding:clamp(24px,5vw,48px)}.start-overlay .mode{max-width:none;width:100%}.start-mark{display:flex;align-items:center;gap:10px;color:var(--gold);font:800 11px/1 "Arial Narrow","Aptos Narrow",sans-serif;letter-spacing:.16em}.start-mark::before{content:"";width:22px;height:2px;background:var(--gold)}.start-card h1{margin:14px 0 10px;font:900 clamp(34px,7vw,58px)/.92 "Arial Narrow","Aptos Narrow",sans-serif;letter-spacing:.04em}.start-brief{max-width:620px;margin:0;color:var(--ink);font-size:16px;line-height:1.55}.start-brief strong{color:var(--gold)}.start-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:24px;margin:28px 0 24px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.start-grid h2{font:800 12px/1 "Arial Narrow","Aptos Narrow",sans-serif;letter-spacing:.12em;margin:0 0 12px;color:var(--teal)}.start-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}.start-grid li{position:relative;padding-left:16px;color:var(--muted);font-size:13px;line-height:1.45}.start-grid li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--teal);transform:rotate(45deg)}.config label{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.config .mode{width:100%;min-height:48px;font-size:13px}.launch{width:100%;min-height:58px;background:var(--gold);color:#100b01;border-radius:6px;font-weight:950;letter-spacing:.1em;font-size:15px}.launch:focus-visible,.city-back:focus-visible{outline:2px solid var(--teal);outline-offset:4px}.city-back{display:block;width:max-content;margin:18px auto 0;color:var(--muted);font-size:12px;text-decoration:none}.city-back:hover{color:var(--ink)}
    @media(max-width:760px) and (orientation:portrait){.topbar{min-height:58px;padding:calc(7px + env(safe-area-inset-top)) 9px 7px}.mission small{max-width:145px}.mode{max-width:106px;padding-left:8px}.stat-open{padding:10px}.battlefield{grid-template-columns:1fr;min-height:auto}.screen{min-height:calc(50svh - 29px);grid-template-rows:auto minmax(240px,1fr) auto}.screen.teal .commands{padding-bottom:max(10px,env(safe-area-inset-bottom))}.view{min-height:240px}.commands{padding:6px 7px}.orders{gap:4px}.orders button{min-height:40px;font-size:9px}.pilot{grid-template-columns:repeat(3,48px);gap:4px}.pilot button{min-height:40px}.shiprow{grid-template-columns:66px 72px 1fr;gap:6px}.task{grid-column:2/4;text-align:left}.screen-head{padding:7px 9px}}
    @media(max-width:900px) and (orientation:landscape){.topbar{min-height:52px;padding:6px 10px}.battlefield{min-height:calc(100svh - 52px)}.screen{grid-template-rows:auto minmax(180px,1fr) auto}.view{min-height:180px}.screen-head{padding:6px 8px}.commands{padding:5px 6px}.orders{gap:3px}.orders button{min-height:36px;font-size:8px}.pilot{grid-template-columns:repeat(3,44px);gap:3px}.pilot button{min-height:36px;font-size:8px}.selected{bottom:5px}.objective{top:5px}}
    @media(max-width:560px){.topbar{gap:6px}.mission strong{font-size:11px}.mission small{font-size:9px}.stat-open{font-size:0}.stat-open::after{content:"STATS";font-size:10px}.mode{font-size:10px}.scoreboard{grid-template-columns:1fr 1fr}.sheet{padding-left:10px;padding-right:10px}.start-overlay{place-items:start center;padding-left:12px;padding-right:12px}.start-card{padding:24px 20px}.start-card h1{font-size:38px}.start-brief{font-size:14px}.start-grid{grid-template-columns:1fr;gap:20px;margin:20px 0;padding:18px 0}.start-grid li{font-size:12px}.launch{min-height:54px}}
    @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
  </style>
</head>
<body>
  <div class="start-overlay" id="startOverlay" role="dialog" aria-modal="true" aria-labelledby="startTitle">
    <div class="start-card">
      <div class="start-mark">MERIDIAN BEACON MISSION</div>
      <h1 id="startTitle">FLEET CONTROL</h1>
      <p class="start-brief">Two commanders. Four ships each. <strong>Gold squadron</strong> and <strong style="color:var(--teal)">teal squadron</strong> share one battlefield. Lead your squadron, keep your ships alive, and complete the mission.</p>
      <div class="start-grid">
        <section aria-labelledby="controlsTitle"><h2 id="controlsTitle">CONTROLS</h2><ul><li>Tap a ship to take its helm.</li><li>Use formation, attack, and defend orders to direct your squadron.</li><li>The AI yields any ship you take; tap YIELD to hand it back safely.</li></ul></section>
        <div class="config"><h2>COMMANDERS</h2><label for="mode">Choose who leads the two squadrons</label><select id="mode" class="mode" aria-label="Commander configuration"><option value="human">HUMAN + AI</option><option value="auto">AI + AI</option></select></div>
   