/* Fontes do jogo. O ui.css do core aponta para elas em `--custom-font-family`
 * e o `pixiFont01` usa MyriadPro, mas nenhum dos dois declara o @font-face. */

@font-face {
  font-family: "EncodeSansWide";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/EncodeSansWide-400-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "EncodeSansWide";
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/EncodeSansWide-700-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "EncodeSansWide";
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/EncodeSansWide-900-Black.woff2") format("woff2");
}

@font-face {
  font-family: "MyriadPro";
  font-weight: bold;
  font-display: block;
  src: url("/fonts/Myriad-Pro-Bold-Condensed.woff") format("woff");
}

/* game.css — layout do port (complementa o ui.css original) */

:root {
  --active-color: #ff8904;
}

/* Sem `box-sizing: border-box` global: o core usa o content-box padrão do
 * navegador (medido no online), e regras como
 * `.buy-feature-popup-text-area { height: 24px; padding: 8px 0 }` dependem
 * disso. */
* {
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  /* sem font-family: o rules.css do core dá `var(--custom-font-family-rules)`
   * (Roboto) ao body; o HUD usa EncodeSansWide pelas classes do ui.css */
}

#game-container {
  position: absolute;
  inset: 0;
  z-index: 1;
}

#game-container canvas {
  display: block;
}

/* ------------------------------------------------------- Erro de carregamento */
/* `.msgviewClass` do index.html original (BaseErrorsManager) */

.msgviewClass {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  z-index: 11111;
}

.msgviewTextClass {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.msgviewTextClass h1 {
  font-family: var(--custom-font-family);
  font-size: 250%;
}

.msgviewTextClass p {
  font-family: var(--custom-font-family);
  font-size: 200%;
}

.msgviewTextClass a {
  color: #fff;
}

/* ------------------------------------------------------------------ Loader */

#loader {
  position: fixed;
  inset: 0;
  background: #0b1c2c;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  transition: opacity 0.4s ease;
}

#loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-logo {
  width: 320px;
  height: 180px;
  background: url("../images/png/game-logo.png") center/contain no-repeat;
}

.loader-bar-bg {
  width: 320px;
  height: 10px;
  border-radius: 5px;
  background: #ffffff22;
  overflow: hidden;
}

.loader-bar {
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, #ff8904, #ffd15c);
  transition: width 0.2s ease;
}

.loader-percent {
  color: #fff;
  font-size: 14px;
  letter-spacing: 2px;
}

/* ---------------------------------------------------------------------- UI */

#ui {
  z-index: 10;
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.top-panel,
.bottom-panel,
.keypad,
button,
#buy-feature-button,
#html-popups,
.bonus-fs-counter {
  pointer-events: auto;
}

/* `.top-panel` vem do ui.css do core (absoluto, flex, gradiente); o core não
 * dá padding — o espaçamento é dos `mt-4 ml-4` / `mr-4 mt-4` dos filhos. */
.top-panel {
  color: #fff;
}

/* Keypad — posição/escala calculadas em GameUI.resize() (landscape); em
 * portrait o `#keypad.vertical` do ui.css manda. Largura/altura vêm do
 * `.keypad-base`, como no core. */
#keypad {
  position: absolute;
  z-index: 20;
}

/* `.bottom-panel` vem do ui.css do core (55 px, flex column, `#0000006e`);
 * aqui só o encaixe no rodapé do #ui, já que o core o põe no fluxo abaixo
 * do #html-popups. */
.bottom-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  white-space: nowrap;
}

.bottom-panel p,
.bottom-panel span {
  color: #fff;
}

.tc-active {
  color: var(--active-color) !important;
}

/* Buy bonus */
#buy-feature-button.disabled,
.buy-feature-button-item.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.buy-feature-button-text {
  line-height: 1.1;
}

/* Contador de free spins */
.bonus-fs-counter {
  top: 130px;
  flex-direction: column;
  color: #000;
  font-size: 12px;
}

.bonus-fs-counter .bonus-fs-counter-label {
  margin: 0;
  font-size: 9px;
}

/* --------------------------------------------------------------- Popups */

#html-popups {
  position: absolute;
  inset: 0 0 55px 0;
  pointer-events: none;
}

/* ------------------------------------------------------------ Responsivo */

/* O core encolhe o `.bottom-panel` para 42 px abaixo de 960 px; os popups
 * (filhos do <body> aqui) acompanham a altura do painel. */
@media (max-width: 960px) {
  #html-popups,
  .html-popup,
  .fullscreen-popup {
    bottom: 42px;
  }
}


/* --------------------------------------------- Contador do autoplay
 * O core anexa o container direto no <button>; aqui o botão tem a arte como
 * background, então o contador se centraliza sobre ele.
 */

.autoplay-counter {
  position: absolute;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  line-height: 1;
}

.autoplay-counter p {
  margin: 0;
}