html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #05060a;
  color: #f4f7fb;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
}

canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  background: #05060a;
}

.mobile-notice {
  display: none;
}

.hud-link {
  position: fixed;
  top: 132px;
  left: 18px;
  z-index: 2;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(73, 215, 255, 0.55);
  color: #49d7ff;
  background: transparent;
  font: 11px/1.4 inherit;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.hud-link:hover,
.hud-link:focus-visible {
  color: #f4f7fb;
  border-bottom-color: #f4f7fb;
  outline: none;
}

.utility-panel {
  box-sizing: border-box;
  position: fixed;
  top: 162px;
  left: 18px;
  z-index: 4;
  width: min(330px, calc(100vw - 36px));
  padding: 20px;
  border: 1px solid rgba(73, 215, 255, 0.75);
  color: #f4f7fb;
  background: rgba(7, 10, 18, 0.97);
  box-shadow: 0 0 22px rgba(73, 215, 255, 0.14);
}

.utility-panel[hidden] {
  display: none;
}

.utility-panel:focus {
  outline: none;
}

.utility-panel--cheat {
  border-color: rgba(255, 112, 77, 0.82);
  box-shadow: 0 0 22px rgba(255, 112, 77, 0.14);
}

.utility-panel__eyebrow {
  margin: 0 0 5px;
  color: #49d7ff;
  font-size: 10px;
  letter-spacing: 0.14em;
}

.utility-panel--cheat .utility-panel__eyebrow {
  color: #ff704d;
}

.utility-panel h2 {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
}

.utility-panel__close {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 0;
  border: 0;
  color: #8b95a5;
  background: transparent;
  font: 24px/1 inherit;
  cursor: pointer;
}

.utility-panel__close:hover,
.utility-panel__close:focus-visible {
  color: #f4f7fb;
}

.control-list {
  margin: 0;
}

.control-list div {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(244, 247, 251, 0.1);
}

.control-list dt {
  color: #f8de72;
}

.control-list dd {
  margin: 0;
  color: #c9d0dc;
}

.utility-panel label {
  display: block;
  margin: 12px 0 5px;
  color: #c9d0dc;
  font-size: 12px;
}

.utility-panel select,
.utility-panel__action {
  box-sizing: border-box;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(244, 247, 251, 0.4);
  border-radius: 0;
  color: #f4f7fb;
  background: #0e1420;
  font: inherit;
}

.utility-panel__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.utility-panel__actions .utility-panel__action {
  margin-top: 0;
}

.utility-panel__action--secondary {
  border-color: rgba(244, 247, 251, 0.4);
  font-size: 12px;
}

.utility-panel__status {
  min-height: 1.2em;
  margin: 10px 0 0;
  color: #7ce38b;
  font-size: 11px;
}

.utility-panel__action {
  margin-top: 16px;
  border-color: #ff704d;
  cursor: pointer;
}

.utility-panel__action:hover,
.utility-panel__action:focus-visible {
  background: #25100d;
}

.utility-panel__hint {
  margin: 12px 0 0;
  color: #8b95a5;
  font-size: 10px;
}

.shop {
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  right: 28px;
  width: min(360px, calc(100vw - 56px));
  padding: 24px;
  transform: translateY(-50%);
  border: 1px solid rgba(209, 92, 255, 0.85);
  background: rgba(7, 10, 18, 0.96);
  box-shadow: 0 0 24px rgba(209, 92, 255, 0.16);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.shop[hidden] {
  display: none;
}

.shop:focus {
  outline: none;
}

.shop__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.shop__eyebrow {
  margin: 0 0 5px;
  color: #d15cff;
  font-size: 11px;
  letter-spacing: 0.15em;
}

.shop h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  text-transform: uppercase;
}

.shop__close {
  padding: 0;
  border: 0;
  color: #8b95a5;
  background: transparent;
  font: 26px/1 inherit;
  cursor: pointer;
}

.shop__close:hover,
.shop__close:focus-visible {
  color: #f4f7fb;
}

.shop__balance {
  margin: 18px 0 12px;
  color: #f8de72;
}

.shop-item {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(244, 247, 251, 0.35);
  color: #f4f7fb;
  background: #0e1420;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.shop-item + .shop-item {
  margin-top: 8px;
}

.shop-item:hover,
.shop-item:focus-visible,
.shop-item--selected {
  border-color: #d15cff;
  box-shadow: inset 3px 0 #d15cff;
}

.shop-item:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.shop-item--installed:disabled {
  border-color: rgba(124, 227, 139, 0.65);
  opacity: 0.68;
}

.shop-item--unaffordable .shop-item__price {
  color: #ff5f56;
}

.shop-item[hidden] {
  display: none;
}

.shop-item__icon {
  color: #f8de72;
  font-size: 28px;
  text-shadow: 0 0 10px rgba(248, 222, 114, 0.7);
}

.shop-item__icon--nuke {
  color: #ff5f56;
  text-shadow: 0 0 12px rgba(255, 95, 86, 0.75);
}

.shop-item__icon--shield {
  color: #49d7ff;
  text-shadow: 0 0 12px rgba(73, 215, 255, 0.75);
}

.shop-item__icon--missile {
  color: #ff78d1;
  text-shadow: 0 0 12px rgba(255, 120, 209, 0.7);
}

.shop-item strong,
.shop-item small {
  display: block;
}

.shop-item small {
  margin-top: 3px;
  color: #8b95a5;
  font-size: 11px;
}

.shop-item__price {
  color: #f8de72;
}

.shop__status {
  min-height: 1.2em;
  margin: 12px 0 0;
  color: #7ce38b;
  font-size: 12px;
}

.shop__controls {
  margin: 14px 0 0;
  color: #8b95a5;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.game-over {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 28px;
  background: transparent;
}

.game-over[hidden] {
  display: none;
}

.game-over__panel {
  box-sizing: border-box;
  width: min(390px, calc(100vw - 56px));
  padding: 30px;
  border: 1px solid rgba(124, 227, 139, 0.68);
  background: rgba(7, 10, 18, 0.96);
  box-shadow: 0 0 24px rgba(124, 227, 139, 0.12);
}

.game-over__eyebrow,
.game-over__hint {
  margin: 0;
  color: #7ce38b;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.game-over h1 {
  margin: 8px 0 4px;
  font-size: 32px;
  font-weight: 500;
}

.game-over h2 {
  margin: 24px 0 12px;
  color: #f8de72;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.game-over__score {
  margin: 0 0 24px;
  color: #f8de72;
  font-size: 20px;
}

.score-form label {
  display: block;
  margin-bottom: 8px;
  color: #c9d0dc;
  font-size: 13px;
}

.score-form__controls {
  display: flex;
  gap: 8px;
}

.leaderboard-status {
  min-height: 1.2em;
  margin: 10px 0 0;
  color: #8b95a5;
  font-size: 12px;
}

.leaderboard-status--error {
  color: #ff5f56;
}

.score-form input,
.score-form button,
.restart-button {
  border: 1px solid rgba(244, 247, 251, 0.45);
  border-radius: 0;
  color: #f4f7fb;
  background: #0e1420;
  font: inherit;
}

.score-form input {
  min-width: 0;
  flex: 1;
  padding: 10px 12px;
  text-transform: uppercase;
}

.score-form button,
.restart-button {
  padding: 10px 14px;
  cursor: pointer;
}

.score-form button:hover,
.score-form button:focus-visible,
.restart-button:hover,
.restart-button:focus-visible {
  border-color: #7ce38b;
  color: #7ce38b;
}

.leaderboard {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: rank;
}

.leaderboard:empty::after {
  display: block;
  padding: 10px 0 18px;
  color: #8b95a5;
  content: "No scored missions yet";
  font-size: 13px;
}

.leaderboard li {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(244, 247, 251, 0.1);
  counter-increment: rank;
}

.leaderboard li::before {
  content: counter(rank, decimal-leading-zero);
  color: #7ce38b;
}

.leaderboard__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard__score {
  color: #f8de72;
  font-variant-numeric: tabular-nums;
}

.restart-button {
  width: 100%;
}

.game-over__hint {
  margin-top: 12px;
  text-align: center;
  letter-spacing: 0.08em;
}

@media (max-width: 820px) {
  .mobile-notice {
    box-sizing: border-box;
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 8;
    display: block;
    padding: 20px;
    border: 1px solid rgba(73, 215, 255, 0.8);
    background: rgba(7, 10, 18, 0.96);
    box-shadow: 0 0 28px rgba(73, 215, 255, 0.18);
  }

  .mobile-notice__eyebrow {
    margin: 0 0 6px;
    color: #49d7ff;
    font-size: 10px;
    letter-spacing: 0.15em;
  }

  .mobile-notice h1 {
    margin: 0 0 8px;
    font-size: clamp(20px, 7vw, 28px);
    font-weight: 500;
    text-transform: uppercase;
  }

  .mobile-notice p:last-child {
    margin: 0;
    color: #c9d0dc;
    font-size: 13px;
    line-height: 1.5;
  }
}