/* ==========================================================================
   KOBU-KAN · Trava de orientação — retrato obrigatório NO CELULAR
   --------------------------------------------------------------------------
   Pedido do dono (23/08/2026): "pessoal tentou usar o site no celular na
   horizontal (...) coloca uma trava que impossibilita rotacionar ele na
   horizontal, assim evita falatório".

   O QUE DÁ E O QUE NÃO DÁ PRA FAZER
   ---------------------------------
   Nenhum site consegue proibir o giro do aparelho pelo navegador. O que existe:

     1) manifest.webmanifest -> "orientation": "portrait"
        Trava DE VERDADE, mas só no app INSTALADO no Android. Já está lá.
     2) screen.orientation.lock()
        Só funciona em tela cheia / PWA Android — no iOS o método nem existe.
     3) Esta folha de estilo.
        Único caminho que funciona no iPhone (inclusive no app da tela de
        início, que é onde o pessoal reclamou). Não impede o giro físico:
        cobre a tela com um aviso, então girar deixa de ser uma opção útil.

   ONDE ELA PEGA (e por que a trava é tão específica)
   --------------------------------------------------
     orientation:landscape -> a tela está deitada
     max-height:500px      -> altura de CELULAR deitado (o maior hoje bate
                              ~450px). Tablet deitado tem 768px+ e DESKTOP
                              tem muito mais: os dois passam batido.
     pointer:coarse        -> o dedo é o apontador principal. Segundo cinto de
                              segurança: monitor com mouse nunca casa aqui.

   As três juntas só fecham em celular deitado. Note que `orientation:landscape`
   em CSS quer dizer "largura > altura" e NÃO "aparelho girado" — por isso o
   max-height existe: sem ele, um teclado virtual que encolhesse a viewport
   poderia disparar o aviso com o celular em pé.

   ATENÇÃO: telas largas de propósito (chave de campeonato, tabelas grandes)
   deixam de ser vistas deitadas no celular. Se um dia quiser liberar UMA
   página, é só não incluir este arquivo nela — ele é standalone de propósito.

   Sem dependência de token nenhum: as páginas do painel Flask não carregam o
   kobukan-modern.css, então as cores vão escritas aqui mesmo.
   ========================================================================== */

@media only screen and (orientation:landscape) and (max-height:500px) and (pointer:coarse){

  /* Trava a rolagem por baixo do aviso e mata o efeito elástico do iOS —
     sem isso dá pra "empurrar" a página e ver o conteúdo atrás do overlay. */
  html,body{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  /* Fundo do aviso + ícone do celular girando.
     z-index no teto do int32: o maior do sistema hoje é 10000 (jPopup/toast),
     então nada consegue furar isso — nem um modal que abra por baixo. */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:2147483645;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='44' y='12' width='34' height='60' rx='7'/%3E%3Cpath d='M54 22h14'/%3E%3Cpath d='M26 82c4 21 66 21 70 0'/%3E%3C/g%3E%3Ccircle cx='61' cy='64' r='3' fill='%23ffffff'/%3E%3Cpath d='M26 66l10.5 18h-21z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center calc(50% - 42px) / 76px 76px,
      linear-gradient(135deg,#1e2c4f 0%,#16223e 55%,#0f1830 100%);
  }

  /* Título. Posição absoluta em vez de flex porque são três blocos empilhados
     (ícone, título, apoio) e pseudo-elemento não aceita filho. */
  body::after{
    content:"Gire o celular para a vertical";
    position:fixed;
    left:0;
    right:0;
    top:calc(50% + 22px);
    z-index:2147483646;
    margin:0;
    /* O entalhe do iPhone vai pra lateral quando deitado. Sem viewport-fit=cover
       o env() devolve 0 e sobra o padding base de 26px — nunca fica colado. */
    padding:0 calc(26px + env(safe-area-inset-right,0px)) 0 calc(26px + env(safe-area-inset-left,0px));
    text-align:center;
    font-family:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    font-size:20px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:.2px;
    color:#ffffff;
  }

  /* Linha de apoio. Vai no <html> porque o <body> já gastou os dois
     pseudo-elementos dele acima. */
  html::after{
    content:"A Plataforma Kobu-Kan foi feita para uso em pé.";
    position:fixed;
    left:0;
    right:0;
    top:calc(50% + 56px);
    z-index:2147483646;
    margin:0;
    padding:0 calc(26px + env(safe-area-inset-right,0px)) 0 calc(26px + env(safe-area-inset-left,0px));
    text-align:center;
    font-family:"Segoe UI",Roboto,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    font-size:14px;
    font-weight:400;
    line-height:1.45;
    color:rgba(255,255,255,.72);
  }
}

/* Impressão nunca vê o aviso: papel é "landscape" e um relatório de evento
   impresso deitado é caso de uso legítimo. A @media acima é `only screen`,
   então print já está fora — esta regra é só o cinto de segurança. */
@media print{
  html::after,body::before,body::after{content:none!important;display:none!important}
}