/* APP DO CELULAR · o que é só do app novo (ladrilhos do mapa, capa, amanhecer, erro). */
html,body{background:#000}
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
/* segurar o dedo em cima de qualquer coisa não abre o menu do iPhone (Compartilhar, Salvar em Fotos, Copiar...) nem seleciona
   texto, em nenhuma página (pedido do Ian, 19/10/2026); só os campos de escrever continuam selecionáveis */
html,body,body *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
img,svg,canvas,video{-webkit-user-drag:none}
input,textarea,select,[contenteditable="true"],[contenteditable="true"] *{-webkit-touch-callout:default;-webkit-user-select:text;user-select:text}
html.sem-rolar,html.sem-rolar body{overflow:hidden;overscroll-behavior:none;height:100%}
#tela[hidden]{display:none}
/* regra de ouro: a página nova se prepara escondida por trás e só aparece inteira; se a ida demorar, uma barrinha dourada no topo */
#tela{position:relative}
.pagina-app.pagina-entrando{position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none}
body.preparando::after{content:"";position:fixed;left:0;top:env(safe-area-inset-top,0);height:3px;width:40%;z-index:400;background:#e8c46a;box-shadow:0 0 6px #e8c46a;animation:preparando 1s ease-in-out infinite;pointer-events:none}
@keyframes preparando{0%{transform:translateX(-100%)}100%{transform:translateX(250vw)}}
body.sem-dock .dock{display:none}

/* capa: a arte da splash e a porcentagem; some quando o mapa está pronto */
#capa{position:fixed;inset:0;z-index:300;background:#000 center/cover no-repeat;transition:opacity .25s}
#capa.saindo{opacity:0;pointer-events:none}

/* mapa em ladrilhos: a arte inteira pequena fica atrás (primeiro instante e zoom de longe), os ladrilhos por cima */
#mapa .mp-ladrilhos{position:absolute;inset:0;background:#06121a center/100% 100% no-repeat;pointer-events:none}
#mapa .mp-ladr{position:absolute;display:block;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none}
#mapa .mp-pins,#mapa #animMapa{position:absolute;inset:0;pointer-events:none}
#mapa .mp-pin{pointer-events:auto}

/* amanhecer: as artes de tarde da lista do construtor (artesTarde) com um filtro azulado leve (sem gerar arte nova no aparelho) */
body.amanhecer-suave [data-amanhece],body.amanhecer-suave #mapa .mp-ladrilhos,body.amanhecer-suave #mapa .torre-frente{filter:saturate(.8) hue-rotate(-8deg) brightness(.97)}
body.amanhecer-forte [data-amanhece],body.amanhecer-forte #mapa .mp-ladrilhos,body.amanhecer-forte #mapa .torre-frente{filter:saturate(.62) hue-rotate(-14deg) brightness(.93)}

/* erro que não deixa a tela travada */
#erroApp{position:fixed;inset:0;z-index:400;background:#06121a;color:#e9edf7;display:grid;place-content:center;gap:16px;text-align:center;font:600 16px var(--texto);padding:24px}
#erroApp[hidden]{display:none}
#erroApp button{border:2px solid var(--ouro);background:var(--ouro);color:#1d1606;border-radius:14px;padding:14px 22px;font:800 13px var(--texto)}

/* medida das páginas (layout.js): os blocos ficam soltos como no construtor, para medir o tamanho de cada um */
.pagina-medida .b{position:absolute!important}

/* efeitos sobre as artes das páginas (efeitos-arte.js): ficam por cima da arte e nunca pegam toque */
.fx-arte{position:absolute;pointer-events:none;z-index:1}
.topo>.fx-arte~h1,.topo>.fx-arte~p{position:relative;z-index:2}

/* cinema à noite: lâmpadas em perseguição, letreiro de LED e o pôster da esquerda com mau contato */
.cine-b{position:absolute;border-radius:50%;background:radial-gradient(circle at 40% 36%,rgba(255,206,140,.32) 0 9%,rgba(255,206,140,0) 17%),radial-gradient(circle,#5e300a 0 40%,rgba(105,52,9,.9) 50%,rgba(140,70,10,0) 70%);opacity:0;animation:cineCorre .66s steps(1,end) infinite}
@keyframes cineCorre{0%{opacity:1}33.333%{opacity:0}100%{opacity:0}}
.cine-led{position:absolute;border-radius:2px;display:block}
.cine-pisca{position:absolute;background:rgba(6,10,9,.68);opacity:0}

/* estúdio: o vídeo do ALIMENTAR tocando na tela do computador da arte */
.fx-arte.est{overflow:hidden}
.est-tv{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#06121a;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
.est-tv video,.est-tv iframe{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);object-fit:cover;border:0;filter:brightness(.94) saturate(1.05) blur(.25px)}
.est-tv iframe{width:178%}
.est-tv::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(150,220,255,.16),rgba(0,0,0,0) 45%,rgba(0,20,40,.18));pointer-events:none}
/* o construtor do AOV mede o rosto dos cartões de personagem sem border-box (78 + borda); a medida aqui segue o construtor
   para as distâncias entre os cartões saírem iguais às do app publicado (na tela o cartão continua com o desenho do app) */
.pagina-medida .cartao-pers .cp-rosto{box-sizing:content-box}

/* animações do mapa (animacoes.js): cada uma é uma caixa do tamanho do quadro original, com o canvas no lugar do recorte */
.anim-mapa{position:absolute;inset:0;pointer-events:none;z-index:11}
.map-smoke{position:absolute;transform:translate3d(-50%,-50%,0);transform-origin:center center;pointer-events:none;overflow:hidden}
.map-smoke[hidden]{display:none}
.map-smoke canvas{position:absolute;display:block;pointer-events:none}
.map-smoke.is-luz-smoke canvas{mix-blend-mode:plus-lighter}

/* janela do MONTAR ANIMAÇÕES do construtor (só lá) */
.modo-montar .anim-mapa .map-smoke.construtor-sel{outline:2px dashed #e4b754;outline-offset:2px;pointer-events:auto;cursor:move;z-index:5}
.modo-montar .construtor-alca{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;border-radius:50%;background:#e4b754;border:2px solid #1d1606;cursor:ew-resize;pointer-events:auto}
.modo-montar .mp-pin.construtor-sel .bola{box-shadow:0 0 0 3px #fff3c9,0 0 0 7px rgba(228,183,84,.6)}
.modo-montar .mp-pin.construtor-sel{cursor:move}
.modo-previa .dock,.modo-previa .mp-pins,.modo-previa #capa{display:none!important}