/* ═══════════════════════════════════════════════════════════════════
   FOTOS REAIS + CELULAR

   1. Fotos da Call of Duty Wiki por cima da arte gerada: a arte fica
      por baixo como espera enquanto carrega e como reserva se falhar.
   2. Barra de abas inferior no celular, com o comportamento do
      Instagram (some ao rolar para baixo, volta ao subir, tocar na aba
      ativa sobe ao topo) e vidro fosco no padrão da Apple.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. fotos ─────────────────────────────────────────────────────── */
.photo{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;
  opacity:0;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.3,1);
  background:#07080a;
}
.photo.ok{opacity:1}
/* logotipos e emblemas não podem ser cortados */
.photo.fit{object-fit:contain;padding:10%;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--tone) 14%,#0b0d10),#07080a 75%)}
.card.has-art:hover .photo{transform:scale(1.05)}
.card-art .art{position:relative;z-index:0}
.card.art-side .card-art .art{position:absolute}
/* retrato de personagem: foco no rosto */
.card.art-side .photo.face{object-position:50% 18%}

/* crédito da imagem no dossiê */
.m-credit{
  position:absolute;right:10px;bottom:8px;z-index:6;
  font-family:"Share Tech Mono",monospace;font-size:9.5px;letter-spacing:.08em;
  color:rgba(232,230,224,.7);background:rgba(5,6,7,.62);
  padding:3px 7px;border-radius:3px;text-decoration:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.m-credit:hover{color:#fff}
.m-hero .photo{z-index:3}
.m-hero-game .photo{mix-blend-mode:normal;opacity:0}
.m-hero-game .photo.ok{opacity:.94}
.m-crest .photo{border-radius:6px;z-index:3}
.m-portrait{position:relative}
.m-hero-wide,.m-hero-game{position:relative}

/* ── 2. barra de abas ─────────────────────────────────────────────── */
.tabbar{display:none}

@media (max-width:900px){
  :root{--tabbar-h:66px}

  .tabbar{
    position:fixed;z-index:80;
    left:max(12px,env(safe-area-inset-left));
    right:max(12px,env(safe-area-inset-right));
    bottom:calc(10px + env(safe-area-inset-bottom));
    height:var(--tabbar-h);
    display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
    padding:0 6px;border-radius:26px;

    /* vidro fosco: desfoque forte + saturação, borda de luz e sombra longa */
    background:linear-gradient(180deg,rgba(38,42,48,.52),rgba(16,18,22,.62));
    -webkit-backdrop-filter:saturate(180%) blur(24px);
    backdrop-filter:saturate(180%) blur(24px);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:
      0 12px 40px rgba(0,0,0,.55),
      0 2px 8px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -1px 0 rgba(0,0,0,.25);

    transform:translateY(0);
    transition:transform .42s cubic-bezier(.2,.9,.25,1),opacity .3s ease;
    will-change:transform;
  }
  /* reflexo especular no topo do vidro */
  .tabbar::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 42%);
  }
  body.tabbar-away .tabbar{transform:translateY(calc(100% + 24px));opacity:.0}
  body.nav-open .tabbar,body.locked .tabbar{transform:translateY(calc(100% + 24px))}

  .tab{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    height:100%;border:0;background:transparent;color:rgba(232,230,224,.62);
    font:600 9.5px/1 "Barlow",system-ui,sans-serif;letter-spacing:.02em;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:color .2s ease;
  }
  .tab svg{width:25px;height:25px;transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
  .tab .ico-fill{display:none}
  .tab.on{color:#fff}
  .tab.on .ico-line{display:none}
  .tab.on .ico-fill{display:block}
  /* toque: encolhe e volta com elástico, como no Instagram */
  .tab:active svg{transform:scale(.82)}
  .tab.pop svg{animation:tabPop .38s cubic-bezier(.3,1.6,.5,1)}
  @keyframes tabPop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
  /* marcador da aba ativa */
  .tab::after{
    content:"";position:absolute;bottom:7px;width:4px;height:4px;border-radius:50%;
    background:var(--amber);box-shadow:0 0 8px var(--amber);
    opacity:0;transform:scale(0);transition:.25s cubic-bezier(.3,1.6,.5,1);
  }
  .tab.on::after{opacity:1;transform:scale(1)}
  .tab:focus-visible{outline:2px solid var(--amber);outline-offset:-6px;border-radius:18px}

  /* conteúdo não fica escondido atrás da barra */
  main{padding-bottom:calc(var(--tabbar-h) + 34px + env(safe-area-inset-bottom))}
  .totop{display:none}
  .cmd-burger{display:none !important}
  /* sem o menu e o status, a busca precisa encostar à direita */
  .cmd-actions{margin-left:auto}

  /* cabeçalho também em vidro */
  .cmdbar{
    background:rgba(8,9,11,.58);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(255,255,255,.07);
  }

  /* índice completo vira folha que sobe de baixo */
  .hud{
    top:auto;left:8px;right:8px;bottom:0;width:auto;height:min(78vh,640px);
    border-radius:26px 26px 0 0;border:1px solid rgba(255,255,255,.12);border-bottom:0;
    background:linear-gradient(180deg,rgba(34,37,43,.72),rgba(12,13,16,.86));
    -webkit-backdrop-filter:saturate(180%) blur(28px);
    backdrop-filter:saturate(180%) blur(28px);
    box-shadow:0 -20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12);
    transform:translateY(105%);
    transition:transform .45s cubic-bezier(.2,.9,.25,1);
    padding-bottom:env(safe-area-inset-bottom);
  }
  body.nav-open .hud{transform:none}
  .hud::before{
    content:"";display:block;width:40px;height:5px;border-radius:3px;
    background:rgba(255,255,255,.28);margin:9px auto 2px;flex:0 0 auto;
  }
  .hud-head{border-bottom-color:rgba(255,255,255,.07);text-align:center}
  .hud ul{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px}
  .hud a{border-left:0;border-radius:14px;padding:12px;background:rgba(255,255,255,.04);font-size:13px}
  .hud a.on{background:rgba(255,176,46,.14);border:0}
  .hud-scrim{
    background:rgba(0,0,0,.45);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  }

  /* celular tão impressionante quanto o PC: tipografia e respiro */
  .hero{min-height:calc(100svh - 58px)}
  .hero h1 .l1,.hero h1 .l2{font-size:clamp(64px,21vw,120px)}
  .hero-stats{grid-template-columns:repeat(3,1fr)}
  .hero-stat{padding:14px 10px}
  .card.art-side{min-height:0}
  .card.art-side .card-art{flex-basis:108px;min-height:150px}
  .modal{border-radius:22px 22px 0 0;margin:6vh 0 0;width:100%;max-height:94vh}
  .modal-wrap.on .modal{animation:sheetUp .42s cubic-bezier(.2,.9,.25,1)}
  @keyframes sheetUp{from{transform:translateY(40%);opacity:.4}to{transform:none;opacity:1}}
  .search-panel{border-radius:22px;
    background:linear-gradient(180deg,rgba(30,33,38,.8),rgba(12,13,16,.9));
    -webkit-backdrop-filter:saturate(180%) blur(26px);backdrop-filter:saturate(180%) blur(26px)}
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (max-width:900px){ .tabbar,.hud{background:rgba(16,18,22,.97)} }
}

@media (prefers-reduced-motion:reduce){
  .tabbar,.hud,.photo{transition:none}
  .tab.pop svg,.modal-wrap.on .modal{animation:none}
}

/* crédito no dossiê de jogo sobe para não disputar com a faixa de legenda */
.m-hero-game .m-credit{bottom:auto;top:10px;left:10px;right:auto}