/* MONUMENT — the page's stylesheet: it shares nothing with index.html's module scope. */
  /* iOS Safari auto-inflates text it mistakes for body copy, silently overriding font-size — kill it */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root { --topbar: 45px; }
  html, body { height: 100%; overflow: hidden; background: #000; }
  body { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #5ad0ff; }
  #stage { position: fixed; inset: 0; touch-action: none; }
  #stage canvas { display: block; }
  #topBar {
    position: fixed; left: 0; right: 0; top: 0; z-index: 15;
    display: flex; align-items: center; justify-content: space-between;
    height: calc(var(--topbar) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 14px 0;
    background: rgba(2, 6, 16, .55); border-bottom: 1px solid rgba(12,200,255,.25);
    font-size: 12px; letter-spacing: .18em; color: #2f8fc4;
    pointer-events: none;
  }
  #topBar b { color: #5ad0ff; font-weight: 600; }
  #topLeft { flex: none; white-space: nowrap; }
  #topRight { flex: 1 1 auto; min-width: 0; margin-left: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
  #hudKeys { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; }
  body:not(.desk) #hudKeys { display: none; }
  @media (max-width: 900px) { #hudKeys { display: none; } }
  #compass {
    position: fixed; left: 50%; top: calc(var(--topbar) + 6px + env(safe-area-inset-top, 0px)); z-index: 14; transform: translateX(-50%);
    width: 320px; height: 20px; overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  }
  #compassStrip { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
  #compassStrip span {
    position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; letter-spacing: .12em; line-height: 20px;
    color: #5ad0ff; text-shadow: 0 0 10px rgba(90,208,255,.8); white-space: nowrap;
  }
  #compassStrip span.card { color: #fff; font-weight: 600; }
  #compassStrip i { position: absolute; top: 15px; width: 1px; height: 4px; background: rgba(90,208,255,.6); }
  #compass::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.8); }
  body.paused #compass { display: none; }
  #questTrack {
    position: fixed; left: 50%; top: calc(var(--topbar) + 32px + env(safe-area-inset-top, 0px)); z-index: 14; transform: translateX(-50%);
    max-width: min(560px, calc(100vw - 32px)); text-align: center; pointer-events: none; text-shadow: 0 0 10px rgba(90,208,255,.6);
  }
  #questTrack .qtHead { display: flex; justify-content: center; align-items: baseline; gap: 10px; white-space: nowrap; font-size: 11px; letter-spacing: .16em; }
  #questTrack .qtHead b { color: #fff; font-weight: 600; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
  #questTrack .qtProg { color: #5ad0ff; }
  #questTrack .qtStep { margin-top: 3px; font-size: 11px; letter-spacing: .06em; color: rgba(90,208,255,.75); }
  #questTrack.done .qtProg { color: #fff36b; }
  body.paused #questTrack, body.cutscene #questTrack, body.dialog #questTrack { display: none; }
  #objMark { position: fixed; left: 0; top: 0; z-index: 9; pointer-events: none; --d: 51px; }
  #objMark i { position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); box-sizing: border-box; transform: translate(-50%, -50%) rotate(45deg); border: calc(var(--d) / 12 + 1px) solid #0cc8ff;
    box-shadow: inset 0 0 calc(var(--d) * .22 + 2px) rgba(12,200,255,.4); filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 10px rgba(12,200,255,.95)); animation: objPulse 1.6s ease-in-out infinite; }
  #objMark span { position: absolute; left: 0; top: calc(var(--d) * .8 + 4px); transform: translateX(-50%); font-size: 11px; letter-spacing: .12em; color: #5ad0ff; text-shadow: 0 0 8px rgba(90,208,255,.8); white-space: nowrap; }
  @keyframes objPulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
  #objArrow { position: fixed; left: 0; top: 0; z-index: 9; pointer-events: none; --a: 44px; transform-origin: 0 0; }
  #objArrow i { position: absolute; top: calc(var(--a) * -.5); width: var(--a); height: var(--a); box-sizing: border-box;
    border-top: calc(var(--a) * .16) solid #0cc8ff; border-right: calc(var(--a) * .16) solid #0cc8ff;
    transform: rotate(45deg); filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 10px rgba(12,200,255,.95)); animation: objArrow .9s ease-in-out infinite; }
  #objArrow i:nth-child(1) { left: calc(var(--a) * -2.3); }
  #objArrow i:nth-child(2) { left: calc(var(--a) * -1.7); animation-delay: .15s; }
  #objArrow i:nth-child(3) { left: calc(var(--a) * -1.1); animation-delay: .3s; }
  @keyframes objArrow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
  #minimap { position: fixed; z-index: 11; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(var(--footer-h, 16px) + 12px); border-radius: 50%; pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(12,200,255,.35)); }
  body:not(.desk) #minimap { right: auto; bottom: auto; left: calc(16px + env(safe-area-inset-left, 0px)); top: calc(var(--topbar) + 16px + env(safe-area-inset-top, 0px)); width: 132px !important; height: 132px !important; }
  body.paused #objMark, body.cutscene #objMark, body.dialog #objMark, body.lobby #objMark,
  body.paused #objArrow, body.cutscene #objArrow, body.dialog #objArrow, body.lobby #objArrow,
  body.paused #minimap, body.cutscene #minimap, body.dialog #minimap, body.lobby #minimap { display: none; }
  #hudRight { display: flex; flex: none; gap: 14px; align-items: baseline; margin-left: 16px; white-space: nowrap; }
  #hudCoin { position: fixed; z-index: 11; right: calc(16px + env(safe-area-inset-right, 0px)); top: calc(var(--topbar) + 16px); width: 76px; height: 76px; pointer-events: none; filter: drop-shadow(0 0 8px rgba(255, 200, 80, .5)); }
  #hudCoin svg { width: 100%; height: 100%; display: block; transform-origin: 50% 50%; }
  #hudCoin text { font: 700 10px/1 -apple-system, system-ui, 'Segoe UI', sans-serif; fill: #fff; paint-order: stroke; stroke: #000; stroke-width: 2.6px; stroke-linejoin: round; }
  #hudCoin .starPt { fill: rgba(70, 52, 8, .55); stroke: url(#coinGrad); stroke-width: 1.4; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 50%; transition: fill .14s ease-out; }
  #hudCoin .starPt.on { fill: url(#coinGrad); }
  #hudCoin .starPt.pop { animation: ptPop .42s ease-out; }
  @keyframes ptPop { 0% { transform: scale(1); } 38% { transform: scale(1.4); filter: brightness(2.2) drop-shadow(0 0 6px rgba(255, 230, 140, 1)); } 100% { transform: scale(1); } }
  #hudCoin.full { animation: starFull 2.6s ease-in-out infinite; }
  @keyframes starFull { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(255, 200, 80, .5)); } 50% { transform: scale(1.07); filter: drop-shadow(0 0 14px rgba(255, 225, 130, .95)) brightness(1.25); } }
  #hudCoin.flash svg { animation: starFlash .45s ease-out; }
  @keyframes starFlash { 0% { transform: scale(1); filter: none; } 28% { transform: scale(1.28); filter: brightness(2.6) drop-shadow(0 0 12px rgba(255, 225, 130, 1)); } 100% { transform: scale(1); filter: none; } }
  body:not(.desk) #hudCoin { right: calc(16px + 92px + 12px + env(safe-area-inset-right, 0px)); top: 70px; }
  body:not(.desk).chat #hudCoin { right: calc(16px + 48px + 12px + env(safe-area-inset-right, 0px)); top: calc(40px + env(safe-area-inset-top, 0px)); }
  #hudXp { position: fixed; z-index: 11; right: calc(16px + env(safe-area-inset-right, 0px)); top: calc(var(--topbar) + 100px); display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 5px; border-radius: 11px; background: rgba(2, 6, 16, .6); border: 1px solid rgba(12, 200, 255, .35); pointer-events: none; white-space: nowrap; filter: drop-shadow(0 0 6px rgba(12, 200, 255, .3)); }
  #hudXp .xpRank { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #5ad0ff; color: #06202e; font: 700 10px/1 -apple-system, system-ui, 'Segoe UI', sans-serif; }
  #hudXp .xpN { color: #dffaff; font: 700 12px/1 -apple-system, system-ui, 'Segoe UI', sans-serif; }
  #hudXp .xpU { color: #4fb6df; font: 700 9px/1 -apple-system, system-ui, 'Segoe UI', sans-serif; letter-spacing: .14em; }
  #hudXp.gain { animation: xpGain .7s ease-out; }
  #hudHp, #hudFoot { position: fixed; z-index: 11; right: calc(16px + env(safe-area-inset-right, 0px)); top: calc(var(--topbar) + 130px); display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; background: rgba(2, 6, 16, .6); border: 1px solid rgba(255, 90, 160, .35); pointer-events: none; white-space: nowrap; filter: drop-shadow(0 0 6px rgba(255, 90, 160, .3)); }
  #hudHp[hidden], #hudFoot[hidden] { display: none; }
  #hudHp .hpU, #hudFoot .hpU { color: #ff6fb5; font: 700 9px/1 -apple-system, system-ui, 'Segoe UI', sans-serif; letter-spacing: .14em; }
  #hudHp .hpN, #hudFoot .hpN { color: #ffe3f1; font: 700 12px/1 -apple-system, system-ui, 'Segoe UI', sans-serif; }
  #hudHp.low .hpN, #hudFoot.low .hpN { color: #ff4d9e; }
  @keyframes xpGain { 0% { border-color: rgba(150, 240, 255, .95); box-shadow: 0 0 18px rgba(90, 208, 255, .8); } 100% { border-color: rgba(12, 200, 255, .35); box-shadow: none; } }
  body:not(.desk) #hudXp { right: calc(16px + 92px + 12px + env(safe-area-inset-right, 0px)); top: 154px; }
  body:not(.desk) #hudHp, body:not(.desk) #hudFoot { right: calc(16px + 92px + 12px + env(safe-area-inset-right, 0px)); top: 184px; }
  body:not(.desk).chat #hudXp { right: calc(16px + 48px + 12px + env(safe-area-inset-right, 0px)); top: calc(124px + env(safe-area-inset-top, 0px)); }
  body:not(.desk).chat #hudHp, body:not(.desk).chat #hudFoot { right: calc(16px + 48px + 12px + env(safe-area-inset-right, 0px)); top: calc(154px + env(safe-area-inset-top, 0px)); }
  #hudStackL, #hudStackR {
    position: fixed; top: calc(var(--topbar) + 16px); z-index: 14;
    display: flex; flex-direction: column; gap: 6px; pointer-events: none;
  }
  #hudStackL { left: 16px; align-items: flex-start; }
  #perfHud {
    position: fixed; right: 16px; top: calc(var(--topbar) + 42px); z-index: 13; pointer-events: none;
    padding: 8px 12px; background: rgba(2, 6, 16, .6); border: 1px solid rgba(12,200,255,.25); border-radius: 8px;
    font: 12px/1.7 ui-monospace, Menlo, monospace; letter-spacing: .06em; color: #2f8fc4; text-align: left; white-space: pre;
  }
  #perfHud b { color: #5ad0ff; font-weight: 600; }
  #perfHud b.fR { color: #ff5a7a; } #perfHud b.fY { color: #ffd166; }
  #perfHud b.fB { color: #5ad0ff; } #perfHud b.fG { color: #6dff9e; }
  #hudStackR { right: 16px; align-items: flex-end; }
  .hudMeter {
    display: flex; gap: 3px; padding: 5px 8px;
    background: rgba(2, 6, 16, .55); border: 1px solid rgba(12,200,255,.25); border-radius: 10px;
    transition: opacity .25s ease-out;
  }
  .hudMeter.fade { opacity: 0; }
  .hudMeter[hidden] { display: none; }
  .hudMeter.deny { animation: denyPulse .18s ease-in-out 3; }
  @keyframes denyPulse { 50% { border-color: rgba(12,200,255,.95); box-shadow: 0 0 14px rgba(12,200,255,.65); } }
  .hudBarMeter {
    width: 340px; padding: 5px 8px;
    background: rgba(2, 6, 16, .55); border: 1px solid rgba(12,200,255,.25); border-radius: 10px;
    transition: opacity .25s ease-out;
  }
  .hudBarMeter.fade { opacity: 0; }
  .hudBarMeter[hidden] { display: none; }
  .hudBarMeter > b {
    display: block; height: 6px; width: 0%; border-radius: 3px;
    transition: width .12s linear;
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 70%),
                      linear-gradient(90deg, rgba(12,200,255,.45), #5ad0ff 65%, #c9f2ff);
    background-size: 200% 100%, 100% 100%;
    animation: meterSheen 1.9s linear infinite;
    box-shadow: 0 0 8px rgba(90,208,255,.6);
  }
  .hudBarMeter { position: relative; transition: opacity .25s ease-out, width .3s ease; }
  .hudBarMeter.pill { width: 34px; }
  .hudBarMeter.pink { border-color: rgba(255,90,160,.45); }
  .hudBarMeter .lbl b { color: #fff; font-weight: 600; }
  .hudBarMeter .lbl .chg { color: #5ad0ff; text-shadow: 0 0 10px rgba(90,208,255,.8); }
  .hudBarMeter .lbl {
    position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    white-space: nowrap; font-size: 10px; letter-spacing: .2em;
    color: #ffb3d2; text-shadow: 0 0 10px rgba(255,90,160,.8);
  }
  .hudBarMeter > b.pulse { animation: boostPulse .7s ease-in-out infinite; }
  @keyframes boostPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.7); } }
  .hudBarMeter > b.burn {
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 80%),
                      linear-gradient(90deg, rgba(255,90,160,.4), #ff5aa0 60%, #ffd0e4);
    box-shadow: 0 0 14px rgba(255,90,160,.95), 0 0 30px rgba(255,90,160,.5);
    animation-direction: reverse;
  }
  @keyframes meterSheen { 0% { background-position: 200% 0, 0 0; } 100% { background-position: -100% 0, 0 0; } }
  .hudMeter i {
    width: 10px; height: 6px; border-radius: 3px;
    background: #5ad0ff; box-shadow: 0 0 6px rgba(90,208,255,.7);
  }
  .hudMeter i.off { background: rgba(12,200,255,.13); box-shadow: none; }
  .hudMeter i.flash { animation: pillFlash .5s linear infinite; }
  @keyframes pillFlash { 0%, 100% { background: rgba(12,200,255,.13); box-shadow: none; } 50% { background: #5ad0ff; box-shadow: 0 0 6px rgba(90,208,255,.7); } }
  #topLeft .ttl { height: 26px; margin-right: 12px; vertical-align: middle; }
  #status {
    position: fixed; left: 16px; top: calc(var(--topbar) + 42px); z-index: 10; font-size: 11px; letter-spacing: .18em;
    color: #2f8fc4; text-align: left; line-height: 1.7;
  }
  #status b { color: #5ad0ff; font-weight: 600; }
  #status { overflow-wrap: anywhere; }
  @media (min-width: 900px) { body:not(.chat) #status { max-width: calc(33.333vw - 16px); } }
  #pilots { margin-top: 4px; }
  #pilotCount { position: fixed; left: 16px; top: calc(var(--topbar) + 18px); z-index: 14; font-size: 11px; letter-spacing: .18em; color: #2f8fc4; pointer-events: none; }
  #pilotCount b { color: #5ad0ff; }
  #pauseTag {
    font-size: 11px; letter-spacing: .3em; color: #5ad0ff; text-shadow: 0 0 12px rgba(90,208,255,.8); white-space: nowrap; pointer-events: none; text-indent: 0;
  }
  body:not(.desk) #pauseTag { display: none; }
  #pauseTag b { color: #fff; font-weight: 600; }
  #pilots.clip { overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 96px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 96px), transparent 100%); }
  #hitch { margin: 6px 0 0; font: 10px/1.5 ui-monospace, Menlo, monospace; letter-spacing: 0; color: #ff9ab0; white-space: pre-wrap; max-width: 60vw; text-align: left; }
  #pilots span { display: block; cursor: pointer; }
  #pilots span.me::after { content: ' ◀'; }
  /* THE PAUSE SCREEN (pause.js): full screen, opaque, over every HUD layer; its tab bar, then the shown tab's pane */
  #pauseScreen { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #02060f; color: #62b8ea;
    padding: calc(14px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px)); box-sizing: border-box;
    font-size: 12px; letter-spacing: .18em; }
  #pauseScreen[hidden] { display: none; }
  #pauseScreen .psBar { display: flex; align-items: center; gap: 18px; flex: none; padding-bottom: 12px; border-bottom: 1px solid rgba(12,200,255,.3); margin-bottom: 16px; }
  #pauseScreen .psTabs { display: flex; gap: 0; }
  #pauseScreen .psTabs button { padding: 8px 26px; border: 1px solid rgba(12,200,255,.7); background: rgba(2, 6, 16, .6); color: rgba(138,224,255,.75); font: inherit; font-size: 12px; letter-spacing: .34em; text-indent: .34em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #pauseScreen .psTabs button:first-child { border-radius: 18px 0 0 18px; }
  #pauseScreen .psTabs button:last-child { border-radius: 0 18px 18px 0; }
  #pauseScreen .psTabs button + button { border-left: none; }
  #pauseScreen .psTabs button.on { color: #fff; background: rgba(12,200,255,.22); text-shadow: 0 0 10px rgba(90,208,255,.8); }
  #pauseScreen .psTabs button:not(.on):hover { color: #fff; }
  #pauseTag { flex: 1; text-align: right; font-size: 11px; color: #62b8ea; }
  #pauseTag[hidden] { display: block; visibility: hidden; }
  body:not(.desk) #pauseTag { visibility: hidden; }
  #pauseScreen .psClose { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(12,200,255,.7); background: rgba(12,200,255,.12); color: #8ae0ff; font: inherit; font-size: 18px; letter-spacing: 0; cursor: pointer; }
  #pauseScreen .psClose:hover { color: #fff; background: rgba(12,200,255,.25); }
  #pauseScreen .psPane { display: none; flex: 1; min-height: 0; }
  body.tab-map #pauseScreen .psPane[data-pane="map"] { display: grid; grid-template-columns: minmax(300px, 30%) 1fr; gap: 24px; }
  body.tab-items #pauseScreen .psPane[data-pane="items"] { display: grid; grid-template-columns: minmax(300px, 36%) 1fr; gap: 28px; }
  body.tab-settings #pauseScreen .psPane[data-pane="settings"] { display: flex; }
  #pausePanel { flex-direction: column; align-items: stretch; gap: 14px; overflow-y: auto; overscroll-behavior: contain; max-width: 980px; padding-bottom: 12px; color: #2f8fc4; }
  #questLog, #invItems, #invShips { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
  #pauseScreen .sub { align-self: flex-start; font-size: 13px; letter-spacing: .34em; color: #fff; text-shadow: 0 0 10px rgba(90,208,255,.6); margin: 18px 0 6px; }
  #pauseScreen .sub:first-child { margin-top: 2px; }
  #pauseScreen b { color: #8ae0ff; font-weight: 600; }
  #pauseScreen .lbl b.hi, #pauseScreen b.hi { color: #fff; }
  #pauseScreen .srow { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 14px; width: 100%; }
  #pauseScreen .lbl { color: #62b8ea; font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-align: left; }
  #pauseScreen .pill { height: 32px; box-sizing: border-box; padding: 0 16px; border: 1px solid rgba(12,200,255,.7); border-radius: 16px; font: inherit; font-size: 11px; letter-spacing: .2em; background: rgba(12,200,255,.12); color: #8ae0ff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #pauseScreen .pill:hover { background: rgba(12,200,255,.22); color: #fff; }
  /* THE MAP (pause-map.js) */
  #mapBox { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  #mapView { flex: 1; position: relative; min-height: 0; border: 1px solid rgba(12,200,255,.4); border-radius: 10px; overflow: hidden; background: #02060f; }
  #mapView canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  #pauseMap { cursor: crosshair; touch-action: none; }
  #mapGlobe { transition: opacity .6s ease-out; }
  #mapView.loading #mapGlobe { opacity: 0; transition: none; }
  #mapInfo { flex: none; font-size: 11px; color: #8ae0ff; min-height: 30px; display: flex; align-items: center; gap: 10px; }
  #mapInfo .pill { height: 26px; padding: 0 12px; }
  #warpAsk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 16, .6); border-radius: 10px; }
  #warpAsk[hidden] { display: none; }
  #warpAsk .waBox { padding: 22px 28px; border: 1px solid rgba(12,200,255,.7); border-radius: 14px; background: #02060f; box-shadow: 0 0 24px rgba(12,200,255,.35); display: flex; flex-direction: column; gap: 18px; align-items: center; }
  #warpAsk .waQ { color: #fff; font-size: 13px; letter-spacing: .14em; }
  #warpAsk .waBtns { display: flex; gap: 14px; }
  /* THE ITEMS (pause-items.js) */
  .invGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .invItem { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border: 1px solid rgba(12,200,255,.4); border-radius: 10px; background: rgba(12,200,255,.06); color: #8ae0ff; font: inherit; font-size: 11px; letter-spacing: .12em; text-align: left; cursor: pointer; }
  .invItem .ico { font-size: 22px; letter-spacing: 0; }
  .invItem .nm { color: #fff; }
  .invItem .tag { font-size: 10px; color: #62b8ea; letter-spacing: .2em; }
  .invItem.on, .invItem:hover { border-color: #0cc8ff; background: rgba(12,200,255,.16); }
  .invWhat { margin-top: 8px; padding: 12px; border-top: 1px solid rgba(12,200,255,.25); color: #8ae0ff; font-size: 11px; line-height: 1.6; letter-spacing: .08em; }
  .invShips { display: flex; gap: 12px; flex-wrap: wrap; }
  .invShip { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 200px; padding: 12px 16px; border: 1px solid rgba(12,200,255,.4); border-left: 4px solid var(--c); border-radius: 10px; background: rgba(12,200,255,.06); font: inherit; text-align: left; cursor: pointer; }
  .invShip.on { border-color: #0cc8ff; border-left-color: var(--c); background: rgba(12,200,255,.14); }
  .invShip .shNm { color: #fff; font-size: 16px; letter-spacing: .3em; }
  .invShip .shRole { color: #62b8ea; font-size: 10px; letter-spacing: .1em; }
  .invShip .shTeam { color: var(--c); font-size: 11px; letter-spacing: .3em; }
  #invShips .upgHead { display: flex; align-items: baseline; gap: 16px; }
  #invShips .bal { color: #8ec9e8; } #invShips .bal b { color: #ffd94d; }
  .upgTree { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
  .upgBranch { flex: 1; min-width: 170px; display: flex; flex-direction: column; align-items: stretch; }
  .upgCat { color: #5ad0ff; font-size: 11px; letter-spacing: .3em; text-align: center; margin-bottom: 8px; }
  .upgCat .ico { display: block; font-size: 22px; letter-spacing: 0; margin-bottom: 4px; }
  .upgLink { align-self: center; width: 2px; height: 14px; background: rgba(90,208,255,.25); }
  .upgLink.on { background: #5ad0ff; box-shadow: 0 0 6px rgba(90,208,255,.8); }
  .upgNode { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; padding: 8px 10px; border: 1px solid rgba(12,200,255,.3); border-radius: 10px; font-size: 11px; letter-spacing: .08em; }
  .upgNode .lv { grid-row: 1 / 3; align-self: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(90,208,255,.5); color: #8ae0ff; display: flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: 0; }
  .upgNode .fx { color: #8ec9e8; } .upgNode .cost { color: #ffd94d; font-size: 10px; letter-spacing: .16em; }
  .upgNode.owned { background: rgba(12,200,255,.12); border-color: rgba(12,200,255,.6); }
  .upgNode.owned .fx { color: #fff; } .upgNode.owned .cost { color: #5ad0ff; }
  .upgNode.owned .lv { background: #5ad0ff; color: #02060f; border-color: #5ad0ff; }
  .upgNode.buyable { border-color: rgba(255,217,77,.6); cursor: pointer; }
  .upgNode.buyable:hover, .upgNode.buyable.sel { background: rgba(255,217,77,.14); border-color: #ffd94d; }
  .upgNode.unaffordable, .upgNode.locked { opacity: .4; }
  #invShips .upgFoot { display: flex; align-items: center; gap: 16px; margin-top: 12px; min-height: 34px; }
  #invShips .upgFoot .prev { flex: 1; color: #8ec9e8; line-height: 1.5; font-size: 11px; letter-spacing: .08em; }
  #invShips .upgFoot .prev b { color: #ffd94d; }
  #invShips .buy { border-color: rgba(255,217,77,.6); color: #ffd94d; }
  #invShips .buy:disabled { opacity: .35; cursor: default; }
  /* a narrow screen: each tab's columns stack, the map first */
  @media (max-width: 760px) {
    body.tab-map #pauseScreen .psPane[data-pane="map"], body.tab-items #pauseScreen .psPane[data-pane="items"] { display: flex; flex-direction: column; overflow-y: auto; }
    #mapBox { order: -1; flex: none; height: 62vh; }
    #questLog, #invItems, #invShips { overflow: visible; flex: none; }
    #pauseScreen .psTabs button { padding: 8px 14px; letter-spacing: .2em; text-indent: .2em; }
  }
  #pausePanel b { color: #5ad0ff; font-weight: 600; }
  #pausePanel .lbl b.hi { color: #fff; }
  #hudHelp { text-align: center; line-height: 1.8; letter-spacing: .12em; }
  #pausePanel .srow { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 14px; width: 100%; }
  #pausePanel .srow[hidden] { display: none; }
  #pausePanel .lbl { color: #2f8fc4; font-size: 11px; line-height: 1.5; letter-spacing: .08em; text-align: left; }
  #pausePanel .grp { display: inline-flex; justify-self: end; border: 1px solid rgba(12,200,255,.5); border-radius: 18px; overflow: hidden; white-space: nowrap; }
  #pausePanel .grp button { padding: 7px 14px; border: none; background: none; color: rgba(90,208,255,.6); font: inherit; font-size: 11px; letter-spacing: .2em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #pausePanel .grp button + button { border-left: 1px solid rgba(12,200,255,.35); }
  #pausePanel .grp button.on { color: #fff; background: rgba(12,200,255,.18); }
  #pausePanel #micBtn, #pausePanel #camBtn { justify-self: end; }
  #pausePanel .div { width: 100%; height: 1px; background: rgba(12,200,255,.25); margin: 2px 0; }
  #pausePanel .srow.sl { grid-template-columns: max-content 1fr; }
  #pausePanel .srow.sl .lbl { text-align: right; min-width: 150px; }
  #pausePanel input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; background: none; margin: 0; outline: none; }
  #pausePanel input[type=range]::-webkit-slider-runnable-track { height: 1px; background: rgba(12,200,255,.5); border: none; }
  #pausePanel input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5.5px; border-radius: 50%; border: none; background: #0cc8ff; box-shadow: 0 0 8px rgba(12,200,255,.9); cursor: pointer; }
  #pausePanel input[type=range]::-moz-range-track { height: 1px; background: rgba(12,200,255,.5); border: none; }
  #pausePanel input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: none; background: #0cc8ff; box-shadow: 0 0 8px rgba(12,200,255,.9); cursor: pointer; }
  #pausePanel .sld::after { content: ''; position: absolute; left: 6px; right: 6px; top: 0; height: 9px; pointer-events: none;
    background-image: linear-gradient(to right, rgba(12,200,255,.28) 0, rgba(12,200,255,.28) 3px, transparent 3px), linear-gradient(to right, rgba(12,200,255,.28) 0, rgba(12,200,255,.28) 3px, transparent 3px);
    background-size: calc((100% - 3px) / 6) 100%, 3px 100%; background-position: 0 0, right 0; background-repeat: repeat-x, no-repeat; }
  #pausePanel .sld { position: relative; display: block; width: 100%; padding-top: 10px; }
  #pausePanel .sld::before { content: ''; position: absolute; left: calc(6px + (100% - 12px) * var(--def, 0.5) - 1.5px); top: 0; width: 3px; height: 9px; border-radius: 1.5px; background: #fff; box-shadow: 0 0 8px rgba(90,208,255,1), 0 0 2px #fff; }   /* --def is the default detent's fraction, set per slider in the markup */
  body.paused #stick, body.paused #walkStick, body.paused #walkJump, body.paused #padBtns, body.paused #btnThrust, body.paused #btnBoost, body.paused #boostSlot, body.paused #emojiPick, body.paused #wingfaces, body:not(.desk).chat #stick, body:not(.desk).chat #walkStick, body:not(.desk).chat #walkJump, body:not(.desk).chat #padBtns, body:not(.desk).chat #btnThrust, body:not(.desk).chat #btnBoost, body:not(.desk).chat #boostSlot, body:not(.desk).chat #emojiPick, body:not(.desk).chat #wingfaces { display: none !important; }
  body.paused #ctrRet, body.paused #hitX, body.paused #ctrChev, body.paused #aimRing, body.paused #reticle, body.paused #aimReticle, body.paused #objLock, body.paused #objRet, body.paused #lockRing, body.paused .ringRead, body.paused .ringDia, body.paused .retTag { visibility: hidden; }
  body.chat #status { z-index: 16; top: calc(70px + env(safe-area-inset-top, 0px)); bottom: calc(var(--footer-lift, 0px) + 12px); width: min(30vw, 420px); min-width: 220px; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid rgba(12,200,255,.25); padding-right: 12px; box-sizing: border-box; }
  body.chat #pilots { max-height: none !important; }
  body.chat #pilots.clip { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  @media (max-width: 760px) and (pointer: fine) { body.chat #status { width: 34vw; } }
  #pausePanel .srow .grp { justify-self: start; }
  #pausePanel .chanBox { display: inline-flex; align-items: center; gap: 14px; justify-self: start; }
  #pausePanel .chanLbl { transform: translateY(-7px); width: 70px; flex: none; }
  #pausePanel .srow.chan { padding-top: 5px; }
  #pausePanel .srow.chan .lbl { transform: translateY(-7px); }
  #chanRow { display: inline-flex; gap: 7px; align-items: flex-start; margin-left: -3px; }
  #chanRow .chanDot { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 26px; padding: 0; overflow: visible; background: none; border: 0; cursor: pointer; color: #2f8fc4; font: inherit; }
  #chanRow .chanDot i { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--c); border: 2px solid rgba(255,255,255,.25); box-sizing: border-box; transition: transform .12s, box-shadow .12s; }
  #chanRow .chanDot:hover i { transform: scale(1.12); }
  #chanRow .chanDot.on i { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 12px var(--c); transform: scale(1.18); }
  #chanRow .chanDot b { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; visibility: hidden; height: 11px; line-height: 11px; padding-top: 1px; white-space: nowrap; }
  #chanRow .chanDot.on b { visibility: visible; }
  @media (pointer: coarse) and (orientation: portrait) { #chanRow { display: inline-grid; grid-template-columns: repeat(6, 26px); gap: 2px 7px; } }
  #pausePanel #micBtn, #pausePanel #camBtn { justify-self: start; }
  #pausePanel .srow.sl { grid-template-columns: minmax(180px, 320px) 1fr; }
  #pausePanel .srow.sl .lbl { text-align: left; min-width: 0; }
  #pausePanel .idg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 28px; width: 100%; align-items: center; }
  #pausePanel .idg .srow { width: auto; }
  #camSlot { display: none; }
  #pausePanel .idg.cam { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  #pausePanel .idg.cam #camSlot { display: block; grid-column: 2; grid-row: 1 / 4; align-self: center; }
  #camSlot #camPrev { position: static; transform: scaleX(-1); display: block; }
  #pausePanel .idg.cam .pill { width: 100%; }
  #pausePanel .srow.id { grid-template-columns: 70px 1fr; }
  #pausePanel .k { color: #2f8fc4; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
  #pausePanel .fld, #pausePanel .pill { width: 240px; max-width: 100%; height: 34px; box-sizing: border-box; padding: 0 16px; border: 1px solid rgba(12,200,255,.5); border-radius: 17px; font: inherit; font-size: 11px; letter-spacing: .2em; }
  #pausePanel .fld { width: 100%; min-width: 0; background: rgba(2, 6, 16, .5); color: #fff; outline: none; text-transform: uppercase; }
  #pausePanel .fld:focus { border-color: #0cc8ff; box-shadow: 0 0 10px rgba(12,200,255,.4); }
  #pausePanel .pill { background: rgba(12,200,255,.12); color: #5ad0ff; cursor: pointer; -webkit-tap-highlight-color: transparent; text-align: center; }
  #pausePanel .pill:hover { background: rgba(12,200,255,.22); color: #fff; }
  #pausePanel .adv[hidden], #pausePanel #hudHelp[hidden] { display: none; }
  #questLog .sub:first-child { margin-top: 4px; }
  #questLog .qrow { grid-template-columns: 130px 1fr auto; }
  #questLog .qst { justify-self: start; padding: 5px 12px; border: 1px solid rgba(12,200,255,.35); border-radius: 14px; font-size: 10px; letter-spacing: .2em; color: rgba(90,208,255,.5); white-space: nowrap; }
  #questLog .qst.open, #questLog .qst.found { color: #5ad0ff; border-color: rgba(12,200,255,.7); }
  #questLog .qst.in-progress { color: #fff; border-color: #0cc8ff; background: rgba(12,200,255,.18); }
  #questLog .qst.done, #questLog .qst.delivered { color: #fff36b; border-color: rgba(255,243,107,.6); }
  #questLog .qecho { width: auto; height: 28px; justify-self: start; }
  #questLog .qtrack { width: auto; height: 28px; padding: 0 14px; justify-self: end; }
  #questLog .qtrack.on { color: #fff; border-color: #0cc8ff; background: rgba(12,200,255,.18); }
  #questLog .qbrief { margin-top: -6px; }
  #questLog .qbrief .lbl { color: rgba(90,208,255,.7); }
  @media (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 500px) {
    body.chat #status { top: calc(78px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; width: auto; min-width: 0; border-right: none; padding-right: 0; }
    #pausePanel .idg, #pausePanel .idg.cam { grid-template-columns: 1fr; }
    body.paused #camPrev { display: none; }
    #pausePanel .idg > #micBtn, #pausePanel .idg > .srow:has(#micBtn), #pausePanel .idg > .srow:has(#camBtn) { order: -1; }
    #pausePanel .srow, #pausePanel .srow.sl { grid-template-columns: 1fr; gap: 6px; }
    #pausePanel .srow.id { grid-template-columns: 70px 1fr; gap: 14px; }
    #pausePanel .srow.sl .sld { max-width: 320px; }
  }
  @media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
    body.chat #status { right: calc(min(60vw, 440px) + 16px); bottom: 12px; }
  }
  body.chat #status, body.chat #pilotCount, #pausePanel, #pausePanel .lbl, #pausePanel .k { color: #62b8ea; }
  body.chat #status b, body.chat #pilotCount b, #pausePanel b, #pausePanel .pill { color: #8ae0ff; }
  #pausePanel .grp button { color: rgba(138,224,255,.75); }
  #pausePanel .grp, #pausePanel .fld, #pausePanel .pill { border-color: rgba(12,200,255,.7); }
  #pausePanel .grp button + button { border-left-color: rgba(12,200,255,.45); }
  #pausePanel .div { background: rgba(12,200,255,.4); }
  #pausePanel input[type=range]::-webkit-slider-runnable-track { background: rgba(12,200,255,.7); }
  #pausePanel input[type=range]::-moz-range-track { background: rgba(12,200,255,.7); }
  #pausePanel .sld::after { background-image: linear-gradient(to right, rgba(12,200,255,.4) 0, rgba(12,200,255,.4) 3px, transparent 3px), linear-gradient(to right, rgba(12,200,255,.4) 0, rgba(12,200,255,.4) 3px, transparent 3px); }
  body.chat #pilots span i { opacity: .7; }
  #hudBtns { display: flex; flex: none; gap: 10px; }
  #micBtn, #camBtn {
    padding: 7px 16px; border: 1px solid rgba(12,200,255,.5); border-radius: 18px;
    background: rgba(0, 10, 20, .45); color: #5ad0ff; font: inherit; font-size: 12px; letter-spacing: .3em;
    text-shadow: 0 0 12px rgba(90,208,255,.8); -webkit-tap-highlight-color: transparent; cursor: pointer;
  }
  #micBtn.on, #camBtn.on { border-color: #ff5a7a; color: #fff; box-shadow: 0 0 18px rgba(255,90,122,.5); }
  #camPrev {
    position: fixed; left: 50%; top: calc(74px + env(safe-area-inset-top, 0px));
    transform: translateX(-50%) scaleX(-1);
    width: 148px; height: 111px; object-fit: cover; z-index: 16;
    border: 1px solid rgba(12,200,255,.5); border-radius: 10px;
    background: rgba(0,10,20,.45); pointer-events: none;
  }
  #term {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    transform: translateY(110%); transition: transform .18s ease-out;
    background: rgba(2, 6, 16, .82); border-top: 1px solid rgba(12,200,255,.4);
    padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px)); font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
    max-height: 60vh; display: flex; flex-direction: column;
  }
  #term > #termHint, #term > #termLine { flex: 0 0 auto; }
  #term > #termOut { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #termOut::-webkit-scrollbar { width: 8px; }
  #termOut::-webkit-scrollbar-thumb { background: rgba(12,200,255,.35); border-radius: 4px; }
  #termOut::-webkit-scrollbar-track { background: transparent; }
  #term.open { transform: translateY(0); }
  #termToast {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; pointer-events: none;
    transform: translateY(110%); transition: transform .18s ease-out;
    background: rgba(2, 6, 16, .82); border-top: 1px solid rgba(12,200,255,.4);
    padding: 6px 14px calc(8px + env(safe-area-inset-bottom, 0px)); font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
    color: #2f8fc4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #termToast.show { transform: translateY(0); }
  #termToast b { color: #5ad0ff; font-weight: 600; }
  #termOut { color: #2f8fc4; white-space: pre-wrap; min-height: 0; }
  #termHint { color: #2f8fc4; opacity: .75; margin-bottom: 2px; }
  #termHint b { color: #5ad0ff; font-weight: 600; }
  #termOut b { color: #5ad0ff; font-weight: 600; }
  #termLine { display: flex; gap: 8px; align-items: baseline; }
  #termLine::before { content: '>'; color: #0cc8ff; }
  #termIn {
    flex: 1; background: none; border: none; outline: none; color: #d5f2ff;
    font: inherit; caret-color: #0cc8ff; min-width: 0;
  }
  /* phones: a smaller font makes iOS Safari zoom the page when the field takes focus */
  @media (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 500px) {
    #termIn { font-size: 16px; }
  }
  @media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
    #term {
      left: auto; top: 0; bottom: 0; width: min(60vw, 440px);
      transform: translateX(110%);
      border-top: none; border-left: 1px solid rgba(12,200,255,.4);
      padding: calc(8px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 10px 14px;
      display: flex; flex-direction: column;
    }
    #term.open { transform: translateX(0); }
    #termHint { flex: 0 0 auto; }
    #termOut { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    #termLine { flex: 0 0 auto; }
  }
  #pilots span i { font-style: normal; opacity: .55; }
  #pilots span i.say { opacity: 1; color: #d5f2ff; letter-spacing: .04em; text-shadow: 0 0 10px rgba(0,0,0,.9); transition: opacity .45s linear; display: inline; white-space: normal; }
  #ctrRet {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 30px; height: 30px; z-index: 10; pointer-events: none;
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(12,200,255,.9));
  }
  body.mousefly, body.mousefly * { cursor: none !important; }
  #aimRing { position: fixed; left: 50%; top: 50%; width: 18px; height: 18px; border: 1.5px solid #0cc8ff; border-radius: 50%;
    transform: translate(-50%, -50%); z-index: 10; pointer-events: none; filter: drop-shadow(0 0 4px rgba(12,200,255,.9)); }
  #aimRing::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; margin: -1px 0 0 -1px; background: #0cc8ff; border-radius: 50%; }
  #hitX { position: fixed; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); z-index: 31; pointer-events: none;
    opacity: 0; filter: drop-shadow(0 0 4px rgba(255,40,80,.9)); }
  #hitX::before, #hitX::after { content: ''; position: absolute; top: 0; left: 50%; width: 1.5px; height: 100%; margin-left: -0.75px; background: #ff2850; }
  #hitX::before { transform: rotate(45deg); }
  #hitX::after { transform: rotate(-45deg); }
  #hitX.on { animation: hitX .35s ease-out forwards; }
  @keyframes hitX { 0% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
  #ctrRet::before, #ctrRet::after { content: ''; position: absolute; }
  #ctrRet::after { background: #0cc8ff; }
  #ctrRet::before {
    left: 0; top: calc(50% - 8px); width: 100%; height: 8px;
    background: linear-gradient(#0cc8ff, #0cc8ff) no-repeat 9px 0 / 1.5px 100%,
                linear-gradient(#0cc8ff, #0cc8ff) no-repeat 19.5px 0 / 1.5px 100%;
  }
  #ctrRet::after { top: 50%; left: 0; height: 1.5px; width: 100%; transform: translateY(-50%);
    -webkit-mask: linear-gradient(90deg, #000 33%, transparent 33% 67%, #000 67%); mask: linear-gradient(90deg, #000 33%, transparent 33% 67%, #000 67%); }
  #ctrChev {
    position: fixed; width: 10.5px; height: 5.25px; z-index: 10; pointer-events: none;
    transform-origin: 50% 0;
    filter: drop-shadow(0 0 4px rgba(12,200,255,.9));
  }
  #ctrChev::before, #ctrChev::after {
    content: ''; position: absolute; top: 0; left: 50%; width: 1.5px; height: 7.45px;
    background: #0cc8ff; transform-origin: top center; margin-left: -0.75px;
  }
  #ctrChev::before { transform: rotate(45deg); }
  #ctrChev::after  { transform: rotate(-45deg); }
  #reticle {
    position: fixed; width: 26px; height: 26px; z-index: 9; pointer-events: none;
    border: 2px solid #0cc8ff; transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 14px rgba(12,200,255,.8), inset 0 0 10px rgba(12,200,255,.35);
  }
  #objLock {
    position: fixed; width: 26px; height: 26px; z-index: 9; pointer-events: none;
    border: 2px solid #b46bff; transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 14px rgba(180,107,255,.8), inset 0 0 10px rgba(180,107,255,.35);
  }
  #objRet {
    position: fixed; width: 30px; height: 30px; z-index: 9; pointer-events: none;
    border: 2px solid #b46bff;
    box-shadow: 0 0 14px rgba(180,107,255,.8), inset 0 0 10px rgba(180,107,255,.35);
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-mask: repeating-conic-gradient(from 22.5deg, #000 0 45deg, transparent 45deg 90deg);
    mask: repeating-conic-gradient(from 22.5deg, #000 0 45deg, transparent 45deg 90deg);
  }
  .retTag.obj { color: #b46bff; }
  #lockRing {
    position: fixed; z-index: 8; pointer-events: none; border-radius: 50%;
    border: 1.5px solid rgba(12,200,255,.3); transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(12,200,255,.16), inset 0 0 10px rgba(12,200,255,.06);
    opacity: 0; visibility: hidden; transition: opacity .4s ease-out, visibility 0s linear .4s;
  }
  #lockRing.on { opacity: 1; visibility: visible; transition: opacity .4s ease-out; }
  #lockRing.foe { border-color: rgba(255,47,61,.3); box-shadow: 0 0 14px rgba(255,47,61,.18), inset 0 0 12px rgba(255,47,61,.07); }
  #lockRing.tun { border-color: rgba(255,210,63,.3); box-shadow: 0 0 14px rgba(255,210,63,.18), inset 0 0 12px rgba(255,210,63,.07); }
  #lockRing.bare #lockArcs { opacity: 0; }
  #lockArcs { position: absolute; left: -25px; top: -25px; width: calc(100% + 50px); height: calc(100% + 50px); overflow: visible; opacity: 1; transition: opacity .4s ease-out; }
  #lockArcs path { fill: none; stroke-width: 2; stroke-linecap: butt; }
  #arcBg { stroke: rgba(12,200,255,.28); }
  #arcTicks { stroke: rgba(12,200,255,.85); stroke-width: 1.5; }
  #arcBoost { stroke: #0cc8ff; filter: drop-shadow(0 0 4px rgba(12,200,255,.9)); }
  #lockRing.boostReady #arcBoost, #lockRing.boostOn #arcBoost { stroke: #ff5ab0; filter: drop-shadow(0 0 4px rgba(255,90,176,.9)); }
  #lockRing.boostReady #arcBoost { animation: arcReady .5s ease-in-out infinite; }
  @keyframes arcReady { 50% { stroke: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,.95)); } }
  #arcAmmo { stroke: #0cc8ff; filter: drop-shadow(0 0 4px rgba(12,200,255,.9)); }
  #powerupArcs path { stroke: #32e6c4; filter: drop-shadow(0 0 4px rgba(50,230,196,.8)); }
  #arcAmmoLow { stroke: #0cc8ff; animation: arcLow .45s ease-in-out infinite; }
  #arcAmmoDeny { stroke: #ff5ab0; filter: drop-shadow(0 0 4px rgba(255,90,176,.9)); animation: arcDeny .3s ease-in-out infinite; }
  @keyframes arcDeny { 50% { opacity: .15; } }
  @keyframes arcLow { 50% { opacity: .15; } }
  .ringRead {
    position: fixed; pointer-events: none;
    font-size: 11px; letter-spacing: .1em; white-space: nowrap; color: #fff;
    background: rgba(2, 6, 16, .3); padding: 2px 7px 3px; border-radius: 999px;
    text-shadow: 0 0 6px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.7); font-variant-numeric: tabular-nums;
    opacity: 0; visibility: hidden; transition: opacity .4s ease-out, visibility 0s linear .4s;
  }
  #spdRead { transform: translate(-100%, -50%); }
  #altRead { transform: translate(0, -50%); }
  .ringRead.on { opacity: 1; visibility: visible; transition: opacity .4s ease-out; }
  #hudStackL, #hudStackR { display: none; }
  .ringDia { position: fixed; --d: 9px;   /* reticles.js diaSize writes --d (px by range); the border and glow below derive from it */ width: var(--d); height: var(--d); border-style: solid; border-width: calc(var(--d) / 12 + 0.75px); z-index: 9; pointer-events: none; transform: translate(-50%, -50%) rotate(45deg); background: none; }
  .ringDia.ship { border-color: #ffffff; box-shadow: 0 0 calc(var(--d) * .5 + 3.5px) rgba(255,255,255,.7), inset 0 0 calc(var(--d) * .22 + 2px) rgba(255,255,255,.4); }
  .ringDia.guide { border-color: #0cc8ff; box-shadow: 0 0 calc(var(--d) * .5 + 3.5px) rgba(12,200,255,.7), inset 0 0 calc(var(--d) * .22 + 2px) rgba(12,200,255,.4); }
  .ringDia.worm { border-color: #ffd23f; box-shadow: 0 0 calc(var(--d) * .5 + 3.5px) rgba(255,210,63,.75), inset 0 0 calc(var(--d) * .22 + 2px) rgba(255,210,63,.45); }
  .ringDia.foe { border-color: #ff2f3d; background: rgba(255,47,61,.55); box-shadow: 0 0 calc(var(--d) * .6 + 4.6px) rgba(255,47,61,.85), inset 0 0 calc(var(--d) * .28 + 2.5px) rgba(255,47,61,.5); animation: foePip .4s steps(1, end) infinite; }
  @keyframes foePip { 0%, 100% { background: rgba(255,47,61,.95); } 50% { background: rgba(255,47,61,.1); } }
  #aimReticle {
    position: fixed; width: 30px; height: 30px; z-index: 9; pointer-events: none;
    border: 2px solid #0cc8ff;
    box-shadow: 0 0 14px rgba(12,200,255,.8), inset 0 0 10px rgba(12,200,255,.35);
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-mask: repeating-conic-gradient(from 22.5deg, #000 0 45deg, transparent 45deg 90deg);
    mask: repeating-conic-gradient(from 22.5deg, #000 0 45deg, transparent 45deg 90deg);
  }
  #aimReticle.link {
    border-color: #ff3cc8;
    box-shadow: 0 0 16px rgba(255,60,200,.85), 0 0 34px rgba(12,200,255,.45), inset 0 0 10px rgba(255,60,200,.35);
  }
  .retTag.link { color: #ff3cc8; }
  #aimReticle.relic {
    border-color: #3cff8c;
    box-shadow: 0 0 16px rgba(60,255,140,.9), 0 0 34px rgba(60,255,140,.35), inset 0 0 10px rgba(60,255,140,.35);
  }
  .retTag.relic { color: #3cff8c; }
  #towHint { letter-spacing: .14em; }
  #towHint b { color: #fff; font-weight: 600; }
  #term b.cur { color: #fff; }
  #termOut .tree { white-space: normal; }
  #termOut .tree .kids { padding-left: 1.4em; }
  #termOut .tree summary { cursor: pointer; }
  #termOut .tree summary::marker { color: #5ad0ff; }
  #termOut .opt, #termOut .num { cursor: pointer; text-decoration: underline dotted rgba(90,208,255,.6); text-underline-offset: 2px; }
  #termOut .opt:hover, #termOut .num:hover { color: #d5f2ff; }
  #termOut .cmd { color: #9aa4b2; }
  #pauseNote {
    position: fixed; left: 50%; top: 18%; z-index: 12; transform: translate(-50%, 0); pointer-events: none;
    font-size: 13px; letter-spacing: .18em; text-align: center; color: #fff;
    background: rgba(2, 6, 16, .7); border: 1px solid rgba(255,60,200,.6); border-radius: 10px; padding: 10px 18px;
    box-shadow: 0 0 24px rgba(255,60,200,.35);
  }
  #pauseNote b { color: #ff3cc8; font-weight: 600; display: block; letter-spacing: .08em; margin-bottom: 4px; }
  #impNote {
    position: fixed; left: 50%; top: 8%; z-index: 12; transform: translate(-50%, 0); pointer-events: none;
    font-size: 12px; letter-spacing: .16em; text-align: center; color: #fff;
    background: rgba(2, 6, 16, .7); border: 1px solid rgba(12,200,255,.6); border-radius: 10px; padding: 8px 16px;
    box-shadow: 0 0 24px rgba(12,200,255,.3);
  }
  #impNote b { color: #0cc8ff; font-weight: 600; }
  #impNote span { display: block; font-size: 10px; margin-top: 4px; opacity: .75; letter-spacing: .1em; }
  #fade { position: fixed; inset: 0; z-index: 58; background: #000; opacity: 0; pointer-events: none; transition: opacity 1s linear; }
  #fade.on { opacity: 1; }
  #fade[hidden] { display: none; }
  /* GLAM (/glam): every overlay transparent but the stage, the terminal, the pause screen, the fade and the boot; opacity, so the touch controls still take a finger */
  body.glam > :not(#stage, #term, #pauseScreen, #fade, #bootSky, #boot) { opacity: 0 !important; }
  body.cutscene #stick, body.cutscene #walkStick, body.cutscene #walkJump, body.cutscene #padBtns, body.cutscene #btnThrust, body.cutscene #btnBoost, body.cutscene #boostSlot, body.cutscene #emojiPick, body.cutscene #wingfaces, body.cutscene #hudCoin, body.cutscene #hudXp, body.cutscene #hudHp, body.cutscene #hudFoot, body.cutscene #compass, body.cutscene #status { display: none !important; }
  body.cutscene #ctrRet, body.cutscene #hitX, body.cutscene #ctrChev, body.cutscene #reticle, body.cutscene #aimReticle, body.cutscene #aimRing, body.cutscene #objLock, body.cutscene #objRet, body.cutscene #lockRing, body.cutscene .ringRead, body.cutscene .ringDia, body.cutscene #boostHint, body.cutscene #chaseHint, body.cutscene #towHint, body.cutscene #reticleTag, body.cutscene #aimTag, body.cutscene #objTag, body.cutscene #objLockTag { visibility: hidden; }
  #lobbyTag { transform: none; z-index: 12; color: #fff; border: 1px solid rgba(12,200,255,.5); }
  #lobbyTag b { color: #0cc8ff; font-weight: 600; }
  #lobbyTag b.team0 { color: var(--team0); } #lobbyTag b.team1 { color: var(--team1); } #lobbyTag b.team2 { color: var(--team2); } #lobbyTag b.team3 { color: var(--team3); }
  body.lobby #stick, body.lobby #padBtns, body.lobby #btnThrust, body.lobby #btnBoost, body.lobby #boostSlot, body.lobby #emojiPick, body.lobby #wingfaces, body.lobby #hudCoin, body.lobby #hudXp, body.lobby #hudHp { display: none !important; }
  body.lobby #ctrRet, body.lobby #hitX, body.lobby #ctrChev, body.lobby #reticle, body.lobby #aimReticle, body.lobby #objLock, body.lobby #objRet, body.lobby #lockRing, body.lobby .ringRead, body.lobby .ringDia, body.lobby #boostHint, body.lobby #chaseHint, body.lobby #towHint, body.lobby #reticleTag, body.lobby #aimTag, body.lobby #objTag, body.lobby #objLockTag { visibility: hidden; }
  /* dialog-ui.js writes --dlgW and --dlgText (the hud.dialog leaves) on open */
  #echo { position: fixed; inset: 0; z-index: 44; background: #000; animation: echoIn .8s ease-out; }
  #echo[hidden] { display: none; }
  #echo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @keyframes echoIn { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { #echo { animation: none; } }
  /* THE IN-WORLD CURSOR (ui/world-cursor.js): the game's own, drawn inside the surface it uses (a console's page, a talk's box) */
  .world-cursor { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 60; }
  .world-cursor[hidden] { display: none; }
  .world-cursor::before { content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
    border: 1.5px solid #fff; box-shadow: 0 0 8px rgba(170, 225, 255, 0.9), inset 0 0 4px rgba(170, 225, 255, 0.6); }
  #dlg { position: fixed; inset: 0; z-index: 45; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none;
    background: linear-gradient(to top, rgba(2,6,16,.55), rgba(2,6,16,0) 38%); }
  #dlg[hidden] { display: none; }
  #dlg .dlgBox { position: absolute; left: 50%; bottom: calc(var(--footer-h, 16px) + 14px); transform: translateX(-50%); box-sizing: border-box;
    width: min(var(--dlgW, 760px), calc(100vw - 32px)); min-height: calc(var(--dlgText, 20px) * 4.6); padding: calc(var(--dlgText, 20px) * 1.1) calc(var(--dlgText, 20px) * 1.3) calc(var(--dlgText, 20px) * 1.2);
    background: rgba(2, 6, 16, .9); border: 2px solid #0cc8ff; border-radius: 14px;
    box-shadow: 0 0 22px rgba(12,200,255,.35), inset 0 0 28px rgba(12,200,255,.08);
    color: #eaf8ff; font-size: var(--dlgText, 20px); line-height: 1.5; letter-spacing: .02em; text-shadow: 0 0 6px rgba(90,208,255,.35);
    animation: dlgIn .22s ease-out; }
  #dlg .dlgName { position: absolute; left: calc(var(--dlgText, 20px) * 1.1); top: 0; transform: translateY(-60%); padding: .22em .9em .18em; border-radius: 8px;
    background: #0cc8ff; color: #020610; font-size: calc(var(--dlgText, 20px) * .72); font-weight: 700; letter-spacing: .28em; text-shadow: none; box-shadow: 0 0 14px rgba(12,200,255,.6); }
  #dlg .dlgBox[data-speaker="pilot"] { border-color: var(--me, #ffffff); box-shadow: 0 0 22px color-mix(in srgb, var(--me, #ffffff) 32%, transparent), inset 0 0 28px color-mix(in srgb, var(--me, #ffffff) 7%, transparent); }
  #dlg .dlgBox[data-speaker="pilot"] .dlgName { background: var(--me, #ffffff); box-shadow: 0 0 14px color-mix(in srgb, var(--me, #ffffff) 60%, transparent); }
  #dlg .dlgRest { visibility: hidden; }
  #dlg .dlgCue { position: absolute; right: calc(var(--dlgText, 20px) * .9); bottom: calc(var(--dlgText, 20px) * .45); color: #0cc8ff; font-size: calc(var(--dlgText, 20px) * .8); animation: dlgCue .9s steps(1) infinite; }
  #dlg .dlgCue[hidden], #dlg .dlgChoices[hidden] { display: none; }
  #dlg .dlgChoices { position: absolute; right: 0; bottom: calc(100% + 14px); display: flex; flex-direction: column; gap: 4px; min-width: 9em; padding: .4em;
    background: rgba(2, 6, 16, .9); border: 2px solid #0cc8ff; border-radius: 14px; box-shadow: 0 0 22px rgba(12,200,255,.35); }
  #dlg .dlgChoice { position: relative; display: block; min-height: 44px; padding: .3em 1em .3em 1.9em; border: 1px solid transparent; border-radius: 9px; background: none;
    color: #9fdcf5; font: inherit; font-size: var(--dlgText, 20px); letter-spacing: .14em; text-align: left; text-transform: uppercase; cursor: pointer; }
  #dlg .dlgChoice.on { color: #fff; border-color: rgba(12,200,255,.75); background: rgba(12,200,255,.16); }
  #dlg .dlgChoice.team0 { color: var(--team0); } #dlg .dlgChoice.team1 { color: var(--team1); } #dlg .dlgChoice.team2 { color: var(--team2); } #dlg .dlgChoice.team3 { color: var(--team3); }
  #dlg .dlgChoice[class*=team].on { border-color: currentColor; text-shadow: 0 0 10px currentColor; }
  #dlg .dlgChoice.on::before { content: '▶'; position: absolute; left: .6em; top: 50%; transform: translateY(-50%); color: var(--me, #ffffff); font-size: .8em; text-shadow: 0 0 8px var(--me, #ffffff); animation: dlgNudge .7s ease-in-out infinite alternate; }
  /* ground-script.js writes --k (the hold's share) as the skip hold runs */
  body.script #ctrRet, body.script #hitX, body.script #ctrChev, body.script #reticle, body.script #aimReticle, body.script #aimRing, body.script #objLock, body.script #objRet, body.script #lockRing, body.script .ringRead, body.script .ringDia, body.script .retTag { visibility: hidden; }
  #scriptSkip { position: fixed; right: 16px; bottom: calc(var(--footer-h, 16px) + 14px); z-index: 44; padding: 8px 14px; border: 1px solid rgba(12,200,255,.6); border-radius: 10px;
    background: linear-gradient(to right, rgba(12,200,255,.35) calc(var(--k, 0) * 100%), rgba(2,6,16,.75) calc(var(--k, 0) * 100%)); color: #bfefff; font: 600 12px/1 inherit; letter-spacing: .18em;
    cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
  #scriptSkip b { color: #fff; }
  #scriptSkip[hidden] { display: none; }
  @keyframes dlgIn { from { opacity: 0; transform: translate(-50%, 14px); } }
  @keyframes dlgCue { 50% { opacity: 0; } }
  @keyframes dlgNudge { to { transform: translate(.18em, -50%); } }
  @media (prefers-reduced-motion: reduce) { #dlg .dlgBox, #dlg .dlgCue, #dlg .dlgChoice.on::before { animation: none; } }
  body.dialog #stick, body.dialog #walkStick, body.dialog #walkJump, body.dialog #padBtns, body.dialog #btnThrust, body.dialog #btnBoost, body.dialog #boostSlot, body.dialog #emojiPick, body.dialog #wingfaces, body.dialog #hudCoin, body.dialog #hudXp, body.dialog #hudHp, body.dialog #hudFoot, body.dialog #compass { display: none !important; }
  body.dialog #ctrRet, body.dialog #hitX, body.dialog #ctrChev, body.dialog #reticle, body.dialog #aimReticle, body.dialog #aimRing, body.dialog #objLock, body.dialog #objRet, body.dialog #lockRing, body.dialog .ringRead, body.dialog .ringDia, body.dialog .retTag { visibility: hidden; }
  #pauseNote span { display: block; font-size: 10px; margin-top: 4px; opacity: .8; }
  #pilots span i.talk { opacity: 1; color: #fff; }
  .retTag {
    position: fixed; z-index: 9; pointer-events: none; transform: translate(-50%, 0);
    font-size: 12px; letter-spacing: .08em; text-shadow: 0 0 8px rgba(0,0,0,.8);
    color: #0cc8ff;
    text-align: center;
    background: rgba(2, 6, 16, .6); border-radius: 8px; padding: 3px 10px 4px;
    white-space: nowrap;
  }
  .retTag .enter { display: block; margin-top: 2px; font-size: 10px; letter-spacing: .18em; color: #fff; }
  .retTag.boost { color: #ff5ab0; transform: translate(-100%, -50%); letter-spacing: .14em; padding: 8px 13px 7px; border-radius: 999px; }
  .retTag.boost b { color: #fff; font-weight: 600; }
  #chaseHint { letter-spacing: .14em; }
  #chaseHint b { color: #fff; font-weight: 600; }
  #tabHint { transform: translate(-50%, -100%); letter-spacing: .14em; transition: opacity .6s ease-out; font-size: min(21px, 3.4vw); line-height: 1.381em; padding: .381em .952em .286em; border-radius: 999px; max-width: 94vw; white-space: nowrap; }
  #tabHint.out { opacity: 0; }
  #tabHint b { color: #fff; font-weight: 600; }
  #sysHint { left: 50%; bottom: calc(var(--footer-h, 16px) + var(--faces-h) + 12px + var(--footer-lift, 0px)); top: auto; transform: translateX(-50%); font-size: 14px; line-height: 20px; letter-spacing: .14em; padding: 8px 18px 6px; border-radius: 999px; transition: opacity .6s ease-out; max-width: calc(100vw - 32px); box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
  #sysHint.out { opacity: 0; }
  #sysHint b { color: #fff; font-weight: 600; }
  /* --team0..3 are set on the root by index.html from sim.TEAMS, the hues' one owner */
  .team0 { color: var(--team0); } .team1 { color: var(--team1); } .team2 { color: var(--team2); } .team3 { color: var(--team3); }
  #sysHint b.team0 { color: var(--team0); } #sysHint b.team1 { color: var(--team1); } #sysHint b.team2 { color: var(--team2); } #sysHint b.team3 { color: var(--team3); }
  #sysHint.team0 { color: var(--team0); } #sysHint.team1 { color: var(--team1); } #sysHint.team2 { color: var(--team2); } #sysHint.team3 { color: var(--team3); }
  #pilots b.chv { animation: chaseMarch .8s linear infinite; font-weight: inherit; }
  #pilots b.chv:nth-of-type(2) { animation-delay: .13s; }
  #pilots b.chv:nth-of-type(3) { animation-delay: .26s; }
  @keyframes chaseMarch { 0%, 100% { opacity: .25; } 30% { opacity: 1; } }

  /* terminal.js writes --footer-lift (the terminal/toast lift); the on-screen controls ride it */
  :root { --footer-h: calc(16px + env(safe-area-inset-bottom, 0px)); }
  :root { --faces-h: 72px; }
  #wingfaces { position: fixed; left: 0; right: 0; bottom: var(--footer-h, 16px); display: flex; justify-content: center; align-items: flex-end; gap: 14px; z-index: 12; pointer-events: none; }
  #wingfaces[hidden] { display: none; }
  #wingfaces .wf { display: flex; flex-direction: column; align-items: center; width: 84px; animation: wfIn .3s ease-out; }
  #wingfaces .av {
    width: 52px; height: 52px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--c, #5ad0ff);
    background: rgba(2, 6, 16, .6) center / cover no-repeat; color: var(--c, #5ad0ff);
    font: 700 16px/48px -apple-system, system-ui, 'Segoe UI', sans-serif; letter-spacing: .04em; text-align: center; overflow: hidden;
    box-shadow: 0 0 8px var(--c, #5ad0ff), 0 0 12px rgba(0, 0, 0, .6);
    transition: border-color .25s ease-out, box-shadow .25s ease-out, color .25s ease-out;
  }
  #wingfaces .cs { margin-top: 5px; max-width: 84px; font: 700 10px/14px -apple-system, system-ui, 'Segoe UI', sans-serif; letter-spacing: .12em; color: var(--c, #5ad0ff); text-shadow: 0 0 8px rgba(0, 0, 0, .9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  @keyframes wfIn { from { opacity: 0; transform: translateY(8px) scale(.85); } }
  @media (max-width: 700px) { #wingfaces { gap: 6px; } #wingfaces .wf { width: 64px; } #wingfaces .cs { max-width: 64px; } }
  #stick, #walkStick, #walkJump, #padBtns, #emojiPick, #wingfaces { transform: translateY(calc(-1 * var(--footer-lift, 0px))); transition: transform .18s ease-out; }
  #stick, #walkStick {
    position: fixed; left: calc(20px + env(safe-area-inset-left, 0px)); bottom: var(--footer-h, 46px);
    width: 150px; height: 150px; border-radius: 50%; z-index: 17;
    border: 1px solid rgba(255,255,255,0.7);
    background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.14) 65%, rgba(255,255,255,0.06) 100%);
    touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  #stickNub, #walkNub {
    position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
    border-radius: 50%; background: rgba(255,255,255,0.42); border: 1px solid rgba(255,255,255,0.75);
    pointer-events: none;
  }
  #boot { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding-bottom: 40vh; box-sizing: border-box;
    background: rgba(2, 6, 16, .72); -webkit-user-select: none; user-select: none; touch-action: none; transition: opacity .35s ease-out; }
  #bootSky { position: fixed; inset: 0; z-index: 59; background: #000 center / cover no-repeat; transition: opacity 1.8s ease-out; }
  #bootSky.out { opacity: 0; pointer-events: none; }
  #bootSky.dark { background: #000; background-image: none; }   /* index.html adds .dark on the ?rise boot (no sky snap exists) */
  #bootSky[hidden] { display: none; }
  body.booting #ctrRet, body.booting #hitX, body.booting #ctrChev, body.booting #aimRing, body.booting #reticle, body.booting #aimReticle, body.booting #objLock, body.booting #objRet, body.booting #lockRing, body.booting .ringRead, body.booting .ringDia, body.booting .retTag { visibility: hidden; }
  #boot.out { opacity: 0; pointer-events: none; }
  #boot[hidden] { display: none; }
  /* THE BOOT'S STAGES (index.html bootStages): the page shows only the dialog and the sky's snapshot until the relay is up (shell-ui), then the HUD, then the scene (shell-scene) */
  body.shell-ui > :not(#boot):not(#bootSky):not(#stage):not(script) { visibility: hidden !important; }
  body.shell-scene > #stage { visibility: hidden; }
  body.kill-hud > :not(#boot):not(#bootSky):not(#stage):not(script) { visibility: hidden !important; }   /* ?k: render.js THE KILL LETTERS */
  #bootLogo { width: min(84vw, 515px); height: auto; filter: drop-shadow(0 0 24px rgba(12,200,255,.9)) drop-shadow(0 0 60px rgba(255,60,200,.5)); }
  /* THE KEYS: the keyboard's bindings, centered in a band the height of #boot's padding-bottom under the logo, raised a quarter of its height; a touch screen has no keyboard to show */
  #bootKeys { position: absolute; left: 0; right: 0; bottom: 10vh; height: 40vh; width: 100%; box-sizing: border-box; padding: 0 max(16px, calc(50% - 400px)) 4vh; object-fit: contain; pointer-events: none; }
  @media (pointer: coarse) { #bootKeys { display: none; } }
  #bootMsg { font: 600 clamp(9px, 2.6vw, 12px)/1 -apple-system, system-ui, sans-serif; letter-spacing: .3em; text-indent: .3em; color: #5ad0ff; text-transform: uppercase; white-space: nowrap; }
  #boot.ready #bootMsg { color: #fff; animation: bootBlink 1.4s ease-in-out infinite; }
  /* index.html drives the fill by writing transform + transitionDuration per stage — transforms only, so the compositor animates while a build blocks the main thread */
  #bootBar { position: relative; width: min(58vw, 200px); height: 3px; border-radius: 2px; overflow: hidden;
    background: rgba(12,200,255,.16); box-shadow: 0 0 10px rgba(12,200,255,.25); transition: opacity .5s ease-out; }
  #bootBar[hidden] { display: none; }
  #bootFill, #bootSweep { position: absolute; inset: 0; display: block; will-change: transform; }
  #bootFill { background: #5ad0ff; box-shadow: 0 0 8px rgba(12,200,255,.9); transform-origin: 0 50%; transform: scaleX(.02);
    transition: transform 3s cubic-bezier(.16, .84, .3, 1); }
  #bootSweep { background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); width: 45%;
    animation: bootSweep 1.25s linear infinite; }
  @keyframes bootSweep { from { transform: translateX(-100%); } to { transform: translateX(322%); } }
  #boot.ready #bootBar { opacity: 0; }
  #boot.ready #bootSweep { animation: none; }
  #bootBar.indet #bootFill { opacity: 0; }   /* index.html sets .indet when no shader total is stored yet */
  #bootCount { min-height: 1em; margin-top: -8px; font: 500 clamp(9px, 2.4vw, 11px)/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .2em; text-indent: .2em;
    color: rgba(90,208,255,.7); text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; transition: opacity .5s ease-out; }
  #boot.ready #bootCount { opacity: 0; }
  #bootStats { box-sizing: border-box; width: min(94vw, 760px); max-height: 30vh; margin: 0; padding: 8px 10px; overflow: auto; touch-action: pan-x pan-y; pointer-events: auto;
    font: 400 clamp(8px, 1.9vw, 10px)/1.35 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: rgba(190,235,255,.9); text-align: left; white-space: pre-wrap; word-break: break-all;
    background: rgba(0,10,20,.72); border: 1px solid rgba(12,200,255,.3); border-radius: 4px; -webkit-user-select: text; user-select: text; }
  #bootStats[hidden] { display: none; }
  #bootStats.copied { border-color: rgba(120,255,160,.7); }
  #bootBtns { display: flex; flex-direction: column; gap: 18px; align-items: center; touch-action: auto; margin-top: 14px; }
  #bootBtns[hidden] { display: none; }
  #bootMain, #bootQuick { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center; }
  #bootBtns button { box-sizing: border-box; border: 1px solid rgba(12,200,255,.5); cursor: pointer; -webkit-tap-highlight-color: transparent;
    font-family: -apple-system, system-ui, sans-serif; font-weight: 600; text-transform: uppercase; white-space: nowrap;
    color: #5ad0ff; background: rgba(12,200,255,.12); transition: color .15s, border-color .15s, box-shadow .15s, background .15s; }
  #bootMain button { min-width: min(40vw, 230px); height: 56px; padding: 0 28px; border-radius: 28px; font-size: clamp(13px, 3.4vw, 17px); letter-spacing: .3em; text-indent: .3em;
    text-shadow: 0 0 10px rgba(12,200,255,.6); }
  #bootQuick button { height: 30px; padding: 0 16px; border-radius: 15px; font-size: clamp(9px, 2.2vw, 11px); letter-spacing: .22em; text-indent: .22em; opacity: .7; border-color: rgba(12,200,255,.3); background: transparent; }
  #bootBtns button:hover, #bootBtns button:focus-visible { color: #fff; border-color: #0cc8ff; box-shadow: 0 0 14px rgba(12,200,255,.5); outline: none; opacity: 1; }
  #bootBtns button:disabled, #bootBtns button:disabled:hover { opacity: .3; cursor: default; color: #5ad0ff; box-shadow: none; border-color: rgba(12,200,255,.3); }
  #bootMain button.primary { color: #fff; background: rgba(12,200,255,.3); border-color: #0cc8ff; box-shadow: 0 0 18px rgba(12,200,255,.55), inset 0 0 12px rgba(12,200,255,.35); }
  #bootGate { display: flex; gap: 10px; align-items: center; touch-action: auto; margin-top: 20px; }
  #bootGate[hidden] { display: none; }
  #bootGate input, #bootGate button { height: 34px; box-sizing: border-box; padding: 0 16px; border: 1px solid rgba(12,200,255,.5); border-radius: 17px;
    font: 600 11px/1 -apple-system, system-ui, sans-serif; letter-spacing: .2em; background: rgba(2,6,16,.5); color: #fff; outline: none; }
  #bootGate input { width: min(58vw, 200px); text-align: center; -webkit-user-select: text; user-select: text; }
  #bootGate input:focus { border-color: #0cc8ff; box-shadow: 0 0 10px rgba(12,200,255,.4); }
  #bootGate button { cursor: pointer; color: #5ad0ff; background: rgba(12,200,255,.12); }
  #bootGate button:hover { color: #fff; border-color: #0cc8ff; }
  #boot.denied #bootMsg { color: #ff5a7a; }
  #boot.denied #bootGate input { border-color: #ff5a7a; }
  @keyframes bootBlink { 50% { opacity: .35; } }
  #padBtns {
    position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: var(--footer-h, 46px);
    display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 17;
  }
  #btnEmoji { width: 46px; height: 46px; font-size: 25px; letter-spacing: 0; }
  body:not(.desk) #btnFire { width: 92px; height: 92px; font-size: 12px; letter-spacing: .14em; }
  #btnThrust { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(var(--footer-h, 46px) + var(--footer-lift, 0px)); z-index: 17;
    width: 92px; height: 92px; font-size: 12px; transition: transform .22s ease-out, bottom .18s ease-out; }
  body:not(.desk) #padBtns { bottom: calc(var(--footer-h, 46px) + 104px); }
  body.noStick #padBtns { bottom: var(--footer-h, 46px); }
  body.stickRight #btnThrust { right: auto; left: calc(20px + env(safe-area-inset-left, 0px)); }
  #btnThrust.boostOn { border-color: rgba(255,90,176,1); background: rgba(255,90,176,.55); color: #fff; }
  #btnBoost {
    position: fixed; left: calc(49px + env(safe-area-inset-left, 0px)); bottom: calc(var(--footer-h, 46px) + 166px); z-index: 17;
    width: 92px; height: 92px; line-height: 1.5;
    transition: opacity .4s ease-out;
    border-color: rgba(255,90,176,1); color: #fff; background: rgba(255,90,176,.36); font-size: 12px; letter-spacing: .18em;
    animation: boostPulse .5s ease-in-out infinite;
  }
  @keyframes boostPulse { 50% { box-shadow: 0 0 28px rgba(255,90,176,1); background: rgba(255,90,176,.85); color: #fff; } }
  #btnChat { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); top: 46px; z-index: 18; width: 92px; height: 92px; font-size: 11px; line-height: 1.5; letter-spacing: .14em; }
  #btnPause { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); top: 150px; z-index: 18; width: 92px; height: 48px; font-size: 11px; letter-spacing: .14em; }
  #btnChat[hidden], #btnPause[hidden], #btnBoost[hidden] { display: none; }
  body.chat #btnPause { display: none; }
  body.stickRight #stick, body.stickRight #walkStick { left: auto; right: calc(20px + env(safe-area-inset-right, 0px)); }
  body.stickRight #btnBoost { left: auto; right: calc(49px + env(safe-area-inset-right, 0px)); }
  #walkJump { position: fixed; right: calc(49px + env(safe-area-inset-right, 0px)); bottom: calc(var(--footer-h, 46px) + 29px); z-index: 17; width: 92px; height: 92px; border-radius: 50%;
    font-size: 12px; letter-spacing: .18em; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.75); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  #walkJump.on { background: rgba(255,255,255,.42); }
  body.stickRight #walkJump { right: auto; left: calc(49px + env(safe-area-inset-left, 0px)); }
  #btnBoost.calm { animation: none; opacity: .75; }
  body.noStick #btnBoost { bottom: var(--footer-h, 46px); left: calc(20px + env(safe-area-inset-left, 0px)); }
  body.noStick.stickRight #btnBoost { left: auto; right: calc(20px + env(safe-area-inset-right, 0px)); }
  body.noStick #btnThrust { right: auto; left: calc(20px + env(safe-area-inset-left, 0px)); }
  body.noStick.stickRight #btnThrust { left: auto; right: calc(20px + env(safe-area-inset-right, 0px)); }
  #btnThrust.sliding { transition: none; }
  #boostSlot {
    position: fixed; left: calc(20px + env(safe-area-inset-left, 0px)); bottom: calc(var(--footer-h, 46px) + var(--footer-lift, 0px)); z-index: 16; pointer-events: none;
    width: 92px; height: 196px; border-radius: 46px; box-sizing: border-box;
    border: 2px solid rgba(255,90,176,1); background: rgba(255,90,176,.22);
    animation: boostPulse .5s ease-in-out infinite; transition: opacity .4s ease-out;
  }
  #boostSlot span { position: absolute; left: 0; right: 0; top: 24px; text-align: center; color: #fff; font: 700 12px/1.5 -apple-system, system-ui, sans-serif; letter-spacing: .18em; text-indent: .18em; }
  #boostSlot.calm { animation: none; opacity: .5; }
  #boostSlot[hidden] { display: none; }
  body.stickRight #boostSlot { left: auto; right: calc(20px + env(safe-area-inset-right, 0px)); }
  body.stickRight #padBtns { right: auto; left: calc(20px + env(safe-area-inset-left, 0px)); }
  body.stickRight #emojiPick { right: auto; left: calc(124px + env(safe-area-inset-left, 0px)); }
  #padBtns[hidden], #emojiPick[hidden], .padBtn[hidden], .gunHint[hidden] { display: none; }
  body:not(.desk) .gunHelp { display: none; }
  .padBtn {
    width: 62px; height: 62px; border-radius: 50%; padding: 0;
    border: 1px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.28);
    color: rgba(255,255,255,0.95); font: 700 10px/1 -apple-system, system-ui, sans-serif; letter-spacing: .12em;
    touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  .padBtn:active { background: rgba(255,255,255,0.45); }
  .padBtn, #emojiPick button { cursor: pointer; }
  #btnFire { font-size: 26px; letter-spacing: 0; }
  @media (pointer: coarse) and (max-height: 500px), (pointer: coarse) and (max-width: 500px) {
    :root { --topbar: 21px; }
    #topBar { font-size: 9px; }
    #topLeft .ttl { height: 15px; margin-right: 8px; }
    #hudRight { font-size: 9px; gap: 8px; }
    #micBtn, #camBtn { font-size: 9px; padding: 5px 12px; }
    #hudStackL, #hudStackR { top: calc(32px + env(safe-area-inset-top, 0px)); }
    #pilotCount { top: calc(32px + env(safe-area-inset-top, 0px)); }
    #status { top: calc(50px + env(safe-area-inset-top, 0px)); }
  }
  @media (pointer: coarse) and (orientation: portrait) and (max-width: 500px) {
    .hudBarMeter { width: calc(50vw - 24px); }
    .hudMeter { width: calc(50vw - 24px); box-sizing: border-box; }
    .hudMeter i { flex: 1 1 0; min-width: 0; }
  }
  #emojiPick {
    position: fixed; right: calc(124px + env(safe-area-inset-right, 0px)); bottom: calc(var(--footer-h, 46px) + 208px);
    display: grid; grid-template-columns: repeat(5, 46px); gap: 8px; padding: 10px; border-radius: 14px; z-index: 18;
    background: rgba(8,10,22,0.88); border: 1px solid rgba(255,255,255,0.2);
    touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  #emojiPick button {
    width: 46px; height: 46px; font-size: 24px; padding: 0;
    background: none; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  }
  body.desk #padBtns { left: auto; right: calc(16px + 76px + 12px + env(safe-area-inset-right, 0px)); top: calc(var(--topbar) + 16px + 7px); bottom: auto; transform: none; flex-direction: row; gap: 12px; z-index: 11; }
  body.desk .gunHelp { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  body.desk .gunHint { display: block; font-size: 12px; letter-spacing: .12em; color: #0cc8ff; text-shadow: 0 0 8px rgba(0,0,0,.8); white-space: nowrap; text-align: right; pointer-events: none; }
  body.desk .gunHint b { color: #fff; font-weight: 600; }
  body.desk #hudStackR { right: 16px; top: 68px; }
  body.desk #emojiPick { left: auto; right: calc(16px + env(safe-area-inset-right, 0px)); top: calc(var(--topbar) + 130px); bottom: auto; transform: none; }
  body.chat #btnChat { width: 48px; height: 48px; font-size: 20px; line-height: 1; letter-spacing: 0; top: calc(38px + env(safe-area-inset-top, 0px)); background: #0cc8ff; border-color: #8ae0ff; color: #02060f; box-shadow: 0 0 14px rgba(12,200,255,.8); }
  body.desk #btnEmoji, body.desk #btnBoost, body.desk #btnChat, body.desk #btnPause { display: none; }
  #ctrRet, #ctrChev, #aimRing, #reticle, #aimReticle, #objLock, #objRet, #lockRing, .ringRead, .ringDia, .retTag { z-index: 30; }
  #hitX { z-index: 31; }