/*
 * mobile_v21.css — Otimizações EXCLUSIVAS para mobile.
 * Nada aqui afeta desktop.
 *
 * CORREÇÕES v3:
 *  - Minimapa: margem inferior corrigida com env(safe-area-inset-bottom) para não cortar.
 *  - Botão spec (#mobile-spec-btn): reposicionado para lateral direita, ACIMA do minimapa,
 *    alinhado com split/eject. Some quando jogando, aparece só no modo espectador.
 *  - Split/eject: visíveis só ao jogar, nunca no modo espectador.
 *  - Sem sobreposição entre rádio, minimapa, ranking e botões de ação.
 *  - Canvas: width/height 100% garante cobertura total sem overflow.
 *  - Safe-area aplicada em todos os elementos fixos de borda.
 */

/* ═══════════════════════════════════════════════════════════
   BOTÃO GIRAR TELA (some automaticamente após 4s)
   ═══════════════════════════════════════════════════════════ */
#rotate-hint {
    display: none;
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    background: rgba(0,0,0,0.88);
    color: #fff;
    border: 1.5px solid #00cfff;
    border-radius: 30px;
    padding: 10px 22px;
    font-size: 14px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0,207,255,0.35);
    animation: pulseHint 2s infinite;
    transition: opacity 0.6s ease;
}
#rotate-hint.hiding { opacity: 0; pointer-events: none; }
#rotate-hint .rotate-icon { font-size: 20px; display: inline-block; animation: spinIcon 2s infinite linear; }

@keyframes pulseHint {
    0%,100% { box-shadow: 0 4px 16px rgba(0,207,255,0.3); }
    50%      { box-shadow: 0 4px 28px rgba(0,207,255,0.7); }
}
@keyframes spinIcon {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   BOTÃO ABRIR MENU (flutuante, mobile only)
   O JS controla display via style.display — CSS apenas estiliza.
   ═══════════════════════════════════════════════════════════ */
#mobile-menu-btn {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20000;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(0,0,0,0.80);
    border: 1.5px solid rgba(255,255,255,0.18);
    color: #fff;
    font-size: 22px;
    display: none; /* padrão: oculto — JS mostra quando jogando */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 16px rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.15s, transform 0.1s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
#mobile-menu-btn:active {
    background: rgba(61,126,255,0.7);
    transform: scale(0.93);
}

/* ═══════════════════════════════════════════════════════════
   CONTROLES MOBILE — SPLIT e EJECT
   Posicionados na lateral direita, acima do minimapa.
   
   Layout vertical (de baixo para cima, direita):
     [minimapa  ~136px + 10px margem = 146px de bottom]
     [ejectBtn  bottom: 162px  (146 + 16 gap)]
     [splitBtn  bottom: 252px  (162 + 76btn + 14 gap)]
   
   z-index 19000: acima do canvas, abaixo do menu (20000).
   ═══════════════════════════════════════════════════════════ */
@media only screen and (max-width: 900px) {

    /* Canvas ocupa tela inteira sem overflow */
    #canvas {
        width: 100vw !important;
        height: 100vh !important;
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* ── Botões split e eject ── tamanho 54px (proporcional ao mobile) */
    #splitBtn,
    #ejectBtn {
        position: fixed !important;
        width: 54px !important;
        height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
        border-radius: 14px !important;
        background: rgba(0,0,0,0.60) !important;
        border: 2px solid rgba(255,255,255,0.20) !important;
        opacity: 1 !important;
        object-fit: contain !important;
        padding: 8px !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        transition: transform 0.1s, background 0.1s !important;
        z-index: 19000 !important;
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        right: 14px !important;
    }

    /* minimapa ~117px + 40px margem = 157px base
       eject: 157 + 10px gap = 167px
       split: 167 + 54px botão + 8px gap = 229px */
    #ejectBtn {
        bottom: calc(167px + env(safe-area-inset-bottom, 0px)) !important;
        border-color: rgba(255,100,100,0.50) !important;
        box-shadow: 0 3px 12px rgba(255,100,100,0.25) !important;
    }

    #splitBtn {
        bottom: calc(229px + env(safe-area-inset-bottom, 0px)) !important;
        border-color: rgba(61,126,255,0.50) !important;
        box-shadow: 0 3px 12px rgba(61,126,255,0.30) !important;
    }

    #splitBtn:active { transform: scale(0.90) !important; background: rgba(61,126,255,0.55) !important; }
    #ejectBtn:active { transform: scale(0.90) !important; background: rgba(255,80,80,0.45) !important; }

    /* Touchpad — canto inferior esquerdo */
    #touchpad {
        background: rgba(255,255,255,0.04) !important;
        border: 1.5px solid rgba(255,255,255,0.08) !important;
        border-radius: 16px !important;
        width: 24vw !important;
        height: 24vw !important;
        max-width: 110px !important;
        max-height: 110px !important;
        left: 14px !important;
        bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        opacity: 0.5 !important;
    }

    #touchCircle {
        width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        background: rgba(61,126,255,0.6) !important;
        border: 2px solid rgba(61,126,255,0.9) !important;
        opacity: 0.9 !important;
    }

    /* ── helloDialog (menu principal) ── */
    #helloDialog {
        width: 310px !important;
        max-width: 310px !important;
        padding: 8px 12px !important;
        margin: 0 !important;
    }
    #helloDialog .zoom-effect img { max-height: 48px !important; width: auto !important; }
    .auth-buttons { gap: 5px !important; margin: 4px 0 !important; }
    .auth-buttons .btn { padding: 5px 8px !important; font-size: 11px !important; }
    #helloDialog input, #helloDialog select { font-size: 12px !important; padding: 5px 8px !important; height: 32px !important; }
    #play-btn     { margin-bottom: 4px !important; padding: 6px !important; font-size: 13px !important; }
    #gallery-btn  { margin-bottom: 3px !important; padding: 5px !important; font-size: 12px !important; }
    #create-btn, #nick-btn, #spectate-btn { padding: 5px 8px !important; font-size: 11px !important; }
    #settings     { font-size: 10px !important; }
    #settings label { margin-right: 3px !important; margin-bottom: 1px !important; padding-right: 4px !important; font-size: 10px !important; }
    #instructions { display: none !important; }
    #footer       { margin-top: 0 !important; margin-bottom: 4px !important; font-size: 10px !important; }
    #chat_textbox { width: 180px !important; font-size: 11px !important; }

    /* ── Galeria ── */
    #gallery-content { width: 96% !important; max-width: 96% !important; margin: 2% auto !important; padding: 10px !important; max-height: 90vh !important; overflow-y: auto !important; }
    #gallery-header { font-size: 15px !important; padding: 6px !important; }
    #gallery-tabs   { margin-bottom: 8px !important; gap: 4px !important; flex-wrap: nowrap !important; }
    .gallery-tab    { padding: 5px 10px !important; font-size: 12px !important; margin: 0 2px !important; }
    .btn-primeira, .btn-ultima { display: none !important; }
    .btn-anterior, .btn-proxima { padding: 4px 10px !important; font-size: 12px !important; }
    .pagina-atual   { font-size: 12px !important; }
    #skinsUL        { gap: 6px !important; padding: 0 !important; margin: 6px 0 !important; }
    .skin img.circular, .circular { width: 54px !important; height: 54px !important; }
    .private-badge, .pending-badge, .rejected-badge { font-size: 0.55em !important; padding: 1px 3px !important; }

    /* ── Rádio: fixo canto superior esquerdo, atrás do menu ── */
    #MusicPlayer {
        top: 68px !important;
        left: 10px !important;
        position: fixed !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }

    /* ── Botões ingame (Social + CMD): abaixo da rádio no topo esquerdo ── */
    /* Rádio: top 68px + altura ~56px (2 linhas) + gap 8px = 132px */
    #social-fab {
        position: fixed !important;
        top: calc(132px + env(safe-area-inset-top, 0px)) !important;
        left: 10px !important;
        bottom: auto !important;
        right: auto !important;
        width: 36px !important;
        height: 36px !important;
        flex-direction: column !important;
        z-index: 10 !important;
    }
    #social-fab .sp-fab-lbl { display: none !important; }

    #igc-fab {
        position: fixed !important;
        top: calc(132px + env(safe-area-inset-top, 0px)) !important;
        left: 52px !important;   /* 10 + 36 + 6 */
        bottom: auto !important;
        right: auto !important;
        width: 36px !important;
        height: 36px !important;
        flex-direction: column !important;
        z-index: 10 !important;
    }
    #igc-fab-label { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   PORTRAIT PEQUENO (≤ 600px)
   ═══════════════════════════════════════════════════════════ */
@media only screen and (max-width: 600px) and (orientation: portrait) {
    #helloDialog {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        padding: 8px !important;
    }
    #helloDialog .zoom-effect img { max-height: 56px !important; }
    .auth-buttons .btn { font-size: 11px !important; padding: 6px !important; }
    #settings label { font-size: 9px !important; }
    #instructions  { display: none !important; }

    /* Portrait ≤600px: minimapa ~105px + 40px margem = 145px
       eject: 145+10 = 155px | split: 155+54+8 = 217px */
    #ejectBtn { bottom: calc(155px + env(safe-area-inset-bottom, 0px)) !important; }
    #splitBtn { bottom: calc(217px + env(safe-area-inset-bottom, 0px)) !important; }

    /* Botões ingame no portrait pequeno — mesma posição (já definida no media ≤900px) */
    #social-fab { left: 10px !important; top: calc(132px + env(safe-area-inset-top, 0px)) !important; }
    #igc-fab    { left: 52px !important; top: calc(132px + env(safe-area-inset-top, 0px)) !important; }
}

/* ═══════════════════════════════════════════════════════════
   LANDSCAPE (≤ 900px)
   ═══════════════════════════════════════════════════════════ */
@media only screen and (max-width: 900px) and (orientation: landscape) {
    /* Landscape: botões menores ainda — altura de tela é menor */
    #splitBtn, #ejectBtn {
        width: 48px !important;
        height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        right: calc(12px + env(safe-area-inset-right, 0px)) !important;
    }
    /* Landscape: minimapa ~117px + 40px margem = 157px
       eject: 157+8 = 165px | split: 165+48+6 = 219px */
    #ejectBtn { bottom: calc(165px + env(safe-area-inset-bottom, 0px)) !important; }
    #splitBtn { bottom: calc(219px + env(safe-area-inset-bottom, 0px)) !important; }
    #touchpad { width: 20vw !important; height: 20vw !important; max-width: 100px !important; max-height: 100px !important; }

    /* Landscape: botões ficam menores para não tomar espaço vertical */
    /* Rádio landscape: top 68px + altura ~56px + gap 6px = 130px */
    #social-fab, #igc-fab {
        width: 32px !important;
        height: 32px !important;
        top: calc(130px + env(safe-area-inset-top, 0px)) !important;
    }
    #social-fab { left: 10px !important; }
    #igc-fab    { left: 48px !important; } /* 10 + 32 + 6 */

    /* Landscape: spec move para esquerda, ao lado de social e igc
       (10 + 32 + 6 + 32 + 6 = 86px de left) */
    #mobile-spec-btn {
        position: fixed !important;
        right: auto !important;
        bottom: auto !important;
        left: 86px !important;
        top: calc(130px + env(safe-area-inset-top, 0px)) !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
        font-size: 17px !important;
        border-width: 1.5px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   BOTÃO SPEC (#mobile-spec-btn) — LATERAL DIREITA, ACIMA DO MINIMAPA
   
   Tamanho: 54px (igual ao split/eject).
   Portrait:  splitBtn ~229px + 54px + 8gap = 291px
   O JS controla display (none / flex).
   Nunca sobrepõe rádio (esquerda) nem minimapa (canto inf-dir).
   Some ao abrir menu (JS: menuBtn.click + showESCOverlay → hideMobileButtons).
   ═══════════════════════════════════════════════════════════ */
#mobile-spec-btn {
    position: fixed !important;
    right: 14px !important;
    left: auto !important;
    top: auto !important;
    /* splitBtn ~229 + 54btn + 8gap = 291px */
    bottom: calc(291px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 20000 !important;
    width: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
    background: rgba(0,0,0,0.75) !important;
    border: 2px solid rgba(255,200,0,0.45) !important;
    color: #fff !important;
    font-size: 22px !important;
    display: none; /* JS controla */
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 3px 12px rgba(255,200,0,0.25) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: background 0.15s, transform 0.1s !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
}
#mobile-spec-btn:active {
    background: rgba(255,200,0,0.5) !important;
    transform: scale(0.93) !important;
}

/* Landscape: 48px — splitBtn ~219 + 48 + 6 = 273px */
@media only screen and (max-width: 900px) and (orientation: landscape) {
    #mobile-spec-btn {
        width: 48px !important;
        height: 48px !important;
        right: calc(12px + env(safe-area-inset-right, 0px)) !important;
        bottom: calc(273px + env(safe-area-inset-bottom, 0px)) !important;
        font-size: 20px !important;
    }
}

/* Portrait pequeno: splitBtn ~217 + 54 + 8 = 279px */
@media only screen and (max-width: 600px) and (orientation: portrait) {
    #mobile-spec-btn {
        bottom: calc(279px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Ocultar spec-btn quando menu ESC estiver aberto (CSS backup — JS já faz isso) */
body.esc-overlay-open #mobile-spec-btn { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   INDICADOR VISUAL DE PAUSA (tecla P)
   ═══════════════════════════════════════════════════════════ */
#pause-indicator {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.78);
    color: #ffffff;
    font-size: 26px;
    padding: 18px 36px;
    border-radius: 14px;
    z-index: 9999;
    pointer-events: none;
    font-family: Ubuntu, Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
    #pause-indicator {
        font-size: 18px;
        padding: 12px 24px;
        border-radius: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════
   CORREÇÕES DPR / CROSS-BROWSER MOBILE (Firefox, Samsung, etc)
   Aplicadas independente de breakpoint — afetam qualquer tela.
   ═══════════════════════════════════════════════════════════ */

/* Canvas: sem margem/padding que desalinhe coordenadas de toque.
   touch-action: none impede scroll/zoom acidental sobre o canvas.
   image-rendering: pixelated garante nitidez em DPR alto (Firefox, Chrome).  */
#canvas {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    /* Impede scroll e pinch-zoom do SO sobre o canvas — crítico no Firefox mobile */
    touch-action: none !important;
    /* Nitidez em telas de alta densidade */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    /* Bloqueia seleção de texto acidental ao arrastar */
    -webkit-user-select: none;
    user-select: none;
    /* Garante que o canvas fique sempre atrás dos elementos de UI */
    z-index: 0 !important;
}

/* Impedir bounce/overscroll do iOS sem quebrar o layout de menu */
html {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    height: 100% !important;
}
/* body NÃO pode ser position:fixed — quebra position:absolute do #helloDialog e #overlays */
body {
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
    min-height: 100% !important;
    height: 100% !important;
}

/* #overlays cobre toda a tela como fixed — independente do body */
#overlays {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 200 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* helloDialog: centralizado via margin:auto dentro do #overlays (que é flex/scroll).
   Remove o position:absolute + top:50% + transform que quebrava com body não-scrollável. */
#helloDialog {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 10px auto !important;
}

/* Corrigir o chat_textbox no mobile:
   - position:fixed ancorado à viewport (igual ao canvas) — evita descolamento
   - font-size:16px para não provocar zoom automático no iOS
   - bottom com safe-area para não cortar em iPhones com notch/barra */
@media only screen and (max-width: 900px) {
    #chat_textbox {
        position: fixed !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        left: 10px !important;
        height: 36px !important;
        width: 200px !important;
        font-size: 16px !important;
        -webkit-text-size-adjust: 100% !important;
        z-index: 5 !important; /* atrás do canvas (0) mas acima de nada */
    }
}