/* ==========================================================================
   MITIC FUT — celular e app instalado (PWA), configurações e tema
   ========================================================================== */

/* Botões de ícone no topo e configurações */
.icon-btn { display: inline-flex; align-items: center; gap: 6px; }
.icon-btn.pulse { box-shadow: 0 0 0 0 rgba(237, 235, 230, 0.5); animation: install-pulse 2.4s ease-out 3; }
@keyframes install-pulse { 70% { box-shadow: 0 0 0 8px rgba(237, 235, 230, 0); } 100% { box-shadow: 0 0 0 0 rgba(237, 235, 230, 0); } }
.top-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.theme-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.theme-opt { display: grid; gap: 6px; text-align: left; padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--border-medium); background: #0b0b0b; color: var(--text-primary); cursor: pointer; }
.theme-opt.on { border-color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--text-primary); }
.theme-opt .dim { font-size: 0.8rem; }
.swatch { height: 26px; border-radius: 4px; }
.sw-color { background: linear-gradient(90deg, #050505 0 25%, #7FA087 25% 45%, #8193AA 45% 65%, #B8916A 65% 82%, #BFA160 82%); }
.sw-mono { background: linear-gradient(90deg, #050505 0 40%, #3a3a3a 40% 60%, #8c8c8c 60% 80%, #EDEBE6 80%); }
.install-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--border-medium); border-radius: var(--radius-md); }
.install-box p { font-size: 0.84rem; margin-top: 2px; }

/* App instalado: respeita o recorte da câmera e a barra de gestos */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
  main { padding-bottom: max(60px, env(safe-area-inset-bottom)); }
  .ticker { padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------------------------------------------------------------- Celular */
@media (max-width: 720px) {
  html, body { font-size: 14px; }
  .topbar { gap: 8px; padding: 8px 12px; }
  .brand-word { display: none; }
  .status { font-size: 0.74rem; min-width: 0; overflow: hidden; }
  .status .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hide-sm { display: none; }
  .top-actions .btn { padding: 6px 9px; }
  main { padding: 12px 10px 70px; }
  .card { padding: 14px; border-radius: var(--radius-md); }
  .card h3 { font-size: 1.15rem; }
  .grid-main, .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr) !important; }

  /* Cabeçalho do clube compacto */
  .club-hero { gap: 10px; }
  .club-hero .crest, .club-hero .crest img, .club-hero .crest svg, .club-hero .crest .crest-plate { width: 48px !important; height: 48px !important; }
  .club-hero h2 { font-size: 1.5rem; }
  #career-head .row { gap: 6px; }

  /* Navegação: grupos em barra rolável, como abas de app */
  .tabs-groups { position: sticky; top: 52px; z-index: 30; background: rgba(5, 5, 5, 0.96); margin: 0 -10px; padding: 0 10px; }
  .tabs-groups .tab { padding: 10px 11px; font-size: 0.82rem; }
  .tabs-sub { margin: 0 -10px; padding: 6px 10px 0; }

  /* Painel e partida */
  .match-hero { padding: 14px; }
  .match-hero .scoreboard .big, .scoreboard .big { font-size: 2.2rem; }
  .next-match .team { font-size: 1.15rem; }
  .next-match .crest-xl .crest-plate, .next-match .crest-xl img, .next-match .crest-xl svg { width: 48px !important; height: 48px !important; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stat .value { font-size: 1rem; }
  .result-line { font-size: 0.82rem; }

  /* Tabelas roláveis com a primeira coluna visível */
  .table-wrap { margin: 0 -14px; padding: 0 14px; -webkit-overflow-scrolling: touch; }
  table { font-size: 0.8rem; }
  th, td { padding: 7px 8px; }
  .sticky-head { max-height: none; }

  /* Mercado, finanças e chave */
  .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .hbar { grid-template-columns: 96px minmax(0, 1fr) 76px; font-size: 0.78rem; }
  .bracket { grid-auto-columns: 78%; scroll-snap-type: x mandatory; }
  .bk-col { scroll-snap-align: start; }
  .podium { gap: 6px; }
  .pod-pts { font-size: 1.3rem; }

  /* Entrada e início */
  .hero { padding: 8px 0 80px; min-height: auto; }
  .hero-title { font-size: clamp(3rem, 15vw, 4.6rem); }
  .hero-text { font-size: 1rem; }
  .career-cards { grid-template-columns: minmax(0, 1fr); }
  .theme-pick { grid-template-columns: 1fr; }
  .install-box { grid-template-columns: auto minmax(0, 1fr); }
  .install-box .btn { grid-column: 1 / -1; }

  /* Efeitos de tela cheia proporcionais */
  .fx-stage { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .fx-art { margin: 0 auto; width: 120px; }
  .cfx-head { font-size: 2.6rem; }
  .modal { width: calc(100vw - 16px) !important; max-height: calc(100dvh - 24px); }
  .player-card { grid-template-columns: auto minmax(0, 1fr); padding: 12px; gap: 12px; }
  .pc-num { font-size: 3rem; }
  .player-card .screen-title { font-size: 1.7rem; }
  .pc-crest { display: none; }
}

/* Telas pequenas em paisagem (celular deitado) */
@media (max-height: 480px) and (orientation: landscape) {
  .topbar { padding: 4px 12px; }
  .tabs-groups { top: 40px; }
}


@media (max-width: 720px) {
  /* Elenco: nome fica visível ao rolar a tabela para o lado; posições secundárias só na ficha */
  .sec-pos { display: none; }
  .sticky-head th:nth-child(2), .sticky-head td:nth-child(2) { position: sticky; left: 0; z-index: 1; background: #0b0b0b; box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.8); }
  .sticky-head .group-row td { position: sticky; left: 0; }
  label.check { flex-wrap: wrap; align-items: flex-start; }
  label.check > .dim { flex-basis: 100%; }
}

/* Fundo dinâmico das telas iniciais (sempre colorido, nos dois temas) (pitchbg.js): partida simulada, desfocada e escurecida */
.pitch-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: 0; pointer-events: none; background: #060a07; }
#pitch-veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 5, 5, 0.25), rgba(5, 5, 5, 0.6)); }
.hero-card, .career-card, main .card { backdrop-filter: blur(4px); }