/* =====================================================================
   McCrea · visual inspirado no menu do Wii U (vidro, blocos, azul e verde)
   e mundo de cupons no estilo do mapa do Super Mario Bros. Wii.
   Temas: claro (padrão) e escuro (segue o sistema ou a escolha no topo).
   ===================================================================== */
:root {
  --azul:#1aa3e8; --azul-escuro:#0b6fb0; --azul-claro:#e3f4ff;
  --verde:#2fb24c; --verde-escuro:#1b7a31; --verde-claro:#ddf5e1;
  --amarelo:#ffcc1a; --laranja:#ff8a1f; --vermelho:#e5483d;

  --fundo:#f3f7fa; --fundo-linha:rgba(140,170,195,.09);
  --superficie:#fff; --tinta:#33465a; --suave:#7b8c9b; --linha:#dde7ef;
  --vidro:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.82) 48%, rgba(238,247,255,.74) 52%, rgba(255,255,255,.9) 100%);
  --vidro-borda:rgba(255,255,255,.95);
  --sombra:0 8px 24px rgba(25,80,125,.13), 0 1px 2px rgba(25,80,125,.08), inset 0 1px 0 #fff;
  --topo:linear-gradient(180deg, #fff 0%, #f6fafd 55%, #eaf3fa 100%); --topo-borda:#d3e1ec;
  --btn-branco:linear-gradient(180deg, #fff 0%, #f6fafd 50%, #e8f1f8 51%, #fff 100%); --btn-branco-lip:#c6d6e3; --btn-branco-txt:var(--azul-escuro);
  --campo:#fff; --campo-borda:#cfdde8;
  --veu:rgba(200,225,245,.55);
  --msg-ok-fundo:#e9f8ec; --msg-ok:#1b6b2e; --msg-erro-fundo:#fdecea; --msg-erro:#a8261d;
  /* cenário do mundo */
  --ceu:linear-gradient(180deg, #7ccdfc 0%, #b9e5ff 65%, #dff3ff 100%);
  --colina:#57c95a; --colina-borda:#3ea844; --colina-clara:#8fe08a; --nuvem:#fff; --estrelas:0;
  --raio:24px;
  color-scheme:light;

  /* Easing: cada curva tem uma função (nunca o "ease" padrão) */
  --ease-entra:cubic-bezier(.22, 1, .36, 1);    /* chegando: rápido no início, pousa suave */
  --ease-sai:cubic-bezier(.55, 0, 1, .45);      /* saindo: acelera para fora */
  --ease-estado:cubic-bezier(.65, 0, .35, 1);   /* mudança de estado visível */
  --ease-flutua:cubic-bezier(.37, 0, .63, 1);   /* senoide (flutuação do avatar) */
  /* Molas em CSS puro (linear()): ~12% e ~25% de overshoot */
  --mola:linear(0, .057, .195, .374, .561, .733, .877, .987, 1.063, 1.107, 1.125, 1.124, 1.11, 1.089, 1.065, 1.042, 1.023, 1.007, .996, .988, .985, .984, .985, .988, .991, .993, .996, .998, 1, 1.001, 1.002, 1.002, 1.002, 1.002, 1.001, 1.001, 1);
  --mola-viva:linear(0, .077, .266, .509, .754, .965, 1.122, 1.216, 1.253, 1.242, 1.199, 1.139, 1.076, 1.02, .977, .949, .937, .937, .947, .961, .977, .992, 1.004, 1.012, 1.016, 1.016, 1.014, 1.011, 1.007, 1.003, 1, .997, .996, .996, .996, .997, 1);
  --dir:1;   /* direção da troca de tela (1 = avança, -1 = volta) */
}

/* ---------- tema escuro (mesmos tokens, outros valores) ---------- */
@media (prefers-color-scheme:dark) {
  :root:not([data-tema="claro"]) {
    --azul-claro:#17324a; --verde-claro:#18361f;
    --fundo:#0f1722; --fundo-linha:rgba(120,150,180,.05);
    --superficie:#1b2635; --tinta:#e3ecf5; --suave:#93a5b8; --linha:#2c3b4f;
    --vidro:linear-gradient(180deg, rgba(38,52,71,.94) 0%, rgba(31,43,60,.88) 48%, rgba(27,38,54,.86) 52%, rgba(33,46,64,.92) 100%);
    --vidro-borda:rgba(255,255,255,.08);
    --sombra:0 8px 24px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
    --topo:linear-gradient(180deg, #1d2a3b 0%, #18233282 100%), #172231; --topo-borda:#263447;
    --btn-branco:linear-gradient(180deg, #33445b 0%, #2b3b50 50%, #243347 51%, #2e3f55 100%); --btn-branco-lip:#111a26; --btn-branco-txt:#8fd6ff;
    --campo:#142030; --campo-borda:#2f4058;
    --veu:rgba(5,12,22,.62);
    --msg-ok-fundo:#173322; --msg-ok:#8fe0a5; --msg-erro-fundo:#3a1c1c; --msg-erro:#ff9d94;
    --ceu:linear-gradient(180deg, #0d1f40 0%, #1d3a69 65%, #2f5488 100%);
    --colina:#2e8c42; --colina-borda:#226d36; --colina-clara:#3b9d52; --nuvem:rgba(205,220,240,.32); --estrelas:1;
    color-scheme:dark;
  }
}
:root[data-tema="escuro"] {
  --azul-claro:#17324a; --verde-claro:#18361f;
  --fundo:#0f1722; --fundo-linha:rgba(120,150,180,.05);
  --superficie:#1b2635; --tinta:#e3ecf5; --suave:#93a5b8; --linha:#2c3b4f;
  --vidro:linear-gradient(180deg, rgba(38,52,71,.94) 0%, rgba(31,43,60,.88) 48%, rgba(27,38,54,.86) 52%, rgba(33,46,64,.92) 100%);
  --vidro-borda:rgba(255,255,255,.08);
  --sombra:0 8px 24px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
  --topo:linear-gradient(180deg, #1d2a3b 0%, #18233282 100%), #172231; --topo-borda:#263447;
  --btn-branco:linear-gradient(180deg, #33445b 0%, #2b3b50 50%, #243347 51%, #2e3f55 100%); --btn-branco-lip:#111a26; --btn-branco-txt:#8fd6ff;
  --campo:#142030; --campo-borda:#2f4058;
  --veu:rgba(5,12,22,.62);
  --msg-ok-fundo:#173322; --msg-ok:#8fe0a5; --msg-erro-fundo:#3a1c1c; --msg-erro:#ff9d94;
  --ceu:linear-gradient(180deg, #0d1f40 0%, #1d3a69 65%, #2f5488 100%);
  --colina:#2e8c42; --colina-borda:#226d36; --colina-clara:#3b9d52; --nuvem:rgba(205,220,240,.32); --estrelas:1;
  color-scheme:dark;
}

* { box-sizing:border-box; }
html, body { margin:0; }
body {
  min-height:100vh; color:var(--tinta);
  font:15px/1.45 Nunito, "Segoe UI", system-ui, sans-serif;
  background:var(--fundo) repeating-linear-gradient(0deg, transparent 0 3px, var(--fundo-linha) 3px 4px);
  padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px));
}
h1, h2, h3 { margin:0; letter-spacing:-.01em; }
h1 { font-size:22px; font-weight:900; }
h2 { font-size:18px; font-weight:900; display:flex; align-items:center; gap:10px; }
h3 { font-size:15px; font-weight:800; margin-bottom:10px; }
.dica { margin:0 0 10px; color:var(--suave); font-size:13px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid #8fd6ff; outline-offset:2px; }

/* ---------- barra superior ---------- */
.topo {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px;
  padding:calc(10px + env(safe-area-inset-top, 0px)) 20px 10px;
  background:var(--topo); border-bottom:1px solid var(--topo-borda); box-shadow:0 2px 12px rgba(25,80,125,.08);
}
.logo { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:900; color:var(--azul-escuro); text-decoration:none; }
:root[data-tema="escuro"] .logo { color:#7fd0ff; }
@media (prefers-color-scheme:dark) { :root:not([data-tema="claro"]) .logo { color:#7fd0ff; } }
.logo .selo {
  width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(180deg, #6fdc7f 0%, #2fb24c 50%, #229a3d 51%, #34ba52 100%);
  box-shadow:0 3px 0 #1c7f33, inset 0 1px 0 rgba(255,255,255,.7);
}
.tema {
  margin-left:auto; width:44px; height:44px; flex:none; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--btn-branco-txt); background:var(--btn-branco);
  box-shadow:0 3px 0 var(--btn-branco-lip), 0 6px 12px rgba(25,80,125,.12), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform 180ms var(--ease-entra), box-shadow 180ms var(--ease-entra);
}
.tema:active { transform:translateY(2px); box-shadow:0 1px 0 var(--btn-branco-lip); transition-duration:60ms; }
.tema svg { width:22px; height:22px; }
.tema .sol { display:none; }
:root[data-tema="escuro"] .tema .lua { display:none; }
:root[data-tema="escuro"] .tema .sol { display:block; }
@media (prefers-color-scheme:dark) {
  :root:not([data-tema="claro"]) .tema .lua { display:none; }
  :root:not([data-tema="claro"]) .tema .sol { display:block; }
}
.auth { display:flex; gap:10px; }
.chip {
  display:flex; align-items:center; gap:10px; padding:5px 14px 5px 5px; border:0; cursor:pointer;
  border-radius:999px; background:var(--vidro); box-shadow:var(--sombra); font:inherit; font-weight:800; color:var(--tinta); text-align:left;
  transition:transform 180ms var(--ease-entra);
}
.chip:active { transform:translateY(2px); transition-duration:60ms; }
.chip .mini { width:34px; height:34px; border-radius:50%; background:var(--azul-claro); display:grid; place-items:center; overflow:hidden; }
.chip small { display:block; color:var(--suave); font-weight:600; font-size:12px; line-height:1.1; font-variant-numeric:tabular-nums; }

/* ---------- telas ---------- */
main { max-width:1280px; margin:0 auto; padding:20px; view-transition-name:telas; }
.tela-cab { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.tela-cab .dica { margin:0 0 0 auto; }
.voltar {
  width:44px; height:44px; flex:none; border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  color:var(--btn-branco-txt); background:var(--btn-branco);
  box-shadow:0 3px 0 var(--btn-branco-lip), 0 6px 14px rgba(25,80,125,.14), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform 180ms var(--ease-entra), box-shadow 180ms var(--ease-entra);
}
.voltar:active { transform:translateY(2px); box-shadow:0 1px 0 var(--btn-branco-lip); transition-duration:60ms; }
.voltar svg { width:22px; height:22px; }

/* início: mapa + coluna lateral + mundo de cupons (como o layout original) */
.inicio-grade {
  display:grid; gap:20px; grid-template-columns:minmax(0, 1fr) 350px;
  grid-template-areas:"mapa lado" "mundo mundo";
}
.bloco {
  position:relative; padding:18px; border-radius:var(--raio);
  background:var(--vidro); border:1px solid var(--vidro-borda); box-shadow:var(--sombra);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.cab-bloco { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.ico { width:14px; height:14px; border-radius:50%; flex:none; background:var(--azul); box-shadow:0 0 0 4px var(--azul-claro); }
.ico.verde { background:var(--verde); box-shadow:0 0 0 4px var(--verde-claro); }
.ico.amarelo { background:var(--amarelo); box-shadow:0 0 0 4px #fff3c4; }
.ico.laranja { background:var(--laranja); box-shadow:0 0 0 4px #ffe6d0; }
.lado { grid-area:lado; display:flex; flex-direction:column; gap:20px; }
.mapa-moldura { grid-area:mapa; padding:10px; display:flex; flex-direction:column; }
.mapa-moldura .cab-bloco { padding:6px 8px 0; margin-bottom:10px; }
#map {
  flex:1; min-height:440px; border-radius:18px; overflow:hidden; background:var(--azul-claro);
  box-shadow:inset 0 0 0 1px var(--topo-borda), 0 2px 8px rgba(25,80,125,.1);
}
.mapa-vazio { height:100%; display:grid; place-items:center; padding:30px; text-align:center; color:var(--suave); font-weight:700; }
.legenda { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; font-weight:700; color:var(--suave); }
.legenda i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:-1px; }
.mundo { grid-area:mundo; }

/* ---------- botões e campos glossy ---------- */
.btn {
  appearance:none; border:0; cursor:pointer; font:inherit; font-weight:800; color:#fff; white-space:nowrap;
  padding:11px 22px; border-radius:999px;
  background:linear-gradient(180deg, #66ccff 0%, #22a8ee 50%, #0e92da 51%, #1aa3e8 100%);
  box-shadow:0 4px 0 var(--azul-escuro), 0 8px 16px rgba(14,146,218,.28), inset 0 1px 0 rgba(255,255,255,.65);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  transition:transform 180ms var(--ease-entra), box-shadow 180ms var(--ease-entra), filter 180ms var(--ease-entra);
}
@media (hover:hover) { .btn:hover { filter:brightness(1.06); } }
/* afunda na hora (60 ms) e volta com calma (180 ms) */
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 var(--azul-escuro), 0 3px 8px rgba(14,146,218,.25), inset 0 1px 0 rgba(255,255,255,.65); transition-duration:60ms; }
.btn.verde { background:linear-gradient(180deg, #74e086 0%, #35bd52 50%, #25a142 51%, #31b44e 100%); box-shadow:0 4px 0 var(--verde-escuro), 0 8px 16px rgba(47,178,76,.28), inset 0 1px 0 rgba(255,255,255,.65); }
.btn.verde:active { box-shadow:0 1px 0 var(--verde-escuro), 0 3px 8px rgba(47,178,76,.25), inset 0 1px 0 rgba(255,255,255,.65); }
.btn.branco { color:var(--btn-branco-txt); text-shadow:none; background:var(--btn-branco); box-shadow:0 4px 0 var(--btn-branco-lip), 0 6px 12px rgba(25,80,125,.12), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.branco:active { box-shadow:0 1px 0 var(--btn-branco-lip), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.perigo { color:var(--vermelho); }
.btn.pequeno { padding:7px 16px; font-size:13px; }
.btn.largo { width:100%; }
.btn:disabled { cursor:not-allowed; filter:none; transform:none; color:#8796a3; text-shadow:none; background:linear-gradient(180deg, #f2f5f8, #e3e9ee); box-shadow:0 3px 0 #ccd6de; }
.link { background:none; border:0; padding:0; font:inherit; font-weight:800; color:var(--azul-escuro); cursor:pointer; }
:root[data-tema="escuro"] .link { color:#7fd0ff; }
@media (prefers-color-scheme:dark) { :root:not([data-tema="claro"]) .link { color:#7fd0ff; } }
input, select, textarea {
  width:100%; margin-bottom:10px; padding:11px 16px; font:inherit; color:var(--tinta);
  border:1px solid var(--campo-borda); border-radius:16px; background:var(--campo);
  box-shadow:inset 0 2px 4px rgba(25,80,125,.08);
  transition:border-color 160ms var(--ease-entra);
}
input:focus, select:focus, textarea:focus { border-color:var(--azul); }
textarea { display:block; resize:vertical; }
label.campo { display:block; font-size:13px; font-weight:800; margin-bottom:4px; }
label.campo small { color:var(--suave); font-weight:600; }
.grade-form { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.grade-form .inteiro { grid-column:1 / -1; }
.check { display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; font-size:13px; font-weight:600; cursor:pointer; }
.check input { width:20px; height:20px; margin:1px 0 0; flex:none; box-shadow:none; accent-color:var(--azul); }
.msg { margin:0 0 10px; padding:10px 14px; border-radius:14px; font-size:13px; font-weight:800; background:var(--msg-ok-fundo); color:var(--msg-ok); }
.msg.erro { background:var(--msg-erro-fundo); color:var(--msg-erro); }
.msg:empty { display:none; }

/* ---------- conta e máquinas ---------- */
.boas-vindas { text-align:center; }
.boas-vindas .mini { width:72px; height:72px; margin:0 auto 10px; border-radius:22px; display:grid; place-items:center; background:linear-gradient(180deg, #e8f6ff, #cfeaff); box-shadow:inset 0 1px 0 #fff, 0 2px 6px rgba(25,80,125,.12); }
.boas-vindas h2 { justify-content:center; margin-bottom:6px; }
.boas-vindas .btn { margin-top:10px; }
.perfil-topo { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.perfil-topo .mini { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; background:linear-gradient(180deg, #e8f6ff, #cfeaff); box-shadow:inset 0 1px 0 #fff, 0 2px 6px rgba(25,80,125,.12); }
.perfil-topo b { font-size:18px; font-weight:900; display:block; }
.numeros { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.numero { padding:10px 12px; border-radius:16px; background:var(--superficie); box-shadow:inset 0 0 0 1px var(--linha); }
.numero b { display:block; font-size:22px; font-weight:900; color:var(--azul-escuro); line-height:1.1; font-variant-numeric:tabular-nums; }
.numero small { color:var(--suave); font-weight:700; font-size:12px; }
:root[data-tema="escuro"] .numero b { color:#7fd0ff; }
@media (prefers-color-scheme:dark) { :root:not([data-tema="claro"]) .numero b { color:#7fd0ff; } }
.endereco-casa { margin:0 0 12px; padding:10px 12px; border-radius:16px; background:var(--superficie); box-shadow:inset 0 0 0 1px var(--linha); font-size:13px; }
.endereco-casa b { display:block; color:var(--suave); font-size:12px; }
.acoes-perfil { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }

.tiles { display:flex; flex-direction:column; gap:10px; }
.tile { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:18px; background:var(--superficie); box-shadow:inset 0 0 0 1px var(--linha), 0 2px 0 var(--linha); }
.tile.destaque { box-shadow:inset 0 0 0 2px var(--verde), 0 3px 0 #bfe8c8; }
.tile .num { width:34px; height:34px; flex:none; border-radius:12px; display:grid; place-items:center; font-weight:900; color:#fff; background:linear-gradient(180deg, #74e086, #2fb24c); }
.tile .info { flex:1; min-width:0; }
.tile .info b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile .info small { color:var(--suave); font-weight:600; }
.pilula { flex:none; padding:4px 10px; border-radius:999px; font-weight:900; font-size:13px; color:var(--azul-escuro); background:var(--azul-claro); }
.ocupa { height:6px; margin-top:4px; border-radius:3px; background:var(--linha); overflow:hidden; }
.ocupa i { display:block; height:100%; border-radius:3px; transform-origin:left; background:var(--verde); }
.ocupa i.cheia { background:var(--laranja); }
.tile .miniatura { width:96px; aspect-ratio:16 / 9; flex:none; object-fit:cover; border-radius:10px; background:var(--azul-claro); }
.tile.oculto { opacity:.6; }
.tile .botoes { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

/* ---------- tela: notícias ---------- */
.carrossel { position:relative; }
.trilha { position:relative; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 12px; scrollbar-width:none; overscroll-behavior-x:contain; }
.trilha::-webkit-scrollbar { display:none; }
.cartaz {
  flex:0 0 calc((100% - 16px) / 2); scroll-snap-align:start; display:flex; flex-direction:column;
  padding:0; border:0; border-radius:20px; overflow:hidden; cursor:pointer; text-align:left;
  font:inherit; color:inherit; background:var(--superficie);
  box-shadow:inset 0 0 0 1px var(--linha), 0 4px 0 var(--linha), 0 10px 22px rgba(25,80,125,.1);
  transition:transform 220ms var(--ease-entra), box-shadow 220ms var(--ease-entra);
}
@media (hover:hover) { .cartaz:hover { transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--linha), 0 6px 0 var(--linha), 0 16px 28px rgba(25,80,125,.16); } }
.cartaz:active { transform:translateY(2px); transition-duration:60ms; }
.cartaz img { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; background:var(--azul-claro); }
.cartaz .corpo { flex:1; display:flex; flex-direction:column; gap:4px; padding:12px 16px 14px; }
.cartaz .corpo b { font-size:16px; font-weight:900; line-height:1.25; }
.cartaz .resumo { color:var(--suave); font-size:13px; font-weight:600; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cartaz .saiba { margin-top:auto; padding-top:6px; font-size:13px; font-weight:900; color:#1f8f3c; }
.seta {
  position:absolute; z-index:2; top:calc(50% - 58px); width:44px; height:44px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:var(--btn-branco-txt); background:var(--btn-branco);
  box-shadow:0 3px 0 var(--btn-branco-lip), 0 6px 14px rgba(25,80,125,.18), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform 180ms var(--ease-entra);
}
.seta:active { transform:translateY(2px); box-shadow:0 1px 0 var(--btn-branco-lip); transition-duration:60ms; }
.seta.esq { left:-10px; }
.seta.dir { right:-10px; }
.seta svg { width:20px; height:20px; }
.pontos-carrossel { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.pontos-carrossel button { width:10px; height:10px; padding:0; border:0; border-radius:50%; cursor:pointer; background:var(--campo-borda); transition:transform 220ms var(--ease-entra), background-color 220ms var(--ease-entra); }
.pontos-carrossel button.ativo { background:var(--verde); transform:scale(1.3); }
.vazio { padding:28px; text-align:center; color:var(--suave); font-weight:700; border-radius:18px; background:var(--superficie); box-shadow:inset 0 0 0 1px var(--linha); }
dialog.anuncio { width:min(820px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; }
dialog.anuncio img { display:block; width:100%; margin-bottom:16px; border-radius:16px; box-shadow:0 2px 10px rgba(25,80,125,.15); }
.texto-anuncio { margin:10px 0 16px; white-space:pre-line; font-size:15px; overflow-wrap:anywhere; }

/* ---------- tela: admin ---------- */
.admin-grade { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.cartao { padding:16px; border-radius:18px; background:var(--superficie); box-shadow:inset 0 0 0 1px var(--linha); }
.cartao.largo { grid-column:span 2; }
#mapaAdmin { height:200px; margin-bottom:10px; border-radius:14px; overflow:hidden; background:var(--azul-claro); box-shadow:inset 0 0 0 1px var(--linha); }
.tabela { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:7px 8px; text-align:right; border-bottom:1px solid var(--linha); font-variant-numeric:tabular-nums; }
th { color:var(--suave); font-weight:800; }
th:first-child, td:first-child { text-align:left; }
.barra-mat { margin-bottom:10px; font-size:13px; font-weight:700; }
.barra-mat div { display:flex; justify-content:space-between; }
.barra-mat i { display:block; height:10px; margin-top:3px; border-radius:5px; transform-origin:left; background:linear-gradient(90deg, #66ccff, #1aa3e8); }
.previa-cartaz { display:block; width:100%; max-width:360px; aspect-ratio:16 / 9; object-fit:cover; margin:0 0 10px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--linha); }

/* controles do MapLibre no estilo dos botões */
.maplibregl-ctrl-group { border-radius:14px !important; overflow:hidden; box-shadow:0 3px 0 #c6d6e3, 0 4px 10px rgba(25,80,125,.15) !important; }
.maplibregl-ctrl-attrib { font-family:Nunito, "Segoe UI", sans-serif; font-size:11px; }
.maplibregl-marker { cursor:pointer; }

/* ---------- dock inferior (estilo GamePad) ---------- */
.dock {
  position:fixed; z-index:30; left:50%; transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  display:flex; gap:10px; padding:10px 14px; border-radius:999px; view-transition-name:dock;
  background:var(--vidro); border:1px solid var(--vidro-borda); box-shadow:0 10px 30px rgba(25,80,125,.22), inset 0 1px 0 rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.dock button {
  width:74px; height:66px; border:0; border-radius:22px; cursor:pointer; font:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:11px; font-weight:800; color:var(--btn-branco-txt); background:var(--btn-branco);
  box-shadow:0 3px 0 var(--btn-branco-lip), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform 180ms var(--ease-entra), box-shadow 180ms var(--ease-entra);
}
.dock button:active { transform:translateY(2px); box-shadow:0 1px 0 var(--btn-branco-lip); transition-duration:60ms; }
.dock button[aria-current="page"] { color:#fff; background:linear-gradient(180deg, #66ccff 0%, #22a8ee 50%, #0e92da 51%, #1aa3e8 100%); box-shadow:0 3px 0 var(--azul-escuro); }
.dock button.admin-ativo { color:#fff; background:linear-gradient(180deg, #ffb066 0%, #ff8a1f 50%, #f07400 51%, #ff9433 100%); box-shadow:0 3px 0 #b85600; }
.dock svg { width:24px; height:24px; }

/* ---------- avisos e diálogos ---------- */
#avisos { position:fixed; z-index:50; top:calc(76px + env(safe-area-inset-top, 0px)); right:16px; display:flex; flex-direction:column; gap:8px; max-width:min(360px, calc(100vw - 32px)); }
.aviso { padding:12px 18px; border-radius:18px; font-weight:800; background:var(--vidro); color:var(--tinta); border-left:6px solid var(--verde); box-shadow:0 8px 24px rgba(25,80,125,.2); }
.aviso.erro { border-left-color:var(--vermelho); }
dialog {
  width:min(420px, calc(100vw - 32px)); padding:24px; border:1px solid var(--vidro-borda); border-radius:28px;
  background:var(--vidro); color:var(--tinta); box-shadow:0 20px 60px rgba(25,80,125,.3);
}
dialog::backdrop { background:var(--veu); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
dialog[open]::backdrop { animation:fundo 240ms var(--ease-entra); }
@keyframes fundo { from { opacity:0; } }
dialog h2 { margin-bottom:10px; }
dialog.grande { width:min(620px, calc(100vw - 32px)); max-height:calc(100vh - 32px); }
.acoes { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; align-items:center; margin-top:6px; }
.codigo { display:flex; justify-content:center; gap:4px; margin:12px 0 16px; padding:16px; border-radius:18px; font-size:30px; font-weight:900; letter-spacing:.06em; color:var(--azul-escuro); background:var(--superficie); box-shadow:inset 0 0 0 2px var(--azul-claro); }
.codigo span { display:inline-block; }
fieldset.passo { border:0; padding:0; margin:0; }
.passos { display:flex; gap:8px; margin:4px 0 18px; padding:0; }
.passos li { flex:1; list-style:none; text-align:center; font-size:12px; font-weight:800; color:var(--suave); }
.passos li::before {
  content:""; display:block; height:8px; margin-bottom:6px; border-radius:4px;
  background:linear-gradient(180deg, #66ccff, #1aa3e8) no-repeat 0 0 / 0 100%, var(--linha);
  box-shadow:inset 0 1px 2px rgba(25,80,125,.12); transition:background-size 420ms var(--ease-entra);
}
.passos li.feito { color:var(--azul); }
.passos li.feito::before { background-size:100% 100%; }
#miniMapa { height:220px; margin-bottom:10px; border-radius:16px; overflow:hidden; background:var(--azul-claro); box-shadow:inset 0 0 0 1px var(--linha); }

/* =====================================================================
   Mundo de cupons (mapa de fases): colinas, chão de tijolos e estrada
   ===================================================================== */
.cena {
  position:relative; height:300px; overflow-x:auto; overflow-y:hidden; border-radius:18px;
  background:var(--ceu); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), inset 0 -2px 0 rgba(255,255,255,.4);
  scrollbar-width:thin; overscroll-behavior-x:contain;
}
.palco {
  position:relative; height:100%; min-width:100%;
  background:
    radial-gradient(ellipse 50% 100% at 50% 100%, var(--colina) 0 97%, var(--colina-borda) 98% 100%, transparent 101%) 0 calc(100% - 34px) / 300px 110px repeat-x,
    radial-gradient(ellipse 50% 100% at 50% 100%, var(--colina-clara) 0 97%, transparent 100%) 150px calc(100% - 34px) / 300px 70px repeat-x;
}
.palco::before {   /* estrelas: só aparecem no tema escuro (estáticas, sem piscar) */
  content:""; position:absolute; inset:0 0 40% 0; pointer-events:none; opacity:var(--estrelas);
  background:radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.5px) 0 0 / 87px 61px,
             radial-gradient(circle, rgba(255,255,255,.6) 0 1px, transparent 1.5px) 41px 29px / 131px 83px;
}
.palco::after {   /* chão de tijolos */
  content:""; position:absolute; left:0; right:0; bottom:0; height:34px;
  background:
    linear-gradient(180deg, #5bd15f 0 6px, #36a03c 6px 9px, transparent 9px),
    repeating-linear-gradient(180deg, transparent 0 21px, #8f4a1d 21px 23px),
    repeating-linear-gradient(90deg, #c8743a 0 30px, #8f4a1d 30px 32px);
  filter:brightness(calc(1 - var(--estrelas) * .25));
}
.nuvens { position:absolute; inset:0 0 auto 0; height:80px; pointer-events:none; }
.nuvem { position:absolute; width:70px; height:22px; border-radius:22px; background:var(--nuvem); box-shadow:18px -10px 0 4px var(--nuvem), 40px -2px 0 0 var(--nuvem); }

/* estrada: borda bege + trecho percorrido em amarelo + pontinhos brancos */
.trilha-svg { position:absolute; left:0; top:0; z-index:1; overflow:visible; }
.trilha-svg path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.trilha-svg .borda { stroke:#e9cf9b; stroke-width:18; }
.trilha-svg .feito { stroke:#ffd84a; stroke-width:10; stroke-dasharray:1 1; stroke-dashoffset:1; }
.seg.aberto .feito { stroke-dashoffset:0; }
.trilha-svg .tracejado { stroke:#fff; stroke-width:4; stroke-dasharray:1 13; }

.no {
  position:absolute; z-index:3; width:58px; height:58px; margin:-29px 0 0 -29px; padding:0;
  border:0; background:none; cursor:pointer; font:900 20px Nunito, "Segoe UI", sans-serif;
  transition:transform 200ms var(--ease-entra);
}
@media (hover:hover) { button.no:hover { transform:scale(1.08); } }
.no-face {
  position:absolute; inset:0; border-radius:50%; display:grid; place-items:center; border:4px solid #fff;
  box-shadow:0 5px 0 rgba(0,0,0,.18), 0 9px 16px rgba(0,0,0,.16), inset 0 2px 0 rgba(255,255,255,.6);
  transition:transform 180ms var(--ease-entra), box-shadow 180ms var(--ease-entra);
}
button.no:active .no-face { transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.18), 0 3px 6px rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.6); transition-duration:60ms; }
.no-face-trancada { background:linear-gradient(180deg, #c8d3dc 0%, #a9b6c1 50%, #95a3af 51%, #b2bec8 100%); }
.no-face-liberada { color:#8a5a00; background:linear-gradient(180deg, #ffe873 0%, #ffcc1a 50%, #f2b400 51%, #ffd84a 100%); }
.no.liberado .no-face-trancada, .no:not(.liberado) .no-face-liberada { opacity:0; }
.no.inicio { cursor:default; }
.no.inicio .no-face { color:#fff; background:linear-gradient(180deg, #66ccff 0%, #22a8ee 50%, #0e92da 51%, #1aa3e8 100%); }
.no[aria-expanded="true"] .no-face { box-shadow:0 0 0 4px var(--azul), 0 5px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.6); }
.arco { transform-box:view-box; transform-origin:16px 11px; }
.no-anel { position:absolute; inset:-4px; border-radius:50%; border:4px solid var(--amarelo); opacity:0; pointer-events:none; }
.no-estrela {
  position:absolute; top:-12px; right:-12px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; color:#fff; background:var(--azul); border:3px solid #fff; opacity:0; transform:scale(.6);
}
.no.resgatado .no-estrela { opacity:1; transform:none; }
.no-rotulo {
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); max-width:140px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:800; color:#33465a; background:rgba(255,255,255,.92); box-shadow:0 1px 3px rgba(0,0,0,.12);
}
/* próxima fase: tracejado estático + quanto falta (sem pulsar) */
.no.proximo .no-face-trancada { outline:3px dashed rgba(255,255,255,.95); outline-offset:4px; }
.no-falta {
  position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%); white-space:nowrap;
  padding:3px 10px; border-radius:999px; font-size:12px; font-weight:900; color:#fff;
  background:var(--verde-escuro); box-shadow:0 2px 0 rgba(0,0,0,.15); display:none;
}
.no.proximo .no-falta { display:block; }
.bandeira { position:absolute; z-index:2; bottom:34px; width:4px; height:130px; background:#5b6b78; border-radius:2px; }
.bandeira::before { content:""; position:absolute; left:4px; top:6px; border-left:42px solid var(--verde); border-top:16px solid transparent; border-bottom:16px solid transparent; }
.bandeira::after { content:""; position:absolute; left:-6px; top:-12px; width:16px; height:16px; border-radius:50%; background:var(--amarelo); box-shadow:inset -2px -2px 0 #e0a800; }

/* avatar: posição (JS) > flutuação (CSS) > pulinho ao andar (WAAPI) */
.avatar { position:absolute; left:0; top:0; z-index:5; width:40px; height:60px; pointer-events:none; offset-anchor:20px 81px; offset-rotate:0deg; }
.avatar-flutua { animation:flutuar 1.8s var(--ease-flutua) infinite alternate; }
.avatar-salto svg { display:block; margin:0 auto; filter:drop-shadow(0 3px 0 rgba(0,0,0,.18)); }
.avatar-sombra-pos { position:absolute; left:8px; right:8px; bottom:0; height:8px; }
.avatar-sombra { height:100%; border-radius:50%; background:rgba(0,0,0,.3); animation:sombra 1.8s var(--ease-flutua) infinite alternate; }
.avatar.andando .avatar-flutua, .avatar.andando .avatar-sombra,
.mundo.fora-da-tela .avatar-flutua, .mundo.fora-da-tela .avatar-sombra { animation-play-state:paused; }
@keyframes flutuar { to { transform:translateY(-6px); } }
@keyframes sombra { to { transform:scaleX(.76); opacity:.55; } }
.moeda { position:absolute; z-index:6; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; pointer-events:none; background:radial-gradient(circle at 35% 35%, #fff6b0, #ffcc1a 55%, #e0a800); border:2px solid #b98600; }

/* balão da fase: nasce do nó clicado (transform-origin na ponta da seta) */
.balao {
  position:absolute; z-index:20; width:250px; padding:14px 16px 16px; border-radius:20px;
  background:var(--vidro); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--vidro-borda); box-shadow:0 14px 34px rgba(25,80,125,.24), inset 0 1px 0 rgba(255,255,255,.4);
  transform-origin:var(--seta, 50%) 100%;
  visibility:hidden; pointer-events:none; opacity:0; filter:blur(2px);
  transform:translate(-50%, -100%) translateY(4px) scale(.97);
  transition:transform 150ms var(--ease-sai), opacity 130ms var(--ease-sai), filter 130ms var(--ease-sai), visibility 0s linear 150ms;
}
.balao::after { content:""; position:absolute; top:100%; left:var(--seta, 50%); margin-left:-10px; border:10px solid transparent; border-top-color:var(--superficie); border-bottom:0; }
.balao.preparando { transition:none; filter:blur(4px); transform:translate(-50%, -100%) translateY(10px) scale(.86); }
.balao.aberto {
  visibility:visible; pointer-events:auto; opacity:1; filter:none; transform:translate(-50%, -100%);
  transition:transform 480ms var(--mola), opacity 200ms var(--ease-entra), filter 200ms var(--ease-entra), visibility 0s;
}
.balao.instantaneo { transition:none !important; }
.balao-topo { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.selo-fase { padding:3px 10px; border-radius:10px; font-size:12px; font-weight:900; color:#fff; background:#a9b6c1; }
.selo-fase.liberada { color:#8a5a00; background:var(--amarelo); }
.balao .estado { font-size:12px; font-weight:800; color:var(--suave); }
.balao b { display:block; font-size:16px; font-weight:900; line-height:1.2; }
.balao p { margin:2px 0 12px; font-size:13px; font-weight:700; color:var(--suave); }
.balao-rodape { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.balao .custo { font-weight:900; color:var(--azul); }
.balao small { font-size:12px; font-weight:800; color:var(--suave); text-align:right; }

.pular {
  position:absolute; z-index:15; top:76px; right:30px;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity 160ms var(--ease-sai), transform 160ms var(--ease-sai), visibility 0s linear 160ms;
}
.pular.visivel { opacity:1; visibility:visible; transform:none; transition:opacity 220ms var(--ease-entra), transform 220ms var(--ease-entra), visibility 0s; }

/* faixa de informação (Value Change: número conta, barra cresce com scaleX) */
.progresso { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:14px; padding:14px 16px; border-radius:18px; background:var(--superficie); box-shadow:inset 0 0 0 1px var(--linha); }
.progresso-txt { flex:1; min-width:220px; }
.progresso-txt b { display:block; font-size:16px; font-weight:900; }
.progresso-txt small { display:block; color:var(--suave); font-weight:700; }
.barra { height:10px; margin-top:8px; border-radius:5px; background:var(--linha); overflow:hidden; box-shadow:inset 0 1px 2px rgba(25,80,125,.12); }
.barra i { display:block; height:100%; border-radius:5px; transform-origin:left; transform:scaleX(0); background:linear-gradient(180deg, #74e086, #2fb24c); transition:transform 700ms var(--ease-entra); }
.saldo { text-align:right; }
.saldo b { display:block; font-size:26px; font-weight:900; color:var(--azul); line-height:1; font-variant-numeric:tabular-nums; }
.saldo small { color:var(--suave); font-weight:700; font-size:12px; }

/* =====================================================================
   Transições (View Transitions API)
   ===================================================================== */
::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
/* troca de tela: desliza no sentido da navegação */
html[data-vt="desliza"]::view-transition-old(telas) { animation:tela-sai 160ms var(--ease-sai) both; }
html[data-vt="desliza"]::view-transition-new(telas) { animation:tela-entra 380ms var(--ease-entra) both; }
@keyframes tela-sai { to { opacity:0; transform:translateX(calc(var(--dir) * -16px)); filter:blur(3px); } }
@keyframes tela-entra { from { opacity:0; transform:translateX(calc(var(--dir) * 32px)); filter:blur(6px); } }
/* troca de tema: a página inteira vira uma foto só e o novo tema se abre em círculo a partir do botão */
html[data-vt="tema"] main, html[data-vt="tema"] .dock { view-transition-name:none; }

/* ---------- responsivo ---------- */
@media (max-width:900px) {
  main { padding:16px; }
  .inicio-grade { grid-template-columns:minmax(0, 1fr); grid-template-areas:"lado" "mapa" "mundo"; }
  #map { min-height:360px; }
  .cartaz { flex-basis:88%; }
  .carrossel .seta { display:none; }
  .cartao.largo { grid-column:auto; }
  .chip small { display:none; }
}
@media (max-width:480px) {
  .logo span { display:none; }
  .auth .btn { padding:9px 14px; font-size:13px; }
  .grade-form { grid-template-columns:1fr; }
  .dock { gap:6px; padding:8px 10px; }
  .dock button { width:56px; height:58px; font-size:10px; }
  .tile .miniatura { width:72px; }
}

/* ---------- movimento reduzido: estados finais, sem deslocamento ---------- */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
}