@php
    $gxmCanCreatePremiumGx = false;
    try {
        $gxmUid=(int)(session('user_id') ?: optional(auth()->user())->id ?: 0);
        if($gxmUid>0 && \Illuminate\Support\Facades\Schema::hasTable('users')){
            $gxmUser=\Illuminate\Support\Facades\DB::table('users')->where('id',$gxmUid)->first();
            if($gxmUser){
                if(\Illuminate\Support\Facades\Schema::hasColumn('users','is_gx') && !empty($gxmUser->is_gx)){
                    $gxmCanCreatePremiumGx=true;
                } elseif(\Illuminate\Support\Facades\Schema::hasColumn('users','is_premium') && !empty($gxmUser->is_premium)){
                    if(!\Illuminate\Support\Facades\Schema::hasColumn('users','premium_until') || empty($gxmUser->premium_until)){
                        $gxmCanCreatePremiumGx=true;
                    } else {
                        try { $gxmCanCreatePremiumGx=\Carbon\Carbon::parse($gxmUser->premium_until)->isFuture(); } catch(\Throwable $e){ $gxmCanCreatePremiumGx=false; }
                    }
                }
            }
        }
    } catch(\Throwable $e){ $gxmCanCreatePremiumGx=false; }
@endphp


<style id="gxmCompactFinal">
.gxm-wrap{border-radius:10px!important;box-shadow:none!important}
.gxm-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
.gxm-card{
    min-height:92px!important;
    display:grid!important;
    grid-template-columns:62px minmax(0,1fr)!important;
    align-items:stretch!important;
    border-radius:9px!important;
}
.gxm-cover{
    height:auto!important;
    min-height:90px!important;
    border:0!important;
}
.gxm-cover::after{background:linear-gradient(90deg,transparent,rgba(7,16,25,.38))!important}
.gxm-cover-custom::before,.gxm-cover-5l::before,.gxm-cover-c1s::before,.gxm-cover-awp::before{
    font-size:25px!important;
}
.gxm-body{padding:8px 9px!important;min-width:0!important}
.gxm-title{margin-bottom:2px!important}
.gxm-icon{display:none!important}
.gxm-card b{font-size:10px!important}
.gxm-card small{
    min-height:0!important;
    margin:1px 0 4px!important;
    font-size:7px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.gxm-tag{margin-top:auto!important;font-size:6px!important;padding:3px 5px!important}
.gxm-action{height:25px!important;margin-top:4px!important;font-size:7px!important}
.gxm-ranking-link{margin-top:7px!important;padding:6px!important;font-size:7px!important}
@media(max-width:1050px){
    .gxm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
    .gxm-grid{grid-template-columns:1fr!important}
}
</style>
<style>
.gxm-wrap{
    margin-top:0;
    padding:10px;
    border:1px solid rgba(70,140,180,.20);
    border-radius:12px;
    background:
        linear-gradient(180deg,rgba(12,26,38,.98),rgba(5,14,22,.98));
    box-shadow:0 18px 45px rgba(0,0,0,.24);
}

.gxm-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.gxm-head strong{
    display:block;
    color:#fff;
    font-size:14px;
    font-weight:1000;
}

.gxm-head span{
    display:block;
    margin-top:3px;
    color:#7490a5;
    font-size:9px;
}

.gxm-head-badge{
    margin:0!important;
    padding:5px 9px;
    border:1px solid rgba(255,43,77,.18);
    border-radius:999px;
    background:rgba(255,35,69,.08);
    color:#ff5870!important;
    font-size:8px!important;
    font-weight:1000;
}

.gxm-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
}

.gxm-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:102px;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(100,155,190,.16);
    border-radius:11px;
    background:
        linear-gradient(180deg,#0b1a26,#071019);
    color:#eef8ff;
    text-align:left;
    cursor:pointer;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.gxm-card:hover{
    transform:translateY(-3px);
    border-color:rgba(39,239,123,.48);
    box-shadow:
        0 18px 35px rgba(0,0,0,.32),
        0 0 0 1px rgba(39,239,123,.06);
}

/* IMAGEM SUPERIOR */
.gxm-cover{
    position:relative;
    height:0;
    overflow:hidden;
    border-bottom:0;
}

.gxm-cover::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,transparent 25%,rgba(5,14,22,.12) 60%,#071019 100%);
}

.gxm-cover-custom{
    background:
        radial-gradient(circle at 25% 35%,rgba(27,234,113,.20),transparent 25%),
        linear-gradient(135deg,#122936,#07111b 55%,#101b20);
}

.gxm-cover-custom::before{
    content:"⚔";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#36f58b;
    font-size:25px;
    text-shadow:0 0 25px rgba(54,245,139,.5);
}

.gxm-cover-5l{
    background:
        radial-gradient(circle at 50% 35%,rgba(35,128,255,.30),transparent 30%),
        linear-gradient(135deg,#07162c,#0d3769,#061222);
}

.gxm-cover-5l::before{
    content:"5L";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#75c5ff;
    font-size:22px;
    font-weight:1000;
    text-shadow:
        0 0 14px #157de8,
        0 0 30px rgba(21,125,232,.6);
}

.gxm-cover-c1s{
    background:
        radial-gradient(circle at 50% 40%,rgba(178,35,255,.38),transparent 35%),
        linear-gradient(135deg,#130725,#381078,#12071f);
}

.gxm-cover-c1s::before{
    content:"☠";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#cc62ff;
    font-size:24px;
    text-shadow:0 0 28px rgba(193,49,255,.75);
}

.gxm-cover-awp{
    background:
        radial-gradient(circle at 70% 45%,rgba(255,137,21,.26),transparent 32%),
        linear-gradient(135deg,#231104,#4b2105,#130a04);
}

.gxm-cover-awp::before{
    content:"⌖";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#ff9b24;
    font-size:26px;
    font-weight:1000;
    text-shadow:0 0 28px rgba(255,135,25,.62);
}

/* CORPO */
.gxm-body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:9px 10px;
}

.gxm-title{
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:5px;
}

.gxm-icon{
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    border-radius:7px;
    background:rgba(34,240,122,.09);
    color:#25ed7c;
    font-size:12px;
    font-weight:1000;
}

.gxm-icon.blue{
    background:rgba(45,142,255,.10);
    color:#4ba3ff;
}

.gxm-icon.purple{
    background:rgba(190,48,255,.11);
    color:#ca58ff;
}

.gxm-icon.orange{
    background:rgba(255,136,21,.11);
    color:#ff941f;
}

.gxm-card b{
    display:block;
    color:#f3f8fb;
    font-size:11px;
    font-weight:1000;
}

.gxm-card small{
    display:block;
    min-height:0;
    color:#8095a7;
    font-size:8.5px;
    line-height:1.5;
}

.gxm-card i{
    display:inline-flex;
    width:max-content;
    margin-top:6px;
    padding:4px 7px;
    border-radius:6px;
    background:rgba(255,42,74,.1);
    color:#ff5d74;
    font-size:8px;
    font-style:normal;
    font-weight:1000;
}

.gxm-card[data-gxm-mode="team_5l"] i{
    background:rgba(34,139,255,.11);
    color:#55adff;
}

.gxm-card[data-gxm-mode="c1s"] i{
    background:rgba(185,45,255,.11);
    color:#cb62ff;
}

.gxm-card[data-gxm-mode="awp"] i{
    background:rgba(255,139,24,.11);
    color:#ff9b27;
}

.gxm-create{
    display:flex;
    align-items:center;
    justify-content:center;
    height:31px;
    margin-top:auto;
    padding:0 10px;
    border-radius:7px;
    background:linear-gradient(180deg,#ff2849,#df0d32);
    color:#fff;
    font-size:9px;
    font-weight:1000;
    box-shadow:0 7px 18px rgba(234,14,51,.15);
}

.gxm-card:hover .gxm-create{
    background:linear-gradient(180deg,#ff3d5a,#ec1539);
}

.gxm-rank{
    margin-top:9px;
    padding:8px;
    border:1px solid rgba(32,232,119,.16);
    border-radius:8px;
    background:rgba(32,232,119,.035);
    text-align:center;
}

.gxm-rank a{
    color:#2bf183;
    font-size:9px;
    font-weight:1000;
    text-decoration:none;
}

.gxm-rank a:hover{
    color:#8dffba;
}

@media(max-width:1100px){
    .gxm-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .gxm-grid{
        grid-template-columns:1fr;
    }

    .gxm-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .gxm-card{
        min-height:205px;
    }
}


body.gxm-modal-open{overflow:hidden}
.gxm-modal{position:fixed;inset:0;z-index:10020;display:none;place-items:center;padding:16px;background:rgba(2,7,12,.78);backdrop-filter:blur(8px)}
.gxm-modal.on{display:grid}
.gxm-dialog{width:min(620px,100%);max-height:92vh;overflow:auto;padding:18px;border:1px solid rgba(255,65,90,.3);border-radius:16px;background:#0a1622;color:#eaf4fb;box-shadow:0 35px 100px rgba(0,0,0,.62)}
.gxm-dialog h3{margin:0 0 4px}
.gxm-dialog p{margin:0 0 14px;color:#7e94a8;font-size:10px}
.gxm-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gxm-field{display:grid;gap:5px}
.gxm-field.full{grid-column:1/-1}
.gxm-field label{font-size:8px;color:#8da2b5;font-weight:900;text-transform:uppercase}
.gxm-field input,.gxm-field select{width:100%;height:40px;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#06101a;color:#fff;padding:0 10px}
.gxm-actions{display:flex;gap:7px;margin-top:14px}
.gxm-btn{height:40px;padding:0 15px;border:0;border-radius:8px;font-weight:950;cursor:pointer}
.gxm-primary{flex:1;background:linear-gradient(180deg,#ff3853,#c90e2d);color:#fff}
.gxm-secondary{background:#152433;color:#b9c9d5}
@media(max-width:480px){.gxm-form{grid-template-columns:1fr}.gxm-field.full{grid-column:auto}}

</style>

<style id="gxmReferenceToolbarV6">
.gxm-wrap{margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.gxm-quickbar{display:flex!important;align-items:center!important;gap:7px!important;width:100%!important;min-height:48px!important;padding:6px 8px!important;background:linear-gradient(180deg,#0a1826,#07131f)!important;border-bottom:1px solid rgba(68,121,156,.24)!important;overflow-x:auto!important;overflow-y:visible!important}
.gxm-lobby-summary{display:flex;align-items:center;gap:9px;min-width:190px;padding-right:12px;border-right:1px solid rgba(103,145,175,.20)}
.gxm-lobby-summary-icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(32,239,139,.42);border-radius:8px;background:rgba(20,232,132,.07);color:#38f0aa;font-size:17px}
.gxm-lobby-summary-text{display:grid;gap:3px}.gxm-lobby-summary-text b{font-size:10px;color:#dcebf4;white-space:nowrap}.gxm-lobby-summary-text small{font-size:7px;color:#8097aa;font-weight:900}
.gxm-direct-mode{height:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;border:1px solid rgba(34,239,139,.48);border-radius:8px;background:linear-gradient(180deg,rgba(17,58,57,.72),rgba(7,38,37,.72));box-shadow:inset 0 0 0 1px rgba(31,238,139,.10),0 0 14px rgba(20,219,128,.05);color:#50efb0;font-size:8px;font-weight:1000;white-space:nowrap;cursor:pointer}
.gxm-direct-mode:hover{background:linear-gradient(180deg,rgba(19,76,68,.85),rgba(8,49,44,.85));border-color:#32efa4;color:#baffdf}
.gxm-direct-mode.custom{min-width:176px}.gxm-direct-mode .ico{font-size:14px;line-height:1}
.gxm-sep{width:1px;height:34px;background:rgba(103,145,175,.18);flex:0 0 1px;margin:0 2px}
.gxm-placement-mini{height:36px;min-width:160px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid rgba(96,137,169,.16);border-radius:8px;background:#0b1928}
.gxm-placement-mini strong{font-size:9px;color:#b8c7d4}.gxm-placement-bar{width:84px;height:6px;border-radius:99px;background:#13283c;overflow:hidden}.gxm-placement-bar span{display:block;height:100%;background:#2e8fda}.gxm-placement-mini small{font-size:7px;color:#9fb0be;font-weight:900}
.gxm-search{height:36px;min-width:150px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid rgba(96,137,169,.17);border-radius:8px;background:#0b1928;color:#8197aa}
.gxm-search span{font-size:14px}.gxm-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#dce9f2;font-size:8px;font-weight:900;text-transform:uppercase}.gxm-search input::placeholder{color:#7d91a4}
.gxm-settings{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border:1px solid rgba(96,137,169,.17);border-radius:8px;background:#0b1928;color:#91a9ba;font-size:14px;cursor:pointer}
.gxm-settings:hover{border-color:rgba(38,239,145,.36);color:#b8ffe0}
@media(max-width:900px){.gxm-quickbar{padding-bottom:8px}.gxm-lobby-summary{min-width:170px}.gxm-search{min-width:130px}}
</style>

<style id="gxmPremiumGxV28">
.gxm-direct-mode.gxm-premium-locked{
    opacity:.58!important;
    filter:saturate(.55)!important;
    cursor:not-allowed!important;
    position:relative!important;
}
.gxm-direct-mode.gxm-premium-locked::after{
    content:"🔒";
    margin-left:3px;
    font-size:9px;
}
.gxm-premium-gx-notice{
    display:none;
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    z-index:40000;
    max-width:460px;
    padding:11px 16px;
    border:1px solid rgba(255,190,65,.35);
    border-radius:9px;
    background:#101b26;
    color:#ffd780;
    font-size:11px;
    font-weight:900;
    box-shadow:0 18px 55px rgba(0,0,0,.48);
}
.gxm-premium-gx-notice.on{display:block}
</style>

<div class="gxm-wrap" id="gxmModes">
  <div class="gxm-quickbar">
    <div class="gxm-lobby-summary">
      <span class="gxm-lobby-summary-icon">⚔</span>
      <span class="gxm-lobby-summary-text"><b>PARTIDAS NO LOBBY</b><small>{{ $totalMatches ?? 0 }} {{ (($totalMatches ?? 0) == 1) ? 'partida' : 'partidas' }}</small></span>
    </div>
    <button class="gxm-direct-mode custom{{ $gxmCanCreatePremiumGx ? '' : ' gxm-premium-locked' }}" type="button" data-gxm-mode="custom" data-gxm-create-allowed="{{ $gxmCanCreatePremiumGx ? '1' : '0' }}"><span class="ico">♟</span>X1–X8 PERSONALIZADA</button>
    <button class="gxm-direct-mode{{ $gxmCanCreatePremiumGx ? '' : ' gxm-premium-locked' }}" type="button" data-gxm-mode="team_5l" data-gxm-create-allowed="{{ $gxmCanCreatePremiumGx ? '1' : '0' }}"><span class="ico">☷</span>5L</button>
    <button class="gxm-direct-mode{{ $gxmCanCreatePremiumGx ? '' : ' gxm-premium-locked' }}" type="button" data-gxm-mode="c1s" data-gxm-create-allowed="{{ $gxmCanCreatePremiumGx ? '1' : '0' }}"><span class="ico">☠</span>DM</button>
    <button class="gxm-direct-mode{{ $gxmCanCreatePremiumGx ? '' : ' gxm-premium-locked' }}" type="button" data-gxm-mode="awp" data-gxm-create-allowed="{{ $gxmCanCreatePremiumGx ? '1' : '0' }}"><span class="ico">⌖</span>AWP</button>
    <span class="gxm-sep"></span>
    <div class="gxm-placement-mini">
      <strong>{{ $gxPlacementMatches ?? 0 }}/10</strong>
      <span class="gxm-placement-bar"><span style="width:{{ min(100, (($gxPlacementMatches ?? 0) * 10)) }}%"></span></span>
      <small>{{ $gxPlacementMatches ?? 0 }}/10</small>
    </div>
    <span class="gxm-sep"></span>
    <label class="gxm-search"><span>⌕</span><input id="gxmLobbySearch" type="search" placeholder="BUSCA"></label>
    <button class="gxm-settings" type="button" id="gxmToolbarSettings" title="Configuração">⚙</button>
  </div>
</div>
<div class="gxm-premium-gx-notice" id="gxmPremiumGxNotice">🔒 Criação de salas exclusiva para membros Premium ou GX.</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const quickMenu = document.getElementById('gxmCreateMenu');
    const quickToggle = document.getElementById('gxmCreateToggle');
    if (quickMenu && quickToggle) {
        quickToggle.addEventListener('click', function (e) {
            e.stopPropagation();
            const opened = quickMenu.classList.toggle('open');
            quickToggle.setAttribute('aria-expanded', opened ? 'true' : 'false');
        });
        document.addEventListener('click', function (e) {
            if (!quickMenu.contains(e.target)) {
                quickMenu.classList.remove('open');
                quickToggle.setAttribute('aria-expanded', 'false');
            }
        });
        quickMenu.querySelectorAll('[data-gxm-mode]').forEach(function (btn) {
            btn.addEventListener('click', function () {
                quickMenu.classList.remove('open');
                quickToggle.setAttribute('aria-expanded', 'false');
            });
        });
    }
    const settingsMenu = document.getElementById('gxmSettingsMenu');
    const settingsToggle = document.getElementById('gxmSettingsToggle');
    if (settingsMenu && settingsToggle) {
        settingsToggle.addEventListener('click', function (e) {
            e.preventDefault();
            e.stopPropagation();
            if (quickMenu) quickMenu.classList.remove('open');
            const opened = settingsMenu.classList.toggle('open');
            settingsToggle.setAttribute('aria-expanded', opened ? 'true' : 'false');
        });

        settingsMenu.querySelectorAll('[data-gxm-settings-action]').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const action = btn.getAttribute('data-gxm-settings-action');
                settingsMenu.classList.remove('open');
                settingsToggle.setAttribute('aria-expanded', 'false');
                if (action === 'refresh') window.location.reload();
                if (action === 'close-menus' && quickMenu) {
                    quickMenu.classList.remove('open');
                    if (quickToggle) quickToggle.setAttribute('aria-expanded', 'false');
                }
            });
        });

        document.addEventListener('click', function (e) {
            if (!settingsMenu.contains(e.target)) {
                settingsMenu.classList.remove('open');
                settingsToggle.setAttribute('aria-expanded', 'false');
            }
        });
    }

    const modal = document.getElementById('gxmModal');
    const form = document.getElementById('gxmForm');
    const modeInput = document.getElementById('gxmMode');
    const sizeSelect = document.getElementById('gxmTeamSize');
    const title = document.getElementById('gxmTitle');
    const message = document.getElementById('gxmMsg');
    const cancel = document.getElementById('gxmCancel');

    if (!modal || !form || !modeInput || !sizeSelect || !title || !message) {
        console.error('[GIGAX MODOS] Elementos do criador de salas não encontrados.');
        return;
    }

    const labels = {
        custom: 'PARTIDA PERSONALIZADA',
        team_5l: '5L • TIME VS TIME',
        c1s: 'C1S • DM',
        awp: 'AWP'
    };

    function openCreator(selectedMode) {
        if (!Object.prototype.hasOwnProperty.call(labels, selectedMode)) {
            selectedMode = 'custom';
        }

        modeInput.value = selectedMode;
        title.textContent = labels[selectedMode];
        message.textContent = '';

        const is5L = selectedMode === 'team_5l';
        const isC1s = selectedMode === 'c1s';
        const c1sWrap = document.getElementById('gxmC1sPlayersWrap');
        const c1sSelect = document.getElementById('gxmC1sPlayers');
        const formatLabel = document.getElementById('gxmFormatLabel');

        if (c1sWrap) c1sWrap.style.display = isC1s ? 'block' : 'none';
        sizeSelect.style.display = isC1s ? 'none' : '';
        if (formatLabel) formatLabel.textContent = isC1s ? 'Jogadores' : 'Formato';

        if (isC1s) {
            if (c1sSelect && !c1sSelect.value) c1sSelect.value = '2';
            sizeSelect.disabled = true;
        } else {
            sizeSelect.value = is5L ? '5' : (sizeSelect.value || '5');
            sizeSelect.disabled = is5L;
        }

        modal.classList.add('on');
        modal.setAttribute('aria-hidden', 'false');
        document.body.classList.add('gxm-modal-open');

        window.setTimeout(function () {
            const first = form.querySelector('input[name="title"]');
            if (first) first.focus();
        }, 30);
    }

    function closeCreator() {
        modal.classList.remove('on');
        modal.setAttribute('aria-hidden', 'true');
        document.body.classList.remove('gxm-modal-open');
        message.textContent = '';
    }

    document.querySelectorAll('[data-gxm-mode]').forEach(function (button) {
        button.style.pointerEvents = 'auto';
        button.addEventListener('click', function (event) {
            event.preventDefault();
            event.stopPropagation();

            if (button.getAttribute('data-gxm-create-allowed') === '0') {
                const notice = document.getElementById('gxmPremiumGxNotice');
                if (notice) {
                    notice.classList.add('on');
                    window.clearTimeout(window.gxmPremiumGxTimer);
                    window.gxmPremiumGxTimer = window.setTimeout(() => notice.classList.remove('on'), 3200);
                }
                return;
            }

            openCreator(button.getAttribute('data-gxm-mode') || 'custom');
        });
    });

    if (cancel) {
        cancel.addEventListener('click', function (event) {
            event.preventDefault();
            closeCreator();
        });
    }

    modal.addEventListener('click', function (event) {
        if (event.target === modal) closeCreator();
    });

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape' && modal.classList.contains('on')) closeCreator();
    });

    form.addEventListener('submit', async function (event) {
        event.preventDefault();

        const submit = form.querySelector('button[type="submit"]');
        const originalText = submit ? submit.textContent : 'CRIAR SALA';
        if (submit) {
            submit.disabled = true;
            submit.textContent = 'CRIANDO...';
        }
        message.textContent = 'Criando sala...';

        const selectedMode = modeInput.value || 'custom';
        const wasDisabled = sizeSelect.disabled;
        const c1sSelect = document.getElementById('gxmC1sPlayers');
        sizeSelect.disabled = false;

        const data = new FormData(form);
        data.delete('voice_mode'); // comunicação é global/fixa para toda a plataforma
        data.set('mode_code', selectedMode);
        if (selectedMode === 'team_5l') {
            data.set('team_size', '5');
        } else if (selectedMode === 'c1s') {
            const playerCount = Math.max(2, Math.min(16, Number(c1sSelect?.value || 2)));
            data.set('player_count', String(playerCount));
            data.set('team_size', '1');
        }

        try {
            const response = await fetch(@json(route('gigax.modes.lobbies.create')), {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                credentials: 'same-origin',
                body: data
            });

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

            if (!response.ok || !payload.success) {
                let errorMessage = payload.message || 'Não foi possível criar a sala.';
                if (payload.errors) {
                    const firstError = Object.values(payload.errors).flat()[0];
                    if (firstError) errorMessage = firstError;
                }
                throw new Error(errorMessage);
            }

            message.textContent = 'Sala criada. Abrindo...';
            window.location.href = payload.redirect || ('/lobby/' + payload.lobby_id);
        } catch (error) {
            console.error('[GIGAX MODOS] Erro ao criar sala:', error);
            message.textContent = error && error.message ? error.message : 'Erro ao criar sala.';
        } finally {
            sizeSelect.disabled = wasDisabled || selectedMode === 'team_5l';
            if (submit) {
                submit.disabled = false;
                submit.textContent = originalText;
            }
        }
    });

    document.querySelectorAll('form[data-gxm-private="1"]').forEach(function (joinForm) {
        joinForm.addEventListener('submit', function (event) {
            let passwordInput = joinForm.querySelector('input[name="password"]');
            if (passwordInput && passwordInput.value) return;

            const password = window.prompt('Esta sala é privada. Digite a senha:');
            if (password === null) {
                event.preventDefault();
                return;
            }

            if (!passwordInput) {
                passwordInput = document.createElement('input');
                passwordInput.type = 'hidden';
                passwordInput.name = 'password';
                joinForm.appendChild(passwordInput);
            }
            passwordInput.value = password;
        });
    });
});
</script>

<script id="gxmToolbarBehaviorV6">
document.addEventListener('DOMContentLoaded', function(){
    var search = document.getElementById('gxmLobbySearch');
    if(search){
        search.addEventListener('input', function(){
            var q=(search.value||'').trim().toLowerCase();
            document.querySelectorAll('.gx-mini-card').forEach(function(card){
                card.style.display = (!q || (card.textContent||'').toLowerCase().indexOf(q)!==-1) ? '' : 'none';
            });
        });
    }
    var settings=document.getElementById('gxmToolbarSettings');
    if(settings){
        settings.addEventListener('click', function(){
            var answer=window.confirm('Atualizar a lista de partidas do Lobby?');
            if(answer) window.location.reload();
        });
    }
});
</script>

<div class="gxm-modal" id="gxmModal"><div class="gxm-dialog"><h3 id="gxmTitle">Criar sala</h3><p>Essas partidas ficam no perfil, mas não alteram o ranking MIX.</p>
<form id="gxmForm" class="gxm-form">@csrf
<input type="hidden" name="mode_code" id="gxmMode" value="custom">
<div class="gxm-field full"><label>Nome da sala</label><input name="title" maxlength="100" placeholder="Ex.: Treino da noite"></div>
<div class="gxm-field" id="gxmFormatField">
<label id="gxmFormatLabel">Formato</label>
<select name="team_size" id="gxmTeamSize">@for($i=1;$i<=8;$i++)<option value="{{$i}}">{{$i}}x{{$i}}</option>@endfor</select>
<div id="gxmC1sPlayersWrap" style="display:none">
<select id="gxmC1sPlayers">
@for($i=2;$i<=16;$i++)<option value="{{$i}}">{{$i}} jogadores</option>@endfor
</select>
<small style="display:block;margin-top:5px;color:#8190a2">Free For All • todos entram na mesma sala.</small>
</div>
</div>
<div class="gxm-field"><label>Mapa</label><input name="map_name" placeholder="A definir"></div>

<div class="gxm-field"><label>Senha (opcional)</label><input name="password" maxlength="40" type="password" placeholder="Sem senha = pública"></div>
<div class="gxm-actions full"><button type="button" class="gxm-btn gxm-secondary" id="gxmCancel">CANCELAR</button><button type="submit" class="gxm-btn gxm-primary">CRIAR SALA</button></div>
</form><div id="gxmMsg" style="margin-top:0;font-size:10px;color:#ff9aaa"></div></div></div>

<style id="gxmVisualFixFinal">
.gxm-wrap,.gxm-wrap *{box-sizing:border-box}
.gxm-wrap{overflow:visible!important}
.gxm-grid{align-items:stretch}
.gxm-card{overflow:hidden}
.gxm-body{min-width:0}
.gxm-title{min-width:0}
.gxm-title b{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.gxm-card small{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}
.gxm-action{
    width:100%;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
</style>




<style id="gxmCleanFinalV17">
/* Barra única: título/controles não quebram e não invadem o ranking */
.gxm-wrap{
    display:block!important;
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
}
.gxm-quickbar{
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    margin:0!important;
    padding:6px 0!important;
    gap:5px!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
}
.gxm-direct-mode{
    height:36px!important;
    min-width:0!important;
    flex:0 1 auto!important;
    padding:0 8px!important;
    white-space:nowrap!important;
}
.gxm-direct-mode.custom{flex:1 1 160px!important}
.gxm-placement-mini{
    min-width:108px!important;
    flex:1 1 140px!important;
    padding:0 7px!important;
}
.gxm-placement-bar{min-width:24px!important;width:auto!important;flex:1 1 auto!important}
.gxm-search{min-width:90px!important;flex:1 1 130px!important}
.gxm-settings{flex:0 0 36px!important}
.gxm-sep{flex:0 0 1px!important;margin:0 1px!important}
</style>