/* Plano Quest — mobile.css
   Ajustes exclusivos de celular/tablet. É o último CSS carregado, então
   pode sobrescrever tranquilamente o que veio antes. */

/* ------------------------------------------------------------------
   1. Celular em pé (até 520px): HUD em duas linhas fixas.
   Antes o HUD quebrava em 3 linhas e comia ~180px do palco.
   ------------------------------------------------------------------ */
@media (max-width:520px){
  #game{gap:6px}
  .hud{flex-direction:column;align-items:stretch;gap:6px}
  .hud-row{gap:6px 8px;width:100%}
  .hud-row-top{flex-wrap:nowrap}
  .hud-row-tools{justify-content:flex-start}
  .hud-tool-lbl{display:none}
  .hud-tool{padding:2px 8px;min-width:34px}
  .hud-l{flex:1 1 auto;overflow:hidden}
  .hud-title{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hud-pos{font-size:.75rem;white-space:nowrap}
  .hud .chip{padding:2px 8px;font-size:.8rem;gap:4px}
  .hud .chip .ic{width:14px;height:14px}
  .hud .btn.sm{min-height:34px;padding:2px 9px;font-size:.85rem}
  /* no celular o chip de poder fica só com ícone e número */
  .pw-big b{display:none}
  .chip.power .pw b{font-size:.78rem}
  .pw{display:inline-flex;align-items:center;gap:4px}
  .hud-pause{padding:2px 8px;min-height:34px}
  .hud-hearts{gap:2px}
  .hud-hearts .hrt{width:18px;height:18px}
  /* a palavra "portões" é enfeite: no celular fica só o número */
  #hudGates{font-size:0}
  #hudGates .ic,#hudGates b{font-size:.8rem}

  /* botões de toque ajustados ao polegar */
  .touch{gap:8px}
  .pad{gap:10px}
  .tbtn{width:70px;height:70px;border-radius:14px}
  .tbtn.big{width:min(38%,132px);height:70px;border-radius:14px}

  /* no jogo, o aviso sobe: antes ficava em cima do botão PULAR */
  body[data-screen="game"]:not(:has(#sheet.quiz)) .toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}

  /* mapa: trilha mais enxuta e fases em 3 colunas */
  .world{padding:12px 12px 12px 42px}
  .worldnum{left:8px;top:13px;width:26px;height:26px;font-size:.75rem}
  .world+.world::before{left:20px}
  .world h2{font-size:1.02rem}
  .world>header{flex-wrap:wrap;gap:6px}
  .path{grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:10px 6px}
  .node .num{width:56px;height:56px;font-size:1.35rem;border-radius:6px}
  .node .nm{font-size:.82rem}
  .node .stars .st{width:15px;height:15px}

  /* alvos de resposta maiores (mínimo confortável para o dedo) */
  .opt{min-height:60px;font-size:1.08rem}
  /* as teclas 1-4 não existem no celular */
  .opt kbd{display:none}
  .qtext{font-size:1.1rem}
  /* diagrama um pouco menor: sobram mais opções visíveis sem rolar */
  .qcv{max-width:min(100%,290px)}
  .sheet{padding:16px}
}

/* ------------------------------------------------------------------
   2. Celular deitado / telas baixas: prioriza altura para o palco.
   ------------------------------------------------------------------ */
@media (max-height:460px) and (pointer:coarse){
  body{padding-block:4px}
  .hud{flex-direction:row;align-items:center;gap:6px 10px}
  .hud-row{width:auto}
  .hud-row-tools{flex:0 0 auto}
  .hud-title{font-size:.72rem}
  .hud-pos{display:none}
  .hud .chip{padding:1px 7px;font-size:.75rem}
  .hud .btn.sm{min-height:30px;padding:1px 8px;font-size:.78rem}
  .tbtn{width:56px;height:56px;border-radius:10px}
  .tbtn svg{width:26px;height:26px}
  .tbtn.big{width:96px;height:56px;font-size:.9rem}
  /* deitado, os controles ficam sobre as faixas laterais do palco:
     devolve ~56px de altura para o jogo */
  #game{position:relative}
  .touch{position:absolute;left:0;right:0;bottom:0;z-index:6;align-items:flex-end;
    padding:0 8px max(4px,env(safe-area-inset-bottom,0px));pointer-events:none}
  .touch .pad,.touch .tbtn.big{pointer-events:auto}
  body[data-screen="game"]:not(:has(#sheet.quiz)) .toast{bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .modal{padding:6px}
  .sheet{padding:14px}
}

/* ------------------------------------------------------------------
   3. Telas muito estreitas (iPhone SE e afins)
   ------------------------------------------------------------------ */
@media (max-width:360px){
  body{font-size:16px;padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}
  .brand h1{font-size:1.55rem}
  .node .num{width:54px;height:54px;font-size:1.3rem}
  .tbtn{width:64px;height:64px}
  .tbtn.big{height:64px}
}

/* ------------------------------------------------------------------
   4. Conforto de toque: sem seleção de texto ao arrastar o dedo.
   ------------------------------------------------------------------ */
#game,.touch,.stage,.tbtn{-webkit-user-select:none;user-select:none}
.pad,.tbtn,.stage{touch-action:manipulation}

/* ------------------------------------------------------------------
   5. Quem prefere menos movimento não recebe nenhum efeito novo.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .stage.hit::before{animation:none;background:none}
  #hudCoins.bump,#hudHearts.hurt{animation:none}
}