*{box-sizing:border-box; margin:0; padding:0}
:root{
  --ink:#2C2823; --brand:#E8712F; --brand-d:#CF5F22; --line:#E7DDCC;
  --az-esc:#0e4684; --az-med:#6aa0cd; --az-glow:#a2e5f7;
  --shadow:0 18px 50px rgba(20,50,90,.35);
}
html,body{height:100%;}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; color:var(--ink);
  background:
    radial-gradient(120% 90% at 50% 80%, var(--az-glow) 0%, transparent 44%),
    linear-gradient(180deg, var(--az-esc) 0%, var(--az-med) 100%);
  background-attachment:fixed;
  min-height:100dvh; display:grid; place-items:center; padding:0; overflow:hidden;
}

/* A TELA replica o enquadramento da referência (2752×2004 → aspecto 1.373).
   O card ocupa x[11%..89%] y[13%..80%], medido na ref. Tudo se posiciona
   em % da TELA, então bate com a referência independente do tamanho. */
/* SEMPRE cabe inteiro E preenche o máximo: preenche a altura da tela; a
   largura vem da proporção. Sem padding, sem limite — vale em qualquer
   tela (desktop e mobile), baseado no TAMANHO, não no tipo de ponteiro. */
.tela{
  position:relative; aspect-ratio:1.373;
  width:min(100vw, calc(100dvh * 1.373));
  max-height:100dvh;
}
.tela[hidden]{display:none;}

/* card: x 11..89 (w 78%), y 13..80 (h 67%). cantos arredondados = a máscara
   que recorta vídeo e família. */
.card{
  position:absolute; left:8%; top:11%; width:84%; height:80%;
  background:rgba(255,255,255,.12);
  border-radius:2vw; box-shadow:var(--shadow); overflow:hidden;
}

/* ---------- logo: centralizado, cavalga a borda de cima do card ----------
   width 24% → centro em 50% da tela pede left = 38% */
.s-logo, .j-logo{
  position:absolute; left:38%; top:3%; width:24%; height:auto; z-index:9;
  filter:drop-shadow(0 6px 14px rgba(20,40,70,.35));
}

/* ===================== SPLASH ===================== *
 * coordenadas relativas à TELA, medidas na ref02.
 * o card vai de 11..89 x / 13..80 y. Converto pra dentro do card. */

/* gamesales (com "a arte" embutido): um pouco menor e centralizado no card */
.s-gamesales{
  position:absolute; left:9%; top:11%; width:82%; height:auto; z-index:4;
  filter:drop-shadow(0 4px 12px rgba(20,40,70,.25));
}
/* vamos jogar: ref x 57..80 y 40..48 da tela → dentro do card */
.s-botao{
  position:absolute; left:59%; top:40%; width:29%; z-index:7;
  border:0; background:none; cursor:pointer; padding:0; transition:transform .12s;
}
.s-botao img{width:100%; height:auto; display:block;
  filter:drop-shadow(0 6px 14px rgba(20,40,70,.28));}
.s-botao:hover{transform:scale(1.04);}
.s-botao:active{transform:scale(.99);}
/* glow atrás da ruiva */
.s-glow{
  position:absolute; left:24%; bottom:-8%; width:52%; height:95%; z-index:3;
  background:radial-gradient(closest-side, rgba(180,235,255,.9), rgba(150,210,245,.25) 55%, transparent 72%);
  pointer-events:none;
}
/* a ruiva ANIMADA: grande, centrada ~x46% do card, cabeça alta sobre o
   gamesales, base no rodapé do card. ref: ocupa ~y28..78 da tela. */
.s-ruiva{
  position:absolute; left:26%; bottom:-2%; width:48%; height:auto; z-index:5;
  filter:drop-shadow(0 12px 22px rgba(20,40,70,.32));
}
/* glow atrás da família — mesma região dela, atrás (z-index menor).
   NÃO altera a posição da família. */
.s-glow-fam{
  position:absolute; right:-3%; bottom:-6%; width:42%; height:70%; z-index:3;
  background:radial-gradient(closest-side, rgba(180,235,255,.8), rgba(150,210,245,.22) 55%, transparent 72%);
  pointer-events:none;
}
/* família DENTRO do card, canto inf-direito; a base do card corta no joelho.
   30% menor que antes (44% → 31%). */
.s-familia{
  position:absolute; right:1%; bottom:-11%; width:31%; height:auto; z-index:4;
}
/* óculos FORA do card (relativo à tela): flutua sobre a ruiva, sem ser
   cortado pela máscara. +30% (34%→44%), mantido centralizado (left 28%). */
.s-oculos{
  position:absolute; left:28%; bottom:7%; width:44%; height:auto; z-index:6;
  filter:drop-shadow(0 12px 22px rgba(20,40,70,.32));
}

/* ===================== JOGO ===================== */
/* o vídeo preenche o card, recortado pelos cantos. cover = pode crescer. */
.jogo .card{background:transparent;}
/* os dois vídeos ficam empilhados. o que ENTRA vive embaixo (z-index baixo)
   já 100% visível; só o que SAI desaparece por cima. assim nunca há um vão
   translúcido no meio da transição — some a piscada. */
.cena{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:1;
}
.cena.saindo{
  z-index:2; transition:opacity .45s ease;
}
.cena.saindo.off{opacity:0;}
.cena.entrando{z-index:1;}
/* branding dentro do card, canto sup-direito. ref: x 68..83 y 15..22 da tela
   → dentro do card (11..89 x, 13..80 y). */
.j-gamesales{
  position:absolute; right:3%; top:3%; width:26%; height:auto; z-index:6;
  filter:drop-shadow(0 3px 8px rgba(20,40,70,.3));
}

/* placar FORA do card, acima, canto sup-direito (igual à referência).
   número branco + "pontos" laranja, sem caixa. Alvo das moedas. */
.painel-pontos{
  position:absolute; right:6%; top:3%; z-index:5; transform-origin:right center;
  display:flex; align-items:baseline; gap:8px; white-space:nowrap;
}
.p-num{
  color:#fff; font-weight:800; font-size:clamp(20px,2.7vw,36px);
  font-variant-numeric:tabular-nums; line-height:1; display:inline-block;
  text-shadow:0 2px 8px rgba(10,40,80,.35);
}
.p-label{
  color:var(--brand); font-weight:800; font-size:clamp(14px,1.8vw,24px);
  letter-spacing:-.01em; line-height:1;
}
/* balanço quando cada moeda entra */
.painel-pontos.bump{animation:pontosBate .32s cubic-bezier(.2,1.3,.4,1)}
@keyframes pontosBate{
  0%{transform:scale(1) rotate(0)} 30%{transform:scale(1.16) rotate(-3deg)}
  55%{transform:scale(.98) rotate(2deg)} 100%{transform:scale(1) rotate(0)}
}
.painel-pontos.bump .p-num{animation:numPulo .3s}
@keyframes numPulo{0%{transform:translateY(0)}40%{transform:translateY(-3px) scale(1.14)}100%{transform:translateY(0)}}

/* canvas das moedas: cobre a TELA inteira (alcança o placar fora do card),
   entre o desfoque (z2) e o box branco (z4). Moedas acima do desfoque e
   atrás do box branco. */
.fx-moedas{position:absolute; inset:0; z-index:3; pointer-events:none}

/* ---------- legenda ---------- */
.cap{
  position:absolute; left:50%; top:2.5%; transform:translateX(-50%); z-index:8;
  background:rgba(252,250,245,.94); border:1px solid var(--line); border-radius:10px;
  padding:.6em 1.1em; font-size:clamp(11px,1vw,13px); color:#7A7064;
  pointer-events:none; opacity:0; transition:opacity .35s; white-space:nowrap;
}
.cap.on{opacity:1;}

/* ---------- balões na cena ---------- */
.balloes{position:absolute; inset:0; z-index:4; pointer-events:none;}
.bubble{
  position:absolute; transform:translate(-50%,-100%); max-width:24%;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:.5em .8em; font-size:clamp(10px,.95vw,13px); line-height:1.35; color:var(--ink);
  box-shadow:0 6px 22px rgba(20,50,90,.2); text-align:center; opacity:0; transition:opacity .3s;
}
.bubble::after{content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%);
  border:8px solid transparent; border-top-color:#fff;}
.bubble.show{opacity:1;}
.bubble.atendente{background:var(--brand); color:#fff; border-color:var(--brand-d);}
.bubble.atendente::after{border-top-color:var(--brand);}

/* ---------- diálogo ---------- */
/* CAMADAS (de baixo pra cima): desfoque(z2) < moedas(z3) < box branco(z4).
   As três cobrem a MESMA caixa do card (11%/13%/78%/67% da tela). */
.blur-cena{
  position:absolute; left:8%; top:11%; width:84%; height:80%; z-index:2;
  border-radius:2vw; backdrop-filter:blur(7px); background:rgba(255,255,255,.16);
  display:none; pointer-events:none;
}
.jogo.dialogo .blur-cena{display:block;}

.dlg{position:absolute; left:8%; top:11%; width:84%; height:80%; display:none; z-index:4;}
.dlg.open{display:block;}
.dchar,.dbub{display:none;}
.dlg.compers .dchar, .dlg.compers .dbub{display:block;}
.dchar{
  position:absolute; right:6%; bottom:0; height:88%; width:auto; z-index:2;
  filter:drop-shadow(0 12px 22px rgba(40,30,15,.30));
  animation:charIn .34s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes charIn{from{transform:translateY(38%);opacity:0}to{transform:translateY(0);opacity:1}}
/* COLUNA balão+card: empilhados num flex, com gap garantido entre eles.
   Assim NUNCA se encavalam — não importa a altura do card nem do balão. */
.dcol{
  position:absolute; left:5%; width:54%; bottom:5%; z-index:4; max-height:86%;
  display:flex; flex-direction:column; justify-content:flex-end;
  /* gap FIXO (px) — porcentagem colapsa pra 0 em coluna de altura automática */
  gap:clamp(12px,1.7vw,20px);
}
/* sem personagem: o card centraliza e alarga (o balão fica oculto) */
.dlg:not(.compers) .dcol{left:50%; transform:translateX(-50%); width:74%; bottom:8%;}

/* balão da fala: item da coluna, encostado à direita (aponta pra personagem) */
.dbub{
  position:relative; align-self:flex-end; max-width:80%; width:max-content;
  background:var(--brand); border-radius:20px; padding:.8em 1em;
  font-size:clamp(12px,1.25vw,16px); line-height:1.36; font-weight:700; color:#fff;
  box-shadow:0 10px 26px rgba(207,95,34,.30);
  animation:bubIn .32s .16s cubic-bezier(.2,1.1,.4,1) both;
}
/* flecha encostada no balão (base cola na borda, sem gap) */
.dbub::after{content:""; position:absolute; right:-11px; top:50%; transform:translateY(-50%);
  border:12px solid transparent; border-left-color:var(--brand); border-right:0;}
/* sobe de leve (translate pequeno, dentro do gap) — nunca invade o card */
@keyframes bubIn{from{transform:translateY(6px) scale(.94);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.dchar,.dbub,.s-botao{animation:none}}
.dcard{
  position:relative; width:100%; z-index:4; border-radius:20px;
  padding:1.1em 1.3em 1.2em;
  /* box grande transparente; blur atrás mantém o título legível */
  background:rgba(255,255,255,.63); backdrop-filter:blur(8px);
  /* sombra projetada, caindo pra baixo */
  box-shadow:0 26px 60px rgba(20,50,90,.5), 0 6px 16px rgba(20,50,90,.3);
}
.dcard .ttl{font-size:clamp(14px,1.6vw,20px); font-weight:800; color:var(--ink); margin-bottom:.7em; line-height:1.3;}
.opts{display:flex; flex-direction:column; gap:.5em;}
.opts button{
  width:100%; text-align:left; border:1.5px solid #f0b98f; background:#fff; color:var(--ink);
  font:inherit; font-size:clamp(12px,1.05vw,15px); font-weight:600; line-height:1.35;
  padding:.8em 1em; border-radius:14px; cursor:pointer; transition:all .13s;
}
.opts button:hover{border-color:var(--brand); background:#fff7f2; transform:translateX(3px);}
.opts button.eco{border-color:var(--line); color:#7A7064; font-weight:500;}

/* ---------- botão de som (rodapé) ---------- */
.btn-som{
  position:fixed; right:16px; bottom:16px; z-index:50;
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(14,70,132,.75); color:#fff; display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(20,50,90,.4); backdrop-filter:blur(4px);
  transition:transform .12s, background .2s;
}
.btn-som:hover{transform:scale(1.08); background:rgba(14,70,132,.95);}
.btn-som svg{width:22px; height:22px;}
/* mostra o ícone conforme o estado (classe .mudo no botão) */
.btn-som .ico-off{display:none;}
.btn-som.mudo .ico-on{display:none;}
.btn-som.mudo .ico-off{display:block;}
/* botão de tela cheia — ao lado do som */
.btn-full{right:70px;}
.btn-full .ico-exit{display:none;}
.btn-full.on .ico-full{display:none;}
.btn-full.on .ico-exit{display:block;}

/* ---------- mobile: gire o celular ---------- */
.girar{
  position:fixed; inset:0; z-index:200; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:20px;
  background:linear-gradient(180deg,var(--az-esc),var(--az-med)); color:#fff; text-align:center;
}
.girar-ico{width:74px; height:74px; animation:giraDica 1.8s ease-in-out infinite}
@keyframes giraDica{0%,55%{transform:rotate(0)} 80%,100%{transform:rotate(-90deg)}}
.girar-txt{font-size:18px; font-weight:700; line-height:1.35}
/* só em toque + retrato: cobre tudo. ao deitar, a media para de valer e some. */
@media (orientation:portrait) and (pointer:coarse){ .girar{display:flex} }

/* ---------- telas BAIXAS (celular deitado): o diálogo é alto demais e
   subiria até o logo. Encolhe o logo (sai do caminho) e reduz um pouco a
   fonte/espaços do diálogo, pra tudo caber sem encavalar em NENHUM ponto. */
@media (orientation:landscape) and (max-height:520px){
  .j-logo{width:14%; top:1.5%;}
  .j-gamesales{width:21%;}
  .dcol{gap:9px; max-height:78%;}
  .dbub{font-size:11.5px; padding:.5em .8em;}
  .dcard{padding:.7em .9em .8em;}
  .dcard .ttl{font-size:13px; margin-bottom:.5em;}
  .opts{gap:.4em;}
  .opts button{font-size:11.5px; padding:.55em .8em;}
}