@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/gigax-compact.css') }}?v=1.0.0">
@endpush
@section('title', 'Lobby - GIGAX ARENA')
@section('page_title', 'Lobby')

@php
    $waitingMatches = collect($activeLobbies ?? []);
    $runningMatches = collect($liveMatches ?? []);
    $lobbyMatches = $runningMatches
        ->concat($waitingMatches)
        ->unique(fn ($match) => ($match->status ?? '') . ':' . ($match->id ?? ''))
        ->values();

    $totalMatches = $lobbyMatches->count();
    $liveTotal = $runningMatches->count();
    $waitingTotal = $waitingMatches->count();

    // GIGAX: somente para exibir os comandos administrativos nos cards.
    $gxLobbyUserId = (int) (session('user_id') ?? auth()->id() ?? 0);
    $gxLobbyUserRole = $gxLobbyUserId
        ? (string) (\Illuminate\Support\Facades\DB::table('users')->where('id', $gxLobbyUserId)->value('role') ?? '')
        : '';
    $gxLobbyIsAdmin = $gxLobbyUserRole === 'admin';

    $avatarUrl = static function ($player) {
        $url = trim((string) ($player->avatar_url ?? ''));
        return $url !== '' ? $url : asset('default-avatar.png');
    };


    // Ranking lateral: usa a mesma base real de XP do projeto.
    $gxLobbyRanking = collect();
    try {
        if (\Illuminate\Support\Facades\Schema::hasTable('gx_player_experience')
            && \Illuminate\Support\Facades\Schema::hasTable('users')) {
            $gxLobbyRanking = \Illuminate\Support\Facades\DB::table('gx_player_experience as x')
                ->join('users as u', 'u.id', '=', 'x.user_id')
                ->where('x.monthly_xp', '>', 0)
                ->orderByDesc('x.monthly_xp')
                ->orderBy('u.nickname')
                ->limit(10)
                ->get([
                    'u.id as user_id',
                    'u.nickname',
                    'u.avatar_url',
                    'x.level',
                    'x.monthly_xp as xp',
                ]);
        }
    } catch (\Throwable $e) {
        $gxLobbyRanking = collect();
    }

    // GIGAX_RANKING_MODALIDADES_V17: ranking fechado, isolado do PUG/Skill.
    $gxModeRankings = collect();
    $gxModeKeys = ['custom_x1','custom_x2','custom_x3','custom_x4','custom_x5','custom_x6','custom_x7','custom_x8','team_5l','c1s','awp'];
    try {
        if (\Illuminate\Support\Facades\Schema::hasTable('gigax_player_mode_stats') && \Illuminate\Support\Facades\Schema::hasTable('users')) {
            $gxModeRankings = \Illuminate\Support\Facades\DB::table('gigax_player_mode_stats as s')
                ->join('users as u','u.id','=','s.user_id')
                ->whereIn('s.mode_code',$gxModeKeys)
                ->select('s.user_id','s.mode_code as mode_key','s.matches_played','s.wins','s.losses','s.kills','s.deaths','s.headshots','s.points','s.rating','s.current_streak','u.nickname','u.avatar_url')
                ->orderByDesc('s.points')->orderByDesc('s.wins')->get()->groupBy('mode_key');
        }
    } catch (\Throwable $e) { $gxModeRankings = collect(); }
    $gxPlacementMatches = 0;
    $gxCurrentSkill = 1;
    try {
        if ($gxLobbyUserId > 0) {
            $gxCurrentSkill = (int) (\Illuminate\Support\Facades\DB::table('users')->where('id',$gxLobbyUserId)->value('skill_level') ?? 1);
            if (\Illuminate\Support\Facades\Schema::hasTable('mix_ranking_modes')) {
                $gxPlacementMatches = min(10, (int) (\Illuminate\Support\Facades\DB::table('mix_ranking_modes')->where('user_id',$gxLobbyUserId)->where('game_slug','crossfire')->where('queue_mode','casual')->value('matches_played') ?? 0));
            }
        }
    } catch (\Throwable $e) {}
@endphp

@push('styles')
<style>

    .gx-lobby-page{
        display:grid;
        grid-template-columns:minmax(0,1fr) 330px;
        gap:12px;
        width:100%;
        min-width:0;
        align-items:start;
    }
    .gx-lobby-main{display:grid;gap:9px;min-width:0}
    .gx-lobby-compact{display:grid;gap:8px;width:100%;min-width:0}

    /* Cabeçalho */
    .gx-lobby-head{
        position:relative;
        min-height:88px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:14px;
        padding:13px 15px;
        overflow:hidden;
        border:1px solid rgba(117,162,195,.18);
        border-radius:10px;
        background:
            radial-gradient(circle at 82% 50%,rgba(36,245,111,.10),transparent 30%),
            linear-gradient(180deg,#0b1a27,#07131d);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
    }
    .gx-lobby-head:after{
        content:"G";
        position:absolute;
        right:26px;
        top:50%;
        transform:translateY(-50%) rotate(-8deg);
        font-size:70px;
        line-height:1;
        font-weight:1000;
        color:rgba(36,245,111,.055);
        pointer-events:none;
    }
    .gx-lobby-head-left{display:flex;align-items:center;gap:10px;min-width:0;position:relative;z-index:1}
    .gx-lobby-head-icon{
        width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
        background:rgba(36,245,111,.09);border:1px solid rgba(36,245,111,.2);
        color:var(--green);font-size:16px;flex:0 0 auto
    }
    .gx-lobby-head h2{margin:0;font-size:19px;line-height:1;text-transform:uppercase;letter-spacing:-.02em}
    .gx-lobby-head p{margin:5px 0 0;color:var(--mut);font-size:9px}
    .gx-lobby-counters{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;position:relative;z-index:1}
    .gx-lobby-pill{
        height:25px;padding:0 8px;border:1px solid rgba(117,162,195,.16);border-radius:999px;
        display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.025);
        font-size:8px;font-weight:900;color:#cfe0f3
    }
    .gx-lobby-pill i{width:5px;height:5px;border-radius:50%;background:#8997a8}
    .gx-lobby-pill.live i{background:var(--red);box-shadow:0 0 8px rgba(255,64,84,.5)}
    .gx-lobby-pill.wait i{background:var(--green);box-shadow:0 0 8px rgba(36,245,111,.45)}

    /* Lista de partidas minimalista e bem compacta */
    .gx-mini-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:5px;
        width:100%;
        min-width:0;
    }
    .gx-mini-card{
        position:relative;
        width:100%;
        min-width:0;
        border:1px solid rgba(160,195,229,.13);
        border-radius:8px;
        background:linear-gradient(160deg,rgba(12,25,37,.98),rgba(5,13,21,.99));
        overflow:visible;
        transition:.15s ease;
    }
    .gx-mini-card:hover{border-color:rgba(36,245,111,.26);background:linear-gradient(160deg,#0d2030,#07131d)}
    .gx-mini-card.is-live{border-color:rgba(255,64,84,.20)}
    .gx-mini-accent{display:none}

    .gx-mini-body{
        display:grid;
        grid-template-columns:minmax(135px,.95fr) minmax(130px,.8fr) minmax(245px,1.5fr) 74px minmax(145px,.9fr);
        gap:8px;
        align-items:center;
        min-height:58px;
        padding:6px 8px;
    }
    .gx-mini-top{display:flex;align-items:center;gap:7px;min-width:0}
    .gx-mini-game{display:flex;align-items:center;gap:7px;min-width:0}
    .gx-mini-mark{
        width:30px;height:30px;display:grid;place-items:center;border-radius:7px;
        background:rgba(36,245,111,.08);border:1px solid rgba(36,245,111,.15);
        color:var(--green);font-size:9px;font-weight:1000;flex:0 0 30px
    }
    .gx-mini-title{min-width:0}
    .gx-mini-title strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .gx-mini-title small{display:block;margin-top:2px;color:#7f95a8;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .gx-mini-status{
        display:none;
    }

    .gx-mini-meta{
        display:grid;
        grid-template-columns:1fr;
        gap:2px;
        min-width:0;
    }
    .gx-mini-meta div{
        display:none;
        min-width:0;
    }
    .gx-mini-meta div:first-child{display:block}
    .gx-mini-meta span{display:none}
    .gx-mini-meta b{
        display:block;
        color:#dceaf2;
        font-size:9px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .gx-mini-meta b:before{content:"⌖ ";color:#8499aa}

    .gx-faceoff{
        display:grid;
        grid-template-columns:1fr 24px 1fr;
        gap:5px;
        align-items:center;
        padding:0;
        border:0;
        background:transparent;
        min-width:0
    }
    .gx-squad{min-width:0}
    .gx-squad-name{display:none}
    .gx-avatars{display:flex;align-items:center;min-height:28px}
    .gx-avatar-mini{
        width:27px;height:27px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
        background:#111d2a;border:1px solid #27415a;margin-right:-6px;position:relative;
        box-shadow:0 0 0 2px #081019;color:#d9e8f8;font-size:8px;font-weight:900
    }
    .gx-avatar-mini img{width:100%;height:100%;object-fit:cover;display:block}
    .gx-squad.b .gx-avatars{justify-content:flex-start}
    .gx-squad.b .gx-avatar-mini{margin-left:0;margin-right:-6px}
    .gx-vs{
        width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
        border:1px solid rgba(255,255,255,.08);background:#0c1622;color:#65778d;font-size:6px;font-weight:1000
    }

    .gx-mini-score{
        display:grid;
        justify-items:center;
        gap:3px;
        white-space:nowrap;
    }
    .gx-mini-score strong{font-size:15px;color:#eaf6ff}
    .gx-mini-score small{font-size:7px;color:#23ef7c;font-weight:900;text-transform:uppercase}
    .gx-mini-card.is-live .gx-mini-score small{color:#ff6d80}

    .gx-mini-footer{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:5px;
        min-width:0;
    }
    .gx-player-count{display:none}
    .gx-mini-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
    .gx-mini-btn{
        min-height:29px;padding:0 9px;border-radius:6px;border:1px solid rgba(160,195,229,.14);
        background:#0b1c28;color:#e2eef5;text-decoration:none;
        display:inline-flex;align-items:center;justify-content:center;font-size:7px;font-weight:1000;cursor:pointer;white-space:nowrap
    }
    .gx-mini-btn.primary{border-color:rgba(36,245,111,.24);background:rgba(36,245,111,.08);color:var(--green)}
    .gx-mini-btn.live{border-color:rgba(72,153,255,.24);background:rgba(72,153,255,.08);color:#bcdcff}
    .gx-mini-btn:hover{filter:brightness(1.14)}

    /* menu de controle da partida */
    .gx-control-menu{position:relative}
    .gx-control-menu>summary{
        list-style:none;
        width:30px;height:30px;border-radius:6px;border:1px solid rgba(160,195,229,.13);
        display:grid;place-items:center;background:#0b1c28;color:#9db2c2;
        cursor:pointer;font-size:17px;font-weight:900
    }
    .gx-control-menu>summary::-webkit-details-marker{display:none}
    .gx-control-menu[open]>summary{border-color:rgba(36,245,111,.28);color:var(--green)}
    .gx-control-popup{
        position:absolute;
        right:0;
        top:35px;
        z-index:80;
        width:178px;
        padding:6px;
        border:1px solid rgba(117,162,195,.20);
        border-radius:9px;
        background:#07131d;
        box-shadow:0 18px 45px rgba(0,0,0,.48);
    }
    .gx-control-popup b{
        display:block;padding:5px 6px 7px;color:#87a0b3;font-size:7px;text-transform:uppercase
    }
    .gx-control-popup button{
        width:100%;height:30px;margin:2px 0;padding:0 8px;text-align:left;
        border:1px solid transparent;border-radius:6px;background:rgba(255,255,255,.02);
        color:#dceaf2;font-size:8px;font-weight:900;cursor:pointer
    }
    .gx-control-popup button:hover{background:rgba(255,255,255,.055)}
    .gx-control-popup .finish{color:#ffd15e}
    .gx-control-popup .cancel{color:#ffac63}
    .gx-control-popup .delete{color:#ff667a}

    .gx-mini-empty{
        min-height:86px;display:grid;place-items:center;padding:18px;
        text-align:center;border:1px dashed rgba(183,216,255,.14);border-radius:8px;
        background:rgba(255,255,255,.015);color:var(--mut);font-size:9px
    }
    .gx-load-wrap{text-align:center}
    .gx-load-more{height:30px;padding:0 13px;border:1px solid var(--line);border-radius:7px;background:#0d1824;color:#cfe0f2;font-size:8px;font-weight:1000;cursor:pointer}

    /* Ranking lateral de fora a fora */
    .gx-ranking-side{
        position:sticky;
        top:12px;
        min-height:calc(100vh - 150px);
        overflow:hidden;
        border:1px solid rgba(117,162,195,.18);
        border-radius:10px;
        background:linear-gradient(180deg,#0b1a27,#07131d);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
    }
    .gx-ranking-side-head{
        padding:14px 14px 11px;
        border-bottom:1px solid rgba(255,255,255,.055);
        background:linear-gradient(90deg,rgba(36,245,111,.055),transparent);
    }
    .gx-ranking-side-head h3{margin:0;font-size:14px}
    .gx-ranking-side-head p{margin:4px 0 0;color:#7891a4;font-size:8px}
    .gx-rank-columns,.gx-rank-item{
        display:grid;
        grid-template-columns:26px minmax(0,1fr) 40px 68px;
        gap:6px;
        align-items:center;
    }
    .gx-rank-columns{
        padding:8px 12px;color:#6f8799;font-size:7px;font-weight:900;text-transform:uppercase
    }
    .gx-rank-item{
        min-height:45px;
        padding:6px 12px;
        border-top:1px solid rgba(255,255,255,.035);
        color:#eaf5fb;
        text-decoration:none;
    }
    .gx-rank-item:hover{background:rgba(36,245,111,.035)}
    .gx-rank-pos{
        display:grid;place-items:center;font-size:10px;font-weight:1000;color:#a9bcc8
    }
    .gx-rank-item:nth-of-type(2) .gx-rank-pos{color:#ffd34e}
    .gx-rank-item:nth-of-type(3) .gx-rank-pos{color:#d9e1ea}
    .gx-rank-item:nth-of-type(4) .gx-rank-pos{color:#ff9d51}
    .gx-rank-player{display:flex;align-items:center;gap:7px;min-width:0}
    .gx-rank-avatar{
        width:29px;height:29px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
        background:#102330;border:1px solid rgba(255,255,255,.10);flex:0 0 29px;font-size:9px;font-weight:1000
    }
    .gx-rank-avatar img{width:100%;height:100%;object-fit:cover}
    .gx-rank-player b{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .gx-rank-level,.gx-rank-xp{text-align:right;font-size:8px;font-weight:900}
    .gx-rank-xp{color:#d8e8ef}
    .gx-rank-empty{min-height:180px;display:grid;place-items:center;padding:20px;text-align:center;color:#7891a4;font-size:9px}
    .gx-rank-full{
        margin:10px 12px 12px;height:30px;border:1px solid rgba(36,245,111,.24);
        border-radius:6px;display:flex;align-items:center;justify-content:center;
        color:var(--green);text-decoration:none;font-size:8px;font-weight:1000;background:rgba(36,245,111,.035)
    }

    /* Ranking mensal inferior compacto */
    .gx-month-rank{
        min-height:112px;
        border:1px solid rgba(117,162,195,.18);
        border-radius:10px;
        overflow:hidden;
        background:linear-gradient(180deg,#0b1a27,#07131d);
    }
    .gx-month-rank-head{
        display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
        border-bottom:1px solid rgba(255,255,255,.04)
    }
    .gx-month-rank-head b{font-size:10px}.gx-month-rank-head a{font-size:7px;color:var(--green);font-weight:900}
    .gx-month-rank-body{min-height:58px;display:grid;place-items:center;color:#7891a4;font-size:8px}

    @media(max-width:1450px){
        .gx-lobby-page{grid-template-columns:minmax(0,1fr) 290px}
        .gx-mini-body{grid-template-columns:minmax(120px,.9fr) minmax(100px,.7fr) minmax(200px,1.35fr) 66px minmax(128px,.82fr);gap:6px}
        .gx-avatar-mini{width:24px;height:24px}
    }
    @media(max-width:1180px){
        .gx-lobby-page{grid-template-columns:1fr}
        .gx-ranking-side{position:relative;top:auto;min-height:0}
        .gx-mini-body{grid-template-columns:minmax(140px,1fr) minmax(110px,.8fr) minmax(220px,1.4fr) 70px minmax(145px,.9fr)}
    }
    @media(max-width:820px){
        .gx-lobby-head{align-items:flex-start;flex-direction:column}
        .gx-lobby-counters{justify-content:flex-start}
        .gx-lobby-head:after{display:none}
        .gx-mini-body{grid-template-columns:1fr 1fr}
        .gx-faceoff{grid-column:1/-1}
        .gx-mini-score{justify-items:start}
        .gx-mini-footer{justify-content:flex-start}
    }
    @media(max-width:560px){
        .gx-mini-body{grid-template-columns:1fr}
        .gx-faceoff{grid-column:auto}
        .gx-mini-footer{justify-content:flex-start}
    }

/* =========================================================
   GIGAX LOBBY - AJUSTE VISUAL FINAL
   Corrige quebras sem alterar a estrutura funcional.
   ========================================================= */

/* largura geral e respiro */
.gx-lobby-page{
    grid-template-columns:minmax(0,1fr) 310px!important;
    gap:10px!important;
}
.gx-lobby-main{gap:8px!important}

/* cabeçalho mais equilibrado */
.gx-lobby-head{
    min-height:76px!important;
    padding:11px 14px!important;
}
.gx-lobby-head h2{font-size:18px!important}
.gx-lobby-head p{font-size:8px!important}
.gx-lobby-counters{gap:4px!important}
.gx-lobby-pill{height:23px!important;font-size:7px!important}

/* card de partida: 1 única linha estável */
.gx-mini-card{
    overflow:visible!important;
    min-height:54px!important;
}
.gx-mini-body{
    display:grid!important;
    grid-template-columns:
        minmax(140px,1.05fr)
        minmax(105px,.72fr)
        minmax(250px,1.55fr)
        72px
        minmax(122px,.78fr)!important;
    gap:7px!important;
    min-height:54px!important;
    padding:5px 7px!important;
}
.gx-mini-top,
.gx-mini-meta,
.gx-faceoff,
.gx-mini-score,
.gx-mini-footer{
    min-width:0!important;
}

/* título / modo */
.gx-mini-mark{
    width:28px!important;
    height:28px!important;
    flex:0 0 28px!important;
}
.gx-mini-title strong{font-size:9px!important}
.gx-mini-title small{font-size:6.5px!important}

/* mapa */
.gx-mini-meta b{
    font-size:8px!important;
    line-height:1.1!important;
}

/* avatares */
.gx-faceoff{
    grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)!important;
}
.gx-avatars{
    min-width:0!important;
    overflow:hidden!important;
}
.gx-avatar-mini{
    width:24px!important;
    height:24px!important;
    flex:0 0 24px!important;
    margin-right:-5px!important;
}
.gx-vs{
    width:22px!important;
    height:22px!important;
}

/* placar/status */
.gx-mini-score strong{font-size:13px!important}
.gx-mini-score small{
    max-width:70px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:6.5px!important;
}

/* ações */
.gx-mini-footer{justify-content:flex-end!important}
.gx-mini-actions{
    flex-wrap:nowrap!important;
    overflow:visible!important;
}
.gx-mini-btn{
    min-height:27px!important;
    padding:0 7px!important;
    font-size:6.5px!important;
}
.gx-control-menu>summary{
    width:28px!important;
    height:28px!important;
    font-size:15px!important;
}
.gx-control-popup{
    width:165px!important;
    top:32px!important;
}

/* ranking lateral */
.gx-ranking-side{
    min-height:560px!important;
    height:calc(100vh - 175px)!important;
    max-height:720px!important;
    display:flex!important;
    flex-direction:column!important;
}
.gx-ranking-side-head{
    padding:12px!important;
}
.gx-ranking-side-head h3{font-size:13px!important}
.gx-ranking-side-head p{font-size:7px!important}
.gx-rank-columns{
    padding:7px 10px!important;
    grid-template-columns:24px minmax(0,1fr) 36px 62px!important;
    font-size:6.5px!important;
}
.gx-rank-item{
    min-height:40px!important;
    padding:5px 10px!important;
    grid-template-columns:24px minmax(0,1fr) 36px 62px!important;
}
.gx-rank-avatar{
    width:26px!important;
    height:26px!important;
    flex:0 0 26px!important;
}
.gx-rank-player b{font-size:8px!important}
.gx-rank-level,.gx-rank-xp{font-size:7px!important}
.gx-rank-empty{
    flex:1!important;
    min-height:0!important;
}
.gx-rank-full{
    margin-top:auto!important;
    flex:0 0 28px!important;
    height:28px!important;
    font-size:7px!important;
}

/* ranking mensal não deve virar bloco gigante */
.gx-month-rank{
    min-height:92px!important;
}
.gx-month-rank-body{
    min-height:44px!important;
}

/* garante que o criar partida ocupe a largura corretamente */
.gxm-wrap{
    margin-top:0!important;
    padding:10px!important;
}
.gxm-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
}
.gxm-card{
    min-height:86px!important;
    grid-template-columns:54px minmax(0,1fr)!important;
}
.gxm-cover{
    min-height:84px!important;
}
.gxm-body{
    padding:7px 8px!important;
}
.gxm-card b{font-size:9px!important}
.gxm-card small{font-size:6.5px!important}
.gxm-action{
    height:24px!important;
    font-size:6.5px!important;
}
.gxm-ranking-link{
    margin-top:6px!important;
    padding:5px!important;
    font-size:6.5px!important;
}

/* desktop médio */
@media(max-width:1500px){
    .gx-lobby-page{
        grid-template-columns:minmax(0,1fr) 285px!important;
    }
    .gx-mini-body{
        grid-template-columns:
            minmax(128px,1fr)
            minmax(92px,.68fr)
            minmax(215px,1.42fr)
            66px
            minmax(112px,.74fr)!important;
        gap:5px!important;
    }
}

/* tablets / largura menor */
@media(max-width:1180px){
    .gx-lobby-page{grid-template-columns:1fr!important}
    .gx-ranking-side{
        position:relative!important;
        top:auto!important;
        height:auto!important;
        max-height:none!important;
        min-height:0!important;
    }
    .gx-mini-body{
        grid-template-columns:
            minmax(135px,1fr)
            minmax(105px,.75fr)
            minmax(230px,1.45fr)
            68px
            minmax(120px,.78fr)!important;
    }
}

@media(max-width:860px){
    .gx-mini-body{
        grid-template-columns:1fr 1fr!important;
        row-gap:7px!important;
    }
    .gx-faceoff{grid-column:1/-1!important}
    .gx-mini-footer{justify-content:flex-start!important}
    .gxm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:560px){
    .gx-mini-body{grid-template-columns:1fr!important}
    .gx-faceoff{grid-column:auto!important}
    .gxm-grid{grid-template-columns:1fr!important}
}

.gx-placement{display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid rgba(74,141,255,.18);border-radius:8px;background:rgba(9,23,35,.86);min-height:35px}.gx-placement strong{font-size:8px;white-space:nowrap}.gx-placement small{font-size:6.5px;color:#8096a9;white-space:nowrap}.gx-placement-track{flex:1;min-width:100px;height:5px;border-radius:99px;background:#132334;overflow:hidden}.gx-placement-track span{display:block;height:100%;background:linear-gradient(90deg,#348fff,#43d7ff)}

/* GIGAX_V19_VAGAS_CENTRO_BEGIN */
.gxclean-avatars .gx-avatar-mini{
    box-sizing:border-box!important;
}
.gxclean-avatars .gx-avatar-mini:not(:has(img)){
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1!important;
    padding:0!important;
    text-indent:0!important;
    vertical-align:middle!important;
}
.gxclean-avatars .gx-avatar-mini:not(:has(img))::before,
.gxclean-avatars .gx-avatar-mini:not(:has(img))::after{
    content:none!important;
}
/* GIGAX_V19_VAGAS_CENTRO_END */

/* GIGAX_V20_CENTRO_APAGAR_BEGIN */

/* VAGA: o caractere + e centralizado pelo proprio box, sem depender de line-height herdado. */
.gxclean-avatars .gx-avatar-mini[title="Vaga"]{
    position:relative!important;
    display:inline-grid!important;
    place-items:center!important;
    box-sizing:border-box!important;
    padding:0!important;
    margin-top:0!important;
    text-align:center!important;
    vertical-align:middle!important;
    line-height:0!important;
    font-size:0!important;
    text-indent:0!important;
    overflow:hidden!important;
    transform:none!important;
}
.gxclean-avatars .gx-avatar-mini[title="Vaga"]::before{
    content:"+"!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    transform:translate(-50%,-50%)!important;
    line-height:1!important;
    font-size:16px!important;
    font-weight:800!important;
    font-family:Arial,sans-serif!important;
    text-align:center!important;
}
.gxclean-avatars .gx-avatar-mini[title="Vaga"]::after{
    content:none!important;
}

/* APAGAR: compacto, mesma linguagem visual do status. */
.gxclean-footer .gx-v18-delete,
.gxclean-footer .gx-direct-delete,
.gxclean-footer button[class*="delete"],
.gxclean-footer button[class*="apagar"],
.gxclean-footer form[action*="cancel"] button,
.gxclean-footer form[action*="delete"] button,
.gxclean-footer form[action*="destroy"] button{
    width:auto!important;
    min-width:68px!important;
    max-width:78px!important;
    height:23px!important;
    min-height:23px!important;
    padding:0 10px!important;
    margin:0!important;
    border-radius:999px!important;
    line-height:21px!important;
    font-size:8px!important;
    font-weight:800!important;
    white-space:nowrap!important;
}

/* Caso o V18 tenha aplicado largura ao FORM, neutraliza tambem. */
.gxclean-footer form:has(button[class*="delete"]),
.gxclean-footer form:has(button[class*="apagar"]),
.gxclean-footer form[action*="cancel"],
.gxclean-footer form[action*="delete"],
.gxclean-footer form[action*="destroy"]{
    width:auto!important;
    flex:0 0 auto!important;
    margin:0!important;
}

/* GIGAX_V20_CENTRO_APAGAR_END */
</style>
<style id="gxLobbyReferenceExactV1">
/* GIGAX - referência final: faixa compacta + cards em uma única linha */
.gx-lobby-page{display:grid!important;grid-template-columns:minmax(0,1fr) 300px!important;gap:10px!important;align-items:start!important}
.gx-lobby-main{min-width:0!important;display:block!important}
.gx-lobby-unified{border:1px solid rgba(58,112,145,.38)!important;border-radius:12px!important;background:linear-gradient(135deg,rgba(7,23,34,.98),rgba(5,19,29,.98))!important;overflow:hidden!important;padding:0!important}
.gx-placement{margin:0!important;border:0!important;border-bottom:1px solid rgba(61,111,141,.22)!important;border-radius:0!important;min-height:38px!important;padding:8px 12px!important;background:rgba(5,18,28,.7)!important}
.gxm-wrap{margin:0!important;border:0!important;border-bottom:1px solid rgba(61,111,141,.22)!important;border-radius:0!important;padding:7px 12px!important;background:transparent!important}
.gx-lobby-compact{display:block!important;padding:0 12px 12px!important}
.gx-lobby-head{min-height:70px!important;padding:12px 4px 9px!important;margin:0!important;border:0!important;background:transparent!important}
.gx-lobby-head:after{display:none!important}.gx-lobby-head h2{font-size:20px!important}.gx-lobby-head p{font-size:9px!important}
.gx-lobby-head-icon{width:40px!important;height:40px!important;border-radius:9px!important;font-size:18px!important}
.gx-lobby-counters{gap:7px!important}.gx-lobby-pill{height:27px!important;padding:0 12px!important;font-size:8px!important;border-radius:99px!important}
.gx-mini-grid{display:flex!important;flex-wrap:nowrap!important;gap:10px!important;overflow-x:auto!important;overflow-y:visible!important;padding:6px 0 4px!important;scroll-snap-type:x proximity;scrollbar-width:thin}
.gx-mini-card{position:relative!important;display:block!important;flex:0 0 300px!important;width:300px!important;min-width:300px!important;height:218px!important;min-height:218px!important;padding:0!important;border-radius:11px!important;overflow:visible!important;scroll-snap-align:start;background:linear-gradient(160deg,#0b1e2d,#071621)!important}
.gx-mini-accent{display:none!important}.gx-mini-body{display:flex!important;flex-direction:column!important;gap:0!important;height:100%!important;padding:12px 13px 10px!important;position:relative!important}
.gx-mini-top{display:block!important;min-height:29px!important;padding-right:42px!important}.gx-mini-game{display:block!important}.gx-mini-mark{display:none!important}
.gx-mini-title{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;width:100%!important}.gx-mini-title strong{font-size:12px!important;color:#f5f9ff!important}.gx-mini-title small{font-size:8px!important;color:#9eb2c5!important;white-space:nowrap!important}
.gx-mini-meta,.gx-mini-score,.gx-mini-status{display:none!important}
.gx-faceoff{display:flex!important;flex-direction:column!important;gap:5px!important;align-items:stretch!important;justify-content:center!important;flex:1!important;margin-top:3px!important}
.gx-squad{display:block!important}.gx-squad-name{display:none!important}.gx-avatars{display:flex!important;justify-content:center!important;gap:9px!important;flex-wrap:nowrap!important}
.gx-avatar-mini{width:31px!important;height:31px!important;min-width:31px!important;border-radius:50%!important;font-size:12px!important;border:1px solid #00d98b!important;background:#0a1a26!important}
.gx-vs{order:initial!important;text-align:center!important;font-size:10px!important;font-weight:900!important;color:#fff!important;line-height:16px!important}
.gx-mini-footer{position:static!important;margin-top:auto!important;min-height:29px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0!important;border:0!important}
.gx-player-count{margin-left:auto!important;font-size:10px!important;color:#f2f7fb!important}.gx-player-count:before{content:'♙ ';font-size:11px}
.gx-card-menu{position:absolute!important;top:8px!important;right:8px!important;z-index:30!important}.gx-card-menu summary{width:32px!important;height:32px!important;border:1px solid rgba(65,130,170,.38)!important;border-radius:8px!important;display:grid!important;place-items:center!important;background:#0b2435!important;font-size:18px!important;color:#cfe7f5!important;cursor:pointer!important;list-style:none!important}
.gx-card-menu summary::-webkit-details-marker{display:none!important}.gx-control-popup{right:0!important;left:auto!important;top:37px!important;z-index:100!important}
.gx-mini-footer:after{content:'AGUARDANDO';position:absolute;left:13px;bottom:11px;padding:5px 10px;border-radius:99px;background:#123049;color:#d7ebfa;font-size:8px;font-weight:900;letter-spacing:.02em}
.gx-mini-card.is-live .gx-mini-footer:after{content:'EM ANDAMENTO';background:rgba(0,174,119,.22);color:#25efa8}
.gx-mini-empty{flex:0 0 100%!important;min-height:120px!important}
.gx-load-wrap{display:none!important}
@media(max-width:1180px){.gx-lobby-page{grid-template-columns:1fr!important}.gx-ranking-side{display:none!important}.gx-mini-card{flex-basis:285px!important;width:285px!important;min-width:285px!important}}
</style>

/* GIGAX_V54_EXACT_LOBBY_BODY_BEGIN */
/* Fila entre header e corpo: 3 cards horizontais, compactos e sempre alinhados */
.gx-v53-queues{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;width:100%!important;min-width:0!important;padding:10px 12px 0!important;box-sizing:border-box!important;background:transparent!important}
.gx-v53-queue{height:92px!important;min-width:0!important;box-sizing:border-box!important;border:1px solid rgba(69,126,164,.34)!important;border-radius:9px!important;background:linear-gradient(180deg,#081b29 0%,#061521 100%)!important;padding:10px 14px!important;display:grid!important;grid-template-rows:22px 1fr 18px!important;align-items:center!important;overflow:hidden!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.015)!important}
.gx-v53-qtitle{display:flex!important;align-items:center!important;gap:7px!important;font-size:11px!important;line-height:1!important;font-weight:950!important;letter-spacing:.01em!important}.gx-v53-qtitle span{font-size:16px!important;line-height:1!important}
.gx-v53-open .gx-v53-qtitle{color:#25bfff!important}.gx-v53-advanced .gx-v53-qtitle{color:#ffd51d!important}.gx-v53-pro .gx-v53-qtitle{color:#e65cff!important}
.gx-v53-slots{display:flex!important;justify-content:center!important;align-items:center!important;gap:7px!important;min-width:0!important;height:22px!important}.gx-v53-slot{display:block!important;width:13px!important;height:16px!important;position:relative!important;flex:0 0 13px!important}.gx-v53-slot:before{content:''!important;position:absolute!important;left:4px!important;top:0!important;width:5px!important;height:5px!important;border:1.5px solid #42647d!important;border-radius:50%!important;box-sizing:border-box!important}.gx-v53-slot:after{content:''!important;position:absolute!important;left:1px!important;bottom:0!important;width:11px!important;height:7px!important;border:1.5px solid #42647d!important;border-radius:7px 7px 2px 2px!important;box-sizing:border-box!important}.gx-v53-slot.on:before,.gx-v53-slot.on:after{border-color:#20e59a!important;background:rgba(32,229,154,.16)!important}
.gx-v53-count{display:block!important;text-align:center!important;color:#f5f9fd!important;font-size:10px!important;line-height:1!important;font-weight:950!important}

/* Estrutura principal: corpo + ranking. Nunca deixa ranking sobrepor cards */
.gx-lobby-page{display:grid!important;grid-template-columns:minmax(0,1fr) 286px!important;gap:12px!important;align-items:start!important;width:100%!important;min-width:0!important}
.gx-lobby-main,.gx-lobby-unified,.gx-lobby-compact{min-width:0!important;width:100%!important;box-sizing:border-box!important}
.gx-lobby-unified{display:flex!important;flex-direction:column!important;gap:10px!important;border:0!important;background:transparent!important;overflow:visible!important}

/* Barra de modos */
.gx-lobby-toolbar{min-height:70px!important;margin:0!important;padding:9px 12px!important;border:1px solid rgba(59,118,153,.32)!important;border-radius:10px!important;background:linear-gradient(180deg,#071b27,#06151f)!important;box-sizing:border-box!important}
.gx-lobby-toolbar .gx-partidas-title{font-size:20px!important;line-height:1!important;font-weight:1000!important;color:#f4f9fc!important;letter-spacing:.01em!important}.gx-lobby-toolbar .gx-lobby-heading-copy p{margin-top:4px!important;font-size:9px!important;line-height:1.2!important;color:#9fb5c6!important;font-weight:650!important}

/* 3 partidas por linha, cards maiores mas compactos */
.gx-lobby-compact{padding:0!important}
.gx-lobby-unified .gx-mini-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;width:100%!important;min-width:0!important;overflow:visible!important;padding:0!important;align-items:stretch!important}
.gx-lobby-unified .gx-mini-card{position:relative!important;display:block!important;flex:none!important;width:100%!important;min-width:0!important;max-width:none!important;height:255px!important;min-height:255px!important;margin:0!important;padding:0!important;border:1px solid rgba(61,123,160,.40)!important;border-radius:10px!important;background:linear-gradient(160deg,#071b27 0%,#05131e 100%)!important;box-shadow:0 7px 18px rgba(0,0,0,.16)!important;overflow:visible!important;box-sizing:border-box!important}
.gx-lobby-unified .gx-mini-card:hover{border-color:rgba(22,227,151,.58)!important}
.gx-lobby-unified .gx-mini-body{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;width:100%!important;height:100%!important;min-height:0!important;padding:10px 11px!important;box-sizing:border-box!important}
.gxclean-head{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;min-width:0!important;padding:0!important;border:0!important;background:transparent!important}.gxclean-title{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important;padding-right:34px!important}.gxclean-title strong{font-size:12px!important;line-height:1.15!important;font-weight:1000!important;color:#f8fbfe!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-shadow:0 1px 0 #000!important}.gxclean-title strong em{font-size:8px!important;color:#1bdcf4!important;font-style:normal!important;margin-left:3px!important}.gxclean-title small{height:22px!important;min-width:40px!important;padding:0 7px!important;border:1px solid #14df92!important;border-radius:7px!important;background:rgba(15,176,111,.10)!important;color:#eafff6!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:10px!important;font-weight:1000!important}
.gx-card-menu{position:absolute!important;top:8px!important;right:8px!important;z-index:30!important}.gx-card-menu summary{width:29px!important;height:29px!important;border:1px solid rgba(17,193,208,.34)!important;border-radius:7px!important;background:#073143!important;color:#1be1d4!important;font-size:18px!important;display:grid!important;place-items:center!important}

/* Miolo limpo, sem linhas internas */
.gx-mini-meta{order:3!important;display:flex!important;justify-content:center!important;align-items:center!important;min-height:14px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important}.gx-mini-meta>div{display:none!important}.gx-mini-meta>div:first-child{display:flex!important;align-items:center!important;gap:4px!important;border:0!important;background:transparent!important;padding:0!important}.gx-mini-meta>div:first-child span{display:none!important}.gx-mini-meta>div:first-child b{font-size:8px!important;color:#91aabd!important;font-weight:750!important}.gx-mini-meta>div:first-child b:before{content:'⌖  '!important;color:#6e9dbb!important}
.gxclean-faceoff{order:2!important;display:grid!important;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr)!important;gap:6px!important;align-items:start!important;width:100%!important;min-width:0!important;flex:1 1 auto!important;padding:4px 0 0!important;border:0!important;background:transparent!important}.gxclean-squad{display:flex!important;flex-direction:column!important;min-width:0!important;align-items:stretch!important}.gxclean-squad-name{display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;min-height:42px!important;margin:0 0 4px!important;padding:0!important;border:0!important}.gxclean-squad-name span:first-child{max-width:100%!important;font-size:10.5px!important;line-height:1.1!important;font-weight:1000!important;color:#f4f8fc!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:center!important}.gxclean-squad-name span:last-child{min-width:34px!important;height:22px!important;padding:0 6px!important;border-radius:6px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:#096abe!important;color:#fff!important;font-size:10px!important;font-weight:1000!important}.gxclean-b .gxclean-squad-name span:last-child{background:#b96600!important}.gxclean-vs{align-self:center!important;margin-top:34px!important;color:#a9c9dd!important;font-size:11px!important;font-weight:1000!important;text-align:center!important}.gxclean-avatars.gx-player-list{display:flex!important;flex-direction:column!important;gap:3px!important;min-width:0!important;align-items:stretch!important}.gx-player-row{display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important;height:20px!important;padding:0!important;border:0!important;background:transparent!important}.gx-avatar-mini{width:18px!important;height:18px!important;min-width:18px!important;border-radius:50%!important;border:1px solid rgba(22,227,151,.78)!important;background:#09202c!important;font-size:7px!important;overflow:hidden!important}.gx-avatar-mini img{width:100%!important;height:100%!important;object-fit:cover!important}.gx-player-name{min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#f1f6fa!important;font-size:9px!important;line-height:1!important;font-weight:800!important}.gx-player-empty .gx-avatar-mini{border-color:#355b74!important;color:#789ab2!important;background:transparent!important}.gx-player-empty .gx-player-name{color:#7895aa!important;font-weight:650!important}
.gxclean-footer{order:4!important;display:grid!important;grid-template-columns:minmax(0,1fr) max-content max-content max-content!important;gap:4px!important;align-items:center!important;width:100%!important;min-width:0!important;margin-top:auto!important;padding:0!important;border:0!important;background:transparent!important;overflow:hidden!important}.gxclean-status strong{display:none!important}.gxclean-status small{height:23px!important;max-width:100%!important;padding:0 8px!important;border-radius:999px!important;background:rgba(0,170,105,.22)!important;color:#29f1a2!important;font-size:7px!important;font-weight:1000!important;display:inline-flex!important;align-items:center!important;white-space:nowrap!important}.gxclean-count,.gxclean-count b{font-size:8px!important;color:#e8f2f8!important;font-weight:900!important;white-space:nowrap!important}.gx-report-v21,.gx-direct-delete-v16{height:23px!important;padding:0 6px!important;font-size:6.5px!important;font-weight:1000!important;white-space:nowrap!important}.gx-report-v21{color:#ffd52e!important;border-color:#9b7900!important;background:rgba(110,85,0,.12)!important}.gx-direct-delete-v16{color:#ff6e87!important;border-color:#963047!important;background:rgba(114,25,44,.12)!important}

/* Ranking lateral sempre visível no desktop */
.gx-ranking-side{display:block!important;width:286px!important;min-width:286px!important;max-width:286px!important;position:sticky!important;top:10px!important;align-self:start!important;overflow:hidden!important;border-radius:10px!important}.gx-ranking-side.gx-rankfx .gx-ranking-side-head h3{font-size:13px!important}.gx-ranking-side.gx-rankfx .gx-ranking-side-head p{font-size:8px!important}.gx-ranking-side.gx-rankfx .gx-rankfx-player b{font-size:10.5px!important}.gx-ranking-side.gx-rankfx .gx-rankfx-player small{font-size:8px!important}.gx-ranking-side.gx-rankfx .gx-rank-item{min-height:43px!important;padding-top:5px!important;padding-bottom:5px!important}

/* Mostrar PUG e MODALIDADES juntos no painel lateral, como a referência */
.gx-r17-main-tabs{display:none!important}.gx-ranking-side [data-r17-panel="pug"]{display:block!important}.gx-ranking-side [data-r17-panel="modes"]{display:block!important;border-top:1px solid rgba(74,133,168,.25)!important;margin-top:8px!important;padding-top:7px!important}.gx-ranking-side [data-r17-panel="modes"]:before{content:'🎮  RANKING MODALIDADES'!important;display:block!important;padding:3px 9px 8px!important;color:#f5f9fd!important;font-size:11px!important;font-weight:1000!important;letter-spacing:.02em!important}.gx-r17-mode-tabs{display:flex!important;overflow-x:auto!important;gap:4px!important;padding:0 8px 7px!important;scrollbar-width:none!important}.gx-r17-mode-tabs::-webkit-scrollbar{display:none!important}.gx-r17-mode-tabs button{flex:0 0 auto!important;min-width:34px!important;height:24px!important;padding:0 7px!important;font-size:7.5px!important}.gx-r17-mode-head{padding:5px 8px!important}.gx-r17-mode-head b{font-size:9px!important}.gx-r17-mode-head small{font-size:7px!important}

/* Paginação 6 por página = 3 por linha x 2 linhas */
.gx-v54-pagination{display:flex!important;justify-content:center!important;align-items:center!important;gap:6px!important;margin:10px 0 2px!important}.gx-v54-page{width:29px!important;height:29px!important;border:1px solid rgba(76,131,166,.32)!important;border-radius:6px!important;background:#071b27!important;color:#a9c2d4!important;font-size:10px!important;font-weight:900!important;cursor:pointer!important}.gx-v54-page.is-active{background:#16e397!important;color:#03140e!important;border-color:#16e397!important;box-shadow:0 0 14px rgba(22,227,151,.18)!important}.gx-load-wrap{display:none!important}
@media(max-width:1120px){.gx-lobby-page{grid-template-columns:minmax(0,1fr) 250px!important}.gx-ranking-side{width:250px!important;min-width:250px!important;max-width:250px!important}.gx-lobby-unified .gx-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.gx-player-name{font-size:8.3px!important}.gxclean-footer{gap:3px!important}.gx-report-v21,.gx-direct-delete-v16{padding:0 5px!important;font-size:6px!important}}
@media(max-width:900px){.gx-lobby-page{grid-template-columns:1fr!important}.gx-ranking-side{position:relative!important;width:100%!important;min-width:0!important;max-width:none!important}.gx-lobby-unified .gx-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.gx-v53-queues{grid-template-columns:1fr!important}.gx-v53-queue{height:78px!important}}
@media(max-width:620px){.gx-lobby-unified .gx-mini-grid{grid-template-columns:1fr!important}.gxclean-footer{grid-template-columns:minmax(0,1fr) max-content max-content!important}.gx-v53-queues{padding-left:0!important;padding-right:0!important}}
/* GIGAX_V54_EXACT_LOBBY_BODY_END */

@endpush

@section('content')
<div class="gx-lobby-page">
    <main class="gx-lobby-main">
<div class="gx-lobby-unified">
{{-- GIGAX_V53_LIVE_QUEUES_BEGIN --}}
<section class="gx-v53-queues" id="gxV53Queues" aria-label="Filas MIX em tempo real">
  <div class="gx-v53-queue gx-v53-open" data-qmode="casual"><div class="gx-v53-qtitle"><span>♙</span><b>MIX OPEN</b></div><div class="gx-v53-slots" aria-hidden="true"></div><strong class="gx-v53-count">0/10</strong></div>
  <div class="gx-v53-queue gx-v53-advanced" data-qmode="advanced"><div class="gx-v53-qtitle"><span>♙</span><b>MIX ADVANCED</b></div><div class="gx-v53-slots" aria-hidden="true"></div><strong class="gx-v53-count">0/10</strong></div>
  <div class="gx-v53-queue gx-v53-pro" data-qmode="profissional"><div class="gx-v53-qtitle"><span>♙</span><b>MIX PRO</b></div><div class="gx-v53-slots" aria-hidden="true"></div><strong class="gx-v53-count">0/10</strong></div>
</section>
{{-- GIGAX_V53_LIVE_QUEUES_END --}}
    <section class="gx-lobby-head gx-lobby-toolbar">
        <div class="gx-lobby-head-left">
            <div class="gx-lobby-head-icon">⚔</div>
            <div class="gx-lobby-heading-copy">
                <h2><span class="gx-partidas-title">PARTIDAS</span></h2>
                <p>{{ $totalMatches }} partida{{ $totalMatches === 1 ? '' : 's' }} • {{ $waitingTotal }} disponível{{ $waitingTotal === 1 ? '' : 'is' }} • {{ $liveTotal }} ao vivo</p>
            </div>
        </div>
        
        {{-- GIGAX_CUSTOM_MODES_V3 --}}
        @include('components.gigax-custom-modes')
    </section>
<div class="gx-lobby-compact" id="gxLobbyMatches" data-page-size="15">

    <section class="gx-mini-grid" id="gxMatchGrid">
        @forelse($lobbyMatches as $index => $match)
            @php
                $isLive = (string) ($match->status ?? '') === 'in_progress';
                $currentPlayers = (int) ($match->current_players ?? 0);
                $maxPlayers = max(1, (int) ($match->max_players ?? 10));
                $gxTeamCapacity = max(1, min(8, (int) ceil(max(2, $maxPlayers) / 2))); // V40: 5v5=5 por time, 8v8=8 por time
                $gameSlug = strtoupper((string) ($match->game_slug ?? 'crossfire'));
                $statusLabel = match((string) ($match->status ?? 'waiting')) {
                    'in_progress' => 'Ao vivo',
                    'ready_check' => 'Confirmação',
                    'veto' => 'Veto',
                    default => 'Aguardando',
                };
                $teamA = collect($match->left_players ?? [])->take(8);
                $teamB = collect($match->right_players ?? [])->take(8);
                $teamAName = (string) ($match->left_team ?? 'Time A');
                $teamBName = (string) ($match->right_team ?? 'Time B');
                $modeLabel = strtoupper(str_replace(['_', 'x'], [' ', ' x '], (string) ($match->training_type ?: 'MIX 5V5')));
                $gxIsC1s = strtolower(trim((string) ($match->training_type ?? ''))) === 'c1s';
                $gxIsHost = (int) ($match->host_id ?? 0) === $gxLobbyUserId;
                $gxCanStartC1s = $gxIsC1s
                    && !$isLive
                    && (string) ($match->status ?? 'waiting') === 'waiting'
                    && $gxIsHost
                    && $currentPlayers >= 2;
            @endphp
            <article class="gx-mini-card {{ $isLive ? 'is-live' : '' }} {{ $gxTeamCapacity >= 8 ? 'gx-card-8v8' : 'gx-card-standard' }}" data-match-card data-index="{{ $index }}" {{ $index >= 12 ? 'hidden' : '' }}>
                <div class="gx-mini-accent"></div>
                <div class="gx-mini-body">
                    <div class="gxclean-head">
                        <div class="gxclean-game">
                            <div class="gxclean-title">
                                <strong>{{ mb_strtoupper((string)($match->title ?? $match->name ?? 'SALA')) }} <em>#{{ $match->id }}</em></strong>
                                <small>{{ $gxTeamCapacity }}v{{ $gxTeamCapacity }}</small>
                            </div>
                        </div>
                        <details class="gx-control-menu gx-card-menu">
                            <summary title="Opções da partida">⋮</summary>
                            <div class="gx-control-popup">
                                <b>Partida #{{ (int) $match->id }}</b>
                                <a href="{{ route('lobby.show', $match->id) }}" class="gx-card-menu-link">DETALHES</a>
                                @if($isLive)
                                    <a href="{{ route('lobby.match', $match->id) }}" class="gx-card-menu-link">ASSISTIR</a>
                                    <button type="button" class="gx-open-match-lobby-modal" data-match-id="{{ (int) $match->id }}">LOBBY DA PARTIDA</button>
                                @elseif($gxCanStartC1s)
                                    <button type="button" class="gx-c1s-start-btn" data-match-id="{{ (int) $match->id }}" data-start-url="{{ url('/lobby/' . $match->id . '/ready/start') }}">INICIAR PARTIDA</button>
                                @elseif(!$gxIsHost && (string) ($match->status ?? 'waiting') === 'waiting')
                                    <form method="POST" action="{{ route('lobby.join', $match->id) }}">@csrf<button type="submit">ENTRAR</button></form>
                                @elseif($gxIsHost && $gxIsC1s && $currentPlayers < 2)
                                    <button type="button" disabled>AGUARDANDO +1</button>
                                @endif
                                @if($gxIsHost && (string) ($match->status ?? 'waiting') === 'waiting')
                                    <span class="gx-menu-separator">SUA SALA</span>
                                    <button type="button" class="cancel" onclick="gxHostCancel({{ (int) $match->id }})">× CANCELAR SALA</button>
                                @endif
                                @if($gxLobbyIsAdmin)
                                    <span class="gx-menu-separator">MANUTENÇÃO</span>
                                    @if($isLive)
                                        <button type="button" class="finish" onclick="gxAdminFinish({{ (int) $match->id }})">■ ENCERRAR</button>
                                    @endif
                                    @if((string) ($match->status ?? 'waiting') === 'waiting' && empty($match->started_at))
                                        <button type="button" class="cancel" onclick="gxAdminCancel({{ (int) $match->id }})">× CANCELAR LOBBY</button>
                                    @endif
                                @endif
                            </div>
                        </details>
                    </div>

                    <div class="gx-mini-meta">
                        <div><span>Mapa</span><b>{{ $match->map_name ?: 'A definir' }}</b></div>
                        <div><span>Modo</span><b>{{ $modeLabel }}</b></div>
                        <div><span>Jogadores</span><b>{{ $currentPlayers }}/{{ $maxPlayers }}</b></div>
                    </div>

                    <div class="gxclean-faceoff">
                        <div class="gxclean-squad gxclean-a">
                            <div class="gxclean-squad-name"><span>{{ $teamAName }}</span><span>{{ (int) ($match->team_a_count ?? $teamA->count()) }}/{{ $gxTeamCapacity }}</span></div>
                            <div class="gxclean-avatars gx-player-list">
                                @foreach($teamA as $player)
                                    @php $name = $player->nickname ?? 'Jogador'; @endphp
                                    <div class="gx-player-row" title="{{ $name }}">
                                        <span class="gx-avatar-mini">
                                            <img src="{{ $avatarUrl($player) }}" alt="{{ $name }}" loading="lazy" onerror="this.style.display='none';this.parentElement.textContent='{{ strtoupper(mb_substr($name,0,1)) }}'">
                                        </span>
                                        <span class="gx-player-name">{{ $name }}</span>
                                    </div>
                                @endforeach
                                @for($i = $teamA->count(); $i < $gxTeamCapacity; $i++)
                                    <div class="gx-player-row gx-player-empty"><span class="gx-avatar-mini">+</span><span class="gx-player-name">Vaga</span></div>
                                @endfor
                            </div>
                        </div>

                        <div class="gxclean-vs">VS</div>

                        <div class="gxclean-squad gxclean-b">
                            <div class="gxclean-squad-name"><span>{{ $teamBName }}</span><span>{{ (int) ($match->team_b_count ?? $teamB->count()) }}/{{ $gxTeamCapacity }}</span></div>
                            <div class="gxclean-avatars gx-player-list">
                                @foreach($teamB as $player)
                                    @php $name = $player->nickname ?? 'Jogador'; @endphp
                                    <div class="gx-player-row" title="{{ $name }}">
                                        <span class="gx-avatar-mini">
                                            <img src="{{ $avatarUrl($player) }}" alt="{{ $name }}" loading="lazy" onerror="this.style.display='none';this.parentElement.textContent='{{ strtoupper(mb_substr($name,0,1)) }}'">
                                        </span>
                                        <span class="gx-player-name">{{ $name }}</span>
                                    </div>
                                @endforeach
                                @for($i = $teamB->count(); $i < $gxTeamCapacity; $i++)
                                    <div class="gx-player-row gx-player-empty"><span class="gx-avatar-mini">+</span><span class="gx-player-name">Vaga</span></div>
                                @endfor
                            </div>
                        </div>
                    </div>

                    <div class="gxclean-footer">
                        <div class="gxclean-status">
                            <strong>{{ $isLive ? ((int)($match->team_a_score ?? 0)).' × '.((int)($match->team_b_score ?? 0)) : '—' }}</strong>
                            <small>{{ $statusLabel }}</small>
                        </div>
                        <span class="gxclean-count"><b>{{ $currentPlayers }}/{{ $maxPlayers }}</b></span>
                        {{-- GIGAX_REPORTAR_BUTTON_V21 --}}
                        @if($gxLobbyUserId > 0)
                            <button type="button" class="gx-report-v21" data-match-id="{{ (int)$match->id }}" title="Reportar partida">⚠ REPORTAR</button>
                        @endif
                        {{-- GIGAX_DIRECT_DELETE_V16 --}}
                        @if($gxIsHost && (string)($match->status ?? 'waiting') === 'waiting' && empty($match->started_at) && strtolower((string)($match->mode_code ?? 'custom')) === 'custom')
                            <button type="button" class="gx-direct-delete-v16" data-match-id="{{ (int)$match->id }}" title="Cancelar lobby">× CANCELAR</button>
                        @endif
                    </div>

                </div>
            </article>
        @empty
            <div class="gx-mini-empty">Nenhuma partida disponível. Use <b>JOGAR AGORA</b> para entrar na Fila MIX.</div>
        @endforelse
    </section>

    @if($totalMatches > 12)
        <div class="gx-load-wrap"><button type="button" class="gx-load-more" id="gxLoadMoreMatches">CARREGAR MAIS</button></div>
    @endif
</div>
</div><!-- /gx-lobby-unified -->


    </main>

    {{-- GIGAX_RANKING_MODALIDADES_V17 --}}
    <aside class="gx-ranking-side gx-rankfx gx-r17" id="gxRankFx">
        <div class="gx-ranking-side-head gx-rankfx-head">
            <div><h3><span class="gx-rankfx-trophy">🏆</span> RANKINGS GIGAX</h3><p id="gxR17Subtitle">PUG • Skill competitivo</p></div>
            <span class="gx-rankfx-live">● AO VIVO</span>
        </div>
        <div class="gx-r17-main-tabs">
            <button type="button" class="is-active" data-r17-main="pug">PUG / SKILL</button>
            <button type="button" data-r17-main="modes">MODALIDADES</button>
        </div>
        <section data-r17-panel="pug">
            <div class="gx-rankfx-tabs" role="tablist"><button type="button" class="is-active" data-rank-mode="OPEN">OPEN</button><button type="button" data-rank-mode="RANKED">RANKED</button><button type="button" data-rank-mode="LIGA">LIGA</button></div>
            <div class="gx-rank-columns gx-rankfx-cols"><span>#</span><span></span><span>Jogador</span><span>XP</span></div>
            @forelse($gxLobbyRanking as $idx => $rankPlayer)
                @php $rName=(string)($rankPlayer->nickname??'Jogador'); $rAvatar=trim((string)($rankPlayer->avatar_url??'')); $rStreak=max(0,(int)($rankPlayer->win_streak??$rankPlayer->streak??$rankPlayer->current_streak??0)); $rDelta=(int)($rankPlayer->last_points_delta??$rankPlayer->points_delta??0); @endphp
                <a class="gx-rank-item gx-rankfx-item" href="{{ url('/players/'.(int)$rankPlayer->user_id) }}" data-user-id="{{ (int)$rankPlayer->user_id }}" data-streak="{{ $rStreak }}" data-delta="{{ $rDelta }}">
                    <span class="gx-rank-pos">{{ $idx < 3 ? ['🥇','🥈','🥉'][$idx] : $idx+1 }}</span><span class="gx-rankfx-avatarbox"><span class="gx-rank-avatar">@if($rAvatar!=='')<img src="{{ $rAvatar }}" alt="{{ $rName }}"><span style="display:none">{{ mb_strtoupper(mb_substr($rName,0,1)) }}</span>@else<span>{{ mb_strtoupper(mb_substr($rName,0,1)) }}</span>@endif</span></span><span class="gx-rank-player gx-rankfx-player"><b>{{ $rName }}</b><small>{{ $rStreak>0 ? '🔥 '.$rStreak.' seguidas' : 'PUG competitivo' }}</small></span><span class="gx-rank-xp">{{ number_format((int)($rankPlayer->xp??0),0,',','.') }}</span>
                </a>
            @empty <div class="gx-rank-empty">Ranking PUG ainda sem dados.</div> @endforelse
            <a class="gx-rank-full" href="{{ Route::has('ranking') ? route('ranking') : url('/ranking') }}">VER RANKING PUG COMPLETO →</a>
        </section>
        <section data-r17-panel="modes" hidden>
            <div class="gx-r17-mode-tabs">
                @foreach(['custom_x1'=>'X1','custom_x2'=>'X2','custom_x3'=>'X3','custom_x4'=>'X4','custom_x5'=>'X5','custom_x6'=>'X6','custom_x7'=>'X7','custom_x8'=>'X8','team_5l'=>'5L','c1s'=>'C1S','awp'=>'AWP'] as $mk=>$ml)
                    <button type="button" class="{{ $loop->first?'is-active':'' }}" data-r17-mode="{{ $mk }}">{{ $ml }}</button>
                @endforeach
            </div>
            @foreach(['custom_x1'=>'X1','custom_x2'=>'X2','custom_x3'=>'X3','custom_x4'=>'X4','custom_x5'=>'X5','custom_x6'=>'X6','custom_x7'=>'X7','custom_x8'=>'X8','team_5l'=>'5L','c1s'=>'C1S / DM','awp'=>'AWP'] as $mk=>$ml)
                <div class="gx-r17-mode-list" data-r17-list="{{ $mk }}" {{ !$loop->first?'hidden':'' }}>
                    <div class="gx-r17-mode-head"><b>RANKING {{ $ml }}</b><small>Não altera Skill/PUG</small></div>
                    <div class="gx-rank-columns gx-rankfx-cols"><span>#</span><span></span><span>Jogador</span><span>PTS</span></div>
                    @php $gxRows=collect($gxModeRankings->get($mk,collect()))->take(10); @endphp
                    @forelse($gxRows as $idx=>$rp)
                        @php $rn=(string)($rp->nickname??'Jogador'); $ra=trim((string)($rp->avatar_url??'')); $rs=(int)($rp->current_streak??0); @endphp
                        <a class="gx-rank-item gx-rankfx-item" href="{{ url('/players/'.(int)$rp->user_id) }}"><span class="gx-rank-pos">{{ $idx<3?['🥇','🥈','🥉'][$idx]:$idx+1 }}</span><span class="gx-rankfx-avatarbox"><span class="gx-rank-avatar">@if($ra!=='')<img src="{{ $ra }}" alt="{{ $rn }}">@else<span>{{ mb_strtoupper(mb_substr($rn,0,1)) }}</span>@endif</span></span><span class="gx-rank-player gx-rankfx-player"><b>{{ $rn }}</b><small>{{ (int)$rp->wins }}V • {{ (int)$rp->losses }}D{{ $rs>0?' • 🔥 '.$rs:'' }}</small></span><span class="gx-rank-xp">{{ number_format((int)$rp->points,0,',','.') }}</span></a>
                    @empty <div class="gx-rank-empty">Ainda não há resultados válidos em {{ $ml }}.</div> @endforelse
                </div>
            @endforeach
            <div class="gx-r17-seal">🔒 RANKING DE SALAS FECHADAS • ISOLADO DO SKILL</div>
        </section>
    </aside>

<style id="gxRankAvatarStreakV1">
.gx-rankfx-head{display:flex!important;align-items:center;justify-content:space-between;gap:8px}.gx-rankfx-live{font-size:9px;font-weight:900;color:#00ef7b;white-space:nowrap}.gx-rankfx-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:7px 8px;border-bottom:1px solid rgba(116,166,219,.13)}.gx-rankfx-tabs button{height:27px;border:1px solid rgba(116,166,219,.18);border-radius:6px;background:#091728;color:#7890aa;font-size:9px;font-weight:900;cursor:pointer}.gx-rankfx-tabs button.is-active{border-color:rgba(0,239,123,.55);background:rgba(0,239,123,.10);color:#eafff4}.gx-rankfx-cols{display:grid!important;grid-template-columns:25px 43px minmax(0,1fr) 42px!important;padding:7px 8px!important;font-size:9px!important}.gx-rankfx-item{display:grid!important;grid-template-columns:25px 43px minmax(0,1fr) 42px!important;align-items:center!important;gap:3px!important;min-height:53px!important;padding:7px 8px!important;overflow:visible!important}.gx-rankfx-avatarbox{position:relative;display:block;width:36px;height:36px}.gx-rankfx .gx-rank-avatar{position:relative;z-index:2;width:36px!important;height:36px!important;border-radius:50%;overflow:hidden;border:2px solid rgba(111,164,219,.28)}.gx-rankfx .gx-rank-avatar img{width:100%;height:100%;object-fit:cover}.gx-rankfx-ring{position:absolute;z-index:1;inset:-4px;border:2px solid #00ef7b;border-radius:50%;opacity:0;pointer-events:none}.gx-rankfx-points{position:absolute;z-index:8;left:50%;top:-9px;transform:translateX(-50%);font-size:10px;font-weight:1000;color:#00ef7b;white-space:nowrap;pointer-events:none;animation:gxPtsUp 1.55s ease forwards}.gx-rankfx-streak{position:absolute;z-index:9;right:-17px;top:-8px;padding:1px 5px;border:1px solid rgba(255,176,56,.38);border-radius:8px;background:#101b2b;color:#ffd16a;font-size:9px;line-height:14px;font-weight:1000;white-space:nowrap;box-shadow:0 3px 12px rgba(0,0,0,.28)}.gx-rankfx-item[data-delta]:not([data-delta="0"]) .gx-rank-avatar{animation:gxAvatarWin .72s ease}.gx-rankfx-item[data-delta]:not([data-delta="0"]) .gx-rankfx-ring{animation:gxRing 1.45s ease-out}.gx-rankfx-player{display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-width:0!important}.gx-rankfx-player b{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px!important;color:#f4f9ff}.gx-rankfx-player small{display:block;margin-top:2px;font-size:8.5px;color:#71869e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.gx-rankfx .gx-rank-xp{font-size:9px!important;font-weight:900;text-align:right}.gx-rankfx .gx-rank-pos{font-size:11px!important;font-weight:900}.gx-rankfx-streak.gx-pop{animation:gxBadgePop .55s ease}.gx-rankfx-item.gx-win .gx-rank-avatar{animation:gxAvatarWin .72s ease}.gx-rankfx-item.gx-win .gx-rankfx-ring{animation:gxRing 1.45s ease-out}.gx-rankfx-item.gx-loss .gx-rank-avatar{animation:gxAvatarLoss .55s ease}
@keyframes gxPtsUp{0%{opacity:0;transform:translate(-50%,9px) scale(.72)}20%{opacity:1;transform:translate(-50%,0) scale(1.15)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-25px) scale(.9)}}@keyframes gxAvatarWin{0%{transform:scale(1)}25%{transform:scale(1.16) rotate(-4deg)}50%{transform:scale(.97) rotate(3deg)}75%{transform:scale(1.06)}100%{transform:scale(1)}}@keyframes gxRing{0%{opacity:1;transform:scale(.72)}70%{opacity:.55;transform:scale(1.32)}100%{opacity:0;transform:scale(1.62)}}@keyframes gxBadgePop{0%{transform:scale(.45);opacity:.25}55%{transform:scale(1.22);opacity:1}100%{transform:scale(1)}}@keyframes gxAvatarLoss{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
@media(prefers-reduced-motion:reduce){.gx-rankfx *{animation-duration:.01ms!important;animation-iteration-count:1!important}}
</style>
<script id="gxRankAvatarStreakV1Js">
(function(){if(window.GXRankAvatarStreakV1)return;window.GXRankAvatarStreakV1=true;var root=document.getElementById('gxRankFx');if(!root)return;root.querySelectorAll('[data-rank-mode]').forEach(function(btn){btn.addEventListener('click',function(e){e.preventDefault();root.querySelectorAll('[data-rank-mode]').forEach(function(x){x.classList.remove('is-active')});btn.classList.add('is-active')})});window.addEventListener('gigax:ranking-win',function(ev){var d=ev.detail||{},row=root.querySelector('[data-user-id="'+String(d.userId||'')+'"]');if(!row)return;var box=row.querySelector('.gx-rankfx-avatarbox');row.classList.remove('gx-loss');row.classList.add('gx-win');var old=box.querySelector('.gx-rankfx-points');if(old)old.remove();var pts=document.createElement('span');pts.className='gx-rankfx-points';pts.textContent='+'+Math.max(0,parseInt(d.points||3,10))+' PTS';box.appendChild(pts);var streak=Math.max(1,parseInt(d.streak||1,10)),badge=box.querySelector('.gx-rankfx-streak');if(!badge){badge=document.createElement('span');badge.className='gx-rankfx-streak';box.appendChild(badge)}badge.textContent='🔥 +'+streak;badge.classList.remove('gx-pop');void badge.offsetWidth;badge.classList.add('gx-pop');setTimeout(function(){pts.remove();row.classList.remove('gx-win')},1600)});window.addEventListener('gigax:ranking-loss',function(ev){var d=ev.detail||{},row=root.querySelector('[data-user-id="'+String(d.userId||'')+'"]');if(!row)return;row.classList.add('gx-loss');var b=row.querySelector('.gx-rankfx-streak');if(b)b.remove();setTimeout(function(){row.classList.remove('gx-loss')},650)})})();
</script>

</div>

{{-- GIGAX_LOBBY_JOIN_PASSWORD_V8_BEGIN --}}
<style id="gigaxLobbyJoinPasswordV8Style">
.gxjp8{display:none;position:fixed;inset:0;z-index:30000;align-items:center;justify-content:center;padding:18px;background:rgba(1,7,16,.82);backdrop-filter:blur(11px)}
.gxjp8.on{display:flex}
.gxjp8-box{width:min(430px,100%);overflow:hidden;border:1px solid rgba(105,176,255,.24);border-radius:17px;background:linear-gradient(180deg,#10243f,#071321);box-shadow:0 30px 100px rgba(0,0,0,.65);color:#edf6ff}
.gxjp8-head{padding:15px 17px;border-bottom:1px solid rgba(255,255,255,.07)}
.gxjp8-title{font-size:15px;font-weight:950}.gxjp8-sub{margin-top:4px;color:#8ca7c5;font-size:10px;line-height:1.45}
.gxjp8-body{padding:16px}
.gxjp8-input{width:100%;height:42px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:#06101b;color:#fff;padding:0 12px;outline:none;font-size:13px}
.gxjp8-input:focus{border-color:rgba(80,151,255,.65);box-shadow:0 0 0 3px rgba(47,116,255,.12)}
.gxjp8-error{display:none;margin-top:9px;padding:9px 10px;border:1px solid rgba(255,80,110,.24);border-radius:9px;background:rgba(255,60,90,.09);color:#ff9aac;font-size:10px;font-weight:800}
.gxjp8-error.on{display:block}
.gxjp8-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:13px}
.gxjp8-btn{height:38px;padding:0 14px;border:0;border-radius:9px;font-size:10px;font-weight:950;cursor:pointer}
.gxjp8-cancel{background:#152638;color:#c2d3e2}
.gxjp8-enter{background:linear-gradient(180deg,#347cff,#1754cc);color:#fff}
.gxjp8-enter:disabled{opacity:.55;cursor:wait}
</style>

<div class="gxjp8" id="gxJoinPasswordModalV8" aria-hidden="true">
    <div class="gxjp8-box" role="dialog" aria-modal="true" aria-labelledby="gxJoinPasswordTitleV8">
        <div class="gxjp8-head">
            <div class="gxjp8-title" id="gxJoinPasswordTitleV8">ENTRAR NA SALA</div>
            <div class="gxjp8-sub">Esta sala é protegida. Digite a senha definida pelo criador.</div>
        </div>
        <div class="gxjp8-body">
            <input class="gxjp8-input" id="gxJoinPasswordInputV8" type="password" maxlength="20" autocomplete="off" placeholder="Senha da sala">
            <div class="gxjp8-error" id="gxJoinPasswordErrorV8"></div>
            <div class="gxjp8-actions">
                <button class="gxjp8-btn gxjp8-cancel" type="button" id="gxJoinPasswordCancelV8">CANCELAR</button>
                <button class="gxjp8-btn gxjp8-enter" type="button" id="gxJoinPasswordEnterV8">ENTRAR</button>
            </div>
        </div>
    </div>
</div>

<script id="gigaxLobbyJoinPasswordV8Script">
(() => {
    if (window.__gigaxLobbyJoinPasswordV8) return;
    window.__gigaxLobbyJoinPasswordV8 = true;

    const modal = document.getElementById('gxJoinPasswordModalV8');
    const input = document.getElementById('gxJoinPasswordInputV8');
    const error = document.getElementById('gxJoinPasswordErrorV8');
    const enter = document.getElementById('gxJoinPasswordEnterV8');
    const cancel = document.getElementById('gxJoinPasswordCancelV8');
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';

    let pending = null;

    function isLobbyJoinUrl(url) {
        try {
            const u = new URL(url, window.location.origin);
            return /^\/lobby\/\d+\/join\/?$/.test(u.pathname);
        } catch (_) {
            return false;
        }
    }

    function showError(message) {
        if (!error) return;
        error.textContent = message || 'Não foi possível entrar na sala.';
        error.classList.add('on');
    }

    function clearError() {
        if (!error) return;
        error.textContent = '';
        error.classList.remove('on');
    }

    function openPassword(ctx) {
        pending = ctx;
        clearError();
        input.value = '';
        modal.classList.add('on');
        modal.setAttribute('aria-hidden','false');
        setTimeout(() => input.focus(), 30);
    }

    function closePassword() {
        modal.classList.remove('on');
        modal.setAttribute('aria-hidden','true');
        clearError();
        input.value = '';
        pending = null;
    }

    async function postJoin(url, password = '') {
        const body = new URLSearchParams();
        body.set('password', String(password || ''));

        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': csrf,
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
            credentials: 'same-origin',
            body
        });

        let data = {};
        try { data = await response.json(); } catch (_) {}

        return {response, data};
    }

    async function tryJoin(url, allowPasswordModal = true) {
        try {
            const {response, data} = await postJoin(url, '');

            if (response.ok && data.success) {
                const m = String(url).match(/\/lobby\/(\d+)\/join/);
                const joinedLobbyId = Number(data.lobby_id || (m ? m[1] : 0));
                if (joinedLobbyId && window.gxLobbyReadyWatch) {
                    window.gxLobbyReadyWatch.setLobby(joinedLobbyId);
                }
                window.location.href = '/lobby';
                return;
            }

            const msg = String(data.message || '');
            const passwordError = response.status === 403 && /senha/i.test(msg);

            if (passwordError && allowPasswordModal) {
                openPassword({url});
                return;
            }

            // Outros bloqueios (AC, sala cheia, cooldown etc.) ficam na pagina.
            if (window.gigaxToast) {
                window.gigaxToast(msg || 'Não foi possível entrar.', 'error');
            } else {
                alert(msg || 'Não foi possível entrar.');
            }
        } catch (e) {
            alert(e?.message || 'Erro ao entrar na sala.');
        }
    }

    // Captura QUALQUER form POST que aponte para /lobby/{id}/join,
    // inclusive cards adicionados por componentes/partials.
    document.addEventListener('submit', (event) => {
        const form = event.target;
        if (!(form instanceof HTMLFormElement)) return;

        const action = form.getAttribute('action') || window.location.href;
        if (!isLobbyJoinUrl(action)) return;

        event.preventDefault();
        event.stopImmediatePropagation();
        tryJoin(action, true);
    }, true);

    // Compatibilidade com links/botoes que usem href/data-url em vez de form.
    document.addEventListener('click', (event) => {
        const el = event.target.closest('a[href],button[data-join-url],[data-lobby-join-url]');
        if (!el) return;

        const url = el.getAttribute('data-lobby-join-url')
            || el.getAttribute('data-join-url')
            || el.getAttribute('href');

        if (!url || !isLobbyJoinUrl(url)) return;

        event.preventDefault();
        event.stopImmediatePropagation();
        tryJoin(url, true);
    }, true);

    enter?.addEventListener('click', async () => {
        if (!pending?.url) return;

        const password = String(input.value || '').trim();
        if (!password) {
            showError('Digite a senha da sala.');
            input.focus();
            return;
        }

        clearError();
        enter.disabled = true;
        enter.textContent = 'ENTRANDO...';

        try {
            const {response, data} = await postJoin(pending.url, password);

            if (!response.ok || !data.success) {
                showError(data.message || 'Senha incorreta.');
                input.focus();
                input.select();
                return;
            }

            const url = pending.url;
            closePassword();

            const m = String(url).match(/\/lobby\/(\d+)\/join/);
            const joinedLobbyId = Number(data.lobby_id || (m ? m[1] : 0));
            if (joinedLobbyId && window.gxLobbyReadyWatch) {
                window.gxLobbyReadyWatch.setLobby(joinedLobbyId);
            }
            window.location.href = '/lobby';
        } catch (e) {
            showError(e?.message || 'Erro ao entrar na sala.');
        } finally {
            enter.disabled = false;
            enter.textContent = 'ENTRAR';
        }
    });

    cancel?.addEventListener('click', closePassword);
    modal?.addEventListener('click', e => { if (e.target === modal) closePassword(); });
    input?.addEventListener('keydown', e => {
        if (e.key === 'Enter') { e.preventDefault(); enter?.click(); }
        if (e.key === 'Escape') closePassword();
    });
})();
</script>
{{-- GIGAX_LOBBY_JOIN_PASSWORD_V8_END --}}
{{-- GIGAX_LOBBY_READY_MODAL_BEGIN --}}
<style>
.gxlr-ready{display:none;position:fixed;inset:0;z-index:32000;align-items:center;justify-content:center;padding:18px;background:rgba(1,7,16,.86);backdrop-filter:blur(12px)}
.gxlr-ready.on{display:flex}
.gxlr-card{width:min(620px,100%);overflow:hidden;border:1px solid rgba(36,245,111,.24);border-radius:16px;background:linear-gradient(180deg,#122235,#07111c);box-shadow:0 30px 90px rgba(0,0,0,.58)}
.gxlr-head{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.07);text-align:center}
.gxlr-kicker{font-size:9px;font-weight:1000;letter-spacing:.12em;color:#24f56f}
.gxlr-head h2{margin:5px 0 4px;font-size:22px}.gxlr-head p{margin:0;color:#8ea4b8;font-size:11px}
.gxlr-timer{margin:14px auto 0;width:max-content;padding:8px 14px;border:1px solid rgba(36,245,111,.18);border-radius:10px;background:rgba(36,245,111,.06);color:#aaffc2;font-size:24px;font-weight:1000}
.gxlr-body{padding:15px 18px}.gxlr-count{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:11px;color:#a8bed0}.gxlr-count strong{color:#fff}
.gxlr-players{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:260px;overflow:auto}
.gxlr-player{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;border:1px solid rgba(255,255,255,.06);border-radius:8px;background:rgba(255,255,255,.025);font-size:10px}
.gxlr-player b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gxlr-state{font-size:8px;font-weight:1000;color:#ffd36b}.gxlr-player.ok .gxlr-state{color:#62f39b}.gxlr-player.no .gxlr-state{color:#ff7184}
.gxlr-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 18px 18px}.gxlr-btn{min-height:42px;border-radius:9px;border:1px solid rgba(255,255,255,.08);font-weight:1000;font-size:11px;cursor:pointer}.gxlr-accept{background:#24f56f;color:#04140a;border-color:#24f56f}.gxlr-decline{background:rgba(255,64,84,.10);color:#ff8593;border-color:rgba(255,64,84,.28)}
.gxlr-note{padding:0 18px 14px;text-align:center;color:#7890a5;font-size:9px}
@media(max-width:600px){.gxlr-players{grid-template-columns:1fr}}
</style>

<div class="gxlr-ready" id="gxLobbyReadyModal" aria-hidden="true">
    <div class="gxlr-card" role="dialog" aria-modal="true" aria-labelledby="gxLobbyReadyTitle">
        <div class="gxlr-head">
            <div class="gxlr-kicker">GIGAX ARENA</div>
            <h2 id="gxLobbyReadyTitle">PARTIDA ENCONTRADA</h2>
            <p>A sala completou. Confirme sua participação sem sair do Lobby.</p>
            <div class="gxlr-timer" id="gxLobbyReadyTimer">02:00</div>
        </div>
        <div class="gxlr-body">
            <div class="gxlr-count">
                <span>Ready-check</span>
                <strong id="gxLobbyReadyCount">0/0 confirmados</strong>
            </div>
            <div class="gxlr-players" id="gxLobbyReadyPlayers"></div>
        </div>
        <div class="gxlr-note" id="gxLobbyReadyNote">A página da sala continua disponível em DETALHES, mas o fluxo principal permanece aqui.</div>
        <div class="gxlr-actions">
            <button class="gxlr-btn gxlr-accept" type="button" id="gxLobbyReadyAccept">CONFIRMAR</button>
            <button class="gxlr-btn gxlr-decline" type="button" id="gxLobbyReadyDecline">RECUSAR</button>
        </div>
    </div>
</div>

<script>
(() => {
    if (window.__gxLobbyReadyWatcher) return;
    window.__gxLobbyReadyWatcher = true;

    const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}';
    const initialLobbyId = Number(@json((int) (session('gx_active_lobby_id') ?: ($foundMatch->id ?? 0))));
    const modal = document.getElementById('gxLobbyReadyModal');
    const timer = document.getElementById('gxLobbyReadyTimer');
    const count = document.getElementById('gxLobbyReadyCount');
    const players = document.getElementById('gxLobbyReadyPlayers');
    const note = document.getElementById('gxLobbyReadyNote');
    const accept = document.getElementById('gxLobbyReadyAccept');
    const decline = document.getElementById('gxLobbyReadyDecline');

    let lobbyId = initialLobbyId || 0;
    let lastReady = null;
    let polling = false;

    function esc(v) {
        return String(v ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[c]));
    }

    function setModal(open) {
        if (!modal) return;
        modal.classList.toggle('on', !!open);
        modal.setAttribute('aria-hidden', open ? 'false' : 'true');
    }

    function renderReady(ready) {
        if (!ready?.active) {
            setModal(false);
            return;
        }

        lastReady = ready;
        setModal(true);

        const seconds = Math.max(0, Number(ready.seconds_left || 0));
        const mm = String(Math.floor(seconds / 60)).padStart(2, '0');
        const ss = String(seconds % 60).padStart(2, '0');
        timer.textContent = `${mm}:${ss}`;
        count.textContent = `${Number(ready.accepted_count || 0)}/${Number(ready.required_count || 0)} confirmados`;

        players.innerHTML = (ready.participants || []).map(p => {
            const state = p.accepted ? 'CONFIRMADO' : (p.declined ? 'RECUSOU' : 'AGUARDANDO');
            const cls = p.accepted ? 'ok' : (p.declined ? 'no' : '');
            return `<div class="gxlr-player ${cls}">
                <b>${esc(p.nickname || 'Jogador')}</b>
                <span class="gxlr-state">${state}</span>
            </div>`;
        }).join('');
    }

    async function request(url, method = 'GET') {
        const options = {
            method,
            credentials: 'same-origin',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        };
        if (method !== 'GET') options.headers['X-CSRF-TOKEN'] = csrf;

        const res = await fetch(url, options);
        let data = {};
        try { data = await res.json(); } catch (_) {}
        if (!res.ok) throw new Error(data.message || `HTTP ${res.status}`);
        return data;
    }

    async function poll() {
        if (!lobbyId || polling) return;
        polling = true;

        try {
            const data = await request(`/lobby/${lobbyId}/status`);

            if (data.status === 'ready_check' && data.ready_check) {
                renderReady(data.ready_check);
                        } else if (data.status === 'veto' || data.status === 'in_progress') {
                setModal(false);
                lastReady = null;
            } else if (data.status === 'cancelled' || data.status === 'not_found') {
                setModal(false);
                lobbyId = 0;
            }
        } catch (_) {
            // Mantém a página estável durante falha transitória de polling.
        } finally {
            polling = false;
        }
    }

    accept?.addEventListener('click', async () => {
        if (!lobbyId) return;
        accept.disabled = true;
        accept.textContent = 'CONFIRMANDO...';

        try {
            const data = await request(`/lobby/${lobbyId}/ready/accept`, 'POST');

            if (data.all_ready) {
                setModal(false);
                lastReady = null;
                return;
            }

            if (data.ready_check) renderReady(data.ready_check);
            accept.textContent = 'CONFIRMADO';
        } catch (e) {
            note.textContent = e.message || 'Erro ao confirmar.';
            accept.disabled = false;
            accept.textContent = 'CONFIRMAR';
        }
    });

    decline?.addEventListener('click', async () => {
        if (!lobbyId) return;
        decline.disabled = true;
        try {
            const data = await request(`/lobby/${lobbyId}/ready/decline`, 'POST');
            note.textContent = data.message || 'Participação recusada.';
            setModal(false);
            setTimeout(() => window.location.reload(), 700);
        } catch (e) {
            note.textContent = e.message || 'Erro ao recusar.';
            decline.disabled = false;
        }
    });

    window.gxLobbyReadyWatch = {
        setLobby(id) {
            lobbyId = Number(id || 0);
            if (lobbyId) poll();
        }
    };

    if (lobbyId) poll();
    setInterval(poll, 2000);
})();
</script>

<script id="gxC1sManualReadyStart">
(() => {
    if (window.__gxC1sManualReadyStart) return;
    window.__gxC1sManualReadyStart = true;

    const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}';

    document.addEventListener('click', async (event) => {
        const button = event.target.closest('.gx-c1s-start-btn');
        if (!button) return;

        event.preventDefault();

        const matchId = Number(button.dataset.matchId || 0);
        const url = button.dataset.startUrl || '';
        if (!matchId || !url || button.disabled) return;

        const original = button.textContent;
        button.disabled = true;
        button.textContent = 'ABRINDO CONFIRMAÇÃO...';

        try {
            const response = await fetch(url, {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrf
                }
            });

            let data = {};
            try { data = await response.json(); } catch (_) {}

            if (!response.ok || data.success === false) {
                throw new Error(data.message || `HTTP ${response.status}`);
            }

            // A partir daqui o lobby está congelado em ready_check.
            // O watcher existente abre o modal CONFIRMAR/RECUSAR para os participantes.
            if (window.gxLobbyReadyWatch) {
                window.gxLobbyReadyWatch.setLobby(matchId);
            }

            button.textContent = 'CONFIRMAÇÃO ABERTA';
        } catch (error) {
            button.disabled = false;
            button.textContent = original;

            if (window.gigaxToast) {
                window.gigaxToast(error.message || 'Não foi possível iniciar a confirmação.', 'error');
            } else {
                alert(error.message || 'Não foi possível iniciar a confirmação.');
            }
        }
    }, true);
})();
</script>
{{-- GIGAX_LOBBY_READY_MODAL_END --}}


<style id="gxLobbyOneLineFinal">
/* PARTIDA EM UMA LINHA - TIPOGRAFIA PADRÃO DASHBOARD */
.gx-mini-grid{gap:6px!important}

.gx-mini-card{
    min-height:66px!important;
    overflow:visible!important;
    border-radius:9px!important;
}

.gx-mini-body{
    width:100%!important;
    min-height:64px!important;
    display:grid!important;
    grid-template-columns:
        minmax(180px,1.12fr)
        minmax(125px,.74fr)
        minmax(310px,1.65fr)
        92px
        minmax(185px,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    padding:7px 10px!important;
}
.gx-mini-body>*{min-width:0!important}

/* identificação */
.gx-mini-top{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
}
.gx-mini-game{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
}
.gx-mini-mark{
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    border-radius:8px!important;
    font-size:10px!important;
}
.gx-mini-title{min-width:0!important}
.gx-mini-title strong{
    display:block!important;
    font-size:11px!important;
    line-height:1.15!important;
    font-weight:950!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.gx-mini-title small{
    display:block!important;
    margin-top:3px!important;
    font-size:8px!important;
    line-height:1.1!important;
    color:#849aab!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.gx-mini-status{display:none!important}

/* mapa */
.gx-mini-meta{
    display:block!important;
    min-width:0!important;
}
.gx-mini-meta div{display:none!important}
.gx-mini-meta div:first-child{display:block!important}
.gx-mini-meta span{display:none!important}
.gx-mini-meta b{
    display:block!important;
    font-size:10px!important;
    font-weight:850!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.gx-mini-meta b:before{
    content:"◆ "!important;
    color:#8fb6d0!important;
}

/* fotos dos dois times */
.gx-faceoff{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr)!important;
    gap:7px!important;
    align-items:center!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}
.gx-squad{
    min-width:0!important;
    overflow:hidden!important;
}
.gx-squad-name{display:none!important}
.gx-avatars{
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    overflow:hidden!important;
    padding:2px 1px!important;
}
.gx-avatar-mini{
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
    margin-right:-5px!important;
    margin-left:0!important;
    font-size:9px!important;
    box-shadow:0 0 0 2px #07121b!important;
}
.gx-squad.b .gx-avatars{justify-content:flex-start!important}
.gx-squad.b .gx-avatar-mini{
    margin-left:0!important;
    margin-right:-5px!important;
}
.gx-vs{
    width:26px!important;
    height:26px!important;
    font-size:7px!important;
}

/* placar e status */
.gx-mini-score{
    display:grid!important;
    justify-items:center!important;
    align-content:center!important;
    gap:3px!important;
    min-width:0!important;
}
.gx-mini-score strong{
    font-size:16px!important;
    line-height:1!important;
    font-weight:1000!important;
    color:#eff8fc!important;
}
.gx-mini-score small{
    max-width:90px!important;
    font-size:7px!important;
    line-height:1!important;
    font-weight:1000!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

/* ações finais */
.gx-mini-footer{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    min-width:0!important;
    margin:0!important;
}
.gx-player-count{display:none!important}
.gx-mini-actions{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
}
.gx-mini-actions form{
    display:flex!important;
    margin:0!important;
}
.gx-mini-btn{
    height:31px!important;
    min-height:31px!important;
    padding:0 9px!important;
    border-radius:6px!important;
    font-size:8px!important;
    font-weight:950!important;
    line-height:1!important;
    white-space:nowrap!important;
}
.gx-control-menu{
    position:relative!important;
    flex:0 0 31px!important;
}
.gx-control-menu>summary{
    width:31px!important;
    height:31px!important;
    font-size:17px!important;
    border-radius:6px!important;
}
.gx-control-popup{
    right:0!important;
    top:36px!important;
    width:176px!important;
    z-index:200!important;
}
.gx-control-popup button{
    height:32px!important;
    font-size:8px!important;
}

/* 1920 / desktop normal */
@media(min-width:1501px){
    .gx-mini-body{grid-template-rows:64px!important}
}

/* 1366-1500: continua em UMA linha */
@media(max-width:1500px) and (min-width:1181px){
    .gx-mini-body{
        grid-template-columns:
            minmax(150px,1fr)
            minmax(100px,.67fr)
            minmax(245px,1.48fr)
            80px
            minmax(150px,.9fr)!important;
        grid-template-rows:62px!important;
        gap:7px!important;
    }
    .gx-avatar-mini{
        width:27px!important;
        height:27px!important;
        flex-basis:27px!important;
    }
    .gx-mini-title strong{font-size:10px!important}
    .gx-mini-title small{font-size:7.5px!important}
    .gx-mini-meta b{font-size:9px!important}
    .gx-mini-btn{font-size:7.5px!important;padding:0 7px!important}
}

/* só começa a reorganizar abaixo de 1180 */
@media(max-width:1180px){
    .gx-mini-body{
        grid-template-columns:
            minmax(145px,1fr)
            minmax(100px,.7fr)
            minmax(225px,1.4fr)
            76px
            minmax(145px,.88fr)!important;
        gap:6px!important;
    }
}
@media(max-width:900px){
    .gx-mini-body{
        grid-template-columns:1fr 1fr!important;
        grid-template-rows:auto!important;
        min-height:0!important;
    }
    .gx-faceoff{grid-column:1/-1!important}
    .gx-mini-footer{justify-content:flex-start!important}
    .gx-mini-actions{justify-content:flex-start!important;flex-wrap:wrap!important}
}
</style>


<style id="gxLobbyUltraHorizontalFinal">
/* =========================================================
   GIGAX - PARTIDA ULTRA HORIZONTAL
   UMA LINHA REAL, SEM SOBRA VERTICAL
   ========================================================= */

/* card enxuto de verdade */
.gx-mini-card{
    min-height:48px!important;
    height:48px!important;
    overflow:visible!important;
    border-radius:8px!important;
}

.gx-mini-body{
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    display:grid!important;
    grid-template-columns:
        minmax(150px,1.05fr)
        minmax(120px,.78fr)
        minmax(285px,1.75fr)
        82px
        minmax(155px,.92fr)!important;
    align-items:center!important;
    gap:12px!important;
    padding:4px 8px!important;
    grid-auto-rows:48px!important;
    overflow:visible!important;
}

.gx-mini-body>*{
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    align-self:center!important;
}

/* bloco inicial */
.gx-mini-top,
.gx-mini-game{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    height:40px!important;
    min-height:40px!important;
}
.gx-mini-mark{
    width:30px!important;
    height:30px!important;
    flex:0 0 30px!important;
    border-radius:7px!important;
    font-size:9px!important;
}
.gx-mini-title{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    height:34px!important;
}
.gx-mini-title strong{
    font-size:10px!important;
    line-height:1!important;
    font-weight:950!important;
    margin:0!important;
}
.gx-mini-title small{
    margin:3px 0 0!important;
    font-size:7px!important;
    line-height:1!important;
}

/* mapa */
.gx-mini-meta{
    height:34px!important;
    display:flex!important;
    align-items:center!important;
}
.gx-mini-meta div{display:none!important}
.gx-mini-meta div:first-child{
    display:block!important;
    width:100%!important;
}
.gx-mini-meta b{
    font-size:9px!important;
    line-height:1!important;
}
.gx-mini-meta b:before{
    content:"◆ "!important;
    color:#8fb6d0!important;
}

/* times - mais espaço horizontal e sem crescer em altura */
.gx-faceoff{
    height:40px!important;
    min-height:40px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)!important;
    gap:8px!important;
    align-items:center!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
}
.gx-squad{
    height:34px!important;
    min-height:34px!important;
    display:flex!important;
    align-items:center!important;
    overflow:hidden!important;
}
.gx-avatars{
    height:32px!important;
    min-height:32px!important;
    display:flex!important;
    align-items:center!important;
    overflow:hidden!important;
    padding:0 2px!important;
}
.gx-avatar-mini{
    width:28px!important;
    height:28px!important;
    flex:0 0 28px!important;
    margin-right:-4px!important;
    margin-left:0!important;
    font-size:8px!important;
}
.gx-squad.b .gx-avatars{
    justify-content:flex-start!important;
}
.gx-squad.b .gx-avatar-mini{
    margin-left:0!important;
    margin-right:-4px!important;
}
.gx-vs{
    width:22px!important;
    height:22px!important;
    font-size:6px!important;
}

/* placar/status */
.gx-mini-score{
    height:36px!important;
    min-height:36px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
}
.gx-mini-score strong{
    font-size:14px!important;
    line-height:1!important;
}
.gx-mini-score small{
    font-size:6.5px!important;
    line-height:1!important;
    max-width:80px!important;
}

/* ações sem quebra */
.gx-mini-footer{
    height:36px!important;
    min-height:36px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
}
.gx-mini-actions{
    height:34px!important;
    min-height:34px!important;
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
}
.gx-mini-actions form{
    height:30px!important;
    margin:0!important;
    display:flex!important;
}
.gx-mini-btn{
    height:30px!important;
    min-height:30px!important;
    padding:0 8px!important;
    font-size:7px!important;
    border-radius:6px!important;
    line-height:1!important;
    white-space:nowrap!important;
}
.gx-control-menu{
    flex:0 0 30px!important;
    height:30px!important;
}
.gx-control-menu>summary{
    width:30px!important;
    height:30px!important;
    font-size:16px!important;
}
.gx-control-popup{
    top:34px!important;
    width:172px!important;
}

/* mata qualquer sobra vertical */
.gx-mini-status,
.gx-player-count,
.gx-squad-name{
    display:none!important;
}
.gx-mini-top,
.gx-mini-meta,
.gx-faceoff,
.gx-mini-score,
.gx-mini-footer,
.gx-mini-actions{
    padding-top:0!important;
    padding-bottom:0!important;
    margin-top:0!important;
    margin-bottom:0!important;
}

/* mais liberdade horizontal em 1920 */
@media(min-width:1600px){
    .gx-mini-body{
        grid-template-columns:
            minmax(165px,1.05fr)
            minmax(130px,.82fr)
            minmax(360px,2fr)
            90px
            minmax(170px,.95fr)!important;
        gap:14px!important;
    }
}

/* 1366-1599 ainda uma linha */
@media(max-width:1599px) and (min-width:1181px){
    .gx-mini-body{
        grid-template-columns:
            minmax(145px,1fr)
            minmax(105px,.72fr)
            minmax(250px,1.55fr)
            76px
            minmax(145px,.86fr)!important;
        gap:8px!important;
    }
    .gx-avatar-mini{
        width:25px!important;
        height:25px!important;
        flex-basis:25px!important;
    }
    .gx-mini-btn{
        padding:0 6px!important;
        font-size:6.5px!important;
    }
}

/* abaixo disso começa responsivo */
@media(max-width:1180px){
    .gx-mini-card{
        height:auto!important;
        min-height:48px!important;
    }
    .gx-mini-body{
        height:auto!important;
        min-height:48px!important;
        grid-template-columns:
            minmax(140px,1fr)
            minmax(95px,.7fr)
            minmax(220px,1.4fr)
            72px
            minmax(135px,.85fr)!important;
        gap:6px!important;
    }
}
</style>


<style id="gxLobbyBalancedFinal">
/* ==========================================================
   GIGAX LOBBY - CARD FINAL EQUILIBRADO
   Uma linha, compacto, mas sem esmagar textos/controles.
   ========================================================== */

/* aproveita melhor a área útil: ranking lateral mais racional */
.gx-lobby-page{
    grid-template-columns:minmax(0,1fr) 270px!important;
    gap:10px!important;
}
.gx-ranking-side{
    height:calc(100vh - 178px)!important;
    min-height:500px!important;
    max-height:650px!important;
}

/* Cabeçalho da seção */
.gx-lobby-head{
    min-height:68px!important;
    padding:10px 13px!important;
}
.gx-lobby-head h2{
    font-size:18px!important;
    line-height:1!important;
}
.gx-lobby-head p{
    margin-top:5px!important;
    font-size:8px!important;
}

/* CARD: uma linha real e com altura suficiente para leitura */
.gx-mini-card{
    height:62px!important;
    min-height:62px!important;
    overflow:visible!important;
    border-radius:8px!important;
}
.gx-mini-body{
    width:100%!important;
    height:62px!important;
    min-height:62px!important;
    display:grid!important;
    grid-template-columns:
        minmax(175px,1.10fr)
        minmax(125px,.75fr)
        minmax(330px,1.85fr)
        96px
        minmax(175px,.95fr)!important;
    grid-template-rows:62px!important;
    align-items:center!important;
    gap:10px!important;
    padding:0 10px!important;
    overflow:visible!important;
}
.gx-mini-body>*{
    min-width:0!important;
    margin:0!important;
    align-self:center!important;
}

/* partida / host */
.gx-mini-top,
.gx-mini-game{
    height:42px!important;
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
}
.gx-mini-mark{
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    border-radius:8px!important;
    font-size:10px!important;
}
.gx-mini-title{
    min-width:0!important;
    height:38px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
}
.gx-mini-title strong{
    display:block!important;
    font-size:11px!important;
    line-height:1.05!important;
    font-weight:950!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.gx-mini-title small{
    display:block!important;
    margin-top:4px!important;
    font-size:8px!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

/* mapa */
.gx-mini-meta{
    height:38px!important;
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
}
.gx-mini-meta div{display:none!important}
.gx-mini-meta div:first-child{
    display:block!important;
    width:100%!important;
}
.gx-mini-meta span{display:none!important}
.gx-mini-meta b{
    display:block!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.gx-mini-meta b:before{
    content:"◆ "!important;
    color:#8db4cf!important;
}

/* times */
.gx-faceoff{
    height:44px!important;
    min-height:44px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}
.gx-squad{
    height:38px!important;
    min-height:38px!important;
    display:flex!important;
    align-items:center!important;
    min-width:0!important;
    overflow:hidden!important;
}
.gx-squad-name{display:none!important}
.gx-avatars{
    width:100%!important;
    height:36px!important;
    min-height:36px!important;
    display:flex!important;
    align-items:center!important;
    overflow:hidden!important;
    padding:0 2px!important;
}
.gx-avatar-mini{
    width:31px!important;
    height:31px!important;
    flex:0 0 31px!important;
    margin:0 -4px 0 0!important;
    font-size:9px!important;
    box-shadow:0 0 0 2px #07121b!important;
}
.gx-squad.b .gx-avatars{
    justify-content:flex-start!important;
}
.gx-squad.b .gx-avatar-mini{
    margin:0 -4px 0 0!important;
}
.gx-vs{
    width:26px!important;
    height:26px!important;
    font-size:7px!important;
}

/* placar e status juntos, sem sobra */
.gx-mini-score{
    height:42px!important;
    min-height:42px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
}
.gx-mini-score strong{
    font-size:16px!important;
    line-height:.9!important;
    font-weight:1000!important;
}
.gx-mini-score small{
    max-width:94px!important;
    font-size:7px!important;
    line-height:1!important;
    font-weight:1000!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}

/* botões */
.gx-mini-footer{
    height:42px!important;
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
}
.gx-player-count,
.gx-mini-status{
    display:none!important;
}
.gx-mini-actions{
    width:100%!important;
    height:34px!important;
    min-height:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    flex-wrap:nowrap!important;
    overflow:visible!important;
}
.gx-mini-actions form{
    display:flex!important;
    height:32px!important;
    margin:0!important;
}
.gx-mini-btn{
    height:32px!important;
    min-height:32px!important;
    padding:0 9px!important;
    border-radius:6px!important;
    font-size:8px!important;
    line-height:1!important;
    font-weight:950!important;
    white-space:nowrap!important;
}
.gx-control-menu{
    position:relative!important;
    flex:0 0 32px!important;
    width:32px!important;
    height:32px!important;
}
.gx-control-menu>summary{
    width:32px!important;
    height:32px!important;
    border-radius:6px!important;
    font-size:17px!important;
}
.gx-control-popup{
    right:0!important;
    top:36px!important;
    width:176px!important;
    z-index:999!important;
}

/* Criar partida: compacto, porém legível */
.gxm-wrap{
    padding:9px!important;
}
.gxm-grid{
    gap:7px!important;
}
.gxm-card{
    min-height:100px!important;
    grid-template-columns:64px minmax(0,1fr)!important;
}
.gxm-cover{
    min-height:98px!important;
}
.gxm-body{
    padding:8px 9px!important;
}
.gxm-card b{
    font-size:10px!important;
}
.gxm-card small{
    font-size:7px!important;
}
.gxm-action{
    height:28px!important;
    font-size:7.5px!important;
}

/* ranking mensal não vira faixa minúscula nem bloco exagerado */
.gx-month-rank{
    min-height:100px!important;
}
.gx-month-rank-body{
    min-height:50px!important;
}

/* desktop 1366–1599: continua UMA LINHA */
@media(max-width:1599px) and (min-width:1181px){
    .gx-lobby-page{
        grid-template-columns:minmax(0,1fr) 250px!important;
    }
    .gx-mini-body{
        grid-template-columns:
            minmax(155px,1fr)
            minmax(105px,.68fr)
            minmax(270px,1.60fr)
            82px
            minmax(150px,.88fr)!important;
        gap:7px!important;
    }
    .gx-avatar-mini{
        width:28px!important;
        height:28px!important;
        flex-basis:28px!important;
    }
    .gx-mini-btn{
        padding:0 7px!important;
        font-size:7.5px!important;
    }
}

/* abaixo de 1180: responsivo sem destruir o desktop */
@media(max-width:1180px){
    .gx-lobby-page{grid-template-columns:1fr!important}
    .gx-ranking-side{
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
    }
}
</style>


<style id="gxLobbyAlignmentFont5Final">
/* ==========================================================
   ALINHAMENTO HORIZONTAL + FONTE +5%
   ========================================================== */

/*
   Remove a folga extra entre a sidebar e o conteúdo do Lobby.
   O respiro esquerdo passa a seguir a mesma medida visual
   usada entre o conteúdo principal e o ranking lateral.
*/
.gx-lobby-shell,
.gx-lobby-content,
.gx-lobby-page{
    margin-left:0!important;
}

.gx-lobby-page{
    gap:10px!important;
}

/* Caso a view esteja recebendo padding excessivo do layout */
main:has(.gx-lobby-page),
.gx-page:has(.gx-lobby-page),
.content:has(.gx-lobby-page),
.main-content:has(.gx-lobby-page){
    padding-left:10px!important;
    padding-right:10px!important;
}

/* Mantém a borda esquerda do lobby com o mesmo respiro do ranking */
.gx-lobby-page{
    width:100%!important;
    max-width:none!important;
}

/* +5% nas fontes específicas do Lobby */
.gx-lobby-head h2{font-size:18.9px!important}
.gx-lobby-head p{font-size:8.4px!important}
.gx-lobby-pill{font-size:7.35px!important}

.gx-mini-title strong{font-size:11.55px!important}
.gx-mini-title small{font-size:8.4px!important}
.gx-mini-meta b{font-size:10.5px!important}
.gx-avatar-mini{font-size:9.45px!important}
.gx-vs{font-size:7.35px!important}
.gx-mini-score strong{font-size:16.8px!important}
.gx-mini-score small{font-size:7.35px!important}
.gx-mini-btn{font-size:8.4px!important}

.gx-ranking-side-head h3{font-size:13.65px!important}
.gx-ranking-side-head p{font-size:7.35px!important}
.gx-rank-columns{font-size:6.825px!important}
.gx-rank-player b{font-size:8.4px!important}
.gx-rank-level,
.gx-rank-xp{font-size:7.35px!important}
.gx-rank-full{font-size:7.35px!important}

.gxm-card b{font-size:10.5px!important}
.gxm-card small{font-size:7.35px!important}
.gxm-action{font-size:7.875px!important}
.gxm-ranking-link{font-size:6.825px!important}

/* títulos das seções */
.gxm-wrap h3,
.gx-month-rank h3{
    font-size:105%!important;
}

/* Mantém UMA linha mesmo com o aumento de fonte */
@media(min-width:1181px){
    .gx-mini-body{
        grid-template-columns:
            minmax(180px,1.10fr)
            minmax(128px,.75fr)
            minmax(325px,1.82fr)
            98px
            minmax(180px,.96fr)!important;
    }
}

/* 1366-1599 */
@media(max-width:1599px) and (min-width:1181px){
    .gx-mini-body{
        grid-template-columns:
            minmax(158px,1fr)
            minmax(108px,.68fr)
            minmax(265px,1.56fr)
            84px
            minmax(152px,.88fr)!important;
        gap:7px!important;
    }
    .gx-mini-title strong{font-size:10.5px!important}
    .gx-mini-title small{font-size:7.875px!important}
    .gx-mini-meta b{font-size:9.45px!important}
    .gx-mini-btn{font-size:7.875px!important}
}
</style>


<style id="gxLobbyFont10Final">
/* GIGAX LOBBY - TIPOGRAFIA +10% / DIMENSÕES PRESERVADAS */
.gx-lobby-head h2{font-size:19.8px!important}
.gx-lobby-head p{font-size:8.8px!important}
.gx-lobby-pill{font-size:7.7px!important}

.gx-mini-title strong{font-size:12.1px!important}
.gx-mini-title small{font-size:8.8px!important}
.gx-mini-meta b{font-size:11px!important}
.gx-avatar-mini{font-size:9.9px!important}
.gx-vs{font-size:7.7px!important}
.gx-mini-score strong{font-size:17.6px!important}
.gx-mini-score small{font-size:7.7px!important}
.gx-mini-btn{font-size:8.8px!important}

.gx-ranking-side-head h3{font-size:14.3px!important}
.gx-ranking-side-head p{font-size:7.7px!important}
.gx-rank-columns{font-size:7.15px!important}
.gx-rank-player b{font-size:8.8px!important}
.gx-rank-level,.gx-rank-xp{font-size:7.7px!important}
.gx-rank-full{font-size:7.7px!important}

.gxm-card b{font-size:11px!important}
.gxm-card small{font-size:7.7px!important}
.gxm-action{font-size:8.25px!important}
.gxm-ranking-link{font-size:7.15px!important}

/* Mantém o card em UMA LINHA mesmo com fonte maior */
@media(max-width:1599px) and (min-width:1181px){
    .gx-mini-title strong{font-size:11px!important}
    .gx-mini-title small{font-size:8.25px!important}
    .gx-mini-meta b{font-size:9.9px!important}
    .gx-mini-btn{font-size:8.25px!important}
}
</style>


<style id="gxLobbyReferenceExactV1Final">
/* GIGAX - referência final: faixa compacta + cards em uma única linha */
.gx-lobby-page{display:grid!important;grid-template-columns:minmax(0,1fr) 300px!important;gap:10px!important;align-items:start!important}
.gx-lobby-main{min-width:0!important;display:block!important}
.gx-lobby-unified{border:1px solid rgba(58,112,145,.38)!important;border-radius:12px!important;background:linear-gradient(135deg,rgba(7,23,34,.98),rgba(5,19,29,.98))!important;overflow:hidden!important;padding:0!important}
.gx-placement{margin:0!important;border:0!important;border-bottom:1px solid rgba(61,111,141,.22)!important;border-radius:0!important;min-height:38px!important;padding:8px 12px!important;background:rgba(5,18,28,.7)!important}
.gxm-wrap{margin:0!important;border:0!important;border-bottom:1px solid rgba(61,111,141,.22)!important;border-radius:0!important;padding:7px 12px!important;background:transparent!important}
.gx-lobby-compact{display:block!important;padding:0 12px 12px!important}
.gx-lobby-head{min-height:70px!important;padding:12px 4px 9px!important;margin:0!important;border:0!important;background:transparent!important}
.gx-lobby-head:after{display:none!important}.gx-lobby-head h2{font-size:20px!important}.gx-lobby-head p{font-size:9px!important}
.gx-lobby-head-icon{width:40px!important;height:40px!important;border-radius:9px!important;font-size:18px!important}
.gx-lobby-counters{gap:7px!important}.gx-lobby-pill{height:27px!important;padding:0 12px!important;font-size:8px!important;border-radius:99px!important}
.gx-mini-grid{display:flex!important;flex-wrap:nowrap!important;gap:10px!important;overflow-x:auto!important;overflow-y:visible!important;padding:6px 0 4px!important;scroll-snap-type:x proximity;scrollbar-width:thin}
.gx-mini-card{position:relative!important;display:block!important;flex:0 0 300px!important;width:300px!important;min-width:300px!important;height:218px!important;min-height:218px!important;padding:0!important;border-radius:11px!important;overflow:visible!important;scroll-snap-align:start;background:linear-gradient(160deg,#0b1e2d,#071621)!important}
.gx-mini-accent{display:none!important}.gx-mini-body{display:flex!important;flex-direction:column!important;gap:0!important;height:100%!important;padding:12px 13px 10px!important;position:relative!important}
.gx-mini-top{display:block!important;min-height:29px!important;padding-right:42px!important}.gx-mini-game{display:block!important}.gx-mini-mark{display:none!important}
.gx-mini-title{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;width:100%!important}.gx-mini-title strong{font-size:12px!important;color:#f5f9ff!important}.gx-mini-title small{font-size:8px!important;color:#9eb2c5!important;white-space:nowrap!important}
.gx-mini-meta,.gx-mini-score,.gx-mini-status{display:none!important}
.gx-faceoff{display:flex!important;flex-direction:column!important;gap:5px!important;align-items:stretch!important;justify-content:center!important;flex:1!important;margin-top:3px!important}
.gx-squad{display:block!important}.gx-squad-name{display:none!important}.gx-avatars{display:flex!important;justify-content:center!important;gap:9px!important;flex-wrap:nowrap!important}
.gx-avatar-mini{width:31px!important;height:31px!important;min-width:31px!important;border-radius:50%!important;font-size:12px!important;border:1px solid #00d98b!important;background:#0a1a26!important}
.gx-vs{order:initial!important;text-align:center!important;font-size:10px!important;font-weight:900!important;color:#fff!important;line-height:16px!important}
.gx-mini-footer{position:static!important;margin-top:auto!important;min-height:29px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0!important;border:0!important}
.gx-player-count{margin-left:auto!important;font-size:10px!important;color:#f2f7fb!important}.gx-player-count:before{content:'♙ ';font-size:11px}
.gx-card-menu{position:absolute!important;top:8px!important;right:8px!important;z-index:30!important}.gx-card-menu summary{width:32px!important;height:32px!important;border:1px solid rgba(65,130,170,.38)!important;border-radius:8px!important;display:grid!important;place-items:center!important;background:#0b2435!important;font-size:18px!important;color:#cfe7f5!important;cursor:pointer!important;list-style:none!important}
.gx-card-menu summary::-webkit-details-marker{display:none!important}.gx-control-popup{right:0!important;left:auto!important;top:37px!important;z-index:100!important}
.gx-mini-footer:after{content:'AGUARDANDO';position:absolute;left:13px;bottom:11px;padding:5px 10px;border-radius:99px;background:#123049;color:#d7ebfa;font-size:8px;font-weight:900;letter-spacing:.02em}
.gx-mini-card.is-live .gx-mini-footer:after{content:'EM ANDAMENTO';background:rgba(0,174,119,.22);color:#25efa8}
.gx-mini-empty{flex:0 0 100%!important;min-height:120px!important}
.gx-load-wrap{display:none!important}
@media(max-width:1180px){.gx-lobby-page{grid-template-columns:1fr!important}.gx-ranking-side{display:none!important}.gx-mini-card{flex-basis:285px!important;width:285px!important;min-width:285px!important}}
</style>


{{-- GIGAX_LOBBY_ALIGNED_MENU_V34_BEGIN --}}
<style id="gxLobbyAlignedMenuV34">
/* V34 - card alinhado, tipografia forte e menu de manutencao flutuante sem quebrar o grid */
.gx-lobby-unified,.gx-lobby-compact,.gx-lobby-unified .gx-mini-grid,.gx-lobby-unified .gx-mini-card{overflow:visible!important}
.gx-lobby-unified .gx-mini-grid{align-items:start!important}
.gx-lobby-unified .gx-mini-card{position:relative!important;isolation:visible!important;min-width:0!important;height:210px!important;min-height:210px!important}
.gx-lobby-unified .gx-mini-body{position:relative!important;display:grid!important;grid-template-rows:32px 1fr 28px!important;height:100%!important;padding:10px 11px!important}
.gx-lobby-unified .gx-mini-top{display:flex!important;align-items:center!important;min-height:32px!important;padding:0 36px 0 0!important;border-bottom:1px solid rgba(95,178,214,.10)!important}
.gx-lobby-unified .gx-mini-game,.gx-lobby-unified .gx-mini-title{display:flex!important;align-items:center!important;width:100%!important;min-width:0!important}
.gx-lobby-unified .gx-mini-title strong{display:flex!important;align-items:baseline!important;gap:5px!important;min-width:0!important;max-width:calc(100% - 34px)!important;margin:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-align:left!important;font-size:12px!important;line-height:1!important;font-weight:1000!important;color:#fff!important;letter-spacing:.01em!important}
.gx-lobby-unified .gx-mini-title strong em{flex:0 0 auto!important;margin:0!important;font-size:9px!important;color:#25dcff!important;font-weight:1000!important}
.gx-lobby-unified .gx-mini-title small{display:block!important;flex:0 0 auto!important;margin-left:auto!important;padding-left:7px!important;font-size:9px!important;line-height:1!important;color:#82d8f5!important;font-weight:1000!important}
.gx-lobby-unified .gx-faceoff{display:grid!important;grid-template-rows:1fr 18px 1fr!important;align-items:center!important;justify-items:stretch!important;gap:1px!important;min-height:0!important;height:auto!important;margin:0!important;padding:7px 0 5px!important}
.gx-lobby-unified .gx-squad{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important}
.gx-lobby-unified .gx-squad-name{display:none!important}
.gx-lobby-unified .gx-avatars{display:grid!important;grid-template-columns:repeat(5,32px)!important;justify-content:center!important;align-items:center!important;gap:7px!important;width:100%!important}
.gx-lobby-unified .gx-avatar-mini{width:32px!important;height:32px!important;min-width:32px!important;flex:0 0 32px!important;border:1px solid #19ee91!important;background:#081b27!important;color:#6dffc0!important;font-size:12px!important;font-weight:1000!important;box-shadow:0 0 0 2px #071620,0 0 11px rgba(25,238,145,.13)!important}
.gx-lobby-unified .gx-vs{display:flex!important;align-items:center!important;justify-content:center!important;height:18px!important;font-size:10px!important;line-height:18px!important;font-weight:1000!important;color:#fff!important;text-shadow:0 0 12px rgba(50,216,255,.28)!important}
.gx-lobby-unified .gx-mini-score{position:static!important;align-self:end!important;justify-self:start!important;display:flex!important;align-items:center!important;margin:0!important}
.gx-lobby-unified .gx-mini-score small{height:24px!important;padding:0 10px!important;font-size:8px!important;line-height:24px!important;font-weight:1000!important;letter-spacing:.02em!important}
.gx-lobby-unified .gx-mini-footer{position:absolute!important;left:11px!important;right:11px!important;bottom:10px!important;height:24px!important;pointer-events:none!important}
.gx-lobby-unified .gx-player-count{right:0!important;bottom:4px!important;font-size:10px!important;line-height:1!important;pointer-events:auto!important}
.gx-lobby-unified .gx-card-menu{position:absolute!important;top:7px!important;right:7px!important;z-index:600!important;pointer-events:auto!important}
.gx-lobby-unified .gx-card-menu>summary{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;padding:0!important;border-radius:8px!important;background:#0b2a3b!important;border:1px solid rgba(49,212,255,.38)!important;color:#70eaff!important;font-size:17px!important;line-height:1!important;box-shadow:none!important}
.gx-lobby-unified .gx-card-menu[open]{z-index:20000!important}
.gx-lobby-unified .gx-card-menu[open]>summary{background:#0d3a3a!important;border-color:#27f39a!important;color:#45f8a7!important;box-shadow:0 0 16px rgba(39,243,154,.18)!important}
.gx-lobby-unified .gx-card-menu .gx-control-popup{position:absolute!important;top:34px!important;right:0!important;left:auto!important;z-index:30000!important;width:205px!important;max-height:none!important;padding:8px!important;overflow:visible!important;border:1px solid rgba(58,192,231,.28)!important;border-radius:10px!important;background:linear-gradient(180deg,#091b27,#06131d)!important;box-shadow:0 20px 50px rgba(0,0,0,.58),0 0 0 1px rgba(31,239,146,.035)!important}
.gx-lobby-unified .gx-card-menu .gx-control-popup b{padding:6px 7px 8px!important;font-size:8px!important;color:#78cde8!important;border-bottom:1px solid rgba(116,186,215,.10)!important}
.gx-lobby-unified .gx-card-menu .gx-control-popup a,.gx-lobby-unified .gx-card-menu .gx-control-popup button{display:flex!important;align-items:center!important;width:100%!important;min-height:32px!important;margin:3px 0!important;padding:0 9px!important;border:1px solid transparent!important;border-radius:7px!important;background:rgba(255,255,255,.025)!important;color:#edf9ff!important;text-decoration:none!important;text-align:left!important;font-size:8.5px!important;font-weight:1000!important;white-space:nowrap!important}
.gx-lobby-unified .gx-card-menu .gx-control-popup a:hover,.gx-lobby-unified .gx-card-menu .gx-control-popup button:hover{background:rgba(51,218,255,.08)!important;border-color:rgba(51,218,255,.15)!important}
.gx-lobby-unified .gx-card-menu .gx-menu-separator{display:block!important;margin:7px 4px 4px!important;padding-top:7px!important;border-top:1px solid rgba(118,183,210,.12)!important;color:#6999ad!important;font-size:7px!important;font-weight:1000!important;letter-spacing:.10em!important}
.gx-lobby-unified .gx-card-menu .finish{color:#ffe27c!important}.gx-lobby-unified .gx-card-menu .cancel{color:#ffb06b!important}.gx-lobby-unified .gx-card-menu .delete{color:#ff7588!important}
/* 5 cards apenas quando cada um ainda fica legivel; abaixo disso reduz colunas sem esmagar */
@media(min-width:1500px){.gx-lobby-unified .gx-mini-grid{grid-template-columns:repeat(5,minmax(220px,1fr))!important}}
@media(min-width:1220px) and (max-width:1499px){.gx-lobby-unified .gx-mini-grid{grid-template-columns:repeat(4,minmax(225px,1fr))!important}}
@media(min-width:940px) and (max-width:1219px){.gx-lobby-unified .gx-mini-grid{grid-template-columns:repeat(3,minmax(225px,1fr))!important}}
@media(max-width:939px) and (min-width:650px){.gx-lobby-unified .gx-mini-grid{grid-template-columns:repeat(2,minmax(230px,1fr))!important}}
@media(max-width:649px){.gx-lobby-unified .gx-mini-grid{grid-template-columns:1fr!important}.gx-lobby-unified .gx-avatars{grid-template-columns:repeat(5,30px)!important;gap:6px!important}.gx-lobby-unified .gx-avatar-mini{width:30px!important;height:30px!important;min-width:30px!important}}
</style>
<script>
document.addEventListener('click', function(e){
  document.querySelectorAll('.gx-card-menu[open]').forEach(function(menu){
    if(!menu.contains(e.target)) menu.removeAttribute('open');
  });
});
document.addEventListener('toggle', function(e){
  if(!e.target.matches || !e.target.matches('.gx-card-menu[open]')) return;
  document.querySelectorAll('.gx-card-menu[open]').forEach(function(menu){ if(menu!==e.target) menu.removeAttribute('open'); });
}, true);
</script>
{{-- GIGAX_LOBBY_ALIGNED_MENU_V34_END --}}



{{-- GIGAX_LOBBY_CLEAN_V45_BEGIN --}}
<style id="gxLobbyCleanV45">
/* V45 CLEAN: card internals use isolated class names to avoid legacy override collisions. */
.gx-lobby-unified .gx-mini-card{box-sizing:border-box!important;overflow:visible!important;min-height:0!important;height:auto!important;padding:0!important}
.gx-lobby-unified .gx-mini-body{box-sizing:border-box!important;display:flex!important;flex-direction:column!important;width:100%!important;height:100%!important;min-height:0!important;padding:10px 11px!important;overflow:visible!important}

/* Header: left / exact center / right */
.gxclean-head{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:8px;width:100%;min-width:0;height:32px;box-sizing:border-box;border-bottom:1px solid rgba(93,174,214,.13);padding:0 0 6px;margin:0 0 7px;overflow:visible}
.gxclean-game,.gxclean-title{display:contents}
.gxclean-title strong{grid-column:1;justify-self:start;min-width:0;max-width:100%;margin:0;padding:0;color:#f7fbff;font-size:12px;font-weight:950;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.gxclean-title strong em{font-style:normal;color:#16d9ff;font-size:10px;font-weight:950;margin-left:4px}
.gxclean-title small{grid-column:2;justify-self:center;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:19px;padding:0 7px;border:1px solid rgba(25,211,255,.40);border-radius:7px;background:rgba(15,141,187,.18);color:#dff9ff;font-size:10px;font-weight:950;line-height:1;white-space:nowrap}
.gxclean-head>.gx-card-menu{grid-column:3;justify-self:end;position:relative!important;inset:auto!important;transform:none!important;margin:0!important;width:30px!important;height:30px!important;z-index:60!important}
.gxclean-head>.gx-card-menu>summary{display:flex!important;align-items:center!important;justify-content:center!important;width:30px!important;height:30px!important;margin:0!important;padding:0!important;border-radius:8px!important}
.gxclean-head>.gx-card-menu .gx-control-popup{position:absolute!important;top:34px!important;right:0!important;left:auto!important;z-index:99999!important}

/* Teams: same columns for A and B; every lower player aligns with upper player. */
.gxclean-faceoff{display:grid;grid-template-rows:auto 18px auto;row-gap:4px;align-items:center;justify-items:center;width:100%;min-width:0;margin:0;padding:5px 0 8px}
.gxclean-squad{display:block;width:100%;min-width:0;margin:0;padding:0}
.gxclean-squad-name{display:none!important}
.gxclean-avatars{display:grid;align-items:center;justify-content:center;width:max-content;max-width:100%;margin:0 auto;padding:0}
.gx-card-standard .gxclean-avatars{grid-template-columns:repeat(5,30px);gap:8px}
.gx-card-8v8 .gxclean-avatars{grid-template-columns:repeat(8,28px);gap:6px}
.gxclean-avatars .gx-avatar-mini{box-sizing:border-box!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;margin:0!important;padding:0!important;border:1.5px solid #00f39a!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;color:#bfffea!important;font-size:13px!important;font-weight:900!important;line-height:1!important;background:#071b27!important}
.gx-card-8v8 .gxclean-avatars .gx-avatar-mini{width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important}
.gxclean-avatars .gx-avatar-mini img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;display:block!important}
.gxclean-vs{display:flex;align-items:center;justify-content:center;width:100%;height:18px;margin:0;color:#fff;font-size:11px;font-weight:950;line-height:1;text-align:center}

/* Footer: one physical row, protected count width. */
.gxclean-footer{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;column-gap:10px;width:100%;min-width:0;height:30px;min-height:30px;box-sizing:border-box;margin-top:auto;padding:0;overflow:hidden;white-space:nowrap}
.gxclean-status{grid-column:1;justify-self:start;display:flex;align-items:center;min-width:0;max-width:100%;margin:0;padding:0}
.gxclean-status>strong{display:none!important}
.gxclean-status>small{display:inline-flex!important;align-items:center!important;max-width:100%;height:24px;margin:0!important;padding:0 10px!important;border-radius:999px!important;background:#113149!important;color:#e9f8ff!important;font-size:9px!important;font-weight:950!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.gxclean-status>small:before{content:'•';color:#27f1ad;margin-right:6px;font-size:12px}
.gx-mini-card.is-live .gxclean-status>small{background:rgba(0,184,124,.20)!important;color:#31f2b2!important}
.gxclean-count{grid-column:2;justify-self:end;display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;width:max-content;min-width:max-content;max-width:none;margin:0;padding:0 1px 0 0;color:#fff;font-size:11px;font-weight:950;line-height:1;white-space:nowrap;overflow:visible}
.gxclean-count:before{content:'👥';display:inline-block;font-size:11px;line-height:1}
.gxclean-count b{display:inline!important;margin:0!important;padding:0!important;white-space:nowrap!important;color:#fff!important;font-size:11px!important;font-weight:950!important;line-height:1!important}

/* 5v5 stays compact; 8v8 grows enough to keep a single row per team. */
.gx-lobby-unified .gx-mini-card.gx-card-standard{min-width:280px!important;width:280px!important;flex:0 0 280px!important}
.gx-lobby-unified .gx-mini-card.gx-card-8v8{min-width:340px!important;width:340px!important;flex:0 0 340px!important}

@media (min-width:1500px){
  .gx-lobby-unified .gx-mini-card.gx-card-standard{min-width:290px!important;width:290px!important;flex-basis:290px!important}
  .gx-lobby-unified .gx-mini-card.gx-card-8v8{min-width:350px!important;width:350px!important;flex-basis:350px!important}
}
@media (max-width:760px){
  .gx-lobby-unified .gx-mini-card.gx-card-standard,.gx-lobby-unified .gx-mini-card.gx-card-8v8{width:100%!important;min-width:0!important;flex:1 1 100%!important}
  .gx-card-8v8 .gxclean-avatars{grid-template-columns:repeat(8,25px);gap:4px}
  .gx-card-8v8 .gxclean-avatars .gx-avatar-mini{width:25px!important;height:25px!important;min-width:25px!important;min-height:25px!important}
}
</style>
{{-- GIGAX_LOBBY_CLEAN_V45_END --}}



<style id="gxLobbyCleanFinalV17">
/* =========================================================
   GIGAX LOBBY V17 CLEAN FINAL
   Uma unica regra final de geometria para evitar conflitos.
   ========================================================= */

.gx-lobby-unified{
    --gx-edge:10px;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
}

/* Cabeçalho e cards começam no MESMO eixo */
.gx-lobby-head{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:8px var(--gx-edge) 2px!important;
    box-sizing:border-box!important;
}
.gx-lobby-head-left{
    margin:0!important;
    padding:0!important;
}
.gx-lobby-toolbar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0 var(--gx-edge)!important;
    box-sizing:border-box!important;
    position:relative!important;
    z-index:2!important;
}
.gx-lobby-compact{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:6px var(--gx-edge) 10px!important;
    box-sizing:border-box!important;
    position:relative!important;
    z-index:1!important;
}

/* Cards: dois lado a lado, próximos, sem sobreposição */
@media (min-width:1221px){
    .gx-lobby-unified .gx-mini-grid{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0!important;
        padding:0!important;
        box-sizing:border-box!important;
        align-items:stretch!important;
        justify-content:start!important;
    }
    .gx-lobby-unified .gx-mini-card{
        position:relative!important;
        inset:auto!important;
        transform:none!important;
        float:none!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:0!important;
        box-sizing:border-box!important;
        overflow:hidden!important;
    }
}
@media (max-width:1220px){
    .gx-lobby-unified .gx-mini-grid{
        display:grid!important;
        grid-template-columns:minmax(0,1fr)!important;
        gap:8px!important;
    }
}

/* Centro exato para qualquer modo de 1x1 a 8x8 */
.gx-lobby-unified .gx-mini-body,
.gx-lobby-unified .gx-faceoff,
.gx-lobby-unified .gx-squad{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
}
.gx-lobby-unified .gx-faceoff{
    justify-items:center!important;
    align-items:center!important;
}
.gx-lobby-unified .gx-squad{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
}
.gx-lobby-unified .gx-avatars{
    --gx-slot:30px;
    --gx-gap:6px;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;
    align-items:center!important;
    gap:var(--gx-gap)!important;
    width:clamp(
        calc((var(--gx-slot) * 5) + (var(--gx-gap) * 4)),
        100%,
        calc((var(--gx-slot) * 8) + (var(--gx-gap) * 7))
    )!important;
    min-width:calc((var(--gx-slot) * 5) + (var(--gx-gap) * 4))!important;
    max-width:calc((var(--gx-slot) * 8) + (var(--gx-gap) * 7))!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
}
.gx-lobby-unified .gx-avatar-mini{
    width:var(--gx-slot)!important;
    height:var(--gx-slot)!important;
    min-width:var(--gx-slot)!important;
    max-width:var(--gx-slot)!important;
    flex:0 0 var(--gx-slot)!important;
    margin:0!important;
}
.gx-lobby-unified .gx-vs{
    justify-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
}
</style>




{{-- GIGAX_LOBBY_GRID_V52_BEGIN --}}
<style id="gxLobbyGridV52">
/* Somente o grid/cartoes de partidas. Ranking PUG + Modalidades permanecem intactos. */
.gx-lobby-unified .gx-mini-grid{display:grid!important;grid-template-columns:repeat(3,minmax(250px,1fr))!important;gap:10px!important;overflow:visible!important;padding:0!important}
.gx-lobby-unified .gx-mini-card,.gx-lobby-unified .gx-mini-card.gx-card-standard,.gx-lobby-unified .gx-mini-card.gx-card-8v8{width:100%!important;min-width:0!important;max-width:none!important;min-height:0!important;height:auto!important;flex:none!important;border:1px solid rgba(71,126,160,.28)!important;border-radius:10px!important;background:linear-gradient(180deg,#081723 0%,#06121c 100%)!important;box-shadow:none!important;overflow:visible!important}
.gx-lobby-unified .gx-mini-body{padding:8px 10px 9px!important}
.gxclean-head{height:27px!important;margin-bottom:6px!important;padding-bottom:5px!important;border-bottom:1px solid rgba(83,144,177,.12)!important}
.gxclean-title strong{font-size:9px!important}.gxclean-title strong em{font-size:8px!important}.gxclean-title small{font-size:8px!important;height:18px!important;min-width:30px!important}
.gx-mini-meta{display:none!important}
.gxclean-faceoff{display:grid!important;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;grid-template-rows:auto!important;column-gap:5px!important;align-items:start!important;padding:5px 0 7px!important}
.gxclean-squad{width:100%!important;min-width:0!important}
.gxclean-squad-name{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;margin:0 0 6px!important;min-height:31px!important;text-align:center!important}
.gxclean-squad-name span:first-child{display:block!important;max-width:100%!important;color:#f4f9fd!important;font-size:9px!important;font-weight:950!important;line-height:1.05!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.gxclean-squad-name span:last-child{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:25px!important;height:16px!important;padding:0 5px!important;border-radius:5px!important;background:#0b3b66!important;color:#8ed6ff!important;font-size:8px!important;font-weight:950!important}
.gxclean-b .gxclean-squad-name span:last-child{background:#66320b!important;color:#ffc276!important}
.gxclean-vs{grid-column:2!important;align-self:center!important;width:24px!important;height:100%!important;min-height:70px!important;color:#7da0b8!important;font-size:9px!important;font-weight:1000!important}
.gxclean-a{grid-column:1!important}.gxclean-b{grid-column:3!important}
.gxclean-avatars.gx-player-list{display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:3px!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
.gx-player-row{display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;align-items:center!important;gap:5px!important;width:100%!important;min-width:0!important;height:19px!important;margin:0!important}
.gx-player-row .gx-avatar-mini,.gx-card-8v8 .gx-player-row .gx-avatar-mini{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;border-width:1px!important;font-size:8px!important;background:#0a1a26!important}
.gx-player-name{display:block!important;min-width:0!important;color:#edf6fb!important;font-size:8px!important;font-weight:750!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:left!important}
.gx-player-empty .gx-avatar-mini{border-color:rgba(88,139,166,.25)!important;color:#55788d!important;background:#07141d!important}.gx-player-empty .gx-player-name{color:#668397!important}
.gxclean-footer{min-height:27px!important;height:27px!important;padding-top:4px!important;border-top:1px solid rgba(83,144,177,.10)!important}
.gxclean-footer .gxclean-status small{height:20px!important;min-width:0!important;padding:0 7px!important;font-size:7px!important;background:rgba(0,239,123,.08)!important;color:#28efa0!important}
.gxclean-footer .gxclean-count{font-size:8px!important}.gxclean-footer .gxclean-count b{font-size:8px!important}
.gxclean-footer .gx-report-v21,.gxclean-footer .gx-direct-delete-v16{height:20px!important;min-width:0!important;padding:0 6px!important;font-size:6.5px!important}
@media(max-width:1380px){.gx-lobby-unified .gx-mini-grid{grid-template-columns:repeat(2,minmax(250px,1fr))!important}}
@media(max-width:850px){.gx-lobby-unified .gx-mini-grid{grid-template-columns:1fr!important}}
</style>
{{-- GIGAX_LOBBY_GRID_V52_END --}}

{{-- GIGAX_DIRECT_DELETE_V16_SCRIPT --}}
<style>
.gx-direct-delete-v16{margin-left:7px;height:24px;padding:0 9px;border:1px solid rgba(255,88,108,.38);border-radius:7px;background:rgba(105,20,34,.42);color:#ff8b9a;font-size:7px;font-weight:1000;cursor:pointer;white-space:nowrap}.gx-direct-delete-v16:hover{background:rgba(145,24,43,.62);color:#fff}
</style>
<script>
document.addEventListener('click',async function(e){const btn=e.target.closest('.gx-direct-delete-v16');if(!btn)return;e.preventDefault();const id=Number(btn.dataset.matchId||0);if(!id)return;if(!confirm('Cancelar este lobby? Ele ainda não virou uma partida e não gerará resultado.'))return;btn.disabled=true;try{const res=await fetch(`/gigax-modes/matches/${id}/cancel-lobby`,{method:'POST',credentials:'same-origin',headers:{'Accept':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]')?.content||'','X-Requested-With':'XMLHttpRequest'}});const data=await res.json().catch(()=>({}));if(!res.ok||!data.success)throw new Error(data.message||'Não foi possível cancelar o lobby.');location.reload();}catch(err){alert(err.message||'Erro ao cancelar lobby.');btn.disabled=false;}});
</script>
<style id="gxRankingModalidadesV17Css">
.gx-r17-main-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:8px;border-bottom:1px solid rgba(116,166,219,.13)}.gx-r17-main-tabs button,.gx-r17-mode-tabs button{border:1px solid rgba(116,166,219,.18);border-radius:6px;background:#091728;color:#7890aa;font-weight:950;cursor:pointer}.gx-r17-main-tabs button{height:30px;font-size:9px}.gx-r17-main-tabs button.is-active,.gx-r17-mode-tabs button.is-active{border-color:rgba(0,239,123,.55);background:rgba(0,239,123,.10);color:#eafff4}.gx-r17-mode-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:7px 8px}.gx-r17-mode-tabs button{height:24px;font-size:7px}.gx-r17-mode-head{display:flex;align-items:center;justify-content:space-between;padding:5px 9px 2px}.gx-r17-mode-head b{font-size:9px;color:#eaf7ff}.gx-r17-mode-head small{font-size:7px;color:#00d98b}.gx-r17-seal{margin:7px 8px;padding:7px;border:1px solid rgba(0,217,139,.18);border-radius:7px;background:rgba(0,217,139,.05);color:#76bfa5;text-align:center;font-size:6.5px;font-weight:900}.gx-r17 [hidden]{display:none!important}
</style>
<script id="gxRankingModalidadesV17Js">(function(){var r=document.getElementById('gxRankFx');if(!r)return;var sub=document.getElementById('gxR17Subtitle');r.querySelectorAll('[data-r17-main]').forEach(function(b){b.onclick=function(){r.querySelectorAll('[data-r17-main]').forEach(x=>x.classList.remove('is-active'));b.classList.add('is-active');var v=b.dataset.r17Main;r.querySelectorAll('[data-r17-panel]').forEach(p=>p.hidden=p.dataset.r17Panel!==v);if(sub)sub.textContent=v==='pug'?'PUG • Skill competitivo':'Salas fechadas • ranking independente';}});r.querySelectorAll('[data-r17-mode]').forEach(function(b){b.onclick=function(){r.querySelectorAll('[data-r17-mode]').forEach(x=>x.classList.remove('is-active'));b.classList.add('is-active');r.querySelectorAll('[data-r17-list]').forEach(x=>x.hidden=x.dataset.r17List!==b.dataset.r17Mode);}});})();</script>
<!-- GIGAX_APAGAR_ALINHADO_V18_BEGIN -->
<style id="gxApagarAlinhadoV18">
/* Mantem AGUARDANDO | APAGAR | jogadores na MESMA linha. */
.gxclean-footer{display:flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:7px!important;width:100%!important;min-width:0!important}
.gxclean-footer .gxclean-status{flex:0 0 auto!important;margin:0!important}
.gxclean-footer .gxclean-status small{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:24px!important;min-width:86px!important;padding:0 10px!important;box-sizing:border-box!important;border-radius:999px!important;white-space:nowrap!important}
.gxclean-footer .gx-direct-delete-v16{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;width:auto!important;min-width:86px!important;max-width:none!important;height:24px!important;margin:0!important;padding:0 10px!important;box-sizing:border-box!important;border-radius:999px!important;font-size:7px!important;line-height:1!important;white-space:nowrap!important}
.gxclean-footer .gxclean-count{flex:0 0 auto!important;margin-left:auto!important;white-space:nowrap!important}
</style>
<!-- GIGAX_APAGAR_ALINHADO_V18_END -->
@endsection

@push('scripts')

<script id="gxV54ExactLobbyJs">
(function(){
 if(window.GXV54ExactLobby)return; window.GXV54ExactLobby=true;
 const PAGE=6;
 function slots(box,count){if(!box)return;count=Math.max(0,Math.min(10,Number(count)||0));box.innerHTML='';for(let i=0;i<10;i++){const e=document.createElement('i');e.className='gx-v53-slot'+(i<count?' on':'');box.appendChild(e)}}
 function setQueue(mode,count){const q=document.querySelector('.gx-v53-queue[data-qmode="'+mode+'"]');if(!q)return;slots(q.querySelector('.gx-v53-slots'),count);const c=q.querySelector('.gx-v53-count');if(c)c.textContent=Math.max(0,Math.min(10,Number(count)||0))+'/10'}
 async function refreshQueues(){try{const r=await fetch('/queue/distribution',{headers:{Accept:'application/json','X-Requested-With':'XMLHttpRequest'},credentials:'same-origin',cache:'no-store'});if(!r.ok)return;const j=await r.json(),d=j.data||j;setQueue('casual',d.casual??d.play??0);setQueue('advanced',d.advanced??d.premier??0);setQueue('profissional',d.profissional??d.professional??d.champions??0)}catch(e){}}
 function pagination(){const grid=document.getElementById('gxMatchGrid');if(!grid)return;const cards=[...grid.querySelectorAll('[data-match-card]')];document.querySelectorAll('.gx-v54-pagination').forEach(x=>x.remove());if(cards.length<=PAGE){cards.forEach(c=>c.hidden=false);return}let page=1,pages=Math.ceil(cards.length/PAGE),nav=document.createElement('div');nav.className='gx-v54-pagination';function draw(){cards.forEach((c,i)=>c.hidden=!(i>=(page-1)*PAGE&&i<page*PAGE));nav.innerHTML='';for(let n=1;n<=pages;n++){const b=document.createElement('button');b.type='button';b.className='gx-v54-page'+(n===page?' is-active':'');b.textContent=n;b.onclick=()=>{page=n;draw()};nav.appendChild(b)}}grid.after(nav);draw()}
 function forceModes(){const p=document.querySelector('[data-r17-panel="modes"]');if(p){p.hidden=false;p.style.display='block'}}
 function init(){document.querySelectorAll('.gx-v53-queue').forEach(q=>slots(q.querySelector('.gx-v53-slots'),0));forceModes();refreshQueues();pagination();setInterval(refreshQueues,3000)}
 if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',init);else init();
})();
</script>

<script>
(() => {
    const root = document.getElementById('gxLobbyMatches');
    const button = document.getElementById('gxLoadMoreMatches');
    if (!root || !button) return;
    const pageSize = Number(root.dataset.pageSize || 12);
    const cards = Array.from(root.querySelectorAll('[data-match-card]'));
    let visible = pageSize;
    button.addEventListener('click', () => {
        visible += pageSize;
        cards.forEach((card, index) => card.hidden = index >= visible);
        if (visible >= cards.length) button.closest('.gx-load-wrap')?.remove();
    });
})();
</script>

<script>
(() => {
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}';

    async function adminRequest(url, method, payload = {}) {
        const response = await fetch(url, {
            method,
            credentials: 'same-origin',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(payload)
        });

        const data = await response.json().catch(() => ({}));

        if (!response.ok || data.success === false) {
            throw new Error(data.message || `HTTP ${response.status}`);
        }

        return data;
    }

    // GIGAX_MATCH_INTEGRITY_V14 - host pode cancelar a própria sala enquanto aguarda.
    window.gxHostCancel = async (matchId) => {
        if (!confirm(`Cancelar a sua sala #${matchId}?\n\nEnquanto estiver AGUARDANDO, ela será encerrada sem vitória, derrota ou pontos.`)) return;
        try {
            const data = await adminRequest(`/lobby/${matchId}/close`, 'POST');
            alert(data.message || 'Sala cancelada.');
            location.reload();
        } catch (error) {
            alert(error.message || 'Erro ao cancelar sala.');
        }
    };

    window.gxAdminFinish = async (matchId) => {
        const winner = prompt(
            `ENCERRAR PARTIDA #${matchId}\n\nDigite 1 para TIME A ou 2 para TIME B vencedor:`
        );

        if (winner !== '1' && winner !== '2') return;

        if (!confirm(`Confirmar encerramento da partida #${matchId} com TIME ${winner === '1' ? 'A' : 'B'} vencedor?\n\nA comunicação da partida também será encerrada.`)) return;

        try {
            const data = await adminRequest(`/admin/matches/${matchId}/end`, 'POST', {
                winning_team: Number(winner)
            });
            alert(data.message || 'Partida encerrada.');
            location.reload();
        } catch (error) {
            alert(error.message || 'Erro ao encerrar partida.');
        }
    };

    window.gxAdminCancel = async (matchId) => {
        if (!confirm(`CANCELAR a partida #${matchId}?\n\nO HUB será encerrado e a comunicação da partida será limpa automaticamente.`)) return;

        try {
            const data = await adminRequest(`/admin/matches/${matchId}/cancel`, 'POST');
            alert(data.message || 'Partida cancelada.');
            location.reload();
        } catch (error) {
            alert(error.message || 'Erro ao cancelar partida.');
        }
    };


})();
</script>

@endpush


{{-- GIGAX_LOBBY_MODAL_RUNTIME_V3_BEGIN --}}
<script id="gxLobbyModalRuntimeV3">
(() => {
    if (window.__gxLobbyModalRuntimeV3) return;
    window.__gxLobbyModalRuntimeV3 = true;

    let snoozeUntil = 0;
    let snoozedOverlay = null;
    let reopenTimer = null;

    const norm = (v) => String(v || '').trim().toLowerCase();

    function teamCapacityFromText(text) {
        const t = norm(text).replace(/\s+/g, '');

        if (/\bmodox1\b|\b1x1\b/.test(t)) return 1;
        if (/\bmodox2\b|\b2x2\b/.test(t)) return 2;
        if (/\bmodox8\b|\b8x8\b/.test(t)) return 8;

        // Todos os modos 5x5 conhecidos
        if (/5x5|casualx5|acessox5|seriebx5|serieax5|treino5lx5|sniperx5/.test(t)) return 5;

        return null;
    }

    function lobbyModalRoot() {
        const nodes = [...document.querySelectorAll('body *')];
        const title = nodes.find(el => {
            const tx = (el.textContent || '').trim().toUpperCase();
            return tx === 'LOBBY DA PARTIDA';
        });

        if (!title) return null;

        let el = title;
        while (el && el !== document.body) {
            const cs = getComputedStyle(el);
            const r = el.getBoundingClientRect();

            if (
                cs.position === 'fixed' &&
                r.width >= window.innerWidth * .75 &&
                r.height >= window.innerHeight * .75
            ) return el;

            el = el.parentElement;
        }

        // fallback: procura ancestral que contenha o card e esteja acima da pagina
        el = title.parentElement;
        while (el && el.parentElement !== document.body) el = el.parentElement;
        return el;
    }

    function directChildrenWithText(root, text) {
        return [...root.querySelectorAll('*')].filter(el =>
            (el.textContent || '').trim().toUpperCase() === text
        );
    }

    function teamBoxFromLabel(label) {
        let el = label;
        while (el && el.parentElement) {
            const text = (el.textContent || '').toUpperCase();
            if (text.includes('TIME A') || text.includes('TIME B')) {
                const vagaCount = [...el.querySelectorAll('*')]
                    .filter(n => (n.textContent || '').trim().toUpperCase() === 'VAGA').length;
                if (vagaCount || /\/\d+/.test(text)) return el;
            }
            el = el.parentElement;
        }
        return null;
    }

    function fixTeamBox(box, capacity) {
        if (!box || !capacity) return;

        // Corrige o contador 1/5, 0/5 etc.
        [...box.querySelectorAll('*')].forEach(el => {
            if (el.children.length) return;
            const tx = (el.textContent || '').trim();
            if (/^\d+\s*\/\s*\d+$/.test(tx)) {
                const current = parseInt(tx.split('/')[0], 10) || 0;
                el.textContent = `${Math.min(current, capacity)}/${capacity}`;
            }
        });

        // Identifica as linhas "Vaga / Aguardando".
        const vagaLabels = [...box.querySelectorAll('*')].filter(el =>
            (el.textContent || '').trim().toUpperCase() === 'VAGA'
        );

        const rows = [];
        vagaLabels.forEach(label => {
            let row = label.parentElement;
            while (
                row &&
                row !== box &&
                !((row.textContent || '').toUpperCase().includes('AGUARDANDO'))
            ) {
                row = row.parentElement;
            }
            if (row && row !== box && !rows.includes(row)) rows.push(row);
        });

        // Quantos jogadores reais existem no time?
        const counter = [...box.querySelectorAll('*')].find(el =>
            el.children.length === 0 &&
            /^\d+\s*\/\s*\d+$/.test((el.textContent || '').trim())
        );
        let occupied = 0;
        if (counter) occupied = parseInt((counter.textContent || '0').split('/')[0], 10) || 0;

        const vacanciesAllowed = Math.max(0, capacity - occupied);

        rows.forEach((row, index) => {
            row.style.display = index < vacanciesAllowed ? '' : 'none';
        });
    }

    function normalizeLobbyModal() {
        const overlay = lobbyModalRoot();
        if (!overlay) return;

        const text = overlay.textContent || '';
        const capacity = teamCapacityFromText(text);
        if (!capacity) return;

        const labelsA = directChildrenWithText(overlay, 'TIME A');
        const labelsB = directChildrenWithText(overlay, 'TIME B');

        if (labelsA[0]) fixTeamBox(teamBoxFromLabel(labelsA[0]), capacity);
        if (labelsB[0]) fixTeamBox(teamBoxFromLabel(labelsB[0]), capacity);
    }

    function overlayIsVisible(overlay) {
        if (!overlay) return false;
        const cs = getComputedStyle(overlay);
        return cs.display !== 'none' && cs.visibility !== 'hidden' && cs.opacity !== '0';
    }

    function hideOverlayFor5Seconds(overlay) {
        if (!overlay) return;

        snoozeUntil = Date.now() + 5000;
        snoozedOverlay = overlay;

        overlay.dataset.gxSnoozed = '1';
        overlay.style.setProperty('display', 'none', 'important');
        document.documentElement.style.overflow = '';
        document.body.style.overflow = '';

        clearTimeout(reopenTimer);
        reopenTimer = setTimeout(() => {
            if (!snoozedOverlay) return;
            snoozedOverlay.style.removeProperty('display');
            delete snoozedOverlay.dataset.gxSnoozed;
            snoozeUntil = 0;
            normalizeLobbyModal();
        }, 5050);
    }

    // Clique realmente FORA do card: libera o site por 5 segundos.
    document.addEventListener('click', (event) => {
        const overlay = lobbyModalRoot();
        if (!overlay || event.target !== overlay) return;

        event.preventDefault();
        event.stopPropagation();
        hideOverlayFor5Seconds(overlay);
    }, true);

    // Se o polling tentar reabrir durante os 5 segundos, mantem escondido.
    const observer = new MutationObserver(() => {
        const overlay = lobbyModalRoot();

        if (overlay && Date.now() < snoozeUntil) {
            snoozedOverlay = overlay;
            overlay.dataset.gxSnoozed = '1';
            overlay.style.setProperty('display', 'none', 'important');
            document.documentElement.style.overflow = '';
            document.body.style.overflow = '';
        }

        normalizeLobbyModal();
    });

    observer.observe(document.documentElement, {
        subtree: true,
        childList: true,
        attributes: true,
        attributeFilter: ['class', 'style', 'aria-hidden']
    });

    setInterval(normalizeLobbyModal, 1200);
    document.addEventListener('DOMContentLoaded', normalizeLobbyModal);
    normalizeLobbyModal();
})();
</script>
{{-- GIGAX_LOBBY_MODAL_RUNTIME_V3_END --}}

{{-- GIGAX_OPEN_MATCH_MODAL_CARD_V1_SCRIPT --}}
<script>
(() => {
    if (window.__gigaxOpenMatchModalCardV1) return;
    window.__gigaxOpenMatchModalCardV1 = true;

    document.addEventListener('click', event => {
        const button = event.target.closest('.gx-open-match-lobby-modal');
        if (!button) return;

        event.preventDefault();
        event.stopPropagation();

        const id = Number(button.dataset.matchId || 0);
        if (!id) return;

        if (typeof window.gigaxOpenMatchLobby === 'function') {
            const opened = window.gigaxOpenMatchLobby(id);
            if (opened !== false) return;
        } else {
            window.location.href = `/lobby/${id}`;
        }
    });
})();
</script>
<style id="gxLobbyUnifiedHorizontalV1">
/* GIGAX: NIVELAMENTO + ACOES + CABECALHO + PARTIDAS EM UM UNICO PAINEL */
.gx-lobby-unified{
    display:grid!important;
    gap:0!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    border:1px solid rgba(70,140,180,.22)!important;
    border-radius:11px!important;
    background:linear-gradient(180deg,rgba(9,24,35,.96),rgba(5,15,23,.98))!important;
}
.gx-lobby-unified>.gx-placement,
.gx-lobby-unified>.gxm-wrap,
.gx-lobby-unified>.gx-lobby-compact,
.gx-lobby-unified .gx-lobby-head{
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
}
.gx-lobby-unified>.gx-placement{padding:7px 11px!important;min-height:34px!important;border-bottom:1px solid rgba(120,170,205,.10)!important}
.gx-lobby-unified>.gxm-wrap{padding:7px 11px!important;border-bottom:1px solid rgba(120,170,205,.10)!important}
.gx-lobby-unified>.gx-lobby-compact{display:grid!important;gap:0!important;padding:0 10px 10px!important}
.gx-lobby-unified .gx-lobby-head{min-height:54px!important;padding:8px 2px!important}

/* todas as partidas seguem lado a lado em uma unica linha */
.gx-lobby-unified .gx-mini-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    gap:7px!important;
    width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:1px 1px 6px!important;
    scroll-behavior:smooth;
    scrollbar-width:thin;
}
.gx-lobby-unified .gx-mini-card{
    flex:0 0 610px!important;
    width:610px!important;
    max-width:610px!important;
    min-width:610px!important;
}
.gx-lobby-unified .gx-mini-body{
    grid-template-columns:minmax(130px,1fr) minmax(90px,.72fr) minmax(210px,1.5fr) 72px minmax(115px,.85fr)!important;
    gap:6px!important;
}
.gx-lobby-unified .gx-load-wrap{padding-top:5px!important}
@media(max-width:760px){
    .gx-lobby-unified .gx-mini-card{flex-basis:540px!important;width:540px!important;max-width:540px!important;min-width:540px!important}
}
</style>


<style id="gxLobbyReferenceCardsV20">
/* GIGAX - cards horizontais conforme referencia 16/09/2026 */
.gx-lobby-unified .gx-mini-grid{
    display:flex!important; flex-wrap:nowrap!important; gap:10px!important;
    overflow-x:auto!important; overflow-y:visible!important; padding:2px 2px 10px!important;
    scroll-snap-type:x proximity; scrollbar-width:thin;
}
.gx-lobby-unified .gx-mini-card{
    position:relative!important; flex:0 0 300px!important; width:300px!important;
    min-width:300px!important; max-width:300px!important; min-height:220px!important;
    border-radius:12px!important; overflow:visible!important; scroll-snap-align:start;
    background:linear-gradient(180deg,#0b1b28 0%,#07141e 100%)!important;
    border:1px solid rgba(91,150,185,.22)!important;
}
.gx-lobby-unified .gx-mini-card:hover{border-color:rgba(36,245,111,.30)!important}
.gx-lobby-unified .gx-mini-body{
    display:grid!important; grid-template-columns:1fr!important;
    grid-template-rows:auto auto 1fr auto!important; gap:7px!important;
    min-height:218px!important; padding:12px 13px 11px!important;
}
.gx-lobby-unified .gx-mini-top{display:block!important;padding-right:36px!important}
.gx-lobby-unified .gx-mini-game{display:block!important}
.gx-lobby-unified .gx-mini-mark{display:none!important}
.gx-lobby-unified .gx-mini-title strong{font-size:13px!important;line-height:1.1!important;color:#f4f9fc!important}
.gx-lobby-unified .gx-mini-title small{font-size:8px!important;margin-top:4px!important;color:#7992a5!important}
.gx-lobby-unified .gx-mini-status{display:none!important}
.gx-lobby-unified .gx-mini-meta{position:absolute!important;top:13px!important;right:50px!important;max-width:135px!important}
.gx-lobby-unified .gx-mini-meta div{display:none!important}
.gx-lobby-unified .gx-mini-meta div:first-child{display:block!important}
.gx-lobby-unified .gx-mini-meta b{font-size:9px!important;color:#8da9bc!important;text-align:right!important}
.gx-lobby-unified .gx-mini-meta b:before{content:"5v5 • "!important;color:#8da9bc!important}
.gx-lobby-unified .gx-faceoff{
    display:grid!important; grid-template-columns:1fr!important; grid-template-rows:auto 18px auto!important;
    gap:4px!important; align-items:center!important; padding:4px 0!important; min-height:106px!important;
}
.gx-lobby-unified .gx-squad-name{display:none!important}
.gx-lobby-unified .gx-avatars{display:flex!important;justify-content:center!important;gap:7px!important;overflow:visible!important;padding:1px!important}
.gx-lobby-unified .gx-avatar-mini{
    width:34px!important;height:34px!important;flex:0 0 34px!important;margin:0!important;
    border:1px solid rgba(38,240,130,.72)!important;box-shadow:none!important;background:#0a1721!important;
}
.gx-lobby-unified .gx-vs{width:auto!important;height:auto!important;font-size:10px!important;font-weight:1000!important;color:#f2f7fb!important}
.gx-lobby-unified .gx-mini-score{
    position:absolute!important;left:13px!important;bottom:12px!important;display:flex!important;
    align-items:center!important;justify-content:flex-start!important;min-width:0!important;
}
.gx-lobby-unified .gx-mini-score strong{display:none!important}
.gx-lobby-unified .gx-mini-score small{
    display:inline-flex!important;align-items:center!important;height:24px!important;padding:0 10px!important;
    border-radius:999px!important;background:#10293a!important;color:#dceaf3!important;font-size:8px!important;
    font-weight:1000!important;max-width:none!important;
}
.gx-lobby-unified .gx-mini-score small:before{content:"●";font-size:7px;margin-right:6px;color:#8eabc0}
.gx-lobby-unified .gx-mini-card.is-live .gx-mini-score small{background:rgba(22,190,126,.14)!important;color:#46efa4!important}
.gx-lobby-unified .gx-mini-card.is-live .gx-mini-score small:before{color:#22e690}
.gx-lobby-unified .gx-mini-footer{position:static!important;display:block!important;margin:0!important}
.gx-lobby-unified .gx-player-count{
    display:block!important;position:absolute!important;right:13px!important;bottom:16px!important;
    color:#e8f2f8!important;font-size:10px!important;font-weight:900!important;
}
.gx-lobby-unified .gx-player-count:before{content:"♙ ";color:#b8d0df}
.gx-lobby-unified .gx-card-menu{position:absolute!important;top:8px!important;right:8px!important;z-index:30!important;flex:none!important}
.gx-lobby-unified .gx-card-menu>summary{
    display:grid!important;place-items:center!important;width:32px!important;height:32px!important;border-radius:8px!important;
    border:1px solid rgba(91,150,185,.22)!important;background:#0b2232!important;color:#dcecf6!important;font-size:18px!important;cursor:pointer!important;
}
.gx-lobby-unified .gx-card-menu .gx-control-popup{top:36px!important;right:0!important;width:190px!important;z-index:500!important}
.gx-lobby-unified .gx-card-menu .gx-control-popup a,
.gx-lobby-unified .gx-card-menu .gx-control-popup button{
    display:flex!important;align-items:center!important;width:100%!important;min-height:32px!important;padding:7px 9px!important;
    border:0!important;border-radius:6px!important;background:transparent!important;color:#dbe9f2!important;text-decoration:none!important;
    font-size:8px!important;font-weight:900!important;text-align:left!important;cursor:pointer!important;
}
.gx-lobby-unified .gx-card-menu .gx-control-popup a:hover,
.gx-lobby-unified .gx-card-menu .gx-control-popup button:hover{background:rgba(255,255,255,.05)!important}
.gx-lobby-unified .gx-card-menu .gx-control-popup form{margin:0!important;width:100%!important}
.gx-lobby-unified .gx-menu-separator{display:block!important;margin:5px 0 3px!important;padding:5px 8px 3px!important;border-top:1px solid rgba(255,255,255,.08)!important;color:#6f8a9d!important;font-size:7px!important;font-weight:1000!important;letter-spacing:.08em!important}
.gx-lobby-unified .gx-card-menu .finish{color:#72dfff!important}.gx-lobby-unified .gx-card-menu .cancel{color:#ffc56a!important}.gx-lobby-unified .gx-card-menu .delete{color:#ff7184!important}
.gx-lobby-unified .gx-mini-actions{display:none!important}
@media(max-width:760px){.gx-lobby-unified .gx-mini-card{flex-basis:285px!important;width:285px!important;min-width:285px!important;max-width:285px!important}}
</style>


<style id="gxLobbyCompactFiveV30">
/* GIGAX 16/09/2026 — toolbar única + até 5 partidas por linha */
.gx-lobby-page{grid-template-columns:minmax(0,1fr) 300px!important;gap:10px!important}
.gx-lobby-unified{padding:0!important;overflow:visible!important;background:linear-gradient(135deg,#071923,#06141e)!important}
.gx-lobby-toolbar{display:grid!important;grid-template-columns:minmax(220px,.9fr) minmax(280px,1.2fr) auto!important;align-items:center!important;gap:12px!important;min-height:62px!important;padding:9px 12px!important;border:0!important;border-bottom:1px solid rgba(80,135,170,.22)!important;border-radius:0!important;background:linear-gradient(90deg,rgba(8,29,40,.96),rgba(5,20,30,.96))!important}
.gx-lobby-toolbar:after{display:none!important}.gx-lobby-toolbar .gx-lobby-head-icon{width:36px!important;height:36px!important}.gx-lobby-toolbar h2{font-size:16px!important;white-space:nowrap!important}.gx-lobby-toolbar p{font-size:7px!important;margin-top:3px!important;white-space:nowrap!important}
.gx-lobby-toolbar>.gx-placement{display:flex!important;margin:0!important;min-height:34px!important;height:34px!important;padding:0 9px!important;border:1px solid rgba(72,137,175,.22)!important;border-radius:8px!important;background:#081b27!important;min-width:0!important}
.gx-lobby-toolbar>.gx-placement strong{font-size:7px!important}.gx-lobby-toolbar>.gx-placement small{font-size:6px!important}.gx-lobby-toolbar>.gx-placement-track{min-width:70px!important}
.gx-lobby-toolbar>.gxm-wrap{margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;min-width:max-content!important}
.gx-lobby-toolbar .gxm-quickbar{gap:6px!important}.gx-lobby-toolbar .gxm-quick-title{display:none!important}.gx-lobby-toolbar .gxm-rank{display:none!important}.gx-lobby-toolbar .gxm-create-toggle{height:34px!important;font-size:7px!important}.gx-lobby-toolbar .gxm-settings{height:34px!important;width:34px!important}
.gx-lobby-compact{padding:10px 12px 12px!important}
.gx-lobby-compact>.gx-lobby-head{display:none!important}
.gx-lobby-unified .gx-mini-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;width:100%!important;overflow:visible!important;padding:0!important}
.gx-lobby-unified .gx-mini-card{width:100%!important;min-width:0!important;max-width:none!important;height:174px!important;min-height:174px!important;border-radius:10px!important;overflow:visible!important;background:linear-gradient(155deg,#0b2030,#071721)!important}
.gx-lobby-unified .gx-mini-body{display:flex!important;flex-direction:column!important;height:100%!important;padding:9px 10px 8px!important;gap:0!important}
.gx-lobby-unified .gx-mini-top{min-height:25px!important;padding-right:29px!important}.gx-lobby-unified .gx-mini-title{display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important}.gx-lobby-unified .gx-mini-title strong{display:block!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:9px!important;line-height:1.15!important}.gx-lobby-unified .gx-mini-title strong em{font-style:normal!important;color:#72a6c4!important;font-size:7px!important;margin-left:3px!important}.gx-lobby-unified .gx-mini-title small{font-size:7px!important;margin-left:auto!important;padding:0!important;color:#93aabd!important}
.gx-lobby-unified .gx-mini-meta{display:none!important}.gx-lobby-unified .gx-faceoff{display:flex!important;flex-direction:column!important;justify-content:center!important;gap:3px!important;flex:1!important;min-height:96px!important;margin:0!important;padding:2px 0!important}.gx-lobby-unified .gx-avatars{display:flex!important;justify-content:center!important;gap:4px!important;overflow:visible!important}.gx-lobby-unified .gx-avatar-mini{width:27px!important;height:27px!important;flex:0 0 27px!important;margin:0!important;font-size:9px!important;border:1px solid rgba(28,232,139,.78)!important}.gx-lobby-unified .gx-vs{height:15px!important;line-height:15px!important;font-size:8px!important;background:transparent!important;border:0!important}
.gx-lobby-unified .gx-mini-score{position:absolute!important;left:10px!important;bottom:9px!important}.gx-lobby-unified .gx-mini-score strong{display:none!important}.gx-lobby-unified .gx-mini-score small{height:21px!important;padding:0 8px!important;font-size:6.5px!important;border-radius:999px!important}.gx-lobby-unified .gx-mini-footer:after{display:none!important;content:none!important}.gx-lobby-unified .gx-player-count{display:block!important;position:absolute!important;right:10px!important;bottom:12px!important;font-size:8px!important}.gx-lobby-unified .gx-card-menu{top:6px!important;right:6px!important}.gx-lobby-unified .gx-card-menu>summary{width:27px!important;height:27px!important;font-size:15px!important;border-radius:7px!important}
.gx-lobby-unified .gx-mini-empty{grid-column:1/-1!important;min-height:90px!important}
.gx-month-rank{display:none!important}
@media(max-width:1550px){.gx-lobby-unified .gx-mini-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:1250px){.gx-lobby-toolbar{grid-template-columns:1fr 1fr!important}.gx-lobby-toolbar>.gxm-wrap{justify-self:end!important}.gx-lobby-unified .gx-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:980px){.gx-lobby-page{grid-template-columns:1fr!important}.gx-lobby-toolbar{grid-template-columns:1fr!important}.gx-lobby-toolbar>.gxm-wrap{justify-self:start!important}.gx-lobby-unified .gx-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){.gx-lobby-unified .gx-mini-grid{grid-template-columns:1fr!important}}
</style>




{{-- GIGAX_RANKING_PUG_GREEN_VISIBLE_V2 --}}
<style id="gigaxRankingPugGreenVisibleV2">
/* Ênfase verde alinhada ao Lobby + tipografia pequena legível */
.gx-ranking-side.gx-rankfx .gx-ranking-side-head{
  position:relative!important;overflow:hidden!important;
  padding:13px 11px 11px!important;
  background:linear-gradient(135deg,rgba(0,239,123,.16),rgba(5,30,34,.72) 55%,rgba(7,19,33,.96))!important;
  border-bottom:1px solid rgba(0,239,123,.32)!important;
  box-shadow:inset 3px 0 0 #00ef7b!important;
}
.gx-ranking-side.gx-rankfx .gx-ranking-side-head:after{content:'';position:absolute;right:-28px;top:-42px;width:105px;height:105px;border-radius:50%;background:rgba(0,239,123,.08);pointer-events:none}
.gx-ranking-side.gx-rankfx .gx-ranking-side-head h3{margin:0!important;font-size:16px!important;line-height:1.1!important;font-weight:1000!important;letter-spacing:.65px!important;color:#45ff9f!important;text-shadow:0 0 14px rgba(0,239,123,.28)!important}
.gx-ranking-side.gx-rankfx .gx-rankfx-trophy{font-size:14px!important;filter:drop-shadow(0 0 5px rgba(0,239,123,.3))}
.gx-ranking-side.gx-rankfx .gx-ranking-side-head p{margin:5px 0 0!important;font-size:10px!important;line-height:1.25!important;font-weight:700!important;color:#b9cadb!important;letter-spacing:.08px!important}
.gx-ranking-side.gx-rankfx .gx-rankfx-live{font-size:9.5px!important;font-weight:1000!important;color:#39ff9b!important;text-shadow:0 0 8px rgba(0,239,123,.25)!important}
.gx-ranking-side.gx-rankfx .gx-rankfx-tabs{padding:8px!important;gap:5px!important;background:rgba(5,15,27,.78)!important}
.gx-ranking-side.gx-rankfx .gx-rankfx-tabs button{height:30px!important;font-size:10px!important;font-weight:950!important;color:#a9bdd1!important}
.gx-ranking-side.gx-rankfx .gx-rankfx-tabs button.is-active{color:#eafff4!important;border-color:rgba(0,239,123,.68)!important;background:linear-gradient(180deg,rgba(0,239,123,.18),rgba(0,239,123,.08))!important;box-shadow:inset 0 0 0 1px rgba(0,239,123,.08)!important}
.gx-ranking-side.gx-rankfx .gx-rankfx-cols{font-size:9.5px!important;font-weight:900!important;color:#91a9c0!important;letter-spacing:.25px!important}
.gx-ranking-side.gx-rankfx .gx-rankfx-player b{font-size:12px!important;line-height:1.2!important;font-weight:900!important;color:#f3f8fd!important}
.gx-ranking-side.gx-rankfx .gx-rankfx-player small{font-size:9.5px!important;line-height:1.2!important;font-weight:650!important;color:#9db0c3!important}
.gx-ranking-side.gx-rankfx .gx-rank-xp{font-size:10px!important;font-weight:900!important;color:#d9e8f5!important}
.gx-ranking-side.gx-rankfx .gx-rank-pos{font-size:12px!important;font-weight:950!important;color:#edf6ff!important}
.gx-ranking-side.gx-rankfx .gx-rankfx-streak{font-size:10px!important;line-height:15px!important;font-weight:1000!important}
.gx-ranking-side.gx-rankfx .gx-rankfx-points{font-size:11px!important;font-weight:1000!important;text-shadow:0 0 8px rgba(0,239,123,.35)!important}
.gx-ranking-side.gx-rankfx .gx-rank-full{font-size:10px!important;font-weight:900!important;color:#48f6a0!important;letter-spacing:.2px!important}
.gx-ranking-side.gx-rankfx .gx-rank-empty{font-size:10px!important;line-height:1.4!important;color:#a7bacd!important;font-weight:650!important}
</style>


{{-- GIGAX_LOBBY_TOOLBAR_V34_BEGIN --}}
<style id="gigaxLobbyToolbarV34">
.gx-lobby-toolbar{display:grid!important;grid-template-columns:minmax(150px,190px) minmax(0,1fr)!important;align-items:center!important;column-gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:60px!important;padding:7px 9px!important;box-sizing:border-box!important;overflow:hidden!important}
.gx-lobby-toolbar>.gx-lobby-head-left,.gx-lobby-toolbar .gx-lobby-heading-copy{min-width:0!important}
.gx-lobby-toolbar .gx-partidas-title{color:#18f58a!important;font-size:19px!important;font-weight:1000!important;letter-spacing:.025em!important;text-shadow:0 0 14px rgba(24,245,138,.22)!important}
.gx-lobby-toolbar .gx-lobby-heading-copy p{margin-top:5px!important;font-size:7px!important;white-space:nowrap!important}
.gx-lobby-toolbar>.gxm-wrap{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:hidden!important;justify-self:stretch!important}
.gx-lobby-toolbar .gxm-quickbar{width:100%!important;max-width:100%!important;min-width:0!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;flex-wrap:nowrap!important;gap:5px!important;overflow:hidden!important}
.gx-lobby-toolbar .gxm-quick-title,.gx-lobby-toolbar .gx-v34-remove-duplicate{display:none!important}
.gx-lobby-toolbar .gxm-quickbar>*{min-width:0!important;flex-shrink:1!important}
.gx-lobby-toolbar .gxm-create-toggle{height:32px!important;min-width:0!important;padding:0 7px!important;font-size:6.5px!important;white-space:nowrap!important}
.gx-lobby-toolbar .gxm-settings{height:32px!important;width:32px!important;flex:0 0 32px!important}
.gx-lobby-toolbar .gx-placement{height:32px!important;min-height:32px!important;min-width:100px!important;max-width:145px!important;flex:1 1 118px!important;padding:0 7px!important;gap:5px!important}
.gx-lobby-toolbar .gx-placement strong{font-size:6.5px!important}.gx-lobby-toolbar .gx-placement small{font-size:6px!important}.gx-lobby-toolbar .gx-placement-track{min-width:30px!important}
@media(max-width:1250px){.gx-lobby-toolbar{grid-template-columns:minmax(135px,170px) minmax(0,1fr)!important;column-gap:5px!important}.gx-lobby-toolbar .gxm-quickbar{gap:3px!important}.gx-lobby-toolbar .gxm-create-toggle{padding:0 5px!important;font-size:6px!important}.gx-lobby-toolbar .gx-placement{min-width:88px!important;max-width:125px!important;padding:0 5px!important}}
@media(max-width:980px){.gx-lobby-toolbar{grid-template-columns:1fr!important;row-gap:6px!important;overflow:visible!important}.gx-lobby-toolbar>.gxm-wrap{overflow-x:auto!important}.gx-lobby-toolbar .gxm-quickbar{justify-content:flex-start!important;overflow-x:auto!important}}
</style>
<script id="gigaxLobbyToolbarV34Script">
(function(){function norm(t){return String(t||'').replace(/\s+/g,' ').trim().toUpperCase()}function clean(){var tb=document.querySelector('.gx-lobby-toolbar');if(!tb)return;var w=tb.querySelector('.gxm-wrap');if(!w)return;var q=w.querySelector('.gxm-quickbar')||w;Array.prototype.slice.call(q.children).forEach(function(el){if(norm(el.textContent).indexOf('PARTIDAS NO LOBBY')!==-1)el.classList.add('gx-v34-remove-duplicate')});Array.prototype.slice.call(w.querySelectorAll('*')).forEach(function(el){if(norm(el.textContent).indexOf('PARTIDAS NO LOBBY')===-1)return;var p=el;while(p.parentElement&&p.parentElement!==q&&p.parentElement!==w)p=p.parentElement;if(p!==w&&p!==q)p.classList.add('gx-v34-remove-duplicate')})}if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',clean);else clean();var tb=document.querySelector('.gx-lobby-toolbar');if(tb)new MutationObserver(clean).observe(tb,{childList:true,subtree:true});setTimeout(clean,100);setTimeout(clean,500);setTimeout(clean,1500)})();
</script>
{{-- GIGAX_LOBBY_TOOLBAR_V34_END --}}

{{-- GIGAX_REPORTAR_UI_V21 --}}
<style id="gxReportarV21Style">
.gxclean-footer .gx-report-v21{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    flex:0 0 auto!important;width:auto!important;min-width:64px!important;max-width:72px!important;
    height:21px!important;min-height:21px!important;padding:0 7px!important;margin:0!important;
    border:1px solid rgba(255,190,68,.36)!important;border-radius:999px!important;
    background:rgba(111,73,10,.25)!important;color:#ffd36b!important;
    font-size:7px!important;font-weight:900!important;line-height:1!important;white-space:nowrap!important;cursor:pointer!important
}
.gxclean-footer .gx-report-v21:hover{background:rgba(151,96,12,.42)!important;color:#fff!important}
.gx-report-overlay{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.gx-report-overlay.is-open{display:flex}
.gx-report-box{width:min(520px,96vw);border:1px solid rgba(117,162,195,.24);border-radius:12px;background:#07131d;box-shadow:0 24px 80px rgba(0,0,0,.6);overflow:hidden;color:#eaf5fb}
.gx-report-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.06)}
.gx-report-head b{font-size:13px}.gx-report-close{border:0;background:transparent;color:#9db2c2;font-size:18px;cursor:pointer}
.gx-report-body{display:grid;gap:10px;padding:14px}
.gx-report-body label{display:grid;gap:5px;color:#91a8ba;font-size:8px;font-weight:900;text-transform:uppercase}
.gx-report-body select,.gx-report-body textarea,.gx-report-body input[type=file]{width:100%;box-sizing:border-box;border:1px solid rgba(117,162,195,.20);border-radius:7px;background:#0b1c28;color:#eaf5fb;padding:9px;font-size:9px}
.gx-report-body textarea{min-height:95px;resize:vertical}
.gx-report-note{font-size:8px;color:#7891a4;line-height:1.45}
.gx-report-send{height:34px;border:1px solid rgba(255,190,68,.36);border-radius:7px;background:rgba(111,73,10,.30);color:#ffd36b;font-size:9px;font-weight:1000;cursor:pointer}
.gx-report-send:disabled{opacity:.55;cursor:wait}
</style>

<div class="gx-report-overlay" id="gxReportOverlay" aria-hidden="true">
    <div class="gx-report-box" role="dialog" aria-modal="true" aria-labelledby="gxReportTitle">
        <div class="gx-report-head">
            <b id="gxReportTitle">⚠ REPORTAR PARTIDA</b>
            <button type="button" class="gx-report-close" id="gxReportClose">×</button>
        </div>
        <form id="gxReportForm" enctype="multipart/form-data">
            <div class="gx-report-body">
                <input type="hidden" id="gxReportMatchId" value="">
                <label>Motivo
                    <select name="reason" required>
                        <option value="">Selecione...</option>
                        <option value="wrong_score">Placar incorreto</option>
                        <option value="wrong_stats">Estatísticas incorretas</option>
                        <option value="abandonment">Abandono de jogador</option>
                        <option value="server_problem">Problema no servidor</option>
                        <option value="invalid_evidence">Print/evidência inválido</option>
                        <option value="suspected_irregularity">Suspeita de irregularidade / Anti-Cheat</option>
                        <option value="other">Outro motivo</option>
                    </select>
                </label>
                <label>Descrição
                    <textarea name="description" maxlength="2000" required placeholder="Explique objetivamente o que aconteceu..."></textarea>
                </label>
                <label>Print / evidência
                    <input type="file" name="evidence" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp">
                </label>
                <div class="gx-report-note">O reporte será enviado para análise. Enviar um reporte não altera automaticamente placar, resultado, pontos ou estatísticas.</div>
                <button type="submit" class="gx-report-send">ENVIAR REPORTE</button>
            </div>
        </form>
    </div>
</div>

<script id="gxReportarV21Js">
document.addEventListener('DOMContentLoaded',function(){
    const overlay=document.getElementById('gxReportOverlay');
    const form=document.getElementById('gxReportForm');
    const matchInput=document.getElementById('gxReportMatchId');
    const close=document.getElementById('gxReportClose');
    if(!overlay||!form||!matchInput)return;

    const shut=()=>{overlay.classList.remove('is-open');overlay.setAttribute('aria-hidden','true');form.reset();matchInput.value='';};
    document.addEventListener('click',function(e){
        const btn=e.target.closest('.gx-report-v21');
        if(btn){e.preventDefault();matchInput.value=btn.dataset.matchId||'';overlay.classList.add('is-open');overlay.setAttribute('aria-hidden','false');}
    });
    close?.addEventListener('click',shut);
    overlay.addEventListener('click',e=>{if(e.target===overlay)shut();});
    document.addEventListener('keydown',e=>{if(e.key==='Escape'&&overlay.classList.contains('is-open'))shut();});

    form.addEventListener('submit',async function(e){
        e.preventDefault();
        const id=Number(matchInput.value||0); if(!id)return;
        const send=form.querySelector('.gx-report-send');
        send.disabled=true;
        try{
            const fd=new FormData(form);
            const csrf=document.querySelector('meta[name="csrf-token"]')?.content||'{{ csrf_token() }}';
            const res=await fetch(`/lobby/${id}/report`,{
                method:'POST',credentials:'same-origin',
                headers:{'Accept':'application/json','X-CSRF-TOKEN':csrf,'X-Requested-With':'XMLHttpRequest'},
                body:fd
            });
            const data=await res.json().catch(()=>({}));
            if(!res.ok||data.success===false)throw new Error(data.message||`HTTP ${res.status}`);
            alert(data.message||'Reporte enviado.');
            shut();
        }catch(err){alert(err.message||'Erro ao enviar reporte.');}
        finally{send.disabled=false;}
    });
});
</script>
<!-- GIGAX_FOOTER_FIT_V22_BEGIN -->
<style id="gxFooterFitV22">
/* Footer cabe integralmente dentro do card: STATUS | JOGADORES | REPORTAR | APAGAR */
.gxclean-footer{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) max-content max-content max-content!important;
    align-items:center!important;
    column-gap:4px!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    padding:0!important;
}
.gxclean-footer .gxclean-status{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
}
.gxclean-footer .gxclean-status small{
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
    height:22px!important;
    padding:0 7px!important;
    font-size:7px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.gxclean-footer .gxclean-count{
    margin:0!important;
    min-width:34px!important;
    font-size:9px!important;
}
.gxclean-footer .gxclean-count:before{font-size:8px!important}
.gxclean-footer .gxclean-count b{font-size:9px!important}

/* REPORTAR e APAGAR ficam compactos e nunca empurram o grid para fora. */
.gxclean-footer .gx-report-v21,
.gxclean-footer .gx-direct-delete-v16{
    box-sizing:border-box!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:22px!important;
    min-height:22px!important;
    margin:0!important;
    padding:0 6px!important;
    border-radius:999px!important;
    font-size:6.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
}
.gxclean-footer .gx-report-v21{grid-column:auto!important}
.gxclean-footer .gx-direct-delete-v16{grid-column:auto!important}

/* Em cards mais estreitos reduz apenas os controles, sem quebrar linha. */
@media(max-width:1450px){
    .gxclean-footer{column-gap:3px!important}
    .gxclean-footer .gxclean-status small{padding:0 5px!important;font-size:6.5px!important}
    .gxclean-footer .gxclean-count,
    .gxclean-footer .gxclean-count b{font-size:8px!important}
    .gxclean-footer .gx-report-v21,
    .gxclean-footer .gx-direct-delete-v16{padding:0 5px!important;font-size:6px!important}
}
</style>
<!-- GIGAX_FOOTER_FIT_V22_END -->