/* Caliophsera — www.caliophsera.com
 * Copyright (c) 2026 Caliophsera. Todos os direitos reservados.
 * Uso permitido apenas através do site. Termos em /LICENSE.
 *
 * A CASCA: o desenho da pagina, do menu e dos botoes do topo.
 *
 * Saiu de dentro do index.html, onde eram 14,9 KB de CSS numa tag. Um arquivo
 * de mil e duzentas linhas que e tres linguagens ao mesmo tempo nao se le
 * por partes, e toda busca por um seletor ou por uma funcao devolvia o
 * arquivo inteiro. Agora o index.html e so a ESTRUTURA da pagina.
 */
  /* A cena e espacial, entao a pagina e escura SEMPRE — nao segue o tema do
     sistema. Um fundo claro sob um campo de estrelas nao faria sentido. */
  :root{
    --tinta:#eef1fa; --fraco:#9aa3bd;
    --violeta:#8f7fd8; --azul:#7ba2e0; --verde:#79c4a6;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:#05070f; color:var(--tinta);
    font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow:hidden;                 /* a cena ocupa a viewport inteira */
  }

  /* O canvas fica atras de tudo e nao intercepta clique nem toque. */
  #ceu{
    position:fixed; inset:0; width:100%; height:100%;
    display:block; z-index:0; pointer-events:none;
  }

  .wrap{
    position:relative; z-index:1;
    min-height:100%; min-height:100dvh;
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; text-align:center;
    padding:max(2rem,env(safe-area-inset-top)) 1.5rem
            max(2rem,env(safe-area-inset-bottom));
  }

  h1{
    /* Tipografia fluida: acompanha a largura sem media query. */
    /* 9,5vw e nao 11vw: "caliophsera" tem 11 letras, e com espacamento largo
       a linha estourava a lateral num aparelho de 320 px. O espacamento
       tambem encolhe junto — e ele que multiplica o problema. */
    font:200 clamp(2rem,9.5vw,5.5rem)/1.05 ui-sans-serif,system-ui,sans-serif;
    letter-spacing:clamp(.03em,1vw,.16em);
    max-width:100%;
    margin:0 0 clamp(1rem,3vh,1.8rem);
    text-transform:lowercase;
    background:linear-gradient(100deg,var(--violeta),#dfe6ff 42%,var(--azul));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    /* O brilho vem do texto, nao de uma sombra dura: a estrela esta atras. */
    filter:drop-shadow(0 0 26px rgba(143,127,216,.45));
  }

  .obra{
    display:inline-block; margin:0;
    font:400 clamp(11px,2.6vw,13px)/1 ui-sans-serif,system-ui,sans-serif;
    letter-spacing:.22em; text-transform:uppercase; color:var(--fraco);
    padding:.72rem 1.5rem; border-radius:999px;
    border:1px solid rgba(154,163,189,.22);
    background:rgba(10,14,26,.32);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  }

  footer{
    position:fixed; left:0; right:0;
    bottom:max(1.1rem,env(safe-area-inset-bottom)); z-index:1;
    font:400 11px/1 ui-sans-serif,system-ui,sans-serif;
    letter-spacing:.16em; text-transform:uppercase;
    color:rgba(154,163,189,.5); text-align:center;
  }

  /* Aparecer suave, sem esperar o canvas: o texto pinta primeiro. */
  .wrap>*{animation:surgir .9s cubic-bezier(.2,.7,.3,1) both}
  h1{animation-delay:.05s}
  .obra{animation-delay:.25s}
  @keyframes surgir{from{opacity:0; transform:translateY(14px)} to{opacity:1}}

  /* Telefone deitado tem ~360 px de altura. Com o rodape preso embaixo e o
     respiro normal, a pilula "Em construcao" encostava nele. Aqui o conjunto
     encolhe e o rodape sai do caminho. */
  @media (max-height:460px){
    h1{font-size:clamp(1.7rem,7vw,2.6rem); margin-bottom:.8rem}
    /* Aqui o rodape some, entao a dica assume o lugar dele. */
    .dica{bottom:max(10px,env(safe-area-inset-bottom))}
    .obra{padding:.55rem 1.1rem; letter-spacing:.16em}
    .wrap{padding-top:1rem; padding-bottom:1rem}
    footer{display:none}
  }

  /* Tela muito estreita: o respiro lateral vale mais que o tamanho da fonte. */
  /* Alvo de toque confortavel para os botoes que restaram no canto. */
  @media (pointer:coarse){
    #jsair,#jnovo,#jsom,#jconvite{width:2.9rem; height:2.9rem; font-size:15px}
    #jnovo{right:calc(max(12px,env(safe-area-inset-right)) + 3.4rem)}
    #jsom{right:calc(max(12px,env(safe-area-inset-right)) + 6.8rem)}
    #jogo #jconvite{right:calc(max(12px,env(safe-area-inset-right)) + 10.2rem)}
  }

  @media (max-width:360px){
    .wrap{padding-left:1rem; padding-right:1rem}
    .obra{letter-spacing:.14em; padding:.65rem 1.1rem}
  }

  /* Dica de como abrir o jogo. Discreta de proposito: e um brinde, nao a
     razao de a pessoa ter vindo. Nasce invisivel e o script decide o texto —
     escrita no HTML, ela apareceria por um instante com a instrucao do
     aparelho errado antes de ser corrigida. */
  .dica{
    /* Presa ao pe da tela, logo acima do endereco. Fixa e nao no fluxo: o
       bloco central e centralizado verticalmente, e a dica no fluxo empurrava
       o nome para cima — quanto mais discreta a linha, mais fora de lugar
       ficava mexer no que e o centro da pagina por causa dela. */
    position:fixed; left:0; right:0; z-index:1; text-align:center;
    bottom:calc(max(1.1rem,env(safe-area-inset-bottom)) + 1.85rem);
    margin:0;
    /* Minuscula e espacamento curto: caixa-alta com letra espacada e um
       recurso de DESTAQUE, e destaque e o oposto do que esta linha quer. */
    font:400 clamp(10px,2.2vw,11.5px)/1.7 ui-sans-serif,system-ui,sans-serif;
    letter-spacing:.05em;
    color:rgba(154,163,189,.3);
    opacity:0; transform:translateY(7px);
    /* Chega quase dois segundos depois, e leva um segundo e meio para chegar.
       A pagina se apresenta primeiro; a dica so entra quando o olho ja
       terminou de ler o nome. */
    transition:opacity 1.5s ease 1.8s,
               transform 1.5s cubic-bezier(.2,.7,.3,1) 1.8s,
               color .6s ease;
  }
  .dica.aparece{opacity:1; transform:none}
  /* Reage a atencao em vez de disputa-la: so clareia quando o ponteiro chega. */
  .dica:hover{color:rgba(154,163,189,.62)}
  .dica kbd{
    /* Sem moldura. A tecla desenhada como botao pesa mais que a frase
       inteira, e a leitura nao precisa dela para entender "Ctrl + /". */
    font:inherit; letter-spacing:.02em; border:0; padding:0; background:none;
    color:rgba(214,222,242,.62); white-space:nowrap;
  }

  /* ---- a cortina do jogo ---- */
  h1{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}

  #jogo{
    position:fixed; inset:0; z-index:50; background:#05070f;
    /* Comeca acima da tela e DESCE. `transform` e nao `top`: transform anima
       na placa de video, sem recalcular layout a cada quadro — com `top` a
       cortina engasga justamente no celular, onde ela mais aparece. */
    transform:translateY(-100%);
    transition:transform .62s cubic-bezier(.22,.75,.3,1);
    will-change:transform;
  }
  #jogo.desceu{transform:translateY(0)}
  #jogo[hidden]{display:none}
  /* A barra da bainha: e ela que faz o painel ser lido como cortina descendo,
     e nao como uma tela que apareceu deslizando. */
  #jogo::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--violeta),
               var(--azul),var(--verde),transparent);
    opacity:.85; pointer-events:none;
  }
  #telajogo{width:100%; height:100%; display:block; touch-action:none}

  /* Menu de jogos. Existe a partir do segundo: com um jogo so, uma tela de
     escolha entre uma opcao seria cerimonia sem conteudo. */
  /* CENTRALIZAR SO ENQUANTO COUBER.
     Isto era `place-content:center` com `overflow` implicito em `visible`, e
     com nove jogos a lista passou a medir 792px numa janela de 664. Conteudo
     centralizado que transborda vaza para os DOIS lados: a Sonda ficava em
     top:-81, acima da tela, sem rolagem que a alcancasse — some sem deixar
     rastro, que e o pior jeito de um item de menu desaparecer.
     `safe center` centraliza enquanto cabe e alinha ao topo quando nao cabe;
     o `center` na linha anterior fica de reserva para quem nao entender
     `safe`. E ai a rolagem resolve o resto. */
  #menu{
    position:absolute; inset:0; z-index:3; display:grid;
    align-content:center;
    align-content:safe center;
    /* UMA COLUNA DE LARGURA FIXA, e nao cada botao com a sua.
       Com `min-width` cada botao se dimensionava pelo proprio texto e a
       lista ficava serrilhada — Sonda larga, Xadrez estreito, Prisma
       quebrando a descricao em duas linhas. Fixando a coluna, todos ficam
       iguais e as descricoes cabem numa linha so. */
    grid-template-columns:min(88vw,21rem);
    justify-content:center;
    gap:.55rem;
    /* O topo reserva a faixa dos botoes de canto. Quando a lista transborda
       ela comeca colada no topo, e o titulo ia parar embaixo do ♪ e do ✕. */
    padding:calc(3.4rem + env(safe-area-inset-top)) 1.1rem
            calc(1.1rem + env(safe-area-inset-bottom));
    text-align:center; background:rgba(5,7,15,.55);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  /* Divisor entre jogar sozinho e jogar acompanhado. Nove itens seguidos, sem
     nenhuma separacao, sao uma parede de texto — e metade deles e variante em
     rede dos outros, o que confunde ainda mais. */
  #menu .jgrupo{
    margin:.5rem 0 .1rem; font:400 11px/1 ui-sans-serif,system-ui,sans-serif;
    letter-spacing:.14em; text-transform:uppercase;
    color:rgba(154,163,189,.5);
  }
  #menu[hidden]{display:none}
  #menu h2{
    margin:0 0 .6rem; font:300 clamp(1.1rem,4vw,1.5rem)/1.3 ui-sans-serif,
    system-ui,sans-serif; letter-spacing:.06em; color:var(--fraco);
  }
  #menu button{
    width:100%; padding:.7rem 1.4rem; border-radius:12px;
    border:1px solid rgba(154,163,189,.24); background:rgba(16,22,40,.72);
    color:#dfe6ff; cursor:pointer; text-align:left;
    font:500 clamp(14px,3.4vw,16px)/1.25 ui-sans-serif,system-ui,sans-serif;
    letter-spacing:.02em; transition:border-color .2s, background .2s;
  }
  #menu button:hover{border-color:rgba(143,127,216,.55); background:rgba(26,34,58,.85)}
  #menu button small{
    display:block; margin-top:.2rem; font:400 11.5px/1.3 ui-sans-serif,
    system-ui,sans-serif; color:rgba(154,163,189,.7); letter-spacing:0;
  }

  /* O #jconvite PRECISA estar aqui, e nao so na media query de toque.
     Ele estava listado apenas la; num ponteiro fino a regra nao se
     aplicava, o botao caia no fluxo normal e ia parar no rodape do
     painel, fora da tela. Media query da ESTILO condicional — nunca
     deve ser o unico lugar onde um elemento ganha posicao. */
  /* z-index 4: ACIMA do menu, que ocupa a tela inteira em z-index 3.
     Em 2 estes botões ficavam por baixo dele — visíveis e inclicáveis, que é
     o pior estado possível para um botão. Com o menu aberto o ✕ simplesmente
     não fechava a cortina, e ninguém notava porque o ESC também fecha. */
  #jsair,#jnovo,#jsom,#jconvite{
    position:absolute; top:max(12px,env(safe-area-inset-top)); z-index:4;
    width:2.4rem; height:2.4rem; border-radius:50%;
    touch-action:manipulation;
    border:1px solid rgba(154,163,189,.28); background:rgba(10,14,26,.7);
    color:var(--fraco); font:400 15px/1 system-ui,sans-serif; cursor:pointer;
    display:grid; place-items:center;
  }
  /* O atributo `hidden` esconde por uma regra da folha do NAVEGADOR, de
     especificidade quase nula. Qualquer regra por id que defina `display` a
     vence — e foi o que aconteceu: o botao ficava com hidden=true e display
     grid, isto e, escondido no atributo e visivel na tela. Quem define
     display por id precisa devolver o `hidden` explicitamente. */
  #jsair[hidden],#jnovo[hidden],#jsom[hidden],#jconvite[hidden]{display:none}

  #jsair{right:max(12px,env(safe-area-inset-right))}
  #jnovo{right:calc(max(12px,env(safe-area-inset-right)) + 2.9rem)}
  #jsom{right:calc(max(12px,env(safe-area-inset-right)) + 5.8rem)}
  #jconvite{right:calc(max(12px,env(safe-area-inset-right)) + 8.7rem)}

  /* Convite: QR para quem esta do lado, link para quem esta longe. */
  dialog#convite{
    border:0; border-radius:14px; padding:0; background:transparent;
    color:var(--tinta); max-width:min(92vw,23rem);
  }
  dialog#convite::backdrop{background:rgba(0,0,0,.62); backdrop-filter:blur(3px)}
  .cvcaixa{
    background:#131829; border:1px solid rgba(154,163,189,.2);
    border-radius:14px; padding:1.4rem; text-align:center;
  }
  .cvcaixa h3{margin:0 0 .3rem; font:600 1rem ui-sans-serif,system-ui,sans-serif}
  .cvcaixa p{margin:0 0 1rem; font:400 13px/1.5 ui-sans-serif,system-ui,sans-serif;
    color:var(--fraco)}
  /* Fundo branco sempre: leitor de QR precisa de contraste real, e um codigo
     claro sobre fundo escuro simplesmente nao e lido. */
  .cvcodigo{background:#fff; border-radius:10px; padding:.9rem; display:inline-block}
  .cvcodigo svg{width:min(56vw,12rem); height:auto; display:block}
  .cvurl{font:400 11px/1.4 ui-monospace,Menlo,monospace; color:var(--fraco);
    word-break:break-all; margin:.9rem 0 1rem}
  .cvbotoes{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap}
  .cvbotoes button{
    padding:.6rem 1.1rem; border-radius:9px; cursor:pointer;
    border:1px solid rgba(154,163,189,.24); background:rgba(26,34,58,.9);
    color:#dfe6ff; font:500 13px ui-sans-serif,system-ui,sans-serif;
  }
  .cvbotoes button:hover{border-color:rgba(143,127,216,.55)}

  /* Controle de toque: so em aparelho sem ponteiro fino. Num desktop os
     botoes seriam ruido sobre um jogo que se joga com as setas. */
  .jtoque{display:none}
  @media (pointer:coarse){
    /* Os botoes de acao sairam: viraram gesto. Botao em tela de vidro exige
       acertar um ponto que o dedo nao sente; o gesto nasce onde o dedo tocou.
       Ficaram no HTML de proposito — o codigo do jogo ainda os liga quando
       existem, e voltar atras e apagar esta regra. */
    .jtoque{display:none}
    #jdpad{
      position:absolute; left:max(14px,env(safe-area-inset-left));
      bottom:calc(max(14px,env(safe-area-inset-bottom)) + 8px); z-index:2;
      grid-template-columns:repeat(3,3.4rem); grid-template-rows:repeat(3,3.4rem);
    }
    #jcima{grid-area:1/2} #jesq{grid-area:2/1}
    #jdir{grid-area:2/3} #jbaixo{grid-area:3/2}
    #jdpad button{
      width:3.4rem; height:3.4rem; border-radius:14px;
      border:1px solid rgba(154,163,189,.22); background:rgba(16,22,40,.66);
      color:#cfd6ee; font:400 17px/1 system-ui,sans-serif;
      -webkit-user-select:none; user-select:none; touch-action:none;
    }
    /* Dois botoes de acao, empilhados: o tiro embaixo, sob o polegar, por
       ser o que mais se usa; a fumaca acima, que e recurso ocasional. */
    #jtiro,#jfumaca{
      position:absolute; right:max(18px,env(safe-area-inset-right)); z-index:2;
      border-radius:50%; font:400 11px/1 system-ui,sans-serif;
      letter-spacing:.08em; -webkit-user-select:none; user-select:none;
      touch-action:none;
    }
    #jtiro{
      bottom:calc(max(20px,env(safe-area-inset-bottom)) + 18px);
      width:5rem; height:5rem;
      border:1px solid rgba(226,240,255,.4); background:rgba(30,42,70,.75);
      color:#dfe9ff;
    }
    #jfumaca{
      bottom:calc(max(20px,env(safe-area-inset-bottom)) + 6.4rem);
      width:3.9rem; height:3.9rem;
      border:1px solid rgba(123,162,224,.3); background:rgba(20,30,56,.66);
      color:#9fb6e2; font-size:10px;
    }
  }

  /* Movimento continuo pode causar mal-estar vestibular. Respeitar a
     preferencia do sistema nao e detalhe de acessibilidade opcional. */
  @media (prefers-reduced-motion:reduce){
    .wrap>*{animation:none}
    .dica{transform:none; transition:opacity .4s ease}
  }