* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  overflow: hidden;
  background: #111111;
  color: #111111;
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
}

.app-shell {
  width: 100vw;
  height: 100vh;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.app-shell::before,
.app-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 30px;
  background: #111111;
  pointer-events: none;
}

.app-shell::before {
  left: 0;
}

.app-shell::after {
  right: 0;
}

#game {
  position: relative;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  user-select: none;
  touch-action: none;
}

.tank-label text {
  fill: rgba(150, 150, 150, 0.45);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-anchor: middle;
  dominant-baseline: middle;
}

.tank-label.is-helper text {
  letter-spacing: 0.08em;
}

.drag-target {
  cursor: grab;
}

.drag-target.is-dragging {
  cursor: grabbing;
}

.spawn-menu {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 54px;
}

.restart-menu {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  z-index: 3;
  width: 54px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border-left: 0;
  box-shadow: none;
}

.spawn-menu__toggle,
.spawn-menu__section,
.spawn-menu__item,
.spawn-menu__hazard,
.spawner-mode-button,
.spawner-spawn-button,
.spawner-arrow,
.spawner-color-swatch,
.restart-menu__button,
.spawn-menu__select {
  font: inherit;
}

.spawn-menu__toggle,
.restart-menu__button {
  min-width: 0;
  width: 50px;
  height: 50px;
  padding: 8px 9px;
  border: 2px solid rgba(17, 17, 17, 0.88);
  border-radius: 10px;
  background: rgba(247, 244, 239, 0.94);
  color: #171717;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.restart-menu__button {
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 0;
}

.spawn-menu__toggle {
  min-width: 112px;
  padding: 10px 14px;
  font-size: 13px;
}

.spawn-menu__panel {
  width: min(198px, calc(100vw - 36px));
  padding: 8px;
  border: 2px solid rgba(17, 17, 17, 0.72);
  border-radius: 16px;
  background: rgba(247, 244, 239, 0.88);
  backdrop-filter: blur(8px);
  color: #171717;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.spawn-menu__section,
.spawn-menu__item {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.spawn-menu__section {
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spawn-menu__section:hover,
.spawn-menu__section[aria-expanded="true"] {
  background: rgba(17, 17, 17, 0.08);
}

.spawn-menu__items {
  padding: 4px 0 8px;
}

.spawn-menu__field {
  display: block;
  padding: 6px 10px 10px;
}

.spawn-menu__field span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spawn-menu__select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid rgba(17, 17, 17, 0.72);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #171717;
}

.spawn-menu__item {
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
}

.spawn-menu__item:hover,
.restart-menu__button:hover {
  background: rgba(17, 17, 17, 0.08);
}

.spawn-menu__hazard {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 3px solid rgba(17, 17, 17, 0.88);
  border-radius: 10px;
  background: rgba(247, 244, 239, 0.94);
  color: #111111;
  font-size: 0;
  line-height: 1;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.58), 0 8px 20px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.spawn-menu__hazard::before {
  content: none;
}

.spawn-menu__hazard:hover {
  background: rgba(255, 255, 255, 0.96);
  transform: translateY(-1px);
}

#restart-button {
  border: 3px solid #7c1919;
  border-radius: 10px;
  background: #f3bbbb;
  color: #7c1919;
  font-size: 0;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.48), 0 8px 20px rgba(0, 0, 0, 0.28);
}

#restart-button:hover {
  background: #efaaaa;
}

.pause-button {
  border-color: #17489a;
  background: #9ec8ff;
  color: #17489a;
}

.pause-button:hover {
  background: #8dbdff;
}

.pause-button[aria-pressed="true"] {
  border-color: #14712c;
  background: #9ee7a8;
  color: #14712c;
}

.pause-button[aria-pressed="true"]:hover {
  background: #8bdd98;
}

.pause-icon {
  fill: currentColor;
  stroke: #111111;
  stroke-width: 3;
  stroke-linejoin: round;
}

.pause-button [data-pause-icon="play"] {
  display: none;
}

.pause-button[aria-pressed="true"] [data-pause-icon="pause"] {
  display: none;
}

.pause-button[aria-pressed="true"] [data-pause-icon="play"] {
  display: block;
}

.tool-icon {
  width: 42px;
  height: 42px;
  display: block;
}

.tool-icon [stroke="#111111"] {
  stroke-width: 3.4;
}

.tool-icon [stroke="#7c1919"] {
  stroke-width: 5;
}

.hatch-icon__panel {
  fill: #111111;
  stroke: #111111;
  stroke-width: 4;
  stroke-linejoin: round;
}

.hatch-icon__split {
  display: none;
  stroke: #111111;
  stroke-width: 4;
  stroke-linecap: round;
}

#hatch-button[aria-pressed="true"] {
  background: #d9d8d2;
  border-color: rgba(17, 17, 17, 0.78);
}

#hatch-button:hover,
#hatch-button[aria-pressed="true"]:hover {
  background: #d9d8d2;
}

#hatch-button[aria-pressed="true"] .hatch-icon__panel {
  fill: #d9d8d2;
  stroke: #111111;
}

#hatch-button[aria-pressed="true"] .hatch-icon__split {
  display: block;
  stroke: #111111;
}

#toxic-gas-tool-button[aria-pressed="true"] {
  background: rgba(54, 214, 96, 0.54);
  border-color: rgba(20, 94, 42, 0.72);
}

#buff-tool-button[aria-pressed="true"] {
  background: rgba(255, 122, 200, 0.54);
  border-color: rgba(209, 42, 145, 0.72);
}

#crusher-tool-button[aria-pressed="true"] {
  background: rgba(255, 207, 51, 0.54);
  border-color: rgba(135, 92, 0, 0.72);
}

#flame-tool-button[aria-pressed="true"] {
  background: rgba(255, 153, 40, 0.54);
  border-color: rgba(96, 43, 0, 0.72);
}

#lightning-tool-button[aria-pressed="true"] {
  background: rgba(177, 91, 255, 0.54);
  border-color: rgba(76, 18, 128, 0.72);
}

#snow-tool-button[aria-pressed="true"] {
  background: rgba(134, 219, 255, 0.54);
  border-color: rgba(26, 103, 145, 0.72);
}

#toxic-gas-tool-button[aria-pressed="true"]:hover {
  background: rgba(54, 214, 96, 0.64);
}

#buff-tool-button[aria-pressed="true"]:hover {
  background: rgba(255, 122, 200, 0.64);
}

#crusher-tool-button[aria-pressed="true"]:hover {
  background: rgba(255, 207, 51, 0.64);
}

#flame-tool-button[aria-pressed="true"]:hover {
  background: rgba(255, 153, 40, 0.64);
}

#lightning-tool-button[aria-pressed="true"]:hover {
  background: rgba(177, 91, 255, 0.64);
}

#snow-tool-button[aria-pressed="true"]:hover {
  background: rgba(134, 219, 255, 0.64);
}

.spawn-menu__item:disabled {
  opacity: 0.45;
  cursor: default;
}

.spawn-menu__empty {
  padding: 8px 12px;
  color: rgba(23, 23, 23, 0.64);
  font-size: 13px;
}

.spawner-mode-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 3px solid rgba(17, 17, 17, 0.88);
  border-radius: 10px;
  background: rgba(247, 244, 239, 0.94);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.58), 0 8px 20px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.spawner-mode-button:hover {
  background: rgba(255, 255, 255, 0.96);
  transform: translateY(-1px);
}

.spawner-mode-button[aria-pressed="true"] {
  background: #d9d8d2;
  border-color: rgba(17, 17, 17, 0.78);
}

.spawner-mode-icon {
  width: 42px;
  height: 42px;
  display: block;
}

.spawner-panel {
  position: absolute;
  top: 50%;
  left: clamp(70px, 8.8vw, 118px);
  transform: translateY(-50%);
  z-index: 3;
  width: min(238px, calc(100vw - 158px));
  min-height: 166px;
  padding: 8px 10px 10px;
  border: 3px solid rgba(17, 17, 17, 0.82);
  border-radius: 12px;
  background: rgba(247, 244, 239, 0.91);
  color: #111111;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

.spawner-view {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.spawner-view[hidden],
.spawner-panel[hidden] {
  display: none;
}

.spawner-preview {
  width: 100%;
  max-width: 184px;
  height: 84px;
  overflow: visible;
}

.spawner-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 30px);
  gap: 4px;
  justify-content: center;
}

.spawner-color-swatch {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 3px solid rgba(17, 17, 17, 0.74);
  border-radius: 8px;
  background: var(--swatch-fill, #ffffff);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.46);
  cursor: pointer;
}

.spawner-color-swatch[aria-pressed="true"] {
  border-color: #30343a;
  box-shadow: 0 0 0 3px rgba(48, 52, 58, 0.24), inset 0 3px 0 rgba(255, 255, 255, 0.46);
}

.spawner-color-swatch[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 11px;
  border: 3px solid #30343a;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
}

.spawner-item-stage,
.spawner-personality-stage {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  width: 100%;
  gap: 5px;
}

.spawner-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 3px solid rgba(17, 17, 17, 0.76);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: #30343a;
  cursor: pointer;
}

.spawner-arrow svg {
  width: 21px;
  height: 21px;
}

.spawner-arrow:hover {
  background: rgba(255, 255, 255, 0.96);
}

.spawner-item-name {
  min-height: 20px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
}

.spawner-spawn-button {
  display: block;
  width: min(168px, 82%);
  height: 34px;
  margin: 7px auto 0;
  border: 3px solid #30343a;
  border-radius: 8px;
  background: #3b4046;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.25), 0 8px 18px rgba(0, 0, 0, 0.22);
}

.spawner-spawn-button:hover {
  background: #4a5057;
}

.spawner-spawn-button:disabled {
  opacity: 0.48;
  cursor: default;
}

.spawner-limit-note {
  margin-top: 4px;
  color: rgba(17, 17, 17, 0.62);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 700px) {
  .spawner-panel {
    left: 68px;
    width: min(222px, calc(100vw - 128px));
    padding: 8px;
  }

  .spawner-preview {
    max-width: 176px;
    height: 80px;
  }

}

.screen-wipe {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #bdbdb8;
  transform: translateY(0%);
  pointer-events: none;
  z-index: 4;
  border-top: 10px solid #111111;
  border-bottom: 10px solid #111111;
}

.screen-wipe::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
  background: #111111;
}

.screen-wipe::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 82px);
  width: 112px;
  height: 22px;
  transform: translateX(-50%);
  border: 5px solid #111111;
  border-radius: 2px;
  background: #ededeb;
}

.screen-wipe__title {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  color: rgba(17, 17, 17, 0.52);
  font-size: clamp(46px, 8vw, 92px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 0.9;
  text-align: center;
}

.screen-wipe__latch {
  display: none;
}

.screen-wipe__latch span {
  display: none;
}