/* Tela de abertura da Rabiscolândia: a cena 3D da escola ocupa a tela (com a foto pré-renderizada por baixo,
   que aparece na hora). À esquerda, o logo do jogo, o JOGAR enorme e os botões; à direita, o Rabisco 3D com o
   balão "Oi, <nome>!". Ao jogar, a interface sai de cena e uma íris cobre a tela.
   Desempenho: nada de blur/backdrop-filter; sombras só com box-shadow/text-shadow; animações em transform/opacity. */
@font-face {
  font-family: "Neulis Cursive";
  src: url("../assets/fontes/NeulisCursive-Black.otf") format("opentype");
  font-weight: 900;
  font-display: swap;
}
:root {
  --ciano: #00b5f0;
  --rosa: #ec2e8c;
  --laranja: #ff7a00;
  --amarelo: #ffcc1f;
  --marinho: #0b2a4a;
  --tinta: #151515;
  --branco: #ffffff;
  --texto: "Baloo 2", system-ui, sans-serif;
  --titulo: "Neulis Cursive", "Baloo 2", system-ui, sans-serif;
  --mola: cubic-bezier(0.2, 0.8, 0.2, 1);
  --margem: clamp(16px, 3.4vw, 64px);
  --topo: calc(env(safe-area-inset-top, 0px) + clamp(12px, 2.2vh, 28px));
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  /* foto da cena: aparece antes do 3D carregar (e fica, se o aparelho não tiver WebGL) */
  background: #bfe3fb url("../assets/portal-entrada-paisagem.webp") center 62% / cover no-repeat;
  color: var(--tinta);
  font-family: var(--texto);
  -webkit-tap-highlight-color: transparent;
}
@media (orientation: portrait) {
  body { background-image: url("../assets/portal-entrada-retrato.webp"); background-position: center 70%; }
}
#cena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s ease; }
.cena-viva #cena { opacity: 1; }
/* véu: sombra suave à esquerda (o título e o JOGAR leem bem sobre qualquer parte da cena) e no pé da tela */
.veu {
  position: fixed; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 26, 48, 0.62) 0%, rgba(6, 26, 48, 0.42) 26%, rgba(6, 26, 48, 0.12) 46%, rgba(6, 26, 48, 0) 60%),
    linear-gradient(to top, rgba(6, 26, 48, 0.4), rgba(6, 26, 48, 0) 26%),
    radial-gradient(120% 90% at 60% 40%, transparent 60%, rgba(6, 26, 48, 0.22) 100%);
  transition: opacity 0.6s ease;
}
[hidden] { display: none !important; }
.foto-cena .topo, .foto-cena .abertura, .foto-cena .veu, .foto-cena .destaques, .foto-cena .balao, .foto-cena .cortina, .foto-cena .cortina-aro, .foto-cena .instalar-app { display: none !important; }

/* ------------------------------------------------------------------ cabeçalho: logo Educarte e perfil */
.topo {
  position: fixed; top: var(--topo); left: var(--margem); right: var(--margem); z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  pointer-events: none;
  animation: desce 0.7s var(--mola) 0.1s both;
}
.topo .logo {
  height: clamp(44px, 6.4vh, 72px);
  background: var(--branco); border-radius: 16px; padding: 6px 14px;
  box-shadow: 0 1px 1px rgba(10, 40, 70, 0.12), 0 6px 16px -4px rgba(6, 26, 48, 0.45);
}
.perfil { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.topo .familia-botao-portal {
  height: clamp(44px, 5.6vh, 60px); padding: 4px 18px 4px 5px; gap: 10px;
  font: 800 clamp(16px, 1.9vh, 22px) var(--texto); color: var(--marinho);
  background: var(--branco); border: 0; border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 6px 16px -4px rgba(6, 26, 48, 0.5);
  transition: transform 0.25s var(--mola);
}
.topo .familia-botao-portal .roda { width: calc(clamp(44px, 5.6vh, 60px) - 10px); height: calc(clamp(44px, 5.6vh, 60px) - 10px); border: 3px solid var(--rosa); background: #ffe3f1; font-size: clamp(17px, 2.2vh, 26px); }
.topo .familia-botao-portal:hover { transform: translateY(-2px); }
.moedas {
  display: inline-flex; align-items: center; gap: 8px; height: clamp(38px, 4.8vh, 50px); padding: 0 16px 0 8px;
  font: 800 clamp(16px, 1.9vh, 22px) var(--texto); color: var(--marinho);
  background: var(--branco); border-radius: 999px; box-shadow: 0 6px 16px -4px rgba(6, 26, 48, 0.5);
}
.moeda { width: 1.3em; height: 1.3em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b0, #ffcc1f 45%, #e39a00); box-shadow: inset 0 0 0 2px #c98200; }

/* ------------------------------------------------------------------ coluna da abertura */
.abertura {
  position: fixed; z-index: 2;
  left: var(--margem); top: 0; bottom: 0;
  width: min(46vw, 820px);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: calc(var(--topo) + clamp(56px, 8vh, 96px)) 0 clamp(64px, 11vh, 130px);
  gap: clamp(10px, 2.2vh, 26px);
}
.marca-jogo { display: flex; flex-direction: column; align-items: flex-start; animation: sobe 0.8s var(--mola) 0.15s both; }
.serie {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 clamp(14px, 1.7vh, 22px) var(--texto); letter-spacing: 0.06em; text-transform: uppercase; color: var(--marinho);
  background: var(--branco); border-radius: 999px; padding: 3px 16px 3px 6px; margin-left: 0.3em;
  box-shadow: 0 6px 14px -4px rgba(6, 26, 48, 0.5);
}
.serie img { width: 1.6em; height: 1.6em; }

/* logo do jogo: letras de desenho animado com contorno branco e "volume" azul-marinho */
.titulo-jogo, .cortina-titulo {
  --tam: clamp(54px, min(9.6vw, 15.5vh), 168px);
  --vol: calc(var(--tam) * 0.055);
  margin: 0.16em 0 0; display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--titulo); font-weight: 900; font-size: var(--tam); line-height: 0.86; letter-spacing: -0.01em;
  -webkit-text-stroke: calc(var(--tam) * 0.06) var(--branco); paint-order: stroke fill;
  transform: rotate(-3deg); transform-origin: left center;
  text-shadow:
    0 calc(var(--vol) * 0.25) 0 #0b2a4a, 0 calc(var(--vol) * 0.5) 0 #0b2a4a, 0 calc(var(--vol) * 0.75) 0 #0b2a4a, 0 var(--vol) 0 #0b2a4a,
    0 calc(var(--vol) * 1.25) 0 #0b2a4a, 0 calc(var(--vol) * 1.5) 0 #0b2a4a,
    0 calc(var(--vol) * 2.6) calc(var(--vol) * 2.2) rgba(3, 14, 28, 0.45);
}
.titulo-jogo .l1, .cortina-titulo .l1 { color: var(--ciano); }
.titulo-jogo .l2, .cortina-titulo .l2 { color: var(--amarelo); margin-left: 0.62em; margin-top: -0.04em; }
.slogan {
  margin: clamp(10px, 1.8vh, 22px) 0 0 0.2em;
  font: 700 clamp(17px, 2.5vh, 30px) / 1.2 var(--texto); color: var(--branco);
  text-shadow: 0 2px 0 rgba(6, 26, 48, 0.55), 0 4px 14px rgba(6, 26, 48, 0.5);
  max-width: 24em; text-wrap: balance;
}

/* JOGAR: botão de doce, enorme, com brilho passando e um pulso calmo */
.jogar {
  --h: clamp(64px, 11.5vh, 128px);
  position: relative; display: inline-flex; align-items: center; gap: calc(var(--h) * 0.22);
  height: var(--h); padding: 0 calc(var(--h) * 0.62) 0 calc(var(--h) * 0.14);
  border-radius: 999px; text-decoration: none; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #ffe26a 0%, #ffbf1f 38%, #ff8f0f 78%, #ff7a00 100%);
  border: calc(var(--h) * 0.05) solid var(--branco);
  box-shadow:
    inset 0 calc(var(--h) * 0.06) 0 rgba(255, 255, 255, 0.55),
    inset 0 calc(var(--h) * -0.07) 0 rgba(196, 72, 0, 0.45),
    0 calc(var(--h) * 0.08) 0 #c24e00,
    0 calc(var(--h) * 0.16) calc(var(--h) * 0.3) rgba(6, 26, 48, 0.45);
  animation: sobe 0.8s var(--mola) 0.3s both, respira 2.6s ease-in-out 1.2s infinite;
  transition: transform 0.2s var(--mola), filter 0.2s;
  -webkit-touch-callout: none; user-select: none;
}
.jogar::before { /* brilho que atravessa o botão */
  content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; width: 30%; left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-18deg);
  animation: brilho 3.6s ease-in-out 1.6s infinite;
}
.jogar-icone {
  flex: none; width: calc(var(--h) * 0.74); height: calc(var(--h) * 0.74); border-radius: 50%;
  display: grid; place-items: center; color: var(--laranja);
  background: var(--branco);
  box-shadow: inset 0 calc(var(--h) * -0.04) 0 rgba(255, 122, 0, 0.25), 0 calc(var(--h) * 0.03) calc(var(--h) * 0.06) rgba(150, 60, 0, 0.35);
}
.jogar-icone svg { width: 54%; height: 54%; margin-left: 8%; }
.jogar-texto {
  font: 900 calc(var(--h) * 0.56) / 1 var(--titulo); color: var(--branco); letter-spacing: 0.02em;
  text-transform: uppercase; padding-top: 0.08em;
  -webkit-text-stroke: calc(var(--h) * 0.035) #c24e00; paint-order: stroke fill;
  text-shadow: 0 calc(var(--h) * 0.04) 0 #c24e00;
}
.jogar:hover { filter: brightness(1.05) saturate(1.05); transform: translateY(-3px) scale(1.03); animation-play-state: paused; }
.jogar:active { transform: translateY(calc(var(--h) * 0.06)) scale(0.98); box-shadow: inset 0 calc(var(--h) * 0.06) 0 rgba(255, 255, 255, 0.55), 0 calc(var(--h) * 0.02) 0 #c24e00, 0 calc(var(--h) * 0.06) calc(var(--h) * 0.14) rgba(6, 26, 48, 0.4); }
/* foco de controle/teclado: anel branco + halo ciano (o amarelo padrão não aparece num botão amarelo) */
.jogar:focus-visible, .jogar.controle-foco {
  outline: none !important;
  box-shadow:
    inset 0 calc(var(--h) * 0.06) 0 rgba(255, 255, 255, 0.55),
    0 calc(var(--h) * 0.08) 0 #c24e00,
    0 0 0 calc(var(--h) * 0.07) var(--ciano),
    0 0 0 calc(var(--h) * 0.13) rgba(255, 255, 255, 0.9),
    0 calc(var(--h) * 0.2) calc(var(--h) * 0.36) rgba(6, 26, 48, 0.5);
}
@keyframes respira { 50% { transform: scale(1.045); } }
@keyframes brilho { 0%, 55% { left: -40%; } 100% { left: 130%; } }
@keyframes sobe { from { opacity: 0; transform: translateY(28px); } }
@keyframes desce { from { opacity: 0; transform: translateY(-18px); } }
.marca-jogo .titulo-jogo { animation: logo-entra 0.9s var(--mola) 0.2s both; }
@keyframes logo-entra { from { opacity: 0; transform: rotate(-3deg) translateY(30px) scale(0.92); } }

.dica {
  margin: calc(clamp(10px, 2.2vh, 26px) * -0.4) 0 0 0.4em; min-height: 1.4em;
  font: 700 clamp(14px, 1.9vh, 22px) var(--texto); color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 6px rgba(6, 26, 48, 0.7);
  animation: sobe 0.8s var(--mola) 0.45s both;
}
.dica kbd {
  display: inline-block; min-width: 1.6em; padding: 0 0.45em; margin: 0 0.15em; border-radius: 0.4em;
  font: 800 0.9em var(--texto); color: var(--marinho); background: var(--branco); text-align: center;
  box-shadow: 0 0.14em 0 rgba(6, 26, 48, 0.55); text-shadow: none;
}
.dica kbd.a { border-radius: 50%; min-width: 1.6em; padding: 0; background: #2fbf4a; color: var(--branco); box-shadow: 0 0.14em 0 #17752a; }

/* botões secundários: pílulas brancas iguais (ícone + rótulo) */
.secundarios { display: flex; flex-wrap: wrap; gap: 12px; animation: sobe 0.8s var(--mola) 0.5s both; }
.sec {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
  height: clamp(44px, 5.6vh, 60px); padding: 0 20px 0 12px; border: 0; border-radius: 999px;
  font: 800 clamp(15px, 1.9vh, 21px) var(--texto); color: var(--marinho);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 0 rgba(6, 26, 48, 0.35), 0 10px 18px -8px rgba(6, 26, 48, 0.6);
  transition: transform 0.2s var(--mola), box-shadow 0.2s;
}
.sec .ico { font-size: 1.2em; line-height: 1; }
.sec:hover { transform: translateY(-2px); }
.sec:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(6, 26, 48, 0.35); }
.sec.instalar { background: var(--rosa); color: var(--branco); box-shadow: 0 4px 0 #a3125c, 0 10px 18px -8px rgba(6, 26, 48, 0.6); }
.sec:focus-visible, .sec.controle-foco, .topo .familia-botao-portal:focus-visible, .topo .familia-botao-portal.controle-foco, .mini:focus-visible, .mini.controle-foco {
  outline: 5px solid var(--amarelo) !important; outline-offset: 3px;
}

/* outros jogos no ar (quando houver mais de um) */
.mais-jogos { display: flex; flex-wrap: wrap; gap: 10px; animation: sobe 0.8s var(--mola) 0.6s both; }
.mini {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.95); color: var(--marinho); text-decoration: none; font-weight: 800; font-size: 15px;
  box-shadow: 0 6px 14px -6px rgba(6, 26, 48, 0.6);
}
.mini img, .mini .arte { width: 64px; height: 40px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: #e9f6fd; }

/* o que tem na cidade: faixa de selos no pé da tela */
.destaques {
  position: fixed; z-index: 2; left: var(--margem); bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(16px, 3vh, 36px));
  margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; max-width: calc(100vw - 2 * var(--margem));
  pointer-events: none;
  animation: sobe 0.8s var(--mola) 0.7s both;
}
.destaques li {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 10px; border-radius: 999px;
  font: 700 clamp(13px, 1.6vh, 19px) var(--texto); color: var(--branco);
  background: rgba(6, 26, 48, 0.55); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}

/* balão do Rabisco: o ponto (0,0) é o topo da cabeça dele na tela (vem da cena 3D a cada quadro);
   o corpo branco fica acima, com a pontinha descendo até a cabeça */
.balao { position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform; }
.balao-corpo {
  position: absolute; left: 0; bottom: clamp(12px, 1.8vh, 22px);
  transform: translateX(-50%) scale(0.6); transform-origin: 50% 100%; opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
  padding: 0.38em 0.9em 0.42em; border-radius: 1.1em; white-space: nowrap; text-align: center;
  font: 800 clamp(18px, 2.7vh, 32px) / 1.02 var(--texto); color: var(--marinho);
  background: var(--branco);
  box-shadow: 0 0.12em 0 rgba(6, 26, 48, 0.25), 0 0.5em 1em -0.3em rgba(6, 26, 48, 0.55);
}
.balao-corpo::after { /* pontinha */
  content: ""; position: absolute; left: 50%; bottom: -0.42em; width: 0.9em; height: 0.9em;
  background: var(--branco); border-radius: 0 0 0.22em 0; transform: translateX(-50%) rotate(45deg);
  z-index: -1;
}
.balao-corpo b { color: var(--rosa); }
.balao-corpo small { display: block; font-size: 0.62em; font-weight: 700; color: #3b5a78; margin-top: 0.12em; }
.balao.visivel .balao-corpo { opacity: 1; transform: translateX(-50%) scale(1); }

/* ------------------------------------------------------------------ JOGAR: a interface sai e a íris cobre a tela */
.saindo .marca-jogo, .saindo .topo { transition: transform 0.55s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.45s ease; transform: translateY(-40px); opacity: 0; }
.saindo .secundarios, .saindo .dica, .saindo .destaques, .saindo .mais-jogos { transition: transform 0.5s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.35s ease; transform: translateY(40px); opacity: 0; }
.saindo .marca-jogo, .saindo .secundarios, .saindo .dica, .saindo .destaques, .saindo .topo { animation: none; }
.saindo .jogar { animation: aperto 0.5s var(--mola) both; pointer-events: none; }
.saindo .veu { opacity: 0.4; }
@keyframes aperto { 0% { transform: scale(1); } 30% { transform: scale(0.92); } 65% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1.05); opacity: 0; } }

.cortina {
  --cx: 50vw; --cy: 50vh;
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  display: grid; place-items: center;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(0, 181, 240, 0.38), transparent 70%),
    linear-gradient(170deg, #0f4c86 0%, #0b2a4a 100%);
  clip-path: circle(0 at var(--cx) var(--cy));
  visibility: hidden;
}
.cortina.fechada, .cortina.fechada + .cortina-aro { transition: clip-path 0.62s cubic-bezier(0.65, 0, 0.35, 1); }
.cortina.fechada { clip-path: circle(150vmax at var(--cx) var(--cy)); visibility: visible; pointer-events: auto; }
/* aro branco que vem um pouco à frente da íris (acabamento da borda) */
.cortina-aro {
  position: fixed; inset: 0; z-index: 19; pointer-events: none; visibility: hidden;
  background: var(--branco);
  clip-path: circle(14px at var(--cx) var(--cy));
}
.cortina.fechada + .cortina-aro { clip-path: circle(calc(150vmax + 14px) at var(--cx) var(--cy)); visibility: visible; }
.cortina-miolo { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.4vh, 28px); opacity: 0; transform: scale(0.9); transition: opacity 0.4s ease 0.3s, transform 0.5s var(--mola) 0.3s; }
.cortina.fechada .cortina-miolo { opacity: 1; transform: none; }
.cortina-titulo { --tam: clamp(48px, min(8vw, 13vh), 140px); align-items: center; }
.cortina-titulo .l2 { margin-left: 0; }
.cortina-carrega { display: flex; gap: 0.5em; font-size: clamp(14px, 2vh, 22px); }
.cortina-carrega i { width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--branco); animation: pula 0.9s ease-in-out infinite; box-shadow: 0 0.15em 0 rgba(6, 26, 48, 0.3); }
.cortina-carrega i:nth-child(2) { animation-delay: 0.15s; background: var(--amarelo); }
.cortina-carrega i:nth-child(3) { animation-delay: 0.3s; background: #ffd1e6; }
@keyframes pula { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-0.8em); } }
.cortina-texto { font: 800 clamp(16px, 2.4vh, 28px) var(--texto); color: var(--branco); text-shadow: 0 2px 0 rgba(6, 26, 48, 0.35); }

/* ------------------------------------------------------------------ celular deitado e telas baixas */
@media (max-height: 560px) and (orientation: landscape) {
  :root { --margem: max(16px, env(safe-area-inset-left, 0px)); --topo: calc(env(safe-area-inset-top, 0px) + 10px); }
  .topo .logo { height: 40px; padding: 4px 10px; border-radius: 12px; }
  .topo .familia-botao-portal { height: 40px; font-size: 15px; padding-right: 14px; }
  .topo .familia-botao-portal .roda { width: 32px; height: 32px; font-size: 16px; border-width: 2px; }
  .moedas { height: 36px; font-size: 15px; }
  .abertura { width: min(52vw, 520px); padding: 58px 0 12px; gap: 8px; justify-content: center; }
  .serie { font-size: 11px; padding: 2px 12px 2px 4px; }
  .titulo-jogo { --tam: clamp(40px, 15.5vh, 76px); margin-top: 0.28em; }
  .slogan { display: none; }
  .jogar { --h: clamp(52px, 15vh, 68px); margin-top: 4px; }
  .dica { font-size: 13px; margin-top: -2px; }
  .sec { height: 38px; font-size: 14px; padding: 0 14px 0 10px; }
  .destaques { display: none; }
  .balao-corpo { font-size: 16px; }
}
@media (max-height: 420px) and (orientation: landscape) {
  .dica { display: none; }
}
/* celular em pé (o jogo pede para deitar, mas a abertura também funciona): tudo centralizado */
@media (orientation: portrait) {
  .veu { background: linear-gradient(to bottom, rgba(6, 26, 48, 0.5), rgba(6, 26, 48, 0) 40%), linear-gradient(to top, rgba(6, 26, 48, 0.6), rgba(6, 26, 48, 0) 45%); }
  .abertura { left: 16px; right: 16px; width: auto; align-items: center; justify-content: space-between; text-align: center; padding: calc(var(--topo) + 64px) 0 calc(env(safe-area-inset-bottom, 0px) + 28px); }
  .marca-jogo { align-items: center; }
  .titulo-jogo { --tam: clamp(52px, 16vw, 120px); align-items: center; transform-origin: center; }
  .titulo-jogo .l2 { margin-left: 0.9em; }
  .slogan { margin-left: 0; }
  .jogar { margin-top: auto; }
  .secundarios { justify-content: center; }
  .destaques { display: none; }
  .topo { left: 16px; right: 16px; }
}
@media (max-width: 560px) {
  .topo .logo { height: 40px; padding: 4px 8px; border-radius: 12px; }
  .topo .familia-botao-portal { height: 40px; font-size: 15px; }
  .topo .familia-botao-portal .roda { width: 32px; height: 32px; }
  .sec .rot { display: none; }
  .sec { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .jogar, .jogar::before, .marca-jogo, .titulo-jogo, .secundarios, .dica, .destaques, .topo, .mais-jogos { animation: none !important; }
  #cena, .cortina, .cortina-aro, .cortina-miolo, .balao-corpo { transition: none; }
}