#view-game {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.game-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.4rem 1.25rem;
  flex-shrink: 0;
}
.game-topbar .btn-icon {
  margin-left: auto;
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  line-height: 1;
}
.game-mode-label {
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: var(--primary);
  text-transform: uppercase;
}

/* ── Status bars ── */
#hud-bars {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: 20px;
  padding: 0 10px;
  flex-shrink: 0;
  background: rgba(5, 5, 18, 0.70);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.hud-section        { display: flex; align-items: center; gap: 4px; }
.hud-label          { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; min-width: 16px; text-align: right; color: #5a8264; font-family: monospace; }
.hud-track          { width: 100px; height: 7px; background: #1e1e2d; border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.hud-fill           { height: 100%; border-radius: 2px; }
.hud-count          { font-size: 9px; font-family: monospace; min-width: 52px; color: #8ca0b4; }
.hud-section.inactive .hud-label,
.hud-section.inactive .hud-count { color: #2d3040; }
.hud-section.inactive .hud-fill  { background: #1a1a28 !important; }

.hud-track-sm    { width: 60px; }
.hud-count-sm    { min-width: 36px; }

.hud-sep         { width: 1px; height: 12px; background: rgba(255,255,255,0.07); flex-shrink: 0; align-self: center; }

/* ── Energy preset widget ── */
.hud-presets     { display: flex; gap: 2px; }
.hud-preset-btn  {
  font-size: 8px; font-family: monospace; font-weight: 700; letter-spacing: 0.04em;
  width: 13px; height: 13px; display: flex; align-items: center; justify-content: center;
  border-radius: 2px; border: 1px solid transparent; padding: 0; cursor: pointer;
  color: #32344a; background: #12121e;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.hud-preset-btn.active {
  color: #a0c8ff; background: #1c2640; border-color: rgba(100,160,255,0.35);
}

/* ── Game field ── */
#game-field {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  overflow: hidden;
}

/* ── Touch control clusters ── */
.game-ctrl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 5;
  flex-shrink: 0;
  min-width: 100px;
}

/* Session info panel (wave / credits / cargo stash …) — DOM, because the
   game canvas is clipped to the radar circle and its corners are invisible. */
#hud-info {
  min-height: 1px;
  width: 170px;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 11px;
  line-height: 1.7;
  text-align: left;
  align-self: flex-start;
  padding-left: 6px;
  pointer-events: none;
  word-break: break-word;
}
#hud-info:not(:empty) { margin-bottom: 0.8rem; }
.gc-row { display: flex; gap: 0.4rem; }

.gc-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.28);
  font-family: inherit;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  touch-action: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  min-width: 52px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.05s, border-color 0.05s, color 0.05s;
}
.gc-btn.gc-active {
  background: rgba(6, 182, 212, 0.2);
  border-color: rgba(6, 182, 212, 0.5);
  color: var(--primary);
}
.gc-turn   { min-width: 56px; min-height: 56px; font-size: 0.85rem; }
.gc-brake  { min-width: 76px; }
.gc-thrust {
  min-width: 88px; min-height: 62px; font-size: 0.7rem;
  background: rgba(6, 182, 212, 0.06);
  border-color: rgba(6, 182, 212, 0.18);
  color: rgba(6, 182, 212, 0.5);
}
.gc-thrust.gc-active {
  background: rgba(6, 182, 212, 0.24);
  border-color: rgba(6, 182, 212, 0.6);
  color: var(--primary);
}
.gc-fire {
  min-width: 70px;
  background: rgba(244, 63, 94, 0.06);
  border-color: rgba(244, 63, 94, 0.18);
  color: rgba(244, 63, 94, 0.5);
}
.gc-fire.gc-active {
  background: rgba(244, 63, 94, 0.22);
  border-color: rgba(244, 63, 94, 0.55);
  color: var(--red);
}
.gc-ability { min-width: 50px; font-size: 0.6rem; }
/* Action / interact button (dock, confirm). Amber to match the dock ring. */
.gc-action {
  min-width: 70px;
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.20);
  color: rgba(251, 191, 36, 0.55);
}
.gc-action.gc-active {
  background: rgba(251, 191, 36, 0.24);
  border-color: rgba(251, 191, 36, 0.6);
  color: #fbbf24;
}

/* ── Mini radar HUD ── */
#radar-wrap {
  position: relative;
  width: 100px; height: 100px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}

#radar-canvas {
  display: block;
  width: 100px; height: 100px;
}

.radar-mini-ring {
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(6, 182, 212, 0.28);
  box-shadow:
    inset 0 0 12px rgba(6, 182, 212, 0.08),
          0 0 12px rgba(6, 182, 212, 0.08);
  pointer-events: none;
}

/* ── Radar circle ── */
#game-wrap {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  width: min(560px, calc(100dvh - 60px), calc(100dvw - 220px));
}

#game-canvas {
  /* Kaplay sets inline style="width:Xpx;height:Xpx" — !important overrides it
     so the canvas scales to fill #game-wrap rather than blowing past the circle. */
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  outline: none;
}

.radar-scanlines {
  position: absolute; inset: 0; border-radius: 50%; z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.035) 2px, rgba(0,0,0,0.035) 4px
  );
  pointer-events: none;
}

/* Blur ring — sharp inside, frosted-glass from 90% outward. */
.radar-blur-ring {
  position: absolute; inset: 0; border-radius: 50%; z-index: 3;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask-image: radial-gradient(circle at 50% 50%,
    transparent 0%, transparent 89%, black 97%, black 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    transparent 0%, transparent 89%, black 97%, black 100%);
  pointer-events: none;
}

/* Subtle edge darkening — SVG wobble makes the boundary organic rather than a perfect circle.
   Must be on an element with actual pixel content (gradient), not on backdrop-filter elements,
   otherwise feTurbulence bleeds through transparent areas and produces a chess-board artifact. */
.radar-vignette {
  position: absolute; inset: 0; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 50% 50%,
    transparent 0%,
    transparent 91%,
    rgba(11,11,18, 0.25) 96%,
    rgba(11,11,18, 0.55) 100%
  );
  filter: url(#radar-wobble);
  pointer-events: none;
}

.radar-ring {
  position: absolute; inset: -1px; border-radius: 50%; z-index: 5;
  border: 1px solid rgba(6,182,212, 0.22);
  box-shadow:
    inset 0 0 28px rgba(6,182,212, 0.07),
          0 0 28px rgba(6,182,212, 0.07);
  pointer-events: none;
}

/* Ship heading indicator — full-size transparent layer; JS rotates it,
   the ::before triangle orbits the rim pointing inward. */
#heading-dot {
  position: absolute; inset: 0;
  border-radius: 50%;
  z-index: 6;
  pointer-events: none;
}
#heading-dot::before {
  content: '';
  position: absolute;
  top: 6px;
  left: calc(50% - 5px);
  width: 0; height: 0;
  border-left:  5px solid transparent;
  border-right: 5px solid transparent;
  border-top:  10px solid rgba(255, 255, 255, 0.60);
}

/* ── Fullscreen ── */
#view-game:fullscreen,
#view-game:-webkit-full-screen {
  background: #0b0b12;
}

#view-game:fullscreen .game-topbar,
#view-game:-webkit-full-screen .game-topbar {
  padding: 0.25rem 1.25rem;
  background: rgba(11,11,18, 0.85);
  border-bottom: 1px solid rgba(42,42,64, 0.35);
}

#view-game:fullscreen #game-wrap,
#view-game:-webkit-full-screen #game-wrap {
  width: min(calc(100dvh - 68px), calc(100dvw - 220px));
}