/* ═══════════════════════════════════════════════════════════════════
   FRACTURED VEIL — Mobile Responsive v3
   Só dispara em ≤ 768px. Desktop nunca é afetado.
   ═══════════════════════════════════════════════════════════════════ */

.fv-bottom-nav { display: none !important; }

@media (min-width: 769px) {
  .fv-bottom-nav { display: none !important; }
}

@media (max-width: 768px) {

  /* ── Previne zoom em inputs no iOS ── */
  input, select, textarea { font-size: 16px !important; }

  html { font-size: 100% !important; overflow-x: clip; }
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-x: clip;
  }

  /* ════════════════════
     HEADER
  ════════════════════ */
  header {
    padding: 6px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  /* Linha 1: logo (esquerda) + wallet-right (direita) */
  .logo { font-size: 10px; letter-spacing: 2px; }

  header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0;
  }
  header > .logo         { flex: 0 0 auto; }
  header > .header-right {
    flex: 0 0 100%;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 5px 0;
  }
  header > .header-center {
    flex: 0 0 100%;
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 5px 0 7px;
  }

  /* Linha 2: botões de recursos — largura total */
  .header-center {
    width: 100%;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 5px 0 7px;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .header-center::-webkit-scrollbar { display: none; }

  .res {
    font-size: 10px;
    padding: 5px 11px;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 32px;
    align-items: center;
  }
  .res b { font-size: 10px; }

  .wallet-address { font-size: 7px; padding: 4px 8px; }
  .btn-wallet.btn-sair { padding: 3px 6px; font-size: 6px; }

  /* ════════════════════
     MAIN
  ════════════════════ */
  main {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 10px 10px 16px;
  }

  /* ════════════════════
     DEVICE
  ════════════════════ */
  .device {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 14px;
    border-radius: 14px;
  }

  .device-top { order: 0; margin-bottom: 8px; }

  .screen {
    order: 1;
    height: 230px;
    margin-bottom: 0;
    position: relative;
    overflow: visible;
  }

  .bubble {
    position: absolute;
    top: -36px; left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    white-space: normal;
    max-width: 80vw;
    text-align: center;
    font-size: 7px;
    padding: 4px 10px;
  }

  /* ════════════════════
     STATUS INLINE
  ════════════════════ */
  #statusCard { display: none !important; }

  #mobileStatusInline {
    order: 2;
    /* Começa escondido — syncNav() define display:flex quando avatar está vivo */
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px 2px 6px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
  }
  .msi-row { display: flex; align-items: center; gap: 6px; }
  .msi-icon { font-size: 11px; width: 18px; text-align: center; flex-shrink: 0; }
  .msi-track { flex: 1; height: 6px; background: #0a0816; border-radius: 4px; overflow: hidden; }
  .msi-fill  { height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.4,0,.2,1); }
  .msi-fill.msi-fome    { background: linear-gradient(90deg,#c0392b,#e74c3c); }
  .msi-fill.msi-humor   { background: linear-gradient(90deg,#d4ac0d,#f4d03f); }
  .msi-fill.msi-energia { background: linear-gradient(90deg,#1a5276,#2e86c1); }
  .msi-fill.msi-saude   { background: linear-gradient(90deg,#1e8449,#27ae60); }
  .msi-fill.msi-higiene { background: linear-gradient(90deg,#5a3a00,#a06010); }
  .msi-fill.critical    { animation: critical-pulse-msi 1s ease-in-out infinite; }
  .msi-val { font-family: 'Cinzel', serif; font-size: 7px; color: var(--text); width: 24px; text-align: right; flex-shrink: 0; }

  /* ════════════════════
     BOTÕES DE AÇÃO — inline no mobile, abaixo do status
  ════════════════════ */
  #actionBtns {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    order: 3;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0 4px;
  }

  .btn-action {
    min-height: 52px !important;
    padding: 8px 4px !important;
    font-size: 6px !important;
    border-radius: 10px !important;
  }

  .btn-action .icon { font-size: 20px !important; }

  /* ════════════════════
     RIGHT PANEL
  ════════════════════ */
  .right-panel { display: flex; flex-direction: column; gap: 10px; }
  .panel-card  { padding: 12px 14px; }
  #summonCard  { order: 0; }
  #creatureCard{ order: 1; }
  .right-panel .panel-card:last-child { order: 99; }

  #idDesc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .log-list { max-height: 110px; }

  /* ════════════════════
     GAME SELECTOR
  ════════════════════ */
  #gameSelector {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 82vh;
    border-radius: 20px 20px 0 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 300 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .gs-btn      { padding: 14px 12px; gap: 12px; }
  .gs-btn-icon { font-size: 26px; }
  .gs-btn-name { font-size: 10px; }

  /* ════════════════════
     MODAIS GENÉRICOS — sheet (sobe de baixo)
  ════════════════════ */
  .mini-modal {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: 90vh;
    border-radius: 20px 20px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: none !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 300 !important;
  }

  /* Modais de painel (market, inventário) — no mobile fixamos a altura do
     container para o flex:1 da modal-scroll-body ter referência e rolar.
     O scroll acontece na scroll-body, não no modal em si. */
  #marketModal,
  #itemInvModal,
  #coinShopModal,
  #eggInvModal {
    height: 90vh !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  #marketModal .modal-scroll-body,
  #itemInvModal .modal-scroll-body,
  #coinShopModal .modal-scroll-body,
  #eggInvModal .modal-scroll-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* Drag handle visual */
  .mini-modal::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 2px;
    flex-shrink: 0;
  }

  .mini-btn {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 8px;
  }

  .gs-x-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 15px !important;
  }

  /* ════════════════════
     MODAIS PVP — fullscreen
  ════════════════════ */
  #arenaModal,
  #roubaMontModal,
  #batalhaNavalModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 400 !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #arenaModal::before,
  #roubaMontModal::before,
  #batalhaNavalModal::before { display: none !important; }

  /* Arena — botões maiores para dedos */
  .arena-escolha-btn  { min-height: 52px !important; font-size: 9px !important; padding: 10px 6px !important; }
  .arena-btn-entrar,
  .arena-btn-sair     { min-height: 44px !important; font-size: 8px !important; padding: 10px 14px !important; }
  .arena-btn-desafiar { min-height: 40px !important; font-size: 7px !important; padding: 8px 10px !important; white-space: nowrap; }

  /* Arena — textos escalados para fullscreen mobile */
  .arena-title            { font-size: 14px !important; }
  .arena-sub              { font-size: 9px !important; }
  .arena-tab              { font-size: 11px !important; padding: 8px 0 !important; }
  .arena-aposta-info      { font-size: 10px !important; }
  .arena-lobby-nome       { font-size: 12px !important; }
  .arena-lobby-meta       { font-size: 9px !important; }
  .arena-lobby-titulo     { font-size: 9px !important; }
  .arena-lobby-vazio      { font-size: 10px !important; }
  .arena-lobby-aguarda    { font-size: 9px !important; }
  .arena-vs-nome          { font-size: 10px !important; max-width: none !important; }
  .arena-vs-escolha       { font-size: 32px !important; }
  .arena-vs-stars         { font-size: 14px !important; }
  .arena-turno-label      { font-size: 9px !important; }
  .arena-escolha-btn span { font-size: 9px !important; }
  .arena-partida-status   { font-size: 10px !important; }
  .arena-rodada-badge     { font-size: 11px !important; }
  .arena-premio-badge     { font-size: 10px !important; }
  .arena-resultado-titulo { font-size: 22px !important; }
  .arena-rank-row         { font-size: 10px !important; }
  .arena-aguardando       { font-size: 10px !important; }
  .arena-pool-titulo      { font-size: 10px !important; }
  .arena-sem-saldo        { font-size: 9px !important; }

  /* Rouba Monte — cartas maiores para toque */
  #roubaMontModal [data-carta]             { width: 60px !important; height: 84px !important; }
  #roubaMontModal div[style*="width:26px"] { width: 38px !important; height: 54px !important; }
  #roubaMontModal [style*="font-size:5"],
  #roubaMontModal [style*="font-size:6"],
  #roubaMontModal [style*="font-size:7"]   { font-size: 11px !important; }

  /* Batalha Naval — grade fullscreen mobile */
  /* Células de dados: →40px (mais espaço com fullscreen) */
  #batalhaNavalModal td[style*="width:18px"],
  #batalhaNavalModal td[style*="width:20px"],
  #batalhaNavalModal td[style*="width:22px"]   { width: 40px !important; height: 40px !important; }
  /* Células de defesa pequenas (14px) */
  #batalhaNavalModal td[style*="width:14px"][style*="height:14px"],
  #batalhaNavalModal td[style*="width:14px"][style*="height:40px"] { width: 40px !important; height: 40px !important; }
  /* Cabeçalhos de coluna */
  #batalhaNavalModal td[style*="height:14px"],
  #batalhaNavalModal td[style*="height:12px"]  { height: 22px !important; }
  /* Rótulos de linha */
  #batalhaNavalModal td[style*="width:13px"],
  #batalhaNavalModal td[style*="width:14px"]   { width: 22px !important; }
  /* Emojis de resultado */
  #batalhaNavalModal td[style*="font-size:9px"],
  #batalhaNavalModal td[style*="font-size:10px"] { font-size: 22px !important; }
  #batalhaNavalModal td[style*="font-size:8px"]  { font-size: 20px !important; }
  /* Labels e texto pequeno */
  #batalhaNavalModal [style*="font-size:5"],
  #batalhaNavalModal [style*="font-size:6"],
  #batalhaNavalModal [style*="font-size:7"]    { font-size: 11px !important; }

  /* ════════════════════
     LOBBIES PVP — melhorias mobile
  ════════════════════ */
  /* Arena — corrige o inline font-size:6px na linha "15% → pool" */
  #arenaModal [style*="font-size:5"],
  #arenaModal [style*="font-size:6"] { font-size: 10px !important; }

  /* Tabs — área de toque confortável */
  .arena-tab { min-height: 40px !important; }

  /* Tab content — mais espaço entre secções no fullscreen */
  .arena-tab-content { gap: 12px !important; padding: 4px 0 8px !important; }

  /* Player cards — mais espaçosos e com avatar maior */
  .arena-lobby-card     { padding: 14px 16px !important; gap: 14px !important; }
  .arena-lobby-svg      { width: 48px !important; height: 48px !important; }
  .arena-lobby-svg svg  { width: 48px !important; height: 48px !important; }

  /* Bet info (RM e BN) — padding maior e valores em destaque */
  #roubaMontModal   div[style*="grid-template-columns:1fr 1fr 1fr"],
  #batalhaNavalModal div[style*="grid-template-columns:1fr 1fr 1fr"] {
    padding: 16px 12px !important;
    border-radius: 10px !important;
    gap: 10px;
  }
  #roubaMontModal   div[style*="grid-template-columns:1fr 1fr 1fr"] [style*="font-size:11px"],
  #batalhaNavalModal div[style*="grid-template-columns:1fr 1fr 1fr"] [style*="font-size:11px"] {
    font-size: 16px !important;
  }

  /* How-to-play — mais padding e visual mais respeitável */
  #roubaMontModal   div[style*="padding:8px 10px"],
  #batalhaNavalModal div[style*="padding:8px 10px"] {
    padding: 14px 16px !important;
    border-radius: 10px !important;
  }

  /* ════════════════════
     MINIGAMES — fullscreen mobile
     Elementos maiores aproveitando o ecrã todo.
  ════════════════════ */

  /* Títulos e botões */
  .mini-title      { font-size: 12px !important; letter-spacing: 3px !important; }
  .mini-sub        { font-size: 9px !important; }
  .mini-btn        { font-size: 9px !important; padding: 9px 20px !important; }
  .mini-btns       { gap: 10px !important; margin-top: 12px !important; }
  .mini-result-box { font-size: 18px !important; }
  .mini-reward-txt { font-size: 10px !important; }

  /* Jokenpô */
  .jkp-hand     { width: 80px !important; height: 80px !important; font-size: 38px !important; }
  .jkp-choice   { width: 64px !important; height: 64px !important; font-size: 28px !important; }
  .jkp-choices  { gap: 12px !important; }
  .jkp-result   { font-size: 16px !important; }
  .jkp-btn      { font-size: 9px !important; padding: 8px 16px !important; }

  /* Memória */
  .mem-card   { width: 60px !important; height: 60px !important; font-size: 26px !important; border-radius: 10px !important; }
  .mem-grid   { grid-template-columns: repeat(4, 60px) !important; gap: 8px !important; }
  .mem-info   { font-size: 9px !important; }

  /* Simon Says */
  .simon-btn  { width: 72px !important; height: 72px !important; font-size: 30px !important; border-radius: 14px !important; }
  .simon-grid { grid-template-columns: repeat(4, 72px) !important; gap: 10px !important; }
  .simon-info { font-size: 10px !important; }
  .simon-seq-display { font-size: 9px !important; }

  /* Velha */
  .velha-cell { width: 78px !important; height: 78px !important; font-size: 34px !important; border-radius: 10px !important; }
  .velha-grid { grid-template-columns: repeat(3, 78px) !important; gap: 8px !important; }

  /* Campo Minado */
  #minaGrid { zoom: 1.35; }
  .mina-info-row { font-size: 9px !important; }

  /* ════════════════════
     LOGIN
  ════════════════════ */
  #loginCard { padding: 28px 18px; max-width: 92vw; }
  #loginLogo { font-size: 18px; letter-spacing: 3px; }
  #loginSub  { font-size: 6px;  letter-spacing: 2px; }

  /* ════════════════════
     REPOUSO
  ════════════════════ */
  #repousoOverlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 450 !important;
  }

  /* ════════════════════
     TOAST
  ════════════════════ */
  #toast, .toast {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px; left: 12px;
    max-width: none;
    text-align: center;
  }

  /* fv-bottom-nav removida do mobile — botões inline no device card */

  /* ════════════════════════════════════════════════════
     HERO CARD — device + creatureCard num único card
     Usa display:contents no creatureCard para os filhos
     fluírem no flex do .device, reordenados via order.
  ════════════════════════════════════════════════════ */

  body.fv-has-creature .device {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;       /* padding vai para cada secção */
    overflow: hidden;
  }

  /* device-top: hidden no hero — nome substitui */
  body.fv-has-creature .device-top { display: none !important; }

  /* creatureCard: transparente — filhos fluem no device */
  body.fv-has-creature #creatureCard {
    display: contents !important;
  }

  /* ── Stripe de raridade: ocupa a faixa do topo do card ── */
  body.fv-has-creature #creatureCardStripe {
    order: 0;
    height: 3px !important;
    margin: 0 !important;
    flex-shrink: 0;
  }

  /* ── Nome + ✏️ ── */
  body.fv-has-creature #avatarNameBlock {
    order: 1;
    margin: 10px 14px 6px !important;
  }

  /* ── Badges row (raridade · elemento · slot · nível) ── */
  body.fv-has-creature #idBadgesRow {
    order: 2;
    margin: 0 14px 10px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }
  body.fv-has-creature #idBadgesRow .badge,
  body.fv-has-creature #idBadgesRow .ccm-badge {
    margin: 0 !important;
    flex-shrink: 0;
  }

  /* ── Animação do avatar ── */
  body.fv-has-creature .screen {
    order: 3;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    background: rgba(255,255,255,.01);
  }

  /* ── Barras de vitais inline ── */
  body.fv-has-creature #mobileStatusInline {
    order: 4;
    margin: 0 !important;
    padding: 8px 14px 6px !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: none !important;
  }

  /* ── XP e Vínculo ── */
  body.fv-has-creature #idXpSection {
    order: 5;
    margin: 10px 14px 0 !important;
  }
  body.fv-has-creature #idVinculoSection {
    order: 6;
    margin: 8px 14px 10px !important;
  }

  /* ── Botões de ação ── */
  body.fv-has-creature #actionBtns {
    order: 7;
    padding: 8px 10px 10px !important;
    border-top: 1px solid var(--border) !important;
    margin-top: 0 !important;
  }

  /* ── Ocultar elementos desnecessários no hero card ── */
  #btnLayEgg                           { display: none !important; }
  body.fv-has-creature #idDesc         { display: none !important; }
  body.fv-has-creature #statusCard     { display: none !important; }
  body.fv-has-creature #rarityBonusTxt { display: none !important; }
  /* O div container do rarityBonusTxt */
  body.fv-has-creature #creatureCard > div:last-of-type:not(#statusCard):not(#idVinculoSection):not(#idXpSection) {
    display: none !important;
  }

} /* fim @media ≤ 768px */

/* ════════════════════════════════════════
   MUITO PEQUENO  (≤ 380px — iPhone SE)
════════════════════════════════════════ */
@media (max-width: 380px) {
  .screen     { height: 200px; }
  .fv-bn-btn  { font-size: 5.5px; }
  .fv-bn-icon { font-size: 20px; }
  main { padding: 8px 8px 12px; }
  .res { font-size: 8px; padding: 3px 7px; }
  .simon-btn  { width: 58px !important; height: 58px !important; }
  .simon-grid { grid-template-columns: repeat(4, 58px) !important; }
  .mem-card   { width: 50px !important; height: 50px !important; }
  .mem-grid   { grid-template-columns: repeat(4, 50px) !important; }
  .velha-cell { width: 64px !important; height: 64px !important; }
  .velha-grid { grid-template-columns: repeat(3, 64px) !important; }
  .jkp-hand   { width: 66px !important; height: 66px !important; font-size: 30px !important; }
  .jkp-choice { width: 54px !important; height: 54px !important; font-size: 22px !important; }
}

@keyframes critical-pulse-msi {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}