:root {
  color-scheme: dark;
  --bg: #10130f;
  --panel: #1c211d;
  --panel-strong: #262b25;
  --line: #3c443b;
  --text: #f4f0e5;
  --muted: #b7b29f;
  --green: #6fd08c;
  --amber: #e8b84a;
  --red: #ff6b5f;
  --teal: #56c6b2;
  --steel: #b9c1c7;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  min-height: 100%;
  overflow: hidden;
}

body {
  align-items: center;
  background:
    radial-gradient(circle at 50% 18%, rgb(91 202 95 / 15%), transparent 32%),
    radial-gradient(circle at 50% 100%, rgb(232 184 74 / 11%), transparent 34%),
    #10130f;
  color: var(--text);
  display: flex;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overscroll-behavior: none;
  padding: 0;
  touch-action: manipulation;
  user-select: none;
}

button {
  color: inherit;
  font: inherit;
}

.game-shell {
  align-items: center;
  display: flex;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  justify-content: center;
  max-width: none;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    0
    env(safe-area-inset-left);
  width: 100vw;
}

@media (display-mode: fullscreen), (display-mode: standalone) {
  .game-shell {
    width: 100vw;
  }
}

.title-sign {
  display: block;
  filter:
    drop-shadow(0 4px 7px rgb(0 0 0 / 72%))
    drop-shadow(0 0 8px rgb(115 255 154 / 16%));
  height: clamp(50px, 7.8vh, 64px);
  left: 50%;
  object-fit: contain;
  pointer-events: none;
  position: absolute;
  top: calc(var(--frame-y) * -1);
  transform: translateX(-50%);
  width: min(76vw, 320px);
  z-index: 5;
}

.topbar {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  left: auto;
  position: absolute;
  right: calc(var(--frame-x) * -0.5);
  top: 6.8%;
  z-index: 3;
}

.topbar > div {
  background: rgb(9 15 12 / 64%);
  border: 1px solid rgb(99 114 91 / 52%);
  border-radius: 6px;
  padding: 5px 7px;
}

.topbar > .topbar-title {
  background: transparent;
  border: 0;
  border-radius: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.eyebrow {
  color: var(--amber);
  font-size: 11px;
  font-weight: 800;
  margin: 0 0 2px;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 22px;
  line-height: 1.1;
  text-shadow: 0 2px 4px rgb(0 0 0 / 80%);
}

h2 {
  font-size: 26px;
  margin-bottom: 10px;
}

.icon-button,
.primary-button,
.secondary-button,
.action-panel button {
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.icon-button {
  background: rgb(25 31 27 / 82%);
  min-height: 34px;
  min-width: 82px;
  padding: 7px 9px;
}

.sound-button {
  align-items: center;
  background:
    radial-gradient(circle at 38% 30%, rgb(126 255 146 / 26%), transparent 38%),
    rgb(10 16 12 / 84%);
  border-color: rgb(111 208 140 / 58%);
  border-radius: 50%;
  box-shadow:
    0 3px 8px rgb(0 0 0 / 46%),
    inset 0 0 0 1px rgb(255 255 255 / 9%);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  width: 40px;
}

.sound-icon {
  display: none;
  fill: none;
  height: 22px;
  stroke: var(--amber);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 22px;
}

.sound-button[aria-pressed="true"] .sound-icon-on,
.sound-button[aria-pressed="false"] .sound-icon-off {
  display: block;
}

.sound-button[aria-pressed="false"] {
  border-color: rgb(255 107 95 / 58%);
}

.sound-button[aria-pressed="false"] .sound-icon {
  stroke: #ff8b7f;
}

.base-health-panel {
  align-items: center;
  background-image: url("./assets/game/base-health-panel.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  height: clamp(28px, 4.2%, 36px);
  justify-content: center;
  left: 14%;
  pointer-events: none;
  position: absolute;
  right: 14%;
  top: 8.2%;
  z-index: 4;
}

.base-health-track {
  border-radius: 999px;
  height: 10%;
  left: 17.4%;
  overflow: hidden;
  position: absolute;
  right: 17.4%;
  top: 45%;
}

.base-health-fill {
  background:
    linear-gradient(90deg, #52ff6d, #baff64 52%, #ffbc45);
  box-shadow:
    0 0 8px rgb(100 255 112 / 66%),
    inset 0 0 7px rgb(255 255 255 / 26%);
  border-radius: inherit;
  height: 100%;
  transform: scaleX(1);
  transform-origin: left center;
  width: 100%;
}

.base-health-text {
  color: #ffe7a3;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 14px;
  min-height: 14px;
  position: relative;
  text-shadow:
    0 1px 2px rgb(0 0 0 / 95%),
    0 0 7px rgb(255 195 72 / 48%);
  top: -1px;
  z-index: 1;
}

.status-panel {
  align-items: center;
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: clamp(34px, 5.2%, 46px);
  left: 9.5%;
  padding: 0;
  pointer-events: none;
  position: absolute;
  right: 9.5%;
  top: 12.6%;
  z-index: 3;
}

.status-counter {
  align-items: center;
  background:
    linear-gradient(90deg, rgb(7 16 12 / 72%), rgb(77 87 70 / 48%));
  border: 1px solid rgb(161 255 151 / 18%);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 2px rgb(255 255 255 / 10%),
    inset 0 -3px 8px rgb(0 0 0 / 42%),
    0 0 10px rgb(70 255 113 / 12%);
  display: flex;
  height: 100%;
  justify-content: flex-end;
  min-width: 0;
  overflow: visible;
  padding: 0 10px 0 30px;
  position: relative;
}

.status-icon {
  filter:
    drop-shadow(0 1px 2px rgb(0 0 0 / 82%))
    drop-shadow(0 0 5px rgb(99 255 105 / 28%));
  height: clamp(34px, 125%, 48px);
  left: -10px;
  object-fit: contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(34px, 125%, 48px);
}

.status-value {
  color: #ffe7a3;
  display: block;
  flex: 1 1 auto;
  font-size: clamp(13px, 3.4vw, 18px);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-shadow:
    0 1px 2px rgb(0 0 0 / 95%),
    0 0 7px rgb(255 195 72 / 42%),
    0 0 12px rgb(96 255 132 / 16%);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battlefield-stage {
  --frame-x: 20px;
  --frame-y: 36px;
  --frame-x2: 40px;
  --frame-y2: 72px;
  --command-panel-top: 85.5%;
  --stage-target-height: calc(100dvh - env(safe-area-inset-top));
  height: calc(var(--stage-target-height) - var(--frame-y2));
  margin-inline: auto;
  max-width: none;
  min-width: 0;
  position: relative;
  width: calc(100vw - var(--frame-x2) - env(safe-area-inset-left) - env(safe-area-inset-right));
}

#gameCanvas {
  background: #171b18;
  border: 0;
  border-radius: 8px;
  box-shadow:
    0 12px 36px rgb(0 0 0 / 38%),
    0 0 26px rgb(104 220 114 / 12%);
  display: block;
  height: 100%;
  width: 100%;
}

.frame-overlay {
  height: calc(100% + var(--frame-y2));
  left: calc(var(--frame-x) * -1);
  pointer-events: none;
  position: absolute;
  top: calc(var(--frame-y) * -1);
  width: calc(100% + var(--frame-x2));
  z-index: 1;
}

.action-panel {
  align-content: start;
  bottom: auto;
  display: grid;
  gap: 2px;
  grid-auto-rows: 52px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: clamp(54px, 8.4%, 62px);
  left: 12%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 5px;
  position: absolute;
  right: 12%;
  scroll-padding-block: 3px;
  scrollbar-color: rgb(115 255 154 / 58%) rgb(9 12 9 / 40%);
  scrollbar-width: thin;
  touch-action: pan-y;
  top: var(--command-panel-top);
  z-index: 3;
}

.action-panel::-webkit-scrollbar {
  width: 5px;
}

.action-panel::-webkit-scrollbar-track {
  background: rgb(9 12 9 / 42%);
  border-radius: 999px;
}

.action-panel::-webkit-scrollbar-thumb {
  background: rgb(115 255 154 / 58%);
  border-radius: 999px;
}

.action-panel button {
  --button-image: none;
  background: rgb(12 17 13 / 92%);
  border: 0;
  border-radius: 7px;
  box-shadow:
    0 0 6px rgb(0 0 0 / 34%),
    inset 0 0 0 1px rgb(214 221 194 / 24%);
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: center;
}

.action-panel button::before {
  background-image: var(--button-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  inset: 0;
  opacity: 0.96;
  position: absolute;
}

.action-panel button::after {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 40%),
    linear-gradient(180deg, transparent 58%, rgb(4 7 5 / 32%));
  border-radius: 7px;
  content: "";
  inset: 0;
  position: absolute;
}

.action-panel button[data-action="addInfantry"] {
  --button-image: url("./assets/game/buttons/infantry.png");
}

.action-panel button[data-action="addTank"] {
  --button-image: url("./assets/game/buttons/tank.png");
}

.action-panel button[data-action="addMechanic"] {
  --button-image: url("./assets/game/buttons/mechanic.png");
}

.action-panel button[data-action="addAircraft"] {
  --button-image: url("./assets/game/buttons/aircraft.png");
}

.action-panel button[data-action="upgradeWeapon"] {
  --button-image: url("./assets/game/buttons/weapon.png");
}

.action-panel button[data-action="upgradeMoveSpeed"] {
  --button-image: url("./assets/game/buttons/spawn-rate.png");
}

.action-panel button[data-action="upgradeBaseHealth"] {
  --button-image: url("./assets/game/buttons/base-health.png");
}

.action-panel button[data-action="drawSupply"] {
  --button-image: url("./assets/game/buttons/supply.png");
}

.action-panel button small {
  display: block;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 1;
}

.action-panel button small {
  color: var(--amber);
  font-size: 11.2px;
  font-weight: 800;
  line-height: 14px;
  margin: 0;
  max-width: calc(100% - 2px);
  overflow: hidden;
  padding: 0;
  text-shadow:
    0 1px 2px rgb(0 0 0 / 98%),
    0 0 4px rgb(0 0 0 / 80%);
  text-overflow: ellipsis;
  bottom: 2px;
  white-space: nowrap;
}

.action-panel button:disabled {
  color: #777c72;
  cursor: not-allowed;
  opacity: 0.62;
}

.action-panel button:focus-visible,
.icon-button:focus-visible,
.primary-button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.combat-log {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.message-stack {
  align-items: flex-start;
  bottom: 22.6%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: flex-end;
  left: 13%;
  min-height: 94px;
  pointer-events: none;
  position: absolute;
  right: 13%;
  z-index: 3;
}

.message-stack p {
  color: #73ff9a;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-shadow:
    0 1px 2px rgb(0 0 0 / 90%),
    0 0 7px rgb(115 255 154 / 28%);
}

.overlay {
  align-items: center;
  background: rgb(0 0 0 / 72%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 10;
}

.overlay.hidden {
  display: none;
}

.dialog {
  background: #20261f;
  border: 1px solid #4a5546;
  border-radius: 8px;
  box-shadow: 0 20px 58px rgb(0 0 0 / 42%);
  max-width: 390px;
  padding: 22px;
  width: min(100%, 390px);
}

.dialog p {
  color: var(--steel);
  line-height: 1.5;
}

.dialog ul {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 14px 0 18px;
  padding-left: 18px;
}

.primary-button {
  background: var(--amber);
  color: #17130a;
  font-weight: 900;
  min-height: 48px;
  width: 100%;
}

.secondary-button {
  background:
    linear-gradient(180deg, rgb(111 208 140 / 24%), rgb(12 17 13 / 92%));
  border-color: rgb(111 208 140 / 54%);
  color: #d9ffe1;
  font-weight: 900;
  min-height: 48px;
  width: 100%;
}

.secondary-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.result-actions {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

@media (max-width: 380px) {
  body {
    padding-left: 8px;
    padding-right: 8px;
  }

  .game-shell {
    width: 100%;
  }

  .battlefield-stage {
    --frame-x: 16px;
    --frame-y: 30px;
    --frame-x2: 32px;
    --frame-y2: 60px;
  }

  h1 {
    font-size: 20px;
  }

  .topbar {
    left: auto;
    right: calc(var(--frame-x) * -0.5);
    top: 6.8%;
  }

  .status-panel {
    gap: 5px;
    left: 8.5%;
    right: 8.5%;
    top: 12.6%;
  }

  .base-health-panel {
    left: 13%;
    right: 13%;
    top: 8.2%;
  }

  .status-counter {
    padding: 0 7px 0 25px;
  }

  .status-icon {
    left: -8px;
  }

  .status-value {
    font-size: clamp(11px, 3.1vw, 14px);
  }

  .action-panel {
    gap: 2px;
    grid-auto-rows: 50px;
    left: 11.5%;
    padding: 2px 5px;
    right: 11.5%;
  }

  .action-panel button {
    padding-inline: 1px;
  }

  .action-panel button span {
    font-size: 7px;
  }

  .action-panel button small {
    font-size: 12px;
    line-height: 14px;
  }

  .message-stack {
    bottom: 22.2%;
    left: 12%;
    right: 12%;
  }

  .message-stack p {
    font-size: 11px;
  }
}