.tank-select-web {
  --tank-frame: polygon(
    8px 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    8px 100%,
    0 calc(100% - 8px),
    0 8px
  );
  box-sizing: border-box;
  color: var(--bc-text);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  margin: 0 auto;
  max-width: 1280px;
  overflow: hidden;
  padding: 34px 24px;
}
.tank-select-web button {
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 22%),
    var(--bc-panel);
  border: 2px solid var(--bc-line);
  clip-path: var(--tank-frame);
  color: var(--bc-text);
  cursor: pointer;
  font: 700 clamp(12px, 1.7vw, 18px) / 1 'Battle Cities UI', 'Arial Narrow',
    sans-serif;
  letter-spacing: 0.07em;
  position: relative;
  text-shadow: 0 2px 0 rgb(0 0 0 / 72%);
  text-transform: uppercase;
}
.tank-select-web button::before,
.tank-select-web__fuel::before {
  background: radial-gradient(
        circle,
        #c6b978 0 1px,
        #241d0d 1.5px 2.5px,
        transparent 3px
      )
      3px 3px/7px 7px no-repeat,
    radial-gradient(circle, #c6b978 0 1px, #241d0d 1.5px 2.5px, transparent 3px)
      calc(100% - 3px) 3px/7px 7px no-repeat,
    radial-gradient(circle, #c6b978 0 1px, #241d0d 1.5px 2.5px, transparent 3px)
      3px calc(100% - 3px) / 7px 7px no-repeat,
    radial-gradient(circle, #c6b978 0 1px, #241d0d 1.5px 2.5px, transparent 3px)
      calc(100% - 3px) calc(100% - 3px) / 7px 7px no-repeat;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.tank-select-web button:focus-visible {
  outline: none;
}
.tank-select-web__header {
  align-items: stretch;
  display: flex;
  gap: 12px;
  min-height: 64px;
}
.tank-select-web__header > div {
  align-items: center;
  background: linear-gradient(180deg, #ffc22f, #e89a06);
  border: 2px solid #ffdb78;
  box-shadow: inset 0 0 0 2px #9b6200, inset 0 4px 0 rgb(255 255 255 / 24%),
    0 0 14px rgb(255 179 15 / 24%);
  clip-path: var(--tank-frame);
  display: flex;
  padding: 0 24px;
}
.tank-select-web h1 {
  color: #171006;
  font: 700 clamp(24px, 3vw, 34px) / 1 'Battle Cities UI', 'Arial Narrow',
    sans-serif;
  letter-spacing: 0.08em;
  margin: 0;
}
.tank-select-web__back {
  margin-left: auto;
  min-width: 150px;
}
.tank-select-web__back i {
  border-bottom: 9px solid transparent;
  border-right: 14px solid currentColor;
  border-top: 9px solid transparent;
  display: inline-block;
  margin-right: 10px;
  vertical-align: -3px;
}
.tank-select-web__shell {
  background: linear-gradient(180deg, rgb(255 255 255 / 2.5%), transparent 16%),
    repeating-linear-gradient(
      133deg,
      transparent 0,
      transparent 4px,
      rgb(255 255 255 / 1%) 4px,
      rgb(255 255 255 / 1%) 5px
    ),
    #080d10;
  border: 2px solid var(--bc-line);
  box-shadow: inset 0 0 0 1px #080a0b, inset 0 0 28px rgb(0 0 0 / 72%),
    0 5px 18px rgb(0 0 0 / 60%);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  margin-top: 10px;
  min-height: 0;
  overflow: hidden;
  padding: 44px 20px 20px;
  position: relative;
}
.tank-select-web__shell::before {
  background: linear-gradient(
    90deg,
    transparent,
    var(--bc-command-dim) 8%,
    var(--bc-command) 50%,
    var(--bc-command-dim) 92%,
    transparent
  );
  box-shadow: 0 0 6px rgb(255 179 15 / 28%);
  content: '';
  height: 3px;
  left: 16px;
  position: absolute;
  right: 16px;
  top: 9px;
}
.tank-select-web__fuel {
  align-items: center;
  background: linear-gradient(180deg, rgb(255 255 255 / 3%), transparent 32%),
    #070b0e;
  border: 1px solid var(--bc-line);
  display: flex;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 20px;
  position: relative;
}
.tank-select-web__fuel > div {
  align-items: center;
  display: flex;
  gap: 12px;
}
.tank-select-web__fuel img {
  height: 46px;
  image-rendering: pixelated;
  object-fit: contain;
  width: 46px;
}
.tank-select-web__fuel span,
.tank-select-web__fuel b,
.tank-select-web__fuel small {
  display: block;
  font-family: 'Battle Cities UI', 'Arial Narrow', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tank-select-web__fuel span {
  color: var(--bc-muted);
  font-size: 13px;
}
.tank-select-web__fuel span strong {
  color: var(--bc-command);
  font-size: 25px;
  margin-left: 8px;
}
.tank-select-web__fuel b {
  color: var(--bc-text);
  font-size: 15px;
  text-align: right;
}
.tank-select-web__fuel small {
  color: var(--bc-muted);
  font-size: 10px;
  margin-bottom: 6px;
}
.tank-select-web__section-heading {
  align-items: end;
  border-bottom: 2px solid var(--bc-line);
  display: flex;
  justify-content: space-between;
  margin: 22px 0 14px;
  padding-bottom: 10px;
}
.tank-select-web__count {
  color: var(--bc-text);
  font: 700 23px/1 'Battle Cities UI', 'Arial Narrow', sans-serif;
  letter-spacing: 0.07em;
  margin: 0;
  text-transform: uppercase;
}
.tank-select-web__count strong {
  color: var(--bc-command);
  font-size: 14px;
  margin-left: 10px;
}
.tank-select-web__section-heading > span {
  color: var(--bc-muted);
  font: 700 11px/1 'Battle Cities UI', 'Arial Narrow', sans-serif;
  letter-spacing: 0.06em;
  text-align: right;
}
.tank-select-web__grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 6px 4px 2px;
  scrollbar-color: var(--bc-command-dim) var(--bc-panel);
}
@media (min-width: 900px) {
  .tank-select-web__grid {
    align-content: start;
    grid-auto-rows: 270px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .tank-select-web__card {
    grid-template-rows: auto auto auto 120px auto 38px;
    min-height: 0;
  }
  .tank-select-web__card-index {
    font-size: 11px;
  }
  .tank-select-web__grid h2 {
    font-size: 22px;
  }
  .tank-select-web__grid p {
    font-size: 12px;
  }
  .tank-select-web__tank-sprite,
  .tank-select-web__lock {
    height: 120px;
    width: 120px;
  }
  .tank-select-web__tank-sprite {
    background-size: 480px auto;
  }
  .tank-select-web__lock i {
    transform: scale(1.2);
  }
  .tank-select-web dt {
    font-size: 10px;
  }
  .tank-select-web dd {
    font-size: 12px;
  }
  .tank-select-web__card > strong {
    font-size: 13px;
  }
}
}
.tank-select-web__card {
  display: grid;
  grid-template-rows: auto auto auto 92px 1fr 40px;
  min-height: 270px;
  padding: 12px;
  text-align: center;
}
.tank-select-web__card-index {
  color: var(--bc-muted);
  font: 700 10px/1 'Battle Cities UI', 'Arial Narrow', sans-serif;
  justify-self: start;
  letter-spacing: 0.08em;
  position: relative;
  z-index: 3;
}
.tank-select-web__grid h2 {
  color: var(--bc-ready);
  font-size: 19px;
  margin: 9px 0 0;
  position: relative;
  z-index: 3;
}
.tank-select-web__grid p {
  color: var(--bc-muted);
  font: 700 10px/1.2 'Battle Cities UI', 'Arial Narrow', sans-serif;
  margin: 5px 0;
  position: relative;
  z-index: 3;
}
.tank-select-web__tank-sprite {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 368px auto;
  display: block;
  height: 92px;
  justify-self: center;
  width: 92px;
}
.tank-select-web__lock {
  align-items: center;
  display: flex;
  height: 92px;
  justify-content: center;
}
.tank-select-web__lock i {
  border: 3px solid var(--bc-muted);
  border-bottom: 0;
  height: 26px;
  margin-top: -18px;
  position: relative;
  width: 34px;
}
.tank-select-web__lock i::after {
  background: var(--bc-panel-raised);
  border: 2px solid var(--bc-muted);
  content: '';
  height: 28px;
  left: -5px;
  position: absolute;
  top: 20px;
  width: 40px;
}
.tank-select-web dl {
  border-top: 1px solid var(--bc-line);
  margin: 0;
  padding-top: 7px;
  text-align: left;
}
.tank-select-web dl div {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.tank-select-web dt {
  color: var(--bc-muted);
  font: 700 9px/1 'Battle Cities UI', 'Arial Narrow', sans-serif;
}
.tank-select-web dd {
  color: var(--bc-text);
  font: 700 10px/1 'Battle Cities UI', 'Arial Narrow', sans-serif;
  margin: 0;
}
.tank-select-web__card > strong {
  align-items: center;
  background: linear-gradient(90deg, #0b330f, #12680c 48%, #0b330f);
  border: 1px solid var(--bc-ready);
  color: #f3e6a6;
  display: flex;
  font-size: 12px;
  gap: 7px;
  justify-content: center;
  position: relative;
  z-index: 3;
}
.tank-select-web__card > strong img {
  height: 19px;
  image-rendering: pixelated;
  width: 19px;
}
.tank-select-web__card.is-active {
  background: linear-gradient(180deg, rgb(255 179 15 / 11%), transparent 38%),
    var(--bc-panel-raised);
  border-color: var(--bc-command);
}
.tank-select-web__card.is-active h2 {
  color: var(--bc-text);
}
.tank-select-web__card.is-selected:not(.is-active) {
  border-color: #ffcf45;
  box-shadow: inset 0 0 0 2px var(--bc-command-dim),
    0 0 14px rgb(255 179 15 / 38%);
  color: var(--bc-command);
}
.tank-select-web__card.is-selected:not(.is-active) h2 {
  color: var(--bc-command);
}
.tank-select-web__card.is-locked {
  background: linear-gradient(135deg, rgb(255 255 255 / 1.5%), transparent),
    #0a0e11;
}
.tank-select-web__card.is-locked h2,
.tank-select-web__card.is-locked p,
.tank-select-web__card.is-locked dd {
  color: var(--bc-muted);
}
.tank-select-web__card.is-locked > strong {
  background: var(--bc-panel-raised);
  border-color: var(--bc-line);
  color: var(--bc-muted);
}
.tank-select-web__card:disabled {
  cursor: not-allowed;
  filter: saturate(0.45) brightness(0.72);
  pointer-events: none;
}
.tank-select-web__actions {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding-top: 16px;
}
.tank-select-web__continue {
  background: linear-gradient(90deg, #0b330f, #12680c 48%, #0b330f) !important;
  border-color: var(--bc-ready) !important;
  height: 48px;
  max-width: 260px;
  width: min(100%, 260px);
}
.tank-select-web__continue.is-selected {
  background: linear-gradient(180deg, #ffc22f, #e89a06) !important;
  border-color: #ffdb78 !important;
  color: var(--bc-active-ink);
  text-shadow: none;
}
.tank-select-web__status {
  color: var(--bc-command);
  font: 700 12px/1.3 'Battle Cities UI', 'Arial Narrow', sans-serif;
  min-height: 16px;
  text-align: center;
}
@media (hover: hover) {
  .tank-select-web__back:not(.is-selected):hover,
  .tank-select-web__card:not(.is-selected):not(:disabled):hover {
    border-color: var(--bc-command);
    box-shadow: inset 0 0 0 2px #040607, 0 0 12px rgb(255 179 15 / 28%);
    color: var(--bc-command);
  }
  .tank-select-web__continue:not(.is-selected):hover {
    background: linear-gradient(180deg, #18810f, #084c06) !important;
    border-color: #a0ff38 !important;
  }
}
.tank-select-web__back.is-selected {
  background: linear-gradient(180deg, #5a1a13, #2c0c09);
  border-color: var(--bc-danger);
  box-shadow: inset 0 0 0 2px #1b0705, 0 0 13px rgb(240 68 50 / 30%);
}
.tank-select-web button:active {
  filter: brightness(0.82);
}
@media (max-width: 899px) {
  .tank-select-web {
    padding: 6px 5px;
  }
  .tank-select-web__header {
    gap: 5px;
    min-height: 42px;
  }
  .tank-select-web__header > div {
    padding: 0 10px;
  }
  .tank-select-web h1 {
    font-size: 19px;
  }
  .tank-select-web__back {
    font-size: 10px;
    min-width: 92px;
  }
  .tank-select-web__back i {
    border-bottom-width: 6px;
    border-right-width: 10px;
    border-top-width: 6px;
    margin-right: 6px;
    vertical-align: -2px;
  }
  .tank-select-web__shell {
    margin-top: 5px;
    padding: 28px 8px 12px;
  }
  .tank-select-web__shell::before {
    left: 8px;
    right: 8px;
    top: 6px;
  }
  .tank-select-web__fuel {
    min-height: 58px;
    padding: 0 9px;
  }
  .tank-select-web__fuel > div {
    gap: 5px;
  }
  .tank-select-web__fuel img {
    height: 28px;
    width: 28px;
  }
  .tank-select-web__fuel span {
    font-size: 8px;
  }
  .tank-select-web__fuel span strong {
    font-size: 16px;
    margin-left: 4px;
  }
  .tank-select-web__fuel b {
    font-size: 9px;
    max-width: 144px;
  }
  .tank-select-web__fuel small {
    font-size: 7px;
    margin-bottom: 3px;
  }
  .tank-select-web__section-heading {
    margin: 14px 0 9px;
    padding-bottom: 7px;
  }
  .tank-select-web__count {
    font-size: 16px;
  }
  .tank-select-web__count strong {
    display: block;
    font-size: 9px;
    margin: 4px 0 0;
  }
  .tank-select-web__section-heading > span {
    display: none;
  }
  .tank-select-web__grid {
    gap: 7px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-right: 4px;
  }
  .tank-select-web__card {
    grid-template-rows: auto auto auto 54px 1fr 28px;
    min-height: 174px;
    padding: 5px;
  }
  .tank-select-web__card-index {
    font-size: 8px;
  }
  .tank-select-web__grid h2 {
    font-size: 11px;
    margin-top: 4px;
  }
  .tank-select-web__grid p {
    font-size: 7px;
    margin: 2px 0;
  }
  .tank-select-web__tank-sprite {
    background-size: 216px auto;
    height: 54px;
    width: 54px;
  }
  .tank-select-web__lock {
    height: 54px;
  }
  .tank-select-web__lock i {
    transform: scale(0.58);
  }
  .tank-select-web dt {
    font-size: 6px;
  }
  .tank-select-web dd {
    font-size: 7px;
  }
  .tank-select-web__card > strong {
    font-size: 8px;
  }
  .tank-select-web__card > strong img {
    height: 12px;
    width: 12px;
  }
  .tank-select-web__actions {
    padding-top: 12px;
  }
  .tank-select-web__continue {
    height: 44px;
    max-width: 230px;
    width: min(100%, 230px);
  }
  .tank-select-web__status {
    font-size: 10px;
  }
}