/* mek: neon on #07050f. Layout notes live in legacy/mechball.md (iOS pass). */
html,body{margin:0;padding:0;height:100%;background:#07050f;overflow:hidden;}
body{font-family:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Roboto Mono","Courier New",monospace;color:#cfe9f5;-webkit-user-select:none;user-select:none;}
canvas{display:block;width:100vw;height:100vh;height:100dvh;touch-action:none;cursor:crosshair;}
/* three layers: the deep background (quarter-res canvas the compositor scales up),
   the game canvas (transparent over it), the vignette (a CSS gradient, no canvas
   cost). Painted in DOM order; the HUD and everything else stack above. */
#bg{position:fixed;top:0;left:0;pointer-events:none;}
#c{position:relative;}
#vig{position:fixed;inset:0;pointer-events:none;}
#hud{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));
  left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);
  text-align:center;pointer-events:none;}
#score{font-size:30px;letter-spacing:.14em;color:#eaf9ff;text-shadow:0 0 14px rgba(34,227,255,.45);}
#sub{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-top:4px;}
#score .cy{color:#22e3ff;}#score .mg{color:#ff3df0;}
#score .cy{text-shadow:0 0 14px rgba(34,227,255,.55);}#score .mg{text-shadow:0 0 14px rgba(255,61,240,.55);}
/* match clock (timed levels) and the tug gauge under it */
#clock{display:none;margin-top:6px;font-size:16px;letter-spacing:.2em;color:#eaf9ff;opacity:.8;
  text-shadow:0 0 12px rgba(34,227,255,.4);}
#clock.low{color:#ff8df5;opacity:1;text-shadow:0 0 14px rgba(255,61,240,.6);}
#tug{display:none;position:relative;width:220px;height:7px;margin:8px auto 0;
  border:1px solid rgba(240,206,122,.45);}
#tug:after{content:'';position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:rgba(240,206,122,.7);}
#tugL,#tugR{position:absolute;top:0;bottom:0;width:0;transition:width .12s linear;}
#tugL{right:50%;background:#22e3ff;box-shadow:0 0 10px rgba(34,227,255,.6);}
#tugR{left:50%;background:#ff3df0;box-shadow:0 0 10px rgba(255,61,240,.6);}
#mode{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom,0px));
  left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);
  text-align:center;pointer-events:none;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.42;color:#cfe9f5;}
/* hull bars, damage levels only: yours bottom centre, the titan's under the score */
#hp{position:fixed;bottom:calc(50px + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%);width:132px;height:7px;
  border:1px solid rgba(240,206,122,.45);pointer-events:none;z-index:2;display:none;
  transition:border-color .2s;}
#hp.low{border-color:rgba(255,61,240,.7);}
/* the descent's shield, the thin cyan bar just over the hull bar (ui/hud.ts paintHP) */
#sh{position:fixed;bottom:calc(60px + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%);width:132px;height:4px;
  border:1px solid rgba(34,227,255,.4);pointer-events:none;z-index:2;display:none;}
#shFill{height:100%;width:100%;background:#22E3FF;box-shadow:0 0 10px rgba(34,227,255,.6);transition:width .1s linear;}
#sh.down{border-color:rgba(255,61,240,.5);}
/* the descent's line over the hull bar: the weapon carried, the power-ups running (ui/hud.ts paintRun) */
#runline{position:fixed;bottom:calc(70px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);
  display:none;pointer-events:none;z-index:2;white-space:nowrap;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#eaf9ff;opacity:.8;
  text-shadow:0 0 10px rgba(34,227,255,.45);}
#hpFill{height:100%;width:100%;background:#F0CE7A;box-shadow:0 0 10px rgba(240,206,122,.55);
  transition:width .12s linear;}
#hp.low #hpFill{background:#ff3df0;box-shadow:0 0 10px rgba(255,61,240,.6);}
#thp{position:fixed;top:calc(78px + env(safe-area-inset-top,0px));
  left:50%;transform:translateX(-50%);width:220px;height:7px;
  border:1px solid rgba(240,206,122,.45);pointer-events:none;z-index:2;display:none;}
#thpFill{height:100%;width:100%;background:#8a6bff;box-shadow:0 0 10px rgba(138,107,255,.55);
  transition:width .12s linear;}
#gamemode{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom,0px));
  left:calc(16px + env(safe-area-inset-left,0px));pointer-events:none;z-index:2;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#cfe9f5;}
#gamemode .lbl,#gamemode .off{opacity:.42;}
#gamemode .on{opacity:1;color:#22e3ff;text-shadow:0 0 10px rgba(34,227,255,.55);}
#modeFlash{position:fixed;top:50%;left:0;right:0;text-align:center;pointer-events:none;
  font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:#eaf9ff;opacity:0;
  text-shadow:0 0 18px rgba(34,227,255,.6);transition:opacity .35s;}
/* round countdown: upper third of the screen, clear of the sphere and the mech's start spot */
#count{position:fixed;top:30%;left:0;right:0;text-align:center;pointer-events:none;z-index:3;
  font-size:64px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:#eaf9ff;opacity:0;
  text-shadow:0 0 26px rgba(34,227,255,.75),0 0 60px rgba(34,227,255,.35);}
#count.pop{animation:countPop .9s ease-out forwards;}
#count.go{animation:countGo .7s ease-out forwards;}
@keyframes countPop{0%{opacity:0;transform:scale(1.7);}12%{opacity:1;transform:scale(1);}80%{opacity:1;}100%{opacity:0;}}
@keyframes countGo{0%{opacity:0;transform:scale(1.7);}12%{opacity:1;transform:scale(1);}60%{opacity:1;}100%{opacity:0;transform:scale(1.15);}}
@media (prefers-reduced-motion:reduce){#count.pop,#count.go{animation-name:countFade;}
  @keyframes countFade{0%{opacity:0;}10%{opacity:1;}80%{opacity:1;}100%{opacity:0;}}}
#result{position:fixed;top:26%;left:0;right:0;display:none;flex-direction:column;align-items:center;gap:14px;pointer-events:none;z-index:3;text-align:center;color:#eaf9ff;}
#result .big{font-size:56px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;text-shadow:0 0 26px rgba(34,227,255,.75),0 0 60px rgba(34,227,255,.35);}
#result .sm{font-size:15px;letter-spacing:.14em;opacity:.9;}
#result .sm + .sm{margin-top:-6px;} /* the adventure's cards stack several: closer, so the hint stays clear of the mode flash */
#result .hint{font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;animation:resultBlink 1.6s ease-in-out infinite;}
@keyframes resultBlink{0%,100%{opacity:.35;}50%{opacity:.85;}}
#pause{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(7,5,15,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:none;z-index:4;text-align:center;}
#pause .big{font-size:26px;letter-spacing:.32em;text-transform:uppercase;color:#eaf9ff;
  text-shadow:0 0 20px rgba(34,227,255,.55);}
#pause .sm{margin-top:12px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;opacity:.5;}
/* the pause menu's buttons take clicks; the overlay itself passes them to the canvas, which resumes */
#pause .row{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;pointer-events:auto;}
#pause button,#end button{background:rgba(7,5,15,.6);color:#cfe9f5;border:1px solid rgba(34,227,255,.4);
  padding:10px 18px;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:border-color .15s,color .15s;}
#pause button:hover,#pause button:focus-visible,#end button:hover,#end button:focus-visible{border-color:#ff8df5;color:#ff8df5;outline:none;}
/* results bar: under the countdown digits and the pause overlay. Shown by hud.ts showEnd, gone when the next round goes live. */
#end{position:fixed;top:calc(30% + 96px);left:0;right:0;display:none;gap:12px;justify-content:center;flex-wrap:wrap;z-index:3;}
#endNote{width:100%;text-align:center;font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.5;}
#endNote:empty{display:none;}
/* tuning panel */
#panel{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));
  right:calc(12px + env(safe-area-inset-right,0px));width:240px;
  max-height:82vh;max-height:82dvh;overflow-y:auto;display:none;z-index:6;
  background:rgba(7,5,15,.9);border:1px solid rgba(34,227,255,.3);padding:12px 13px 14px;
  box-shadow:0 0 26px rgba(34,227,255,.12);font-size:10px;letter-spacing:.06em;}
#panel .ph{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#eaf9ff;margin-bottom:10px;}
#panel .hint{opacity:.4;letter-spacing:.14em;flex:1;}
/* the x: the panel's close button beside the P key */
#panel #tClose{flex:none;width:34px;height:30px;padding:0;font-size:13px;letter-spacing:0;line-height:1;}
#panel .grp{margin:12px 0 6px;color:#ff8df5;text-transform:uppercase;letter-spacing:.22em;opacity:.85;}
#panel label{display:block;margin:0 0 7px;}
#panel .n{opacity:.6;}
#panel .v{float:right;color:#22e3ff;}
#panel input[type=range]{width:100%;margin:3px 0 0;accent-color:#22e3ff;height:14px;}
#panel .btns{margin-top:12px;display:flex;gap:8px;}
/* online: the match knobs are locked (src/ui/panel.ts lockTune), the note says so */
#panel .lock{display:none;margin:0 0 6px;font-size:10px;letter-spacing:.12em;color:#ff8df5;opacity:.85;line-height:1.4;}
#panel.locked .lock{display:block;}
#panel.locked .sim{opacity:.35;}
#panel button{flex:1;background:transparent;color:#cfe9f5;border:1px solid rgba(34,227,255,.35);
  padding:6px 0;font:inherit;font-size:10px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;}
#panel button:hover{border-color:rgba(255,61,240,.55);color:#ff8df5;}
/* phone sized, either way up: the centred mode line runs the full width and
   prints straight through the game mode readout at bottom left, so shrink it
   and lift the readout onto its own row. Height catches phone landscape,
   width catches phone portrait; a desktop window matches neither. */
@media (max-width:560px),(max-height:500px){
  #mode{font-size:9px;letter-spacing:.14em;}
  #gamemode{bottom:calc(30px + env(safe-area-inset-bottom,0px));font-size:9px;}
  /* the readout row runs 160px in from the left and the meters are centred, so on a
     393px screen they met: the meters go up a row on a phone */
  #hp{bottom:calc(60px + env(safe-area-inset-bottom,0px));}
  #sh{bottom:calc(70px + env(safe-area-inset-bottom,0px));}
  #runline{bottom:calc(80px + env(safe-area-inset-bottom,0px));}
  #runline{bottom:calc(74px + env(safe-area-inset-bottom,0px));}
}
/* a desktop window under about 1500px is not wide enough for the mode line and
   the readout side by side either: lift the readout onto its own row there too */
@media (min-width:561px) and (max-width:1500px){
  #gamemode{bottom:calc(30px + env(safe-area-inset-bottom,0px));}
}
/* title screen: the sector2 layout (box, action row, footer nav) in mek's
   palette. Shown until START; the footnav links leave for the site pages. */
#title{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(7,5,15,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  text-align:center;z-index:5;-webkit-tap-highlight-color:transparent;}
#titleBox{min-width:250px;max-width:min(480px,calc(100vw - 40px));padding:28px 36px 26px;border:1px solid rgba(34,227,255,.35);
  box-shadow:0 0 40px rgba(255,61,240,.14) inset,0 0 26px rgba(34,227,255,.14);
  background:rgba(7,5,15,.6);}
#titleBox h1{font-size:44px;line-height:1;letter-spacing:.12em;margin:0 0 12px;font-weight:700;color:#eaf9ff;
  text-shadow:0 0 18px rgba(34,227,255,.55),0 0 42px rgba(255,61,240,.25);}
#titleBox .tag{font-size:13px;line-height:1.7;margin:0;opacity:.78;}
/* the games strip (the hub), a quiet footer under the PLAY row: four tiles in a row,
   2x2 on a phone, a thin rule above. PLAY stays the loudest thing; the tiles have no box
   at rest, only the hover/focus pink and the .here cyan (main.ts) show. */
#titleBox .games{margin-top:18px;padding-top:12px;border-top:1px solid rgba(34,227,255,.14);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
#titleBox .game{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-height:44px;
  padding:8px 6px 7px;border:1px solid transparent;color:rgba(207,233,245,.72);text-decoration:none;box-sizing:border-box;
  transition:border-color .15s,color .15s;}
#titleBox .game .gn{font-size:11px;letter-spacing:.2em;text-transform:uppercase;}
#titleBox .game .gd{font-size:9px;line-height:1.45;letter-spacing:.06em;opacity:.45;}
#titleBox a.game:hover,#titleBox a.game:focus-visible{border-color:rgba(255,141,245,.6);color:#ff8df5;outline:none;}
#titleBox .game.here{border-color:rgba(34,227,255,.4);color:#cfe9f5;}
@media (max-width:440px){
  #titleBox{padding:24px 22px 22px;}
  #titleBox .games{grid-template-columns:repeat(2,minmax(0,1fr));}
}
#titleBox .row{margin-top:20px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
#titleBox button{background:transparent;color:#cfe9f5;border:1px solid rgba(34,227,255,.4);
  padding:10px 18px;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:border-color .15s,color .15s;}
#titleBox button:hover,#titleBox button:focus-visible{border-color:#ff8df5;color:#ff8df5;outline:none;}
#btnStart{border-color:rgba(34,227,255,.8);color:#eaf9ff;box-shadow:0 0 14px rgba(34,227,255,.2);}
#titleBox .note{min-height:16px;margin:12px 0 0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#ff8df5;opacity:0;transition:opacity .2s;}
#titleBox .note.show{opacity:.85;}
#footnav{position:fixed;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);
  bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:6px;justify-content:center;flex-wrap:wrap;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;}
#footnav a,#footnav button{color:#cfe9f5;opacity:.6;text-decoration:none;padding:10px 8px;
  background:none;border:none;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;}
#footnav a:hover,#footnav a:focus-visible,#footnav button:hover,#footnav button:focus-visible{opacity:1;color:#22e3ff;outline:none;}
#footnav .version{flex-basis:100%;text-align:center;font-size:9px;letter-spacing:.2em;opacity:.35;}
/* the desktop splash (src/ui/splash.ts): a phone or tablet gets this over the title, in the
   title box's voice. Hidden by default; (pointer: coarse) shows it with no JS so the title
   never flashes first, body.splash covers a touch screen with a fine pointer. Dismissal
   removes it and sets body.nosplash. 16px gutters at least, the safe areas past that. */
#splash{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;box-sizing:border-box;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:#07050f;text-align:center;-webkit-tap-highlight-color:transparent;}
@media (pointer:coarse){#splash{display:flex;} body:not(.nosplash) #title{visibility:hidden;}}
body.splash #splash{display:flex;} body.splash #title{visibility:hidden;}
#splashBox{box-sizing:border-box;width:100%;max-width:480px;padding:28px 36px 26px;border:1px solid rgba(34,227,255,.35);
  box-shadow:0 0 40px rgba(255,61,240,.14) inset,0 0 26px rgba(34,227,255,.14);background:rgba(7,5,15,.6);}
#splashBox .name{font-size:44px;line-height:1;letter-spacing:.12em;margin:0 0 18px;font-weight:700;color:#eaf9ff;
  text-shadow:0 0 18px rgba(34,227,255,.55),0 0 42px rgba(255,61,240,.25);}
#splashBox .line{font-size:13px;line-height:1.7;margin:0;opacity:.78;}
#splashBox .line + .line{margin-top:10px;}
@media (max-width:440px){#splashBox{padding:24px 22px 22px;}}
/* multiplayer lobby: the title box's twin, shown in its place (src/ui/lobby.ts) */
#lobby{display:none;width:300px;max-width:calc(100vw - 40px);padding:22px 28px 20px;text-align:center;
  border:1px solid rgba(34,227,255,.35);background:rgba(7,5,15,.6);
  box-shadow:0 0 40px rgba(255,61,240,.14) inset,0 0 26px rgba(34,227,255,.14);}
#lobby h2{margin:0 0 14px;font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:#eaf9ff;
  text-shadow:0 0 14px rgba(34,227,255,.45);}
#lobby .gh{font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.5;margin:14px 0 6px;}
#lobby .lbl{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.75;}
#lobby input{display:block;width:100%;box-sizing:border-box;margin:6px 0 0;padding:8px 10px;font:inherit;font-size:14px;
  letter-spacing:.08em;text-align:center;color:#eaf9ff;background:rgba(34,227,255,.06);
  border:1px solid rgba(34,227,255,.35);outline:none;-webkit-user-select:text;user-select:text;}
#lobby input:focus{border-color:#22e3ff;}
#lobby .row{margin-top:10px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
#lobby button{background:transparent;color:#cfe9f5;border:1px solid rgba(34,227,255,.4);padding:8px 14px;
  font:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:border-color .15s,color .15s;}
#lobby button:hover,#lobby button:focus-visible{border-color:#ff8df5;color:#ff8df5;outline:none;}
#lobby button:disabled{opacity:.35;cursor:default;}
#lobby button:disabled:hover{border-color:rgba(34,227,255,.4);color:#cfe9f5;}
#lbStart{border-color:rgba(34,227,255,.8);color:#eaf9ff;box-shadow:0 0 14px rgba(34,227,255,.2);}
#lobby .note{min-height:16px;margin:12px 0 0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#ff8df5;opacity:.85;}
#lbRoom{display:none;}
#lbRoomName{font-size:20px;letter-spacing:.14em;color:#eaf9ff;text-shadow:0 0 14px rgba(34,227,255,.45);}
#lbPlayers{list-style:none;margin:14px 0 0;padding:0;font-size:12px;letter-spacing:.1em;}
#lbPlayers li{display:flex;justify-content:space-between;gap:12px;padding:6px 2px;border-bottom:1px solid rgba(34,227,255,.12);}
#lbPlayers .pn{flex:1;text-align:left;}
#lbPlayers .pk{opacity:.6;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#22e3ff;}
#lbPlayers .pp{opacity:.5;font-size:10px;letter-spacing:.2em;text-transform:uppercase;min-width:40px;text-align:right;}
/* the level and mech pickers: a row of choices, the pick lit; .ro is read-only (the guest's view of the host's level) */
#lobby .pick{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
#lobby .pick b{font-weight:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:5px 8px;
  border:1px solid rgba(34,227,255,.22);opacity:.55;cursor:pointer;transition:border-color .15s,opacity .15s;}
#lobby .pick b:hover{opacity:.9;border-color:rgba(255,141,245,.6);}
#lobby .pick b.sel{opacity:1;color:#22e3ff;border-color:rgba(34,227,255,.7);}
#lobby .pick.ro b{cursor:default;}
#lobby .pick.ro b:hover{opacity:.55;border-color:rgba(34,227,255,.22);}
#lobby .pick.ro b.sel:hover{opacity:1;border-color:rgba(34,227,255,.7);}
/* the steering and level readouts would print through the footnav, so they wait for START */
body.title #mode,body.title #gamemode{display:none;}
/* share toast (src/share.ts): shown after a clipboard copy on browsers with no share sheet */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(64px + env(safe-area-inset-bottom,0px));
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#eaf9ff;
  background:rgba(7,5,15,.92);border:1px solid rgba(34,227,255,.4);padding:8px 16px;
  pointer-events:none;z-index:40;opacity:0;transition:opacity .15s;}
#toast.show{opacity:1;}
/* ---- the adventure (DESIGN.md), owned by the ui stream ---- */
/* the salvage carried, top right in amber (ui/hud.ts paintAdv); the perks held stack under it */
#salvage{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:calc(18px + env(safe-area-inset-right,0px));
  display:none;pointer-events:none;z-index:2;text-align:right;white-space:nowrap;
  font-size:20px;letter-spacing:.14em;color:#F0CE7A;text-shadow:0 0 14px rgba(240,206,122,.55);}
#salvage .gl{font-size:13px;margin-right:8px;opacity:.8;vertical-align:2px;}
#salvage.pop{animation:salvagePop .35s ease-out;}
@keyframes salvagePop{0%{transform:scale(1.25);text-shadow:0 0 22px rgba(240,206,122,.9);}100%{transform:scale(1);}}
/* a column of six; the seventh starts a second column to the LEFT (wrap-reverse
   runs the columns right to left), so a long build never reaches the hull bars */
#perks{position:fixed;top:calc(48px + env(safe-area-inset-top,0px));right:calc(18px + env(safe-area-inset-right,0px));
  display:none;flex-direction:column;flex-wrap:wrap-reverse;align-content:flex-start;gap:5px 16px;max-height:97px;
  pointer-events:none;z-index:2;text-align:right;
  font-size:10px;line-height:12px;letter-spacing:.2em;text-transform:uppercase;color:#cfe9f5;}
#perks .perk{--col:#22e3ff;opacity:.72;white-space:nowrap;}
#perks .perk:before{content:'';display:inline-block;width:5px;height:5px;margin-right:8px;vertical-align:1px;
  background:var(--col);box-shadow:0 0 6px var(--col);}
/* the card between floors (ui/hud.ts showFloorCard): the floor's name pops like the countdown
   digits, the story line under it, and the whole card fades on its own in 2.6 s */
#floorcard{position:fixed;top:22%;left:0;right:0;text-align:center;pointer-events:none;z-index:2;opacity:0;} /* under the choice overlay (3) */
#floorcard .big{font-size:40px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:#eaf9ff;
  text-shadow:0 0 26px rgba(34,227,255,.75),0 0 60px rgba(34,227,255,.35);}
#floorcard .line{margin-top:12px;font-size:13px;letter-spacing:.12em;text-transform:lowercase;color:#cfe9f5;opacity:.8;}
#floorcard.show{animation:floorCard 2.6s ease-out forwards;}
@keyframes floorCard{0%{opacity:0;transform:scale(1.5);}10%{opacity:1;transform:scale(1);}70%{opacity:1;}100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){#floorcard.show{animation-name:countFade;}}
/* the win card (showWinCard): the same card in gold */
#result.win{padding:26px 0 30px;background:radial-gradient(ellipse 46% 100% at 50% 50%,rgba(7,5,15,.82) 35%,rgba(7,5,15,0) 100%);} /* a dark pool under the gold: it reads on the core's magenta floor */
#result.win .big{color:#fff3cf;text-shadow:0 0 26px rgba(240,206,122,.8),0 0 70px rgba(240,206,122,.4);}
#result.win .sm{color:#f5e6bd;}
/* the pick-one-of-three overlay (ui/choice.ts): over the HUD, under the pause.
   A card is a button with its perk's colour along the top edge and the key hint in the corner. */
#choice{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:rgba(7,5,15,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:3;text-align:center;
  opacity:0;transition:opacity .18s;}
#choice.show{opacity:1;}
#choice .ch{font-size:15px;letter-spacing:.32em;text-transform:uppercase;color:#eaf9ff;text-shadow:0 0 20px rgba(34,227,255,.55);}
#choice .cards{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:0 16px;}
#choice .card{--col:#22e3ff;position:relative;width:224px;min-height:120px;padding:20px 22px 16px;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:rgba(7,5,15,.8);border:1px solid rgba(34,227,255,.3);border-top:3px solid var(--col);
  box-shadow:0 0 22px rgba(34,227,255,.1);color:#cfe9f5;font:inherit;cursor:pointer;text-align:center;
  transition:border-color .15s,box-shadow .15s,transform .15s;}
#choice .card:hover,#choice .card:focus-visible,#choice .card.pad{border-color:#ff8df5;border-top-color:var(--col);box-shadow:0 0 26px rgba(255,61,240,.22);transform:translateY(-2px);outline:none;}
#choice .card.pad .key{opacity:1;color:#ff8df5;border-color:#ff8df5;} /* the pad's highlight: the key box lights too */
#choice .card .key{position:absolute;top:6px;left:8px;font-size:10px;letter-spacing:.1em;opacity:.5;
  width:16px;height:16px;line-height:16px;border:1px solid rgba(207,233,245,.4);}
#choice .card .nm{font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:#eaf9ff;text-shadow:0 0 12px var(--col);}
#choice .card .bl{font-size:11px;line-height:1.5;letter-spacing:.06em;opacity:.78;}
#choice .hint{font-size:10px;letter-spacing:.26em;text-transform:uppercase;opacity:.45;}
/* the hangar (ui/hangar.ts): the title box's twin, wide enough for the unlock grid at 1280 */
#hangar{display:none;width:min(1160px,calc(100vw - 60px));max-height:calc(100vh - 110px);overflow-y:auto;box-sizing:border-box;
  padding:16px 26px 14px;text-align:left;
  border:1px solid rgba(34,227,255,.35);background:rgba(7,5,15,.72);
  box-shadow:0 0 40px rgba(255,61,240,.14) inset,0 0 26px rgba(34,227,255,.14);}
#hangar .hh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}
#hangar h2{margin:0;font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:#eaf9ff;text-shadow:0 0 14px rgba(34,227,255,.45);}
#hgBank{font-size:20px;letter-spacing:.14em;color:#F0CE7A;text-shadow:0 0 14px rgba(240,206,122,.55);white-space:nowrap;}
#hgBank .gl{font-size:13px;margin-right:8px;opacity:.8;vertical-align:2px;}
#hgBank .lbl{margin-left:10px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#cfe9f5;opacity:.5;}
#hangar .gh{font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.5;margin:11px 0 5px;}
/* four columns at 1280 and up (8 guns are two rows, 20 perks five); a phone stacks them */
#hangar .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;}
#hangar .empty{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.35;padding:6px 2px;}
/* a row: glyph | name | cost on the first line, the blurb under; a button, so a click buys */
#hangar .hrow{--col:#22e3ff;display:grid;grid-template-columns:22px 1fr auto;grid-template-rows:auto auto;column-gap:8px;row-gap:3px;
  align-items:center;text-align:left;padding:7px 9px 7px 8px;box-sizing:border-box;min-width:0;
  background:rgba(7,5,15,.5);border:1px solid rgba(34,227,255,.18);color:#cfe9f5;font:inherit;cursor:pointer;
  transition:border-color .15s,background .15s;}
#hangar .hrow .gl{grid-row:1 / span 2;width:22px;height:22px;line-height:22px;text-align:center;
  font-size:12px;letter-spacing:0;color:var(--col);border:1px solid var(--col);opacity:.55;}
#hangar .hrow .nm{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#eaf9ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#hangar .hrow .cost{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#F0CE7A;white-space:nowrap;}
#hangar .hrow .bl{grid-column:2 / span 2;font-size:9px;letter-spacing:.06em;line-height:1.35;opacity:.55;}
#hangar .hrow.can{border-color:rgba(240,206,122,.5);}
#hangar .hrow.can:hover,#hangar .hrow.can:focus-visible{border-color:#ff8df5;background:rgba(255,61,240,.06);outline:none;}
#hangar .hrow.own{cursor:default;}
#hangar .hrow.own .gl{opacity:1;box-shadow:0 0 10px var(--col);}
#hangar .hrow.own .cost{color:#22e3ff;opacity:.8;}
#hangar .hrow.locked{opacity:.55;}
#hangar .hrow.locked .cost{color:#cfe9f5;opacity:.6;}
#hangar .hrow .cost.need{color:#ff8df5;text-shadow:0 0 10px rgba(255,61,240,.6);}
/* the pad's highlight (ui/padnav.ts) on a row, a DROP AT pick or BACK */
#hangar .hrow.pad,#hangar .pick b.pad,#hangar button#hgBack.pad{border-color:#ff8df5;box-shadow:0 0 16px rgba(255,61,240,.3);opacity:1;}
#hangar .pick b.pad,#hangar button#hgBack.pad{color:#ff8df5;}
/* the bottom band: the two drops, DROP AT and the records side by side */
#hangar .bottom{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.2fr);gap:16px;align-items:start;}
#hangar .bottom .grid{grid-template-columns:1fr 1fr;}
#hangar .pick{display:flex;flex-wrap:wrap;gap:6px;}
#hangar .pick b{font-weight:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;
  border:1px solid rgba(34,227,255,.22);opacity:.6;cursor:pointer;transition:border-color .15s,opacity .15s;}
#hangar .pick b:hover{opacity:.9;border-color:rgba(255,141,245,.6);}
#hangar .pick b.sel{opacity:1;color:#22e3ff;border-color:rgba(34,227,255,.7);}
#hangar .pick b.off{opacity:.25;cursor:default;}
#hangar .pick b.off:hover{opacity:.25;border-color:rgba(34,227,255,.22);}
#hgRecords{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;}
#hgRecords .k{opacity:.5;margin-right:6px;}
#hgRecords .v{color:#eaf9ff;}
#hangar .note{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#ff8df5;opacity:0;transition:opacity .2s;}
#hangar .note.show{opacity:.85;}
#hangar .row{margin-top:12px;display:flex;justify-content:center;align-items:center;gap:18px;}
#hangar button#hgBack{background:transparent;color:#cfe9f5;border:1px solid rgba(34,227,255,.4);padding:8px 16px;
  font:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:border-color .15s,color .15s;}
#hangar button#hgBack:hover,#hangar button#hgBack:focus-visible{border-color:#ff8df5;color:#ff8df5;outline:none;}
@media (max-width:760px){#hangar .bottom{grid-template-columns:1fr;}#hangar .bottom .grid{grid-template-columns:1fr;}#hangar{padding:14px 14px 12px;}}