/* ==========================================================================
   HOME + seleção de fases
   Tipos: Silkscreen (display), Pixelify Sans (rótulos do mapa), Barlow (frase).
   Tudo mora dentro de #tela, que é a janela inteira (computador, celular deitado)
   ou só a tela do console (celular em pé, ver shell/console.js). As medidas usam
   unidades de container (cqw/cqh) para a tela escalar inteira junto com #tela.
   Medida base: --u = 1% do menor lado útil de #tela.
   ========================================================================== */
:root{
  --vermelho:#DA291C; --amarelo:#FFC72C; --creme:#FFF6C9; --vinho:#2A0503; --noite:#0B0A0F;
  --display:"Silkscreen","Courier New",monospace;
  --rotulo:"Pixelify Sans","Silkscreen",monospace;
  --texto:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --u:min(1cqw,1.78cqh);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--noite);overflow:hidden;overscroll-behavior:none}
body{color:var(--creme);font-family:var(--texto);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p,h1,h2{margin:0}

#app{position:fixed;inset:0;overflow:hidden;background:var(--noite)}
#tela{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;background:var(--noite);container-type:size;container-name:tela;isolation:isolate}
#mapa{position:absolute;inset:0;width:100%;height:100%;display:block}
.tela{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s steps(6),visibility 0s .45s}
#app[data-tela="home"] #home,#app[data-tela="sel"] #sel{opacity:1;visibility:visible;transition:opacity .45s steps(6)}

/* CRT por cima de tudo (menos da fase, que tem o dela) */
.crt{position:absolute;inset:0;pointer-events:none;z-index:5;mix-blend-mode:multiply;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(6,4,18,.5) 100%),
    repeating-linear-gradient(to bottom, rgba(8,6,20,0) 0, rgba(8,6,20,0) 2px, rgba(8,6,20,.24) 3px, rgba(8,6,20,.24) 4px)}
/* abertura das marcas: canvas em pixel grande, por baixo do CRT */
#boot{position:absolute;left:0;top:0;display:none;z-index:4;image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer}
#app[data-tela="boot"] #boot{display:block}
#cortina{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9}

/* carregando a fase: blocos acendendo, no canto da tela, enquanto o jogo abre */
#carregando{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);display:none;gap:calc(var(--u)*.6);z-index:10}
#carregando i{width:calc(var(--u)*1.6);height:calc(var(--u)*1.6);min-width:6px;min-height:6px;background:#3A3442;animation:bloco 1s steps(1) infinite}
#carregando i:nth-child(2){animation-delay:.12s}#carregando i:nth-child(3){animation-delay:.24s}#carregando i:nth-child(4){animation-delay:.36s}
#carregando i:nth-child(5){animation-delay:.48s}#carregando i:nth-child(6){animation-delay:.6s}#carregando i:nth-child(7){animation-delay:.72s}#carregando i:nth-child(8){animation-delay:.84s}
@keyframes bloco{0%,40%{background:var(--amarelo)}41%,100%{background:#3A3442}}
#app.carregando #carregando{display:flex}

/* ------------------------------- HOME ------------------------------- */
#home{display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:calc(var(--u)*2.6) 4cqw calc(var(--u)*2.2)}
.centro{display:flex;flex-direction:column;align-items:center;margin-top:calc(var(--u)*-1)}
.assina{display:flex;gap:calc(var(--u)*2.2);align-items:center;font:400 calc(var(--u)*.92)/1 var(--display);letter-spacing:.34em;text-transform:uppercase;color:#F4F0F7;text-shadow:0 .12em 0 rgba(10,6,20,.8)}
.assina i{width:.5em;height:.5em;background:var(--amarelo);display:block}
.apresenta{margin-bottom:calc(var(--u)*3.4);font:400 calc(var(--u)*.98)/1 var(--display);letter-spacing:.42em;margin-right:-.42em;text-transform:uppercase;color:#F4F0F7;text-shadow:0 .12em 0 rgba(10,6,20,.8)}
/* lettering do título: Pixelify Sans Bold, inclinado, face amarela chapada e extrusão vermelha em dois tons
   (mesma construção da abertura do tratamento) */
.titulo{display:grid;justify-items:center;gap:.2em;font:700 calc(var(--u)*12.2)/.74 var(--rotulo);letter-spacing:-.012em;text-transform:uppercase;transform:skewX(-8deg)}
.titulo span{display:flex}
.titulo b{display:block;position:relative;font-weight:700}
#app[data-tela="home"] .titulo b{animation:cai .52s cubic-bezier(.3,1.35,.5,1) both;animation-delay:calc(var(--i)*70ms + 250ms)}
.titulo b i{font-style:normal;display:block;padding-top:.3em;margin-top:-.3em}   /* a folga de cima é para o acento do É entrar na face */
.titulo b .ext{position:absolute;left:0;top:0;color:#C8402E;
  text-shadow:.012em .012em 0 #C8402E,.024em .024em 0 #C8402E,.036em .036em 0 #C23B2B,.048em .048em 0 #B03226,.06em .06em 0 #5A1214,.072em .072em 0 #4A0E10,.084em .084em 0 #4A0E10,.12em .13em 0 rgba(16,6,22,.5)}
.titulo b .face{position:relative;color:transparent;
  background:linear-gradient(to bottom,#FAD67A 0,#FAD67A 36%,#F4C456 37%,#F4C456 100%);
  -webkit-background-clip:text;background-clip:text}
@keyframes cai{0%{transform:translateY(-140cqh)}70%{transform:translateY(0) scaleY(.82) scaleX(1.08)}85%{transform:translateY(-.06em) scaleY(1.06) scaleX(.96)}100%{transform:none}}
.tag{margin-top:calc(var(--u)*2.6);font:400 calc(var(--u)*1.72)/1.2 var(--texto);color:#F6F2EA;text-shadow:0 .08em 0 rgba(10,6,20,.95),0 0 .5em rgba(10,6,20,.9),0 0 1.2em rgba(10,6,20,.8)}
.start{margin-top:calc(var(--u)*3);font:700 calc(var(--u)*1.9)/1 var(--display);letter-spacing:.28em;text-transform:uppercase;color:var(--amarelo);
  text-shadow:.09em .09em 0 #B8420F,.18em .18em 0 var(--vinho);padding:.6em 1em}
.start::before{content:"▶";margin-right:.7em;font-size:.8em}
.start:focus-visible{outline:2px solid var(--creme);outline-offset:4px}
@keyframes pisca{0%,62%{opacity:1}63%,100%{opacity:.15}}
.cred{display:flex;gap:calc(var(--u)*2.4);font:400 calc(var(--u)*.86)/1 var(--display);letter-spacing:.4em;text-transform:uppercase}
.cred span{color:#CFC8DA}
#app[data-tela="home"] :is(.assina,.apresenta,.tag,.cred){animation:surge .6s steps(5) both;animation-delay:1.25s}
#app[data-tela="home"] .start{animation:surge .6s steps(5) 1.6s both,pisca 1.1s steps(1) 2.2s infinite}
@keyframes surge{from{opacity:0}to{opacity:1}}
/* iPhone no navegador: como pôr o jogo em tela cheia (some sozinha, aparece uma vez) */
.dica-app{position:absolute;left:50%;bottom:calc(var(--u)*1.2);transform:translateX(-50%);width:max-content;max-width:92%;padding:.7em 1em;background:rgba(11,10,15,.86);border-top:2px solid var(--amarelo);
  font:500 max(10px,calc(var(--u)*1.25))/1.35 var(--texto);color:#EDE6F3;text-align:center;animation:surge .6s steps(5) 2.4s both}
.dica-app b{display:block;font:700 max(9px,calc(var(--u)*1.1))/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--amarelo)}

/* ----------------------------- SELEÇÃO ----------------------------- */
#sel{pointer-events:none}
#sel button,#sel .carteira{pointer-events:auto}
#sel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to top,rgba(8,5,20,.86),rgba(8,5,20,0));pointer-events:none}
#sel::before{content:"";position:absolute;left:0;right:0;top:0;height:20%;background:linear-gradient(to bottom,rgba(8,5,20,.7),rgba(8,5,20,0));pointer-events:none}
.topo{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*3);top:calc(var(--u)*2.4);display:flex;justify-content:space-between;align-items:flex-start;z-index:2}
.passo{font:400 calc(var(--u)*1.02)/1.5 var(--display);letter-spacing:.3em;text-transform:uppercase;color:#CFC8DA;display:grid}
.passo b{font:700 calc(var(--u)*1.7)/1.1 var(--display);letter-spacing:.2em;color:var(--amarelo);text-shadow:.08em .08em 0 #B8420F,.16em .16em 0 var(--vinho)}
.carteira{display:flex;align-items:center;gap:.4em;font:700 calc(var(--u)*2.2)/1 var(--display);color:var(--amarelo);text-shadow:.08em .08em 0 var(--vinho)}
.carteira canvas{width:1.5em;height:1.5em;image-rendering:pixelated}
.carteira span{font-size:.6em;color:var(--creme)}

/* rótulo que segue a ilha, no tipo do vídeo do mapa */
.rotulo{position:absolute;left:0;top:0;z-index:2;transform:translate(-50%,-100%);text-align:center;white-space:nowrap;will-change:transform,left,top}
.rotulo b{display:block;font:700 calc(var(--u)*2.9)/1 var(--rotulo);color:#F6ECC9;
  text-shadow:.07em 0 0 #1B1320,-.07em 0 0 #1B1320,0 .07em 0 #1B1320,0 -.07em 0 #1B1320,.07em .07em 0 #1B1320,-.07em -.07em 0 #1B1320,.07em -.07em 0 #1B1320,-.07em .07em 0 #1B1320,.12em .16em 0 #1B1320}
.rotulo small{display:none;margin-top:.5em;font:700 calc(var(--u)*1.05)/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--vinho);background:var(--amarelo);padding:.45em .7em .4em .9em}
.rotulo.fechada small{display:inline-block}
.rotulo.treme{animation:treme .32s steps(4)}
@keyframes treme{0%,100%{margin-left:0}25%{margin-left:-.7cqw}50%{margin-left:.7cqw}75%{margin-left:-.35cqw}}

.seta{position:absolute;top:46%;width:calc(var(--u)*5.5);height:calc(var(--u)*7);z-index:2;display:grid;place-items:center}
.seta::before{content:"";width:0;height:0;border:calc(var(--u)*1.3) solid transparent;filter:drop-shadow(.2cqw .2cqw 0 var(--vinho))}
.seta.esq{left:calc(var(--u)*1.2)} .seta.esq::before{border-right-color:var(--amarelo);border-left-width:0}
.seta.dir{right:calc(var(--u)*1.2)} .seta.dir::before{border-left-color:var(--amarelo);border-right-width:0}
.seta:active::before{transform:scale(.85)}

.base{position:absolute;left:calc(var(--u)*3);right:calc(var(--u)*3);bottom:calc(var(--u)*5.2);display:flex;justify-content:space-between;align-items:flex-end;gap:2cqw;z-index:2}
.genero{font:400 calc(var(--u)*1.02)/1 var(--display);letter-spacing:.32em;text-transform:uppercase;color:var(--amarelo)}
.ficha h2{margin:.28em 0 .3em;font:700 calc(var(--u)*4.4)/.95 var(--display);letter-spacing:-.02em;text-transform:uppercase;color:#fff;text-shadow:.05em .05em 0 var(--vermelho),.1em .1em 0 var(--vinho)}
.estado{font:500 calc(var(--u)*1.42)/1.3 var(--texto);color:#E9E3F0;display:flex;gap:1.4em;flex-wrap:wrap}
.estado b{font:700 1em/1.3 var(--display);letter-spacing:.06em;color:var(--creme);margin-left:.35em}
.estado .nota{color:var(--amarelo)}
.jogar{display:grid;justify-items:center;gap:.35em;padding:calc(var(--u)*1.05) calc(var(--u)*2.4) calc(var(--u)*.9);background:var(--vermelho);color:var(--creme);
  box-shadow:inset 0 calc(var(--u)*.3) 0 #F2402E,inset 0 calc(var(--u)*-.3) 0 #9E160C,calc(var(--u)*.35) calc(var(--u)*.35) 0 var(--vinho)}
.jogar span{font:700 calc(var(--u)*2.5)/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--amarelo);text-shadow:.07em .07em 0 var(--vinho)}
.jogar small{font:400 calc(var(--u)*.9)/1 var(--display);letter-spacing:.42em;text-transform:uppercase;margin-right:-.42em}
.jogar:active{transform:translate(calc(var(--u)*.25),calc(var(--u)*.25));box-shadow:inset 0 calc(var(--u)*.3) 0 #F2402E,inset 0 calc(var(--u)*-.3) 0 #9E160C,calc(var(--u)*.1) calc(var(--u)*.1) 0 var(--vinho)}
.jogar span::after{content:" ▶";font-size:.7em}
.jogar.fechada{background:#3A3442;box-shadow:inset 0 calc(var(--u)*.3) 0 #4E4758,inset 0 calc(var(--u)*-.3) 0 #26212C,calc(var(--u)*.35) calc(var(--u)*.35) 0 #120E18}
.jogar.fechada span{color:#A39CAE} .jogar.fechada span::after{content:""}
#app[data-tela="sel"] .jogar:not(.fechada) span{animation:pisca 1.1s steps(1) infinite}
.atalhos{position:absolute;left:0;right:0;bottom:calc(var(--u)*1.7);z-index:2;display:flex;justify-content:center;gap:calc(var(--u)*3);font:400 calc(var(--u)*.86)/1 var(--display);letter-spacing:.26em;text-transform:uppercase;color:#B9B1C6}
.atalhos-console{display:none}
#app:not([data-modo="pc"]) .atalhos{display:none}
#app[data-modo="deitado"] .base{bottom:calc(var(--u)*3)}

/* ------------------------------- FASE ------------------------------- */
/* a fase ocupa a janela inteira (no celular em pé, o jogo desenha o próprio console por cima deste) */
#fase{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;z-index:20}
#fase[hidden]{display:none}
#fase.esperando{visibility:hidden}

/* tela alta (janela estreita no computador): o título continua mandando, a ficha vira coluna */
@container tela (max-aspect-ratio:1/1){
  #home,#sel{--u:min(1.9cqw,1cqh)}
  .assina{letter-spacing:.2em;gap:1.2em}
  .base{flex-direction:column;align-items:flex-start}
  .seta{top:38%}
}
@media (prefers-reduced-motion:reduce){.titulo b,.assina,.apresenta,.tag,.start,.cred{animation:none}.start{animation:none}}

/* ilha no canto de baixo à esquerda: a ficha sobe para a direita, em cima do START, e a ilha fica livre */
.base.troca{flex-direction:column;align-items:flex-end;gap:calc(var(--u)*1.6)}
.base.troca .ficha{text-align:right}
.base.troca .estado{justify-content:flex-end}

/* ========================= CELULAR EM PÉ: O CONSOLE ========================= */
#console{position:absolute;left:0;top:0;display:none;z-index:1;touch-action:none}
#app[data-modo="console"]{background:#1a0a0c}
#app[data-modo="console"] #console{display:block}
#app[data-modo="console"] #tela{z-index:2}
#console .moldura{position:absolute;inset:0;border-style:solid;border-color:transparent;pointer-events:none}
#console .cb{position:absolute}
#console .cb i{position:absolute;inset:0;background-repeat:no-repeat;pointer-events:none}
#console .cb .buraco{filter:brightness(0);opacity:.72}
#console .cb.rd .buraco{filter:none;opacity:1;background:radial-gradient(circle,#1a0608 55%,#3a0a0e 70%,rgba(0,0,0,0) 72%) !important}
#console .cb .tecla{transition:transform 70ms ease-out,filter 70ms;will-change:transform}
#console .cb.on .tecla{transform:scale(.9) translateY(3%);filter:brightness(.78) saturate(1.1)}
#console .cb.pl.on .tecla{transform:scale(.9) translateY(4%);filter:brightness(.6)}
#console .cb.rd .brilho{inset:-6%;border-radius:50%;transition:box-shadow 90ms}
#console .cb.rd.on .brilho{box-shadow:0 0 0 3px rgba(255,236,140,.55),0 0 16px 4px rgba(255,210,60,.45)}
#console .cb.dp .tecla{transform:perspective(500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
#console .cb.dp.on .tecla{filter:brightness(.9)}

/* o que muda dentro da telinha: textos com tamanho mínimo legível, ficha em coluna, atalhos do console */
#app[data-modo="console"] #home{--u:min(1.9cqw,1.12cqh);padding:calc(var(--u)*3) 3cqw calc(var(--u)*2.4)}
#app[data-modo="console"] .assina{font-size:max(7px,2.3cqw);letter-spacing:.16em;gap:.9em}
#app[data-modo="console"] .apresenta{font-size:max(6px,2.3cqw);letter-spacing:.24em;margin-right:-.24em;margin-bottom:calc(var(--u)*2.6)}
#app[data-modo="console"] .titulo{font-size:min(18.5cqw,12cqh)}
#app[data-modo="console"] .tag{font-size:max(11px,4cqw);max-width:84%;margin-top:calc(var(--u)*2.4)}
#app[data-modo="console"] .start{font-size:max(10px,4.3cqw);margin-top:calc(var(--u)*2)}
#app[data-modo="console"] .cred{font-size:max(6px,2.1cqw);letter-spacing:.3em}
#app[data-modo="console"] .dica-app{bottom:1.5cqw;font-size:max(9px,3.2cqw);padding:.5em .8em}
#home.com-dica .cred{visibility:hidden}
#app[data-modo="console"] .dica-app b{font-size:max(8px,2.7cqw)}
#app[data-modo="console"] #sel{--u:min(2.6cqw,1.5cqh)}
#app[data-modo="console"] .topo{left:4cqw;right:4cqw;top:3cqw}
#app[data-modo="console"] .passo{font-size:max(6px,2.4cqw);letter-spacing:.18em}
#app[data-modo="console"] .passo b{font-size:max(9px,3.9cqw);letter-spacing:.12em}
#app[data-modo="console"] .carteira{font-size:max(10px,4.6cqw)}
#app[data-modo="console"] .rotulo b{font-size:max(15px,6.4cqw)}
#app[data-modo="console"] .rotulo small{font-size:max(7px,2.5cqw)}
#app[data-modo="console"] .seta{top:44%;width:9cqw;height:12cqw}
#app[data-modo="console"] .seta::before{border-width:2.6cqw}
#app[data-modo="console"] .seta.esq{left:1cqw} #app[data-modo="console"] .seta.dir{right:1cqw}
#app[data-modo="console"] #sel::after{height:40%}
#app[data-modo="console"] .base,#app[data-modo="console"] .base.troca{left:4cqw;right:4cqw;bottom:calc(5cqw + max(7px,2.3cqw) * 2.4);flex-direction:row;align-items:flex-end;gap:3cqw}
#app[data-modo="console"] .base.troca .ficha{text-align:left}
#app[data-modo="console"] .base.troca .estado{justify-content:flex-start}
#app[data-modo="console"] .ficha{flex:1;min-width:0}
#app[data-modo="console"] .genero{font-size:max(6px,2.4cqw);letter-spacing:.2em}
#app[data-modo="console"] .ficha h2{font-size:max(15px,6.6cqw);overflow-wrap:anywhere}
#app[data-modo="console"] .estado{font-size:max(10px,3.5cqw);gap:.2em .9em}
#app[data-modo="console"] .jogar{padding:2.4cqw 3.6cqw 2cqw;flex:none}
#app[data-modo="console"] .jogar span{font-size:max(10px,4.4cqw);letter-spacing:.14em}
#app[data-modo="console"] .jogar small{font-size:max(6px,2cqw);letter-spacing:.3em;margin-right:-.3em}
#app[data-modo="console"] .atalhos-console{position:absolute;left:0;right:0;bottom:3.4cqw;z-index:2;display:flex;justify-content:center;gap:1.3em;
  font:400 max(6px,2.2cqw)/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#B9B1C6}