@font-face {
  font-family: 'DespicableMe';
  src: url('../assets/fonts/despicableme.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GothamBold';
  src: url('../assets/fonts/gothambold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'QuarkBold';
  src: url('../assets/fonts/quark-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --yellow: #ffd426;
  --yellow-dark: #d4a800;
  --blue: #2255aa;
  --blue-dark: #163a75;
  --purple: #6a1b9a;
  --purple-dark: #4a1170;
  --orange: #ff8a1f;
  --orange-dark: #c95f00;
  --ink: #0f1c2e;
  --white: #fafafa;
  /* medidas nas peças de interface do jogo original */
  --navy: #003062;
  --papel: #a7c8e9;
  --papel-linha: #bfd8f1;
  --papel-borda: #d6e6f7;
  --shadow: 0 6px 22px rgba(8, 20, 40, 0.5);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font-title: 'DespicableMe', 'GothamBold', Impact, sans-serif;
  --font-ui: 'GothamBold', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'QuarkBold', 'GothamBold', system-ui, sans-serif;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #191e32;
  font-family: var(--font-ui);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

button {
  font-family: var(--font-ui);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#game-container {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- HUD ---------- */
/* Uma fileira no alto: pausa e ENCERRAR à esquerda, estrela com os pontos no meio (a
   distância logo embaixo) e as bananas, grandes, à direita. */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding-top: calc(10px + var(--safe-top));
  padding-left: calc(10px + env(safe-area-inset-left, 0px));
  padding-right: calc(10px + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
  z-index: 10;
}

#hud-esquerda {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

#hud-centro {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Placa escura tombada, como no jogo: serve pros pontos e pro contador de bananas. */
.placa {
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(22, 40, 104, 0.82), rgba(12, 22, 66, 0.82));
  border-radius: 10px;
  transform: skewX(-8deg);
  box-shadow: 0 3px 10px rgba(4, 10, 40, 0.45);
}

#score-display { min-width: 150px; height: 40px; padding: 0 14px 0 44px; }

#score-icon, .contador-icone {
  position: absolute;
  transform: skewX(8deg);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
#score-icon { left: -12px; top: -8px; width: 54px; height: 54px; }

/* Contador de bananas: ícone do jogo vazando pela esquerda da placa e o número ao lado. */
.contador-banana { flex: none; min-width: 106px; height: 46px; margin-left: 8px; padding: 0 14px 0 46px; }
.contador-icone { left: -12px; top: -9px; width: 56px; height: 62px; }
.contador-valor { font-size: 27px; }

#score-value, .contador-valor, #distance-value {
  font-family: var(--font-num);
  font-style: italic;
  font-weight: 900;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(4, 10, 40, 0.55);
  width: 100%;
  text-align: center;
}
#score-value { font-size: 25px; letter-spacing: 0.5px; }

#distance-display {
  display: flex;
  align-items: baseline;
  gap: 3px;
  background: rgba(12, 22, 66, 0.6);
  border-radius: 9px;
  padding: 3px 10px;
}
#distance-value { font-size: 16px; width: auto; }
#distance-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}

#btn-pause, #btn-encerrar {
  height: 46px;
  border: none;
  border-radius: 11px;
  color: var(--white);
  cursor: pointer;
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
}

#btn-pause {
  width: 50px;
  background: linear-gradient(180deg, #5b8cf5 0%, #3765e0 55%, #2a4fc4 100%);
  box-shadow: 0 4px 0 #1c388f, 0 6px 12px rgba(4, 10, 40, 0.45);
}
#btn-pause svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 rgba(10, 30, 110, 0.6)); }
#btn-pause:active { transform: translateY(3px); box-shadow: 0 1px 0 #1c388f; }

/* ENCERRAR: vermelho, com o nome escrito. Um toque só abre a pergunta; não acaba a corrida. */
#btn-encerrar {
  flex-direction: column;
  gap: 1px;
  width: 66px;
  background: linear-gradient(180deg, #e25252 0%, #c22e2e 55%, #a11c1c 100%);
  box-shadow: 0 4px 0 #6b0f0f, 0 6px 12px rgba(4, 10, 40, 0.45);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
#btn-encerrar svg { width: 21px; height: 21px; }
#btn-encerrar:active { transform: translateY(3px); box-shadow: 0 1px 0 #6b0f0f; }

#multiplier-display {
  width: max-content;
  background: linear-gradient(180deg, #ffb52e, #f08a12);
  color: var(--white);
  font-family: var(--font-num);
  font-style: italic;
  font-weight: 900;
  font-size: 20px;
  padding: 1px 14px;
  border-radius: 9px;
  transform: skewX(-8deg);
  text-shadow: 0 2px 0 rgba(120, 50, 0, 0.6);
  box-shadow: 0 3px 8px rgba(4, 10, 40, 0.4);
}

/* Aviso que passa no meio da corrida (a banana que cumpriu a meta do dia): a placa verde do jogo. */
#hud-aviso {
  width: max-content;
  max-width: 100%;
  padding: 8px 14px 6px;
  background: linear-gradient(180deg, #90f640, #69cf18);
  clip-path: polygon(0 5px, 100% 0, 100% 100%, 0 100%);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 70, 0, 0.6);
}

/* Tela estreita (iPhone SE): a mesma fileira, um ponto menor. */
@media (max-width: 360px) {
  #score-display { min-width: 0; height: 36px; padding: 0 10px 0 36px; }
  #score-icon { width: 44px; height: 44px; left: -10px; top: -5px; }
  #score-value { font-size: 20px; }
  .contador-banana { min-width: 88px; height: 40px; padding: 0 10px 0 38px; }
  .contador-icone { width: 46px; height: 51px; left: -10px; top: -7px; }
  .contador-valor { font-size: 22px; }
  #btn-encerrar { width: 60px; }
}

/* ---------- Telas ---------- */
#menu-screen, #gameover-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Tela inicial ---------- */
/* O centro de tudo, no estilo do jogo: em cima a conta e a carteira; o Minion no meio; embaixo
   a meta do dia (a barra da banana), o mapa, o JOGAR e a doca. */
#menu-screen {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: calc(62px + var(--safe-top));
  padding-bottom: calc(12px + var(--safe-bottom));
  padding-left: 14px;
  padding-right: 14px;
  background: linear-gradient(180deg,
    rgba(0, 30, 70, 0.7) 0%, rgba(0, 30, 70, 0) 30%,
    rgba(0, 30, 70, 0) 46%, rgba(0, 30, 70, 0.78) 100%);
}

/* A faixa de cima: quem é (ou ENTRAR) à esquerda, a carteira e o som à direita. */
#menu-topo {
  position: absolute;
  top: calc(10px + var(--safe-top));
  left: calc(10px + env(safe-area-inset-left, 0px));
  right: calc(10px + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#menu-topo-dir { display: flex; align-items: center; gap: 8px; min-width: 0; }

.chip-conta, .chip-carteira {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  border: none;
  background: var(--navy);
  box-shadow: inset 0 -5px 0 #001d3d, 0 4px 10px rgba(0, 10, 40, 0.45);
  color: var(--white);
  cursor: pointer;
  transform: skewX(-8deg);
}
.chip-conta > *, .chip-carteira > * { transform: skewX(8deg); }
.chip-conta { min-width: 0; max-width: 46vw; padding: 0 16px 4px 6px; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; }
.chip-conta span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-avatar {
  flex: none;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fccb20;
  color: var(--navy);
  font-family: var(--font-num);
  font-size: 18px;
}
.conta-avatar svg { width: 20px; height: 20px; }
.chip-carteira { padding: 0 6px 4px 14px; font-family: var(--font-num); font-style: italic; font-size: 19px; color: #fccb20; font-variant-numeric: tabular-nums; }
.chip-carteira i {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #69cf18;
  box-shadow: inset 0 -4px 0 #329b0b;
  color: var(--white);
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  padding-bottom: 3px;
}
.chip-carteira span { white-space: nowrap; }
.chip-conta:active, .chip-carteira:active { transform: skewX(-8deg) translateY(2px); }

.btn-icon {
  flex: none;
  width: 44px; height: 44px;
  background: var(--navy);
  border: none;
  box-shadow: inset 0 -5px 0 #001d3d, 0 4px 10px rgba(0, 10, 40, 0.45);
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
}
.btn-icon svg { width: 24px; height: 24px; }
.btn-icon .som-off { display: none; }
.btn-icon.mudo .som-on { display: none; }
.btn-icon.mudo .som-off { display: inline; }
.btn-icon.mudo { color: rgba(255, 255, 255, 0.5); }
.btn-icon:active { transform: translateY(2px); }

#menu-top, #menu-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#menu-bottom { width: min(350px, 100%); gap: 10px; }

/* O logo do jogo: MINION laranja em cima, RUSH branco embaixo, os dois tombados. */
#game-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(230px, 56vw);
  transform: rotate(-4deg);
  margin: 0;
  filter: drop-shadow(0 6px 10px rgba(4, 10, 40, 0.55));
  font-family: var(--font-title);
  font-size: clamp(42px, 11vw, 76px);
  font-weight: 400;
  color: var(--yellow);
  line-height: 0.92;
}
#logo-minion { width: 100%; height: auto; display: block; }
#logo-rush { width: 73.7%; height: auto; display: block; margin-top: -1.5%; }

/* Cartão de papel milimetrado: a meta do dia com a barra da banana, o prêmio guardado e o recorde. */
.cartao-menu {
  width: 100%;
  padding: 7px 10px 8px;
  color: var(--navy);
  background-color: var(--papel);
  background-image:
    linear-gradient(var(--papel-linha) 2px, transparent 2px),
    linear-gradient(90deg, var(--papel-linha) 2px, transparent 2px);
  background-size: 52px 52px;
  background-position: 14px 10px;
  border: 4px solid var(--papel-borda);
  box-shadow: 0 0 0 2px rgba(0, 48, 98, 0.45), 0 6px 14px rgba(0, 10, 40, 0.45);
}
.cartao-menu-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 2px 3px 42px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
.cartao-menu-topo b { font-family: var(--font-num); font-size: 15px; }
#menu-meta.cumprida .cartao-menu-topo b { color: #2d8a09; }
#menu-meta.cumprida .barra-banana-trilho i { background: linear-gradient(90deg, #69cf18, #90f640); }
.menu-premio { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 8px; background: #ffa100; color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; }
.menu-premio img { width: 22px; height: 22px; object-fit: contain; }
#menu-best {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding-top: 5px;
  border-top: 2px solid rgba(0, 48, 98, 0.12);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
#menu-best img { width: 22px; height: 22px; }
#menu-best b { margin-left: auto; font-family: var(--font-num); font-size: 16px; font-variant-numeric: tabular-nums; }

/* Escolha do mapa onde a corrida começa: setas quadradas azuis dos lados, o nome numa placa azul-marinho. */
#menu-mapa {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}
#menu-mapa-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3px 8px 6px;
  background: var(--navy);
  box-shadow: inset 0 -5px 0 #001d3d;
  line-height: 1.15;
}
#menu-mapa-rotulo { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: rgba(255, 255, 255, 0.65); }
#menu-mapa-nome {
  max-width: 100%;
  font-family: var(--font-title);
  font-size: 18px;
  color: #fccb20;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-seta {
  flex: none;
  width: 44px; height: 44px;
  background: #1f6fd0;
  border: none;
  box-shadow: inset 0 -5px 0 #0f4a9a;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
}
.btn-seta:active { transform: translateY(2px); }
.btn-seta svg { width: 22px; height: 22px; }

/* O JOGAR: o botão verde do jogo, o maior da tela. */
.botao.jogar { min-height: 76px; padding: 22px 14px 16px; font-size: 38px; letter-spacing: 2px; clip-path: polygon(0 12px, 100% 0, 100% 100%, 0 100%); }
.botao.jogar::before { inset: 4px 4px 10px; clip-path: polygon(0 12px, 100% 0, 100% 100%, 0 100%); }
.botao.jogar svg { width: 30px; height: 30px; }

/* Como se joga: só pra quem ainda não tem recorde (quem já jogou não precisa ler de novo). */
#menu-hint {
  max-width: 330px;
  margin: -2px 0;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

/* A doca: o que se faz fora da corrida. Botões do jogo, menores, com ícone em cima do nome. */
#menu-doca { display: flex; gap: 8px; width: 100%; }
.doca-item {
  --claro: #90f640; --cor: #69cf18; --borda: #329b0b;
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 58px;
  padding: 10px 4px 9px;
  border: none;
  background: var(--borda);
  clip-path: polygon(0 5px, 100% 0, 100% 100%, 0 100%);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.doca-item::before {
  content: '';
  position: absolute;
  inset: 3px 3px 6px;
  z-index: -1;
  background: linear-gradient(180deg, var(--claro), var(--cor));
  clip-path: polygon(0 5px, 100% 0, 100% 100%, 0 100%);
}
.doca-item svg { width: 22px; height: 22px; }
.doca-item.laranja { --claro: #ffc94d; --cor: #ffa100; --borda: #c56a00; }
.doca-item.azul { --claro: #6fb6ff; --cor: #2f7fe0; --borda: #0f4a9a; }
.doca-item:active { transform: translateY(2px); }

#btn-retry { white-space: nowrap; }

/* Fim de jogo: o painel sobe de baixo e deixa a metade de cima livre pro Minion caído. */
#gameover-screen {
  align-items: flex-end;
  padding: 0 14px calc(12px + var(--safe-bottom));
  background: linear-gradient(180deg, rgba(10, 18, 60, 0) 22%, rgba(10, 18, 60, 0.82) 52%);
}

/* Abas (conta, indicar): uma fileira de placas; a da vez é a azul-marinho. */
.abas { flex: none; display: flex; gap: 6px; }
.aba {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 42px;
  padding: 6px 4px 8px;
  border: none;
  background: var(--white);
  box-shadow: inset 0 -4px 0 rgba(0, 48, 98, 0.18);
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.aba.ativa { background: var(--navy); box-shadow: inset 0 -4px 0 #fccb20; color: var(--white); }
/* Selo com o que há pra sacar, em cima da aba GANHOS. */
.aba-selo {
  position: absolute;
  top: -7px; right: -2px;
  padding: 1px 5px;
  background: #69cf18;
  color: var(--white);
  font-family: var(--font-num);
  font-style: normal;
  font-size: 11px;
  transform: rotate(4deg);
}
.aba-miolo { flex: none; display: flex; flex-direction: column; gap: 10px; }

/* Campo de texto (nome, e-mail, senha): a mesma caixa do dinheiro, com ícone no lugar do R$ e letra de texto. */
.campo.texto .campo-antes { padding: 0 10px; }
.campo.texto .campo-antes svg { width: 22px; height: 22px; }
.campo.texto input { padding: 11px 10px; font-family: var(--font-ui); font-size: 17px; font-weight: 700; }
.campo.texto input::placeholder { font-weight: 400; }

.conta-cartao { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.conta-avatar.grande { width: 46px; height: 46px; font-size: 26px; }
.conta-avatar.grande svg { width: 28px; height: 28px; }
.conta-cartao div { min-width: 0; display: flex; flex-direction: column; }
.conta-cartao b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-cartao small { font-size: 13px; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Janelas no estilo do Minion Rush ---------- */
/* As peças são as da interface do jogo de verdade (atlas sprite_common_menu_01 e
   sprite_endlessrun da extração), refeitas em CSS pra esticar sem borrar:
   - a janela é o papel milimetrado azul-claro, de cantos vivos;
   - a faixa de título é azul-marinho, cortada na diagonal, com o filete amarelo;
   - o botão é um quadrilátero de topo inclinado, com a borda mais escura e a "espessura"
     embaixo: verde pro que anda pra frente, laranja pro segundo caminho, vermelho pra sair;
   - a meta do dia é a barra dourada da banana.
   As cores foram medidas nas peças originais. Vale pro fim da corrida, pra pergunta do
   ENCERRAR, pra meta do dia e pro passo a passo de instalar. */
.modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(12px + var(--safe-top)) 14px calc(12px + var(--safe-bottom));
  background: rgba(0, 22, 52, 0.74);
}

.janela {
  position: relative;
  width: min(380px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  color: var(--navy);
  background-color: var(--papel);
  background-image:
    linear-gradient(var(--papel-linha) 2px, transparent 2px),
    linear-gradient(90deg, var(--papel-linha) 2px, transparent 2px);
  background-size: 52px 52px;
  background-position: 20px 18px;
  border: 5px solid var(--papel-borda);
  box-shadow: 0 0 0 2px rgba(0, 48, 98, 0.45), 0 14px 30px rgba(0, 10, 40, 0.55);
  text-align: left;
}

/* Faixa azul-marinho cortada na diagonal; o amarelo de trás aparece como filete no corte. */
.janela-titulo {
  position: relative;
  isolation: isolate;
  flex: none;
  margin: -5px -5px 0;
  padding: 12px 54px 19px 16px;
  background: #fccb20;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%);
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--white);
}
.janela-titulo::before {
  content: '';
  position: absolute;
  inset: 0 0 4px;
  z-index: -1;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 100%);
}

.janela-corpo {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Cartão branco por cima do papel: onde ficam as linhas de número e os textos. */
.cartao {
  flex: none;
  background: rgba(255, 255, 255, 0.82);
  border: 2px solid var(--white);
  overflow: hidden;
}

.janela-texto {
  flex: none;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.82);
  border: 2px solid var(--white);
  font-size: 15px;
  line-height: 1.45;
  color: var(--navy);
}

/* O número que importa da janela: o contador de bananas do placar, maior. */
.janela-heroi {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 0 2px;
}
.janela-heroi .contador-banana { margin-left: 16px; min-width: 132px; height: 52px; padding: 0 18px 0 54px; background: var(--navy); }
.janela-heroi .contador-icone { width: 64px; height: 70px; left: -16px; top: -10px; }
.janela-heroi .contador-valor { font-size: 34px; color: #fccb20; }
.janela-heroi span { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--navy); }

.stat-row {
  display: grid;
  grid-template-columns: 1fr 92px 92px;
  align-items: center;
  padding: 8px 10px;
  font-size: 15px;
  color: var(--navy);
  border-top: 2px solid rgba(0, 48, 98, 0.1);
}
.stat-row b {
  font-family: var(--font-num);
  font-weight: 800;
  text-align: right;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.stat-row b:last-child { color: #2f6fb8; }
/* Recorde batido nesta corrida: a etiqueta vermelha de NOVO do jogo. */
.stat-row b.novo { color: #d81f45; }
.stat-row b.novo::before {
  content: 'NOVO';
  display: inline-block;
  margin-right: 5px;
  padding: 1px 5px;
  background: #e21b2f;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.5px;
  vertical-align: 2px;
  transform: rotate(-7deg);
}
.stat-cab {
  border-top: none;
  padding: 5px 10px;
  background: var(--navy);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
}
.stat-cab span { text-align: right; }

/* Meta do dia: a barra dourada da banana, do jogo. */
.meta-do-dia { flex: none; }
.meta-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 2px 3px 40px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--navy);
}
.meta-topo b { font-family: var(--font-num); font-size: 15px; }
.barra-banana { position: relative; padding-left: 14px; }
.barra-banana img {
  position: absolute;
  left: -4px;
  top: -14px;
  width: 44px;
  height: 48px;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 2px 2px rgba(60, 40, 0, 0.5));
}
.barra-banana-trilho {
  height: 26px;
  padding: 4px 4px 6px 30px;
  background: #e5c12e;
  clip-path: polygon(0 0, 100% 0, 100% 62%, calc(100% - 9px) 100%, 9px 100%, 0 62%);
}
.barra-banana-trilho i {
  display: block;
  height: 100%;
  width: 0;
  min-width: 4px;
  background: linear-gradient(90deg, #fccb20, #f2fd02);
  box-shadow: 0 0 0 100vmax #c1922d;
  clip-path: inset(0 -100vmax);
}
.barra-banana-trilho { overflow: hidden; }
.meta-do-dia.cumprida .meta-topo b { color: #2d8a09; }
.meta-do-dia.cumprida .barra-banana-trilho i { background: linear-gradient(90deg, #69cf18, #90f640); }

.premio { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.premio img { flex: none; width: 56px; height: 56px; object-fit: contain; }
.premio b { display: block; font-size: 15px; letter-spacing: 0.5px; color: var(--navy); }
.premio small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--navy); }

/* O porquê de um botão não ter feito o que se esperava (faltou banana pra reviver): o
   quadrado laranja de informação do jogo e o texto ao lado. */
.janela-aviso {
  flex: none;
  position: relative;
  padding: 9px 10px 9px 44px;
  background: var(--white);
  border-left: 5px solid #ffae00;
  font-size: 14px;
  line-height: 1.35;
  color: var(--navy);
}
.janela-aviso::before {
  content: 'i';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  background: #ffae00;
  color: var(--white);
  font-family: var(--font-num);
  font-size: 19px;
  line-height: 26px;
  text-align: center;
}

/* Botão do jogo: quadrilátero de topo inclinado. A cor de fundo é a borda (mais escura);
   o miolo, com o degradê, entra 3 px e deixa 7 px embaixo, que é a "espessura". */
.botao {
  --claro: #90f640;
  --cor: #69cf18;
  --borda: #329b0b;
  position: relative;
  isolation: isolate;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 16px 14px 13px;
  border: none;
  background: var(--borda);
  clip-path: polygon(0 8px, 100% 0, 100% 100%, 0 100%);
  color: var(--white);
  font-family: var(--font-num);
  font-style: italic;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
  cursor: pointer;
}
.botao::before {
  content: '';
  position: absolute;
  inset: 3px 3px 7px;
  z-index: -1;
  background: linear-gradient(180deg, var(--claro), var(--cor));
  clip-path: polygon(0 8px, 100% 0, 100% 100%, 0 100%);
}
.botao svg { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25)); }
.botao:active { transform: translateY(3px); }
.botao.verde { --claro: #90f640; --cor: #69cf18; --borda: #329b0b; }
.botao.laranja { --claro: #ffc94d; --cor: #ffa100; --borda: #c56a00; font-size: 18px; }
.botao.vermelho { --claro: #fd6a83; --cor: #e9345b; --borda: #9a233c; font-size: 18px; }
/* Não dá agora (falta banana), mas continua tocável: o toque explica. */
.botao.cinza { --claro: #cfd8e3; --cor: #a9b6c6; --borda: #6f7f93; font-size: 18px; }
/* O outro botão da fileira tomba pro outro lado, como os pares do jogo. */
.botao-dupla .botao:last-child, .botao-dupla .botao:last-child::before { clip-path: polygon(0 0, 100% 8px, 100% 100%, 0 100%); }

/* Quanto custa, dentro do botão: ícone da banana e o número. */
.botao-preco {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  padding: 1px 9px 1px 4px;
  background: rgba(0, 40, 90, 0.42);
  font-size: 19px;
}
.botao-preco img { width: 22px; height: 24px; object-fit: contain; }
.botao-dupla { flex: none; display: flex; gap: 10px; }
/* Os dois dividem a fileira (o .botao sozinho ocupa a largura toda). */
.botao-dupla .botao { flex: 1 1 0; width: auto; min-width: 0; font-size: 17px; }
.botao-dupla #btn-retry { flex: 1.7; }
.botao-dupla #btn-menu { flex: 1; }

/* Fechar: o quadrado vermelho com X, meio torto, em cima da faixa de título. */
.btn-fechar {
  position: absolute;
  top: 3px; right: 6px;
  z-index: 2;
  width: 38px; height: 38px;
  background: #9a233c;
  border: none;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(4deg);
  box-shadow: inset 0 0 0 3px #e9345b, inset 0 -5px 0 3px #c7294b;
}
.btn-fechar svg { width: 20px; height: 20px; }
.btn-fechar:active { transform: rotate(4deg) translateY(2px); }

/* ---------- Campos e dinheiro (depósito e as janelas da plataforma) ---------- */
.janela-passo { flex: none; display: flex; flex-direction: column; gap: 10px; }
.campo-rotulo { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); margin-bottom: -5px; }

/* Rótulo à esquerda e o valor numa placa azul-marinho tombada, com o número amarelo. */
.linha-valor { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px 7px 12px; font-size: 14px; font-weight: 700; }
.linha-valor b {
  padding: 6px 14px 5px;
  background: var(--navy);
  color: #fccb20;
  font-family: var(--font-num);
  font-style: italic;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  transform: skewX(-8deg);
}

/* Valores prontos: fichas brancas de borda azul-marinho; a escolhida fica amarela. */
.fichas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ficha {
  min-height: 48px;
  padding: 6px 4px;
  background: var(--white);
  border: 3px solid var(--navy);
  color: var(--navy);
  font-family: var(--font-num);
  font-style: italic;
  font-size: 18px;
  cursor: pointer;
}
.ficha:not([data-reais]) { font-family: var(--font-ui); font-style: normal; font-size: 13px; font-weight: 700; }
.ficha.marcada { background: #fccb20; border-color: #c56a00; }
.ficha:active { transform: translateY(2px); }

/* Campo de digitar. A letra tem 16 px ou mais: com menos o iPhone dá zoom ao tocar. */
.campo { display: flex; align-items: stretch; background: var(--white); border: 3px solid var(--navy); }
.campo-antes {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-num);
  font-style: italic;
  font-size: 20px;
}
.campo input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--navy);
  font-family: var(--font-num);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}
.campo input::placeholder { color: rgba(0, 48, 98, 0.35); }
.campo:focus-within { border-color: #1f6fd0; box-shadow: 0 0 0 3px rgba(31, 111, 208, 0.3); }

.pix-qr { display: flex; align-items: center; gap: 12px; padding: 8px 10px; font-size: 13px; line-height: 1.35; font-weight: 700; }
.pix-qr img { flex: none; width: 116px; height: 116px; image-rendering: pixelated; background: var(--white); }
/* O copia e cola: dá pra selecionar com o dedo (o resto da página não deixa). */
.pix-codigo {
  flex: none;
  padding: 8px 10px;
  max-height: 62px;
  overflow: hidden;
  background: var(--white);
  border: 2px dashed var(--navy);
  font: 12px/1.35 ui-monospace, Menlo, monospace;
  color: var(--navy);
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
  cursor: pointer;
}
.pix-status { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 14px; font-weight: 700; }
.pix-status svg { flex: none; width: 22px; height: 22px; color: #1f6fd0; }
.botao-texto {
  flex: none;
  align-self: center;
  padding: 8px 12px;
  background: none;
  border: none;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.pago { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 8px; text-align: center; }
.pago-selo { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; background: #329b0b; box-shadow: inset 0 0 0 4px #69cf18, inset 0 -8px 0 4px #56bf13; color: var(--white); transform: rotate(-5deg); }
.pago-selo svg { width: 46px; height: 46px; }
.pago b { font-family: var(--font-num); font-style: italic; font-size: 22px; color: #2d8a09; }
.pago > span:last-child { font-size: 16px; font-weight: 700; color: var(--navy); }

/* ---------- Indicar amigos (carteira de afiliado) ---------- */
/* O topo: a comissão disponível numa placa grande, e embaixo o que já gerou e já sacou. */
.comissao { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 12px 0; }
.comissao-rotulo { font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.comissao-valor {
  padding: 8px 22px 6px;
  background: var(--navy);
  color: #fccb20;
  font-family: var(--font-num);
  font-style: italic;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
  transform: skewX(-8deg);
}
.comissao-andando { font-size: 13px; font-weight: 700; color: #b05a00; text-align: center; }
.comissao-linhas { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; margin: 6px -12px 0; border-top: 2px solid rgba(0, 48, 98, 0.1); }
.comissao-linhas div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; }
.comissao-linhas div + div { border-left: 2px solid rgba(0, 48, 98, 0.1); }
.comissao-linhas b { font-family: var(--font-num); font-size: 17px; font-variant-numeric: tabular-nums; }

/* Botão colado no fim do campo (TUDO). */
.campo-depois {
  flex: none;
  padding: 0 14px;
  border: none;
  background: #ffa100;
  box-shadow: inset 0 -5px 0 #c56a00;
  color: var(--white);
  font-family: var(--font-num);
  font-style: italic;
  font-size: 16px;
  cursor: pointer;
}
.linha-chave { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; font-weight: 700; }
.linha-chave svg { flex: none; width: 20px; height: 20px; color: #1f6fd0; }
.linha-chave span { flex: none; }
.linha-chave b { margin-left: auto; font-family: var(--font-num); font-size: 15px; }
.linha-chave b.faltando { font-family: var(--font-ui); font-size: 12px; line-height: 1.25; text-align: right; color: #b05a00; }

/* Deu certo: o mesmo recado do aviso, em verde, com o visto. */
.janela-certo {
  flex: none;
  position: relative;
  padding: 9px 10px 9px 44px;
  background: var(--white);
  border-left: 5px solid #69cf18;
  font-size: 14px;
  line-height: 1.35;
  color: var(--navy);
}
.janela-certo::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  background: #69cf18 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.caixa-link {
  flex: none;
  padding: 10px;
  background: var(--white);
  border: 2px dashed var(--navy);
  font: 700 14px/1.3 ui-monospace, Menlo, monospace;
  color: var(--navy);
  word-break: break-all;
  text-align: center;
  -webkit-user-select: all;
  user-select: all;
  cursor: pointer;
}

.placas-dupla { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.placas-dupla .cartao { display: flex; flex-direction: column; align-items: center; padding: 7px 4px 8px; }
.placas-dupla b { font-family: var(--font-num); font-style: italic; font-size: 28px; line-height: 1.1; }
.placas-dupla span { font-size: 10px; font-weight: 700; letter-spacing: 1px; }

/* Lista de linhas (indicados, saques): quem e quando à esquerda, valor e etiqueta à direita. */
.lista { display: flex; flex-direction: column; }
.linha-lista { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-top: 2px solid rgba(0, 48, 98, 0.1); }
.linha-lista:first-child { border-top: none; }
.linha-esq { min-width: 0; display: flex; flex-direction: column; }
.linha-esq b { font-size: 14px; }
.linha-esq small { font-size: 12px; opacity: 0.75; }
.linha-dir { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.linha-dir b { font-family: var(--font-num); font-size: 16px; font-variant-numeric: tabular-nums; }
.lista-vazia { padding: 12px 10px; font-size: 14px; line-height: 1.4; text-align: center; }
.lista-vazia:empty { display: none; }
/* Etiqueta de estado: verde quando entrou dinheiro, laranja esperando, vermelho quando não saiu. */
.etiqueta { padding: 2px 6px 1px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; color: var(--white); background: #ffa100; }
.etiqueta.boa { background: #3fae0c; }
.etiqueta.ruim { background: #e21b2f; }

/* ---------- Como instalar o app ---------- */
#instalar-content { width: min(370px, 100%); }
.instalar-passos {
  flex: none;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.instalar-passos li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  background: rgba(255, 255, 255, 0.82);
  border: 2px solid var(--white);
  font-size: 15px;
  line-height: 1.4;
  color: var(--navy);
}
.instalar-passos b { color: #d2520c; }
/* O número do passo: o quadrado laranja de informação do jogo. */
.passo-n {
  flex: none;
  width: 28px; height: 28px;
  background: #ffae00;
  color: var(--white);
  font-family: var(--font-num);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 1px 0 rgba(120, 60, 0, 0.5);
}
.passo-i {
  width: 20px; height: 20px;
  vertical-align: -4px;
  color: #1f6fd0;
}

@media (min-aspect-ratio: 1/1) {
  /* Deitado, a tela inicial abre pros lados e deixa o Minion aparecendo no meio. */
  #menu-screen {
    flex-direction: row;
    align-items: flex-end;
    padding-top: calc(58px + var(--safe-top));
    padding-left: calc(4vw + env(safe-area-inset-left, 0px));
    padding-right: calc(4vw + env(safe-area-inset-right, 0px));
    background: linear-gradient(90deg,
      rgba(0, 30, 70, 0.7) 0%, rgba(0, 30, 70, 0) 34%,
      rgba(0, 30, 70, 0) 60%, rgba(0, 30, 70, 0.8) 100%);
  }
  #menu-top { align-self: center; }
  #menu-bottom { width: min(330px, 40vw); }

  /* Deitado não tem metade de baixo que chegue: o painel vai pro lado direito. */
  #gameover-screen {
    align-items: center;
    justify-content: flex-end;
    padding: calc(8px + var(--safe-top)) calc(4vw + env(safe-area-inset-right, 0px)) calc(8px + var(--safe-bottom)) 0;
    background: linear-gradient(90deg, rgba(10, 18, 60, 0) 35%, rgba(10, 18, 60, 0.85) 70%);
  }
  #gameover-content { width: min(360px, 46vw); }
}

#touch-zone {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.hidden { display: none !important; }

@media (max-height: 460px) {
  /* Tela baixa (celular deitado): a tela inicial encolhe pra caber inteira. */
  #menu-screen { padding-top: calc(54px + var(--safe-top)); padding-bottom: calc(6px + var(--safe-bottom)); }
  #game-title { width: 170px; font-size: 36px; }
  #menu-bottom { gap: 6px; }
  #menu-hint, #menu-best { display: none; }
  .cartao-menu { padding: 4px 8px 6px; }
  #menu-mapa-nome { font-size: 15px; }
  .btn-seta { width: 38px; height: 38px; }
  .botao.jogar { min-height: 54px; padding: 16px 12px 10px; font-size: 26px; }
  .doca-item { height: 46px; padding: 8px 4px 6px; font-size: 9.5px; }
  .doca-item svg { width: 18px; height: 18px; }
  .chip-conta, .chip-carteira, .btn-icon { height: 38px; }
  .btn-icon { width: 38px; }
  .abas .aba { min-height: 34px; }
  .campo.texto input { padding: 6px 10px; font-size: 16px; }
  /* Tela baixa (celular deitado): as janelas encolhem pra caber sem rolar. */
  .janela-titulo { padding: 7px 50px 14px 12px; font-size: 16px; }
  .janela-corpo { padding: 6px 10px 8px; gap: 6px; }
  .janela-heroi { padding: 2px 0 0; }
  .janela-heroi .contador-banana { height: 38px; min-width: 104px; padding-left: 42px; }
  .janela-heroi .contador-icone { width: 46px; height: 51px; left: -12px; top: -7px; }
  .janela-heroi .contador-valor { font-size: 25px; }
  .stat-row { padding: 3px 10px; font-size: 14px; }
  #go-meta { display: none; }
  .botao { min-height: 44px; padding: 12px 10px 9px; font-size: 18px; }
  .botao.laranja, .botao.vermelho, .botao.cinza { font-size: 15px; }
  .janela-texto { font-size: 14px; padding: 7px 10px; }
  .btn-fechar { width: 32px; height: 32px; top: 1px; }
  .janela-passo { gap: 6px; }
  .pix-qr img { width: 84px; height: 84px; }
  .ficha { min-height: 38px; font-size: 16px; }
  .campo input { padding: 6px 12px; font-size: 20px; }
  #deposito-content, #indicar-content, #instalar-content { width: min(520px, 100%); }
  .comissao-valor { font-size: 24px; padding: 5px 16px 4px; }
  #instalar-intro { display: none; }
  .instalar-passos { gap: 5px; }
  .instalar-passos li { padding: 6px 10px; font-size: 14px; }
}

/* Tela estreita (iPhone SE), pro que vem depois do placar. Fica aqui embaixo de propósito:
   regra de tela estreita escrita antes da regra normal perde pra ela e não vale nada. */
@media (max-width: 360px) {
  #menu-topo, #menu-topo-dir { gap: 5px; }
  .chip-conta { max-width: 40vw; gap: 6px; font-size: 12px; padding: 0 10px 4px 5px; }
  .conta-avatar { width: 26px; height: 26px; font-size: 16px; }
  .chip-carteira { gap: 5px; font-size: 15px; padding: 0 5px 4px 9px; }
  .chip-carteira i { width: 24px; height: 24px; font-size: 19px; }
  .btn-icon { width: 38px; }
  .botao.jogar { min-height: 66px; font-size: 32px; }
  #menu-bottom { gap: 8px; }
  .aba { font-size: 10.5px; letter-spacing: 0; }
  /* A coluna do recorde precisa caber a etiqueta de NOVO. */
  .stat-row { grid-template-columns: 1fr 70px 112px; padding-left: 8px; padding-right: 8px; }
  /* Dois botões na mesma fileira não cabem com a letra cheia. */
  .botao-dupla { gap: 8px; }
  .botao-dupla .botao { padding: 15px 6px 12px; gap: 5px; font-size: 14px; letter-spacing: 0; }
  .botao-dupla .botao svg { width: 17px; height: 17px; }
}

/* ---------- Carregando ---------- */
#carregando {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: radial-gradient(ellipse at 50% 38%, #2146b8 0%, #0b1640 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
}
#carregando.hidden { display: none; }
#carregando-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(280px, 66vw);
  transform: rotate(-4deg);
  filter: drop-shadow(0 6px 10px rgba(4, 10, 40, 0.55));
}
#carregando-logo img { display: block; height: auto; }
#carregando-logo img:first-child { width: 100%; }
#carregando-logo img:last-child { width: 73.7%; margin-top: -1.5%; }
#carregando-trilho {
  width: min(62vw, 300px);
  height: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid rgba(255, 212, 38, 0.6);
  overflow: hidden;
}
/* Antes de o código chegar a barra já tem um toco, pra não parecer travado. */
#carregando-barra {
  width: 0;
  min-width: 8%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffe46b, var(--yellow));
  transition: width 0.15s linear;
}