:root {
  color-scheme: dark;
  --lime: #daee87;
  --mono: "Cascadia Mono", Consolas, "Courier New", monospace;
  font: 15px/1.5 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: #101e1b;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  --padding: clamp(6px, 2vmin, 16px);
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: var(--padding);
}
h1, h2, h3, p, dl, dd { margin: 0; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible, .help-content:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
img { image-rendering: pixelated; vertical-align: middle; }
kbd, output { font-family: var(--mono); }

.console {
  --hud-height: 62px;
  --footer-height: 34px;
  /* Reserve the HUD and footer before sizing the portrait battlefield. */
  width: min(100%, clamp(224px, calc((100svh - 2 * var(--padding) - var(--hud-height) - var(--footer-height)) * .6666), 512px));
  min-width: 0;
  container-type: inline-size;
  border: 1px solid #273c32;
  background: #172920;
  color: #eef3e4;
  box-shadow: 0 8px 32px #07151299;
}
.hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 14px;
  height: var(--hud-height);
}
.hud-score > span, .hud-lives > span { display: block; font-size: 11px; font-weight: 700; }
.hud-score output, .record output { color: var(--lime); font-size: 25px; font-weight: 800; line-height: 1.1; letter-spacing: .11em; }
.hud-lives { min-width: 88px; }
.hearts { display: flex; gap: 4px; align-items: center; min-height: 24px; }
.hearts i {
  width: 14px;
  height: 14px;
  background: #fd8e78;
  clip-path: polygon(0 19%, 14% 19%, 14% 6%, 37% 6%, 37% 19%, 63% 19%, 63% 6%, 86% 6%, 86% 19%, 100% 19%, 100% 55%, 86% 55%, 86% 70%, 72% 70%, 72% 83%, 58% 83%, 58% 96%, 42% 96%, 42% 83%, 28% 83%, 28% 70%, 14% 70%, 14% 55%, 0 55%);
}
.hearts .empty { background: #42574a; }
.hud-actions { display: flex; gap: 6px; }
.icon-button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  background: #2a4134;
  color: #e6f2d5;
  border: 1px solid #5a705d;
  font: 700 18px/1 var(--mono);
}
.icon-button:disabled { opacity: .55; }
.icon-button:not(:disabled):hover { background: #3d5745; }
.icon-button svg { width: 20px; }

.screen { position: relative; background: #142e31; isolation: isolate; }
canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  touch-action: none;
  outline: none;
}
.screen:not(:has(.veil[hidden]))::after {
  position: absolute;
  inset: 6px;
  z-index: 2;
  pointer-events: none;
  content: "";
  opacity: .55;
  background:
    linear-gradient(#cadfbe, #cadfbe) 0 0 / 9px 1px,
    linear-gradient(#cadfbe, #cadfbe) 0 0 / 1px 9px,
    linear-gradient(#cadfbe, #cadfbe) 100% 0 / 9px 1px,
    linear-gradient(#cadfbe, #cadfbe) 100% 0 / 1px 9px,
    linear-gradient(#cadfbe, #cadfbe) 0 100% / 9px 1px,
    linear-gradient(#cadfbe, #cadfbe) 0 100% / 1px 9px,
    linear-gradient(#cadfbe, #cadfbe) 100% 100% / 9px 1px,
    linear-gradient(#cadfbe, #cadfbe) 100% 100% / 1px 9px;
  background-repeat: no-repeat;
}
.veil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #081c21a8;
}
.veil[data-phase="ready"] { background: radial-gradient(ellipse at center, #12282a87 22%, #0a1b1d30 74%); }
.overlay {
  width: min(284px, calc(100% - 48px));
  padding: 26px 24px;
  border: 1px solid #82977d;
  background: #172c28f5;
  box-shadow: 4px 4px #091e1ccb, inset 0 0 0 4px #203b33;
  text-align: center;
}
.emblem {
  width: 116px;
  height: 98px;
  margin: -8px auto 10px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, #88a86230 0 26%, transparent 27% 34%, #839f694d 35% 36%, transparent 37% 45%, #839f694d 46% 47%, transparent 48%),
    linear-gradient(90deg, transparent 49%, #849f5f50 49% 51%, transparent 51%) center / 80% 100% no-repeat,
    linear-gradient(transparent 49%, #849f5f50 49% 51%, transparent 51%) center / 100% 80% no-repeat;
}
.emblem img { animation: hover 2.6s ease-in-out infinite; filter: drop-shadow(0 5px #0f211e); }
@keyframes hover { 50% { transform: translateY(-5px); } }
.overlay :is(h1, h2) { color: #f1f4dd; font-size: clamp(18px, 7cqi, 31px); font-weight: 900; letter-spacing: .04em; }
.primary-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 20px;
  border: 1px solid #efffc1;
  box-shadow: 0 3px #7f964b;
  background: var(--lime);
  color: #1d2c1a;
  font-size: 15px;
  font-weight: 800;
}
.primary-button:not(:disabled):hover { background: #ecffa4; }
.primary-button:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px #7f964b; }
.primary-button:disabled { opacity: .65; }
.play-icon { width: 10px; height: 12px; background: currentColor; clip-path: polygon(0 0, 33% 0, 33% 17%, 66% 17%, 66% 33%, 100% 33%, 100% 67%, 66% 67%, 66% 83%, 33% 83%, 33% 100%, 0 100%); }
.text-button { margin-top: 13px; min-height: 36px; padding: 0 12px; background: transparent; color: #d7e5d4; border: 1px solid #77917c; font-size: 12px; }
.text-button:hover { background: #2a493d; }
.results { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; }
.results div + div { border-left: 1px solid #425d4d; }
.results dt { color: #b8c7b3; font-size: 12px; }
.results dd { color: var(--lime); font: 700 23px/1.4 var(--mono); }
.console-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: var(--footer-height);
  color: #c4d2c0;
  font-size: 11px;
}
.flight-state, .shield-state { display: inline-flex; align-items: center; gap: 6px; }
.flight-state i { width: 6px; height: 6px; background: var(--lime); }
.shield-state svg { width: 13px; }
.shield-state output { min-width: 32px; text-align: right; }
.shield-state.active { color: #a0f7ef; }

.help-panel {
  display: flex;
  flex-direction: column;
  width: min(368px, calc(100% - 26px));
  max-height: calc(100% - 24px);
  padding: 0;
  overflow: hidden;
  text-align: left;
}
.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 10px 12px;
  background: #223e33;
}
.help-header h2 { font-size: 19px; }
.help-content {
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px;
  scrollbar-color: #607b66 #172c28;
  color: #d6e1ce;
  font-size: 13px;
}
.help-content:focus-visible { outline-offset: -2px; }
.help-content section + section, .record { margin-top: 14px; }
.help-content h3 { margin: 0 0 5px; color: #eff5e3; font-size: 14px; }
.controls { margin-top: 8px; }
.controls > div, .record {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  border-top: 1px solid #416055;
}
.controls dd { text-align: right; }
.controls kbd { padding: 1px 4px; border: 1px solid #64806a; background: #2a473c; }
.intel { margin: 0; padding: 0; list-style: none; }
.intel li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid #416055;
}
.sprite { position: relative; display: grid; place-items: center; height: 32px; background: #2a473c; }
.sprite .turret { position: absolute; transform: translateY(-2px); }
.intel p { color: #b8c7b3; font-size: 12px; }
.intel-tag { color: var(--lime); font: 700 12px/1 var(--mono); }
.record output { font-size: 16px; }

@container (max-width: 332px) {
  .hud { padding-inline: 7px; gap: 6px; }
  .hud-score output { font-size: clamp(15px, 6cqi, 19px); letter-spacing: .04em; }
  .hud-lives { min-width: 0; }
  .hearts { gap: 2px; }
  .hearts i { width: 12px; height: 12px; }
  .hud .icon-button { width: 32px; }
  .overlay:not(.help-panel) { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .emblem img { animation: none; }
}