/*
 * Tema de 2016 do tankionline.com ("Tanki Newest", Alternativa), recuperado do Wayback
 * Machine e reduzido ao que a página de download usa. Medidas, cores e coordenadas de
 * sprite são as do original — a procedência de cada uma está em design.md.
 * Os prefixos -moz/-webkit/filter e os gradientes base64 de IE do original caíram fora.
 */

/*
 * PT Sans servida daqui mesmo. O tema original a puxava do Google Fonts; num servidor de
 * fã isso entregaria o IP de cada visitante a terceiro à toa. Licença SIL Open Font —
 * ver design.md. O unicode-range faz o navegador baixar só o alfabeto que a página usa:
 * quem lê em português ou inglês nunca puxa o cirílico, e vice-versa.
 */
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pt-sans-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-sans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pt-sans-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------------------------------------------------------------- base ---- */

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: #0e0904;
  color: #fff;
  font-size: 1em;
  line-height: 1;
  font-family: "PT Sans", "Myriad Pro", Myriad, Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
}

a {
  color: #fff;
}

img {
  vertical-align: middle;
  border: 0;
}

ul,
ol,
p {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3 {
  font-weight: normal;
}

:focus {
  outline: none;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

/*
 * O tema de 2016 grudava o rodapé com margin-bottom:-94px + um buffer de 93px. Isso supõe
 * rodapé de altura fixa e, quando o texto quebra em duas linhas no celular, o rodapé sobe
 * por cima do conteúdo. Aqui o rodapé está DENTRO do wrapper, o que resolve as duas coisas
 * de uma vez: nada se sobrepõe, e a imagem de fundo vai até o fim da página — solta lá
 * fora, ela terminava na borda do wrapper e deixava uma faixa de terra cortada atrás do
 * rodapé.
 *
 * --parallax é escrito pelo site.js a cada rolagem: empurra o fundo para baixo na metade
 * do que a página subiu, então na tela ele anda a meia velocidade. É o mesmo efeito do
 * tnkParallax.js de 2016 (_speed: 2), sem a camada fixa e o setInterval de altura que
 * aquele script precisava. Sem JavaScript, --parallax fica em 0 e o fundo só acompanha a
 * página, como qualquer background.
 */
.page-wrapper {
  position: relative;
  min-height: 100%;
  height: auto;
  padding-bottom: 20px;
  background-image: url("../images/body.jpg");
  background-repeat: no-repeat;
  background-position: center var(--parallax, 0px);
}

.container {
  width: 1010px;
  margin: 0 auto;
  position: relative;
}

/* Folha de sprites de 665x235 do tema (ícones do menu, sociais, setas). */
.sprite {
  background: url("../images/sprite.png") no-repeat;
}

/* ------------------------------------------------------------ top-line ---- */

.top-line {
  width: 100%;
  height: 50px;
  background: url("../images/top_line.jpg") repeat-x center top #252525;
  box-shadow: 0 0 12px 12px rgba(0, 0, 0, 0.25);
}

.top-line__nav {
  float: left;
}

.top-line__nav .elems {
  font-size: 1.25em;
  margin-left: -40px;
  list-style: none;
}

.top-line__nav .elems .elem {
  float: left;
  margin-left: 40px;
}

.top-line__nav .elems .elem a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 12px 0 6px 28px;
  position: relative;
}

.top-line__nav .elems .elem a.active,
.top-line__nav .elems .elem a:hover {
  color: #87d704;
}

.top-line__nav .elems .elem a .sprite {
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
}

.sprite_top1 { background-position: -360px 0; }
.sprite_top2 { background-position: -360px -30px; }
.sprite_top5 { background-position: -357px -119px; }
.sprite_top7 { background-position: -358px -181px; }

.top-line__nav .elems .elem a.active .sprite_top1,
.top-line__nav .elems .elem a:hover .sprite_top1 { background-position: -390px 0; }
.top-line__nav .elems .elem a.active .sprite_top2,
.top-line__nav .elems .elem a:hover .sprite_top2 { background-position: -390px -30px; }
.top-line__nav .elems .elem a.active .sprite_top5,
.top-line__nav .elems .elem a:hover .sprite_top5 { background-position: -388px -119px; }
.top-line__nav .elems .elem a.active .sprite_top7,
.top-line__nav .elems .elem a:hover .sprite_top7 { background-position: -388px -181px; }

.top-line__nav .elems .elem a .sprite_top1 { top: 10px; left: 0; }
.top-line__nav .elems .elem a .sprite_top2 { top: 13px; left: -2px; }
.top-line__nav .elems .elem a .sprite_top5 { top: 11px; left: -4px; }
.top-line__nav .elems .elem a .sprite_top7 { top: 11px; left: -4px; }

/*
 * Em 2016 isto era um custom-select que abria a lista de sete idiomas. Com três, o menu
 * suspenso só atrapalha (ainda mais no toque): as três bandeiras ficam à mostra e trocar
 * de língua é um clique. As bandeiras são as do flags.png do próprio tema.
 */
.top-line__langs {
  position: absolute;
  right: 0;
  top: 14px;
  z-index: 100;
  display: flex;
  gap: 8px;
}

.top-line__lang {
  display: block;
  width: 24px;
  height: 16px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 150ms;
}

.top-line__lang:hover {
  opacity: 1;
}

.top-line__lang.active {
  opacity: 1;
  border-color: rgba(170, 170, 170, 0.75);
}

.top-line__lang .flag {
  background: url("../images/flags.png") no-repeat;
  display: block;
  width: 24px;
  height: 16px;
}

.top-line__lang .flag_ru { background-position: 0 0; }
.top-line__lang .flag_en { background-position: -24px 0; }
.top-line__lang .flag_pt { background-position: -96px 0; }

/* --------------------------------------------------------- main-header ---- */

.main-header {
  width: 100%;
  height: 255px;
}

/*
 * No tema de 2016 este slot era uma imagem só: brasão em cima, letreiro "TANKI ONLINE"
 * embaixo, 187x230. Aqui entra só o ícone do nosso instalador, a 187px. O arquivo é
 * reamostrado para 256px, então na tela ele reduz em vez de esticar.
 */
.main-header__logo {
  display: block;
  width: 187px;
  margin: 34px auto 0;
  text-align: center;
}

.main-header__badge {
  display: block;
  width: 187px;
  height: 187px;
  margin: 0 auto;
  background: url("../images/logo.png") no-repeat center center;
  background-size: contain;
}

/*
 * A coluna da direita do cabeçalho de 2016. Lá o slot de cima era o botão JOGAR
 * (338x88) e o de baixo, o de baixar; aqui só existe o de baixar, e ele fica em cima.
 */
.main-header__panel {
  width: 338px;
  position: absolute;
  right: -4px;
  top: 1px;
}

/*
 * O botão é a arte de 338x156 do tema: dois quadros de 78px empilhados, o de cima apagado
 * e o de baixo aceso. Em vez das medidas fixas do original, largura fluida com proporção
 * travada e background-size 100% — assim a mesma regra serve da tela larga ao celular, e
 * `0 100%` continua caindo exatamente no quadro de baixo.
 */
.main-header__download-button {
  display: block;
  position: relative;
  width: 100%;
  max-width: 338px;
  aspect-ratio: 338 / 78;
}

.download {
  display: block;
  position: absolute;
  inset: 0;
  background: url("../images/sprite_download.png") no-repeat 0 0;
  background-size: 100% auto;
}

/* Russo tem arte própria: "СКАЧАТЬ", mesma geometria. */
html[lang="ru"] .download {
  background-image: url("../images/sprite_download_ru.png");
}

/*
 * O brilho é a mesma arte deslocada, sobreposta e pulsada por opacidade: 700ms para
 * cada lado, como o jQuery.animate do tema. Passar o mouse trava o brilho aceso.
 */
.main-header__download-button .download.db-active {
  background-position: 0 100%;
  opacity: 0;
  animation: download-blink 1400ms ease-in-out infinite;
}

.main-header__download-button:hover .download.db-active {
  animation: none;
  opacity: 1;
  transition: opacity 200ms;
}

@keyframes download-blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .main-header__download-button .download.db-active {
    animation: none;
  }
}

.main-header__platform {
  width: 331px;
  margin: 10px 0 0 1px;
  font-size: 1.125em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.main-header__platform .title {
  float: left;
}

.main-header__platform .digits {
  float: right;
}

.main-header__others {
  width: 331px;
  margin: 14px 0 0 1px;
  font-size: 0.875em;
  color: #ccc;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.main-header__others a {
  color: #eee;
  margin-left: 6px;
}

.main-header__others a:hover {
  color: #87d704;
}

.main-header__online {
  width: 331px;
  margin: 14px 0 0 1px;
  font-size: 1.125em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.main-header__online .title {
  float: left;
}

.main-header__online .digits {
  float: right;
}

/*
 * Em 2016 este estado APAGAVA a coluna inteira, botão de baixar junto. Aqui não: numa
 * página de download, servidor fora do ar é recado, não motivo para esconder o arquivo.
 */
.main-header__status {
  width: 331px;
  margin: 8px 0 0 1px;
  font-size: 0.875em;
  color: #d45f2c;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  min-height: 1.2em;
}

/* ------------------------------------------------------------- destaque ---- */

/*
 * Ocupa o lugar que na home de 2016 era o carrossel de banners (.visual, 1006x300, logo
 * abaixo do cabeçalho). Aqui é o mesmo painel do resto da página, só que na largura
 * inteira e acima da dobra — no vocabulário deste tema, é isso que dá destaque.
 */
.highlight {
  width: 1010px;
  margin: 0 auto 20px;
}

.highlight__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px;
  color: #ccc;
  border: 2px solid rgba(170, 170, 170, 0.75);
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
  background: rgba(0, 0, 0, 0.8);
}

.highlight__text {
  flex: 1 1 auto;
  min-width: 0;
}

.highlight__text .time {
  display: block;
  font-size: 0.875em;
  color: #8f8f8f;
  padding-bottom: 4px;
}

.highlight__title {
  margin: 0 0 6px;
  font-size: 1.5em;
  color: #fff;
}

.highlight__text p {
  margin: 0;
  line-height: 1.2em;
}

.highlight__action {
  flex: none;
}

/* O verde é o da barra de lotação do tema (.server-info__scale .fill), stop por stop. */
.button-discord {
  display: inline-block;
  padding: 13px 26px;
  border: 2px solid rgba(170, 170, 170, 0.75);
  border-radius: 5px;
  background: linear-gradient(
    to bottom,
    #76d42c 0%,
    #72c528 13%,
    #64a41e 47%,
    #4f8c10 53%,
    #45630b 100%
  );
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 1.125em;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.button-discord:hover {
  filter: brightness(1.12);
  color: #fff;
}

/* -------------------------------------------------------------- painéis ---- */

.content__container {
  width: 1010px;
  margin: 0 auto 20px;
}

.content__main {
  float: left;
  width: 670px;
  margin-right: 10px;
}

.content__side {
  float: left;
  width: 330px;
}

.content__inner {
  position: relative;
  padding: 20px;
  margin-bottom: 10px;
  color: #ccc;
  border: 2px solid rgba(170, 170, 170, 0.75);
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.25);
  background: rgba(0, 0, 0, 0.8);
}

.content__inner a {
  color: #eee;
}

.content__inner a:hover {
  color: #fff;
}

.content__inner p {
  margin: 0.5em 0;
  line-height: 1.15em;
}

.content__inner ol,
.content__inner ul {
  padding: 0 0 0 40px;
}

.content__inner li {
  line-height: 1.15em;
  padding-bottom: 0.3em;
}

.content__inner ol {
  margin: 1em 0;
}

.content-title__text .title {
  color: #fff;
  font-size: 1.17em;
}

.content-title__text .time {
  font-size: 0.875em;
  color: #8f8f8f;
  display: block;
  padding: 0 0 4px;
}

/* Tabela de requisitos: mesmo cinza dos painéis, sem cromo novo. */
.specs {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5em 0;
}

.specs th,
.specs td {
  text-align: left;
  padding: 6px 0;
  border-bottom: 1px solid rgba(170, 170, 170, 0.25);
  line-height: 1.15em;
  font-weight: normal;
}

.specs th {
  width: 40%;
  color: #8f8f8f;
}

.specs tr:last-child th,
.specs tr:last-child td {
  border-bottom: none;
}

/* Bloco de comando/caminho — o tema não tinha um, então herda a moldura dos painéis. */
.code {
  display: block;
  padding: 8px 10px;
  margin: 0.5em 0;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(170, 170, 170, 0.35);
  border-radius: 3px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.875em;
  color: #87d704;
  word-break: break-all;
}

.note {
  color: #d45f2c;
}

/* --------------------------------------------------------------- rodapé ---- */

.page-footer {
  position: relative;
}

.main-footer {
  width: 100%;
}

.main-footer a {
  color: #eee;
}

.main-footer a:hover {
  color: #fff;
}

.main-footer__container {
  width: 1008px;
  margin: 0 auto;
  position: relative;
  border: 2px solid rgba(170, 170, 170, 0.75);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background: rgba(0, 0, 0, 0.8);
}

.main-footer__info {
  font-size: 0.875em;
  color: #ccc;
  padding: 20px 20px 0;
  line-height: 1.3em;
}

.main-footer__nav {
  padding: 15px 20px;
}

.main-footer__nav .elems {
  font-size: 0.875em;
  color: #ccc;
  margin-left: -30px;
  list-style: none;
}

.main-footer__nav .elems .elem {
  float: left;
  margin-left: 30px;
}

/* ------------------------------------------------------------ estreito ---- */

/*
 * O tema original tinha uma escada de breakpoints (1010/759/479) toda em larguras fixas.
 * Aqui são dois: abaixo de 1030px as duas colunas viram uma e o cabeçalho empilha; abaixo
 * de 560px o que sobrou de medida fixa (menu, tabelas) solta de vez. Nada de largura fixa
 * dentro dos breakpoints — foi isso que estourava a tela do celular.
 */
@media only screen and (max-width: 1030px) {
  .container,
  .content__container,
  .highlight,
  .main-footer__container {
    width: auto;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  .main-footer__container {
    box-sizing: border-box;
  }

  .top-line {
    height: auto;
    padding-bottom: 4px;
  }

  .main-header {
    height: auto;
    padding-bottom: 24px;
  }

  .main-header__logo {
    margin-top: 24px;
  }

  /* Sai da posição absoluta e vira o bloco central abaixo do brasão. */
  .main-header__panel {
    position: static;
    width: 100%;
    max-width: 338px;
    margin: 24px auto 0;
  }

  .main-header__platform,
  .main-header__others,
  .main-header__online,
  .main-header__status {
    width: auto;
    margin-left: 0;
  }

  .content__main,
  .content__side {
    float: none;
    width: auto;
    margin-right: 0;
  }
}

@media only screen and (max-width: 560px) {
  /*
   * Uma linha só. Os ícones de 24px do sprite custam ~100px de padding somados e são o que
   * empurrava o menu para a segunda linha — na tela pequena eles saem e ficam as palavras.
   */
  .top-line {
    padding-bottom: 0;
  }

  .top-line .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  /*
   * Ficam os ícones, sai o texto: as quatro palavras não cabem numa linha em nenhuma das
   * três línguas a 375px, e os ícones do sprite cabem com folga. O rótulo vira o `title`
   * do link (posto pelo i18n), então a informação não se perde.
   */
  .top-line__nav {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
  }

  .top-line__nav .elems {
    margin-left: 0;
    display: flex;
    flex-wrap: nowrap;
    column-gap: 22px;
  }

  .top-line__nav .elems .elem {
    float: none;
    margin-left: 0;
  }

  .top-line__nav .elems .elem a {
    width: 24px;
    padding: 12px 0 10px;
  }

  .top-line__nav .elems .elem a span {
    display: none;
  }

  /* Sem texto ao lado, o ícone volta ao fluxo e dispensa os deslocamentos do tema. */
  .top-line__nav .elems .elem a .sprite {
    position: static;
  }

  .top-line__langs {
    position: static;
    flex: none;
    gap: 5px;
  }

  .top-line__lang {
    padding: 1px;
  }

  .main-header__logo {
    width: 128px;
    margin-top: 20px;
  }

  /* 128px é o tamanho nativo do ícone: na tela pequena ele volta a ficar nítido. */
  .main-header__badge {
    width: 128px;
    height: 128px;
  }

  .content__inner {
    padding: 16px;
  }

  /* Texto em cima, botão embaixo ocupando a largura toda — alvo grande no toque. */
  .highlight__inner {
    display: block;
    padding: 16px;
  }

  .highlight__action {
    margin-top: 14px;
  }

  .button-discord {
    display: block;
    text-align: center;
  }

  /* Tabela de duas colunas não cabe: rótulo em cima, valor embaixo. */
  .specs,
  .specs tbody,
  .specs tr,
  .specs th,
  .specs td {
    display: block;
    width: auto;
  }

  .specs th {
    border-bottom: none;
    padding-bottom: 0;
  }

  .specs td {
    padding-top: 2px;
  }

  .main-footer__info {
    padding: 16px 16px 0;
  }

  .main-footer__nav {
    padding: 12px 16px;
  }

  .main-footer__nav .elems {
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 6px;
  }

  .main-footer__nav .elems .elem {
    float: none;
    margin-left: 0;
  }
}