:root {
  --space-ink: #080b12;
  --panel-bg: rgb(22 19 35 / 86%);
  --panel-bg-strong: rgb(13 11 24 / 90%);
  --panel-bg-soft: rgb(184 108 255 / 10%);
  --panel-border: rgb(255 212 90 / 58%);
  --panel-border-soft: rgb(255 246 214 / 16%);
  --panel-shadow: rgb(0 0 0 / 34%);
  --panel-glow: rgb(184 108 255 / 18%);
  --text-main: #fff3db;
  --text-strong: #ffe28a;
  --text-soft: #d6c9e9;
  --accent-cookie: #ffd45a;
  --accent-cookie-soft: #ffe6a3;
  --accent-purple: #b86cff;
  --accent-purple-hot: #d78cff;
  --accent-cyan: #66e7ff;
  --accent-mint: #7cf5b0;
  --accent-self: var(--accent-purple-hot);
  --status-good: var(--accent-mint);
  --status-warn: var(--accent-cookie);
  --status-idle: #b7c4d8;
  --status-bad: #ff7d8a;
  --hud-debug-muted: rgb(244 237 220 / 22%);
  --health-good: var(--status-good);
  --health-warn: var(--status-warn);
  --health-critical: var(--status-bad);
  --health-empty: rgb(171 184 205 / 30%);
  --health-outline: rgb(0 0 0 / 68%);
  --hud-bg: var(--panel-bg);
  --hud-bg-strong: var(--panel-bg-strong);
  --hud-border: var(--panel-border);
  --hud-border-soft: var(--panel-border-soft);
  --hud-shadow: var(--panel-shadow);
  --hud-glow: var(--panel-glow);
  --hud-row-bg: var(--panel-bg-soft);
  --hud-row-border: var(--panel-border-soft);
  --hud-text: var(--text-main);
  --hud-text-strong: var(--text-strong);
  --hud-text-muted: var(--text-soft);
  --hud-accent: var(--accent-cookie);
  --hud-accent-soft: var(--accent-cookie-soft);
  --hud-purple: var(--accent-purple);
  --hud-purple-hot: var(--accent-purple-hot);
  --hud-cyan: var(--accent-cyan);
  --hud-status-good: var(--status-good);
  --hud-status-warn: var(--status-warn);
  --hud-status-idle: var(--status-idle);
  --hud-status-bad: var(--status-bad);
  --room-chip-bg: rgb(184 108 255 / 8%);
  --room-action-bg: rgb(184 108 255 / 18%);
  --room-action-bg-hover: rgb(184 108 255 / 28%);
  --room-action-bg-primary: #b86cff;
  --room-action-bg-primary-hover: #d78cff;
  --room-action-text: #ffdffb;
  --room-action-text-primary: #fff8d9;
  --font-hud: "Trebuchet MS", "Avenir Next", Verdana, sans-serif;
  --font-title: "Arial Black", "Trebuchet MS", "Avenir Next", Verdana, sans-serif;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--space-ink);
  color: var(--hud-text);
  font: 14px/1.35 var(--font-hud);
}

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  touch-action: none;
}

html,
body,
canvas,
#overlay,
#start-screen,
#touch-controls,
#touch-controls *,
.start-button {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

#start-screen {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  overflow: hidden;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: var(--space-ink);
  color: var(--hud-text);
  isolation: isolate;
  pointer-events: auto;
}

#start-screen::before,
#start-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

#start-screen::before {
  background:
    radial-gradient(circle at 60% 46%, rgb(255 212 90 / 18%), transparent 0 22%, transparent 38%),
    linear-gradient(90deg, rgb(8 11 18 / 14%) 0%, rgb(8 11 18 / 28%) 38%, rgb(8 11 18 / 70%) 100%),
    linear-gradient(180deg, rgb(8 11 18 / 28%) 0%, rgb(13 11 24 / 26%) 54%, rgb(8 11 18 / 72%) 100%);
}

#start-screen::after {
  box-shadow: inset 0 0 110px rgb(0 0 0 / 62%);
}

#start-screen[hidden] {
  display: none;
}

.start-art {
  position: absolute;
  inset: -1%;
  z-index: -2;
  width: 102%;
  height: 102%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.08) contrast(1.04);
}

.start-content {
  display: grid;
  position: relative;
  z-index: 1;
  width: min(540px, calc(100vw - 36px));
  justify-items: center;
  margin-left: min(18vw, 260px);
  transform: translateY(-8px);
}

.start-brand {
  margin: 0;
  color: #fff0a8;
  font-family: var(--font-title);
  font-size: 86px;
  font-weight: 900;
  line-height: 0.92;
  text-align: center;
  -webkit-text-stroke: 2px var(--accent-cyan);
  paint-order: stroke fill;
  text-shadow:
    0 3px 0 rgb(42 20 83 / 74%),
    0 0 3px var(--accent-cyan),
    0 0 18px rgb(102 231 255 / 56%),
    0 0 34px rgb(184 108 255 / 46%);
}

.start-subtitle {
  display: block;
  overflow: visible;
  width: min(460px, 90vw);
  height: auto;
  margin: -4px 0 -8px;
  filter:
    drop-shadow(0 3px 0 rgb(42 20 83 / 78%))
    drop-shadow(0 0 10px rgb(102 231 255 / 48%))
    drop-shadow(0 0 18px rgb(184 108 255 / 36%));
}

.start-subtitle text {
  fill: #fff8d9;
  stroke: #b86cff;
  stroke-width: 4px;
  paint-order: stroke fill;
  font-family: var(--font-title);
  font-size: 31px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.start-instructions {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid rgb(255 246 214 / 18%);
  border-radius: 4px;
  background: rgb(8 11 18 / 52%);
  color: #f3ecff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 0 rgb(0 0 0 / 60%);
}

.start-actions {
  display: grid;
  width: min(320px, calc(100vw - 48px));
  margin-top: 28px;
  gap: 10px;
}

#start-loading {
  display: grid;
  width: min(320px, calc(100vw - 48px));
  margin-top: 30px;
  gap: 12px;
}

#start-screen:not(.loading) #start-loading {
  display: none;
}

#start-screen.loading .start-actions {
  display: none;
}

#start-loading-label {
  color: #fff8d9;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 1px 0 rgb(0 0 0 / 64%);
}

.start-progress {
  overflow: hidden;
  height: 12px;
  border: 1px solid rgb(102 231 255 / 54%);
  border-radius: 4px;
  background: rgb(8 11 18 / 66%);
  box-shadow:
    inset 0 0 8px rgb(0 0 0 / 46%),
    0 0 16px rgb(102 231 255 / 16%);
}

#start-progress-bar {
  width: 100%;
  height: 100%;
  transform: scaleX(0.04);
  transform-origin: left center;
  background:
    linear-gradient(90deg, #66e7ff 0%, #fff0a8 52%, #b86cff 100%);
  box-shadow: 0 0 16px rgb(255 212 90 / 50%);
  transition: transform 160ms ease-out;
}

.start-progress-error {
  border-color: rgb(255 101 101 / 70%);
}

.start-button {
  box-sizing: border-box;
  display: grid;
  min-height: 46px;
  place-items: center;
  padding: 11px 14px 12px;
  border: 1px solid var(--hud-border-soft);
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
}

.start-button-primary {
  border-color: rgb(255 212 90 / 76%);
  background:
    linear-gradient(180deg, rgb(215 140 255 / 100%) 0%, rgb(184 108 255 / 100%) 62%, rgb(133 75 244 / 100%) 100%);
  box-shadow:
    0 3px 0 rgb(0 0 0 / 24%),
    0 0 20px rgb(184 108 255 / 34%),
    0 0 26px rgb(255 212 90 / 12%);
  color: #fff8d9;
}

.start-button-secondary {
  background: rgb(184 108 255 / 16%);
  color: var(--room-action-text);
}

.start-button:hover {
  transform: translateY(-1px);
}

.start-button:active {
  transform: translateY(1px);
}

.start-footer {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 1;
}

.start-company {
  display: inline-grid;
  justify-items: end;
  gap: 6px;
  color: rgb(255 248 217 / 86%);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 1px 0 rgb(0 0 0 / 68%);
}

.start-company a {
  text-decoration: none;
}

.start-company-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.start-company-brand img {
  display: block;
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

.start-company-brand span {
  display: inline-block;
  transform: translateY(0.5px);
}

#overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  color: var(--hud-text);
  font-family: var(--font-hud);
  text-rendering: optimizelegibility;
}

#scoreboard {
  position: absolute;
  left: 16px;
  top: 16px;
  min-width: 220px;
  max-width: min(280px, calc(100vw - 32px));
  pointer-events: auto;
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: none;
}

.score-card {
  padding: 9px;
  border: 1px solid var(--hud-border);
  border-radius: 4px;
  background: var(--hud-bg);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 34%),
    0 8px 18px var(--hud-shadow),
    0 0 16px var(--hud-glow);
}

.score-header,
.hud-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.score-header {
  margin: 0 2px 7px;
}

.score-title {
  min-width: 0;
  color: var(--hud-accent-soft);
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-shadow:
    0 1px 0 rgb(0 0 0 / 42%),
    0 0 8px rgb(184 108 255 / 26%);
}

.score-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.score-status {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hud-status-idle);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  opacity: 0.78;
}

.score-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentcolor;
  box-shadow: 0 0 5px currentcolor;
}

.score-status.status-connected {
  color: var(--hud-cyan);
}

.score-status.status-connecting {
  color: var(--hud-status-warn);
}

.score-status.status-idle {
  color: var(--hud-status-idle);
}

.score-status.status-disconnected {
  color: var(--hud-status-bad);
}

.room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  padding: 5px 2px;
  border: 1px solid var(--hud-row-border);
  border-width: 1px 0;
  border-radius: 0;
  background: var(--room-chip-bg);
}

.hud-section {
  margin-top: 8px;
}

.hud-section-header {
  margin: 0 2px 4px;
  color: var(--hud-text-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.room-row-public {
  display: block;
  padding: 5px;
}

.room-chip {
  min-width: 0;
  overflow: hidden;
  color: var(--hud-text-muted);
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-action {
  flex: 0 0 auto;
  appearance: none;
  min-width: 88px;
  min-height: 26px;
  padding: 5px 8px 6px;
  border: 1px solid rgb(215 140 255 / 44%);
  border-radius: 3px;
  background: var(--room-action-bg);
  color: var(--room-action-text);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

.room-action:hover {
  background: var(--room-action-bg-hover);
}

.room-primary-action {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px 9px;
  border-color: rgb(255 212 90 / 68%);
  background: var(--room-action-bg-primary);
  box-shadow:
    0 2px 0 rgb(0 0 0 / 20%),
    0 0 12px rgb(184 108 255 / 28%);
  color: var(--room-action-text-primary);
  font-size: 11px;
  font-weight: 700;
}

.room-primary-action:hover {
  background: var(--room-action-bg-primary-hover);
}

.room-action.copied {
  border-color: rgb(124 245 176 / 46%);
  background: rgb(124 245 176 / 16%);
  color: var(--hud-status-good);
}

.buff-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 7px;
  padding: 0 2px;
}

.sound-toggle {
  position: relative;
  display: grid;
  box-sizing: border-box;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--hud-row-border);
  border-radius: 4px;
  background: rgb(255 246 214 / 9%);
  color: var(--hud-accent-soft);
  cursor: pointer;
}

.sound-toggle:hover {
  border-color: rgb(255 212 90 / 52%);
  background: rgb(255 212 90 / 13%);
}

.sound-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.sound-glyph {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sound-body {
  fill: currentcolor;
}

.sound-wave,
.sound-mute-line {
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.sound-wave {
  opacity: 1;
}

.sound-mute-line {
  opacity: 0;
  stroke: var(--hud-status-bad);
}

.sound-icon.muted .sound-wave {
  opacity: 0;
}

.sound-icon.muted .sound-mute-line {
  opacity: 1;
}

.buff-chip {
  position: relative;
  display: grid;
  flex: 0 0 25px;
  width: 25px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--hud-row-border);
  border-radius: 3px;
  background: rgb(255 246 214 / 9%);
}

@media (pointer: coarse) {
  .sound-toggle {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }

  .start-instructions {
    display: none;
  }
}

.buff-chip::before,
.buff-chip::after {
  content: "";
  position: absolute;
  display: block;
}

.buff-shield::before {
  width: 12px;
  height: 14px;
  background: linear-gradient(180deg, #e7fbff 0%, var(--hud-cyan) 100%);
  clip-path: polygon(50% 0, 90% 14%, 82% 62%, 50% 100%, 18% 62%, 10% 14%);
  filter: drop-shadow(0 0 5px rgb(77 210 255 / 52%));
}

.buff-rapid::before,
.buff-rapid::after {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid #ff7f70;
  filter: drop-shadow(0 0 5px rgb(255 127 112 / 46%));
}

.buff-rapid::before {
  left: 5px;
}

.buff-rapid::after {
  left: 12px;
}

.buff-boost::before {
  width: 10px;
  height: 16px;
  background: linear-gradient(180deg, #eaffef 0%, var(--hud-status-good) 100%);
  clip-path: polygon(62% 0, 12% 58%, 46% 54%, 32% 100%, 88% 38%, 54% 43%);
  filter: drop-shadow(0 0 5px rgb(124 245 176 / 50%));
}

.buff-triple::before {
  width: 15px;
  height: 15px;
  background: var(--hud-accent);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 5px rgb(255 214 77 / 48%));
}

.buff-triple::after {
  width: 3px;
  height: 3px;
  left: 5px;
  top: 5px;
  border-radius: 999px;
  background: #fff8b8;
  box-shadow: 10px 0 0 #fff8b8, 5px 9px 0 #fff8b8;
}

.score-row {
  display: grid;
  grid-template-columns: 8px 18px minmax(0, 1fr) minmax(28px, auto);
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 3px 6px;
  border: 0;
  border-bottom: 1px solid var(--hud-row-border);
  background: transparent;
  color: var(--hud-text);
}

.score-row + .score-row {
  margin-top: 0;
}

.score-row.self {
  background: linear-gradient(90deg, rgb(184 108 255 / 20%), rgb(255 212 90 / 8%) 70%, transparent);
  color: #fff7c7;
  font-weight: 700;
}

.score-marker {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  transform: rotate(45deg);
}

.score-row.self .score-marker {
  background: var(--hud-purple-hot);
  box-shadow:
    0 0 5px rgb(215 140 255 / 78%),
    0 0 10px rgb(255 212 90 / 24%);
}

.score-rank {
  color: var(--hud-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.score-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-value {
  color: var(--hud-accent);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}

.score-empty {
  padding: 8px 10px;
  border: 1px solid var(--hud-row-border);
  border-radius: 3px;
  background: var(--hud-row-bg);
  color: var(--hud-text-muted);
  font-size: 11px;
  font-weight: 600;
}

#labels {
  position: absolute;
  inset: 0;
}

.ship-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  padding: 2px 5px 3px;
  border: 1px solid rgb(255 246 214 / 14%);
  border-radius: 2px;
  background: rgb(10 12 18 / 62%);
  box-shadow: 0 2px 6px rgb(0 0 0 / 24%);
  color: var(--hud-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ship-label.self {
  border-color: rgb(215 140 255 / 52%);
  background: rgb(26 14 42 / 68%);
  box-shadow:
    0 2px 7px rgb(0 0 0 / 26%),
    0 0 8px rgb(184 108 255 / 24%);
}

.health-meter {
  position: relative;
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

.health-meter span {
  display: block;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--health-empty);
  box-shadow: 0 0 0 1px var(--health-outline);
}

.health-meter.health-1 span:nth-child(1) {
  background: var(--health-critical);
}

.health-meter.health-2 span:nth-child(-n + 2) {
  background: var(--health-warn);
}

.health-meter.health-3 span {
  background: var(--health-good);
}

.health-meter.critical span:nth-child(1) {
  animation: health-critical-pulse 1.05s ease-in-out infinite;
}

@keyframes health-critical-pulse {
  0%,
  100% {
    opacity: 0.68;
    box-shadow:
      0 0 0 1px var(--health-outline),
      0 0 3px rgb(255 61 51 / 16%);
  }

  50% {
    opacity: 1;
    box-shadow:
      0 0 0 1px var(--health-outline),
      0 0 6px rgb(255 61 51 / 58%);
  }
}

#idle-notice {
  position: absolute;
  left: 50%;
  top: 56px;
  display: none;
  min-width: 220px;
  transform: translateX(-50%);
  padding: 12px 22px 14px;
  border: 1px solid var(--hud-border-soft);
  border-radius: 4px;
  background: var(--hud-bg-strong);
  box-shadow: 0 10px 24px var(--hud-shadow);
  text-align: center;
}

#idle-notice.visible {
  display: block;
}

.idle-title {
  color: var(--hud-status-idle);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.idle-prompt {
  margin-top: 4px;
  color: var(--hud-accent);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
}

#debug {
  position: absolute;
  right: 16px;
  top: 16px;
  display: none;
  color: var(--hud-debug-muted);
  font-family:
    ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: none;
  text-transform: lowercase;
}

#debug.visible {
  display: block;
}

#touch-controls {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  left: max(18px, env(safe-area-inset-left));
  display: none;
  align-items: end;
  justify-content: space-between;
  pointer-events: none;
}

#touch-move-zone {
  position: relative;
  width: min(58vw, 380px);
  height: min(46vh, 330px);
  min-width: 176px;
  min-height: 176px;
  pointer-events: auto;
  touch-action: none;
}

#touch-move {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 136px;
  height: 136px;
  border: 1px solid rgb(255 246 214 / 22%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(255 212 90 / 18%) 0 20%, transparent 21%),
    rgb(13 11 24 / 54%);
  box-shadow: 0 8px 22px rgb(0 0 0 / 30%);
  pointer-events: none;
}

#touch-move-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border: 1px solid rgb(255 212 90 / 68%);
  border-radius: 50%;
  background: rgb(184 108 255 / 58%);
  box-shadow: 0 0 14px rgb(184 108 255 / 28%);
  transform: translate(0, 0);
}

#touch-move.active {
  border-color: rgb(255 246 214 / 34%);
  background:
    radial-gradient(circle, rgb(255 212 90 / 26%) 0 20%, transparent 21%),
    rgb(13 11 24 / 66%);
}

#touch-fire {
  width: 92px;
  height: 92px;
  border: 1px solid rgb(255 212 90 / 72%);
  border-radius: 50%;
  background: rgb(255 212 90 / 22%);
  color: var(--text-strong);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: auto;
  touch-action: none;
}

#touch-fire.pressed {
  background: rgb(255 212 90 / 38%);
  box-shadow: 0 0 18px rgb(255 212 90 / 30%);
}

@media (pointer: coarse) {
  #touch-controls {
    display: flex;
  }

  #scoreboard {
    max-width: min(260px, calc(100vw - 32px));
  }
}

@media (max-width: 760px), (max-height: 560px) {
  #start-screen {
    place-items: start center;
    padding-top: max(28px, env(safe-area-inset-top));
  }

  #start-screen::before {
    background:
      radial-gradient(circle at 50% 34%, rgb(255 212 90 / 18%), transparent 0 26%, transparent 42%),
      linear-gradient(180deg, rgb(8 11 18 / 50%) 0%, rgb(8 11 18 / 32%) 45%, rgb(8 11 18 / 82%) 100%);
  }

  .start-art {
    inset: 0;
    width: 100%;
    height: 100%;
    object-position: 34% center;
  }

  .start-content {
    width: min(360px, calc(100vw - 32px));
    margin-left: 0;
    transform: none;
  }

  .start-brand {
    font-size: 48px;
    -webkit-text-stroke-width: 1px;
    text-shadow:
      0 2px 0 rgb(42 20 83 / 76%),
      0 0 2px var(--accent-cyan),
      0 0 16px rgb(102 231 255 / 58%),
      0 0 28px rgb(184 108 255 / 48%);
  }

  .start-subtitle {
    width: min(340px, calc(100vw - 38px));
    margin: -4px 0 -4px;
  }

  .start-subtitle text {
    font-size: 31px;
    stroke-width: 4px;
  }

  .start-actions {
    width: min(310px, calc(100vw - 54px));
    margin-top: 56px;
  }

  .start-button {
    min-height: 58px;
    padding: 15px 18px 16px;
    font-size: 16px;
  }

  .start-instructions {
    display: none;
  }

  .start-footer {
    right: auto;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: min(360px, calc(100vw - 32px));
    transform: translateX(-50%);
  }

  .start-company {
    width: 100%;
    justify-items: center;
    font-size: 11px;
    text-align: center;
  }

  .start-company-brand {
    justify-content: center;
    font-size: 13px;
  }

  .start-company-brand img {
    width: 21px;
    height: 21px;
  }
}

@media (min-width: 1320px) and (min-height: 720px) {
  .start-brand {
    font-size: 96px;
  }
}