/* =========================================================
   Juntos Na Fe Kids - tema marca JNF (fundo claro infantil)
   Primario #6C63FF | Verde #4CAF50 | Coral #FF6B6B
   ========================================================= */

:root {
  --sky: #6C63FF;
  --sky-soft: #8B7FFF;
  --sky-pale: #f0f0ff;
  --sun: #FFA94D;
  --sun-soft: #FFD08A;
  --green: #4CAF50;
  --green-soft: #C8E6C9;
  --pink: #FF6B9D;
  --cream: #f8f7ff;
  --cloud: #ffffff;
  --ink: #2a2a44;
  --ink-soft: #5a5a78;
  --muted: #8a8aa8;
  --danger: #FF6B6B;
  --shadow: 0 8px 24px rgba(108, 99, 255, 0.18);
  --shadow-soft: 0 4px 14px rgba(42, 42, 68, 0.08);
  --radius: 22px;
  --radius-sm: 14px;
  --nav-h: 68px;
  --hud-approx: 132px;
  --font: "Nunito", system-ui, sans-serif;
  --display: "Fredoka", "Nunito", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, #e5e5ff 0%, transparent 55%),
    radial-gradient(900px 500px at 100% 0%, #f0f0ff 0%, transparent 50%),
    linear-gradient(180deg, #e5e5ff 0%, var(--cream) 45%, #fff 100%);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overflow: hidden; /* scroll fica no .main-view */
  touch-action: manipulation;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

img { max-width: 100%; display: block; }

.hidden { display: none !important; }

/* ---------- Shell ---------- */
.app-shell {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  z-index: 10;
}

.main-view {
  flex: 1;
  min-height: 0; /* obrigatório para overflow rolar dentro de flex column */
  /* nav + safe-area (PWA/iOS) + folga para o último atalho não ficar sob o menu */
  padding: 12px 14px calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 28px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
  .main-view {
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 40px);
  }
}

/* ---------- HUD ---------- */
.hud {
  position: relative;
  z-index: 40;
  flex-shrink: 0;
  padding: 6px 12px 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,240,255,0.92));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(108,99,255, 0.12);
  box-shadow: 0 4px 14px rgba(108, 99, 255, 0.06);
}

.hud-inner { display: flex; flex-direction: column; gap: 4px; }

.hud-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hud-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--sky-pale), #fff);
  box-shadow: inset 0 0 0 1px rgba(108,99,255,0.2);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hud-avatar:hover,
.hud-avatar:focus-visible {
  transform: scale(1.04);
  box-shadow: inset 0 0 0 1px rgba(108,99,255,0.35), 0 2px 8px rgba(108,99,255,0.2);
  outline: none;
}
.hud-avatar:active { transform: scale(0.97); }

.hud-avatar-media,
.hud-avatar img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.hud-name-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: 0 6px;
  line-height: 1.1;
}

.hud-brand {
  display: none;
}

.hud-name {
  font-weight: 800;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hud-level {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 700;
}

.hud-currencies {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

.currency {
  background: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: 0.78rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.currency-clickable {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  padding-right: 6px;
}
.currency-clickable:hover {
  border-color: rgba(108, 99, 255, 0.35);
  background: var(--sky-pale);
}
.currency-clickable:active { transform: scale(0.96); }
.currency-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 1px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--sky-soft), var(--sky));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.currency-clickable:hover .currency-add {
  transform: scale(1.08);
}
.currency-ico {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* Ícones inline de preço (estrela / selo) — paridade Ordem gold/crystal */
.asset-star-currency,
.star-inline,
.asset-selo-currency,
.selo-inline {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.05em;
  margin: 0 0.15em;
  flex-shrink: 0;
}
.shop-buy .star-inline,
.shop-buy .selo-inline,
.shop-buy .asset-star-currency,
.shop-buy .asset-selo-currency,
.shop-item-price .star-inline,
.shop-item-price .selo-inline,
.shop-item-price .asset-star-currency,
.shop-item-price .asset-selo-currency {
  width: 14px;
  height: 14px;
  max-width: 14px;
  max-height: 14px;
}
.asset-selo-pack {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.hud-bars-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hud-progress-track {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  /* Contorno via box-shadow (sem border) — evita cortar o topo do fill */
  box-shadow:
    inset 0 0 0 1.5px rgba(42, 42, 68, 0.2),
    inset 0 1px 2px rgba(42, 42, 68, 0.08);
  overflow: hidden;
  box-sizing: border-box;
}

.home-progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  border-radius: inherit;
  transition: width 0.35s ease;
}

.hud-progress-heart .home-progress-fill {
  background: linear-gradient(90deg, var(--pink), var(--danger));
}
.hud-progress-xp .home-progress-fill {
  background: linear-gradient(90deg, var(--sun-soft), var(--sun));
}
.hud-progress-joy .home-progress-fill {
  background: linear-gradient(90deg, var(--sky-soft), var(--sky));
  z-index: 1;
}

/* Progresso até a próxima +1 — camada visível na parte vazia da barra */
.hud-joy-regen-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(139, 127, 255, 0.42), rgba(108, 99, 255, 0.62));
  box-shadow: inset 0 0 0 1px rgba(108, 99, 255, 0.18);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hud-joy-regen-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: joyRegenShine 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes joyRegenShine {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -100% 0; }
}

.hud-progress-joy .home-progress-shine,
.hud-progress-joy .home-progress-overlay {
  z-index: 2;
}

.hud-progress-joy .home-progress-label {
  display: flex;
  align-items: center;
  overflow: visible;
  flex: 1;
  min-width: 0;
}

.hud-progress-joy.is-joy-full .hud-joy-regen-fill {
  width: 100% !important;
  background: linear-gradient(90deg, rgba(76, 175, 80, 0.22), rgba(76, 175, 80, 0.38));
  box-shadow: none;
}

.hud-progress-joy.is-joy-full .hud-joy-regen-fill::after {
  animation: none;
}

.hud-joy-next {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.62rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-left: 4px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.hud-progress-joy.is-joy-full .hud-joy-next {
  color: #14532d;
}

#hudJoy.joy-pop {
  display: inline-block;
  animation: joyPop .45s ease;
}

@keyframes joyPop {
  0%   { transform: scale(1); color: inherit; }
  40%  { transform: scale(1.25); color: var(--sky); }
  100% { transform: scale(1); color: inherit; }
}

.home-progress-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent 55%);
  pointer-events: none;
}

.home-progress-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  gap: 6px;
  line-height: 1;
}

.home-progress-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 0.68rem;
}

.hud-bars-row .home-progress-icon {
  font-size: 0.72rem;
  margin-right: 3px;
}

.home-progress-icon { margin-right: 3px; }
.home-progress-sep { opacity: 0.5; margin: 0 1px; }
.home-progress-value { flex-shrink: 0; font-size: 0.68rem; font-weight: 800; }

/* ---------- Bottom nav ---------- */
.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(480px, 100%);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.96);
  border-top: 2px solid rgba(108,99,255,0.12);
  box-shadow: 0 -6px 20px rgba(108,99,255,0.12);
  z-index: 50;
  backdrop-filter: blur(12px);
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 14px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
  padding: 3px 2px;
  position: relative;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.nav-btn .nav-icon { font-size: 1.35rem; line-height: 1; display: flex; align-items: center; justify-content: center; min-height: 36px; }
.nav-btn .nav-icon.has-img img,
.nav-btn .nav-icon img.asset-menu-nav {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.nav-btn.active {
  color: var(--sky);
  background: var(--sky-pale);
  transform: translateY(-2px);
}

/* ---------- Loading ---------- */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  text-align: center;
  gap: 8px;
  animation: floaty 2.4s ease-in-out infinite;
}

.loading-emoji { font-size: 3.2rem; }
.brand-logo-loading {
  width: 112px;
  height: 112px;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
  filter: drop-shadow(0 8px 18px rgba(108,99,255, 0.35));
}
.loading-screen-title {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--sky);
}
.loading-screen-sub { color: var(--ink-soft); font-weight: 600; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Typography / common ---------- */
.view-head {
  margin-bottom: 14px;
  text-align: center;
}
.view-head h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.55rem;
  color: var(--sky);
}
.view-sub {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
}

.subhead {
  font-family: var(--display);
  color: var(--sky);
  margin: 16px 0 8px;
}

.muted { color: var(--muted); font-weight: 600; }
.empty-hint {
  text-align: center;
  color: var(--ink-soft);
  font-weight: 700;
  padding: 24px 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
.inv-grid > .empty-hint,
.shop-grid > .empty-hint,
.quest-list > .empty-hint,
.craft-list > .empty-hint,
.menu-grid > .empty-hint,
.map-card-grid > .empty-hint,
#amigOwned > .empty-hint,
#amigTypes > .empty-hint {
  grid-column: 1 / -1;
}

.card-soft {
  background: var(--cloud);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 2px solid rgba(108,99,255,0.1);
  animation: popIn 0.35s ease;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--sky), var(--sky-soft));
  color: #fff;
  box-shadow: 0 6px 16px rgba(108,99,255,0.35);
}
.btn-sun {
  background: linear-gradient(135deg, var(--sun-soft), var(--sun));
  color: #5a3a18;
  box-shadow: 0 6px 16px rgba(255,169,77,0.35);
}
.btn-ghost {
  background: rgba(108,99,255,0.1);
  color: var(--sky);
  font-weight: 800;
}
.btn-block { width: 100%; }
.back-mini { margin-bottom: 8px; padding: 8px 14px; font-size: 0.85rem; }

/*
 * Todo campo de texto do app usa esta MESMA caixa: mesma altura (padding),
 * mesma fonte/tamanho/peso, mesmo alinhamento (esquerda). O único campo que
 * centraliza é o de PIN, e mesmo assim sem alterar fonte/altura — só o
 * text-align muda, pra não ter caixas de tamanhos diferentes numa mesma tela.
 */
.text-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(108, 99, 255, 0.15);
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 42px;
  text-align: center;
  margin: 0 0 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.text-input::placeholder { color: var(--muted); font-weight: 600; }
.text-input:focus {
  outline: none;
  border-color: var(--sky);
  box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.15);
}
.text-input:disabled { opacity: 0.6; }

/* Formulários de entrada (login/cadastro): todas as linhas (campo, botão,
   texto de ajuda) usam o MESMO espaçamento vertical entre si — sem margens
   soltas e inconsistentes em cada elemento. */
.auth-form-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-form-panel .text-input { margin: 0; }
.auth-form-panel .btn {
  width: 100%;
  height: 46px;
  padding: 0 18px;
}
.auth-form-panel .auth-hint { margin: 0; }

.auth-hint {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
}

.auth-error-msg {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 107, 107, 0.12);
  color: #c62828;
  font-weight: 800;
  font-size: 0.9rem;
  text-align: center;
}

.auth-loading {
  margin-top: 10px;
  text-align: center;
  color: var(--ink-soft);
  font-weight: 700;
}

.pill-ready, .pill-done {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
}
.pill-ready { background: var(--green-soft); color: #2E7D32; }
.pill-done { background: #eee; color: var(--muted); }

.asset-media, .asset-emoji {
  display: inline-grid;
  place-items: center;
}
.asset-media img { object-fit: contain; }

/* ---------- Home ---------- */
.home-hero-banner {
  display: flex;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, #fff, var(--sky-pale));
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  border: 2px solid rgba(108,99,255,0.12);
  animation: popIn 0.4s ease;
}

.home-hero-art {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 3rem;
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
}

.home-hello { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; }
.home-stats-line { margin: 0; color: var(--ink-soft); font-weight: 700; font-size: 0.88rem; }

.daily-teaser { margin-bottom: 14px; }
.daily-teaser-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.daily-badge {
  font-weight: 800;
  color: var(--sky);
  font-size: 0.85rem;
}
.daily-preview {
  color: var(--ink-soft);
  font-weight: 600;
  margin: 6px 0 12px;
  line-height: 1.4;
}

/* Presente do Dia — grade 7 dias (paridade Ordem) */
.daily-streak-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(255, 169, 77, 0.28);
  margin-bottom: 4px;
}
.daily-streak-banner .streak-flame {
  font-size: 1.8rem;
  line-height: 1;
}
.daily-streak-banner .streak-info { min-width: 0; }
.daily-streak-banner .streak-number {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--sun);
  line-height: 1.1;
}
.daily-streak-banner .streak-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: 2px;
}
.daily-rewards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 14px;
}
.daily-day {
  position: relative;
  text-align: center;
  padding: 10px 6px 8px;
  border-radius: 14px;
  border: 2px solid rgba(108, 99, 255, 0.12);
  background: #fff;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-soft);
}
.daily-day-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  min-height: 18px;
}
.daily-day-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ink-soft);
}
.daily-day-badge {
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.daily-day-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
}
.daily-day-prize {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.2;
}
.daily-day--claimed {
  border-color: rgba(76, 175, 80, 0.45);
  background: linear-gradient(180deg, #eefaf0, #e4f5e7);
  opacity: 0.92;
}
.daily-day--claimed .daily-day-label { color: #2e7d32; }
.daily-day--claimed .daily-day-badge {
  background: rgba(76, 175, 80, 0.22);
  color: #1b5e20;
}
.daily-day--claimed .daily-day-prize { color: #3d6b42; }
.daily-day--today {
  border-color: var(--sun);
  background: linear-gradient(180deg, #fff8ef, #ffe9c8);
  box-shadow: 0 0 0 3px rgba(255, 169, 77, 0.22), var(--shadow-soft);
}
.daily-day--today .daily-day-label { color: #a35a12; font-size: 0.78rem; }
.daily-day--today .daily-day-badge {
  background: linear-gradient(145deg, var(--sun-soft), var(--sun));
  color: #5a3a18;
}
.daily-day--locked {
  opacity: 0.55;
  background: #f7f7fb;
}
.daily-day--locked .daily-day-label { color: var(--muted); }
.daily-rewards-hint {
  margin: 10px 0 0;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
}
#rwClaim.btn-block {
  width: 100%;
}
#rwClaim:disabled {
  background: #c8e6c9;
  color: #1b5e20;
  box-shadow: none;
  opacity: 1;
}
@media (max-width: 380px) {
  .daily-rewards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.shortcut {
  background: #fff;
  border-radius: 18px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 0.82rem;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(108,99,255,0.08);
  transition: transform 0.15s ease;
  position: relative;
  overflow: visible;
}
.shortcut span:not(.menu-tile-badge),
.shortcut .shortcut-icon { font-size: 1.5rem; display: flex; align-items: center; justify-content: center; min-height: 36px; }
.shortcut .shortcut-icon img,
.shortcut .asset-menu-tile {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}
.shortcut:active { transform: scale(0.96); }

/* ---------- Home world rail (paridade Ordem) ---------- */
.home-map-panel {
  margin: 0 0 14px;
  background: linear-gradient(165deg, #fff 0%, var(--sky-pale) 55%, #eef0ff 100%);
  border-radius: var(--radius);
  border: 2px solid rgba(108, 99, 255, 0.12);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.home-map-panel-title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--sky);
  padding: 12px 14px 0;
}
.home-map-wrap,
.blob-map-wrap.world-rail-wrap,
.world-rail-wrap {
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.world-rail-wrap {
  --wr-orb: 72px;
  --wr-chip: 26px;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(108, 99, 255, 0.14), transparent 62%),
    radial-gradient(circle at 80% 120%, rgba(255, 169, 77, 0.1), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent);
}

.wr-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 12px 20px 14px;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.wr-track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  min-width: 100%;
}

.wr-link {
  position: relative;
  flex: 0 0 26px;
  width: 26px;
  height: 2px;
  margin: 0 4px;
  margin-top: calc(var(--wr-chip) + var(--wr-orb) / 2 - 1px);
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(138, 138, 168, 0.45) 22%, rgba(138, 138, 168, 0.45) 78%, transparent);
  pointer-events: none;
}
.wr-link::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: rgba(138, 138, 168, 0.55);
  border-radius: 1px;
}
.wr-link.done {
  background: linear-gradient(90deg, transparent, rgba(108, 99, 255, 0.75) 20%, rgba(139, 127, 255, 0.85) 80%, transparent);
  box-shadow: 0 0 10px rgba(108, 99, 255, 0.35);
}
.wr-link.done::after {
  background: var(--sky);
  box-shadow: 0 0 8px rgba(108, 99, 255, 0.7);
}
.wr-link.done::before {
  content: "";
  position: absolute;
  inset: -1px 0;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  background-size: 22px 100%;
  background-repeat: no-repeat;
  animation: wrSparkTravel 1.6s linear infinite;
}
@keyframes wrSparkTravel {
  from { background-position: -22px 0; }
  to { background-position: 36px 0; }
}

.wr-node {
  position: relative;
  width: 94px;
  flex: 0 0 94px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--wr-chip) 0 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: wrNodeIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes wrNodeIn {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
  to { opacity: 1; transform: none; }
}
.wr-node:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 12px;
}
.wr-node.locked { cursor: not-allowed; }

.wr-orb {
  position: relative;
  display: block;
  width: var(--wr-orb);
  height: var(--wr-orb);
  border-radius: 50%;
  isolation: isolate;
}
.wr-orb::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 72%;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(42, 42, 68, 0.22), transparent 70%);
  z-index: -2;
}

.wr-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(108, 99, 255, 0.12),
    rgba(139, 127, 255, 0.95) 12%,
    rgba(108, 99, 255, 0.25) 30%,
    rgba(255, 169, 77, 0.55) 52%,
    rgba(139, 127, 255, 0.15) 68%,
    rgba(108, 99, 255, 0.5) 85%,
    rgba(108, 99, 255, 0.12)
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: wrRingSpin 7s linear infinite;
}
@keyframes wrRingSpin { to { transform: rotate(360deg); } }

.wr-halo {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(108, 99, 255, 0.22), inset 0 0 12px rgba(108, 99, 255, 0.1);
  transition: box-shadow 0.3s ease;
}

.wr-core {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #e8e9f8;
  box-shadow: inset 0 0 16px rgba(42, 42, 68, 0.12);
  font-size: calc(var(--wr-orb) * 0.42);
}
.wr-core .wr-art,
.wr-core img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: filter 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.wr-shine {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.45), transparent 34%),
    linear-gradient(160deg, transparent 55%, rgba(42, 42, 68, 0.12));
  pointer-events: none;
  z-index: 3;
}

.wr-node.open .wr-pulse,
.wr-node.open .wr-pulse::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(108, 99, 255, 0.4);
  animation: wrPulseRing 2.6s ease-out infinite;
  z-index: -1;
  pointer-events: none;
}
.wr-node.open .wr-pulse::after {
  inset: -3px;
  border-color: rgba(108, 99, 255, 0.22);
  animation-delay: 0.8s;
}
@keyframes wrPulseRing {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}
.wr-node.open .wr-core img { filter: saturate(1.12) brightness(1.04); }
.wr-node.open:hover .wr-core img,
.wr-node.open:focus-visible .wr-core img {
  transform: scale(1.18);
  filter: saturate(1.25) brightness(1.1);
}
.wr-node.open:hover .wr-halo {
  box-shadow: 0 0 26px rgba(108, 99, 255, 0.4), inset 0 0 14px rgba(139, 127, 255, 0.2);
}

.wr-node.current .wr-ring {
  background: conic-gradient(
    from 0deg,
    rgba(255, 169, 77, 0.55),
    #ffe6a3 15%,
    rgba(108, 99, 255, 0.65) 35%,
    #ffd08a 55%,
    rgba(255, 169, 77, 0.55) 75%,
    #fff3cf 92%,
    rgba(255, 169, 77, 0.55)
  );
  animation-duration: 4s;
}
.wr-node.current .wr-halo {
  box-shadow: 0 0 26px rgba(255, 169, 77, 0.45), inset 0 0 14px rgba(255, 169, 77, 0.2);
  animation: wrHaloBreathe 2.2s ease-in-out infinite;
}
@keyframes wrHaloBreathe {
  50% { box-shadow: 0 0 38px rgba(255, 169, 77, 0.65), inset 0 0 18px rgba(255, 169, 77, 0.28); }
}

.wr-here {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3a2808;
  background: linear-gradient(160deg, #ffe6a3, var(--sun));
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(255, 169, 77, 0.4);
  animation: wrChipFloat 2.4s ease-in-out infinite;
  z-index: 5;
}
.wr-here::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 6px;
  height: 6px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--sun);
  border-radius: 1px;
}
@keyframes wrChipFloat { 50% { transform: translateX(-50%) translateY(-2px); } }

.wr-node.locked .wr-ring {
  background: conic-gradient(from 0deg, rgba(138, 138, 168, 0.45), rgba(180, 180, 200, 0.2) 50%, rgba(138, 138, 168, 0.45));
  animation-duration: 20s;
}
.wr-node.locked .wr-halo { box-shadow: inset 0 0 16px rgba(42, 42, 68, 0.25); }
.wr-node.locked .wr-core img {
  filter: grayscale(0.9) brightness(0.55) contrast(1.05) blur(0.6px);
  transform: scale(1.18);
}

.wr-veil {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.wr-veil-mist {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(circle at 28% 38%, rgba(180, 190, 230, 0.4), transparent 42%),
    radial-gradient(circle at 72% 62%, rgba(140, 150, 190, 0.35), transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(80, 85, 120, 0.35), rgba(50, 55, 90, 0.55));
  animation: wrMistDrift 7s ease-in-out infinite alternate;
}
@keyframes wrMistDrift {
  from { transform: translate(-5%, -3%) scale(1.06) rotate(-2deg); }
  to { transform: translate(5%, 4%) scale(1.14) rotate(2deg); }
}

.wr-seal {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  z-index: 4;
  border: 1.5px dashed rgba(255, 255, 255, 0.55);
  animation: wrSealSpin 22s linear infinite;
  pointer-events: none;
}
@keyframes wrSealSpin { to { transform: rotate(360deg); } }

.wr-seal-lv {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 8px rgba(42, 42, 68, 0.75);
  background: radial-gradient(circle, rgba(42, 42, 68, 0.55) 0 36%, transparent 60%);
  pointer-events: none;
}
.wr-seal-lv small {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1px;
}

.wr-node.next .wr-core img { filter: grayscale(0.4) brightness(0.7) saturate(0.85); }
.wr-node.next .wr-ring {
  background: conic-gradient(
    from 0deg,
    rgba(255, 107, 107, 0.55),
    rgba(255, 169, 77, 0.45) 30%,
    rgba(255, 107, 107, 0.25) 55%,
    rgba(255, 107, 107, 0.65) 80%,
    rgba(255, 107, 107, 0.55)
  );
  animation-duration: 9s;
}
.wr-node.next .wr-halo { animation: wrBarrierPulse 1.9s ease-in-out infinite; }
@keyframes wrBarrierPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 107, 107, 0.25); }
  50% { box-shadow: 0 0 22px rgba(255, 107, 107, 0.5); }
}
.wr-node.next .wr-veil-mist { opacity: 0.45; }
.wr-node.next .wr-seal { border-style: solid; border-color: rgba(255, 107, 107, 0.5); animation: none; }

.wr-crack {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 46%, rgba(255, 230, 163, 0.7) 49%, transparent 52%),
    linear-gradient(65deg, transparent 55%, rgba(255, 255, 255, 0.4) 57%, transparent 60%),
    linear-gradient(150deg, transparent 30%, rgba(255, 169, 77, 0.35) 32%, transparent 35%);
  mix-blend-mode: screen;
  animation: wrCrackFlicker 2.6s ease-in-out infinite;
}
@keyframes wrCrackFlicker {
  0%, 100% { opacity: 0.3; }
  42% { opacity: 0.85; }
  58% { opacity: 0.45; }
}

.wr-label {
  display: block;
  text-align: center;
  width: 100%;
  padding: 0 3px;
}
.wr-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  min-height: 2.5em;
  color: var(--ink);
}
.wr-meta {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--muted);
}
.wr-node.locked .wr-name { color: var(--ink-soft); }
.wr-node.next .wr-meta { color: var(--danger); }
.wr-node.current .wr-meta { color: var(--sun); }

@media (max-width: 380px) {
  .world-rail-wrap { --wr-orb: 64px; }
  .wr-node { width: 86px; flex-basis: 86px; }
  .wr-link { flex-basis: 22px; width: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .wr-ring, .wr-seal, .wr-pulse, .wr-pulse::after, .wr-veil-mist,
  .wr-halo, .wr-here, .wr-crack, .wr-link.done::before, .wr-node {
    animation: none !important;
  }
}

/* ---------- Map ---------- */
.map-container.is-busy { opacity: 0.7; pointer-events: none; }
.map-wrap { animation: slideUp 0.3s ease; }
.map-head { margin-bottom: 12px; }
.map-crumb {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  margin: 6px 0 2px;
}
.map-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--ink);
}
.map-hint {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.map-back { margin-bottom: 4px; }

.map-card-grid {
  display: grid;
  gap: 10px;
}
.map-card {
  text-align: left;
  background: #fff;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
  border: 2px solid rgba(108,99,255,0.1);
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  align-items: center;
  transition: transform 0.12s ease, opacity 0.12s ease, border-color 0.12s ease;
}
.map-card:active { transform: scale(0.98); }
.map-card-art-wrap {
  grid-row: 1 / span 3;
  position: relative;
  width: 72px;
  height: 72px;
}
.map-card-art {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--sky-pale);
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  overflow: hidden;
}
.map-card-art img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}
.map-card-lock {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(90, 84, 130, 0.35);
  box-shadow: 0 2px 6px rgba(42, 42, 68, 0.18);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  line-height: 1;
  z-index: 2;
}
.map-card.is-locked {
  background: #f1f0f6;
  border-color: rgba(90, 84, 130, 0.28);
  border-style: dashed;
  box-shadow: none;
  opacity: 0.92;
  cursor: not-allowed;
}
.map-card.is-locked:active { transform: none; }
.map-card.is-locked .map-card-art {
  background:
    repeating-linear-gradient(
      -45deg,
      #e4e2ee,
      #e4e2ee 5px,
      #d4d0e4 5px,
      #d4d0e4 10px
    );
}
.map-card.is-locked .map-card-art img,
.map-card.is-locked .map-card-art.asset-emoji,
.map-card.is-locked .map-card-art {
  filter: grayscale(0.95) brightness(0.72) contrast(1.05);
}
.map-card.is-locked .map-card-name {
  color: #5a5678;
}
.map-card.is-locked .map-card-desc {
  color: #8a86a0;
}
.map-card-name {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink);
}
.map-card-meta {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--sky);
}
.map-card-meta.is-locked-meta {
  color: #6b6588;
}
.map-card-desc {
  grid-column: 2;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-weight: 600;
  line-height: 1.3;
}

.nodes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.node-cell {
  aspect-ratio: 1;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(108,99,255,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  position: relative;
  overflow: hidden;
  transition: transform 0.12s ease;
}
.node-cell:active:not(:disabled) { transform: scale(0.95); }
.node-label {
  font-size: 0.55rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
  color: var(--ink-soft);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 1px;
}
.node-level-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  font-size: 0.52rem;
  font-weight: 800;
  line-height: 1.15;
  padding: 1px 4px;
  border-radius: 6px;
  background: rgba(42, 42, 68, 0.88);
  color: #fff;
  pointer-events: none;
  letter-spacing: 0.01em;
}
.node-empecilho { border-color: rgba(255,169,77,0.45); background: #fff6eb; }
.node-resource { border-color: rgba(76,175,80,0.45); background: #f1f8f1; }
.node-chest { border-color: rgba(255,107,157,0.45); background: #fff0f6; }
.node-empty { opacity: 0.85; }
.node-done {
  opacity: 0.45;
  filter: grayscale(0.4);
}
.node-rare {
  box-shadow: 0 0 0 2px var(--sun), var(--shadow);
}
.node-progress-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(108,99,255,0.15);
  overflow: hidden;
}
.node-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--sky), var(--sun));
  border-radius: inherit;
  transition: width 0.65s ease;
}

/* ---------- Inventory / shop ---------- */
.cat-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 2px 0 12px;
  margin: 0 0 4px;
  overflow: visible;
}
.cat-tab {
  width: 100%;
  min-width: 0;
  background: #fff;
  border: 2px solid rgba(108, 99, 255, 0.14);
  border-radius: 999px;
  padding: 7px 4px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--ink-soft);
  box-shadow: var(--shadow-soft);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-tab.active {
  background: var(--sky-pale);
  border-color: rgba(108, 99, 255, 0.35);
  color: var(--sky);
}
.shop-skin-note {
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
}
.skin-card.is-owned {
  opacity: 0.92;
}
.skin-card.is-equipped {
  border-color: rgba(76, 175, 80, 0.45);
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.12);
}
.inv-skin-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 14px;
  width: 100%;
}
.inv-skin-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(108, 99, 255, 0.35);
  background: linear-gradient(145deg, var(--sky-pale), #fff);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-soft);
}
.inv-skin-circle img,
.inv-skin-circle .inv-skin-art,
.inv-skin-circle .asset-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inv-skin-change-btn {
  appearance: none;
  border: 2px solid rgba(108, 99, 255, 0.2);
  background: #fff;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.inv-skin-change-btn:hover {
  border-color: var(--sky);
  color: var(--sky);
}

.inventory-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 8px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.inventory-bag,
.inventory-equip { min-width: 0; max-width: 100%; }
.inventory-col-title {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
  margin: 0 0 8px;
}

.equip-doll {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.equip-slot {
  aspect-ratio: 1;
  min-height: 0;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 4px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: var(--shadow-soft);
  border: 2px dashed rgba(108, 99, 255, 0.22);
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--muted);
  position: relative;
  overflow: hidden;
}
.equip-slot.filled {
  border-style: solid;
  border-color: rgba(76, 175, 80, 0.45);
  background: #f3faf3;
  color: var(--ink);
  cursor: pointer;
}
.equip-slot .slot-label {
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.equip-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.equip-item-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.equip-silhouette {
  font-size: 1.15rem;
  line-height: 1;
  opacity: 0.55;
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}
.inv-bag-bonus {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--sky);
  margin: 0 0 6px;
  padding: 4px 8px;
  background: var(--sky-pale);
  border-radius: 8px;
}
.inv-slot {
  aspect-ratio: 1;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(108, 99, 255, 0.14);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: var(--shadow-soft);
  padding: 3px;
}
.inv-slot.empty {
  background: rgba(108, 99, 255, 0.04);
  box-shadow: none;
}
.inv-slot:not(.empty):not(.blocked) { cursor: pointer; }
.inv-slot.blocked {
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      -45deg,
      #e8e6f2,
      #e8e6f2 5px,
      #d9d5e8 5px,
      #d9d5e8 10px
    );
  border: 2px dashed rgba(90, 84, 130, 0.45);
  box-shadow: inset 0 1px 4px rgba(42, 42, 68, 0.1);
  color: #6b6588;
}
.inv-slot-lock {
  font-size: 0.95rem;
  line-height: 1;
  filter: grayscale(0.15);
  opacity: 0.85;
}
.inv-slot img {
  width: 100%;
  height: 100%;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}
.inv-slot .qty-badge {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--sky);
  text-shadow: 0 1px 0 #fff;
}

/* Arrastar slots da mochila (paridade Ordem) */
.drag-source { opacity: 0.35; }
.drag-ghost {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid var(--sky);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(42, 42, 68, 0.22);
}
.drag-ghost img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.inv-slot.drop-hover,
.inv-grid.drop-hover {
  outline: 2px solid var(--sun);
  outline-offset: -2px;
}
.equip-slot.drop-hover {
  border-color: var(--sun);
  box-shadow: 0 0 0 3px rgba(255, 169, 77, 0.28);
}

.shop-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.shop-card,
.shop-item-row {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  text-align: left;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(108,99,255,0.08);
  animation: popIn 0.3s ease;
  width: 100%;
}
.shop-item-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--sky-pale), #fff);
  overflow: hidden;
}
.shop-item-icon img,
.shop-item-icon .asset-media {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.shop-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shop-item-name,
.shop-card strong {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}
.shop-item-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  min-width: 88px;
}
.shop-item-price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--sun);
  white-space: nowrap;
}
.shop-item-row.shop-item-craft-only { opacity: 0.92; }
.shop-item-row.shop-item-craft-only .shop-item-price { color: var(--ink-soft); }
.shop-item-row.shop-item-studied { opacity: 0.8; }
.shop-item-row.shop-item-studied .shop-item-price { color: var(--ink-soft); }
.shop-item-row.shop-item-locked { opacity: 0.72; }
.shop-item-row.shop-item-locked .shop-item-price { color: var(--ink-soft); }

.shop-potion-section {
  margin: 4px 0 14px;
  width: 100%;
}
.shop-potion-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sun);
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 2px solid rgba(255, 169, 77, 0.28);
}
.shop-potion-section .shop-item-row {
  margin-bottom: 8px;
}
.shop-potion-section .shop-item-row:last-child {
  margin-bottom: 0;
}

.skin-picker-sheet {
  background: #fff;
  border-radius: var(--radius);
  padding: 16px;
  width: min(420px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
}
.skin-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.skin-picker-head h3 {
  margin: 0;
  font-family: var(--display);
  color: var(--sky);
}
.skin-picker-empty {
  text-align: center;
  padding: 18px 10px 8px;
  color: var(--ink-soft);
  font-weight: 700;
}
.skin-picker-empty p { margin: 0 0 14px; }
.skin-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.skin-picker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--sky-pale);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  font-weight: 800;
  font-size: 0.75rem;
  text-align: center;
}
.skin-picker-card.is-active {
  border-color: var(--green);
  background: #fff;
}
.skin-picker-art {
  width: 72px;
  height: 72px;
  margin: 0 auto 6px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  display: grid;
  place-items: center;
}
.skin-picker-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.skin-picker-name {
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}
.skin-picker-meta {
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 420px) {
  .inventory-layout {
    grid-template-columns: 1fr;
  }
  .inventory-equip { order: -1; }
  .equip-doll { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.shop-desc,
.shop-item-meta {
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-buy {
  width: auto;
  min-width: 72px;
  margin-top: 0;
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ---------- Menu / quests / craft ---------- */
.menu-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding-bottom: 12px;
}
.menu-section { width: 100%; }
.menu-section-title {
  font-family: var(--display);
  color: var(--sky);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 14px 0 8px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(108, 99, 255, 0.18);
}
.menu-section:first-child .menu-section-title { margin-top: 4px; }

/* Seções secundárias: acordeão (paridade Ordem — mais usados no topo) */
.menu-accordion-group-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 14px 0 6px;
  padding-left: 2px;
}
.menu-accordion {
  border: 2px solid rgba(108, 99, 255, 0.1);
  border-radius: var(--radius-sm);
  background: #fff;
  margin-bottom: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.menu-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font);
  color: var(--ink);
}
.menu-accordion-title {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.menu-accordion-count {
  flex-shrink: 0;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--sky-pale);
  color: var(--sky);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-accordion-chevron {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--sky-soft);
  transition: transform 0.2s ease;
}
.menu-accordion.open .menu-accordion-toggle {
  background: var(--sky-pale);
}
.menu-accordion.open .menu-accordion-title {
  color: var(--sky);
}
.menu-accordion.open .menu-accordion-chevron {
  transform: rotate(180deg);
  color: var(--sky);
}
.menu-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.menu-accordion.open .menu-accordion-panel {
  max-height: 480px;
}
.menu-accordion-panel-inner {
  padding: 0 10px 12px;
}
.menu-grid,
.menu-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.menu-tile {
  background: #fff;
  border-radius: var(--radius);
  padding: 10px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 0.65rem;
  line-height: 1.15;
  text-align: center;
  box-shadow: var(--shadow);
  border: 2px solid rgba(108,99,255,0.1);
  min-height: 88px;
  min-width: 0;
  position: relative;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}
.menu-tile.is-soon {
  opacity: 0.92;
  border-style: dashed;
}
.menu-tile-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.menu-tile-soon {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: rgba(108, 99, 255, 0.08);
  border-radius: 999px;
  padding: 2px 6px;
  letter-spacing: 0.02em;
}

.menu-tile-badge,
.nav-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  max-width: 10px;
  max-height: 10px;
  flex: none;
  align-self: flex-start;
  box-sizing: border-box;
  padding: 0;
  line-height: 0;
  display: block;
  aspect-ratio: 1;
  background: #ff4d4d;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: badgePulse 1s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 2;
}
.nav-btn .nav-badge {
  top: 2px;
  right: 10px;
  width: 11px;
  height: 11px;
  min-width: 11px;
  min-height: 11px;
  max-width: 11px;
  max-height: 11px;
}
.shortcut .menu-tile-badge,
.home-chip-row .menu-tile-badge,
.home-daily-card .menu-tile-badge,
.menu-tile .menu-tile-badge {
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  max-width: 10px;
  max-height: 10px;
}
@keyframes badgePulse {
  from { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55); }
  to   { box-shadow: 0 0 0 4px rgba(255, 77, 77, 0); }
}
.menu-tile-emoji,
.menu-tile-icon {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex-shrink: 0;
  overflow: hidden;
}
.menu-tile-icon img,
.menu-tile .asset-menu-tile {
  width: 40px;
  height: 40px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.menu-hub-hero {
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
}
.menu-hub-grid {
  margin-bottom: 12px;
}
.coming-soon-panel {
  text-align: center;
  padding: 28px 16px 40px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border: 2px dashed rgba(108, 99, 255, 0.22);
  margin-top: 8px;
}
.coming-soon-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.coming-soon-icon img,
.coming-soon-icon .asset-menu-hero {
  width: 88px;
  height: 88px;
  object-fit: contain;
  display: block;
}
.coming-soon-panel h1 {
  font-family: var(--display);
  color: var(--sky);
  font-size: 1.35rem;
  margin: 0 0 8px;
}
.coming-soon-hint {
  margin: 12px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.hud-avatar-media img,
.hud-avatar img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}
.asset-media img { object-fit: contain; display: block; }

.quest-group-title {
  margin: 12px 6px 2px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #6b6580;
  letter-spacing: 0.01em;
}
.quest-group-title:first-child { margin-top: 2px; }
.action-row.is-claim-row {
  border-color: rgba(108, 99, 255, 0.45);
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.12);
}
.action-row.is-claimed-row { opacity: 0.7; }

.quest-list, .craft-list, .action-row-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.action-row-list .shop-item-row,
.craft-list .shop-item-row,
.quest-list .shop-item-row,
.prepare-queue .shop-item-row {
  width: 100%;
}
.action-row .shop-item-actions .shop-buy {
  min-width: 96px;
  white-space: nowrap;
}
.action-row.is-locked-row {
  background: #f1f0f6;
  border-color: rgba(90, 84, 130, 0.32);
  border-style: dashed;
  box-shadow: none;
  opacity: 0.95;
  cursor: not-allowed;
}
.action-row.is-locked-row .shop-item-icon {
  position: relative;
  background:
    repeating-linear-gradient(
      -45deg,
      #e4e2ee,
      #e4e2ee 5px,
      #d4d0e4 5px,
      #d4d0e4 10px
    );
}
.action-row.is-locked-row .shop-item-icon img,
.action-row.is-locked-row .shop-item-icon .asset-media,
.action-row.is-locked-row .shop-item-icon .asset-emoji {
  filter: grayscale(0.95) brightness(0.55) contrast(1.05);
}
.action-row.is-locked-row .shop-item-icon::after {
  content: '🔒';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: rgba(42, 42, 68, 0.28);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.action-row.is-locked-row .shop-item-name,
.action-row.is-locked-row .shop-item-meta {
  color: #5a5678;
}
.action-row.is-locked-row .shop-buy[disabled] {
  background: #d4d0e4;
  color: #4a4760;
  box-shadow: none;
  cursor: not-allowed;
  min-width: 92px;
}
.action-row.is-nokey .shop-buy[disabled] {
  background: #ffe8c8;
  color: #7a4a12;
  box-shadow: none;
  cursor: not-allowed;
}
.dungeon-keys-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 169, 77, 0.18);
  border: 1.5px solid rgba(255, 169, 77, 0.45);
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--ink);
}
.dungeon-run-card { margin-bottom: 12px; }
.action-row .prepare-progress {
  margin-top: 6px;
  height: 8px;
  border-radius: 999px;
  background: rgba(108, 99, 255, 0.12);
  overflow: hidden;
}
.action-row .prepare-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sun), #ffc56d);
}
.action-row .prepare-timer-badge {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-soft);
}
.quest-card, .craft-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(108,99,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: popIn 0.3s ease;
}
.quest-card p, .craft-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.quest-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--sky-pale);
  overflow: hidden;
}
.quest-progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--green), #388E3C);
  border-radius: inherit;
}
.quest-meta { font-size: 0.78rem; font-weight: 800; color: var(--sky); }

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.tab {
  flex: 1;
  padding: 10px;
  border-radius: 999px;
  font-weight: 800;
  background: rgba(108,99,255,0.1);
  color: var(--ink-soft);
}
.tab.active {
  background: var(--sky);
  color: #fff;
}

/* ---------- Hub Ofício (submenus na mesma tela) ---------- */
.breadcrumb,
.oficio-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 10px;
}
.breadcrumb .sep,
.oficio-breadcrumb .sep { color: var(--muted); opacity: 0.7; }
.breadcrumb-root { color: var(--sky); font-weight: 800; }

.oficio-tabs,
.craft-tabs,
.oficio-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 12px;
}
.oficio-tab-body { min-height: 120px; }
.oficio-hint {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.shop-tab {
  background: rgba(108, 99, 255, 0.1);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink-soft);
  white-space: nowrap;
}
.shop-tab.active {
  background: var(--sky);
  color: #fff;
  border-color: var(--sky);
}
.tab-level-1 {
  font-size: 0.88rem;
  padding: 8px 16px;
}
.tab-level-2 {
  font-size: 0.8rem;
  padding: 6px 12px;
  background: rgba(255, 169, 77, 0.12);
}
.tab-level-2.active {
  background: var(--sun);
  color: #3a2208;
  border-color: var(--sun);
}

.amig-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.amig-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: left;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(108,99,255,0.1);
}
.amig-card.active {
  border-color: var(--green);
  background: #f1f8f1;
}
.amig-card.hungry {
  border-color: rgba(226, 120, 70, 0.45);
  background: #fff8f2;
}
.amig-adopt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.amig-shop-row {
  opacity: 1;
  filter: none;
}
.amig-shop-row .shop-item-icon {
  display: grid;
  place-items: center;
}
.amig-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.amig-card-head .asset-media { flex-shrink: 0; }
.amig-card-main { min-width: 0; flex: 1; }
.amig-card-main strong {
  display: block;
  font-size: 1rem;
}
.amig-level {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--sky);
}
.amig-bonus-state {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}
.amig-bonus-state.on { color: var(--green, #2f9e64); }
.amig-bonus-state.off { color: #c45c26; }
.amig-stat-line {
  margin-top: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.amig-stat-line.is-off { opacity: 0.55; }
.amig-xp-bar {
  position: relative;
  height: 22px;
  border-radius: 999px;
  background: rgba(108,99,255,0.12);
  overflow: hidden;
}
.amig-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #6c63ff, #8b7fff);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.amig-xp-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--ink);
}
.amig-feeding-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
}
.amig-feeding-status.fed { color: var(--green, #2f9e64); }
.amig-feeding-status.hungry,
.amig-feeding-status.unfed { color: #c45c26; }
.amig-hungry-alert {
  font-size: 0.72rem;
  font-weight: 700;
  color: #a34a1a;
  background: rgba(255, 169, 77, 0.18);
  border-radius: 10px;
  padding: 8px 10px;
}
.amig-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.amig-actions .btn { flex: 1 1 auto; }
.amig-active-badge {
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 8px 10px;
}
.amig-food-stock {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(108,99,255,0.08);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.amig-rules {
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Minijogo de lanche do amiguinho (paridade Ordem) */
.amig-feed-overlay {
  position: fixed;
  z-index: 2600;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(30, 28, 45, 0.72);
}
.amig-feed-dialog {
  position: relative;
  width: min(100%, 430px);
  overflow: hidden;
  background: #fffaf3;
  border: 2px solid rgba(108, 99, 255, 0.18);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.amig-feed-title {
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 800;
}
.amig-feed-step {
  display: inline-block;
  margin-top: 8px;
  color: var(--sun);
  font-size: 0.72rem;
  font-weight: 800;
}
.amig-feed-instruction {
  min-height: 36px;
  margin: 8px 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
}
.amig-feed-close {
  position: absolute;
  right: 10px;
  top: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 25px;
}
.amig-feed-scene {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, #efe8ff 0%, #f7f1e6 55%, #e8d7c0 100%);
}
.amig-feed-table {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 170px;
  background: #d9c2a4;
  border-top: 5px solid #b08968;
}
.amig-feed-bag-zone {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 34px;
  width: 205px;
  height: 250px;
  transform: translateX(-50%);
}
.amig-feed-bag {
  position: absolute;
  left: 20px;
  top: 0;
  width: 165px;
  filter: drop-shadow(0 13px 10px rgba(0,0,0,.2));
  transform-origin: 64% 76%;
  transition: transform .48s ease, opacity .22s ease;
}
.amig-feed-bag-open,
.amig-feed-bag-empty { opacity: 0; }
.amig-feed-bag-empty { transform: translate(-130px, 104px) rotate(88deg); }
.amig-feed-bag-zone.open .amig-feed-bag-closed { opacity: 0; }
.amig-feed-bag-zone.open .amig-feed-bag-open {
  opacity: 1;
  transform: rotate(-14deg) translate(-15px, -5px);
}
.amig-feed-scene.serving .amig-feed-bag-zone.open .amig-feed-bag-open {
  transform: translate(-130px, 104px) rotate(88deg);
  transition-duration: .7s;
}
.amig-feed-scene.serving .amig-feed-bag-zone.served .amig-feed-bag-open { opacity: 0; }
.amig-feed-scene.serving .amig-feed-bag-zone.served .amig-feed-bag-empty { opacity: 1; }
.amig-feed-swipe {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 0;
  height: 56px;
  border: 2px solid rgba(108,99,255,0.25);
  border-radius: 14px;
  padding: 9px;
  background: rgba(255,255,255,0.88);
  touch-action: none;
}
.amig-feed-swipe-track {
  height: 100%;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(108,99,255,0.12);
}
.amig-feed-swipe-fill {
  width: 0;
  height: 100%;
  background: var(--purple, #6c63ff);
}
.amig-feed-swipe-hand {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  color: #392712;
}
.amig-feed-bag-zone.open .amig-feed-swipe {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.amig-feed-bowl {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 52px;
  width: 145px;
  height: 61px;
  transform: translateX(-50%);
  border: 5px solid #845638;
  border-radius: 14px 14px 65px 65px;
  background: #38251e;
  box-shadow: inset 0 8px #1d1411;
}
.amig-feed-bowl::before {
  content: "";
  position: absolute;
  inset: -13px 13px auto;
  height: 27px;
  border: 3px solid #845638;
  border-radius: 50%;
  background: #17100d;
}
.amig-feed-serve,
.amig-feed-confirm {
  position: absolute;
  z-index: 12;
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  border-radius: 14px;
  padding: 11px 15px;
  background: var(--sun);
  color: #332311;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
}
.amig-feed-serve,
.amig-feed-confirm { bottom: 144px; }
.amig-feed-serve.visible,
.amig-feed-confirm.visible {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .2s;
}
.amig-feed-kibble {
  position: absolute;
  z-index: 7;
  left: calc(50% - 32px);
  top: 200px;
  width: 10px;
  height: 10px;
  border: 2px solid #f0bf65;
  border-radius: 50%;
  background: #c88538;
  opacity: 0;
}
.amig-feed-scene.serving .amig-feed-kibble {
  animation: amig-feed-fall .78s cubic-bezier(.2,.7,.4,1) forwards;
}
.amig-feed-scene.serving .k1 { --x:-12px; --y:118px; animation-delay:.5s; }
.amig-feed-scene.serving .k2 { --x:12px; --y:128px; animation-delay:.59s; }
.amig-feed-scene.serving .k3 { --x:39px; --y:121px; animation-delay:.67s; }
.amig-feed-scene.serving .k4 { --x:60px; --y:123px; animation-delay:.74s; }
.amig-feed-scene.serving .k5 { --x:82px; --y:115px; animation-delay:.82s; }
@keyframes amig-feed-fall {
  0% { opacity:1; transform:translate(0,0) scale(.8); }
  88% { opacity:1; transform:translate(var(--x),var(--y)) rotate(350deg); }
  100% { opacity:0; transform:translate(var(--x),calc(var(--y) + 8px)) scale(.6); }
}
.amig-feed-pet {
  position: absolute;
  z-index: 4;
  right: 20px;
  bottom: 25px;
  width: 94px;
  height: 94px;
  opacity: 0;
  transform: translateX(130px);
  transition: transform .65s cubic-bezier(.18,.88,.27,1.2), opacity .25s;
}
.amig-feed-pet-art,
.amig-feed-pet .asset-media,
.amig-feed-pet img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
.amig-feed-pet-fallback { font-size: 70px; }
.amig-feed-pet.arrived {
  opacity: 1;
  transform: translateX(0);
  animation: amig-feed-happy .75s ease-in-out .7s 2;
}
@keyframes amig-feed-happy {
  50% { transform: translateY(-10px) scale(1.06); }
}
.amig-feed-heart {
  position: absolute;
  z-index: 10;
  right: 55px;
  bottom: 118px;
  color: #ff809c;
  font-size: 24px;
  opacity: 0;
}
.amig-feed-pet.arrived + .amig-feed-heart {
  animation: amig-feed-heart 1.3s ease-out .7s forwards;
}
@keyframes amig-feed-heart {
  25% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-48px); }
}
.amig-feed-reward {
  position: absolute;
  z-index: 11;
  left: 50%;
  top: 165px;
  transform: translate(-50%, 16px);
  width: max-content;
  max-width: calc(100% - 28px);
  padding: 9px 12px;
  border: 2px solid var(--green, #2f9e64);
  border-radius: 12px;
  background: #e8f8ee;
  color: #1f6b3d;
  font-weight: 800;
  font-size: 0.85rem;
  opacity: 0;
  transition: .25s;
}
.amig-feed-reward.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.daily-card h2 {
  font-family: var(--display);
  color: var(--sky);
  margin: 8px 0;
}
.daily-body {
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
}
.daily-verse {
  font-weight: 800;
  color: var(--sun);
  margin: 10px 0;
}
.daily-reward {
  font-weight: 800;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.settings-card code {
  background: var(--sky-pale);
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 800;
}

/* ---------- Overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(42,42,68, 0.45);
  display: flex;
  padding: 16px;
  overflow-y: auto;
}
.overlay.center { align-items: center; justify-content: center; }

.generic-modal-sheet {
  width: min(360px, 100%);
  background: linear-gradient(180deg, #fff, var(--sky-pale));
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: 0 20px 50px rgba(42, 42, 68, 0.3);
  animation: slideUp 0.3s ease;
}
.item-action-sheet .btn-block {
  width: 100%;
  margin-top: 8px;
}
.item-action-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  text-align: left;
}
.item-action-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--sky-pale), #fff);
  overflow: hidden;
  font-size: 1.8rem;
}
.item-action-info { min-width: 0; }
.item-action-info strong {
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.item-action-qty {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ink-soft);
}
.item-bonus-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.item-bonus-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(108, 99, 255, 0.1);
  color: var(--ink, #2b2a33);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}
.item-bonus-plain {
  margin: 4px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft, #5c5868);
}
.shop-item-submeta {
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--ink-soft, #5c5868);
  line-height: 1.3;
}
.item-action-info p {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-weight: 600;
  line-height: 1.3;
}
.pix-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.pix-modal-title {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--sky);
  text-align: center;
}
.pix-modal-product {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
  font-weight: 700;
}
.pix-qr-img {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(108, 99, 255, 0.15);
  background: #fff;
  display: block;
}
.pix-copy-label {
  width: 100%;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  margin-top: 2px;
}
.pix-copy-row {
  display: flex;
  gap: 8px;
  width: 100%;
}
.pix-copy-input {
  flex: 1;
  font-size: 0.65rem;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid rgba(108, 99, 255, 0.2);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pix-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.pix-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pix-status-indicator.pending {
  background: var(--sun);
  box-shadow: 0 0 6px var(--sun);
  animation: pixPulse 1.4s ease-in-out infinite;
}
.pix-status-indicator.paid {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: none;
}
@keyframes pixPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero-select-sheet,
.challenge-sheet {
  width: min(440px, 100%);
  max-height: min(92dvh, 760px);
  overflow-y: auto;
  background: linear-gradient(180deg, #fff, var(--sky-pale));
  border-radius: 28px;
  padding: 18px 16px 22px;
  box-shadow: 0 20px 50px rgba(42,42,68,0.3);
  animation: slideUp 0.35s ease;
  border: 3px solid rgba(255,255,255,0.8);
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}
.auth-logo-img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(108, 99, 255, 0.35));
}

.hero-select-header { text-align: center; margin-bottom: 12px; }
.hero-select-eyebrow {
  margin: 0;
  font-weight: 800;
  color: var(--sun);
  font-size: 0.85rem;
}
.hero-select-header h2 {
  margin: 4px 0;
  font-family: var(--display);
  color: var(--sky);
  font-size: 1.45rem;
}
.hero-select-sub {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.9rem;
}

.gender-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.gender-btn {
  flex: 1;
  padding: 10px;
  border-radius: 999px;
  font-weight: 800;
  background: #fff;
  color: var(--ink-soft);
  box-shadow: var(--shadow-soft);
}
.gender-btn.active {
  background: var(--sky);
  color: #fff;
}

.hero-select-grid {
  display: grid;
  gap: 10px;
}
.hero-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  text-align: left;
  background: #fff;
  border-radius: 20px;
  padding: 12px;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(108,99,255,0.12);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.hero-card:active { transform: scale(0.98); }
.hero-card:hover { border-color: var(--sky); }
.hero-card-art {
  grid-row: 1 / span 3;
  width: 88px;
  height: 88px;
  border-radius: 20px;
  background: var(--sky-pale);
  display: grid;
  place-items: center;
  font-size: 2.6rem;
}
.hero-card strong {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink);
}
.hero-card-desc {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
  line-height: 1.25;
}
.hero-card-stats {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--sky);
}

/* Challenge */
.challenge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.challenge-header h2 {
  margin: 0;
  font-family: var(--display);
  color: var(--sky);
  font-size: 1.25rem;
}
.sheet-close-x {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(108,99,255,0.12);
  font-weight: 800;
  color: var(--ink-soft);
}
.challenge-art {
  display: grid;
  place-items: center;
  margin: 8px auto 10px;
  width: 120px;
  height: 120px;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 3.5rem;
  animation: floaty 2.2s ease-in-out infinite;
}
.challenge-hint {
  text-align: center;
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin: 0 0 12px;
}
.challenge-bars { display: grid; gap: 10px; margin-bottom: 10px; }
.chal-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.chal-bar-track {
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}
.chal-bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.3s ease;
}
.chal-bar-fill.heart { background: linear-gradient(90deg, var(--pink), var(--danger)); }
.chal-bar-fill.obstacle { background: linear-gradient(90deg, #c4c0e8, #7a74c4); }

.challenge-log {
  max-height: 88px;
  overflow-y: auto;
  background: rgba(255,255,255,0.7);
  border-radius: 14px;
  padding: 8px 10px;
  margin-bottom: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.challenge-log p { margin: 0 0 4px; }

.challenge-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.chal-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 16px;
  background: #fff;
  font-weight: 800;
  font-size: 0.82rem;
  box-shadow: var(--shadow-soft);
  border: 2px solid transparent;
}
.chal-act-emoji { font-size: 1.35rem; }
.chal-act.is-preferred {
  border-color: var(--sun);
  background: #fff6eb;
}
.act-help { color: #2E7D32; }
.act-sing { color: #6C63FF; }
.act-light { color: #E65100; }
.act-share { color: #C2185B; }
.act-flee {
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  color: var(--ink-soft);
  background: rgba(42,42,68,0.06);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(420px, calc(100% - 24px));
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(42,42,68,0.35);
  text-align: center;
  animation: slideUp 0.25s ease;
}

/* ---------- Responsive ---------- */

@media (max-width: 360px) {
  .shortcut-grid { grid-template-columns: repeat(2, 1fr); }
  .hud-brand { display: none; }
  .challenge-actions { grid-template-columns: 1fr 1fr; }
}

/* ---------- Kids Arena (ajuda animada) ---------- */
.kids-arena-overlay {
  align-items: stretch;
  justify-content: center;
  padding: 8px;
  background: rgba(42, 90, 140, 0.35);
  z-index: 10050;
  touch-action: manipulation;
}
.kids-arena-shell {
  width: min(520px, 100%);
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f0f0ff 0%, #fff6eb 55%, #e8f5e9 100%);
  border-radius: 24px;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 18px 48px rgba(42,42,68,0.28);
  overflow: hidden;
  position: relative;
}
.kids-arena-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 4px;
  position: relative;
}
.kids-arena-top h2 {
  flex: 1;
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--sky);
  padding-right: 8px;
}
.kids-arena-diff {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff3e0;
  color: #E65100;
  white-space: nowrap;
  margin-right: 28px;
}
.kids-arena-diff.diff-hard {
  background: #ffebee;
  color: #C62828;
}
.kids-arena-diff.diff-epic {
  background: #e5e5ff;
  color: #4840CC;
}
.kids-arena-hint {
  margin: 0 14px 8px;
  text-align: center;
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.kids-arena-hint.is-waiting { color: var(--sky); }
.kids-arena-start-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  top: auto;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  max-width: min(92%, 320px);
  padding: 8px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(108, 99, 255, 0.28);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.78rem;
  text-align: center;
  line-height: 1.35;
  box-shadow: 0 6px 16px rgba(108, 99, 255, 0.12);
}
  text-align: center;
  box-shadow: 0 6px 16px rgba(108, 99, 255, 0.12);
}
.kids-arena-start-hint strong { color: var(--sky); }
.kids-arena-hud {
  display: grid;
  gap: 6px;
  padding: 0 14px 8px;
}
.kids-arena-stat {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink);
}
.kids-arena-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  overflow: hidden;
  border: 1px solid rgba(108,99,255,0.15);
}
.kids-arena-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  transition: width 0.35s ease;
}
.kids-arena-fill.heart { background: linear-gradient(90deg, var(--pink), var(--danger)); }
.kids-arena-fill.obs { background: linear-gradient(90deg, var(--sky-soft), var(--sky)); }

.kids-arena-ground {
  position: relative;
  flex: 1 1 auto;
  min-height: 160px;
  margin: 0 10px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5), transparent 40%),
    linear-gradient(180deg, #d1d1ff 0%, #c8e6c9 55%, #81c784 100%);
  border: 2px solid rgba(108,99,255,0.15);
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
}
.kids-arena-ground::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 28%;
  background: linear-gradient(180deg, transparent, rgba(90,140,60,0.25));
  pointer-events: none;
}
.kids-arena-sprite {
  position: absolute;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  transition: filter 0.2s ease;
  z-index: 2;
}
.kids-arena-sprite.player { z-index: 3; }
.kids-arena-sprite.obstacle {
  z-index: 4;
  overflow: visible;
  cursor: pointer;
  pointer-events: auto;
}
.kids-arena-sprite-name {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  z-index: 5;
  max-width: 140px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(108, 99, 255, 0.35);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  box-shadow: 0 4px 10px rgba(40, 36, 90, 0.12);
}
.kids-arena-sprite.face-left .kids-arena-sprite-art {
  transform: scaleX(-1);
}
.kids-arena-sprite-name.is-call {
  animation: kidsNameCall 1.1s ease-in-out infinite alternate;
  border-color: var(--sun);
}
.kids-arena-sprite.is-walking { animation: kidsBob 0.35s ease infinite; }
.kids-arena-sprite.is-helping { filter: drop-shadow(0 0 10px rgba(255,169,77,0.7)); }
.kids-arena-sprite.help-pulse { animation: kidsHelp 0.45s ease; }
.kids-arena-sprite.bump { animation: kidsBump 0.4s ease; }
.kids-arena-sprite.tired { animation: kidsTired 0.35s ease; }
.kids-arena-sprite.is-hit { animation: kidsHitShake 0.4s ease; }
.kids-arena-sprite.attack-pulse { animation: kidsAttackPulse 0.3s ease; }
.kids-arena-sprite .kids-hit-flash {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(255, 70, 70, 0.9) 0%,
    rgba(190, 25, 25, 0.65) 42%,
    rgba(120, 10, 10, 0.35) 68%,
    transparent 78%
  );
  box-shadow: inset 0 0 18px rgba(255, 40, 40, 0.55);
  mix-blend-mode: screen;
}
.kids-arena-sprite .kids-hit-flash.active {
  animation: kidsDamageFlash 0.48s ease-out forwards;
}
.kids-arena-ground.is-shake {
  animation: kidsArenaShake 0.38s ease;
}
/* Aviso de giro: pulsa (não gira sem parar). */
.kids-arena-sprite.is-whirl-warn {
  animation: kidsWhirlPulse 0.45s ease infinite alternate;
  filter: drop-shadow(0 0 12px rgba(255, 169, 77, 0.85));
}
/* Impacto do giro: uma volta só. */
.kids-arena-sprite.is-whirling {
  animation: kidsWhirl 0.55s linear 1;
  filter: drop-shadow(0 0 12px rgba(255, 169, 77, 0.85));
}
.kids-arena-sprite-art img {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
  pointer-events: none;
}
@keyframes kidsWhirlPulse {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes kidsWhirl {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.kids-arena-range {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 2px dashed rgba(108,99,255,0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}
.kids-arena-range.is-on {
  opacity: 1;
  background: rgba(108,99,255,0.08);
  box-shadow: 0 0 0 6px rgba(255,169,77,0.12);
}

.kids-arena-whirl {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid var(--sun);
  background: rgba(255,169,77,0.18);
  pointer-events: none;
  z-index: 4;
  animation: kidsWhirlWarn 0.45s ease infinite alternate;
}
@keyframes kidsWhirlWarn {
  from { transform: translate(-50%, -50%) scale(0.92); opacity: 0.7; }
  to { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

.kids-arena-orbs { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.kids-arena-orb {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  pointer-events: auto;
  cursor: pointer;
  z-index: 5;
  animation: kidsOrbFloat 1.2s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(255,100,140,0.4));
}
@keyframes kidsOrbFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 6px)); }
}

.kids-arena-care-btn {
  position: absolute;
  left: 50%;
  bottom: 14px;
  /* translate separado do transform: evita “pulo” ao clicar (.fx-press usa scale) */
  translate: -50% 0;
  z-index: 12;
  pointer-events: auto;
  touch-action: manipulation;
  min-width: 132px;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 900;
  font-size: 0.95rem;
  background: linear-gradient(180deg, var(--sun-soft), var(--sun));
  color: #5a3a18;
  box-shadow: 0 8px 20px rgba(255,169,77,0.45);
}
.kids-arena-care-btn.is-waiting {
  opacity: 0.72;
  cursor: default;
}
.kids-arena-care-btn.is-ready { animation: kidsCarePulse 1s ease infinite; }
@keyframes kidsCarePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.kids-arena-dodge-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 12;
  pointer-events: auto;
  touch-action: manipulation;
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 900;
  font-size: 0.85rem;
  background: #fff;
  color: var(--sky);
  box-shadow: 0 6px 16px rgba(42,42,68,0.2);
  border: 2px solid var(--sun);
  animation: kidsDodgePulse 0.6s ease infinite;
}
@keyframes kidsDodgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.kids-arena-combo {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 6;
  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 900;
  font-size: 0.78rem;
  color: var(--danger);
  box-shadow: var(--shadow-soft);
}

.kids-arena-timing {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: rgba(42, 42, 68, 0.22);
  pointer-events: auto;
}
.kids-arena-timing-ring {
  position: absolute;
  width: 104px;
  height: 104px;
  transform: translate(-50%, -50%);
  z-index: 9;
  pointer-events: auto;
  cursor: pointer;
}
.kids-arena-timing-ring .timing-ring-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 169, 77, 0.85);
  box-shadow: 0 0 16px 4px rgba(255, 169, 77, 0.4);
}
.kids-arena-timing-ring .timing-ring-zone {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  border: 2.5px solid rgba(76, 175, 80, 0.95);
  box-shadow: 0 0 12px 3px rgba(76, 175, 80, 0.45);
  opacity: 0;
  transition: opacity 0.1s ease;
  pointer-events: none;
}
.kids-arena-timing-ring.zone-visible .timing-ring-zone {
  opacity: 1;
  animation: kidsTimingZonePulse 0.3s ease-in-out infinite alternate;
}
@keyframes kidsTimingZonePulse {
  from { box-shadow: 0 0 12px 3px rgba(76, 175, 80, 0.45); }
  to { box-shadow: 0 0 20px 7px rgba(76, 175, 80, 0.7); }
}
.kids-arena-timing-ring .timing-ring-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.35);
  pointer-events: none;
}
.kids-arena-timing-ring .timing-ring-outer.shrinking {
  animation: kidsTimingRingShrink var(--timing-dur, 1000ms) linear forwards;
}
@keyframes kidsTimingRingShrink {
  from { transform: scale(2.35); opacity: 0.9; }
  to { transform: scale(0.12); opacity: 0.2; }
}
.kids-arena-timing-ring.timing-perfect .timing-ring-outer {
  border-color: #4caf50;
  box-shadow: 0 0 28px 10px rgba(76, 175, 80, 0.75);
  animation: none;
  transform: scale(0.55);
}
.kids-arena-timing-ring.timing-good .timing-ring-outer {
  border-color: #ffb74d;
  box-shadow: 0 0 22px 8px rgba(255, 183, 77, 0.7);
  animation: none;
  transform: scale(0.7);
}
.kids-arena-timing-ring.timing-ok .timing-ring-outer {
  border-color: #90caf9;
  box-shadow: 0 0 16px 6px rgba(144, 202, 249, 0.55);
  animation: none;
  transform: scale(0.85);
}
.kids-arena-timing-ring.timing-miss .timing-ring-outer {
  border-color: rgba(180, 180, 190, 0.5);
  box-shadow: none;
  animation: none;
}
.kids-arena-timing-tip {
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  margin: 0;
  width: min(92%, 280px);
  text-align: center;
  font-weight: 800;
  font-size: 0.88rem;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.kids-arena-timing-result {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 9;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--sun);
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
  pointer-events: none;
  animation: kidsFxUp 0.7s ease forwards;
}

.kids-arena-weak-tip {
  margin: 0 14px 8px;
  padding: 5px 12px;
  width: fit-content;
  max-width: calc(100% - 28px);
  border-radius: 999px;
  background: rgba(255, 169, 77, 0.2);
  border: 1.5px solid rgba(255, 169, 77, 0.55);
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--ink);
}
.kids-arena-weak-tip:empty { display: none; }
.arena-act.is-recommended {
  border-color: var(--sun);
  background: linear-gradient(180deg, var(--sun-soft), #fff8ee);
  box-shadow: 0 0 0 3px rgba(255, 169, 77, 0.45);
  font-weight: 900;
}
.arena-act.is-disabled-far { opacity: 0.45; }
@keyframes kidsBob {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 4px)); }
}
@keyframes kidsNameCall {
  from { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 169, 77, 0.45); }
  to { transform: translateX(-50%) scale(1.06); box-shadow: 0 0 0 8px rgba(255, 169, 77, 0); }
}
@keyframes kidsHelp {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes kidsBump {
  0%, 100% { transform: translate(-50%, -50%); }
  30% { transform: translate(calc(-50% + 6px), -50%); }
  60% { transform: translate(calc(-50% - 4px), -50%); }
}
@keyframes kidsTired {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.35) saturate(1.2); }
}
@keyframes kidsHitShake {
  0%, 100% { transform: translate(-50%, -50%); }
  20% { transform: translate(calc(-50% - 5px), -50%); }
  40% { transform: translate(calc(-50% + 5px), -50%); }
  60% { transform: translate(calc(-50% - 3px), -50%); }
  80% { transform: translate(calc(-50% + 2px), -50%); }
}
@keyframes kidsAttackPulse {
  0% { transform: translate(-50%, -50%) scale(1); }
  40% { transform: translate(-50%, -50%) scale(1.14); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes kidsDamageFlash {
  0% { opacity: 0; transform: scale(0.92); }
  12% { opacity: 1; transform: scale(1.06); }
  28% { opacity: 0.55; transform: scale(1); }
  42% { opacity: 0.92; transform: scale(1.03); }
  58% { opacity: 0.35; transform: scale(1); }
  72% { opacity: 0.7; transform: scale(1.01); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes kidsArenaShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 1px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 1px); }
}

.kids-arena-fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.kids-fx {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  animation: kidsFxUp 0.85s ease forwards;
}
.kids-fx-damage {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 1.45rem;
  font-weight: 800;
  color: #e23b4a;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  animation: kidsDmgPop 0.75s ease forwards;
  z-index: 6;
  pointer-events: none;
}
.kids-fx-heal {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 1.2rem;
  font-weight: 800;
  color: #2e9a5a;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.8);
  animation: kidsDmgPop 0.85s ease forwards;
  z-index: 6;
  pointer-events: none;
}
.kids-arena-orb.is-collecting { opacity: 0.45; pointer-events: none; }
.kids-arena-fill.heart.is-heal-pulse {
  animation: kidsHeartPulse 0.65s ease;
}
@keyframes kidsHeartPulse {
  0%, 100% { filter: none; }
  40% { filter: brightness(1.55) saturate(1.3); }
}
@keyframes kidsFxUp {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
  to { opacity: 0; transform: translate(-50%, -120%) scale(1.3); }
}
@keyframes kidsDmgPop {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.7); }
  30% { opacity: 1; transform: translate(-50%, -100%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1); }
}

.kids-arena-log {
  flex: 0 0 auto;
  font-size: 0.75rem;
  line-height: 1.3;
  height: calc(3 * 1.3em + 8px);
  max-height: calc(3 * 1.3em + 8px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 4px 14px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  overflow-wrap: anywhere;
}
.kids-arena-log-line {
  margin: 0;
  line-height: 1.3;
}

.kids-arena-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 12px;
  position: relative;
  z-index: 20;
  flex-shrink: 0;
}
.kids-arena-actions-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.arena-act {
  border-radius: 14px;
  padding: 10px 8px;
  font-weight: 800;
  font-size: 0.72rem;
  background: #fff;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(108,99,255,0.12);
  min-width: 72px;
  flex: 0 1 auto;
}
.arena-act.act-flee {
  width: min(220px, 72%);
  align-self: center;
}
.arena-act:active { transform: scale(0.96); }

.kids-arena-result {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(255,255,255,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  animation: slideUp 0.3s ease;
}
.kids-arena-win { font-family: var(--display); font-size: 1.6rem; color: var(--sun); }
.kids-arena-lose, .kids-arena-flee { font-family: var(--display); font-size: 1.4rem; color: var(--sky); }

.list-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(108,99,255,0.1);
  margin-bottom: 10px;
  text-align: left;
}
.list-card h3 { margin: 0 0 6px; color: var(--sky); font-family: var(--display); font-size: 1.05rem; }
.list-card p { margin: 0 0 10px; color: var(--ink-soft); font-size: 0.85rem; font-weight: 600; }
/* Ação principal solta no card (Sair, Resgatar, Criar, Entrar…): largura total */
.list-card > .btn {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
}
.list-card.list-card-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list-card.list-card-center > .btn,
.list-card.list-card-center .rest-actions .btn {
  width: min(100%, 280px);
  margin-left: auto;
  margin-right: auto;
}
/* Linhas com botão compacto à direita (não esticar) */
.list-card.energy-snack-row > .btn,
.list-card.arena-friend-row > .btn,
.list-card.guild-member-row > .btn,
.list-card.guild-war-opponent-row > .btn,
.guide-footer.list-card > .btn {
  width: auto;
  display: inline-flex;
  margin-top: 0;
}
.rest-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.rest-free-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 52px;
  line-height: 1.15;
}
.rest-free-btn.is-cooldown {
  opacity: 0.92;
  background: #f0f0f6;
  color: var(--ink-soft);
  box-shadow: none;
}
.rest-free-btn-top {
  font-size: 0.78rem;
  font-weight: 700;
}
.rest-free-btn-clock {
  font-size: 1.15rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--sky);
}
.rest-cooldown-track {
  width: min(100%, 280px);
  height: 8px;
  border-radius: 999px;
  background: rgba(108, 99, 255, 0.12);
  overflow: hidden;
}
.rest-cooldown-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sun), var(--sky));
  transition: width 0.35s linear;
}
.rest-cooldown-hint {
  margin: 4px 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}
.rank-pos { width: 28px; color: var(--sun); }
.rank-row.is-me {
  border: 2px solid rgba(108, 99, 255, 0.35);
  background: var(--sky-pale);
}
.rank-row .rank-score { margin-left: auto; color: var(--sky); white-space: nowrap; }
.rank-you {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--sky);
  margin-left: 4px;
}
.race-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
}
.race-actions .btn { width: 100%; }
.race-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.race-code-row code {
  flex: 1;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: var(--sky-pale);
  padding: 8px 10px;
  border-radius: 10px;
}

/* —— Torre dos Passos (andar centralizado + ranking) —— */
.trail-floor-panel {
  background: linear-gradient(165deg, #fff 0%, var(--sky-pale) 100%);
  border: 2px solid rgba(108, 99, 255, 0.16);
  border-radius: var(--radius);
  padding: 20px 16px 18px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  margin-bottom: 16px;
}
.trail-floor-num {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--sky);
  line-height: 1.1;
}
.trail-floor-sub {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 4px 0 12px;
}
.trail-floor-done {
  font-weight: 800;
  color: var(--ink-soft);
  padding: 12px 8px;
}
.trail-next-enemy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px auto 12px;
  max-width: 320px;
  text-align: left;
}
.trail-next-icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(255, 169, 77, 0.35);
}
.trail-next-icon img.asset-trail-enemy,
.trail-next-icon .asset-fallback {
  width: 56px;
  height: 56px;
  object-fit: contain;
  font-size: 2rem;
  line-height: 1;
  display: block;
}
.trail-next-meta { min-width: 0; }
.trail-next-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.trail-next-name {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.2;
}
.trail-next-floor-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sky);
  margin-top: 2px;
}
.trail-next-rewards {
  margin: 0 0 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.trail-floor-panel .btn-block {
  width: min(100%, 280px);
  margin: 0 auto;
}
.trail-rank-title {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--ink);
  margin: 4px 0 10px;
  text-align: center;
}
.trail-rank-list { margin-bottom: 8px; }
.trail-rank-row { text-align: left; }
.trail-rank-hero {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.trail-rank-hero img,
.trail-rank-hero .asset-media {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain;
}
.trail-rank-main { flex: 1; min-width: 0; }
.trail-rank-name {
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trail-rank-sub {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.trail-rank-score {
  margin-left: auto;
  color: var(--sky);
  font-weight: 900;
  font-size: 0.82rem;
  white-space: nowrap;
}
.prepare-card .prepare-timer {
  font-variant-numeric: tabular-nums;
  color: var(--sky);
  font-weight: 800;
}
.prepare-ready-label {
  color: var(--green) !important;
  font-weight: 800 !important;
}
.prepare-progress {
  height: 12px;
  border-radius: 999px;
  background: var(--sky-pale);
  overflow: hidden;
  margin-top: 4px;
}
.prepare-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sun), var(--green));
  transition: width 0.35s linear;
}
.prepare-queue { display: grid; gap: 10px; }

/* ---------- Bancada M?gica ---------- */
.craft-overlay {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  background: rgba(42,42,68,0.45);
}
.craft-overlay.hidden { display: none; }
.craft-bench-shell {
  width: min(440px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 18px 48px rgba(42,42,68,0.28);
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, #fff6eb 0%, #ffe0b2 45%, #ffcc80 100%);
}
.craft-bench-shell.station-padaria { background: linear-gradient(180deg, #fff6eb, #ffe0b2 55%, #ffcc80); }
.craft-bench-shell.station-oficina { background: linear-gradient(180deg, #f0f0ff, #e5e5ff 55%, #d1d1ff); }
.craft-bench-shell.station-jardim { background: linear-gradient(180deg, #f1f8f1, #c8e6c9 55%, #a5d6a7); }
.craft-bench-shell.station-atelie { background: linear-gradient(180deg, #fff0f6, #ffc1e3 55%, #ff6b9d); }
.craft-bench-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 4px;
}
.craft-bench-top h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--sky);
}
.craft-bench-sub {
  margin: 4px 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.craft-progress {
  text-align: center;
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--ink);
  margin: 4px 12px 8px;
}
.craft-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 4px;
}
.craft-score {
  font-size: 0.85rem;
  font-weight: 900;
  color: #E65100;
  white-space: nowrap;
}
.craft-score-dim { opacity: 0.35; }
.craft-score b { color: var(--danger); margin-left: 4px; }
.craft-heat-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  overflow: hidden;
}
.craft-heat-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #81c784, var(--sun-soft), var(--pink));
  transition: width 0.2s ease;
}
.craft-stage {
  position: relative;
  min-height: 340px;
  margin: 0 10px 12px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 70%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.1));
  border: 2px solid rgba(255,255,255,0.55);
  overflow: hidden;
}
.craft-fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.craft-fx {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  animation: kidsFxUp 0.8s ease forwards;
}
.craft-bowl {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #f0f0ff 55%, #d1d1ff);
  box-shadow: inset 0 -10px 20px rgba(42,42,68,0.12), 0 10px 24px rgba(42,42,68,0.18);
  display: grid;
  place-items: center;
  z-index: 2;
  border: 3px solid rgba(255,255,255,0.8);
}
.craft-bowl-emoji { font-size: 2.4rem; }
.craft-bowl.pop { animation: kidsHelp 0.35s ease; }
.craft-bowl.is-mixing { animation: craftSpin 0.7s linear infinite; }
.craft-bowl.is-shine {
  box-shadow: 0 0 0 8px rgba(255,169,77,0.25), 0 12px 28px rgba(255,169,77,0.35);
  animation: craftShine 0.8s ease infinite;
}
@keyframes craftSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes craftShine {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}
.craft-mats {
  position: absolute;
  inset: 8px 8px 40%;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 8px;
  padding: 6px;
}
.craft-mats-free {
  display: block;
  inset: 6px 6px 38%;
}
.craft-mats-free .craft-mat {
  position: absolute;
  animation: craftMatFloat 2.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes craftMatFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.craft-mat {
  position: relative;
  width: 72px;
  border: 0;
  background: #fff;
  border-radius: 16px;
  padding: 8px 4px 6px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  animation: popIn 0.35s ease both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.craft-mat.is-decoy {
  background: #fff8f8;
  border: 2px dashed rgba(255,120,140,0.45);
  opacity: 0.92;
}
.craft-mat-emoji { font-size: 1.6rem; line-height: 1.2; }
.craft-mat:active { transform: scale(0.94); }
.craft-mat.is-flying {
  animation: craftFlyIn 0.38s ease forwards;
  pointer-events: none;
}
.craft-mat.is-wrong {
  animation: craftWrong 0.4s ease forwards;
  pointer-events: none;
}
@keyframes craftFlyIn {
  to { transform: translateY(120px) scale(0.3); opacity: 0; }
}
@keyframes craftWrong {
  0% { transform: scale(1); }
  40% { transform: scale(1.1) rotate(-8deg); }
  100% { transform: translateY(-30px) scale(0.5); opacity: 0; }
}
.craft-mat-name {
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--ink-soft);
  max-width: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.craft-mix {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  background: rgba(42,42,68,0.28);
}
.craft-mix-dial {
  position: relative;
  width: 150px;
  height: 78px;
  border-radius: 150px 150px 0 0;
  background: conic-gradient(from 180deg at 50% 100%,
    var(--pink) 0deg 40deg,
    var(--sun-soft) 40deg 70deg,
    #81c784 70deg 110deg,
    var(--sun-soft) 110deg 140deg,
    var(--pink) 140deg 180deg,
    transparent 180deg 360deg);
  box-shadow: 0 10px 28px rgba(0,0,0,0.2);
  overflow: hidden;
}
.craft-mix-sweet {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34px;
  height: 70px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent);
  pointer-events: none;
}
.craft-mix-needle {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 4px;
  height: 68px;
  margin-left: -2px;
  background: var(--ink);
  border-radius: 4px;
  transform-origin: bottom center;
  transform: rotate(-90deg);
  box-shadow: 0 0 0 2px #fff;
}
.craft-mix-tip {
  margin: 0;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.craft-stir-btn {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 7;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 900;
  background: linear-gradient(180deg, var(--sun-soft), var(--sun));
  color: #5a3a18;
  box-shadow: 0 8px 20px rgba(255,169,77,0.45);
}
.craft-sparks {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.craft-sparks:not(.hidden) { pointer-events: auto; }
.craft-spark {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--sun-soft) 55%, var(--sun));
  font-size: 1.4rem;
  box-shadow: 0 6px 16px rgba(255,169,77,0.45);
  animation: craftSparkBob 0.9s ease-in-out infinite;
  pointer-events: auto;
}
@keyframes craftSparkBob {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, calc(-50% - 8px)) scale(1.08); }
}
.craft-spark.is-caught {
  animation: craftFlyIn 0.25s ease forwards;
  pointer-events: none;
}
.craft-spark.is-fade {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.craft-bless {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}
.craft-bless-track {
  width: min(260px, 80%);
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  overflow: hidden;
  border: 2px solid rgba(255,169,77,0.35);
}
.craft-bless-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--pink), var(--sun), #81c784);
  border-radius: inherit;
}
.craft-bless-btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 900;
  background: linear-gradient(180deg, #ffd6e8, var(--pink));
  color: #7a2040;
  box-shadow: 0 8px 18px rgba(255,107,157,0.35);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.craft-bless-btn.is-holding {
  transform: scale(0.97);
  filter: brightness(1.05);
}
.craft-overlay,
.craft-overlay *,
.craft-stage,
.craft-mat,
.craft-stir-btn,
.craft-spark,
.craft-progress {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.craft-bowl.is-blessing {
  box-shadow: 0 0 0 10px rgba(255,150,180,0.28), 0 12px 28px rgba(255,120,150,0.35);
  animation: craftShine 0.6s ease infinite;
}
.craft-result {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(255,255,255,0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 20px;
  animation: slideUp 0.3s ease;
}
.craft-result-title {
  font-family: var(--display);
  font-size: 1.6rem;
  color: var(--sun);
}
.craft-result-msg { font-weight: 700; color: var(--sky); margin: 0; }
.craft-card-rich .craft-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.craft-card-art { flex-shrink: 0; }
.craft-card.is-locked-craft {
  opacity: 0.78;
  border-color: rgba(255, 107, 107, 0.25);
}
.craft-missing {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--danger, #FF6B6B);
  line-height: 1.3;
}
.craft-card.is-locked-craft .btn[disabled] {
  opacity: 0.85;
  cursor: not-allowed;
}

/* ---- Kids jogo completo: juice / tutorial / casa / álbum ---- */
.fx-burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.fx-particle {
  position: absolute; left: 50%; top: 50%;
  animation: fxPop 0.65s ease forwards;
  font-size: 1.1rem;
}
@keyframes fxPop {
  to { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
.fx-squash { animation: fxSquash 0.22s ease; }
@keyframes fxSquash {
  50% { transform: scale(1.08, 0.92); }
}
.fx-fly {
  position: fixed; z-index: 200; pointer-events: none;
  font-size: 1.4rem; transform: translate(-50%, -50%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease;
}
.fx-confetti {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 20;
}
.fx-confetti-piece {
  position: absolute; top: -8%;
  animation: fxFall 1.1s ease-in forwards;
  font-size: 1rem;
}
@keyframes fxFall {
  to { transform: translateY(var(--fall, 80vh)) rotate(240deg); opacity: 0; }
}
.fx-timing-pop {
  position: fixed; left: 50%; top: 38%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 120; pointer-events: none;
  font-family: var(--display); font-weight: 700; font-size: 1.6rem;
  padding: 8px 16px; border-radius: 16px; background: #fff;
  box-shadow: var(--shadow); animation: fxTimingIn 0.7s ease forwards;
}
.fx-timing-perfect { color: #E65100; background: linear-gradient(180deg, #fff8e8, #ffe0b2); }
.fx-timing-good { color: #2E7D32; background: #e8f5e9; }
.fx-timing-ok { color: var(--sky); }
.fx-timing-miss { color: var(--danger); opacity: 0.9; }
@keyframes fxTimingIn {
  30% { transform: translate(-50%, -50%) scale(1.12); }
  100% { transform: translate(-50%, -60%) scale(1); opacity: 0; }
}
.fx-page-in { animation: fxPageIn 0.28s ease; }
.fx-page-map {
  background-image:
    radial-gradient(600px 200px at 20% 0%, rgba(108,99,255,0.12), transparent 60%),
    radial-gradient(500px 180px at 90% 10%, rgba(255,169,77,0.1), transparent 55%);
}
@keyframes fxPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.fx-guide-bubble {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 15;
  display: none; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.95); border: 2px solid rgba(108,99,255,0.25);
  border-radius: 16px; padding: 8px 12px; font-weight: 800; font-size: 0.82rem;
  box-shadow: var(--shadow-soft); animation: fxGuideBob 1.6s ease-in-out infinite;
}
.fx-guide-bubble.is-on { display: flex; }
.fx-guide-emoji { font-size: 1.2rem; }
@keyframes fxGuideBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.fx-rainbow {
  animation: fxRainbow 0.9s ease;
  box-shadow: 0 0 0 6px rgba(108,99,255,0.2), 0 0 24px rgba(255,169,77,0.35);
}
@keyframes fxRainbow {
  0% { filter: hue-rotate(0deg) saturate(1); }
  50% { filter: hue-rotate(40deg) saturate(1.3); }
  100% { filter: hue-rotate(0deg) saturate(1); }
}
.fx-press { transform: scale(0.96); transition: transform 0.08s ease; }
.kids-arena-care-btn.fx-press,
.kids-arena-dodge-btn.fx-press {
  /* mantém o centramento (translate) e só comprime */
  transform: scale(0.96);
}
.fx-highlight-replay {
  position: absolute; inset: 0; z-index: 18; display: grid; place-items: center;
  background: rgba(255,255,255,0.35); font-family: var(--display);
  font-size: 1.5rem; font-weight: 700; color: var(--sky);
  animation: fxReplay 1.1s ease forwards; pointer-events: none;
}
@keyframes fxReplay {
  0% { opacity: 0; transform: scale(0.8); }
  25% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.1); }
}
/* Casa viva */
.home-hero-banner.is-alive .home-hero-art { animation: fxHeroBob 2.4s ease-in-out infinite; }
@keyframes fxHeroBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.home-chip-row.garden-tier-1 .home-chip-ico,
.home-chip-row.garden-tier-2 .home-chip-ico,
.home-chip-row.garden-tier-3 .home-chip-ico {
  animation: fxGardenPulse 2s ease-in-out infinite;
}
@keyframes fxGardenPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.home-companion-blink .home-chip-ico { animation: fxBlink 1.8s ease-in-out infinite; }
@keyframes fxBlink {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0.35; }
}
.shortcut.is-pulse,
.home-map-panel.is-pulse {
  animation: fxShortcutPulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 2px rgba(108,99,255,0.35);
}
@keyframes fxShortcutPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.home-hello-soft {
  margin: 2px 2px 8px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--display);
  line-height: 1.25;
}
.home-hello-soft strong { color: var(--sky); font-weight: 800; }
#homeOnboardingSlot:empty { display: none; }
.home-chip-row {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0;
  border-radius: 16px;
  background: #fff;
  border: 2px solid rgba(108, 99, 255, 0.14);
  text-align: left;
  min-height: 64px;
  box-shadow: 0 3px 10px rgba(108, 99, 255, 0.05);
  position: relative;
  overflow: visible;
}
button.home-chip-row:active { transform: scale(0.985); }
.home-chip-row.home-week-chip {
  background: linear-gradient(135deg, #f0f0ff, #fff6eb);
}
.home-chip-row.home-chip-compact {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px;
  min-height: 0;
  height: 100%;
  position: relative;
}
.home-chip-compact .home-chip-ico {
  width: 2rem;
  min-height: 2rem;
  font-size: 1.2rem;
}
.home-chip-compact .home-chip-text {
  width: 100%;
  padding-right: 0;
}
.home-chip-compact .home-chip-label { font-size: 0.62rem; }
.home-chip-compact .home-chip-text b {
  font-size: 0.82rem;
  -webkit-line-clamp: 2;
}
.home-chip-compact .home-chip-text small {
  font-size: 0.7rem;
  -webkit-line-clamp: 2;
}
.home-chip-compact .home-chip-pill {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 8px;
  font-size: 0.65rem;
}
.home-chip-compact .home-chip-chevron { display: none; }
.home-chip-ico {
  font-size: 1.55rem;
  line-height: 1;
  width: 2.4rem;
  min-height: 2.4rem;
  text-align: center;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.home-chip-ico img,
.home-chip-art img,
.home-tip-ico img,
.home-movel-mini img {
  display: block;
  object-fit: contain;
  width: 100%;
  height: auto;
}
.home-chip-moveis {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}
.home-movel-mini {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
}
.home-chip-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.home-chip-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sky);
}
.home-chip-text b {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-chip-text small {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6b6b86;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-chip-pill {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--sky-pale, #f0f0ff);
  color: var(--sky);
}
.home-chip-pill.is-hot {
  background: var(--sky);
  color: #fff;
}
.home-chip-pill.is-done {
  background: rgba(76, 175, 80, 0.16);
  color: #2e7d32;
}
.home-chip-chevron {
  flex-shrink: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--sky);
  opacity: 0.7;
  line-height: 1;
}
.home-tip-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px dashed rgba(108, 99, 255, 0.22);
}
.home-tip-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.home-tip-body b {
  font-size: 0.9rem;
  color: var(--ink);
}
.home-tip-body small {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b6b86;
  line-height: 1.35;
}
.home-tip-ico {
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 2px;
  width: 2.5rem;
  min-height: 2.5rem;
  display: grid;
  place-items: center;
}
.home-daily-expanded { margin: 0 0 12px; }
.home-daily-card {
  appearance: none;
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f7f6ff);
  border: 2px solid rgba(108, 99, 255, 0.16);
  box-shadow: 0 4px 14px rgba(108, 99, 255, 0.08);
  text-align: left;
  position: relative;
  overflow: visible;
}
.home-daily-card:active { transform: scale(0.99); }
.home-daily-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-daily-card-head {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}
.home-daily-card-head strong {
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.25;
}
.home-daily-preview {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  color: #5a5a78;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-daily-cta {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--sky);
}
.home-combo-toast {
  text-align: center; font-weight: 800; color: var(--sky);
  padding: 6px; animation: fxPageIn 0.4s ease;
}
/* Mapa */
.nodes-grid .node-cell:not(.node-done) .node-art {
  animation: fxNodeBreath 2.2s ease-in-out infinite;
}
.nodes-grid .node-chest:not(.node-done) {
  animation: fxChestShine 1.8s ease-in-out infinite;
}
@keyframes fxNodeBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes fxChestShine {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,169,77,0); }
  50% { box-shadow: 0 0 0 4px rgba(255,169,77,0.35); }
}
.node-cell.is-walking { outline: 2px solid var(--sky); transform: scale(1.04); }
.map-shell { position: relative; }
/* Craft bounce */
.craft-mats .craft-mat-chip, .craft-mats button {
  transition: transform 0.15s cubic-bezier(0.2, 1.4, 0.3, 1);
}
.craft-mats .craft-mat-chip.is-bounce, .craft-mats button.is-bounce {
  animation: fxMatBounce 0.35s ease;
}
@keyframes fxMatBounce {
  40% { transform: scale(1.18) translateY(-6px); }
  100% { transform: scale(1); }
}
.craft-bowl.is-shake { animation: fxBowlShake 0.35s ease; }
@keyframes fxBowlShake {
  25% { transform: rotate(-6deg) scale(1.04); }
  75% { transform: rotate(6deg) scale(1.04); }
}
/* Arena mini-boss enter */
.kids-arena-ground.is-boss-enter .kids-arena-obstacle {
  animation: fxBossEnter 0.7s ease;
}
@keyframes fxBossEnter {
  from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.trailer-sheet .trailer-emoji {
  font-size: 2.6rem; display: block; margin-bottom: 6px;
  animation: fxBossEnter 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .fx-page-in, .fx-squash, .home-hero-banner.is-alive .home-hero-art,
  .nodes-grid .node-cell:not(.node-done) .node-art,
  .nodes-grid .node-chest:not(.node-done),
  .shortcut.is-pulse,
  .fx-guide-bubble, .craft-bowl.is-shake,
  .home-companion-blink .home-chip-ico { animation: none !important; }
}
.trailer-overlay {
  z-index: 80; display: grid; place-items: center;
  background: rgba(42,42,68,0.55);
}
.trailer-sheet {
  width: min(360px, 92vw); background: #fff; border-radius: 24px;
  padding: 24px 20px; text-align: center;
  box-shadow: var(--shadow);
}
.trailer-label { color: var(--sun); font-weight: 800; margin: 0; }

/* ─────────────────────────────────────────────────────────────
   Tutorial interativo — spotlight, resto escuro e bloqueado
   ───────────────────────────────────────────────────────────── */
.tut-spotlight {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .72);
  pointer-events: none;
  z-index: 10000;
}

html.tut-lock-scroll,
html.tut-lock-scroll body,
html.tut-lock-scroll .main-view {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}
html.tut-lock-scroll .bottom-nav,
html.tut-lock-scroll .kids-arena-overlay {
  touch-action: manipulation;
}

body.kids-arena-open .kids-arena-sprite {
  will-change: left, top;
}
body.kids-arena-open .world-rail-wrap,
body.kids-arena-open .map-wrap,
body.kids-arena-open .wr-ring,
body.kids-arena-open .wr-seal,
body.kids-arena-open .wr-pulse,
body.kids-arena-open .wr-halo,
body.kids-arena-open .wr-here,
body.kids-arena-open .wr-crack,
body.kids-arena-open .wr-veil-mist {
  animation-play-state: paused !important;
}

.bottom-nav.tut-nav-dimmed {
  isolation: isolate;
  overflow: visible;
}
.bottom-nav.tut-nav-dimmed::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  pointer-events: none;
  z-index: 1;
}
.bottom-nav.tut-nav-dimmed .nav-btn:not(.tut-nav-focus) {
  position: relative;
  z-index: 0;
  pointer-events: none;
}
.bottom-nav.tut-nav-dimmed .nav-btn.tut-nav-focus {
  position: relative;
  z-index: 2;
}

#itemActionOverlay.tut-modal-dimmed .generic-modal-sheet,
#jnfGenericModal.tut-modal-dimmed .generic-modal-sheet {
  position: relative;
}
#itemActionOverlay.tut-modal-dimmed .generic-modal-sheet::after,
#jnfGenericModal.tut-modal-dimmed .generic-modal-sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
}
#itemActionOverlay.tut-modal-dimmed .tut-modal-focus,
#jnfGenericModal.tut-modal-dimmed .tut-modal-focus {
  position: relative;
  z-index: 6;
}

.tut-arrow {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(280px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  gap: 2px;
  pointer-events: none;
  z-index: 10002;
  box-sizing: border-box;
}

.tut-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--sun);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  padding: 8px 12px;
  border-radius: 16px;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tut-label-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
}
.tut-label-icon img.asset-tut,
.tut-label-icon .asset-tut {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
.tut-label-text {
  flex: 1 1 auto;
  min-width: 0;
}

.tut-ptr {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 13px solid var(--sun);
  margin-top: 1px;
  animation: tutBounce .55s ease-in-out infinite alternate;
  transform: translateX(var(--tut-ptr-shift, 0px));
}
.tut-arrow--flip { flex-direction: column-reverse; }
.tut-arrow--flip .tut-ptr {
  border-top: none;
  border-bottom: 13px solid var(--sun);
  margin-top: 0;
  margin-bottom: 1px;
  animation: tutBounceFlip .55s ease-in-out infinite alternate;
}
@keyframes tutBounce {
  from { transform: translateX(var(--tut-ptr-shift, 0px)) translateY(0); }
  to   { transform: translateX(var(--tut-ptr-shift, 0px)) translateY(6px); }
}
@keyframes tutBounceFlip {
  from { transform: translateX(var(--tut-ptr-shift, 0px)) translateY(0); }
  to   { transform: translateX(var(--tut-ptr-shift, 0px)) translateY(-6px); }
}

.tut-skip {
  position: fixed;
  left: 50%;
  z-index: 10003;
  pointer-events: auto;
  background: rgba(42, 42, 68, .72);
  border: 1px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .92);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 999px;
  font-family: inherit;
  white-space: nowrap;
  transform: translateX(-50%);
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  top: auto;
}
.tut-skip.tut-skip--hidden {
  display: none;
  pointer-events: none;
}
.tut-skip:hover,
.tut-skip:focus {
  color: #fff;
  background: rgba(42, 42, 68, .88);
  border-color: var(--sun);
  outline: none;
}

.home-onboarding-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 2px solid rgba(108, 99, 255, 0.28);
  background: #fff;
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.home-onboarding-card strong {
  display: block;
  font-size: 0.86rem;
  color: var(--sky);
}
.home-onboarding-card small {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.home-onboarding-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
}
.home-onboarding-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.home-onboarding-arrow {
  margin-left: auto;
  font-size: 1.4rem;
  color: var(--sky);
  font-weight: 800;
}

.onboarding-finale {
  text-align: center;
}
.onboarding-finale-icon {
  font-size: 36px;
  margin-bottom: 8px;
  line-height: 1;
}
.onboarding-finale h3 {
  margin: 0 0 10px;
  color: var(--sky);
  font-size: 1.2rem;
}
.onboarding-finale p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  font-weight: 600;
}
.onboarding-finale-fun {
  margin: 14px 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sky-pale);
  border: 1px solid rgba(108, 99, 255, 0.22);
  color: var(--sky);
  font-weight: 800;
  font-size: 15px;
}

.oficio-intro-hero {
  text-align: center;
  margin-bottom: 8px;
  line-height: 1;
}
.oficio-intro-hero img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.oficio-intro-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.oficio-intro-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(108, 99, 255, 0.12);
}
.oficio-intro-row > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}
.oficio-intro-row strong {
  display: block;
  font-size: 13px;
  color: var(--sky);
  margin-bottom: 2px;
}
.oficio-intro-row small {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.35;
}
.home-status-stack {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 12px;
}
.home-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.home-status-grid > .hidden { display: none !important; }
.home-chip-row.is-done-row { opacity: 0.82; }
@media (max-width: 340px) {
  .home-status-grid { grid-template-columns: 1fr; }
}
.garden-tier-0 { opacity: 0.85; }
.garden-tier-3 { box-shadow: 0 0 0 2px rgba(76,175,80,0.35); }
.album-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.album-slot {
  background: #fff; border-radius: 16px; padding: 14px; text-align: center;
  border: 2px dashed rgba(108,99,255,0.2);
}
.album-slot.owned { border-style: solid; border-color: rgba(108,99,255,0.35); }
.album-slot.empty { opacity: 0.55; }
.album-emoji { font-size: 1.8rem; display: block; }
.home-theme-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  margin-bottom: 4px;
  scrollbar-width: none;
}
.home-theme-row::-webkit-scrollbar { display: none; }
.home-theme-swatch {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid rgba(108, 99, 255, 0.18);
  background: #fff;
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #4a4a6a;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.home-theme-swatch:not(:disabled):active { transform: scale(0.95); }
.home-theme-swatch.is-equipped {
  border-color: var(--sky, #6C63FF);
  background: #f0f0ff;
  color: #3d3d68;
}
.home-theme-swatch.is-locked { opacity: 0.7; }
.home-theme-dot {
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6);
  flex: 0 0 auto;
}
.home-theme-swatch--jardim .home-theme-dot { background: linear-gradient(145deg, #cfe8d8, #a9d9be); }
.home-theme-swatch--praia .home-theme-dot { background: linear-gradient(145deg, #bfe3f5, #ffe7ad); }
.home-theme-swatch--entardecer .home-theme-dot { background: linear-gradient(145deg, #ffc9a0, #ff8fa3); }
.home-theme-swatch--noite .home-theme-dot { background: linear-gradient(145deg, #38406e, #171c38); }

.home-stage { margin-bottom: 10px; }
.home-room-scene {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  border-radius: 24px;
  border: 2px solid rgba(108, 99, 255, 0.18);
  box-shadow: 0 12px 26px rgba(108, 99, 255, 0.12);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #dfe8ff 0%, #f2eeff 46%, #efe6d4 46%, #f6edd8 100%);
}
.home-room-scene[data-theme="praia"] {
  background: linear-gradient(180deg, #bfe9ff 0%, #eaf8ff 46%, #f5e3ad 46%, #fbf0cf 100%);
}
.home-room-scene[data-theme="entardecer"] {
  background: linear-gradient(180deg, #ffc9a0 0%, #ffe0d6 46%, #f0c9a8 46%, #f8dfc4 100%);
}
.home-room-scene[data-theme="noite"] {
  background: linear-gradient(180deg, #1c2350 0%, #2d3568 46%, #24284a 46%, #2e3358 100%);
}
.home-room-scene[data-theme="noite"] .home-hotspot-label { color: #dcdcff; }
.home-room-scene[data-theme="noite"] .home-hotspot { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); }
.home-room-sky {
  position: absolute; inset: 0 0 54% 0;
  background: radial-gradient(ellipse at 70% 15%, rgba(255,255,255,0.55), transparent 60%);
  pointer-events: none;
}
.home-room-wallzone {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px 12px 10px;
}
.home-room-floorzone {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 14px 16px;
  justify-content: flex-end;
}
.home-room-floor-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
}
.home-room-garden {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #3d8b40;
  background: rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: 3px 8px;
}

.home-hotspot {
  appearance: none;
  border: 2px dashed rgba(108, 99, 255, 0.28);
  background: rgba(255,255,255,0.72);
  border-radius: 16px;
  padding: 8px 6px;
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 2px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.home-hotspot.is-filled {
  border-style: solid;
  border-color: rgba(108, 99, 255, 0.45);
  background: #fff;
  box-shadow: 0 6px 14px rgba(108, 99, 255, 0.12);
}
.home-hotspot.is-active {
  border-color: var(--sky, #6C63FF);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18);
  transform: translateY(-2px);
}
.home-room-wallzone .home-hotspot { min-height: 76px; }
.home-hotspot--furniture { min-width: 108px; min-height: 96px; }
.home-hotspot--trophy { min-width: 76px; min-height: 96px; }
.home-hotspot--rug {
  width: 100%;
  min-height: 0;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
}
.home-hotspot--rug .home-hotspot-art { min-height: 0; }
.home-hotspot-art {
  font-size: 1.7rem;
  line-height: 1;
  display: grid;
  place-items: center;
  min-height: 40px;
  position: relative;
}
.home-hotspot-empty-ico { opacity: 0.55; }
.home-hotspot-plus {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--sky, #6C63FF);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}
.home-hotspot-art img,
.home-movel-art img,
.home-furn-emoji img,
.album-emoji img { display: block; object-fit: contain; }
.home-furn-emoji { display: grid; place-items: center; min-height: 56px; }
.home-hotspot-label {
  font-size: 0.62rem;
  font-weight: 800;
  color: #5a5a7a;
  max-width: 92px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-slot-hint { margin: 4px 0 10px; font-size: 0.85rem; font-weight: 700; }
.home-catalog {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-furn-emoji { font-size: 1.8rem; line-height: 1.1; }
.home-furn-row.is-selected {
  border-color: var(--sky, #6C63FF);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
  background: #f7f6ff;
}
.home-furn-row.is-locked {
  opacity: 0.7;
  background: #f7f7fb;
}
.home-furn-row.rarity-raro:not(.is-locked) { border-color: rgba(61, 139, 253, 0.4); }
.home-furn-row.rarity-epico:not(.is-locked) { border-color: rgba(155, 99, 255, 0.45); }
.home-furn-row.rarity-lendario:not(.is-locked) {
  border-color: rgba(240, 168, 48, 0.55);
  box-shadow: 0 0 0 2px rgba(240, 168, 48, 0.18);
}
.home-furn-row.is-clear { border-style: dashed; }
.home-room-scene.garden-tier-2 { box-shadow: 0 10px 24px rgba(76, 175, 80, 0.14); }
.home-room-scene.garden-tier-3 {
  box-shadow: 0 10px 28px rgba(76, 175, 80, 0.22), 0 0 0 2px rgba(76,175,80,0.28);
}
.home-mini-room {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f0f0ff, #fff8ef);
  border: 2px solid rgba(108, 99, 255, 0.14);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.home-mini-room-pieces {
  display: inline-flex;
  gap: 6px;
  font-size: 1.35rem;
  line-height: 1;
}
.home-mini-room-text { display: grid; gap: 1px; }
.home-mini-room-text b { color: #3d3d68; font-size: 0.9rem; }
.home-mini-room-text span { color: #7a7a96; font-size: 0.75rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .home-hotspot, .home-furn-row, .home-theme-swatch { transition: none; }
}
.map-phase { font-weight: 800; color: var(--sky); margin: 0 0 8px; }
.map-boss-btn { width: 100%; margin-bottom: 10px; }
#inviteCodeIn {
  width: 100%; padding: 12px; border-radius: 12px; border: 2px solid #d1d1ff;
  font-weight: 800; margin: 8px 0 10px;
}

/* ---------- Manual / guia ---------- */
.guide-tools {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(108, 99, 255, 0.08);
}
.guide-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sky-pale);
  border-radius: 999px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.guide-search-icon { flex-shrink: 0; }
.guide-search {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.guide-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.guide-cat {
  border: 2px solid rgba(108, 99, 255, 0.14);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
}
.guide-cat.active {
  background: var(--sky-pale);
  border-color: rgba(108, 99, 255, 0.4);
  color: var(--sky);
}
.guide-group { margin-bottom: 14px; }
.guide-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.guide-group-icon { font-size: 1.2rem; }
.guide-group-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.guide-group-text strong {
  font-family: var(--display);
  color: var(--sky);
  font-size: 0.95rem;
}
.guide-group-text span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}
.guide-section {
  background: #fff;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(108, 99, 255, 0.08);
  overflow: hidden;
}
.guide-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 800;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.guide-section-title { flex: 1; }
.guide-section-chevron {
  color: var(--muted);
  transition: transform 0.2s ease;
}
.guide-section.open .guide-section-chevron { transform: rotate(180deg); }
.guide-section-body {
  display: none;
  padding: 0 12px 12px;
}
.guide-section.open .guide-section-body { display: block; }
.guide-section-lead {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.guide-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.guide-list b { color: var(--sky); font-weight: 800; }
.guide-empty {
  text-align: center;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 16px 8px;
}
.guide-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.guide-footer .btn { width: auto; }

.craft-card.needs-manual {
  border-color: rgba(255, 169, 77, 0.45);
  background: linear-gradient(180deg, #fffaf0, #fff);
}

/* ---------- Modal de perfil / stats ---------- */
#playerProfileOverlay { z-index: 90; }
.player-profile-sheet {
  width: min(400px, 100%);
  max-height: min(88dvh, 720px);
  overflow-y: auto;
  background: linear-gradient(180deg, #fff, var(--sky-pale));
  border-radius: 24px;
  padding: 16px 14px 18px;
  box-shadow: 0 20px 50px rgba(42, 42, 68, 0.28);
  border: 3px solid rgba(255, 255, 255, 0.85);
  animation: slideUp 0.3s ease;
}
.player-profile-loading,
.player-profile-error {
  text-align: center;
  color: var(--ink-soft);
  padding: 16px 8px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
}
.player-profile-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.player-profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 3px solid rgba(108, 99, 255, 0.35);
  background: radial-gradient(circle at 30% 30%, #fff, var(--sky-pale));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(108, 99, 255, 0.18);
}
.player-profile-avatar img,
.player-profile-avatar .asset-profile {
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.player-profile-identity {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.player-profile-currencies {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}
.player-profile-currency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink);
  background: #fff;
  border-radius: 999px;
  padding: 3px 8px;
  box-shadow: var(--shadow-soft);
}
.player-profile-currency img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.player-profile-name {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--sky);
  line-height: 1.15;
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-profile-class {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-weight: 700;
  margin-top: 3px;
}
.player-profile-power {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}
.player-profile-power-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.player-profile-power-value {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--sun);
}
.player-profile-vip {
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--sun), #ff7a59);
  border-radius: 999px;
  padding: 2px 7px;
  vertical-align: middle;
}
.player-profile-section { margin-bottom: 10px; }
.player-profile-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.player-profile-xpbar { margin-bottom: 8px; }
.player-profile-xpbar .hud-progress-track { height: 18px; }
.player-profile-xpbar .home-progress-overlay,
.player-profile-xpbar .home-progress-label,
.player-profile-xpbar .home-progress-value { font-size: 0.72rem; }
.player-profile-stats {
  display: grid;
  gap: 6px;
}
.player-profile-stats--attrs {
  grid-template-columns: 1fr 1fr;
}
.player-profile-stats--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.player-profile-attr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: var(--shadow-soft);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.player-profile-attr strong {
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.player-profile-stat {
  background: #fff;
  border-radius: 12px;
  padding: 8px 6px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.player-profile-stat span {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 2px;
}
.player-profile-stat strong {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--sky);
}
.player-profile-stat small {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: 2px;
}
.player-profile-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-soft);
}
.player-profile-inline span {
  background: #fff;
  border-radius: 999px;
  padding: 5px 10px;
  box-shadow: var(--shadow-soft);
}
.player-profile-close { margin-top: 4px; width: 100%; }

/* ---- Passe mensal (timeline Ordem → Kids) ---- */
.passe-header { margin: 0 0 12px; }
.passe-offer-row { margin: 0; }
.passe-owned-badge {
  font-size: 0.78rem;
  font-weight: 800;
  color: #2e7d32;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e8f5e9;
  border: 1px solid rgba(46,125,50,.28);
  flex-shrink: 0;
  white-space: nowrap;
}
.passe-buy-btn {
  flex-shrink: 0;
  min-width: 96px;
  padding: 8px 12px;
  line-height: 1.15;
  font-size: 0.85rem;
}
.passe-buy-pix {
  font-size: 0.65rem;
  font-weight: 700;
  opacity: 0.85;
}
.passe-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.passe-toolbar-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.passe-nav { display: flex; gap: 6px; }
.passe-nav-btn {
  background: #fff;
  border: 2px solid rgba(108,99,255,0.15);
  color: var(--ink);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}
.passe-timeline-shell {
  position: relative;
  border: 2px solid rgba(108,99,255,0.12);
  border-radius: 16px;
  background: linear-gradient(180deg, #f7f6ff, #fff);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.passe-timeline {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 14px 16px 16px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.passe-timeline:active { cursor: grabbing; }
.passe-day-col {
  flex: 0 0 112px;
  width: 112px;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.passe-day-num {
  align-self: center;
  min-width: 40px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 2px solid rgba(108,99,255,0.15);
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--ink-soft);
}
.passe-day-col.is-today .passe-day-num {
  color: #5a3a18;
  background: linear-gradient(135deg, var(--sun-soft), var(--sun));
  border-color: transparent;
}
.passe-day-col.is-milestone .passe-day-num {
  box-shadow: 0 0 0 2px rgba(108,99,255,.35);
}
.passe-day-line {
  height: 3px;
  border-radius: 99px;
  background: rgba(108,99,255,0.12);
  position: relative;
  margin: 2px 8px 4px;
}
.passe-day-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--sky);
  box-shadow: 0 0 10px rgba(108,99,255,.4);
}
.passe-day-col.is-locked .passe-day-line::after {
  background: #c5c5d0;
  box-shadow: none;
}
.passe-reward-card {
  position: relative;
  min-height: 118px;
  padding: 10px 8px 8px;
  border-radius: 12px;
  border: 2px solid rgba(108,99,255,0.12);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.passe-reward-card.premium {
  height: 152px;
  min-height: 152px;
  max-height: 152px;
  box-sizing: border-box;
  flex-shrink: 0;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(255,169,77,.28), transparent 55%),
    linear-gradient(165deg, #fff8ef 0%, #fff 55%, #f3f0ff 100%);
  border-color: rgba(255,169,77,.45);
}
.passe-reward-card.premium .passe-premium-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,220,140,.35) 48%, transparent 62%);
  background-size: 220% 100%;
  animation: passe-premium-sheen 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes passe-premium-sheen {
  0%, 100% { background-position: 120% 0; }
  50% { background-position: -40% 0; }
}
.passe-reward-card.premium > *:not(.passe-premium-sheen):not(.passe-lock-badge) {
  position: relative;
  z-index: 1;
}
.passe-reward-card.premium.milestone {
  border-color: rgba(255,169,77,.75);
  box-shadow: 0 0 0 2px rgba(255,169,77,.2), var(--shadow);
}
.passe-reward-card.locked {
  opacity: .5;
  filter: grayscale(.35);
}
.passe-reward-card.premium.locked {
  opacity: .72;
  filter: saturate(.75) brightness(.95);
}
.passe-reward-card.claimed {
  border-color: rgba(76,175,80,.4);
  background: #f1f8f1;
  box-shadow: none;
}
.passe-reward-card.premium.claimed {
  background: linear-gradient(165deg, #eef8ef 0%, #fff 100%);
  border-color: rgba(76,175,80,.5);
}
.passe-reward-card.premium.need-pass {
  filter: brightness(.92) saturate(.9);
}
.passe-lock-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  background: linear-gradient(145deg, #fff3e0, #ffe0b2);
  border: 1px solid rgba(255,169,77,.55);
}
.passe-track-tag {
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.passe-reward-card.premium .passe-track-tag {
  color: #c17812;
}
.passe-reward-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 2px 0;
  font-size: 1.35rem;
  line-height: 1;
}
.passe-reward-icon img.asset-passe,
.passe-reward-icon .asset-passe,
.passe-reward-icon .asset-passe-hero {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}
.passe-reward-text {
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.25;
  min-height: 28px;
  color: var(--ink);
}
.passe-reward-card.premium .passe-reward-text {
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.passe-claim-btn {
  margin-top: auto;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 7px 6px;
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, var(--sky), var(--sky-soft));
  color: #fff;
}
.passe-claim-btn--premium {
  background: linear-gradient(135deg, #f0a13a, var(--sun) 45%, #e89420);
  color: #5a3a18;
}
.passe-claim-btn--locked {
  background: #fff3e0 !important;
  color: #c17812 !important;
  border: 1px solid rgba(255,169,77,.35);
}
.passe-claim-btn:disabled {
  cursor: default;
  background: #ececf2;
  color: #9a9aab;
}
.passe-claim-btn.claimed {
  background: #e8f5e9;
  color: #2e7d32;
}
.passe-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* —— Grande Obstáculo semanal (paridade Ordem: monstro + 2 ataques/dia) —— */
.world-boss-card {
  background: linear-gradient(160deg, #fff8ef 0%, #fff 45%, var(--sky-pale) 100%);
  border: 2px solid rgba(108, 99, 255, 0.22);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 10px 28px rgba(42, 42, 68, 0.08);
}
.world-boss-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 169, 77, 0.18) 0%, transparent 65%);
  pointer-events: none;
}
.world-boss-icon {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bossFloat 3s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
.world-boss-icon .asset-boss-card,
.world-boss-icon img.asset-boss {
  width: 112px;
  height: 112px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(42, 42, 68, 0.18));
}
@keyframes bossFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.world-boss-name {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.world-boss-subtitle {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.world-boss-hp-bar {
  width: 100%;
  height: 14px;
  background: rgba(42, 42, 68, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0;
  border: 1px solid rgba(108, 99, 255, 0.18);
  position: relative;
  z-index: 1;
}
.world-boss-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sky-soft), var(--sky) 55%, #ff7eb3);
  border-radius: 999px;
  transition: width 0.8s ease;
}
.world-boss-hp-label {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  position: relative;
  z-index: 1;
}
.world-boss-hp-pct {
  color: var(--sky);
  font-weight: 900;
}
.world-boss-participants {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: 8px;
  position: relative;
  z-index: 1;
}
.world-boss-card.defeated {
  background: linear-gradient(160deg, #eefaf0, #fff);
  border-color: rgba(76, 175, 80, 0.35);
}
.world-boss-card.defeated .world-boss-icon {
  filter: grayscale(0.35);
  animation: none;
}
.world-boss-defeated-banner {
  background: linear-gradient(90deg, rgba(76, 175, 80, 0.12), rgba(129, 199, 132, 0.22), rgba(76, 175, 80, 0.12));
  border: 1px solid rgba(76, 175, 80, 0.4);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-weight: 900;
  font-size: 0.95rem;
  color: #2e7d32;
  margin: 10px 0 0;
  position: relative;
  z-index: 1;
}
.boss-attempt-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 14px;
}
.boss-attempt-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(108, 99, 255, 0.35);
}
.boss-attempt-dot.used {
  background: var(--sky);
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
}
.boss-my-stats {
  background: #fff;
  border: 1px solid rgba(42, 42, 68, 0.08);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 4px;
  display: flex;
  gap: 14px;
  justify-content: center;
}
.boss-my-stat { text-align: center; }
.boss-my-stat-val {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--sky);
}
.boss-my-stat-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.world-boss-done-msg {
  text-align: center;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 8px;
}
#bsBox .btn-block {
  width: 100%;
}

/* —— Talentos de Coleta (linha + progresso, sem treinar) —— */
.professions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profession-card {
  background: #fff;
  border: 2px solid rgba(108, 99, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 12px 12px 10px;
  box-shadow: var(--shadow-soft);
}
.profession-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.profession-icon {
  font-size: 1.85rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(145deg, var(--sky-pale), #fff);
  border-radius: 14px;
  border: 1px solid rgba(108, 99, 255, 0.14);
}
.profession-meta { flex: 1; min-width: 0; }
.profession-name {
  font-size: 0.98rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.15;
}
.profession-level {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: 2px;
}
.profession-bonus {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.profession-xp-bar.bar,
.bar.profession-xp-bar {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: rgba(108, 99, 255, 0.1);
  overflow: hidden;
}
.profession-xp-bar .bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sun-soft), var(--sun) 40%, var(--sky));
  transition: width 0.4s ease;
}
.profession-xp-bar .bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--ink);
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.professions-hint {
  margin: 14px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1.4;
  text-align: center;
}

/* —— Recuperar Alegria (atalhos Ordem) —— */
.energy-panel {
  background: linear-gradient(165deg, #fff 0%, #fff8ef 55%, var(--sky-pale) 100%);
  border: 2px solid rgba(255, 169, 77, 0.28);
  border-radius: var(--radius);
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  margin-bottom: 14px;
}
.energy-hero {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
}
.energy-hero-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(42, 42, 68, 0.12));
}
.energy-hero-fallback {
  position: absolute;
  font-size: 2.4rem;
  line-height: 1;
  opacity: 0.15;
  pointer-events: none;
}
.energy-hero:has(.energy-hero-img[src]) .energy-hero-fallback { display: none; }
.energy-value {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--sun);
  line-height: 1.1;
}
.energy-bar {
  margin: 10px auto 0;
  max-width: 220px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 169, 77, 0.18);
  overflow: hidden;
}
.energy-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sun-soft), var(--sun) 50%, #ff7eb3);
  transition: width 0.45s ease;
}
.energy-status {
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink-soft);
}
.energy-status.is-full { color: #2e7d32; }
.energy-regen { margin: 6px 0 0; font-size: 0.78rem; }
.energy-section-title {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--ink);
  margin: 4px 0 8px;
  text-align: center;
}
.energy-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}
.energy-actions .btn-block { width: 100%; }
.energy-cost { opacity: 0.9; font-weight: 800; }
.energy-rate-hint {
  margin: 4px 0 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1.35;
}
.energy-snack-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.energy-snack-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.energy-snack-main strong {
  font-size: 0.92rem;
  color: var(--ink);
}
#goShopEnergy { margin-bottom: 14px; }
.shop-item-row.is-shop-focus {
  border-color: var(--sun);
  box-shadow: 0 0 0 3px rgba(255, 169, 77, 0.28);
}

/* —— Arena hub (Clássica / Treinar com amigo) —— */
.arena-mode-grid {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}
.arena-mode-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 14px 14px;
  border-radius: var(--radius);
  border: 2px solid rgba(108, 99, 255, 0.16);
  background: linear-gradient(165deg, #fff 0%, var(--sky-pale) 100%);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  font: inherit;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.arena-mode-card:hover,
.arena-mode-card:focus {
  border-color: var(--sky);
  outline: none;
  transform: translateY(-1px);
}
.arena-mode-icon {
  font-size: 1.85rem;
  line-height: 1;
  margin-bottom: 8px;
}
.arena-mode-title {
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--sky);
  margin-bottom: 4px;
}
.arena-mode-desc {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1.4;
}
.arena-mode-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(108, 99, 255, 0.12);
  color: var(--sky);
  border: 1px solid rgba(108, 99, 255, 0.28);
}
.arena-mode-badge--friend {
  background: rgba(255, 169, 77, 0.16);
  color: #c17812;
  border-color: rgba(255, 169, 77, 0.4);
}
.arena-classic-panel .arena-stat-big {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--sky);
  line-height: 1.1;
}
.arena-wl {
  margin: 8px 0 14px;
  font-weight: 700;
  color: var(--ink-soft);
}
.arena-section-title {
  font-size: 0.92rem;
  font-weight: 900;
  text-align: center;
  margin: 16px 0 8px;
  color: var(--ink);
}
.arena-result { margin-top: 10px; width: 100%; }
.arena-friend-intro {
  text-align: center;
  margin: 0 0 12px;
  font-size: 0.82rem;
  line-height: 1.4;
}
.arena-friend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.arena-friend-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.arena-friend-main strong {
  font-size: 0.92rem;
  color: var(--ink);
}

/* ---------- Guilda avançada (2.10–2.15) ---------- */
.guild-header-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(108,99,255,0.12);
  margin-bottom: 12px;
}
.guild-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.guild-emblem-big {
  font-size: 2.4rem;
  line-height: 1;
  flex-shrink: 0;
}
.guild-header-meta { min-width: 0; flex: 1; }
.guild-header-meta h3 {
  margin: 0;
  font-family: var(--display);
  color: var(--sky);
  font-size: 1.1rem;
}
.guild-header-meta .muted { margin: 2px 0 0; font-size: 0.8rem; }
.guild-header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-soft);
}
.guild-header-stats span {
  background: rgba(108,99,255,0.08);
  border-radius: 999px;
  padding: 4px 10px;
}
.guild-desc {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
}
.guild-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.guild-header-actions .btn { flex: 1; min-width: 110px; }

.guild-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 2px 2px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: thin;
}
.guild-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 1.2;
  background: rgba(108, 99, 255, 0.1);
  color: var(--ink-soft);
  cursor: pointer;
}
.guild-tab.active {
  background: var(--sky);
  color: #fff;
}
.bar.guild-bar {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: rgba(108, 99, 255, 0.1);
  overflow: hidden;
  margin-top: 8px;
}
.guild-bar .bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sun-soft), var(--sun) 40%, var(--sky));
  transition: width 0.4s ease;
}
.guild-bar .bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.guild-role-badge {
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(108,99,255,0.12);
  color: var(--sky);
}
.guild-role-badge.leader { background: #FFF3D6; color: #B8860B; }
.guild-role-badge.vice { background: #E1F5FE; color: #0277BD; }
.guild-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.guild-member-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.guild-member-main strong { font-size: 0.9rem; color: var(--ink); }
.guild-member-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.guild-member-actions .btn { font-size: 0.7rem; padding: 6px 10px; }
.guild-mission-card .guild-bar { margin-top: 6px; }
.guild-mission-contrib {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}
.guild-donate-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.guild-donate-row input {
  flex: 1;
}
.guild-quick-amounts {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.guild-quick-amounts .btn {
  padding: 6px 12px;
  font-size: 0.75rem;
}
.guild-emblem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}
.guild-emblem-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 16px;
  padding: 12px 8px;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(108,99,255,0.1);
  cursor: pointer;
}
.guild-emblem-item.is-equipped { border-color: var(--sky); background: rgba(108,99,255,0.06); }
.guild-emblem-item.is-locked { opacity: 0.4; cursor: not-allowed; }
.guild-emblem-glyph { font-size: 1.8rem; }
.guild-emblem-name { font-size: 0.68rem; font-weight: 700; text-align: center; color: var(--ink-soft); }
.guild-war-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink-soft);
  margin-top: 6px;
}
.guild-war-opponent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.guild-fight-log {
  font-size: 0.74rem;
  color: var(--muted);
  margin: 4px 0;
}

/* ═══════════════════════════════════════════════════════════
   Ranqueado em tempo real (PvP via WebSocket) — item 2.16-2.19
   ═══════════════════════════════════════════════════════════ */
.ranked-shell {
  width: min(480px, 100%);
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f0f0ff 0%, #fff6eb 55%, #e8f5e9 100%);
  border-radius: 24px;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 18px 48px rgba(42,42,68,0.28);
  overflow: hidden;
  margin: auto;
}
.ranked-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 4px;
}
.ranked-top h2 {
  flex: 1;
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--sky);
}
.ranked-body {
  padding: 10px 14px 16px;
  overflow-y: auto;
}

.ranked-hero-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ranked-vs-badge {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--sun);
  flex-shrink: 0;
}
.ranked-fighter {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ranked-fighter-name {
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ranked-fighter-portrait {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.75);
  border: 2px solid rgba(108,99,255,0.18);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ranked-fighter-portrait img { width: 100%; height: 100%; object-fit: contain; }
.ranked-fighter.is-turn .ranked-fighter-portrait {
  box-shadow: 0 0 0 3px var(--sun);
  transform: scale(1.06);
}
.ranked-fighter-portrait.is-hit { animation: kidsBump 0.3s ease; }
.ranked-bars { width: 100%; display: grid; gap: 4px; }
.ranked-bar-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
}
.ranked-heart-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(108,99,255,0.15);
  overflow: hidden;
}
.ranked-heart-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pink), var(--danger));
  transition: width 0.35s ease;
}
.ranked-sp-row { display: flex; gap: 3px; justify-content: center; margin-top: 2px; }
.ranked-sp-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(108,99,255,0.18);
}
.ranked-sp-pip.is-filled { background: var(--sky); }

.ranked-status-banner {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--danger);
  min-height: 16px;
}
.ranked-turn-banner {
  text-align: center;
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--ink);
  margin: 10px 0 4px;
  min-height: 22px;
}
.ranked-timer-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(108,99,255,0.15);
  overflow: hidden;
  margin-bottom: 10px;
}
.ranked-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sun), var(--pink));
  width: 100%;
  transition: width 0.2s linear;
}
.ranked-timer-fill.is-urgent { background: linear-gradient(90deg, var(--danger), var(--pink)); }

.ranked-log {
  min-height: 40px;
  max-height: 64px;
  overflow-y: auto;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  padding: 4px 6px;
  margin-bottom: 8px;
}
.ranked-log-line { margin: 2px 0; }

.ranked-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0 6px;
}
.ranked-actions-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.ranked-act-btn {
  border-radius: 14px;
  padding: 10px 10px;
  font-weight: 800;
  font-size: 0.72rem;
  background: #fff;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(108,99,255,0.12);
  min-width: 78px;
  flex: 0 1 auto;
}
.ranked-act-btn:active { transform: scale(0.96); }
.ranked-act-btn:disabled { opacity: 0.4; }
.ranked-act-btn.act-defend-block { border-color: rgba(76,175,80,0.4); }
.ranked-act-btn.act-defend-dodge { border-color: rgba(108,99,255,0.4); }
.ranked-act-btn.act-defend-counter { border-color: rgba(255,169,77,0.5); }
.ranked-act-btn.act-ability { border-color: var(--sun); box-shadow: 0 0 0 2px rgba(255,169,77,0.25); }
.ranked-reaction-btn {
  border-radius: 999px;
  width: 52px;
  height: 52px;
  font-size: 1.3rem;
  background: radial-gradient(circle, #fff, var(--sky-pale));
  border: 2px solid var(--pink);
  box-shadow: 0 0 0 4px rgba(255,107,157,0.18);
  animation: rankedPulse 1.1s ease-in-out infinite;
  margin: 4px auto;
  display: block;
}
@keyframes rankedPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.ranked-search-wrap, .ranked-end-wrap {
  text-align: center;
  padding: 24px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ranked-search-spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 5px solid rgba(108,99,255,0.15);
  border-top-color: var(--sky);
  animation: rankedSpin 0.9s linear infinite;
}
@keyframes rankedSpin { to { transform: rotate(360deg); } }
.ranked-search-title { font-family: var(--display); font-size: 1.2rem; color: var(--sky); margin: 0; }
.ranked-search-sub { color: var(--ink-soft); font-size: 0.85rem; margin: 0; }

.ranked-end-title { font-family: var(--display); font-size: 1.6rem; margin: 0; }
.ranked-end-title.is-win { color: var(--sun); }
.ranked-end-title.is-loss { color: var(--sky); }
.ranked-end-title.is-draw { color: var(--ink-soft); }
.ranked-end-points {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
}
.ranked-end-points.is-pos { color: var(--green); }
.ranked-end-points.is-neg { color: var(--danger); }
.ranked-end-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.ranked-hub-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
  margin-bottom: 10px;
}
.ranked-hub-stat b { display: block; font-size: 1.1rem; color: var(--sky); }
.ranked-hub-stat span { font-size: 0.68rem; color: var(--ink-soft); font-weight: 700; }
.ranked-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 2px;
  border-bottom: 1px solid rgba(108,99,255,0.08);
}
.ranked-history-row.is-win { color: var(--green); }
.ranked-history-row.is-loss { color: var(--danger); }