:root {
  --bg: #05060a;
  --panel: rgba(9, 13, 24, 0.74);
  --panel-solid: #0b1020;
  --line: rgba(140, 170, 230, 0.18);
  --line-strong: rgba(140, 190, 255, 0.38);
  --text: #d9e4ff;
  --dim: #8090b4;
  --faint: #56627f;
  --cyan: #5ee7ff;
  --amber: #ffc85e;
  --green: #7dffb2;
  --red: #ff5a6a;
  --violet: #c79bff;
  --ui: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: var(--ui); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
canvas#view { position: fixed; inset: 0; display: block; touch-action: none; }
.hidden { display: none !important; }
b, .num { font-family: var(--mono); font-weight: 600; }
.k { font-size: 10.5px; letter-spacing: 0.12em; color: var(--dim); font-weight: 600; }
.sub { font-size: 11.5px; color: var(--dim); }
em { font-style: normal; }
em.bad, .bad { color: var(--red); }
em.warn, .warn { color: var(--amber); }
i { font-style: normal; color: var(--dim); font-weight: 400; }

/* --- painikkeet --- */
.btn {
  font: 600 12px var(--ui); letter-spacing: 0.04em; color: var(--text);
  background: rgba(120, 160, 255, 0.07); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; transition: border-color .15s, background .15s, transform .08s;
  touch-action: manipulation;
}
.btn:hover { border-color: var(--line-strong); background: rgba(120, 170, 255, 0.13); }
.btn:active { transform: scale(0.97); }
.btn.on { background: rgba(94, 231, 255, 0.18); border-color: var(--cyan); color: #fff; }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn.primary { background: linear-gradient(180deg, #7cf0ff, #3cc8e8); color: #031018; border-color: transparent; }
.btn.primary:hover { background: linear-gradient(180deg, #a2f5ff, #52d6f2); }
.btn.ghost { background: transparent; }
.btn.big { font-size: 15px; padding: 13px 18px; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.btn.big .sub { font-weight: 500; }
.btn.primary .sub { color: rgba(3, 16, 24, 0.7); }
.btn.sq { width: 30px; height: 30px; padding: 0; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.btn.chip { padding: 4px 9px; font-size: 10.5px; letter-spacing: 0.1em; border-radius: 999px; }
.btn.mini { padding: 3px 8px; font-size: 11px; }
.btn.x { margin-left: auto; padding: 0 7px; font-size: 15px; line-height: 20px; background: transparent; border: none; color: var(--dim); }

/* --- HUD --- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > *, #hud-right > * { pointer-events: auto; }
#hud-right { pointer-events: none !important; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
#hud-tl { position: fixed; top: calc(12px + var(--safe-t)); left: 12px; width: 272px; }
.day-row { display: flex; align-items: baseline; gap: 10px; }
.day-row b { font-size: 30px; letter-spacing: -0.02em; color: #fff; text-shadow: 0 0 18px rgba(94, 231, 255, 0.35); }
.day-row .btn { margin-left: auto; align-self: center; }
.sub-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); margin-top: 2px; font-family: var(--mono); }
.warp-row { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.warp-val { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.warp-val b { font-size: 16px; color: var(--cyan); }
.warp-val span { font-size: 10px; color: var(--dim); white-space: nowrap; }
.warpto-row { display: flex; align-items: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.warpto-row .k { margin-right: 4px; }

#hud-tc { position: fixed; top: calc(12px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none !important; width: min(560px, 40vw); }
#hud-tc > * { pointer-events: auto; }
.cam-row { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.cam-row .btn { border-color: transparent; background: transparent; }
.cam-row .btn.on { background: rgba(94, 231, 255, 0.18); border-color: var(--cyan); }
.m-res, .cam-m { display: none; }
#h-alerts { display: flex; flex-direction: column; gap: 5px; align-items: center; pointer-events: none !important; }
#h-alerts:empty { display: none; }
.al { font: 600 12px var(--mono); padding: 6px 12px; border-radius: 8px; border: 1px solid; letter-spacing: 0.02em; text-align: center; backdrop-filter: blur(6px); }
.al.warn { color: #ffd98a; border-color: rgba(255, 200, 94, 0.5); background: rgba(60, 40, 5, 0.6); }
.al.bad { color: #ffd0d4; border-color: rgba(255, 90, 106, 0.7); background: rgba(70, 8, 16, 0.7); animation: pulse 1.1s ease-in-out infinite; }
.al.plan { color: #d8fbff; border-color: rgba(94, 231, 255, 0.55); background: rgba(6, 40, 52, 0.75); }
.al.plan.go { color: #031018; background: linear-gradient(180deg, #8ff3ff, #4fd4ef); border-color: transparent; font-size: 13px; animation: glow 0.9s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 22px rgba(94, 231, 255, 0.6); } }
@keyframes pulse { 50% { border-color: rgba(255, 90, 106, 0.25); } }

#hud-right { position: fixed; top: calc(12px + var(--safe-t)); right: 12px; width: 304px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.ptitle { font-size: 11.5px; letter-spacing: 0.12em; font-weight: 700; color: var(--cyan); margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.ptitle b { color: var(--amber); font-family: var(--ui); letter-spacing: 0.02em; font-size: 13px; }
.grid { display: grid; grid-template-columns: 64px 1fr; gap: 3px 8px; align-items: baseline; }
.grid b { font-size: 12.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid b i { font-size: 11px; margin-left: 4px; }
.pull { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
.pl { display: grid; grid-template-columns: 58px 1fr 86px; align-items: center; gap: 6px; font-size: 11px; color: var(--dim); margin-top: 3px; }
.pl u { display: block; height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(94, 231, 255, 0.35), var(--cyan)); text-decoration: none; }
.pl b { font-size: 10.5px; text-align: right; color: var(--text); font-weight: 400; }
#hud-tgt { border-color: rgba(255, 200, 94, 0.32); }
#hud-tgt .ptitle .k { color: var(--amber); }
#hud-tgt .content { margin: 4px 0 6px; font: 600 12px var(--mono); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.c-sup { color: var(--green); } .c-fuel { color: var(--amber); } .c-rep { color: #9fd8ff; }
#hud-tgt .grab { margin-top: 6px; }
#hud-tgt .grab b { color: var(--text); }
#hud-tgt .grab b.ok { color: var(--green); }
.plan { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 8px; border-radius: 9px; background: rgba(94, 231, 255, 0.07); border: 1px solid rgba(94, 231, 255, 0.28); }
.plan-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-t b { font-size: 11.5px; color: #e9fbff; white-space: normal; }
.plan .btn { white-space: nowrap; }
.plan-note:empty { display: none; }
.plan-note { margin-top: 6px; }
.tgt-row { display: flex; gap: 5px; margin-top: 8px; }
.tgt-row .wide { flex: 1; }
#b-notgt { align-self: flex-end; pointer-events: auto; }
#hud-tgt:not(.hidden) + #b-notgt { display: none; }

#hud-bl { position: fixed; bottom: calc(12px + var(--safe-b)); left: 12px; width: 292px; }
.dv-row { display: flex; align-items: baseline; gap: 10px; }
.dv-row b { font-size: 22px; color: #fff; }
.row { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; }
.row b { font-size: 13px; }
.row .sub { margin-left: auto; font-size: 10.5px; }
.row.small { margin-top: 4px; font-size: 11px; color: var(--dim); font-family: var(--mono); }
.bar { position: relative; height: 5px; background: rgba(140, 170, 230, 0.12); border-radius: 3px; margin-top: 4px; overflow: visible; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #3cc8e8, var(--cyan)); transition: width .25s; }
.bar.sup i { background: linear-gradient(90deg, #36c486, var(--green)); }
.bar.hull i { background: linear-gradient(90deg, #8aa8ff, #c8d6ff); }
.bar i.low { background: linear-gradient(90deg, #d33a4a, var(--red)) !important; }
.bar i.warn { background: linear-gradient(90deg, #e09a2a, var(--amber)) !important; }
.bar.temp i { background: linear-gradient(90deg, #4f7dff, #ffb15e); }
.bar s { position: absolute; top: -3px; width: 2px; height: 11px; background: var(--red); border-radius: 1px; }
#hud-bl > .sub { margin-top: 3px; font-family: var(--mono); font-size: 10.5px; }

#hud-bc { position: fixed; bottom: calc(12px + var(--safe-b)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(600px, calc(100vw - 680px)); pointer-events: none !important; }
#hud-bc > * { pointer-events: auto; }
.hint { font-size: 12.5px; line-height: 1.45; color: #c4d2f2; text-align: center; background: rgba(9, 13, 24, 0.6); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; max-width: 100%; }
.hint:empty { display: none; }
.hint b { color: var(--cyan); font-family: var(--ui); }
.sas { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; backdrop-filter: blur(8px); }
.sas-b { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 62px; padding: 5px 6px; border-color: transparent; background: transparent; }
.sas-b b { font-family: var(--ui); font-size: 11.5px; letter-spacing: 0.06em; }
.sas-b i { font-size: 9.5px; font-family: var(--mono); }
.sas-b.on { background: rgba(94, 231, 255, 0.18); border-color: var(--cyan); }

#hud-br { position: fixed; bottom: calc(12px + var(--safe-b)); right: 12px; width: 330px; max-height: 168px; overflow: hidden; padding: 8px 10px; }
.lg { font-size: 11.5px; line-height: 1.38; color: #b6c4e6; padding: 2px 0; }
.lg span { font-family: var(--mono); color: var(--faint); margin-right: 7px; font-size: 10.5px; }
.lg.good { color: #b8ffd6; } .lg.warn { color: #ffe0a6; } .lg.danger { color: #ffb3ba; } .lg.beacon { color: #c9f4ff; }
.lg:first-child { color: #fff; }
.lg.good:first-child { color: var(--green); } .lg.danger:first-child { color: #ff8f99; } .lg.warn:first-child { color: var(--amber); }

#touch { display: none; }
body.touch #touch { display: flex; position: fixed; left: 0; right: 0; bottom: calc(10px + var(--safe-b)); justify-content: space-between; padding: 0 12px; pointer-events: none; }
#touch > div { display: flex; gap: 10px; align-items: flex-end; pointer-events: auto; }
.tbtn {
  width: 66px; height: 66px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(14, 22, 42, 0.72);
  color: var(--text); font: 600 24px var(--ui); display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); touch-action: none;
}
.tbtn.down { background: rgba(94, 231, 255, 0.28); border-color: var(--cyan); }
.tbtn.thrust { width: 88px; height: 88px; font-size: 15px; letter-spacing: 0.12em; border-color: rgba(255, 170, 90, 0.6); background: rgba(60, 28, 10, 0.7); }
.tbtn.thrust.down { background: rgba(255, 150, 60, 0.55); border-color: #ffb26a; box-shadow: 0 0 30px rgba(255, 140, 50, 0.45); }
.tbtn.fine { width: 54px; height: 54px; font-size: 11px; letter-spacing: 0.08em; }

/* --- näytöt --- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; touch-action: pan-y; user-select: text; }
#scr-title { background: radial-gradient(ellipse at center, rgba(5, 6, 10, 0.1) 0%, rgba(5, 6, 10, 0.55) 70%); }
#scr-pause, #scr-over, #scr-help { background: rgba(3, 4, 9, 0.62); backdrop-filter: blur(3px); }
#scr-hangar { background: rgba(3, 4, 9, 0.8); align-items: flex-start; }
.title-wrap { text-align: center; max-width: 760px; width: 100%; }
.logo {
  font: 700 clamp(30px, 7.6vw, 74px) var(--ui); letter-spacing: 0.2em; margin: 0 0 6px; padding-left: 0.2em; white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 20%, #9feeff 60%, #3cc8e8); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px rgba(94, 231, 255, 0.35));
}
.tagline { font-size: 18px; margin: 0 0 6px; color: #e7eeff; }
.features { font-size: 12.5px; color: var(--dim); margin: 0 0 26px; letter-spacing: 0.02em; }
.menu { display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 420px; margin: 0 auto; }
.menu-row { display: flex; gap: 8px; }
.menu-row .btn { flex: 1; padding: 10px; }
.best { margin-top: 18px; font-family: var(--mono); font-size: 13px; color: var(--amber); }
.best.new { color: var(--green); font-weight: 700; letter-spacing: 0.08em; }
.foot { position: fixed; bottom: calc(10px + var(--safe-b)); left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 16px; font-size: 11px; color: var(--faint); pointer-events: none; }

.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; width: min(460px, 100%); text-align: center; backdrop-filter: blur(10px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.modal h2 { margin: 0 0 4px; letter-spacing: 0.2em; font-size: 18px; }
.modal .menu { margin-top: 16px; }
.over { width: min(560px, 100%); }
.cause { font-size: 16px; color: #ffc2c8; margin: 0 0 8px; line-height: 1.4; }
.score { display: flex; flex-direction: column; align-items: center; }
.score b { font-size: 64px; color: #fff; line-height: 1; text-shadow: 0 0 30px rgba(94, 231, 255, 0.4); }
.score span { font-size: 12px; letter-spacing: 0.2em; color: var(--dim); text-transform: uppercase; margin-top: 4px; }
.o-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; text-align: left; margin: 16px 0 8px; font-size: 12.5px; }
.o-stats div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(140, 170, 230, 0.08); padding: 3px 0; }
.o-stats span { color: var(--dim); }
.o-stats b { font-size: 12px; text-align: right; }

/* hangaari */
.hangar { width: min(1120px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; backdrop-filter: blur(10px); margin: auto 0; }
.hg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hg-head h2 { margin: 0; letter-spacing: 0.2em; font-size: 18px; }
.hg-actions { display: flex; gap: 8px; }
.hg-actions .btn { padding: 9px 16px; font-size: 13px; }
.presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.preset, .seg, .tog {
  font: inherit; color: var(--text); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  background: rgba(120, 160, 255, 0.06); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; transition: border-color .15s, background .15s;
}
.preset:hover, .seg:hover, .tog:hover { border-color: var(--line-strong); }
.preset.on, .seg.on, .tog.on { border-color: var(--cyan); background: rgba(94, 231, 255, 0.12); }
.preset b, .seg b, .tog b { font-family: var(--ui); font-size: 13.5px; }
.preset span, .seg span, .tog span { font-size: 11px; color: var(--dim); }
.hg-body { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-areas: "prev ctrl" "stats ctrl"; gap: 12px 18px; align-items: start; }
.hg-preview-wrap { grid-area: prev; background: radial-gradient(ellipse at center, rgba(40, 60, 110, 0.35), rgba(5, 8, 16, 0.6)); border: 1px solid var(--line); border-radius: 12px; height: 230px; position: relative; overflow: hidden; }
.hg-right { grid-area: ctrl; }
#hg-preview { width: 100%; height: 100%; display: block; }
.hg-stats { grid-area: stats; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st { background: rgba(120, 160, 255, 0.05); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.st b { font-size: 14px; color: #fff; }
.st small { font-size: 10.5px; color: var(--dim); line-height: 1.35; }
.st.big { grid-column: span 2; }
.st.big b { font-size: 26px; color: var(--cyan); }
.field { margin-bottom: 13px; }
.flabel { font-size: 11px; letter-spacing: 0.12em; font-weight: 700; color: var(--dim); margin-bottom: 6px; display: flex; justify-content: space-between; }
.flabel b { color: #fff; letter-spacing: 0; font-size: 12.5px; }
.segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.togs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.field .sub { margin: 5px 0 0; line-height: 1.4; }
input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; height: 26px; margin: 0; touch-action: pan-x; }
input[type=range]::-webkit-slider-runnable-track { height: 5px; background: rgba(140, 170, 230, 0.2); border-radius: 3px; }
input[type=range]::-moz-range-track { height: 5px; background: rgba(140, 170, 230, 0.2); border-radius: 3px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--cyan); margin-top: -6.5px; box-shadow: 0 0 12px rgba(94, 231, 255, 0.6); border: none; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--cyan); border: none; }

/* ohjeet */
.help { width: min(1000px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; backdrop-filter: blur(10px); margin: auto 0; }
.help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.help h3 { font-size: 12px; letter-spacing: 0.16em; color: var(--cyan); margin: 14px 0 6px; }
.help p { font-size: 13.5px; line-height: 1.55; margin: 0 0 8px; color: #c8d4f0; }
.keys { border-collapse: collapse; font-size: 12.5px; width: 100%; }
.keys td { padding: 4px 6px 4px 0; vertical-align: top; color: #c8d4f0; }
.keys td:first-child { white-space: nowrap; width: 1%; }
kbd { font: 600 11px var(--mono); background: rgba(140, 170, 230, 0.12); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; color: #fff; }
.phys { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: #c8d4f0; }
.phys li { margin-bottom: 6px; }
.phys b { color: #fff; font-family: var(--ui); }

/* --- keskikoko --- */
@media (max-width: 1220px) {
  #hud-br { display: none; }
  #hud-bc { width: min(560px, calc(100vw - 340px)); left: calc(50% + 150px); }
}
@media (max-width: 980px) {
  #hud-bl { width: 250px; }
  #hud-bc { width: calc(100vw - 290px); left: calc(50% + 125px); }
  .sas-b { min-width: 0; flex: 1; padding: 5px 3px; }
  .sas { width: 100%; }
  #hud-tc { width: auto; }
}

/* --- puhelin --- */
@media (max-width: 760px), (max-height: 520px) {
  .x-m { display: none !important; }
  #hud-tl { left: 8px; top: calc(8px + var(--safe-t)); width: calc(50vw - 12px); padding: 8px 9px; }
  .day-row b { font-size: 22px; }
  .sub-row { display: none; }
  .warp-row { margin-top: 5px; gap: 4px; }
  .warp-row .btn.sq { width: 28px; height: 28px; }
  .warp-val b { font-size: 13px; }
  .warpto-row { margin-top: 5px; gap: 3px; }
  .warpto-row .k { display: none; }
  .warpto-row .btn { padding: 3px 6px; font-size: 10.5px; }
  #hud-right { right: 8px; top: calc(8px + var(--safe-t)); width: calc(50vw - 12px); gap: 6px; }
  #hud-tr, #hud-tgt { padding: 8px 9px; }
  .ptitle { font-size: 10px; margin-bottom: 4px; }
  .grid { grid-template-columns: 44px 1fr; gap: 1px 5px; }
  .grid b { font-size: 11px; }
  .grid b i { display: none; }
  #hud-tgt .content { font-size: 10.5px; margin: 2px 0 3px; }
  .plan { flex-direction: column; align-items: stretch; gap: 5px; padding: 6px; margin-top: 5px; }
  .plan-t .k { display: none; }
  .plan-t b { font-size: 10.5px; }
  .plan .btn { width: 100%; padding: 5px; }
  .plan-note { font-size: 10px; }
  .tgt-row { margin-top: 5px; }
  #hud-tc { display: none; }
  .cam-m { display: flex; }
  .cam-m .btn { padding: 3px 10px; }
  .m-res { display: flex; gap: 6px; justify-content: center; }
  .m-res span { display: flex; gap: 4px; align-items: baseline; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 3px 7px; font-size: 10px; }
  .m-res b { font-size: 11.5px; color: #fff; }
  .al { font-size: 10.5px; padding: 4px 8px; }
  #hud-bl, #hud-br { display: none; }
  #hud-bc { left: 50%; width: calc(100vw - 16px); bottom: calc(108px + var(--safe-b)); gap: 5px; }
  body:not(.touch) #hud-bc { bottom: calc(12px + var(--safe-b)); }
  .grid { grid-template-columns: 54px 1fr !important; }
  .grid .k { font-size: 9.5px; }
  .hint { font-size: 11px; padding: 5px 9px; }
  .sas { width: 100%; padding: 3px; gap: 2px; }
  .sas-b { min-width: 0; flex: 1; padding: 6px 1px; }
  .sas-b b { font-size: 10px; letter-spacing: 0.02em; }
  .sas-b i { display: none; }
  .presets { grid-template-columns: 1fr 1fr; }
  .togs { grid-template-columns: 1fr; }
  .hg-body, .help-cols { grid-template-columns: 1fr; gap: 10px; }
  .hg-body { grid-template-areas: "prev" "ctrl" "stats"; }
  .hangar, .help { padding: 12px; }
  .hg-preview-wrap { height: 170px; }
  .o-stats { grid-template-columns: 1fr; }
  .score b { font-size: 52px; }
  .foot { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #hud-tl, #hud-right { width: 230px; }
  #hud-tc { bottom: auto; top: calc(8px + var(--safe-t)); width: calc(100vw - 500px); }
  #hud-bc { bottom: calc(8px + var(--safe-b)); width: calc(100vw - 360px); }
  .hint { display: none; }
  body.touch #touch { bottom: calc(8px + var(--safe-b)); }
  .tbtn { width: 56px; height: 56px; }
  .tbtn.thrust { width: 72px; height: 72px; }
}