/* ===== base.css — Reset, elementos base e utilitarios globais =====
   Gerado por tools/split-css-modules.mjs (Fase B-CSS). Nao editar a divisao manualmente sem
   reconferir a cascata. Ver VaultBrain/Brain/Padroes/Padroes CSS.md ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none; /* jogo mobile: previne selecao de texto acidental durante toque/arraste */
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden; /* jogo mobile: impede scroll da pagina; toda rolagem e interna ao #app */
  /* Faixa do letterbox (acima do jogo, ver 04-autofit-viewport.js): degrade VERTICAL verde escuro —
     um radial centralizado nao mostrava variacao numa faixa fina no topo (ficava so a cor da borda,
     quase preta). Linear de cima pra baixo garante o degrade visivel mesmo numa tira estreita. */
  background: linear-gradient(180deg, #16281a 0%, #0d1810 55%, #070d06 100%);
  /* Cor de base ESCURA na raiz (DEPOIS do shorthand, senao ele reseta): no app instalado (standalone) o
     body as vezes nao se estica ate embaixo do home indicator e aparecia o BRANCO padrao da pagina. Com
     esta cor solida qualquer area nao coberta fica escura, nunca branca. */
  background-color: #070d06;
  font-family: 'Poppins', sans-serif;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
progress-bar {
  height: 5px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
  margin: 2px 0;
}
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  background: var(--surface);
}
::-webkit-scrollbar-thumb {
  background: var(--surface2);
  border-radius: var(--radius-xs);
}
.config-spinning {
  animation: configSpin 0.38s ease-in-out forwards;
}
.hedge-roll-cw {
  animation: hedge-roll-cw 2s linear infinite;
}
.hedge-roll-ccw {
  animation: hedge-roll-ccw 2s linear infinite;
}
#quest-notif-badge {
  animation: quest-badge-pulse 1.4s ease-in-out infinite;
}

#tut-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--black-rgb), 0.45);
  transition: opacity 0.35s;
}

#tut-highlight {
  position: absolute;
  border-radius: 14px;
  box-shadow:
    0 0 0 9999px rgba(var(--black-rgb), 0.45),
    0 0 0 3px #ffd700,
    0 0 20px 6px rgba(var(--gold-rgb), 0.45);
  transition: all 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: var(--z-tut-highlight);
}

#tut-arrow {
  position: absolute;
  font-size: 36px;
  z-index: var(--z-tut-arrow);
  animation: tut-bounce 0.7s infinite alternate;
  transition: all 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  color: #ffd700;
  -webkit-text-stroke: 2px #000;
  text-stroke: 2px #000;
  text-shadow:
    0 0 10px rgba(var(--gold-rgb), 0.7),
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
  font-style: normal;
  line-height: 1;
}
#tut-arrow2 {
  position: absolute;
  font-size: 36px;
  z-index: var(--z-tut-arrow);
  animation: tut-bounce 0.7s 0.15s infinite alternate;
  transition: all 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  color: #ffd700;
  -webkit-text-stroke: 2px #000;
  text-stroke: 2px #000;
  text-shadow:
    0 0 10px rgba(var(--gold-rgb), 0.7),
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
  font-style: normal;
  line-height: 1;
  display: none;
}
#tut-arrow3 {
  position: absolute;
  font-size: 26px;
  z-index: var(--z-tut-arrow);
  animation: tut-bounce 0.7s 0.3s infinite alternate;
  transition: all 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  color: #ffd700;
  -webkit-text-stroke: 2px #000;
  text-stroke: 2px #000;
  text-shadow:
    0 0 10px rgba(var(--gold-rgb), 0.7),
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
  font-style: normal;
  line-height: 1;
  display: none;
}

#tut-bubble {
  position: absolute;
  z-index: var(--z-tut-bubble);
  background: linear-gradient(
    160deg,
    rgba(26, 42, 26, 0.55) 0%,
    rgba(13, 31, 13, 0.55) 60%,
    rgba(10, 26, 10, 0.55) 100%
  );
  border: 2px solid #4caf50;
  border-radius: 18px;
  padding: 14px 18px 16px;
  max-width: 340px;
  min-width: 200px;
  box-shadow:
    0 8px 32px rgba(var(--black-rgb), 0.6),
    0 0 0 1px rgba(76, 175, 80, 0.25),
    inset 0 1px 0 rgba(var(--white-rgb), 0.06);
  backdrop-filter: blur(4px);
  transition: all 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Balão pequeno sem pausar */
#tut-mini-bubble {
  position: fixed;
  z-index: var(--z-overlay-tut-bubble);
  background: linear-gradient(
    160deg,
    rgba(26, 42, 26, 0.55) 0%,
    rgba(13, 31, 13, 0.55) 60%,
    rgba(10, 26, 10, 0.55) 100%
  );
  border: 2px solid #4caf50;
  border-radius: 14px;
  padding: 10px 14px 12px;
  max-width: 240px;
  min-width: 160px;
  box-shadow:
    0 6px 24px rgba(var(--black-rgb), 0.6),
    inset 0 1px 0 rgba(var(--white-rgb), 0.06);
  backdrop-filter: blur(4px);
  display: none;
  pointer-events: all;
}
#tut-mini-bubble .mini-text {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #cce8cc;
  line-height: 1.5;
  text-align: center;
  display: block;
  margin-bottom: 8px;
}
#tut-mini-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: rgba(180, 180, 180, 0.7);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

/* Backdrop de pause */
#tut-pause-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--black-rgb), 0.72);
  z-index: var(--z-overlay-tut-pause-backdrop);
  display: none;
}

/* Balão com pause */
#tut-pause-bubble {
  position: fixed;
  z-index: var(--z-overlay-tut-bubble);
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(
    160deg,
    rgba(26, 42, 26, 0.55) 0%,
    rgba(13, 31, 13, 0.55) 60%,
    rgba(10, 26, 10, 0.55) 100%
  );
  border: 2px solid #4caf50;
  border-radius: 18px;
  padding: 16px 20px 18px;
  max-width: 340px;
  min-width: 220px;
  box-shadow:
    0 8px 32px rgba(var(--black-rgb), 0.6),
    inset 0 1px 0 rgba(var(--white-rgb), 0.06);
  backdrop-filter: blur(4px);
  display: none;
  pointer-events: all;
  text-align: center;
}
#tut-pause-bubble .pause-text {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #cce8cc;
  line-height: 1.55;
  margin-bottom: 12px;
  display: block;
}
#tut-pause-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: rgba(180, 180, 180, 0.6);
  font-size: 15px;
  cursor: pointer;
}

#tut-bubble-icon {
  font-size: 28px;
  text-align: center;
  margin-bottom: 6px;
  display: block;
}
#tut-bubble-icon img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: inline-block;
}
#tut-bubble-icon.icon-img {
  font-size: 0;
  line-height: 0;
  margin-bottom: 4px;
}
#tut-bubble-title {
  font-size: 13px;
  letter-spacing: 2px;
  color: #4cff4c;
  text-shadow: 0 0 8px rgba(76, 255, 76, 0.5);
  margin-bottom: 6px;
  text-align: center;
  display: block;
}
#tut-bubble-text {
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  color: #cce8cc;
  line-height: 1.55;
  text-align: center;
  display: block;
  margin-bottom: 12px;
  white-space: pre-line;
}
#tut-progress {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 10px;
}
.tut-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background: rgba(76, 175, 80, 0.3);
  border: 1px solid rgba(76, 175, 80, 0.5);
  transition: all 0.2s;
}
.tut-dot.active {
  background: #4cff4c;
  box-shadow: 0 0 6px #4cff4c;
  transform: scale(1.25);
}
.tut-pop-in {
  animation: tut-pop-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.tut-glow-pulse {
  animation: tut-glow-pulse 1s infinite !important;
}
.tut-glow-pulse img {
  animation: tut-glow-pulse 1s infinite !important;
}

.tut-ext-arrow {
  position: fixed;
  font-size: 32px;
  z-index: var(--z-overlay-tut-arrow);
  pointer-events: none;
  color: #ffd700;
  -webkit-text-stroke: 2px #000;
  text-stroke: 2px #000;
  text-shadow:
    0 0 10px rgba(var(--gold-rgb), 0.7),
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
  line-height: 1;
  animation: tut-bounce 0.7s infinite alternate;
  display: none;
}