/* Teegarden UI. Tokens, base, components (tg-*), then screen layouts.
   Frames: every framed element gets its 1px hairline from a ::before ring
   (keyhole polygon with evenodd), so chamfered corners keep their outline. */

@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ChakraPetch-Regular-latin.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ChakraPetch-SemiBold-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/JetBrainsMono-Regular-latin.woff2") format("woff2"); }

:root {
  /* colour */
  --tg-bg: #07061a;
  --tg-glass: rgba(12, 12, 32, .56);
  --tg-glass-hi: rgba(18, 18, 44, .80);
  --tg-well: rgba(6, 6, 20, .55);
  --tg-line: rgba(170, 182, 255, .14);
  --tg-frame: rgba(170, 182, 255, .28);
  --tg-text: #eef1ff;
  --tg-text-2: #9aa3c4;
  --tg-text-3: #6e7899;
  --tg-warm: #ff5a36;
  --tg-warm-soft: rgba(255, 90, 54, .16);
  --tg-cool: #7fe3ff;
  --tg-cool-hi: #c4f3ff;
  --tg-cool-soft: rgba(127, 227, 255, .12);
  --tg-good: #5cf2a4;
  --tg-mid: #ffc247;
  --tg-bad: #ff4d6d;
  --tg-ink: #04101a;

  /* spacing */
  --tg-s1: 4px; --tg-s2: 8px; --tg-s3: 12px; --tg-s4: 16px; --tg-s5: 24px; --tg-s6: 32px; --tg-s7: 48px;
  --tg-gutter: 16px;
  --tg-inset-t: calc(env(safe-area-inset-top, 0px) + var(--tg-gutter));
  --tg-inset-b: calc(env(safe-area-inset-bottom, 0px) + var(--tg-gutter));
  --tg-inset-l: calc(env(safe-area-inset-left, 0px) + var(--tg-gutter));
  --tg-inset-r: calc(env(safe-area-inset-right, 0px) + var(--tg-gutter));

  /* type */
  --tg-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --tg-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --tg-fs-label: 10px; --tg-fs-xs: 11px; --tg-fs-sm: 13px; --tg-fs-md: 15px;
  --tg-fs-lg: 20px; --tg-fs-xl: 32px; --tg-fs-hero: 64px;
  --tg-track: .16em;

  /* shape, effects, layers, motion */
  --tg-radius: 0;
  --tg-joy: 132px;
  --tg-cut: 14px;
  --tg-cut-s: 7px;
  --tg-blur: 14px;
  --tg-z-flight: 10; --tg-z-title: 20; --tg-z-toast: 30;
  --tg-dur-fast: 120ms; --tg-dur: 160ms; --tg-dur-slow: 200ms;
  --tg-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: var(--tg-bg); -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.tg-hud {
  position: fixed; inset: 0; z-index: var(--tg-z-flight);
  pointer-events: none; user-select: none; -webkit-user-select: none;
  font-family: var(--tg-display); color: var(--tg-text); font-size: var(--tg-fs-sm);
  -webkit-font-smoothing: antialiased;
}
.tg-hud input { user-select: text; -webkit-user-select: text; }

/* ---------- chamfer frame (shared by framed components) ---------- */
.tg-panel, .tg-btn, .tg-chip, .tg-input, .tg-toast, .tg-kbd, .tg-joy, .tg-joy-knob, .tg-stepper {
  --c: var(--tg-cut);
  --tg-clip-out: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  --tg-clip-ring: polygon(evenodd,
    var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c), var(--c) 0,
    calc(var(--c) + .4px) 1px, calc(100% - var(--c) - .4px) 1px, calc(100% - 1px) calc(var(--c) + .4px),
    calc(100% - 1px) calc(100% - var(--c) - .4px), calc(100% - var(--c) - .4px) calc(100% - 1px),
    calc(var(--c) + .4px) calc(100% - 1px), 1px calc(100% - var(--c) - .4px), 1px calc(var(--c) + .4px),
    calc(var(--c) + .4px) 1px);
  position: relative;
  clip-path: var(--tg-clip-out);
}
.tg-panel::before, .tg-btn::before, .tg-chip::before, .tg-input::before, .tg-toast::before,
.tg-kbd::before, .tg-joy::before, .tg-joy-knob::before, .tg-stepper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--tg-frame); clip-path: var(--tg-clip-ring);
  transition: background var(--tg-dur) var(--tg-ease);
}

/* ---------- panel (glass) ---------- */
.tg-panel {
  --tg-cut: 14px;
  background: var(--tg-glass);
  -webkit-backdrop-filter: blur(var(--tg-blur)) saturate(130%);
  backdrop-filter: blur(var(--tg-blur)) saturate(130%);
  color: var(--tg-text);
}

/* ---------- labels, readouts, units ---------- */
.tg-label {
  font: 400 var(--tg-fs-label)/1.2 var(--tg-display);
  letter-spacing: var(--tg-track); text-transform: uppercase; color: var(--tg-text-2);
}
.tg-readout {
  font-family: var(--tg-mono); font-size: var(--tg-fs-md); font-weight: 400; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--tg-text);
}
.tg-readout--hero { font-size: var(--tg-fs-hero); line-height: .9; letter-spacing: -.02em; }
.tg-unit {
  font: 600 var(--tg-fs-xs)/1 var(--tg-display); letter-spacing: .14em;
  text-transform: uppercase; color: var(--tg-text-2);
}
.tg-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--tg-line), transparent); border: 0; margin: 0; }

/* ---------- buttons ---------- */
.tg-btn {
  --tg-cut: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--tg-s2);
  height: 40px; padding: 0 18px; border: 0; border-radius: var(--tg-radius);
  background: var(--tg-glass-hi); color: var(--tg-text);
  font: 600 var(--tg-fs-xs)/1 var(--tg-display); letter-spacing: var(--tg-track); text-transform: uppercase;
  white-space: nowrap; cursor: pointer; pointer-events: auto; touch-action: manipulation;
  transition: background var(--tg-dur) var(--tg-ease), color var(--tg-dur) var(--tg-ease), transform var(--tg-dur-fast) var(--tg-ease);
}
.tg-btn:hover { background: var(--tg-cool-soft); color: var(--tg-cool-hi); }
.tg-btn:hover::before { background: var(--tg-cool); }
.tg-btn:active { transform: translateY(1px); }
.tg-btn:focus { outline: none; }
.tg-btn:focus-visible::before { background: #fff; }
.tg-btn--primary { background: var(--tg-cool); color: var(--tg-ink); }
.tg-btn--primary::before { background: rgba(4, 16, 26, .35); }
.tg-btn--primary:hover { background: var(--tg-cool-hi); color: var(--tg-ink); }
.tg-btn--primary:hover::before { background: rgba(4, 16, 26, .5); }
.tg-btn--ghost { background: transparent; }
.tg-btn--block { width: 100%; }
.tg-btn--touch {
  --tg-cut: 9px; width: 64px; height: 56px; padding: 0; font-size: 10px;
  background: rgba(10, 10, 28, .55); -webkit-backdrop-filter: blur(var(--tg-blur)); backdrop-filter: blur(var(--tg-blur));
}
.tg-btn--touch:active, .tg-btn--touch.is-held { background: rgba(127, 227, 255, .26); color: var(--tg-text); }
.tg-btn--touch.tg-btn--primary { background: var(--tg-cool); color: var(--tg-ink); }
.tg-btn--touch.tg-btn--primary:active { background: var(--tg-cool-hi); }

/* ---------- inputs ---------- */
.tg-input {
  --tg-cut: var(--tg-cut-s);
  display: flex; align-items: center; min-height: 40px; padding: 0 12px;
  background: var(--tg-well); pointer-events: auto;
}
.tg-input:focus-within::before { background: var(--tg-cool); }
.tg-input input {
  flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; padding: 0;
  background: transparent; color: var(--tg-text); caret-color: var(--tg-cool);
  font: 400 var(--tg-fs-md)/1.2 var(--tg-display); letter-spacing: .03em;
}
.tg-input input::placeholder { color: var(--tg-text-3); opacity: 1; }

/* ---------- chips ---------- */
.tg-chip {
  --tg-cut: var(--tg-cut-s);
  display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px;
  background: var(--tg-well); color: var(--tg-text-3);
  font: 600 10px/1 var(--tg-display); letter-spacing: var(--tg-track); text-transform: uppercase;
  transition: color var(--tg-dur) var(--tg-ease), background var(--tg-dur) var(--tg-ease);
}
.tg-chip > i { display: block; width: 5px; height: 5px; background: currentColor; box-shadow: 0 0 6px currentColor; }
.tg-chip.is-on { color: var(--tg-cool); background: var(--tg-cool-soft); }
.tg-chip.is-on::before { background: var(--tg-cool); }
.tg-chip.is-good { color: var(--tg-good); }
.tg-chip.is-good::before { background: rgba(92, 242, 164, .6); }
.tg-chip.is-mid { color: var(--tg-mid); }
.tg-chip.is-mid::before { background: rgba(255, 194, 71, .6); }
.tg-chip.is-bad { color: var(--tg-warm); background: var(--tg-warm-soft); }
.tg-chip.is-bad::before { background: rgba(255, 90, 54, .8); }

/* ---------- meter (vertical throttle) ---------- */
.tg-meter { position: relative; background: rgba(170, 182, 255, .08); }
.tg-meter--v { width: 8px; height: 112px; }
.tg-meter::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 1px; background: var(--tg-text-2);
}
.tg-meter-fill { position: absolute; left: 0; right: 0; height: 0; background: var(--tg-cool); transition: none; }
.tg-meter-fill.is-up { bottom: 50%; }
.tg-meter-fill.is-down { top: 50%; background: var(--tg-warm); }

/* ---------- stepper (style only; no HUD control uses it yet) ---------- */
.tg-stepper {
  --tg-cut: var(--tg-cut-s);
  display: inline-flex; align-items: stretch; background: var(--tg-well);
}
.tg-stepper .tg-readout { display: flex; align-items: center; justify-content: center; min-width: 52px; padding: 0 8px; }

/* ---------- toast ---------- */
.tg-toast {
  --tg-cut: var(--tg-cut-s);
  padding: 9px 14px; background: var(--tg-glass-hi); color: var(--tg-text);
  -webkit-backdrop-filter: blur(var(--tg-blur)); backdrop-filter: blur(var(--tg-blur));
  font: 600 var(--tg-fs-xs)/1.35 var(--tg-display); letter-spacing: .08em; text-transform: uppercase;
  max-width: min(92vw, 380px);
  animation: tg-toast-in var(--tg-dur-slow) var(--tg-ease) both;
  transition: opacity var(--tg-dur) var(--tg-ease), transform var(--tg-dur) var(--tg-ease);
}
.tg-toast.is-info::before { background: rgba(127, 227, 255, .6); }
.tg-toast.is-warn { color: var(--tg-warm); }
.tg-toast.is-warn::before { background: rgba(255, 90, 54, .75); }
.tg-toast.is-out { opacity: 0; transform: translateY(-4px); }
@keyframes tg-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- tabs ---------- */
.tg-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--tg-line); }
.tg-tab {
  position: relative; padding: 0 0 9px; border: 0; background: none; cursor: pointer; pointer-events: auto;
  color: var(--tg-text-3); font: 600 10px/1 var(--tg-display); letter-spacing: var(--tg-track); text-transform: uppercase;
  transition: color var(--tg-dur) var(--tg-ease);
}
.tg-tab:hover { color: var(--tg-text); }
.tg-tab:focus { outline: none; }
.tg-tab:focus-visible { color: #fff; }
.tg-tab[aria-selected="true"] { color: var(--tg-cool); }
.tg-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tg-cool);
}

/* ---------- keycaps (legend) ---------- */
.tg-kbd {
  --tg-cut: 4px;
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px;
  background: var(--tg-well); color: var(--tg-cool);
  font: 400 11px/1 var(--tg-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- joystick ---------- */
.tg-joy {
  --tg-cut: 30px;
  position: absolute; left: var(--tg-inset-l); bottom: var(--tg-inset-b); width: var(--tg-joy); height: var(--tg-joy);
  background: radial-gradient(circle at 50% 50%, rgba(127, 227, 255, .12), rgba(6, 6, 20, .5) 72%);
  -webkit-backdrop-filter: blur(var(--tg-blur)); backdrop-filter: blur(var(--tg-blur));
  pointer-events: auto; touch-action: none;
}
.tg-joy-knob {
  --tg-cut: 9px;
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  background: rgba(127, 227, 255, .88); box-shadow: 0 0 18px rgba(127, 227, 255, .35);
  pointer-events: none;
}
.tg-joy-knob::before { background: rgba(4, 16, 26, .35); }

/* ---------- look zone + button pad (touch) ---------- */
.tg-touch-ui { position: absolute; inset: 0; pointer-events: none; }
.tg-look { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; pointer-events: auto; touch-action: none; }
.tg-pad {
  position: absolute; right: var(--tg-inset-r); bottom: var(--tg-inset-b);
  display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; pointer-events: none;
}
/* FIRE sits above the pad's right end (pad is 2 rows, 120 px, plus a 12 px gap), so it clears the six buttons and the stick. */
.tg-btn--touch.tg-fire {
  --tg-cut: 12px; position: absolute; right: var(--tg-inset-r); bottom: calc(var(--tg-inset-b) + 132px);
  width: 76px; height: 76px; flex-direction: column; gap: 5px;
  background: var(--tg-warm); color: var(--tg-ink);
}
.tg-btn--touch.tg-fire::before { background: rgba(4, 16, 26, .35); }
.tg-btn--touch.tg-fire:active, .tg-btn--touch.tg-fire.is-on { background: #ff8a6e; color: var(--tg-ink); }
.tg-fire svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tg-fire span { font: 600 10px/1 var(--tg-display); letter-spacing: var(--tg-track); text-transform: uppercase; }
.tg-unarmed .tg-fire { display: none; }

/* ---------- title screen ---------- */
.tg-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 0% 45%, rgba(7, 6, 26, .30), rgba(7, 6, 26, .86) 72%),
    linear-gradient(180deg, rgba(7, 6, 26, .25), rgba(7, 6, 26, .65));
}
.tg-title {
  position: absolute; inset: 0; z-index: var(--tg-z-title);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--tg-s4);
  padding: calc(env(safe-area-inset-top, 0px) + var(--tg-s4)) var(--tg-inset-r) calc(env(safe-area-inset-bottom, 0px) + var(--tg-s4)) max(9vw, var(--tg-inset-l));
  overflow-y: auto; pointer-events: none; touch-action: pan-y;
}
.tg-title-main { width: min(560px, 100%); padding: 30px 30px 22px; pointer-events: auto; flex: none; }
.tg-brand { display: flex; align-items: center; gap: 12px; }
.tg-brand-bar { width: 26px; height: 2px; background: var(--tg-warm); box-shadow: 0 0 10px rgba(255, 90, 54, .7); }
.tg-wordmark {
  position: relative; margin: 20px 0 16px;
  font: 600 clamp(40px, 8.2vw, 84px)/.92 var(--tg-display); letter-spacing: .05em; text-transform: uppercase;
  color: var(--tg-text); white-space: nowrap; text-shadow: 0 0 30px rgba(255, 90, 54, .28);
}
.tg-wordmark::after {
  content: ""; position: absolute; inset: -4px -4px; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .34) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, transparent 35%, rgba(255, 120, 80, .16) 50%, transparent 65%);
  background-size: 100% 100%, 100% 300%; background-repeat: no-repeat, no-repeat;
  animation: tg-scan 8s linear infinite;
}
@keyframes tg-scan { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 100%; } }
.tg-tagline { margin: 0; max-width: 38ch; font-size: 14px; line-height: 1.55; color: var(--tg-text-2); }
.tg-form { display: grid; gap: 10px; margin-top: 22px; }
.tg-form .tg-label { margin-bottom: -2px; }
.tg-account { margin-top: var(--tg-s3); pointer-events: auto; }
.tg-account > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  padding: 12px 0 10px; border-top: 1px solid var(--tg-line); color: var(--tg-text-2);
}
.tg-account > summary::-webkit-details-marker { display: none; }
.tg-account > summary:hover { color: var(--tg-text); }
.tg-account > summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform var(--tg-dur) var(--tg-ease);
}
.tg-account[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
.tg-account-body { display: grid; gap: 10px; padding-top: 4px; }
.tg-row { display: flex; gap: 10px; }
.tg-row > .tg-btn { flex: 1; }
.tg-auth-msg { margin: 0; min-height: 1em; font: 400 12px/1.4 var(--tg-display); color: var(--tg-text-2); }
.tg-auth-msg.is-ok { color: var(--tg-good); }
.tg-auth-msg.is-err { color: var(--tg-warm); }

.tg-legend {
  position: absolute; right: var(--tg-inset-r); bottom: var(--tg-inset-b); width: 300px;
  padding: 16px 20px 18px; pointer-events: auto;
}
.tg-keys { display: grid; gap: 9px; margin-top: 14px; }
.tg-key { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: center; }
.tg-keycaps { display: flex; flex-wrap: wrap; gap: 4px; }
.tg-key-desc { font-size: 12px; color: var(--tg-text-2); }

/* ---------- flight HUD ---------- */
.tg-flight { position: absolute; inset: 0; pointer-events: none; }
.tg-hud[data-screen="title"] .tg-flight { display: none; }
.tg-hud:not([data-screen="title"]) .tg-title,
.tg-hud:not([data-screen="title"]) .tg-scrim { display: none; }

.tg-top {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12px); left: var(--tg-inset-l); right: var(--tg-inset-r);
  height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px;
}
.tg-top-l, .tg-top-r { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tg-top-r { gap: 8px; }
.tg-top-pilots { display: flex; align-items: center; gap: 8px; margin-right: 6px; }
/* the link chip only speaks up when something is wrong; the right-hand buttons stay dim until used */
.tg-flight [data-conn].is-good { display: none; }
.tg-hud:not(.tg-touch) .tg-top-r > .tg-btn { opacity: .62; transition: opacity var(--tg-dur) var(--tg-ease); }
.tg-hud:not(.tg-touch) .tg-top-r > .tg-btn:hover, .tg-top-r > .tg-btn[aria-expanded="true"] { opacity: 1; }
.tg-top-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.tg-top-menu { gap: 8px; height: 40px; padding: 0 14px; }
.tg-top-pilots .tg-readout { font-size: 14px; }
.tg-top-edit { display: none; align-items: center; gap: 10px; }
.tg-btn--icon { --tg-cut: 8px; width: 44px; height: 44px; padding: 0; }
.tg-btn--icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.tg-hud.is-editing .tg-top-l > :not(.tg-top-edit) { display: none; }
.tg-hud.is-editing .tg-top-edit { display: flex; }
.tg-hud.is-editing [data-layout-btn] { display: none; }
.tg-hud.is-editing .tg-top-pilots { display: none; }
.tg-hud[data-screen="title"] .tg-top-edit { display: none; }
.tg-wordmark-sm {
  position: relative; padding-left: 13px; font: 600 12px/1 var(--tg-display); letter-spacing: .24em;
  text-transform: uppercase; color: var(--tg-text); white-space: nowrap;
}
.tg-wordmark-sm::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  background: var(--tg-warm); box-shadow: 0 0 8px var(--tg-warm);
}

.tg-reticle {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  color: rgba(238, 241, 255, .86); filter: drop-shadow(0 0 3px rgba(0, 0, 0, .55));
}
.tg-reticle svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.4; }
.tg-reticle .tg-reticle-dot { fill: currentColor; stroke: none; }

.tg-net {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 74px); right: var(--tg-inset-r);
  width: 252px; padding: 14px 16px 16px; pointer-events: none;
}
.tg-net-head { margin-bottom: 12px; padding: 2px 0; }
.tg-drag-handle { touch-action: none; pointer-events: auto; cursor: move; }
.tg-chat-head { padding: 0 0 2px; color: var(--tg-text-3); }
.tg-net-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.tg-net-cell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tg-net-cell .tg-readout { font-size: 14px; }
.tg-net-cell.is-good .tg-readout { color: var(--tg-good); }
.tg-net-cell.is-mid .tg-readout { color: var(--tg-mid); }
.tg-net-cell.is-bad .tg-readout { color: var(--tg-bad); }

/* Dock: one instrument panel. Throttle setpoint bar | speed, throttle %, live pills | slim bars
   (hull, boost fuel; heat only near its limit). Pills show only while they mean something. */
.tg-dock { position: absolute; right: var(--tg-inset-r); bottom: var(--tg-inset-b); pointer-events: none; }
.tg-inst { display: flex; align-items: stretch; gap: 14px; padding: 12px 16px 12px 14px; min-width: 216px; pointer-events: none; }
.tg-inst .tg-throttle { height: auto; min-height: 76px; width: 6px; }
.tg-inst-main { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.tg-speed-row { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.tg-inst .tg-readout--hero { font-size: 48px; line-height: .9; }
.tg-inst-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.tg-thr-v { display: inline-flex; align-items: baseline; gap: 6px; }
.tg-thr-v .tg-readout { font-size: 13px; min-width: 4ch; }
.tg-thr-v .tg-readout.is-on { color: var(--tg-warm); }
.tg-chips { position: relative; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.tg-chips .tg-chip { --tg-cut: 5px; height: 20px; padding: 0 7px; font-size: 9px; }
.tg-chips .tg-chip:not(.is-on) { display: none; }
.tg-chip[data-chip="assist"].is-on { color: var(--tg-mid); background: rgba(255, 194, 71, .12); }
.tg-chip[data-chip="assist"].is-on::before { background: rgba(255, 194, 71, .6); }
.tg-chip[data-chip="boost"].is-on:not(.is-bad) { color: var(--tg-ink); background: var(--tg-cool); }
.tg-bars { display: grid; gap: 5px; }
.tg-bar { display: grid; grid-template-columns: 38px 1fr 40px; align-items: center; gap: 8px; }
.tg-bar[hidden] { display: none; }
.tg-bar .tg-label { font-size: 9px; }
.tg-bar .tg-readout { font-size: 11px; text-align: right; }
.tg-bar-meter { height: 4px; }
.tg-bar-meter::after { display: none; }
.tg-bar-meter .tg-meter-fill { top: 0; bottom: 0; left: 0; right: auto; width: 100%; height: auto; background: var(--tg-cool); }
.tg-bar-meter.is-mid .tg-meter-fill { background: var(--tg-mid); }
.tg-bar-meter.is-low .tg-meter-fill { background: var(--tg-warm); }
.tg-bar[data-fuel].is-on .tg-meter-fill { box-shadow: 0 0 8px var(--tg-cool); }
.tg-bar[data-heat] .tg-label, .tg-bar[data-heat] .tg-readout { color: var(--tg-mid); }
.tg-guns-heat { position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; background: var(--tg-warm); box-shadow: 0 0 4px rgba(255, 90, 54, .7); }
.tg-bar[data-guns].is-on .tg-label, .tg-bar[data-guns].is-on .tg-readout { color: var(--tg-warm); }
.tg-bar[data-heat].is-over .tg-label, .tg-bar[data-heat].is-over .tg-readout { color: var(--tg-warm); }
.tg-inst.is-hit::before { animation: tg-hull-flash 600ms var(--tg-ease) 1; }
@keyframes tg-hull-flash { from { background: var(--tg-warm); } to { background: var(--tg-frame); } }
/* translate, not transform: the layout drag sets transform on the dock */
.tg-inst.is-hit { animation: tg-hull-shake 250ms linear 1; }
@keyframes tg-hull-shake {
  20% { translate: -3px 0; } 40% { translate: 3px 0; } 60% { translate: -2px 0; } 80% { translate: 2px 0; } to { translate: 0 0; }
}

.tg-chat {
  position: absolute; left: var(--tg-inset-l); bottom: var(--tg-inset-b);
  width: min(340px, 42vw); display: flex; flex-direction: column; gap: 6px;
}
.tg-chat-log {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  max-height: min(200px, calc(100dvh - 280px)); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
}
.tg-chat-line {
  display: block; padding: 4px 10px;
  background: linear-gradient(90deg, rgba(6, 6, 20, .66), rgba(6, 6, 20, .22) 88%, transparent);
  border-left: 1px solid var(--tg-cool); color: var(--tg-text);
  font-size: var(--tg-fs-sm); line-height: 1.35; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  overflow-wrap: anywhere;
}
.tg-chat-name {
  margin-right: 8px; font: 600 var(--tg-fs-xs)/1.45 var(--tg-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tg-cool);
}
.tg-chat-line.is-notice { border-left-color: var(--tg-warm); color: var(--tg-text-2); }
.tg-chat-log > :nth-last-child(n+2) { opacity: .9; }
.tg-chat-log > :nth-last-child(n+3) { opacity: .78; }
.tg-chat-log > :nth-last-child(n+4) { opacity: .66; }
.tg-chat-log > :nth-last-child(n+5) { opacity: .54; }
.tg-chat-log > :nth-last-child(n+6) { opacity: .42; }
.tg-chat-log > :nth-last-child(n+7) { opacity: .32; }
.tg-chat-log > :nth-last-child(n+8) { opacity: .24; }
.tg-chat-head { transition: opacity var(--tg-dur-slow) var(--tg-ease); }
.tg-chat:not(.is-active) .tg-chat-head { opacity: 0; }
.tg-hud.is-editing .tg-chat .tg-chat-head { opacity: 1; }
.tg-chat-line { transition: opacity 1.2s var(--tg-ease); }
.tg-chat:not(.is-open) .tg-chat-line.is-old { opacity: 0 !important; }
.tg-chat-input { width: 100%; }
.tg-chat-input input { font-size: var(--tg-fs-sm); }

.tg-toasts {
  position: absolute; left: 0; right: 0; top: calc(50% + 172px);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}

/* Touch: the chat sits above the joystick, so its bottom edge clears the stick. */
.tg-touch .tg-chat { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tg-gutter) + var(--tg-joy) + 12px); }

/* ---------- layout edit mode ---------- */
.tg-edit-frame { display: none; position: absolute; inset: 4px; border: 1px dashed var(--tg-cool); pointer-events: none; }
.tg-edit-frame::after {
  content: ""; position: absolute; right: -5px; bottom: -5px; width: 9px; height: 9px;
  background: var(--tg-cool); box-shadow: 0 0 8px rgba(127, 227, 255, .6);
}
.tg-hud.is-editing .tg-edit-frame { display: block; }
.tg-hud.is-editing [data-drag] { pointer-events: auto; touch-action: none; }
.tg-hud.is-editing [data-drag].is-dragging .tg-edit-frame { border-style: solid; }
.tg-hud.is-editing::before {
  content: ""; position: absolute; inset: 0; pointer-events: auto; background: rgba(4, 4, 14, .22);
}
.tg-hud.is-editing .tg-top { z-index: 1; }
.tg-hud.is-editing .tg-top-edit { display: flex; }
.tg-editbar-note { color: var(--tg-text-2); }

/* Touch on a wide screen: the dock moves to bottom-centre, clear of the button pad. */
@media (min-aspect-ratio: 1/1) and (min-height: 501px) {
  .tg-touch .tg-dock { left: 50%; right: auto; transform: translateX(-50%); }
}

/* ---------- phone portrait (taller than wide) ---------- */
@media (max-aspect-ratio: 1/1) {
  .tg-dock { left: var(--tg-inset-l); right: auto; top: calc(env(safe-area-inset-top, 0px) + 74px); bottom: auto; }
  .tg-inst { min-width: 0; width: 184px; padding: 10px 12px; gap: 10px; }
  .tg-inst .tg-readout--hero { font-size: 38px; }
  .tg-inst .tg-throttle { min-height: 60px; }
  .tg-net { top: calc(env(safe-area-inset-top, 0px) + 290px); left: var(--tg-inset-l); right: auto; }
  .tg-toasts { top: calc(env(safe-area-inset-top, 0px) + 62px); left: auto; right: var(--tg-inset-r); width: 150px; align-items: flex-end; }
  .tg-toasts > :not(:last-child) { display: none; }
  .tg-chat-log { max-height: 150px; }
  .tg-top-pilots { display: none; }
  .tg-wordmark-sm { display: none; }
  .tg-chat { width: min(300px, 62vw); }
  .tg-title { justify-content: center; padding-left: var(--tg-inset-l); }
  .tg-legend { position: relative; right: auto; bottom: auto; width: 100%; margin-top: var(--tg-s3); }
  .tg-keys { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .tg-key { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- phone landscape (short) ---------- */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  :root { --tg-joy: 110px; }
  .tg-title { flex-direction: row; align-items: center; gap: var(--tg-s4); }
  .tg-title-main { width: min(380px, 56%); padding: 18px 22px 12px; }
  .tg-brand { gap: 10px; }
  .tg-wordmark { margin: 10px 0 8px; font-size: 40px; }
  .tg-tagline { font-size: 13px; }
  .tg-form { margin-top: 12px; gap: 8px; }
  .tg-legend { position: relative; right: auto; bottom: auto; width: min(300px, 40%); max-height: calc(100dvh - 24px); overflow-y: auto; padding: 14px 16px; }
  .tg-keys { gap: 7px; margin-top: 10px; }
  .tg-key { grid-template-columns: 92px 1fr; gap: 8px; }
  .tg-dock { left: calc(env(safe-area-inset-left, 0px) + var(--tg-gutter) + var(--tg-joy) + 24px); right: auto; }
  .tg-inst { min-width: 0; width: 188px; padding: 8px 12px; gap: 10px; }
  .tg-inst .tg-readout--hero { font-size: 34px; }
  .tg-inst .tg-throttle { min-height: 52px; }
  .tg-toasts { top: calc(env(safe-area-inset-top, 0px) + 74px); }
  .tg-chat { width: min(256px, 30vw); }
  .tg-chat-log { max-height: min(200px, calc(100dvh - 280px)); }
  .tg-net { width: 262px; padding: 10px 12px 12px; }
  .tg-net-head { margin-bottom: 6px; }
  .tg-net-grid { gap: 8px 12px; }
  .tg-net-cell { gap: 3px; }
  .tg-top { height: 46px; }
  .tg-top-pilots { margin-right: 0; }
  .tg-net { top: calc(env(safe-area-inset-top, 0px) + 66px); }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- settings popover and credits (top bar, title) ---------- */
.tg-top-build svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.tg-top-build { gap: 8px; height: 40px; padding: 0 14px; }
.tg-settings {
  --c: var(--tg-cut-s); position: absolute; right: 0; top: calc(100% + 8px); z-index: 3;
  width: min(300px, 86vw); padding: 14px 16px; display: grid; gap: 12px; pointer-events: auto;
}
.tg-settings > .tg-label { color: var(--tg-cool); }
.tg-music-row { display: flex; align-items: center; gap: 12px; }
.tg-music-row input[type="range"] { flex: 1; min-width: 0; height: 24px; accent-color: var(--tg-cool); pointer-events: auto; margin: 0; }
.tg-music-row .tg-readout { min-width: 3ch; text-align: right; }
.tg-credits { display: grid; gap: 6px; font: 400 12px/1.5 var(--tg-display); color: var(--tg-text-2); }
.tg-credits p { margin: 0; }
.tg-credit-h { color: var(--tg-cool) !important; font-size: 10px !important; }
.tg-settings .tg-credits { border-top: 1px solid var(--tg-line); padding-top: 10px; }

/* ================= build mode ================= */
/* While building, the flight pieces go; top bar, chat and the build panels stay. */
.tg-building .tg-dock, .tg-building .tg-reticle, .tg-building .tg-net,
.tg-building .tg-touch-ui, .tg-building [data-layout-btn] { display: none !important; }
.tg-building .tg-chat-log { max-height: 120px; }
.tg-top { z-index: 3; }

.tg-build { position: absolute; inset: 0; pointer-events: none; font-family: var(--tg-display); }
.build-panel {
  position: absolute; display: flex; flex-direction: column; min-height: 0; pointer-events: auto;
  --c: var(--tg-cut); background: var(--tg-glass);
}
.build-head { display: flex; align-items: center; gap: 4px; padding: 10px 10px 8px 12px; border-bottom: 1px solid var(--tg-line); flex: none; }
.build-grip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 26px; cursor: move; touch-action: none; user-select: none; }
.build-dots {
  flex: none; width: 10px; height: 14px; opacity: .9;
  background: radial-gradient(circle, var(--tg-text-3) 1.1px, transparent 1.6px) 0 0 / 5px 5px;
}
.build-title { font: 600 11px/1 var(--tg-display); letter-spacing: var(--tg-track); text-transform: uppercase; color: var(--tg-text); white-space: nowrap; }
.build-grip--bar { flex: none; min-height: 0; width: 14px; align-self: stretch; padding: 4px 0; justify-content: center; }
.build-grip--bar .build-dots { width: 8px; height: 100%; }
.build-collapse {
  flex: none; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--tg-text-2);
  cursor: pointer; pointer-events: auto; display: flex; align-items: center; justify-content: center;
}
.build-collapse:hover { color: var(--tg-cool); }
.build-collapse svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform var(--tg-dur) var(--tg-ease); }
.build-panel.is-collapsed .build-collapse svg { transform: rotate(180deg); }
.build-panel.is-collapsed > .build-body { display: none; }
.build-body { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; min-height: 0; flex: 1 1 auto; }
.build-ico { display: inline-flex; flex: none; }
.build-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: round; }
.build-cut { --c: 6px; clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }

/* the scroll regions are the body, so the header and the buttons never scroll away */
.build-picker > .build-body, .build-stats > .build-body, .build-hangar > .build-body { overflow: hidden; }

/* tool bar: a horizontal strip at the top centre, between the two side panels */
.build-tools { top: 74px; left: 0; right: 0; margin: 0 auto; width: fit-content; max-width: calc(100% - 2 * (var(--tg-inset-l, 16px) + 320px + 10px)); flex-direction: row; align-items: stretch; gap: 4px; padding: 6px 10px 8px 4px; }
.build-tools > .build-body { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 8px; padding: 4px 6px 2px; }
.build-toolrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.build-sep { width: 1px; height: 24px; background: var(--tg-line); margin: 0 4px; }
.build-tool {
  --tg-cut: 6px; height: 40px; padding: 0 10px; gap: 6px; background: var(--tg-well); color: var(--tg-text-2);
  font-size: 10px; letter-spacing: .12em;
}
.build-tool--icon { width: 40px; padding: 0; }
.build-tool--rot { width: 40px; padding: 0 0 0 0; gap: 2px; }
.build-tool .build-ico svg { width: 16px; height: 16px; }
.build-tool:hover { background: var(--tg-cool-soft); color: var(--tg-cool-hi); }
.build-tool[aria-pressed="true"] { background: var(--tg-cool); color: var(--tg-ink); }
.build-tool[aria-pressed="true"]::before { background: rgba(4, 16, 26, .35); }
.build-place { height: 40px; padding: 0 16px; }
.build-paintchip { height: 40px; width: 40px; padding: 0; background: var(--tg-well); color: var(--tg-text-2); }
.build-chipsw { width: 16px; height: 16px; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.build-keys { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding-top: 8px; border-top: 1px solid var(--tg-line); }
.build-key { display: inline-flex; align-items: center; gap: 6px; font: 400 10px/1 var(--tg-display); letter-spacing: .1em; text-transform: uppercase; color: var(--tg-text-3); }

/* part picker: left column on a desktop, bottom sheet on a phone */
.build-picker { left: var(--tg-inset-l); top: 74px; bottom: 84px; width: 320px; }
.build-search { flex: none; min-height: 34px; }
.build-search input { font-size: 13px; }
.build-tabs { flex: none; display: flex; flex-wrap: wrap; gap: 8px 14px; border-bottom: 1px solid var(--tg-line); }
.build-tab {
  flex: none; position: relative; padding: 0 0 8px; border: 0; background: none; cursor: pointer; pointer-events: auto;
  color: var(--tg-text-3); font: 600 10px/1 var(--tg-display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.build-tab:hover { color: var(--tg-text); }
.build-tab[aria-selected="true"] { color: var(--tg-cool); }
.build-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tg-cool); }
.build-grid {
  flex: none; min-height: 120px; max-height: 240px; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px; align-content: start; padding: 2px 4px 2px 2px; pointer-events: auto; scrollbar-width: thin; scrollbar-color: var(--tg-line) transparent;
}
.build-tile {
  --tg-cut: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 6px 6px 7px; border: 0; text-align: left;
  background: var(--tg-well); color: var(--tg-text); cursor: pointer; pointer-events: auto;
  box-shadow: inset 0 0 0 1px rgba(170, 182, 255, .08);
  clip-path: polygon(var(--tg-cut) 0, calc(100% - var(--tg-cut)) 0, 100% var(--tg-cut), 100% calc(100% - var(--tg-cut)), calc(100% - var(--tg-cut)) 100%, var(--tg-cut) 100%, 0 calc(100% - var(--tg-cut)), 0 var(--tg-cut));
}
.build-tile:hover { background: rgba(127, 227, 255, .10); }
.build-tile.is-on { background: var(--tg-cool-soft); box-shadow: inset 0 0 0 1px var(--tg-cool); }
.build-thumb { display: block; height: 62px; background: radial-gradient(circle at 50% 60%, rgba(127, 227, 255, .10), transparent 70%); }
.build-thumb img, .build-bigthumb { display: block; width: 100%; height: 100%; object-fit: contain; }
.build-tile-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.build-tile-name { font: 600 11px/1.2 var(--tg-display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.build-tile-n, .build-tile-g { font: 400 10px/1.2 var(--tg-mono); color: var(--tg-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.build-tile-g { color: var(--tg-cool); }
.build-empty { grid-column: 1 / -1; margin: 8px 0; color: var(--tg-text-3); font-size: 12px; }

.build-detail { flex: none; display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--tg-line); }
.build-dtop { display: flex; gap: 12px; align-items: flex-start; }
.build-bigthumb { flex: none; width: 104px; height: 104px; background: radial-gradient(circle at 50% 55%, rgba(127, 227, 255, .12), transparent 70%); }
.build-dtext { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.build-fam-name { font: 600 15px/1.1 var(--tg-display); letter-spacing: .07em; text-transform: uppercase; color: var(--tg-text); }
.build-blurb { margin: 0; font: 400 12px/1.45 var(--tg-display); color: var(--tg-text-2); }
.build-variant { font: 400 11px/1.4 var(--tg-mono); color: var(--tg-cool); }
.build-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.build-step { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.build-step .tg-stepper { justify-content: space-between; }
.build-step-btn { --tg-cut: 6px; width: 34px; height: 30px; padding: 0; font-size: 16px; }
.build-step-btn:disabled { color: var(--tg-text-3); }
.build-step-val { flex: 1; justify-content: center; min-width: 0; font-size: 13px; }
.build-facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0; align-items: baseline; }
.build-facts dt { color: var(--tg-text-3); }
.build-facts dd { margin: 0; text-align: right; font-size: 12px; min-width: 0; }

/* paint: the palette, shown when the paint tool is active */
.build-swatches { display: grid; grid-template-columns: repeat(8, 22px); gap: 4px; }
.build-swatch { width: 22px; height: 22px; padding: 0; border: 0; cursor: pointer; pointer-events: auto; --c: 5px; clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.build-swatch:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.build-swatch.is-on { box-shadow: inset 0 0 0 3px var(--tg-ink), inset 0 0 0 5px var(--tg-cool); }
.build-paintall { width: 100%; }

/* ship stats: right column on a desktop */
.build-stats { top: 74px; right: var(--tg-inset-r); width: 280px; max-height: calc(100dvh - 74px - 84px); }
.build-name { min-height: 36px; }
.build-name input { font: 600 14px/1.2 var(--tg-display); letter-spacing: .06em; text-transform: uppercase; }
.build-countline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.build-countline .tg-readout { font-size: 13px; }
.build-err { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--tg-warm-soft); border-left: 2px solid var(--tg-warm); }
.build-err .tg-label { color: var(--tg-warm); }
.build-err-text { margin: 0; font: 600 14px/1.35 var(--tg-display); color: var(--tg-warm); }
.build-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.build-sub { grid-column: 1 / -1; color: var(--tg-cool) !important; padding-top: 4px; border-top: 1px solid var(--tg-line); }
.build-sub:first-child { border-top: 0; padding-top: 0; }
.build-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.build-cell .tg-readout { font-size: 13px; white-space: nowrap; }
.build-cell--wide { grid-column: 1 / -1; }
.build-meter { position: relative; height: 4px; background: rgba(170, 182, 255, .12); margin-top: 2px; }
.build-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tg-cool); }
.build-cell.is-warm .build-meter i { background: var(--tg-warm); }
.build-cell.is-warm .tg-readout { color: var(--tg-warm); }

/* hangar: list of ships you own */
.build-ships { display: flex; flex-direction: column; gap: 5px; min-height: 0; flex: 0 1 auto; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--tg-line) transparent; }
.build-ship {
  --tg-cut: 6px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 6px 10px;
  border: 0; background: var(--tg-well); color: var(--tg-text-2); text-align: left; cursor: pointer; pointer-events: auto;
  font: 600 12px/1.2 var(--tg-display); letter-spacing: .05em; text-transform: uppercase;
}
.build-ship:hover { color: var(--tg-text); background: rgba(127, 227, 255, .08); }
.build-ship.is-on { color: var(--tg-text); background: var(--tg-cool-soft); box-shadow: inset 2px 0 0 var(--tg-cool); }
.build-ship-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build-ship-n { flex: none; font-size: 10px; color: var(--tg-text-3); text-transform: none; letter-spacing: 0; }
.build-hrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: none; }
.build-hrow .build-hbtn--del { grid-column: 1 / -1; min-width: 0; }
.build-hrow .build-hbtn--del .build-btn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build-hbtn { height: 32px; padding: 0 10px; gap: 6px; font-size: 10px; }
.build-hbtn .build-ico svg { width: 14px; height: 14px; }
.build-hbtn.is-armed { background: var(--tg-warm); color: #fff; }
.build-hbtn.is-armed::before { background: rgba(255, 255, 255, .5); }

/* launch bar */
.build-actions { bottom: 16px; left: 0; right: 0; margin: 0 auto; width: min(620px, calc(100% - 32px)); flex-direction: row; align-items: stretch; gap: 6px; padding: 8px 10px 8px 6px; }
.build-actions > .build-body { flex-direction: row; align-items: center; gap: 10px; padding: 0 6px 0 4px; }
.build-reason { flex: 1; min-width: 0; margin: 0; font: 600 11px/1.3 var(--tg-display); letter-spacing: .08em; text-transform: uppercase; color: var(--tg-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build-reason.is-bad, .build-reason.is-warn { color: var(--tg-warm); }
.build-reason.is-warn { white-space: normal; font-size: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* between the side panels a 1280-wide screen has no room for the key chips (button titles carry the keys) */
@media (max-width: 1439px) and (pointer: fine) { .build-keys { display: none; } }

/* tabbed side panels: grip + tab strip in the head, each tab's body scrolls on its own */
.build.tabs > .build-body { padding: 0; gap: 0; overflow: hidden; }
.build .build-grip--tabs { flex: none; min-width: 0; padding-right: 2px; }
.build .tabs__bar { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: center; }
.build .tabs__tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; color: var(--tg-text-3); white-space: nowrap;
  font: 600 11px/1 var(--tg-display); letter-spacing: var(--tg-track); text-transform: uppercase;
}
.build .tabs__tab:hover { color: var(--tg-text); }
.build .tabs__tab.is-on { color: var(--tg-text); }
.build .tabs__tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--tg-cool); }
.build .tabs__tab:focus-visible { outline: 1px solid var(--tg-cool); outline-offset: 2px; }
.build .tabs__count { font: 400 10px/1 var(--tg-mono); letter-spacing: 0; color: var(--tg-text-3); }
.build .tabs__body {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--tg-line) transparent;
}
.build .tabs__body[hidden] { display: none; }
.build-side[data-tab="skins"] { width: 340px; }
.build-info.is-collapsed { bottom: auto; height: auto; }
.build .build-hangar-body .build-ships { max-height: none; }

/* the reason a part will not go, next to the pointer */
.build-ghosttag {
  position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; padding: 5px 9px; white-space: nowrap;
  font: 600 10px/1 var(--tg-display); letter-spacing: .1em; text-transform: uppercase;
  background: rgba(8, 12, 24, .85); color: var(--tg-cool); box-shadow: inset 2px 0 0 var(--tg-cool);
}
.build-ghosttag.is-bad { color: var(--tg-warm); box-shadow: inset 2px 0 0 var(--tg-warm); }
.build-name { position: relative; }
.build-name-len { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 400 10px/1 var(--tg-mono); color: var(--tg-text-3); pointer-events: none; }
.build-name-len.is-full { color: var(--tg-warm); }
.build-name input { padding-right: 44px; }
.build-leave { height: 44px; padding: 0 18px; }
.build-launch { height: 44px; padding: 0 24px; min-width: 150px; }
.build-launch .build-ico svg { width: 18px; height: 18px; }
.build-place .build-ico svg { width: 18px; height: 18px; }

/* disabled buttons still block the 3D view underneath, so they only look dim */
.tg-btn:disabled, .tg-btn:disabled:hover { opacity: .38; cursor: not-allowed; background: var(--tg-glass-hi); color: var(--tg-text-2); }
.tg-btn:disabled::before { background: var(--tg-frame); }
.build-launch:disabled, .build-launch:disabled:hover { background: var(--tg-glass-hi); color: var(--tg-text-2); }
.build-launch:disabled::before { background: var(--tg-frame); }
.build-tool[aria-pressed="true"]:disabled, .build-tool[aria-pressed="true"]:disabled:hover { background: var(--tg-cool); color: var(--tg-ink); opacity: .6; }

/* chamfer rings for the new small buttons */
.build-tool::before, .build-leave::before, .build-launch::before, .build-hbtn::before, .build-paintall::before, .build-place::before { background: var(--tg-frame); }

/* ---- phone, portrait: bottom sheet for the picker and palette ---- */
@media (max-aspect-ratio: 1/1) and (pointer: coarse) {
  .build-tools { top: 74px; left: 6px; right: 6px; width: auto; max-width: none; margin: 0; padding: 4px 6px 6px 2px; }
  .build-tools > .build-body { gap: 6px; padding: 0 2px 0; }
  .build-tool { height: 44px; width: 44px; padding: 0; }
  .build-tool .build-btn-text { display: none; }
  .build-tool--rot { width: 44px; }
  .build-tool--rot .build-btn-text { display: inline; font-size: 11px; }
  .build-sep { display: none; }
  .build-keys { display: none; }
  .build-place { height: 44px; padding: 0 14px; font-size: 10px; }
  .build-paintchip { height: 44px; width: 44px; }
  .build-stats { top: 192px; width: 196px; right: 6px; left: auto; bottom: auto; max-height: calc(100dvh - 192px - 110px); }
  .build .tabs__body { padding: 8px 10px 10px; }
  .build-cells { grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .build-cell .tg-readout { font-size: 12px; }
  .tg-building .tg-chat { top: auto; bottom: 150px; left: 6px; width: min(260px, 66vw); }
  .tg-building .tg-chat-log { max-height: 84px; }
  .build-picker, .build-side[data-tab="skins"] {
    left: 6px; right: 6px; top: auto; bottom: 104px; width: auto; height: 50dvh; max-height: none;
  }
  .build-picker.is-collapsed { height: auto; }
  .build-picker .build-grid { flex: none; max-height: none; overflow: visible; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .build-thumb { height: 52px; }
  .build-tile-name { font-size: 10px; }
  .build-tile-n { display: none; }
  .build-detail { gap: 8px; }
  .build-bigthumb { width: 88px; height: 88px; }
  .build-steps { grid-template-columns: 1fr 1fr; }
  .build-step-btn { width: 40px; height: 40px; }
  .build-swatches { grid-template-columns: repeat(8, 30px); gap: 4px; }
  .build-swatch { width: 30px; height: 30px; }
  .build-actions { left: 6px; right: 6px; bottom: 6px; width: auto; flex-wrap: wrap; }
  .build-actions > .build-body { flex-wrap: wrap; width: 100%; }
  .build-reason { flex-basis: 100%; order: -1; font-size: 10px; line-height: 14px; }
  .build-leave, .build-launch { height: 48px; flex: 1 1 0; min-width: 0; }
}

/* ---- phone, landscape (short): left column and right column, chat hidden to make room ---- */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) and (pointer: coarse) {
  .build-tools { top: 58px; max-width: calc(100% - 16px); }
  .build-tools > .build-body { padding: 0; gap: 4px 8px; }
  .build-tool { height: 38px; width: 38px; padding: 0; }
  .build-tool .build-btn-text { display: none; }
  .build-tool--rot { width: 36px; }
  .build-tool--rot .build-btn-text { display: inline; font-size: 10px; }
  .build-place { height: 38px; font-size: 10px; }
  .build-paintchip { height: 38px; }
  .build-paintchip .build-btn-text { display: none; }
  .build-keys { display: none; }
  .build-picker { left: 8px; top: 108px; bottom: 60px; width: 290px; height: auto; right: auto; }
  .build-side[data-tab="skins"] { width: 360px; }
  .build-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .build-thumb { height: 44px; }
  .build-tile-n { display: none; }
  .build-bigthumb { width: 76px; height: 76px; }
  .build-dtop { gap: 10px; }
  .build-stats { top: 108px; right: 8px; left: auto; bottom: 60px; width: 210px; max-height: none; }
  .build .tabs__body { padding: 8px 10px 10px; gap: 8px; }
  .build-cells { gap: 6px 10px; }
  .build-cell .tg-readout { font-size: 12px; }
  .build-swatches { grid-template-columns: repeat(8, 20px); gap: 3px; }
  .build-swatch { width: 20px; height: 20px; }
  .build-actions { bottom: 8px; width: min(440px, calc(100% - 300px)); left: 300px; right: auto; margin: 0; }
  .build-leave, .build-launch { height: 40px; }
  .build-launch { min-width: 120px; }
  .build-reason { font-size: 10px; }
  .tg-building .tg-chat { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .build-collapse svg { transition: none; }
}

/* ================= skins: patterns and decals (build mode) ================= */
/* Desktop: centred over the bottom edge, where the paint palette sits. Phone: the parts sheet's place. */
/* skins live in the left panel's Skins tab: one column, one scroll */
.build-skins-body .build-sk-side { width: auto; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
.build-skins-body .build-sk-rows, .build-skins-body .build-sk-hint, .build-skins-body .build-sk-clear { grid-column: 1 / -1; }
.build-skins-body .build-sk-add { display: contents; }
.build-skins-body .build-sk-main { overflow: visible; flex: none; }
.build-skins-body .build-sk-edit { display: flex; flex-direction: column; gap: 12px; }
.build-skins-body .build-sk-col { display: contents; }
.build-paint-body { align-items: stretch; }
.build-sk-side { width: 204px; flex: none; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--tg-line) transparent; }
.build-sk-main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--tg-line) transparent; }
.build-sk-rows { display: flex; flex-direction: column; gap: 5px; }
.build-sk-row { display: flex; align-items: stretch; gap: 2px; background: var(--tg-well); }
.build-sk-row.is-on { background: var(--tg-cool-soft); box-shadow: inset 2px 0 0 var(--tg-cool); }
.build-sk-select {
  flex: 1; min-width: 0; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  border: 0; background: none; color: var(--tg-text-2); text-align: left; cursor: pointer; pointer-events: auto;
}
.build-sk-select:hover { color: var(--tg-text); }
.build-sk-select img { width: 30px; height: 30px; flex: none; }
.build-sk-row.is-on .build-sk-select { color: var(--tg-text); }
.build-sk-rtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.build-sk-rname { font: 600 11px/1.2 var(--tg-display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.build-sk-rmeta { font: 400 10px/1.2 var(--tg-mono); color: var(--tg-text-3); white-space: nowrap; }
.build-sk-ib { flex: none; width: 28px; height: 40px; padding: 0; background: transparent; color: var(--tg-text-2); }
.build-sk-ib:hover { background: rgba(127, 227, 255, .08); color: var(--tg-cool-hi); }
.build-sk-ib .build-ico svg { width: 14px; height: 14px; }
.build-sk-ib:disabled { opacity: .3; }
.build-sk-ib::before { display: none; }
.build-sk-hint, .build-sk-empty { margin: 0; font: 400 11px/1.4 var(--tg-display); color: var(--tg-text-3); }
.build-sk-add { display: flex; flex-direction: column; gap: 6px; }
.build-sk-add .build-hbtn { width: 100%; justify-content: center; }
.build-sk .build-hbtn, .build-skins .build-hbtn { height: 36px; }
.build-sk-clear { margin-top: auto; }
.build-sk-clear .build-hbtn { width: 100%; }
.build-sk-pickhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; margin-bottom: 6px; }
.build-sk-pickname { font: 600 11px/1.3 var(--tg-display); letter-spacing: .08em; text-transform: uppercase; color: var(--tg-cool); min-width: 0; }
.build-sk-tabs { margin-bottom: 8px; }
.build-sk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 1px; }
.build-sk-grid[hidden] { display: none; }
.build-sk-tile {
  position: relative; aspect-ratio: 1 / 1; min-width: 0; padding: 2px; border: 0; cursor: pointer; pointer-events: auto;
  background: var(--tg-well); box-shadow: inset 0 0 0 1px rgba(170, 182, 255, .08);
}
.build-sk-tile img { display: block; width: 100%; height: 100%; }
.build-sk-tile:hover { box-shadow: inset 0 0 0 1px var(--tg-cool-hi); }
.build-sk-tile:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff; }
.build-sk-tile.is-on { box-shadow: inset 0 0 0 2px var(--tg-cool); background: var(--tg-cool-soft); }
.build-sk-tile:disabled { opacity: .35; cursor: not-allowed; }

.build-sk-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.build-sk-ehead { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.build-sk-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.build-sk-ethumb { flex: none; width: 56px; height: 56px; padding: 2px; background: var(--tg-well); }
.build-sk-etext { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.build-sk-etext .build-fam-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.build-sk-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.build-sk-group[hidden] { display: none; }
.build-sk-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.build-sk-chip {
  --c: 6px; height: 30px; padding: 0 4px; border: 0; background: var(--tg-well); color: var(--tg-text-2);
  font: 600 10px/1 var(--tg-display); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; pointer-events: auto;
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.build-sk-chip:hover { color: var(--tg-cool-hi); background: var(--tg-cool-soft); }
.build-sk-chip[aria-pressed="true"] { background: var(--tg-cool); color: var(--tg-ink); }
.build-sk-toggle {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-height: 44px; padding: 7px 10px;
  border: 0; background: var(--tg-well); color: var(--tg-text); text-align: left; cursor: pointer; pointer-events: auto;
  box-shadow: inset 0 0 0 1px rgba(170, 182, 255, .1);
}
.build-sk-toggle:hover { background: var(--tg-cool-soft); }
.build-sk-toggle-t { font: 600 11px/1 var(--tg-display); letter-spacing: var(--tg-track); text-transform: uppercase; }
.build-sk-toggle-s { font: 400 10px/1.2 var(--tg-display); color: var(--tg-text-3); }
.build-sk-toggle[aria-pressed="true"] { background: var(--tg-cool); color: var(--tg-ink); }
.build-sk-toggle[aria-pressed="true"] .build-sk-toggle-s { color: rgba(4, 16, 26, .72); }
.build-sk-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.build-sk-fieldtop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.build-sk-fieldtop .tg-readout { font-size: 12px; }
.build-range { width: 100%; height: 30px; margin: 0; accent-color: var(--tg-cool); pointer-events: auto; }
.build-sk-snaps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.build-sk-snap {
  height: 28px; padding: 0; border: 0; background: var(--tg-well); color: var(--tg-text-2);
  font: 600 10px/1 var(--tg-mono); cursor: pointer; pointer-events: auto;
}
.build-sk-snap:hover { color: var(--tg-cool-hi); }
.build-sk-snap.is-on { background: var(--tg-cool-soft); color: var(--tg-cool-hi); box-shadow: inset 0 -2px 0 var(--tg-cool); }
.build-sk-pos { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.build-sk-pad { display: grid; grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(3, 36px); grid-template-areas: ". u ." "l c r" ". d ."; gap: 4px; flex: none; }
.build-sk-nudge { width: 36px; height: 36px; padding: 0; border: 0; background: var(--tg-well); color: var(--tg-cool); cursor: pointer; pointer-events: auto; display: flex; align-items: center; justify-content: center; }
.build-sk-nudge:hover { background: var(--tg-cool-soft); }
.build-sk-nudge--c { font: 600 9px/1 var(--tg-display); letter-spacing: .1em; text-transform: uppercase; color: var(--tg-text-2); }
.build-sk-nudge--c .build-ico svg { width: 14px; height: 14px; }
.build-sk-posro { display: grid; grid-template-columns: auto auto; gap: 4px 10px; align-items: baseline; min-width: 0; }
.build-sk-posro .tg-readout { font-size: 12px; }
.build-sk-sw .build-swatches { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.build-sk-sw .build-swatch { width: auto; height: 18px; }
.build-sk-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.build-sk-segb {
  height: 32px; padding: 0 6px; border: 0; background: var(--tg-well); color: var(--tg-text-2);
  font: 600 10px/1.1 var(--tg-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; pointer-events: auto;
}
.build-sk-segb[aria-pressed="true"] { background: var(--tg-cool); color: var(--tg-ink); }
.build-sk-segb:hover { color: var(--tg-cool-hi); }

/* ---- phone, portrait: skins take the parts sheet's place (bottom sheet, one scroll) ---- */
@media (max-aspect-ratio: 1/1) and (pointer: coarse) {
  .build-sk-side { width: auto; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; }
  .build-sk-rows, .build-sk-hint, .build-sk-clear { grid-column: 1 / -1; }
  .build-sk-add { display: contents; }
  .build-sk-main { overflow: visible; }
  .build-sk-select { min-height: 44px; }
  .build-sk-row { gap: 0; }
  .build-sk-edit { display: flex; flex-direction: column; gap: 12px; }
  .build-sk-col { display: contents; }
  .build-sk-ib { width: 40px; height: 44px; }
  .build-sk-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .build-skins .build-hbtn { height: 44px; }
  .build-sk-chip { height: 44px; font-size: 10px; }
  .build-sk-snap { height: 40px; }
  .build-sk-nudge, .build-sk-pad { width: 44px; height: 44px; }
  .build-sk-pad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
  .build-sk-segb { height: 44px; }
  .build-range { height: 44px; }
  .build-sk-toggle { min-height: 48px; }
  .build-sk-sw .build-swatch { height: 40px; }
  .build-sk-sw .build-swatches { gap: 5px; }
}
/* ---- phone, landscape (short): the left column, where the parts picker sits ---- */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) and (pointer: coarse) {
  .build-sk-side { width: 176px; gap: 5px; }
  .build-sk-hint { display: none; }
  .build-sk-edit { display: flex; flex-direction: column; gap: 10px; }
  .build-sk-col { display: contents; }
  .build-sk-select { min-height: 36px; padding: 2px 4px; gap: 6px; }
  .build-sk-select img { width: 24px; height: 24px; }
  .build-sk-ib { width: 24px; height: 36px; }
  .build-skins .build-hbtn { height: 36px; font-size: 9px; }
  .build-sk-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .build-sk-chip { height: 38px; }
  .build-sk-snap { height: 36px; }
  .build-sk-nudge, .build-sk-pad { width: 40px; height: 40px; }
  .build-sk-pad { grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 40px); }
  .build-sk-segb { height: 40px; }
  .build-range { height: 40px; }
  .build-skins .build-hbtn { height: 40px; }
}

/* ================= controls card (flight) ================= */
.tg-top-help { font: 600 17px/1 var(--tg-display); color: var(--tg-text-2); }
.tg-top-help[aria-expanded="true"] { color: var(--tg-cool); }
.tg-hints {
  position: absolute; left: var(--tg-inset-l); top: 96px; width: min(400px, calc(100vw - 32px));
  max-height: calc(100dvh - 150px); overflow-y: auto; padding: 0 0 12px; pointer-events: auto;
  scrollbar-width: thin; scrollbar-color: var(--tg-line) transparent;
}
.tg-hints-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 6px 0 16px; border-bottom: 1px solid var(--tg-line); }
.tg-hints-head .tg-label { color: var(--tg-cool); }
.tg-hints-x { width: 44px; height: 44px; color: var(--tg-text-2); cursor: pointer; }
.tg-hints-x svg { width: 16px; height: 16px; }
.tg-hints-head { min-height: 38px; }
.tg-hints-list { grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 12px 16px 0; }
.tg-hints-list .tg-key { grid-template-columns: 62px 1fr; gap: 8px; }
.tg-hints-list .tg-key-desc { font-size: 11px; line-height: 1.3; }
.tg-hints-note { margin: 12px 16px 0; font: 400 11px/1.4 var(--tg-display); color: var(--tg-text-3); }
.tg-hints-note--gap { margin-top: 6px; }

/* ================= markers (orbital and other targets) ================= */
.tg-markers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tg-mark {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; color: var(--tg-cool);
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .7));
}
.tg-mark.is-warm { color: var(--tg-warm); }
.tg-mark-screen, .tg-mark-edge { position: absolute; display: block; }
.tg-mark-screen { left: 0; top: 0; width: 40px; height: 40px; }
.tg-mark-screen svg { display: block; width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; }
.tg-mark-edge { display: none; left: 6px; top: 6px; width: 28px; height: 28px; }
.tg-mark-edge svg { display: block; width: 28px; height: 28px; fill: currentColor; }
.tg-mark.is-edge .tg-mark-edge { display: block; }
.tg-mark.is-edge .tg-mark-screen { display: none; }
.tg-mark-txt { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; }
.tg-mark.is-edge .tg-mark-txt { left: 32px; top: 6px; transform: none; align-items: flex-start; }
.tg-mark.is-edge.is-left .tg-mark-txt { left: auto; right: 32px; align-items: flex-end; }
.tg-mark-label { font: 600 10px/1 var(--tg-display); letter-spacing: var(--tg-track); text-transform: uppercase; color: currentColor; }
.tg-mark-dist { font-size: 12px; color: var(--tg-text); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }

/* build mode: the flight-only pieces go */
.tg-building .tg-hints, .tg-building .tg-markers, .tg-building [data-hints-btn],
.tg-building .tg-fx, .tg-building .tg-combat, .tg-building .tg-targets, .tg-building .tg-killfeed { display: none !important; }

/* phone portrait: the dock sits top-left, so the card starts below it */
@media (max-aspect-ratio: 1/1) {
  .tg-hints { top: calc(env(safe-area-inset-top, 0px) + 250px); max-height: calc(100dvh - 450px); }
}
/* phone landscape (short): the card takes the top-left corner, clear of the dock */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .tg-hints { top: calc(env(safe-area-inset-top, 0px) + 62px); width: 262px; max-height: calc(100dvh - 90px); }
  .tg-hints-list { padding-top: 10px; gap: 7px; }
  .tg-hints-list .tg-key { grid-template-columns: 56px 1fr; gap: 6px; }
}

/* ================= game juice: hit markers, damage, kill feed, targets, velocity ================= */
/* All of it is pointer-events none. Motion runs on Web Animations (see hud.js); reduced motion drops it. */
.tg-fx, .tg-combat, .tg-targets { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* damage: whole-edge vignette pulse, and one red arc wedge per hit at the screen edge */
.tg-vignette {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse 72% 68% at 50% 50%, transparent 56%, rgba(255, 40, 70, .5) 100%);
}
.tg-dmg {
  position: absolute; inset: 0; opacity: 0; --a: 0deg;
  background: conic-gradient(from calc(var(--a) - 26deg) at 50% 50%, transparent 0deg, rgba(255, 52, 84, 1) 26deg, transparent 52deg);
  -webkit-mask-image: radial-gradient(farthest-side, transparent 70%, #000 94%);
  mask-image: radial-gradient(farthest-side, transparent 70%, #000 94%);
}

/* hit marker: an X at the centre; a kill is warm, larger, with a ring burst */
.tg-hit {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: 0;
  color: var(--tg-text); filter: drop-shadow(0 0 3px rgba(0, 0, 0, .6));
}
.tg-hit svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; }
.tg-hit.is-kill { width: 56px; height: 56px; margin: -28px 0 0 -28px; color: var(--tg-warm); }
.tg-hit-ring {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: 0;
  border: 2px solid var(--tg-warm); border-radius: 50%;
  box-shadow: 0 0 14px rgba(255, 90, 54, .55), inset 0 0 10px rgba(255, 90, 54, .35);
}

/* velocity vector (prograde): circle with a left wing, right wing and top fin */
.tg-vel { position: absolute; left: 0; top: 0; width: 24px; height: 24px; color: var(--tg-good); filter: drop-shadow(0 0 3px rgba(0, 0, 0, .75)); }
.tg-vel svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* targets: corner brackets (size from distance), name and distance under, hp bar, lead pip; edge chevron off screen */
.tg-tgt { position: absolute; left: 0; top: 0; width: 22px; height: 22px; color: var(--tg-cool); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .75)); }
.tg-tgt.is-hostile { color: var(--tg-warm); }
.tg-tgt-brk { position: absolute; inset: 0; }
.tg-tgt-brk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tg-tgt-brk path { fill: none; stroke: currentColor; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.tg-tgt-lead {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 6px currentColor;
}
.tg-tgt-edge { display: none; position: absolute; inset: 0; }
.tg-tgt-edge svg { display: block; width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .7)); }
.tg-tgt.is-edge .tg-tgt-brk, .tg-tgt.is-edge .tg-tgt-lead { display: none; }
.tg-tgt.is-edge .tg-tgt-edge { display: block; }
.tg-tgt-txt {
  position: absolute; left: 50%; top: 100%; margin-top: 5px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap;
}
.tg-tgt-name { font: 600 10px/1 var(--tg-display); letter-spacing: var(--tg-track); text-transform: uppercase; color: currentColor; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.tg-tgt-dist { font-size: 11px; color: var(--tg-text); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.tg-tgt-hp { position: relative; width: 30px; height: 3px; background: rgba(170, 182, 255, .16); }
.tg-tgt-hp i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: currentColor; }
.tg-tgt.is-edge .tg-tgt-txt { top: 50%; left: 30px; margin: 0; transform: translateY(-50%); align-items: flex-start; }
.tg-tgt.is-edge.is-left .tg-tgt-txt { left: auto; right: 30px; align-items: flex-end; }
@media (pointer: coarse) {
  .tg-tgt-name { font-size: 11px; }
  .tg-tgt-dist { font-size: 12px; }
  .tg-tgt-hp { width: 36px; }
}

/* kill feed: top right under the bar; lines slide in from the right (Web Animations) and fade after 6 s */
.tg-killfeed {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 74px); right: var(--tg-inset-r); width: min(280px, 60vw);
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; pointer-events: none;
}
.tg-kf {
  max-width: 100%; padding: 5px 10px; background: linear-gradient(270deg, rgba(6, 6, 20, .7), rgba(6, 6, 20, .22) 88%, transparent);
  border-right: 2px solid var(--tg-cool); color: var(--tg-text); text-align: right;
  font: 600 var(--tg-fs-xs)/1.35 var(--tg-display); letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.tg-kf.is-kill { border-right-color: var(--tg-warm); }
.tg-kf.is-death { border-right-color: var(--tg-bad); color: var(--tg-text-2); }
.tg-kf.is-info { border-right-color: var(--tg-line); color: var(--tg-text-2); font-weight: 400; letter-spacing: .04em; text-transform: none; font-size: var(--tg-fs-sm); }
@media (pointer: coarse) { .tg-kf { font-size: 12px; } }
@media (max-aspect-ratio: 1/1) { .tg-killfeed { top: calc(env(safe-area-inset-top, 0px) + 262px); } }
@media (max-height: 500px) and (min-aspect-ratio: 1/1) { .tg-killfeed { top: calc(env(safe-area-inset-top, 0px) + 66px); width: 240px; } }

/* panel entrance: settings, controls card, net and build panels slide and fade in (translate, so drag transforms are kept) */
@keyframes tg-enter {
  from { opacity: 0; translate: var(--tg-enter-x, 0px) var(--tg-enter-y, -6px); }
  to { opacity: 1; translate: 0 0; }
}
.tg-settings:not([hidden]), .tg-hints:not([hidden]), .tg-net:not([hidden]), .build-panel {
  animation: tg-enter var(--tg-dur) var(--tg-ease) both;
}
.tg-hints:not([hidden]) { --tg-enter-x: -12px; --tg-enter-y: 0px; }
.tg-net:not([hidden]) { --tg-enter-x: 12px; --tg-enter-y: 0px; }
.build-panel { --tg-enter-y: 8px; }

/* graphics tier picker in Settings */
.tg-quality-row { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0 10px; }
.tg-quality-row .tg-chip { cursor: pointer; pointer-events: auto; padding: 4px 8px; }

/* ================= cargo, credits, sell offer, supercruise ================= */
/* Wallet: a compact glass panel above the dock. Default spot is set per layout below; drag moves it like the others. */
.tg-wallet {
  position: absolute; right: var(--tg-inset-r); bottom: calc(var(--tg-inset-b) + 148px); width: 216px;
  display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 9px; pointer-events: none;
}
.tg-wallet-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.tg-wallet-crv { display: inline-flex; align-items: baseline; gap: 6px; }
.tg-wallet-crv > .tg-readout { font-size: var(--tg-fs-md); line-height: 1; transition: color 600ms var(--tg-ease), text-shadow 600ms var(--tg-ease); }
.tg-wallet-crv.is-up > .tg-readout { color: var(--tg-warm); text-shadow: 0 0 10px rgba(255, 90, 54, .55); transition: none; }
.tg-wallet-hv { font-size: 12px; color: var(--tg-text); white-space: nowrap; }
.tg-wallet.is-full .tg-wallet-hv {
  font: 600 var(--tg-fs-xs)/1 var(--tg-display); letter-spacing: var(--tg-track); text-transform: uppercase; color: var(--tg-warm);
}
.tg-hold { position: relative; width: 100%; height: 4px; background: rgba(170, 182, 255, .1); }
.tg-hold-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; display: flex; transition: width var(--tg-dur-slow) var(--tg-ease); }
.tg-hold-fill > i { flex: 1 1 0; min-width: 0; height: 100%; box-shadow: inset -1px 0 0 rgba(4, 6, 20, .55); }
.tg-wallet.is-full .tg-hold { animation: tg-hold-pulse 1.2s ease-in-out infinite; }
@keyframes tg-hold-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 54, 0); }
  50% { box-shadow: 0 0 12px 2px rgba(255, 90, 54, .7); }
}
.tg-wallet:not(.is-open) .tg-wallet-ores { display: none; }
.tg-wallet-ores { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 400 10px/1.2 var(--tg-display); color: var(--tg-text-2); }
.tg-wallet-ore { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.tg-wallet-ore > i { width: 7px; height: 7px; flex: none; }
.tg-wallet-ore > b { font: 400 10px/1 var(--tg-mono); color: var(--tg-text); }

/* Sell offer: prominent, bottom centre. Centred with left/right auto margins, not a transform (the button's press nudge uses translate). */
.tg-sell {
  position: absolute; left: 0; right: 0; bottom: var(--tg-inset-b); margin: 0 auto; width: fit-content;
  height: 48px; padding: 0 26px; font-size: var(--tg-fs-sm); letter-spacing: .14em;
  box-shadow: 0 0 22px rgba(127, 227, 255, .22);
}
.tg-sell::before { background: rgba(4, 16, 26, .35); }

/* Supercruise: centred under the reticle. */
.tg-cruise {
  position: absolute; left: 0; right: 0; top: calc(50% + 48px); margin: 0 auto; width: 232px;
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 11px 14px 12px; pointer-events: none; text-align: center;
}
.tg-cruise-head { font: 600 11px/1 var(--tg-display); letter-spacing: .2em; text-transform: uppercase; color: var(--tg-cool); white-space: nowrap; }
.tg-cruise-chevs {
  width: 168px; height: 14px;
  background: linear-gradient(90deg, var(--tg-cool) var(--p, 0%), rgba(127, 227, 255, .16) var(--p, 0%));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M6 2l6 5-6 5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") 0 0 / 22px 14px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M6 2l6 5-6 5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") 0 0 / 22px 14px repeat-x;
}
.tg-cruise-speed { display: flex; align-items: baseline; gap: 6px; }
.tg-cruise-speed > .tg-readout { font-size: 22px; line-height: 1; color: var(--tg-text); }
.tg-cruise-track { position: relative; width: 168px; height: 3px; background: rgba(127, 227, 255, .16); }
.tg-cruise-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--tg-cool); box-shadow: 0 0 8px rgba(127, 227, 255, .6); }
.tg-cruise-sub {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 10px/1.2 var(--tg-mono); letter-spacing: .04em; color: var(--tg-text-2);
}
.tg-cruise[data-s="cruise"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 36%, rgba(196, 243, 255, .16) 50%, transparent 64%);
  background-size: 260% 100%; background-position: 100% 0;
  animation: tg-cruise-shimmer 3.4s linear infinite;
}
@keyframes tg-cruise-shimmer { from { background-position: 100% 0; } to { background-position: -60% 0; } }
.tg-cruise[data-s="locked"]::before { background: var(--tg-bad); }
.tg-cruise[data-s="locked"] .tg-cruise-head { color: var(--tg-bad); animation: tg-cruise-blink 250ms steps(2, end) 3; }
.tg-cruise[data-s="drop"]::before { background: rgba(255, 90, 54, .75); }
.tg-cruise[data-s="drop"] .tg-cruise-head { color: var(--tg-warm); }
@keyframes tg-cruise-blink { 50% { opacity: .15; } }

/* Touch: CRUISE sits left of FIRE, on the same row, so the stick and the six-button pad are untouched. */
.tg-btn--touch.tg-cruise-btn {
  --tg-cut: 9px; position: absolute; right: calc(var(--tg-inset-r) + 84px); bottom: calc(var(--tg-inset-b) + 142px);
  width: 64px; height: 56px; color: var(--tg-cool);
}

/* Build mode: flight-only pieces go. */
.tg-building .tg-wallet, .tg-building .tg-cruise, .tg-building .tg-sell { display: none !important; }

/* Touch, wide: the dock is bottom-centre and the supercruise panel sits mid-screen, so the wallet goes top-left
   and the sell offer and toasts go under the top bar. */
@media (min-aspect-ratio: 1/1) and (min-height: 501px) {
  .tg-touch .tg-wallet { right: auto; left: var(--tg-inset-l); top: calc(env(safe-area-inset-top, 0px) + 74px); bottom: auto; }
  .tg-touch .tg-sell { top: calc(env(safe-area-inset-top, 0px) + 74px); bottom: auto; }
  .tg-touch .tg-toasts { top: calc(env(safe-area-inset-top, 0px) + 130px); }
}

/* Phone portrait: the dock is top-left and the pad is bottom-right, so the wallet sits under the dock. */
@media (max-aspect-ratio: 1/1) {
  .tg-wallet { left: auto; right: var(--tg-inset-r); top: calc(env(safe-area-inset-top, 0px) + 74px); bottom: auto; width: min(160px, calc(100vw - 240px)); padding: 8px 10px; }
  .tg-wallet-row { flex-direction: column; align-items: flex-end; gap: 2px; }
  .tg-sell {
    left: auto; right: var(--tg-inset-r); top: calc(env(safe-area-inset-top, 0px) + 150px); bottom: auto; margin: 0;
    width: min(160px, calc(100vw - 240px)); height: auto; min-height: 56px; padding: 10px 16px; white-space: normal; line-height: 1.35; text-align: center;
  }
  .tg-cruise { top: calc(50% + 34px); }
}

/* Phone landscape (short): dock sits left-bottom, so the wallet and sell offer take the top right and top centre. */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  /* wallet: under the top bar on the right, above CRUISE and FIRE */
  .tg-wallet { right: var(--tg-inset-r); top: calc(env(safe-area-inset-top, 0px) + 62px); bottom: auto; width: 200px; }
  /* sell: top left, under the bar; cruise: above the reticle, clear of the dock */
  .tg-sell { left: var(--tg-inset-l); right: auto; margin: 0; top: calc(env(safe-area-inset-top, 0px) + 66px); bottom: auto; height: 42px; }
  .tg-cruise { top: auto; bottom: calc(50% + 40px); width: 196px; }
}

/* ================= tabs (js/ui-tabs.js; same class names as the build panels' tabs, which style them under .build) ================= */
.tabs--panel { display: flex; flex-direction: column; min-height: 0; font-family: var(--tg-display); }
.tabs--panel > .tabs__bar {
  display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--tg-line); flex: none;
  overflow-x: auto; scrollbar-width: none;
}
.tabs--panel > .tabs__bar::-webkit-scrollbar { display: none; }
.tabs--panel .tabs__tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none;
  min-height: 40px; padding: 0 10px; border: 0; background: none; cursor: pointer; pointer-events: auto;
  font: 600 var(--tg-fs-label)/1 var(--tg-display); letter-spacing: var(--tg-track); text-transform: uppercase;
  color: var(--tg-text-3); transition: color var(--tg-dur-fast) var(--tg-ease);
}
.tabs--panel .tabs__tab:hover { color: var(--tg-text-2); }
.tabs--panel .tabs__tab.is-on { color: var(--tg-cool); }
.tabs--panel .tabs__tab::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: var(--tg-cool); box-shadow: 0 0 8px rgba(127, 227, 255, .6);
  transform: scaleX(0); transition: transform var(--tg-dur) var(--tg-ease);
}
.tabs--panel .tabs__tab.is-on::after { transform: scaleX(1); }
.tabs--panel .tabs__tab:focus-visible { outline: 1px solid var(--tg-cool); outline-offset: -4px; }
.tabs--panel .tabs__num { font: 400 9px/1 var(--tg-mono); color: var(--tg-text-3); opacity: .8; }
.tabs--panel > .tabs__panels { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--tg-line) transparent; }
.tabs--panel .tabs__body { padding: 14px 16px 16px; animation: tabs-in var(--tg-dur) var(--tg-ease); }
.tabs--panel .tabs__body[hidden] { display: none; }
@keyframes tabs-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@media (pointer: coarse) { .tabs--panel .tabs__tab { min-height: 44px; padding: 0 14px; } .tabs--panel .tabs__num { display: none; } }

/* ================= flight menu (Tab / Esc; js/hud.js, tabs from js/ui-tabs.js) ================= */
.tg-menu {
  position: absolute; left: var(--tg-inset-l); top: 84px; z-index: 4; width: min(512px, calc(100vw - 32px));
  max-height: calc(100dvh - 110px); display: flex; flex-direction: column; pointer-events: auto;
  background: var(--tg-glass-hi);
}
.tg-menu[hidden] { display: none; }
.tg-menu-head { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 4px 0 16px; flex: none; }
.tg-menu-head > .tg-label { color: var(--tg-text-2); letter-spacing: .26em; }
.tg-menu-keyhint { flex: 1; text-align: right; font: 400 10px/1 var(--tg-mono); color: var(--tg-text-3); white-space: pre; }
.tg-menu .tabs { min-height: 0; flex: 1; }
.tg-menu-h { margin: 16px 0 8px; color: var(--tg-cool); }
.tg-menu-h:first-child { margin-top: 0; }
.tg-rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; align-items: baseline; }
.tg-rows dt { margin: 0; }
.tg-rows dd { margin: 0; text-align: right; font-size: 13px; overflow-wrap: anywhere; }
.tg-rows [hidden] { display: none; }
.tg-rows dd.is-bad { color: var(--tg-warm); }
.tg-rows dd.is-mid { color: var(--tg-mid); }
.tg-ore-table { display: grid; gap: 6px; margin-bottom: 14px; }
.tg-ore-row { display: grid; grid-template-columns: 8px 1fr auto auto auto; gap: 10px; align-items: center; font: 400 12px/1.2 var(--tg-display); color: var(--tg-text-2); }
.tg-ore-row > i { width: 8px; height: 8px; }
.tg-ore-row .tg-readout { font-size: 12px; text-align: right; }
.tg-dim { color: var(--tg-text-3) !important; }
.tg-chat-hist { display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow-y: auto; margin-bottom: 12px; }
.tg-chat-hist:empty::before { content: "No messages yet."; font: 400 12px/1.4 var(--tg-display); color: var(--tg-text-3); }
.tg-menu-keys { grid-template-columns: 1fr 1fr; gap: 7px 14px; }
.tg-menu-keys .tg-key { grid-template-columns: 74px 1fr; gap: 8px; }
.tg-menu-keys .tg-key-desc { font-size: 11px; line-height: 1.3; }
.tg-set { display: grid; gap: 16px; }
.tg-set-group { display: grid; gap: 8px; }
.tg-set-group > .tg-label { color: var(--tg-cool); }
.tg-set-name { width: 54px; font: 400 12px/1 var(--tg-display); color: var(--tg-text-2); }
.tg-set-hud { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-set-hud .tg-btn { height: 36px; padding: 0 12px; font-size: 10px; }
.tg-set .tg-credits { border-top: 1px solid var(--tg-line); padding-top: 10px; }
.tg-building .tg-menu { display: none !important; }
@media (max-aspect-ratio: 1/1) {
  .tg-menu { top: calc(env(safe-area-inset-top, 0px) + 72px); left: var(--tg-inset-l); right: var(--tg-inset-r); width: auto; max-height: calc(100dvh - 300px); }
  .tg-menu-keys { grid-template-columns: 1fr; }
}
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .tg-menu { top: calc(env(safe-area-inset-top, 0px) + 62px); max-height: calc(100dvh - 72px); width: min(420px, 56vw); }
}