<!-- SOLID CITY · part 3265 -->
m:100%;right:calc(26px + env(safe-area-inset-right));bottom:calc(138px + env(safe-area-inset-bottom));width:80px;height:80px;background:conic-gradient(#ffb040 var(--m),rgba(40,20,10,.85) 0);font-size:13px}
#b-boost:before{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a1a0a,#140805)}
#b-boost span{position:relative}
#b-boost.hot:before{background:radial-gradient(circle at 40% 35%,#ffd27a,#ff7a1a)}#b-boost.hot{color:#140805;box-shadow:0 0 26px #ff7a1a}
#b-launch{left:50%;bottom:calc(36px + env(safe-area-inset-bottom));transform:translateX(-50%);width:150px;height:150px;background:radial-gradient(circle at 40% 35%,#ff4357,#a00a1a 70%);font-size:24px;box-shadow:0 0 0 7px rgba(227,18,44,.25),0 12px 40px rgba(227,18,44,.6);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 16px rgba(227,18,44,.08),0 12px 40px rgba(227,18,44,.6)}}
#h-perf{position:absolute;left:8px;bottom:calc(170px + env(safe-area-inset-bottom));font:11px ui-monospace,monospace;color:#7be38a;background:rgba(0,0,0,.6);padding:4px 6px;border-radius:6px}
.hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));font-size:12px;color:#b9aeb8;letter-spacing:.06em;background:rgba(0,0,0,.45);padding:5px 10px;border-radius:8px;white-space:nowrap}
body[data-phase=pad] #h-speedo,body[data-phase=count] #h-speedo,body[data-phase=result] #h-speedo{display:none}
/* landscape phones: speedo between the stick and the buttons, lower banner */
@media (orientation:landscape) and (max-height:520px){
  #h-speedo{bottom:calc(8px + env(safe-area-inset-bottom))}
  #stick{width:124px;height:124px}
  #b-fire{width:96px;height:96px}
  #b-boost{right:calc(124px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));width:74px;height:74px}
  .top{flex-direction:row}.top .row{flex:1}
  #h-banner{top:40%}#h-mother{top:calc(60px + env(safe-area-inset-top))}
  #b-launch{width:120px;height:120px;bottom:calc(14px + env(safe-area-inset-bottom))}
}
@media (min-width:900px){.pill b{font-size:19px}.obj b{font-size:15px}#h-speedo{bottom:calc(30px + env(safe-area-inset-bottom))}}
/* ---------- result ---------- */
#result{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.7))}
.card{width:min(440px,100%);max-height:100%;overflow:auto;background:rgba(12,6,9,.93);border:2px solid #e8c36a;border-radius:18px;padding:16px;box-shadow:0 10px 50px #000;touch-action:pan-y}
.card .k{font:800 12px RC,system-ui;letter-spacing:.3em;color:#ff4d5e;text-align:center}
.card h2{margin:4px 0 2px;text-align:center;font:900 30px/1.05 RC,system-ui;letter-spacing:.06em;color:#e8c36a}
#r-title{text-align:center;font:700 13px RC;letter-spacing:.22em;color:#9fffbf;margin-bottom:10px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stats div{background:#140c10;border:1px solid #5a1a1f;border-radius:12px;padding:8px 10px}
.stats b{display:block;font:900 24px/1.1 RC,ui-monospace,monospace;color:#fff}.stats span{font-size:10px;letter-spacing:.18em;color:#b9aeb8}
#r-save{text-align:center;margin:10px 0 6px;font-size:12px;letter-spacing:.1em;color:#f6dc8e;min-height:15px}
.lb{list-style:none;margin:0;padding:0;font-size:14px}
.lb li{display:flex;gap:8px;align-items:center;padding:6px 8px;border-bottom:1px solid #2a171c}
.lb li b{width:22px;color:#e8c36a}.lb li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb li i{font-style:normal;font-family:ui-monospace,monospace}.lb li em{font-style:normal;color:#9fffbf;width:30px;text-align:right}
.lb li.me{background:#3a0a14;border-radius:8px}.lb li.dim{color:#8d8392;justify-content:center}
.acts{display:flex;gap:8px;margin-top:14px}
.acts a,.acts button{flex:1;min-height:52px;border-radius:14px;border:2px solid #e8c36a;font:900 15px/1.1 RC,system-ui;letter-spacing:.1em;display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;text-align:center;padding:0 8px}
.acts a{background:linear-gradient(180deg,#f3d27a,#b8862a);color:#140805}.acts button{background:linear-gradient(180deg,#ff3048,#a30d1d);color:#fff}
</style>
</head>
<body data-phase="loading">
<canvas id="gl"></canvas>

<div id="load">
  <div class="crest">✦</div>
  <div class="kicker">SOLID CITY</div>
  <h1>SPACE MISSION</h1>
  <p>Your ship waits on the Hangar pad. Blast off through the clouds, hit the alien fleet down, re-enter through the flames and park back home.</p>
  <div class="steps"><span>JUMP IN</span><span>FLY</span><span>SHOOT</span><span>GO HOME</span><span>PARK</span></div>
  <div class="bar"><i id="load-bar"></i></div>
  <div id="load-msg">Loading…</div>
  <label class="cs">CALLSIGN <input id="callsign" maxlength="16" placeholder="PILOT" autocomplete