/* Estilo "Batalla": paneles azul marino, botones dorados/azules con relieve y fuentes redondeadas.
   Se carga al final (después de game-theme, game-fx y login), así que solo cambia la apariencia:
   - redefine la paleta y las fuentes que usan las otras hojas
   - reemplaza los botones dibujados en imágenes por botones en CSS (icono SVG + texto) */

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url(/static/fonts/fredoka-latin.woff2) format('woff2');
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500 900;
    font-display: swap;
    src: url(/static/fonts/nunito-latin.woff2) format('woff2');
}

:root {
    --bg: #0a1730;
    --ink: #06102a;
    --cyan: #5cb8ff;
    --violet: #3b7be0;
    --magenta: #e5476b;
    --orange: #ff8a1f;
    --yellow: #ffc533;
    --lime: #4ad66d;
    --red: #ef4b5f;
    --text: #f2f7ff;
    --muted: #a9c1e6;

    --panel: linear-gradient(180deg, #2457a3 0%, #173f80 100%);
    --panel-edge: #3a78d0;
    --well: #0b1d41;
    --well-edge: #1f4a8c;
    --glass: linear-gradient(180deg, #1d4688 0%, #12306a 100%);
    --card-grad: var(--glass);
    --head-grad: linear-gradient(180deg, #3d8ae8 0%, #2363c4 100%);
    --edge: linear-gradient(90deg, #5cb8ff, #ffc533);
    --neon: 0 0 0 2px #3a78d0, 0 6px 0 #0a1d45, 0 14px 30px rgba(0, 0, 0, .5);
    --sticker: var(--neon);

    /* Botones con relieve */
    --b-gold: linear-gradient(180deg, #ffe07a 0%, #ffc533 45%, #f5a20c 100%);
    --b-gold-edge: #b8700a;
    --b-orange: linear-gradient(180deg, #ffb057 0%, #ff8a1f 50%, #ee6a0c 100%);
    --b-orange-edge: #a8460a;
    --b-blue: linear-gradient(180deg, #6cc0ff 0%, #2f8cf0 50%, #1f6ad4 100%);
    --b-blue-edge: #13459a;
    --b-green: linear-gradient(180deg, #8cf07a 0%, #4ad66d 50%, #27a84a 100%);
    --b-green-edge: #17702e;
    --b-purple: linear-gradient(180deg, #b48cff 0%, #8657f0 50%, #6638d0 100%);
    --b-purple-edge: #40209a;
    --b-red: linear-gradient(180deg, #ff8a96 0%, #ef4b5f 50%, #c92f45 100%);
    --b-red-edge: #861a2b;

    --font: 'Nunito', Emoji, 'Segoe UI', Verdana, sans-serif;
    --font-d: 'Fredoka', 'Nunito', sans-serif;
}

body.Futuro, body {
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(60, 130, 230, .28), transparent 70%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(20, 60, 140, .35), transparent 70%),
        #081429 !important;
}

/* ---------- Botón genérico con relieve ---------- */

.gbBtn,
#buttonCreateRoom, #buttonJoin, #buttonQuickJoin, #buttonMyInfo, #buttonShop, #buttonCharge2, #facebook_post, #event_button,
#buttonOptions, #buttonChannels, #BrokerLogout, #BrokerRefresh,
#filter_all, #filter_waiting, #filter_friends, #filter_guild,
#buttonRoomsListUp, #buttonRoomsListDown {
    --face: var(--b-blue);
    --edge-c: var(--b-blue-edge);
    /* Primera capa: brillo que cruza el botón al pasar el ratón */
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .4) 50%, transparent 62%) -160% 0 / 250% 100% no-repeat, var(--face) !important;
    border-radius: 10px !important;
    box-shadow:
        inset 0 -4px 0 var(--edge-c),
        inset 0 2px 0 rgba(255, 255, 255, .45),
        0 0 0 2px rgba(6, 16, 42, .85),
        0 4px 10px rgba(0, 0, 0, .45) !important;
    color: #fff !important;
    animation: none !important;
    filter: none;
    overflow: visible;
}

#buttonCreateRoom:hover, #buttonJoin:hover, #buttonQuickJoin:hover, #buttonMyInfo:hover, #buttonShop:hover, #buttonCharge2:hover,
#facebook_post:hover, #event_button:hover, #buttonOptions:hover, #buttonChannels:hover, #BrokerLogout:hover, #BrokerRefresh:hover,
#filter_all:hover, #filter_waiting:hover, #filter_friends:hover, #filter_guild:hover,
#buttonRoomsListUp:hover, #buttonRoomsListDown:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-2px);
    animation: gbShine .7s ease-out !important;
}

@keyframes gbShine {
    from { background-position: -160% 0, 0 0; }
    to { background-position: 160% 0, 0 0; }
}

#buttonCreateRoom:active, #buttonJoin:active, #buttonQuickJoin:active, #buttonMyInfo:active, #buttonShop:active, #buttonCharge2:active,
#facebook_post:active, #event_button:active, #buttonOptions:active, #buttonChannels:active, #BrokerLogout:active, #BrokerRefresh:active,
#filter_all:active, #filter_waiting:active, #filter_friends:active, #filter_guild:active,
#buttonRoomsListUp:active, #buttonRoomsListDown:active {
    transform: translateY(2px);
    box-shadow: inset 0 -1px 0 var(--edge-c), inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 0 2px rgba(6, 16, 42, .85) !important;
}

/* Icono (::before) y texto (::after) de cada botón */
#buttonCreateRoom::before, #buttonJoin::before, #buttonQuickJoin::before, #buttonMyInfo::before, #buttonShop::before, #buttonCharge2::before,
#facebook_post::before, #event_button::before, #buttonOptions::before, #buttonChannels::before, #BrokerLogout::before, #BrokerRefresh::before,
#filter_all::before, #filter_waiting::before, #filter_friends::before, #filter_guild::before,
#buttonRoomsListUp::before, #buttonRoomsListDown::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 7px;
    width: 24px;
    height: 24px;
    transform: translateX(-50%);
    background: var(--ico) center / contain no-repeat;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35));
    pointer-events: none;
}

#buttonCreateRoom::after, #buttonJoin::after, #buttonQuickJoin::after, #buttonMyInfo::after, #buttonShop::after, #buttonCharge2::after,
#facebook_post::after, #event_button::after, #buttonOptions::after, #buttonChannels::after, #BrokerLogout::after, #BrokerRefresh::after,
#filter_all::after, #filter_waiting::after, #filter_friends::after, #filter_guild::after {
    content: var(--lbl);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    text-align: center;
    font: 600 12px/1 var(--font-d);
    color: #fff;
    letter-spacing: .2px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 0 4px rgba(0, 0, 0, .25);
    white-space: nowrap;
    pointer-events: none;
}

/* Iconos (SVG blanco, trazo redondeado) */
#buttonCreateRoom { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --lbl: "Crear"; --face: var(--b-orange); --edge-c: var(--b-orange-edge); }
#buttonJoin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4h8v16h-8M3 12h11M10 8l4 4-4 4'/%3E%3C/svg%3E"); --lbl: "Ir a sala"; }
#buttonQuickJoin { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z' fill='white'/%3E%3C/svg%3E"); --lbl: "Rápida"; --face: var(--b-gold); --edge-c: var(--b-gold-edge); }
#buttonMyInfo { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2.2'/%3E%3Cpath d='M5.8 16c.9-1.7 5.5-1.7 6.4 0M14.5 10h4M14.5 14h3'/%3E%3C/svg%3E"); --lbl: "Mi Info"; }
#buttonShop { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12H6.2zM9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E"); --lbl: "Tienda"; --face: var(--b-gold); --edge-c: var(--b-gold-edge); }
#buttonCharge2 { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6'/%3E%3C/svg%3E"); --lbl: "Cash"; --face: var(--b-green); --edge-c: var(--b-green-edge); }
#facebook_post { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 16.9l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z' fill='white'/%3E%3C/svg%3E"); --lbl: "Pass"; --face: var(--b-purple); --edge-c: var(--b-purple-edge); }
#event_button { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8.5' width='18' height='4.5' rx='1'/%3E%3Cpath d='M5 13v8h14v-8M12 8.5V21M12 8.5C10 4 6 4 6 6.5S10 8.5 12 8.5c2 0 6 .5 6-2S14 4 12 8.5'/%3E%3C/svg%3E"); --lbl: "Free Cash"; --face: var(--b-purple); --edge-c: var(--b-purple-edge); }
#buttonOptions { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E"); --lbl: "Opciones"; }
#buttonChannels { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E"); --lbl: "Mundos"; }
#BrokerLogout { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 3v8M7 6.5a7 7 0 1 0 10 0'/%3E%3C/svg%3E"); --lbl: "Salir"; --face: var(--b-red); --edge-c: var(--b-red-edge); }
#BrokerRefresh { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6M20 4v5h-5'/%3E%3C/svg%3E"); --lbl: ""; }
#filter_all { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E"); --lbl: "Todas"; }
#filter_waiting { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12M6 21h12M7.5 3c0 5 9 5 9 9s-9 4-9 9M16.5 3c0 5-9 5-9 9s9 4 9 9'/%3E%3C/svg%3E"); --lbl: "En espera"; }
#filter_friends { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.5 2.7-6 6-6s6 2.5 6 6M16 11.2a3.2 3.2 0 1 0 0-6.4M18 14.4c2 .7 3 2.6 3 5.6'/%3E%3C/svg%3E"); --lbl: "Amigos"; }
#filter_guild { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.3' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v6c0 4.6 3.2 7.7 7.5 9 4.3-1.3 7.5-4.4 7.5-9V6z'/%3E%3C/svg%3E"); --lbl: "Clan"; }
#buttonRoomsListUp { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E"); }
#buttonRoomsListDown { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }

/* ---------- Lobby: distribución "Lista de partidas" ----------
   Arriba: filtros, modos, páginas, título y Crear / Rápida / Ir a sala.
   Centro: 8 salas en tarjetas (2 columnas) y el chat debajo. Derecha: mi jugador y la lista.
   Abajo: Mundos, Pass, Free Cash, Tienda, Cash, Mi Info y Opciones. */

/* Botones con icono a la izquierda y texto a la derecha */
#buttonCreateRoom, #buttonJoin, #buttonQuickJoin, #buttonMyInfo, #buttonShop, #buttonCharge2, #facebook_post, #event_button,
#buttonOptions, #buttonChannels, #filter_all, #filter_waiting, #filter_friends, #filter_guild {
    height: 40px !important;
}

#buttonCreateRoom::before, #buttonJoin::before, #buttonQuickJoin::before, #buttonMyInfo::before, #buttonShop::before, #buttonCharge2::before,
#facebook_post::before, #event_button::before, #buttonOptions::before, #buttonChannels::before,
#filter_all::before, #filter_waiting::before, #filter_friends::before, #filter_guild::before {
    left: 11px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-55%);
}

#buttonCreateRoom::after, #buttonJoin::after, #buttonQuickJoin::after, #buttonMyInfo::after, #buttonShop::after, #buttonCharge2::after,
#facebook_post::after, #event_button::after, #buttonOptions::after, #buttonChannels::after,
#filter_all::after, #filter_waiting::after, #filter_friends::after, #filter_guild::after {
    left: 36px;
    right: 6px;
    top: 0;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Barra superior: acciones principales */
#buttonCreateRoom, #buttonQuickJoin, #buttonJoin { top: 10px !important; height: 42px !important; }
#buttonCreateRoom { left: 800px !important; width: 90px !important; }
#buttonQuickJoin { left: 896px !important; width: 100px !important; }
#buttonJoin { left: 1002px !important; width: 58px !important; }
#buttonQuickJoin { --lbl: "Rápida"; }
#buttonJoin { --lbl: "Ir a"; }

/* Filtros Todas / En espera / Amigos / Clan: 2x2 pastillas */
#filter_all, #filter_waiting, #filter_friends, #filter_guild {
    width: 74px !important;
    height: 23px !important;
    border-radius: 7px !important;
}

#filter_all, #filter_waiting { top: 8px !important; }
#filter_friends, #filter_guild { top: 35px !important; }
#filter_all, #filter_friends { left: 10px !important; }
#filter_waiting, #filter_guild { left: 88px !important; }

#filter_all::before, #filter_waiting::before, #filter_friends::before, #filter_guild::before { left: 6px; width: 13px; height: 13px; }
#filter_all::after, #filter_waiting::after, #filter_friends::after, #filter_guild::after { left: 20px; right: 2px; bottom: 3px; font-size: 11px; }

#filter_all, #filter_waiting, #filter_friends, #filter_guild { --face: linear-gradient(180deg, #4a6fa8, #2d4f86); --edge-c: #1a2f57; }

#filter_all.selectedFilter, #filter_waiting.selectedFilter, #filter_friends.selectedFilter, #filter_guild.selectedFilter {
    --face: var(--b-blue);
    --edge-c: var(--b-blue-edge);
    box-shadow: inset 0 -3px 0 var(--edge-c), inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 2px #ffc533 !important;
}

/* Filtros por modo: pastillas de texto 2x2 (antes eran cubos en imagen) */
#filter_normal, #filter_boss, #filter_same, #filter_score {
    width: 80px !important;
    height: 23px !important;
    border-radius: 7px !important;
    background: linear-gradient(180deg, #4a6fa8, #2d4f86) !important;
    box-shadow: inset 0 -3px 0 #1a2f57, inset 0 2px 0 rgba(255, 255, 255, .35), 0 0 0 2px rgba(6, 16, 42, .85) !important;
}

#filter_normal, #filter_boss { top: 8px !important; }
#filter_same, #filter_score { top: 35px !important; }
#filter_normal, #filter_same { left: 170px !important; }
#filter_boss, #filter_score { left: 254px !important; }

#filter_normal::after, #filter_boss::after, #filter_same::after, #filter_score::after {
    position: absolute;
    inset: 0 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 11px var(--font-d);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

#filter_normal::after { content: "Normal"; }
#filter_boss::after { content: "Boss"; }
#filter_same::after { content: "Same"; }
#filter_score::after { content: "Score"; }

#filter_normal.selectedFilter, #filter_boss.selectedFilter, #filter_same.selectedFilter, #filter_score.selectedFilter {
    background: var(--b-blue) !important;
    box-shadow: inset 0 -3px 0 var(--b-blue-edge), inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 2px #ffc533 !important;
}

/* Páginas: ◀ 1 ▶ */
#buttonRoomsListUp, #buttonRoomsListDown {
    --face: var(--b-orange);
    --edge-c: var(--b-orange-edge);
    top: 16px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
}

#buttonRoomsListUp { left: 350px !important; }
#buttonRoomsListDown { left: 414px !important; }
#buttonRoomsListUp::before, #buttonRoomsListDown::before { top: 50%; width: 18px; height: 18px; transform: translate(-50%, -60%); }

#buttonRoomsListUp { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 4 6 12l10 8z' fill='white'/%3E%3C/svg%3E"); }
#buttonRoomsListDown { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4l10 8-10 8z' fill='white'/%3E%3C/svg%3E"); }

#roomsPage {
    left: 382px !important;
    top: 20px !important;
    width: 30px !important;
    font: 700 17px var(--font-d) !important;
    color: #fff !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .4) !important;
}

/* Título "Lista de partidas" (sin elemento propio: se dibuja desde la lista de salas) */
#roomsList::before {
    content: "Lista de partidas";
    white-space: nowrap;
    position: absolute;
    left: 470px;
    top: -48px;
    width: 300px;
    text-align: center;
    font: 700 24px/1 var(--font-d);
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
    pointer-events: none;
}

/* Barra inferior */
#buttonChannels, #facebook_post, #event_button, #buttonShop, #buttonCharge2, #buttonMyInfo, #buttonOptions {
    top: 554px !important;
    height: 40px !important;
}

#buttonChannels { left: 10px !important; width: 96px !important; }
#facebook_post { left: 286px !important; width: 108px !important; }
#event_button { left: 402px !important; width: 128px !important; }
#buttonShop { left: 538px !important; width: 116px !important; }
#buttonCharge2 { left: 662px !important; width: 150px !important; }
#buttonMyInfo { left: 846px !important; width: 102px !important; }
#buttonOptions { left: 954px !important; width: 104px !important; }

#buttonCharge2 { --lbl: "Obtener Cash"; --face: var(--b-blue); --edge-c: var(--b-blue-edge); }
#buttonMyInfo { --face: linear-gradient(180deg, #4a6fa8, #2d4f86); --edge-c: #1a2f57; }
#buttonOptions { --face: linear-gradient(180deg, #4a6fa8, #2d4f86); --edge-c: #1a2f57; }
#buttonChannels { --face: linear-gradient(180deg, #4a6fa8, #2d4f86); --edge-c: #1a2f57; }
#buttonChannels::after { font-size: 13px; }

/* Free Cash: el temporizador va como etiqueta en la esquina */
#event_button .event_button_text {
    top: -9px !important;
    bottom: auto !important;
    left: auto !important;
    right: -4px;
    width: auto !important;
    transform: none;
    padding: 1px 6px;
    border-radius: 8px;
    font: 700 10px/1.3 var(--font-d) !important;
    color: #ffe07a !important;
    background: #06102a;
    box-shadow: 0 0 0 1px #ffc533;
    white-space: nowrap;
}

#event_button .event_button_text:empty { display: none; }

#facebook_post.intermitente { animation: gbPulse 1.4s ease-in-out infinite !important; }

@keyframes gbPulse {
    0%, 100% { box-shadow: inset 0 -4px 0 var(--edge-c), inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 2px rgba(6, 16, 42, .85), 0 0 0 rgba(255, 197, 51, 0); }
    50% { box-shadow: inset 0 -4px 0 var(--edge-c), inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 2px #ffc533, 0 0 18px rgba(255, 197, 51, .8); }
}

/* Chat del canal (debajo de las salas) */
#channelName { left: 20px !important; top: 374px !important; width: 300px !important; height: 18px !important; font: 700 13px var(--font-d) !important; color: #8fd3ff !important; background: none !important; border: 0 !important; }
#channel { left: 14px !important; top: 394px !important; width: 826px !important; height: 126px !important; }
#lobby_channel { left: 14px !important; top: 525px !important; width: 84px !important; height: 22px !important; }
#channelInput { left: 102px !important; top: 525px !important; width: 710px !important; height: 22px !important; box-sizing: border-box; padding: 0 8px; }
#lobbyBcm { left: 818px !important; top: 526px !important; }

/* Pestañas Todos / Amigos / Clan de la lista de jugadores */
.buttonAllBuddyList1, .buttonAllBuddyList2, .buttonAllBuddyList3 {
    background: none !important;
    border-bottom: 3px solid transparent;
    box-sizing: border-box;
}

.buttonAllBuddyList1::after, .buttonAllBuddyList2::after, .buttonAllBuddyList3::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 13px var(--font-d);
    color: var(--muted);
}

.buttonAllBuddyList1::after { content: "Todos"; }
.buttonAllBuddyList2::after { content: "Amigos"; }
.buttonAllBuddyList3::after { content: "Clan"; }

.buttonAllBuddyList1:hover::after, .buttonAllBuddyList2:hover::after, .buttonAllBuddyList3:hover::after { color: #fff; }

/* ---------- Paneles del lobby ---------- */

#channel, #playersList, #friendsList, #guildMembersList {
    background: var(--well) !important;
    border: 2px solid var(--well-edge) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45) !important;
    box-sizing: border-box;
}

#myInfoBox { background: none !important; border: 0 !important; box-shadow: none !important; }

#channelInput, body.Futuro #channelInput.TBGnBorder {
    background: #0b1d41 !important;
    border: 2px solid var(--well-edge) !important;
    border-radius: 7px;
    color: #fff !important;
}

/* ---------- Tarjetas de sala: 3 columnas x 3 filas ----------
   Cabecera con número y nombre; cuerpo con el mapa de fondo, estado, modo y jugadores.
   Azul = se puede entrar; rojo = llena o jugando; dorado = sala Power User. Sin imágenes salvo el mapa. */

#roomsList { left: 8px !important; top: 66px !important; width: 836px !important; }

#roomsList .room {
    width: 272px !important;
    height: 94px !important;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(180deg, #3d8ae8 0, #2363c4 24px, #0b1d41 24px) !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), 0 0 0 2px #06102a, 0 4px 0 #06102a, 0 8px 14px rgba(0, 0, 0, .4);
    transition: transform .12s, filter .12s;
}

#roomsList .room:has(.status-playing), #roomsList .room:has(.status-full) {
    background: linear-gradient(180deg, #ef5a7a 0, #c2304f 24px, #0b1d41 24px) !important;
}

#roomsList .room.powerUserRoom {
    background: linear-gradient(180deg, #ffd45a 0, #e89b0c 24px, #0b1d41 24px) !important;
}

#roomsList .room:hover { transform: translateY(-2px); filter: brightness(1.12); }

#room0, #room3, #room6 { left: 0 !important; }
#room1, #room4, #room7 { left: 282px !important; }
#room2, #room5, #room8 { left: 564px !important; }
#room0, #room1, #room2 { top: 0 !important; }
#room3, #room4, #room5 { top: 103px !important; }
#room6, #room7, #room8 { top: 206px !important; }

/* Mapa como fondo del cuerpo */
#roomsList .room .roomMap {
    left: -18px !important;
    top: 24px !important;
    transform: scale(1.45) !important;
    transform-origin: 0 0;
    filter: brightness(.78) saturate(1.1);
    border-radius: 0;
    box-shadow: none;
}

/* Degradado para que el texto se lea sobre el mapa */
#roomsList .room::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 24px;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(6, 16, 42, .1), rgba(6, 16, 42, .55));
    pointer-events: none;
}

#roomsList .room .roomNumber {
    left: 7px !important;
    top: 5px !important;
    z-index: 2;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(6, 16, 42, .75);
}

#roomsList .room .roomTitle {
    left: 48px !important;
    top: 3px !important;
    width: 200px !important;
    z-index: 2;
    font: 700 13px/18px var(--font-d) !important;
    text-transform: uppercase;
    color: #fff !important;
    text-overflow: ellipsis;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .55) !important;
}

/* Estado: pastilla con punto de color */
#roomsList .room .status {
    left: 8px !important;
    top: 64px !important;
    width: auto !important;
    height: 22px !important;
    z-index: 2;
    padding: 0 10px 0 22px;
    border-radius: 11px;
    background: rgba(6, 16, 42, .85) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

#roomsList .room .status::after {
    display: block;
    font: 700 11px/22px var(--font-d);
    letter-spacing: .5px;
    color: #fff;
    white-space: nowrap;
}

#roomsList .room .status::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

#roomsList .room .status-waiting::after { content: "EN ESPERA"; }
#roomsList .room .status-playing::after { content: "JUGANDO"; }
#roomsList .room .status-full::after { content: "LLENA"; }
#roomsList .room .status-waiting::before { background: #4ad66d; box-shadow: 0 0 6px #4ad66d; }
#roomsList .room .status-playing::before, #roomsList .room .status-full::before { background: #ef4b5f; box-shadow: 0 0 6px #ef4b5f; }

/* Modo: chip de texto en lugar del cubo */
#roomsList .room .gameMode {
    left: auto !important;
    right: 8px;
    top: 66px !important;
    width: auto !important;
    height: 18px !important;
    z-index: 2;
    transform: none;
    padding: 0 7px;
    border-radius: 5px;
    background: rgba(6, 16, 42, .85) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 197, 51, .6);
}

#roomsList .room .gameMode::after { display: block; font: 700 10px/18px var(--font-d); letter-spacing: .5px; color: #ffd273; }
#roomsList .room .gameMode.iconMode0::after { content: "NORMAL"; }
#roomsList .room .gameMode.iconMode1::after { content: "BOSS"; }
#roomsList .room .gameMode.iconMode2::after { content: "SAME"; }
#roomsList .room .gameMode.iconMode3::after { content: "SCORE"; }

/* Jugadores "3/8" arriba a la derecha del cuerpo */
#roomsList .room .numPlayers, #roomsList .room .maxPlayers {
    top: 30px !important;
    z-index: 2;
    width: auto !important;
    font: 700 13px/20px var(--font-d) !important;
    color: #fff !important;
    text-shadow: none !important;
}

#roomsList .room .numPlayers {
    left: auto !important;
    right: 8px;
    width: 46px !important;
    height: 20px;
    padding-left: 13px;
    box-sizing: border-box;
    border-radius: 10px;
    background: rgba(6, 16, 42, .85);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

#roomsList .room .maxPlayers { left: auto !important; right: 15px; }
#roomsList .room .maxPlayers::before { content: "/"; margin-right: 1px; }

/* Candado, amigo y clan: iconos de texto en lugar de imágenes */
#roomsList .room .roomLock { left: auto !important; right: 60px; top: 31px !important; z-index: 2; background: none !important; }
#roomsList .room .roomLock.roomLocked::after { content: "🔒"; font-size: 13px; line-height: 18px; }
#roomsList .room .roomBuddy, #roomsList .room .roomGuildMember {
    top: 31px !important;
    width: 18px !important;
    height: 18px !important;
    z-index: 2;
    background: none !important;
    font-size: 13px;
    line-height: 18px;
}
#roomsList .room .roomBuddy { left: 8px !important; }
#roomsList .room .roomGuildMember { left: 28px !important; }
#roomsList .room .roomBuddy::after { content: "👥"; }
#roomsList .room .roomGuildMember::after { content: "🛡️"; }
#roomsList .room .allowWatch { left: auto !important; right: 6px; top: 3px !important; z-index: 2; }

/* Vista con los jugadores de la sala (clic derecho) */
#roomsList .room.roomExtraInfo {
    height: 148px !important;
    z-index: 5;
    background: linear-gradient(180deg, #3d8ae8 0, #2363c4 24px, #12306a 24px, #0b1d41 100%) !important;
}

#roomsList .room.roomExtraInfo .roomMap { opacity: .25; }
.roomExtraInfoSlot { color: #fff !important; z-index: 3; }

/* Megáfono del chat: icono SVG en vez de imagen */
.BtnBcm {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc533' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4h4l7 5V5L7 10z'/%3E%3Cpath d='M17 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E") center / 18px no-repeat !important;
}

/* Panel lateral de rankings: desactivado */
#ranking_panel, #ranking_panel_open { display: none !important; }

/* ---------- Lista de mundos (selección de servidor) ----------
   Pantalla completa: cabecera, servidores en 3 columnas a la izquierda, columna derecha
   (piloto, en línea, consejo, comunidad) y barra inferior con Salir / Actualizar.
   Coordenadas dentro de #BrokerWindow (1050x584). */

#container:not(.Game) #BrokerScreen > .AlertBoxBackground { background: #081429 !important; opacity: 1 !important; backdrop-filter: none; }

#BrokerWindow {
    left: 8px !important;
    top: 8px !important;
    width: 1050px !important;
    height: 584px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Cabecera */
#BrokerWindow::before {
    content: "Lista de mundos";
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 1050px;
    height: 60px;
    box-sizing: border-box;
    padding: 0 24px;
    border-radius: 14px;
    background: var(--panel);
    box-shadow: inset 0 0 0 2px #3a78d0, 0 5px 0 #06102a;
    font: 700 28px/60px var(--font-d);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .4);
}

#BrokerWindow::after {
    content: "Elige un mundo para entrar a su lista de partidas.";
    position: absolute;
    right: 24px;
    top: 0;
    font: 700 14px/60px var(--font);
    color: #d6e6ff;
}

/* Panel izquierdo de servidores (usa el div vacío #BrokerChannels como fondo) */
#BrokerChannels {
    position: absolute;
    left: 0;
    top: 72px;
    width: 790px;
    height: 456px;
    border-radius: 14px;
    background: rgba(11, 29, 65, .92);
    box-shadow: inset 0 0 0 2px #1f4a8c;
}

#BrokerTitle {
    z-index: 1;
    opacity: 1 !important;
    left: 18px !important;
    top: 82px !important;
    width: 500px !important;
    height: 22px !important;
    text-align: left !important;
    font: 700 15px/22px var(--font-d) !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase;
    color: #fff !important;
}

/* El contenedor sin id de los servidores 10 y 11 deja de empujarlos al fondo */
#BrokerWindow > div:not([id]) {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
    display: block !important;
    pointer-events: none;
}

#BrokerWindow > div:not([id]) > .BrokerChannel { pointer-events: auto; }

/* Tarjetas: 3 columnas x 4 filas */
.BrokerChannel {
    position: absolute !important;
    width: 248px !important;
    height: 96px !important;
    bottom: auto !important;
}

#BrokerChannel0, #BrokerChannel3, #BrokerChannel6, #BrokerChannel9 { left: 16px !important; }
#BrokerChannel1, #BrokerChannel4, #BrokerChannel7, #BrokerChannel10 { left: 274px !important; }
#BrokerChannel2, #BrokerChannel5, #BrokerChannel8 { left: 532px !important; }
#BrokerChannel0, #BrokerChannel1, #BrokerChannel2 { top: 112px !important; }
#BrokerChannel3, #BrokerChannel4, #BrokerChannel5 { top: 216px !important; }
#BrokerChannel6, #BrokerChannel7, #BrokerChannel8 { top: 320px !important; }
#BrokerChannel9, #BrokerChannel10 { top: 424px !important; }

.BrokerChannel {
    --c1: #3d8ae8;
    --c2: #2363c4;
    background:
        linear-gradient(180deg, var(--c1) 0, var(--c2) 28px, transparent 28px),
        linear-gradient(180deg, #173f80, #0f2b5e) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), 0 0 0 2px #06102a, 0 5px 0 #06102a, 0 10px 18px rgba(0, 0, 0, .45) !important;
    transition: transform .12s, filter .12s;
}

.BrokerChannel::before { display: none; }

#BrokerChannel0, #BrokerChannel5, #BrokerChannel10 { --c1: #3d8ae8; --c2: #2363c4; }
#BrokerChannel1, #BrokerChannel6 { --c1: #4ad66d; --c2: #27a84a; }
#BrokerChannel2, #BrokerChannel7 { --c1: #ffb057; --c2: #ee6a0c; }
#BrokerChannel3, #BrokerChannel8 { --c1: #e5476b; --c2: #c2304f; }
#BrokerChannel4, #BrokerChannel9 { --c1: #8657f0; --c2: #6638d0; }

.BrokerChannel:not(.BrokerChannelOnline) { filter: grayscale(.85) brightness(.65); }
.BrokerChannelOnline:hover { transform: translateY(-3px); filter: brightness(1.08); }

.BrokerChannelName {
    left: 12px !important;
    top: 4px !important;
    max-width: 224px !important;
    font: 600 14px/20px var(--font-d) !important;
    color: #fff !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .45) !important;
}

/* Rangos permitidos (iconos de rango del juego) */
.BrokerRanks {
    left: 12px !important;
    top: 36px !important;
    right: auto !important;
    text-align: left !important;
    color: #a9c1e6 !important;
    font-size: 11px;
}

/* Estado de la tarjeta */
.BrokerChannel::after {
    content: "No disponible";
    position: absolute;
    right: 12px;
    top: 38px;
    font: 700 11px var(--font-d);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a9c1e6;
}

.BrokerChannelOnline::after { content: "Entrar ›"; color: #4ad66d; }
.BrokerChannelFull::after { content: "Lleno"; color: #ffb057; }
.BrokerChannelFullIcon { display: none !important; }

/* Población: barra ancha con etiqueta */
.BrokerMaxPlayers2 {
    left: 12px !important;
    top: 76px !important;
    width: 224px !important;
    height: 8px !important;
    border: 0 !important;
    border-radius: 4px;
    background: #06102a !important;
}

.BrokerMaxPlayers2::before {
    content: "Población del servidor";
    position: absolute;
    left: 0;
    top: -16px;
    font: 700 9px var(--font-d);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a9c1e6;
    white-space: nowrap;
}

/* El juego da el ancho en px sobre 74: se estira a los 224 px de la barra */
.BrokerNumPlayers2 {
    left: 13px !important;
    top: 77px !important;
    height: 6px !important;
    max-width: 74px;
    transform: scaleX(3.02);
    transform-origin: 0 0;
    border-radius: 3px;
    background:
        repeating-linear-gradient(115deg, rgba(255, 255, 255, .3) 0 1px, transparent 1px 2.4px),
        linear-gradient(90deg, #4ad66d, #ffc533 70%, #ff8a1f) !important;
    box-shadow: none !important;
}

.PrixTimer, .TorneoTimerServers, .Torneo2TimerServers {
    left: auto !important;
    right: 12px !important;
    top: 56px !important;
    font: 700 11px var(--font-d) !important;
    color: #ffd273 !important;
}

/* Columna derecha */
#BrokerPlayer {
    left: 808px !important;
    top: 80px !important;
    width: 250px !important;
    height: 64px !important;
    box-sizing: border-box;
    padding-top: 22px;
    border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #7a3a6a, #2a2f6e) !important;
    box-shadow: inset 0 0 0 2px #3a78d0, 0 5px 0 #06102a !important;
    font: 700 18px var(--font-d) !important;
    text-align: center;
    translate: none !important;
}

#BrokerPlayer::before {
    content: "Tu piloto";
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;
    font: 700 10px var(--font-d);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffc533;
}

#BrokerSide {
    position: absolute;
    left: 800px;
    top: 148px;
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bsCard {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, #1d4688, #12306a);
    box-shadow: inset 0 0 0 2px #3a78d0, 0 5px 0 #06102a;
    color: #d6e6ff;
    font-size: 12px;
}

.bsCard strong { font: 700 15px var(--font-d); color: #fff; }
.bsKicker { font: 700 10px var(--font-d); letter-spacing: 2px; text-transform: uppercase; color: #5cb8ff; }

.bsOnline { flex-direction: row; align-items: baseline; gap: 8px; }
.bsOnline b { font: 700 30px/1 var(--font-d); color: #4ad66d; text-shadow: 0 0 12px rgba(74, 214, 109, .5); }

.bsLinks { display: flex; gap: 8px; margin-top: 6px; }

.bsLinks a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    border-radius: 9px;
    font: 700 13px var(--font-d);
    color: #fff;
    text-decoration: none;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 0 2px #06102a;
}

.bsLinks a svg { width: 18px; height: 18px; }
.bsLinks a.fb { background: linear-gradient(180deg, #4f8df5, #2c62d1); }
.bsLinks a.wa { background: linear-gradient(180deg, #5fe07f, #27a84a); }
.bsLinks a:hover { filter: brightness(1.1); }

/* El aviso "¿Nuevo usuario?" vive ahora en la columna derecha */
#BrokerHelp, #NewUser2 { display: none !important; }
#BrokerTotalPlayers:empty { display: none; }

/* Barra inferior */
#BrokerFoot {
    position: absolute;
    left: 0;
    top: 536px;
    width: 1050px;
    height: 48px;
    box-sizing: border-box;
    padding: 0 150px;
    border-radius: 14px;
    background: var(--panel);
    box-shadow: inset 0 0 0 2px #3a78d0, 0 5px 0 #06102a;
    font: 600 12px/48px var(--font);
    color: #a9c1e6;
    text-align: center;
}

#BrokerLogout {
    left: 10px !important;
    top: 541px !important;
    bottom: auto !important;
    width: 116px !important;
    height: 38px !important;
    z-index: 2;
}

#BrokerLogout::before { left: 12px; top: 50%; width: 20px; height: 20px; transform: translateY(-55%); }
#BrokerLogout::after { left: 36px; right: 8px; top: 0; bottom: 4px; display: flex; align-items: center; justify-content: center; font-size: 15px; }

#BrokerRefresh {
    left: auto !important;
    right: 10px !important;
    top: 541px !important;
    width: 116px !important;
    height: 38px !important;
    border-radius: 10px !important;
    z-index: 2;
    --lbl: "Actualizar";
}

#BrokerRefresh::before { left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-55%); }
#BrokerRefresh::after { content: var(--lbl); position: absolute; left: 34px; right: 8px; top: 0; bottom: 4px; display: flex; align-items: center; justify-content: center; font: 600 14px var(--font-d); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }

/* ---------- Diálogos ---------- */

.AlertBox {
    background: linear-gradient(180deg, #1d4688 0%, #12306a 100%) !important;
    border: 2px solid var(--panel-edge) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 0 #06102a, 0 18px 40px rgba(0, 0, 0, .55) !important;
}

.AlertBox::before {
    background: var(--head-grad) !important;
    border-radius: 10px 10px 0 0 !important;
    border-bottom: 2px solid #1a4fa8 !important;
}

.AlertBox::after { display: none; }

.AlertBoxTitle {
    font-family: var(--font-d) !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    color: #fff !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .35) !important;
}

.AlertBoxContent { font-weight: 600; }

.AlertBoxBackground {
    background: rgba(4, 10, 26, .72) !important;
    backdrop-filter: blur(3px);
    opacity: 1 !important;
}

/* Ventanas (Pass, Radar, Charge) */
#freecashWindow, #chargeWindow {
    background: linear-gradient(180deg, #13306a, #0b1d41) !important;
    border: 2px solid var(--panel-edge) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 0 #06102a, 0 20px 40px rgba(0, 0, 0, .55) !important;
}

#freecashWindow .DragonWindowTitleBar {
    background: var(--head-grad) !important;
    border-bottom: 2px solid #1a4fa8 !important;
    border-radius: 12px 12px 0 0 !important;
}

#freecashWindow .DragonWindowTitle {
    font-family: var(--font-d) !important;
    font-size: 19px !important;
    letter-spacing: .5px !important;
    text-transform: none !important;
    color: #fff !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .35) !important;
}

/* Botón cerrar de las ventanas: cuadrado azul con una X */
.DragonWindowClose, #chargeWindowClose {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 16px no-repeat,
        var(--b-blue) !important;
    box-shadow: inset 0 -3px 0 var(--b-blue-edge), inset 0 2px 0 rgba(255, 255, 255, .4), 0 0 0 2px #06102a !important;
}

#freecashWindow .DragonWindowClose { top: 5px !important; }

/* ---------- Pantalla de resultados (fin de partida) ---------- */

#game_over {
    background: rgba(4, 10, 26, .55) !important;
}

#game_over::before, #game_over::after {
    content: "";
    position: absolute;
    top: 22px;
    width: 286px;
    height: 556px;
    border-radius: 14px;
    background: linear-gradient(180deg, #1d4688 0%, #0f2b5e 100%);
    box-shadow: inset 0 0 0 2px #3a78d0, 0 6px 0 #06102a, 0 16px 32px rgba(0, 0, 0, .5);
}

#game_over::before { left: 110px; }
#game_over::after { left: 405px; }

#scores_lose_a, #scores_lose_b {
    z-index: 1;
    top: 30px !important;
    width: 270px !important;
    height: 52px !important;
    border-radius: 10px;
    background: var(--b-red) !important;
    box-shadow: inset 0 -4px 0 var(--b-red-edge), inset 0 2px 0 rgba(255, 255, 255, .4), 0 0 0 2px #06102a;
}

#scores_lose_a { left: 118px !important; }
#scores_lose_b { left: 413px !important; }

#scores_lose_a.win, #scores_lose_b.win {
    background: var(--b-gold) !important;
    box-shadow: inset 0 -4px 0 var(--b-gold-edge), inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 2px #06102a, 0 0 24px rgba(255, 197, 51, .6);
}

#scores_lose_a::after, #scores_lose_b::after {
    content: "DERROTA";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 28px var(--font-d);
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}

#scores_lose_a.win::after, #scores_lose_b.win::after { content: "VICTORIA"; color: #4a2a00; text-shadow: 0 2px 0 rgba(255, 255, 255, .5); }

#game_over .score {
    z-index: 1;
    background: linear-gradient(180deg, #2457a3, #173f80) !important;
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), 0 3px 0 #06102a;
}

#game_over .score_me {
    background: none !important;
    border-radius: 10px;
    box-shadow: inset 0 0 0 3px #ffc533, 0 0 16px rgba(255, 197, 51, .55);
}

#game_over .score_name { font-family: var(--font-d) !important; font-size: 13px !important; color: #fff !important; }
#game_over .score_gp { color: #8fd3ff !important; }
#game_over .score_gold { color: #ffd273 !important; }

#GameOverMyGPGot, #GameOverMyGP, #GameOverMyGPNext, #GameOverMyGoldGot, #GameOverMyGold {
    z-index: 2;
    font-family: var(--font-d) !important;
}

@media (prefers-reduced-motion: reduce) {
    #facebook_post.intermitente, .room, .BrokerChannelOnline { animation: none !important; transition: none !important; }
}

/* ---------- Fondos del lobby y de la sala (SVG en el estilo Batalla) ---------- */

body.Futuro #channelScreen { background: url(/static/images/ui/lobby-batalla.svg) 0 0 / 100% 100% no-repeat !important; }
body.Futuro #roomScreen { background: url(/static/images/ui/room-batalla.svg) 0 0 / 100% 100% no-repeat !important; }

/* Datos del jugador */
body.Futuro #myName2 { font-family: var(--font-d); text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
body.Futuro #myPhotoDiv { border-radius: 8px; box-shadow: 0 0 0 2px #ffc533, 0 3px 0 #06102a; }
body.Futuro #myGP2 { color: #8fd3ff !important; }
body.Futuro #myCash2 { color: #7fe0ff !important; }
body.Futuro #myGold2 { color: #ffd273 !important; }
body.Futuro .playerListItem:hover { background: rgba(92, 184, 255, .16); }

/* ---------- Pestañas Todos/Amigos/Clan (lobby) e Ítems/Amigos/Clan (sala) ---------- */

#room_item_buddy_tab1, #room_item_buddy_tab2, #room_item_buddy_tab3,
.room_item_buddy_tab1, .room_item_buddy_tab2, .room_item_buddy_tab3 {
    background: none !important;
    width: 74px !important;
    height: 28px !important;
}

#room_item_buddy_tab1::after, #room_item_buddy_tab2::after, #room_item_buddy_tab3::after,
.room_item_buddy_tab1::after, .room_item_buddy_tab2::after, .room_item_buddy_tab3::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 14px var(--font-d);
    color: var(--muted);
}

#room_item_buddy_tab1::after, .room_item_buddy_tab1::after { content: "Ítems"; }
#room_item_buddy_tab2::after, .room_item_buddy_tab2::after { content: "Amigos"; }
#room_item_buddy_tab3::after, .room_item_buddy_tab3::after { content: "Clan"; }

/* Pestaña activa: la primera si no hay BuddyList/Guild, la segunda con BuddyList, la tercera con Guild */
.buttonAllBuddyList1:not(.BuddyList):not(.Guild), .buttonAllBuddyList2.BuddyList, .buttonAllBuddyList3.Guild,
#room_item_buddy_tab1:not(.BuddyList):not(.Guild), #room_item_buddy_tab2.BuddyList, #room_item_buddy_tab3.Guild,
.room_item_buddy_tab1:not(.BuddyList):not(.Guild), .room_item_buddy_tab2.BuddyList, .room_item_buddy_tab3.Guild {
    border-bottom: 3px solid #ffc533 !important;
}

.buttonAllBuddyList1:not(.BuddyList):not(.Guild)::after, .buttonAllBuddyList2.BuddyList::after, .buttonAllBuddyList3.Guild::after,
#room_item_buddy_tab1:not(.BuddyList):not(.Guild)::after, #room_item_buddy_tab2.BuddyList::after, #room_item_buddy_tab3.Guild::after,
.room_item_buddy_tab1:not(.BuddyList):not(.Guild)::after, .room_item_buddy_tab2.BuddyList::after, .room_item_buddy_tab3.Guild::after {
    color: #fff;
}

/* ---------- Sala: INICIAR / LISTO ---------- */

body.Futuro #roomButtonStart, body.Futuro #roomButtonReady {
    border: 0 !important;
    border-radius: 12px !important;
    animation: none !important;
    background: var(--b-green) !important;
    box-shadow: inset 0 -5px 0 var(--b-green-edge), inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 2px #06102a, 0 6px 14px rgba(0, 0, 0, .45) !important;
}

body.Futuro #roomButtonReady {
    background: var(--b-gold) !important;
    box-shadow: inset 0 -5px 0 var(--b-gold-edge), inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 2px #06102a, 0 6px 14px rgba(0, 0, 0, .45) !important;
}

body.Futuro #roomButtonStart::before, body.Futuro #roomButtonReady::before {
    font: 700 22px var(--font-d) !important;
    letter-spacing: 1.5px !important;
    padding-bottom: 3px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .35) !important;
}

body.Futuro #roomButtonReady::before { color: #4a2a00; text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important; }

/* ---------- Sala: barra inferior Salir / Tienda / Ajustes / Cash gratis ---------- */

body.Futuro #roomButtonBack, body.Futuro #buttonShopFromRoom, body.Futuro #buttonOptionsRoom, body.Futuro #container.Room #facebook_post {
    --face: var(--b-blue);
    --edge-c: var(--b-blue-edge);
    top: 560px !important;
    width: 118px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--face) !important;
    box-shadow: inset 0 -4px 0 var(--edge-c), inset 0 2px 0 rgba(255, 255, 255, .4), 0 0 0 2px #06102a !important;
    animation: none !important;
}

body.Futuro #roomButtonBack { --face: var(--b-red); --edge-c: var(--b-red-edge); }
body.Futuro #buttonShopFromRoom { --face: var(--b-gold); --edge-c: var(--b-gold-edge); }
body.Futuro #container.Room #facebook_post { --face: var(--b-purple); --edge-c: var(--b-purple-edge); }

body.Futuro #roomButtonBack::before, body.Futuro #buttonShopFromRoom::before, body.Futuro #buttonOptionsRoom::before, body.Futuro #container.Room #facebook_post::before {
    width: auto !important;
    height: auto !important;
    transform: none !important;
    background: none !important;
    filter: none !important;
    padding-bottom: 3px;
    font: 600 14px var(--font-d) !important;
    letter-spacing: .3px !important;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .45) !important;
}

body.Futuro #roomButtonBack::before { content: "◄ Salir"; }
body.Futuro #buttonShopFromRoom::before { content: "Tienda"; color: #4a2a00; text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important; }
body.Futuro #buttonOptionsRoom::before { content: "Ajustes"; }
body.Futuro #container.Room #facebook_post::before { content: "Cash gratis"; }
body.Futuro #container.Room #facebook_post::after { display: none; }

/* ---------- Opciones ---------- */

#OptionsDialog {
    background: linear-gradient(180deg, #1d4688 0%, #0f2b5e 100%) !important;
    border: 2px solid var(--panel-edge) !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 0 #06102a, 0 20px 40px rgba(0, 0, 0, .55) !important;
    overflow: hidden;
}

#OptionsDialog::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 26px;
    background: var(--head-grad);
    border-bottom: 2px solid #1a4fa8;
    pointer-events: none;
}

#OptionsDialog .OptionsDialogTitle {
    z-index: 1;
    font-family: var(--font-d) !important;
    font-size: 17px !important;
    color: #fff !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .35) !important;
}

#OptionsDialog #OptionsText1, #OptionsDialog #OptionsText6, #OptionsDialog #OptionsText7, #OptionsDialog #OptionsText8,
#OptionsDialog #OptionsText9, #OptionsDialog #OptionsText10, #OptionsDialog #OptionsText3 {
    font-family: var(--font-d) !important;
    font-size: 13px !important;
    letter-spacing: .5px !important;
    color: #ffd273 !important;
}

#OptionsOK {
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--b-gold) !important;
    box-shadow: inset 0 -4px 0 var(--b-gold-edge), inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 2px #06102a !important;
    text-shadow: none !important;
}

#OptionsOK::after { font: 700 15px var(--font-d) !important; color: #4a2a00; padding-bottom: 3px; }

#OptionsDialog select, #OptionsDialog input[type=button], #OptionsDialog button {
    border: 2px solid #1f4a8c !important;
    border-radius: 8px !important;
    background: #0b1d41 !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* =====================================================================
   Formato ancho (16:9): fuera de la partida el contenedor mide 1066x600
   (Resize() en DLL.dll usa GAME_WIDE_W). La partida sigue en 800x600.
   El contenido pensado para 800 se reparte con `translate`:
   +133 = centrado, +266 = pegado al borde derecho.
   ===================================================================== */

#container:not(.Game) { width: 1066px !important; }
#channelScreen, #roomScreen, #shopScreen { width: 1066px !important; }

/* Diálogos y selección de servidor centrados */
#container:not(.Game) #myDialog .AlertBox,
#dialogCreateRoomWarp, #dialog_change_name_div, #dialog_join_room_div,
#tournament_waiting, #tournament_info, #tournament_info2 {
    translate: 133px 0;
}

#container:not(.Game) #BrokerScreen,
#container:not(.Game) #BrokerScreen > .AlertBoxBackground,
#container:not(.Game) #myDialog,
#container:not(.Game) #myDialog .AlertBoxBackground { width: 1066px !important; }

/* Lobby: columna derecha (mi jugador y lista) pegada al borde */
/* GP, Cash y Gold usan right: y ya quedan a la derecha al ensanchar */
#myInfoBox, #myRank2, #myName2, #myName3,
#myPhotoDiv, #myGFPhotoDiv, #myGFStatus, #myGFName, #channel_player, #playersList,
#buttonAllBuddyList1, #buttonAllBuddyList2, #buttonAllBuddyList3,
#container.Lobby #friendsList, #container.Lobby #guildMembersList {
    translate: 266px 0;
}

/* Sala: panel central al centro, equipo B y panel derecho al borde */
#room_map, #room_game_mode, #room_players, #room_avatars, #room_wind, #room_turn_time_text, #room_turn_time,
#room_options_button, #roomButtonReady, #roomButtonStart, #roomButtonChangeTeam, #roomButtonMobile, #roomMobileSelect,
#gp_team_a, #gp_team_b, #gp_rate, #no_win_bonus, #RoomS1Disabled, #RoomRandomTeams, #RoomWatchers, #room_timer,
#team_search, #roomTutorialBack, #roomTutorialStart, #dialog_change_title_div, #playerInfoDialog, #dialog_room_options,
#select_bot_div, #timer_room_header, #timer_room, #RoomMapsContainer {
    translate: 133px 0;
}

#playerInRoom1, #playerInRoom3, #playerInRoom5, #playerInRoom7, #vortex1, #vortex3, #vortex5, #vortex7,
#room_item_buddy_tab1, #room_item_buddy_tab2, #room_item_buddy_tab3, #friendsListExtra, #guildRoomTabExtra,
#container.Room #itemsSelection, #roomBcm {
    translate: 266px 0;
}

body.Futuro #roomChat { width: 770px !important; }
body.Futuro #roomChat .viewport, body.Futuro #roomChat .overview { width: 756px !important; }
body.Futuro #roomInput { width: 740px !important; }

/* Barra inferior de la sala, repartida en el ancho del chat */
body.Futuro #roomButtonBack, body.Futuro #buttonShopFromRoom, body.Futuro #buttonOptionsRoom, body.Futuro #container.Room #facebook_post { width: 182px !important; }
body.Futuro #roomButtonBack { left: 18px !important; }
body.Futuro #buttonShopFromRoom { left: 212px !important; }
body.Futuro #buttonOptionsRoom { left: 406px !important; }
body.Futuro #container.Room #facebook_post { left: 600px !important; }

/* Tienda: se centra tal cual; su fondo es una imagen de 800x600 */
#shopScreen > * { translate: 133px 0; }
#shopScreen { background-size: 800px 600px !important; background-position: 133px 0 !important; background-repeat: no-repeat !important; background-color: #0a1430 !important; }

/* =====================================================================
   Transparencia y arte de los mapas del juego detrás de los paneles,
   avatar del piloto, filas de jugadores, puerta de salida y efectos.
   ===================================================================== */

/* Arte de un mapa distinto en cada pantalla (desenfocado), visto a través de los paneles */
#container:not(.Game)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/static/images/maps/metro_bg.jpg) center / cover no-repeat;
    filter: blur(6px) brightness(.5) saturate(1.15);
    transform: scale(1.06);
    animation: gbPan 40s ease-in-out infinite alternate;
    pointer-events: none;
}

#container.Room::before { background-image: url(/static/images/maps/nirvana_bg.jpg); }
#container.Shop::before { background-image: url(/static/images/maps/candy_bg.jpg); }

@keyframes gbPan {
    from { transform: scale(1.06) translate(0, 0); }
    to { transform: scale(1.14) translate(-2%, 1%); }
}

/* Paneles de cristal */
#channel, #playersList, #friendsList, #guildMembersList {
    background: rgba(6, 16, 42, .5) !important;
    backdrop-filter: blur(4px);
}

/* ---------- Lista de mundos: fondo de mapa y tarjetas con arte ---------- */

#container:not(.Game) #BrokerScreen > .AlertBoxBackground {
    background: url(/static/images/maps/dragonlava_bg.jpg) center / cover no-repeat !important;
    filter: blur(5px) brightness(.45) saturate(1.2);
}

#BrokerWindow::before, #BrokerFoot {
    background: linear-gradient(180deg, rgba(36, 87, 163, .78), rgba(23, 63, 128, .82)) !important;
    backdrop-filter: blur(6px);
}

#BrokerChannels { background: rgba(6, 16, 42, .55) !important; backdrop-filter: blur(6px); }
.bsCard { background: linear-gradient(180deg, rgba(29, 70, 136, .8), rgba(18, 48, 106, .85)) !important; backdrop-filter: blur(6px); }

/* Cada mundo con el arte de un mapa diferente */
#BrokerChannel0 { --map: url(/static/images/maps/sea_bg2.jpg); }
#BrokerChannel1 { --map: url(/static/images/maps/forest_bg.jpg); }
#BrokerChannel2 { --map: url(/static/images/maps/dragonlava_bg.jpg); }
#BrokerChannel3 { --map: url(/static/images/maps/balloon_bg.jpg); }
#BrokerChannel4 { --map: url(/static/images/maps/sky_bg.jpg); }
#BrokerChannel5 { --map: url(/static/images/maps/thousandsunny_bg.jpg); }
#BrokerChannel6 { --map: url(/static/images/maps/space_bg.jpg); }
#BrokerChannel7 { --map: url(/static/images/maps/treeoflife_bg.jpg); }
#BrokerChannel8 { --map: url(/static/images/maps/clocktower_bg.jpg); }
#BrokerChannel9 { --map: url(/static/images/maps/sea_bg4.jpg); }
#BrokerChannel10 { --map: url(/static/images/maps/space_bg2.jpg); }

.BrokerChannel {
    background:
        linear-gradient(180deg, var(--c1) 0, var(--c2) 28px, transparent 28px),
        linear-gradient(180deg, rgba(15, 43, 94, .25) 28px, rgba(6, 16, 42, .88) 100%),
        var(--map, none) center 40% / cover no-repeat,
        #0f2b5e !important;
}

.BrokerChannelOnline:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3), 0 0 0 2px #ffc533, 0 0 22px rgba(255, 197, 51, .45), 0 10px 18px rgba(0, 0, 0, .45) !important;
}

.BrokerChannelOnline::after { animation: gbBlink 1.6s ease-in-out infinite; }
@keyframes gbBlink { 50% { opacity: .55; } }

/* Tarjeta del piloto con el avatar dibujado por el juego */
#BrokerPilot {
    position: absolute;
    left: 800px;
    top: 72px;
    width: 250px;
    height: 176px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(6, 16, 42, .55);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 2px #3a78d0, 0 5px 0 #06102a;
}

/* Franja inclinada y plataforma */
#BrokerPilot::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 30px;
    height: 88px;
    border-radius: 6px;
    transform: skewX(-10deg);
    background: linear-gradient(135deg, #b8467a, #5a2a6e);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2);
}

#BrokerPilot::after {
    content: "";
    position: absolute;
    left: 70px;
    top: 124px;
    width: 110px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, .7), rgba(159, 208, 255, .35) 55%, transparent 72%);
}

.bpKicker {
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;
    z-index: 1;
    text-align: center;
    font: 700 10px var(--font-d);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffc533;
}

/* El juego dibuja el avatar con los pies en el origen del contenedor */
#BrokerAvatar {
    position: absolute;
    left: 125px;
    top: 134px;
    z-index: 1;
    scale: 1.7;
    transform-origin: 0 0;
    animation: gbBob 2.6s ease-in-out infinite;
}

@keyframes gbBob { 50% { translate: 0 -3px; } }

#BrokerPlayer {
    top: 222px !important;
    height: 30px !important;
    padding-top: 0 !important;
    background: none !important;
    box-shadow: none !important;
    z-index: 1000 !important; /* #BrokerWindow usa z-index 999 */
    line-height: 30px;
}

#BrokerPlayer::before { display: none; }
#BrokerSide { top: 258px !important; }

/* ---------- Lobby: tarjeta del jugador (franja, plataforma y estadísticas) ---------- */

#myPhotoDiv, #myGFPhotoDiv { display: none !important; }

#myName2 {
    left: 692px !important;
    top: 104px !important;
    max-width: 96px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(6, 16, 42, .85);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: 700 13px var(--font-d) !important;
    z-index: 2;
}

#myGP2 {
    right: 14px !important;
    top: 140px !important;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .75);
    font: 700 12px var(--font-d) !important;
    color: #fff !important;
}

#myCash2, #myGold2 {
    top: 236px !important;
    font: 700 13px var(--font-d) !important;
}

#myCash2 { right: 112px !important; }
#myGold2 { right: 16px !important; }

#myCash2::before, #myGold2::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: -1px;
}

#myCash2::before { border-radius: 3px; background: linear-gradient(180deg, #8fd3ff, #2f8cf0); box-shadow: 0 0 6px rgba(92, 184, 255, .7); }
#myGold2::before { background: radial-gradient(circle at 35% 30%, #fff6c7, #ffc533 50%, #b8780c); box-shadow: 0 0 6px rgba(255, 197, 51, .7); }

/* ---------- Lista de jugadores: filas con separador y realce ---------- */

.playerListItem {
    height: 24px !important;
    margin: 0 4px 2px !important;
    border-radius: 6px;
    border-bottom: 1px solid rgba(92, 184, 255, .12);
    transition: background .12s;
}

.playerListItem:hover { background: rgba(92, 184, 255, .16) !important; }
.playerListItemSelected { background: rgba(255, 197, 51, .22) !important; }
.playerListRank { left: 4px !important; top: 4px !important; }
.playerListName { left: 34px !important; top: 4px !important; height: 18px !important; font: 600 13px/18px var(--font) !important; }

/* ---------- Puerta de salida (Mundos y Salir) ---------- */

#buttonChannels, #BrokerLogout {
    --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='2.5' width='14' height='18.5' rx='1.5' fill='%23f0a24a' stroke='%231d2c4e' stroke-width='1.4'/%3E%3Crect x='7.5' y='5' width='9' height='5.8' rx='1' fill='%23ffcf87'/%3E%3Crect x='7.5' y='12.4' width='9' height='6.4' rx='1' fill='%23ffcf87'/%3E%3Ccircle cx='15.2' cy='11.6' r='1.1' fill='%231d2c4e'/%3E%3Crect x='3' y='21' width='18' height='1.8' rx='.9' fill='%235cb8ff'/%3E%3C/svg%3E");
    --face: linear-gradient(180deg, rgba(36, 60, 110, .95), rgba(18, 34, 70, .95));
    --edge-c: #0a1530;
}

#buttonChannels { --lbl: ""; width: 52px !important; }
#buttonChannels::before { left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -55%); }
#buttonChannels::after { display: none; }
#BrokerLogout::before { width: 24px; height: 24px; }

/* ---------- Efectos ---------- */

/* Las salas aparecen con un pequeño salto */
#roomsList .room { animation: gbCardIn .35s cubic-bezier(.2, 1.3, .4, 1) both; }
#room1, #room4, #room7 { animation-delay: .04s; }
#room2, #room5, #room8 { animation-delay: .08s; }

@keyframes gbCardIn {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to { opacity: 1; transform: none; }
}

/* Contador de "en línea" que late */
.bsOnline b, .lsOnline b { animation: gbGlow 2s ease-in-out infinite; }
@keyframes gbGlow { 50% { text-shadow: 0 0 22px rgba(74, 214, 109, .95); } }

@media (prefers-reduced-motion: reduce) {
    #container:not(.Game)::before, #BrokerAvatar, #roomsList .room, .BrokerChannelOnline::after, .bsOnline b, .lsOnline b { animation: none !important; }
}

/* =====================================================================
   Sala: jugadores en tarjetas inclinadas (4 filas por equipo),
   equipo A rojo a la izquierda y equipo B azul a la derecha.
   Coordenadas del contenedor ancho (1066); el JS fija "top" en línea.
   ===================================================================== */

body.Futuro .playerInRoom {
    width: 384px !important;
    height: 72px !important;
    translate: none !important;
}

body.Futuro #playerInRoom0, body.Futuro #playerInRoom2, body.Futuro #playerInRoom4, body.Futuro #playerInRoom6 { left: 8px !important; }
body.Futuro #playerInRoom1, body.Futuro #playerInRoom3, body.Futuro #playerInRoom5, body.Futuro #playerInRoom7 { left: 674px !important; }
body.Futuro #playerInRoom0, body.Futuro #playerInRoom1 { top: 34px !important; }
body.Futuro #playerInRoom2, body.Futuro #playerInRoom3 { top: 112px !important; }
body.Futuro #playerInRoom4, body.Futuro #playerInRoom5 { top: 190px !important; }
body.Futuro #playerInRoom6, body.Futuro #playerInRoom7 { top: 268px !important; }

body.Futuro .playerInRoom.SideA { --tc: #ef5a7a; --tc2: #8a1f3d; --tc-soft: rgba(255, 140, 170, .55); }
body.Futuro .playerInRoom.SideB { --tc: #4f9dff; --tc2: #173f80; --tc-soft: rgba(140, 200, 255, .55); }

/* Tarjeta: paralelogramo con brillo superior */
body.Futuro .playerInRoom::before {
    inset: 0 !important;
    clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 40%),
        radial-gradient(ellipse 34% 26% at 22% 86%, var(--tc-soft), transparent 70%),
        linear-gradient(100deg, var(--tc) 0%, var(--tc2) 100%) !important;
}

body.Futuro .playerInRoom.SideB::before {
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 20px 100%) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 40%),
        radial-gradient(ellipse 34% 26% at 78% 86%, var(--tc-soft), transparent 70%),
        linear-gradient(260deg, var(--tc) 0%, var(--tc2) 100%) !important;
}

body.Futuro .playerInRoom:hover::before { filter: brightness(1.15); }

/* Avatar (anclado en los pies) y plataforma */
body.Futuro .playerInRoom .roomPlayerMobile { transform: scale(.95) !important; }
body.Futuro .SideA .roomPlayerMobile { left: 84px !important; right: auto !important; top: 62px !important; }
body.Futuro .SideB .roomPlayerMobile { right: 84px !important; left: auto !important; top: 62px !important; }

body.Futuro .playerInRoom .roomPlayerShadow {
    top: auto !important;
    bottom: 2px !important;
    width: 104px !important;
    height: 14px !important;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, .85), rgba(190, 225, 255, .45) 50%, transparent 72%) !important;
    opacity: .85;
}

body.Futuro .SideA .roomPlayerShadow { left: 32px !important; right: auto !important; }
body.Futuro .SideB .roomPlayerShadow { right: 32px !important; left: auto !important; }

/* Placa con el nombre */
body.Futuro .playerInRoom .roomPlayerName {
    top: 8px !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 170px;
    height: 24px !important;
    padding: 0 10px !important;
    clip-path: none !important;
    border: 0 !important;
    border-radius: 6px;
    background: rgba(6, 16, 42, .92) !important;
    font: 700 14px/24px var(--font-d) !important;
    color: #fff !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.Futuro .SideA .roomPlayerName { left: 176px !important; right: auto !important; }
body.Futuro .SideB .roomPlayerName { right: 176px !important; left: auto !important; }

/* Insignia LISTO / NO LISTO / MASTER debajo del nombre */
body.Futuro .playerInRoom .roomPlayerMaster,
body.Futuro .playerInRoom .roomPlayerReady,
body.Futuro .playerInRoom .roomPlayerNotReady {
    top: 40px !important;
    height: 20px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 5px !important;
    font: 700 11px/20px var(--font-d) !important;
    letter-spacing: .5px !important;
    animation: none !important;
}

body.Futuro .SideA .roomPlayerMaster, body.Futuro .SideA .roomPlayerReady, body.Futuro .SideA .roomPlayerNotReady { left: 176px !important; right: auto !important; }
body.Futuro .SideB .roomPlayerMaster, body.Futuro .SideB .roomPlayerReady, body.Futuro .SideB .roomPlayerNotReady { right: 176px !important; left: auto !important; }

/* Si es master y está listo, el master va un poco más allá */
body.Futuro .SideA .roomPlayerMaster { left: 270px !important; }
body.Futuro .SideB .roomPlayerMaster { right: 270px !important; }

body.Futuro .playerInRoom .roomPlayerReady { background: var(--b-green) !important; color: #fff !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .3) !important; box-shadow: inset 0 -2px 0 var(--b-green-edge) !important; }
body.Futuro .playerInRoom .roomPlayerReady::before { content: "✓ LISTO"; }
body.Futuro .playerInRoom .roomPlayerNotReady { background: rgba(6, 16, 42, .85) !important; color: #c9d6ea !important; box-shadow: none !important; }
body.Futuro .playerInRoom .roomPlayerNotReady::before { content: "NO LISTO"; }
body.Futuro .playerInRoom .roomPlayerMaster { background: var(--b-gold) !important; color: #4a2a00 !important; box-shadow: inset 0 -2px 0 var(--b-gold-edge) !important; }
body.Futuro .playerInRoom .roomPlayerMaster::before { content: "♛ MASTER"; }

/* Botón de información y marca "tú" */
body.Futuro .SideA .roomPlayerInfo { left: 24px !important; top: 6px !important; }
body.Futuro .SideB .roomPlayerInfo { right: 24px !important; left: auto !important; top: 6px !important; }
body.Futuro .SideA .roomPlayerMyself { left: 14px !important; top: 34px !important; }
body.Futuro .SideB .roomPlayerMyself { right: 14px !important; left: auto !important; top: 34px !important; }

/* Elegir / quitar bot */
body.Futuro .playerInRoom .roomBotSelect, body.Futuro .playerInRoom .roomBotRemove { top: 40px !important; bottom: auto !important; }
body.Futuro .SideA .roomBotSelect, body.Futuro .SideA .roomBotRemove { left: 270px !important; right: auto !important; }
body.Futuro .SideB .roomBotSelect, body.Futuro .SideB .roomBotRemove { right: 270px !important; left: auto !important; }

body.Futuro .playerInRoom .roomPlayerBalloon { bottom: 74px !important; }

/* ---------- Centro: [Móvil] [INICIAR / LISTO] [Lado] ---------- */

body.Futuro #roomButtonStart, body.Futuro #roomButtonReady {
    left: 344px !important;
    top: 182px !important;
    width: 112px !important;
    height: 48px !important;
}

body.Futuro #roomButtonStart::before, body.Futuro #roomButtonReady::before { font-size: 19px !important; letter-spacing: .5px !important; }

body.Futuro #roomButtonMobile, body.Futuro #roomButtonChangeTeam {
    top: 182px !important;
    width: 50px !important;
    height: 48px !important;
    border-radius: 10px;
    background:
        var(--ico) center 6px / 22px no-repeat,
        linear-gradient(180deg, #ffffff, #dbe9ff) !important;
    box-shadow: inset 0 -3px 0 #9fb8dc, 0 0 0 2px #06102a, 0 4px 8px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: transform .1s, filter .1s;
}

body.Futuro #roomButtonMobile { left: 290px !important; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fbf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='14' height='7' rx='2'/%3E%3Cpath d='M17 11h3l1 3h-4M7 9V6h6v3M13 7l5-3'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='14' cy='18' r='2'/%3E%3C/svg%3E"); }
body.Futuro #roomButtonChangeTeam { left: 460px !important; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fbf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 0 1-14 5.3M4 12a8 8 0 0 1 14-5.3'/%3E%3Cpath d='M18 3v4h-4M6 21v-4h4'/%3E%3C/svg%3E"); }

body.Futuro #roomButtonMobile::after, body.Futuro #roomButtonChangeTeam::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    text-align: center;
    font: 700 11px var(--font-d);
    color: #1f5fbf;
}

body.Futuro #roomButtonMobile::after { content: "Móvil"; }
body.Futuro #roomButtonChangeTeam::after { content: "Lado"; }
body.Futuro #roomButtonMobile:hover, body.Futuro #roomButtonChangeTeam:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* ---------- Lobby: paneles Amigos y Clan sin imágenes ---------- */

.refresh_button_friends {
    display: block;
    width: auto !important;
    height: 30px !important;
    margin: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--b-blue) !important;
    box-shadow: inset 0 -3px 0 var(--b-blue-edge), inset 0 2px 0 rgba(255, 255, 255, .4), 0 0 0 2px #06102a !important;
    font: 600 13px/28px var(--font-d) !important;
    color: #fff !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .4) !important;
    text-align: center;
    cursor: pointer;
}

#refresh_friends_button { margin-right: 46px !important; }
.refresh_button_friends:hover { filter: brightness(1.1); }

/* Aviso "Mostrando Amigos: x / y" (venía con fondo rojo en línea) */
#friendsListHtml > div[style] {
    margin: 4px 6px !important;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 197, 51, .14) !important;
    color: #ffd273 !important;
    font: 600 11px var(--font) !important;
    text-shadow: none !important;
}

#guildMembersListHtml { padding: 0 10px; font: 600 12px/1.4 var(--font); color: #d6e6ff; text-align: center; }

#create_guild_name {
    width: 100% !important;
    height: 32px;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 0 10px;
    border: 2px solid #1f4a8c !important;
    border-radius: 8px;
    background: #0b1d41 !important;
    color: #fff !important;
    font: 600 13px var(--font);
}

#create_guild_name:focus { outline: none; border-color: #ffc533 !important; }

#guild_create {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: block;
    width: 150px !important;
    height: 36px !important;
    margin: 10px auto 0;
    border-radius: 10px;
    background: var(--b-gold) !important;
    box-shadow: inset 0 -4px 0 var(--b-gold-edge), inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 2px #06102a;
    cursor: pointer;
}

#guild_create::after {
    content: "🛡 Crear clan";
    position: absolute;
    inset: 0 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 14px var(--font-d);
    color: #4a2a00;
}

#guild_create:hover { filter: brightness(1.08); }

/* Tarjeta del jugador: Cash y Gold uno debajo del otro para que no se pisen */
#myCash2, #myGold2 {
    left: 856px !important;
    right: auto !important;
    width: 200px;
    text-align: center !important;
    font-size: 12px !important;
}

#myCash2 { top: 230px !important; }
#myGold2 { top: 248px !important; }

/* =====================================================================
   Tienda de avatares (1066x600, sin el desplazamiento de 133 px).
   Izquierda: vista previa y "Mi avatar". Derecha: título, buscador, categorías,
   9 tarjetas de ítem y barra inferior. Los ítems siguen siendo imágenes del juego.
   ===================================================================== */

#shopScreen { background: none !important; }
#container.Shop #facebook_post { display: none !important; }
#shopScreen > * { translate: none !important; }
#shop_buy_dialog, #dialogGift, #next_avatar, #next_avatar_particles { translate: 133px 0 !important; }

/* Paneles de fondo (reutiliza las capas de #shopOverly) */
#shopOverly { display: block !important; position: absolute; inset: 0; pointer-events: none; }

#shopMyBox, #shopInvBox {
    left: 8px !important;
    width: 310px !important;
    border-radius: 14px !important;
    background: rgba(18, 48, 106, .72) !important;
    backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 2px #3a78d0, 0 5px 0 #06102a;
}

#shopMyBox { top: 8px !important; height: 196px !important; }
#shopInvBox { top: 212px !important; height: 380px !important; border: 0 !important; }

/* Franja inclinada detrás del avatar */
#shopMyBox::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 26px;
    height: 92px;
    border-radius: 8px;
    transform: skewX(-10deg);
    background: linear-gradient(135deg, #b8467a, #5a2a6e);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2);
}

#shopMyBox::after {
    content: "";
    position: absolute;
    left: 100px;
    top: 118px;
    width: 110px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, .75), rgba(159, 208, 255, .35) 55%, transparent 72%);
}

#shopInvTitle {
    left: 8px !important;
    top: 212px !important;
    width: 310px;
    height: 32px;
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: 14px 14px 0 0;
    background: var(--head-grad);
    font-size: 0 !important;
    text-shadow: none !important;
}

#shopInvTitle::before { content: "Mi avatar"; font: 700 16px/32px var(--font-d); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }

/* Título de la tienda */
#shopTitle {
    left: 328px !important;
    top: 8px !important;
    width: 220px;
    height: 40px;
    border-radius: 12px;
    background: var(--panel);
    box-shadow: inset 0 0 0 2px #3a78d0, 0 4px 0 #06102a;
    font-size: 0 !important;
    text-shadow: none !important;
    text-align: center;
}

#shopTitle::before { content: "Tienda de avatares"; font: 700 19px/40px var(--font-d); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); }

/* Vista previa: avatar (anclado en los pies), estadísticas y dinero */
#shop_player { left: 163px !important; top: 126px !important; scale: 1.5; transform-origin: 0 0; z-index: 1; }
#shop_my_stats { left: 34px !important; top: 92px !important; z-index: 1; }

#shop_my_cash, #shop_my_gold {
    top: 182px !important;
    width: 140px !important;
    font: 700 12px var(--font-d) !important;
    text-align: center;
    z-index: 1;
}

#shop_my_cash { left: 20px !important; color: #8fd3ff !important; }
#shop_my_gold { left: 166px !important; color: #ffd273 !important; }

/* Mi avatar: filtros por tipo, lista, búsqueda y orden */
/* Los iconos son recortes de una imagen: se deja su tamaño y solo se añade un marco alrededor */
.FilterBtn {
    top: 256px !important;
    border-radius: 2px;
    background-color: #0b1d41 !important;
    box-shadow: 0 0 0 6px #0b1d41, 0 0 0 7px #1f4a8c;
}

.FilterBtn.FilterActive { box-shadow: 0 0 0 6px #173f80, 0 0 0 7px #ffc533; background-color: #173f80 !important; }
#FilterBtnHead { left: 18px !important; }
#FilterBtnBody { left: 50px !important; }
#FilterBtnEyes { left: 82px !important; }
#FilterBtnFlag { left: 114px !important; }
#FilterBtnBG { left: 146px !important; }
#FilterBtnFG { left: 178px !important; }
#FilterBtnEX { left: 210px !important; }
#FilterBtnAll { left: 242px !important; }
#shop_my_items_number { left: 278px !important; top: 256px !important; }

#shop_my_items_container { left: 16px !important; top: 282px !important; width: 296px !important; height: 214px !important; }
#shop_my_items_container .viewport, #shop_my_items_container .overview { width: 282px !important; }

.shop_my_item {
    border-radius: 8px;
    background: rgba(234, 244, 255, .95) !important;
    box-shadow: inset 0 0 0 1px #9fb8dc;
}

.shop_my_item_name { font: 600 12px var(--font) !important; color: #173f80 !important; }

#shop_delete_avatar { left: 276px !important; top: 502px !important; }
#SortBtnPop, #SortBtnTime, #SortBtnAtk, #SortBtnDef, #SortBtnLife, #SortBtnItem, #SortBtnDig, #SortBtnShld {
    top: 512px !important;
    border-radius: 3px;
    box-shadow: 0 0 0 3px #0b1d41, 0 0 0 4px #1f4a8c;
}
#SortBtnPop { left: 18px !important; }
#SortBtnTime { left: 48px !important; }
#SortBtnAtk { left: 78px !important; }
#SortBtnDef { left: 108px !important; }
#SortBtnLife { left: 138px !important; }
#SortBtnItem { left: 168px !important; }
#SortBtnDig { left: 198px !important; }
#SortBtnShld { left: 228px !important; }
.SortActive { box-shadow: inset 0 0 0 2px #ffc533 !important; }

/* Buscador arriba, junto al título */
#shopFilterMyAvatar {
    left: 556px !important;
    top: 10px !important;
    width: 300px !important;
    height: 36px !important;
    box-sizing: border-box;
    padding: 0 40px 0 14px !important;
    border: 2px solid #1f4a8c !important;
    border-radius: 10px;
    background: rgba(234, 244, 255, .96) !important;
    color: #173f80 !important;
    font: 600 14px var(--font) !important;
}

#shopFilterMyAvatar:focus { outline: none; border-color: #ffc533 !important; }

#shopSearchBtn {
    left: 822px !important;
    top: 16px !important;
    width: 24px !important;
    height: 24px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fbf' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / 20px no-repeat !important;
}

#shopSuggest { left: 556px !important; top: 50px !important; bottom: auto !important; width: 300px !important; }

#shopSortBox { left: 864px !important; right: auto !important; top: 15px !important; }
#shopSortBox button { height: 26px !important; padding: 0 9px !important; font-size: 12px !important; }

/* Categorías: pestañas de texto */
#buttonShopHead, #buttonShopBody, #buttonShopGlass, #buttonShopFlag, #buttonShopBackground, #buttonShopForeground, #buttonShopExItem {
    top: 56px !important;
    width: 98px !important;
    height: 34px !important;
    border-radius: 9px;
    background: linear-gradient(180deg, #4a6fa8, #2d4f86) !important;
    box-shadow: inset 0 -3px 0 #1a2f57, inset 0 2px 0 rgba(255, 255, 255, .3), 0 0 0 2px #06102a;
}

#buttonShopHead { left: 328px !important; }
#buttonShopBody { left: 432px !important; }
#buttonShopGlass { left: 536px !important; }
#buttonShopFlag { left: 640px !important; }
#buttonShopBackground { left: 744px !important; }
#buttonShopForeground { left: 848px !important; }
#buttonShopExItem { left: 952px !important; width: 106px !important; }

#buttonShopHead::after, #buttonShopBody::after, #buttonShopGlass::after, #buttonShopFlag::after,
#buttonShopBackground::after, #buttonShopForeground::after, #buttonShopExItem::after {
    position: absolute;
    inset: 0 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 14px var(--font-d);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

#buttonShopHead::after { content: "Cabeza"; }
#buttonShopBody::after { content: "Cuerpo"; }
#buttonShopGlass::after { content: "Gafas"; }
#buttonShopFlag::after { content: "Bandera"; }
#buttonShopBackground::after { content: "Fondo"; }
#buttonShopForeground::after { content: "Frente"; }
#buttonShopExItem::after { content: "Ex-Items"; }

#buttonShopHead:hover, #buttonShopBody:hover, #buttonShopGlass:hover, #buttonShopFlag:hover,
#buttonShopBackground:hover, #buttonShopForeground:hover, #buttonShopExItem:hover { filter: brightness(1.15); }

.shopButton .AvNotif { top: -6px; right: -4px; }

/* ---------- Tarjetas de ítem: 3 x 3 ---------- */

#shop_items { left: 0 !important; top: 0 !important; }

.shop_item {
    width: 236px !important;
    height: 140px !important;
    border-radius: 12px;
    overflow: hidden;
    background:
        linear-gradient(180deg, #3d8ae8 0, #2363c4 24px, transparent 24px),
        repeating-linear-gradient(135deg, rgba(92, 184, 255, .06) 0 8px, transparent 8px 16px),
        linear-gradient(180deg, #f4f9ff, #dbe9ff) !important;
    box-shadow: inset 0 0 0 2px #3a78d0, 0 4px 0 #06102a, 0 8px 14px rgba(0, 0, 0, .35);
    transition: transform .12s, box-shadow .12s;
}

.shop_item:hover { transform: translateY(-2px); }
.shop_item:active { margin: 0 !important; }

.shop_item.selected {
    box-shadow: inset 0 0 0 3px #ffc533, 0 4px 0 #06102a, 0 0 18px rgba(255, 197, 51, .6);
    background:
        linear-gradient(180deg, #ffb057 0, #ee6a0c 24px, transparent 24px),
        linear-gradient(180deg, #fff8e6, #ffe7b3) !important;
}

#shop_item0, #shop_item3, #shop_item6 { left: 328px !important; }
#shop_item1, #shop_item4, #shop_item7 { left: 573px !important; }
#shop_item2, #shop_item5, #shop_item8 { left: 818px !important; }
#shop_item0, #shop_item1, #shop_item2 { top: 98px !important; }
#shop_item3, #shop_item4, #shop_item5 { top: 246px !important; }
#shop_item6, #shop_item7, #shop_item8 { top: 394px !important; }

.shop_item_name {
    left: 10px !important;
    top: 4px !important;
    right: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: 700 13px/16px var(--font-d) !important;
    color: #fff !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .4) !important;
}

/* Recuadro blanco del personaje a la izquierda */
.shop_item::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 30px;
    width: 104px;
    height: 102px;
    border-radius: 9px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #c9d6ea;
}

.shop_item_image { left: 60px !important; top: 116px !important; }

/* Estadísticas a la derecha en dos filas */
.shop_item_stat0, .shop_item_stat1, .shop_item_stat2, .shop_item_stat3 { top: 46px !important; }
.shop_item_stat4, .shop_item_stat5, .shop_item_stat6, .shop_item_stat7 { top: 66px !important; }
.shop_item_stat3, .shop_item_stat7 { left: 122px !important; }
.shop_item_stat2, .shop_item_stat6 { left: 150px !important; }
.shop_item_stat1, .shop_item_stat5 { left: 178px !important; }
.shop_item_stat0, .shop_item_stat4 { left: 206px !important; }

/* Precios: pastillas abajo a la derecha */
.shop_item_cash, .shop_item_gold {
    left: 122px !important;
    right: auto !important;
    width: 104px;
    height: 20px;
    border-radius: 6px;
    text-align: center;
    font: 700 12px/20px var(--font-d) !important;
    text-shadow: none !important;
}

.shop_item_cash { top: 90px !important; color: #fff !important; background: linear-gradient(180deg, #4f9dff, #1f6ad4); box-shadow: inset 0 -2px 0 #13459a; }
.shop_item_gold { top: 113px !important; color: #4a2a00 !important; background: linear-gradient(180deg, #ffe07a, #f5a20c); box-shadow: inset 0 -2px 0 #b8700a; }
.shop_item_gold:only-of-type { top: 90px !important; }

/* Nota NUEVO / OFERTA: pastilla en la cabecera */
.shop_item_note {
    transform: none !important;
    left: auto !important;
    right: 6px !important;
    top: 3px !important;
    width: auto !important;
    height: 18px !important;
    background: none !important;
    z-index: 3;
}

.shot_item_note_text, .shot_item_note_text2 {
    position: static !important;
    display: block;
    padding: 0 7px;
    border-radius: 5px;
    background: #ffc533;
    color: #4a2a00 !important;
    font: 700 10px/18px var(--font-d) !important;
    transform: none !important;
    text-shadow: none !important;
    white-space: nowrap;
}

.shot_item_note_text br, .shot_item_note_text2 br { display: none; }
.shop_item_name { max-width: 150px; }

.shopNeedLevel { left: 12px !important; top: 106px !important; z-index: 2; }
.shop_item_timer { left: 12px !important; top: 32px !important; font: 700 12px var(--font-d) !important; }

/* Ya lo tienes */
.shop_item.iHaveAvatar::after {
    content: "✓ Tuyo";
    position: absolute;
    left: 12px;
    top: 34px;
    z-index: 2;
    padding: 1px 7px;
    border-radius: 5px;
    background: #4ad66d;
    color: #fff;
    font: 700 10px var(--font-d);
}

/* Barra del conjunto (búsqueda) encima de la barra inferior */
#shopSetBar { left: 328px !important; top: 540px !important; width: 730px !important; }

/* ---------- Barra inferior ---------- */

#buttonShopPrev, #buttonShopNext {
    top: 556px !important;
    width: 40px !important;
    height: 36px !important;
    border-radius: 9px;
    background:
        var(--ico) center / 18px no-repeat,
        linear-gradient(180deg, #ffffff, #dbe9ff) !important;
    box-shadow: inset 0 -3px 0 #9fb8dc, 0 0 0 2px #06102a;
}

#buttonShopPrev { left: 328px !important; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fbf' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5 8 12l7 7'/%3E%3C/svg%3E"); }
#buttonShopNext { left: 434px !important; --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5fbf' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); }

#shopPages {
    left: 372px !important;
    top: 556px !important;
    width: 58px !important;
    height: 36px;
    border-radius: 9px;
    background: rgba(6, 16, 42, .85);
    font: 700 14px/36px var(--font-d) !important;
    color: #fff !important;
    text-shadow: none !important;
}

#buttonChargeShop1 {
    left: 494px !important;
    top: 554px !important;
    width: 170px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: var(--b-blue) !important;
    box-shadow: inset 0 -4px 0 var(--b-blue-edge), inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 2px #06102a !important;
    animation: none !important;
}

#buttonChargeShop1::after {
    content: "Obtener Cash";
    position: absolute;
    inset: 0 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 16px var(--font-d);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

#buttonShopBuy {
    left: 680px !important;
    top: 554px !important;
    width: 220px !important;
    height: 40px !important;
    border-radius: 10px;
    background: var(--b-gold) !important;
    box-shadow: inset 0 -4px 0 var(--b-gold-edge), inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 2px #06102a, 0 0 16px rgba(255, 197, 51, .35);
}

#buttonShopBuy::after {
    content: "🛒 Comprar";
    position: absolute;
    inset: 0 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 18px var(--font-d);
    color: #4a2a00;
}

#buttonShopBuy:hover, #buttonChargeShop1:hover { filter: brightness(1.08); }

/* Salir: la misma puerta del lobby */
#buttonShopExit {
    left: 1006px !important;
    top: 554px !important;
    width: 52px !important;
    height: 40px !important;
    border-radius: 10px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='2.5' width='14' height='18.5' rx='1.5' fill='%23f0a24a' stroke='%231d2c4e' stroke-width='1.4'/%3E%3Crect x='7.5' y='5' width='9' height='5.8' rx='1' fill='%23ffcf87'/%3E%3Crect x='7.5' y='12.4' width='9' height='6.4' rx='1' fill='%23ffcf87'/%3E%3Ccircle cx='15.2' cy='11.6' r='1.1' fill='%231d2c4e'/%3E%3Crect x='3' y='21' width='18' height='1.8' rx='.9' fill='%235cb8ff'/%3E%3C/svg%3E") center / 28px no-repeat,
        linear-gradient(180deg, rgba(36, 60, 110, .95), rgba(18, 34, 70, .95)) !important;
    box-shadow: inset 0 -3px 0 #0a1530, 0 0 0 2px #06102a;
}

/* =====================================================================
   Crear sala: ventana clara con cabecera azul (440x420).
   Coordenadas dentro de #dialogCreateRoom; la capa se centra con translate 133.
   ===================================================================== */

/* La capa ocupa todo el ancho y queda por encima del chat (que usa backdrop-filter) */
#dialogCreateRoomWarp { position: absolute; inset: 0; z-index: 60; translate: none !important; }
#dialogCreateRoomWarp > .AlertBoxBackground { width: 1066px !important; height: 600px !important; }

#dialogCreateRoom {
    left: 313px !important;
    top: 86px !important;
    width: 440px !important;
    height: 420px !important;
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    background: linear-gradient(180deg, #f6faff 0%, #e4efff 100%) !important;
    box-shadow: 0 0 0 2px #06102a, 0 8px 0 #06102a, 0 24px 50px rgba(0, 0, 0, .6) !important;
    color: #173f80 !important;
}

/* Cabecera azul con el borde derecho inclinado */
#dialogCreateRoom::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 52px !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: polygon(0 0, 100% 0, 100% 60%, calc(100% - 26px) 100%, 0 100%);
    background: linear-gradient(90deg, #2f8cf0, #1f5fbf) !important;
}

/* Línea que separa el nombre de las opciones */
#dialogCreateRoom::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 24px !important;
    right: 24px !important;
    top: 188px !important;
    bottom: auto !important;
    height: 2px !important;
    background: #c9d9f0 !important;
    border: 0 !important;
}

#crHeader {
    z-index: 1;
    left: 24px !important;
    top: 0 !important;
    width: 390px !important;
    height: 52px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    text-align: left !important;
    font: italic 700 22px/52px var(--font-d) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase;
    color: #fff !important;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .3) !important;
}

#crHeader::after {
    content: "Configuración de sala";
    position: absolute;
    right: 18px;
    top: 0;
    font: 700 10px/52px var(--font-d);
    font-style: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
    text-shadow: none;
}

/* Etiquetas */
#dialogCreateRoom .crLabel {
    left: 24px !important;
    width: 200px !important;
    height: 36px !important;
    text-align: left !important;
    font: 700 14px/36px var(--font-d) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #173f80 !important;
    text-shadow: none !important;
}

#crLabelTitle { top: 68px !important; }
#crLabelMode { top: 202px !important; }
#crLabelPlayers { top: 248px !important; }
#dialogCreateRoom #crLabelPass { left: 0 !important; top: 0 !important; color: #8aa3c7 !important; }

/* Campos de texto */
#dialogCreateRoom #createRoomTitle,
#dialogCreateRoom #createRoomPasswordInput {
    width: 266px !important;
    height: 36px !important;
    box-sizing: border-box;
    padding: 0 12px !important;
    border: 2px solid #8cc2f5 !important;
    border-radius: 10px !important;
    background: #f0f7ff !important;
    box-shadow: none !important;
    color: #173f80 !important;
    font: 600 15px var(--font) !important;
}

#dialogCreateRoom #createRoomTitle::placeholder,
#dialogCreateRoom #createRoomPasswordInput::placeholder { color: #9fb6d6; }

#dialogCreateRoom #createRoomTitle:focus,
#dialogCreateRoom #createRoomPasswordInput:focus { outline: none; border-color: #2f8cf0 !important; box-shadow: 0 0 0 3px rgba(47, 140, 240, .2) !important; }

#dialogCreateRoom #createRoomTitle { left: 150px !important; top: 68px !important; }
#dialogCreateRoom #createRoomPasswordInput { left: 126px !important; top: 0 !important; }

/* Sala privada */
#CreateRoomPrivateCheckbox {
    left: 150px !important;
    top: 116px !important;
    width: 266px !important;
    height: 22px !important;
}

#CreateRoomPrivateCheckbox::before {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #1f4a8c !important;
    border-radius: 5px !important;
    background: #f0f7ff !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 20px !important;
}

#CreateRoomPrivateCheckbox.checkboxOn::before { background: #2f8cf0 !important; border-color: #1f5fbf !important; box-shadow: none !important; }

#CreateRoomPrivateCheckbox::after {
    content: "Sala privada" !important;
    left: 32px !important;
    top: 1px !important;
    font: 700 14px/22px var(--font-d) !important;
    color: #173f80 !important;
    text-shadow: none !important;
}

#CreateRoomPassword {
    left: 24px !important;
    top: 144px !important;
    width: 392px !important;
    height: 36px !important;
}

/* Modo y jugadores: ◀ valor ▶ */
#dialogCreateRoom #CreateRoomMode,
#dialogCreateRoom #CreateRoomPlayers {
    left: 278px !important;
    width: 104px !important;
    height: 36px !important;
    text-align: center;
    font: 700 16px/36px var(--font-d) !important;
    text-transform: none !important;
    text-shadow: none !important;
    white-space: nowrap;
}

#dialogCreateRoom #CreateRoomMode { top: 202px !important; color: #1f5fbf !important; }
#dialogCreateRoom #CreateRoomPlayers { top: 248px !important; color: #c27a00 !important; }

#dialogCreateRoom .buttonPrev,
#dialogCreateRoom .buttonNext {
    width: 34px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #2c5fae, #173f80) !important;
    box-shadow: inset 0 -3px 0 #0b1d41, inset 0 2px 0 rgba(255, 255, 255, .3), 0 0 0 2px #06102a !important;
}

#dialogCreateRoom .buttonPrev::before { border-right-color: #fff !important; }
#dialogCreateRoom .buttonNext::before { border-left-color: #fff !important; }
#dialogCreateRoom .buttonPrev:hover, #dialogCreateRoom .buttonNext:hover { transform: translateY(-1px); background: linear-gradient(180deg, #3d8ae8, #2363c4) !important; box-shadow: inset 0 -3px 0 #13459a, 0 0 0 2px #06102a !important; }

#CreateRoomModePrev { left: 240px !important; top: 204px !important; }
#CreateRoomModeNext { left: 382px !important; top: 204px !important; }
#CreateRoomNumPlayersPrev { left: 240px !important; top: 250px !important; }
#CreateRoomNumPlayersNext { left: 382px !important; top: 250px !important; }
#dialogCreateLocked { left: 384px !important; top: 206px !important; }

/* Tarjeta con el icono del modo y su explicación */
#CreateRoomModeText {
    position: absolute;
    left: 24px !important;
    top: 298px !important;
    width: 392px !important;
    height: 64px !important;
    box-sizing: border-box;
    border-radius: 12px;
    background: #f0f7ff;
    box-shadow: inset 0 0 0 2px #8cc2f5;
}

#dialogCreateRoom #CreateRoomModeIcon {
    left: 36px !important;
    top: 309px !important;
    z-index: 1;
    border-radius: 8px;
    background-color: #fff !important;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px #c9d9f0;
}

#dialogCreateRoom #dialogCreateMessage {
    left: 100px !important;
    top: 298px !important;
    width: 300px !important;
    height: 64px !important;
    z-index: 1;
    display: flex;
    align-items: center;
    font: 700 13px/1.35 var(--font) !important;
    color: #173f80 !important;
    text-shadow: none !important;
    text-align: left !important;
}

/* Botones */
#dialogCreateRoomButtonCancel,
#dialogCreateRoomButtonOK {
    top: 372px !important;
    bottom: auto !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 10px !important;
    animation: none !important;
}

#dialogCreateRoomButtonCancel {
    left: 196px !important;
    width: 100px !important;
    background: #fff !important;
    box-shadow: inset 0 0 0 2px #8cc2f5, inset 0 -3px 0 #c9d9f0, 0 0 0 2px #06102a !important;
}

#dialogCreateRoomButtonOK {
    left: 304px !important;
    right: auto !important;
    width: 112px !important;
    background: var(--b-green) !important;
    box-shadow: inset 0 -4px 0 var(--b-green-edge), inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 2px #06102a !important;
}

#dialogCreateRoomButtonCancel::before, #dialogCreateRoomButtonOK::before {
    font: 700 14px var(--font-d) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding-bottom: 3px;
}

#dialogCreateRoomButtonCancel::before { content: "Cancelar" !important; color: #1f5fbf !important; text-shadow: none !important; }
#dialogCreateRoomButtonOK::before { content: "Crear partida" !important; color: #fff !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .3) !important; }

/* El botón Pass vive fuera del lobby y quedaba encima del fondo oscuro de "Crear sala" */
#container:has(#dialogCreateRoomWarp:not([style*="none"])) #facebook_post { visibility: hidden; }

/* =====================================================================
   Ventanas de la sala con estilo claro: Elegir móvil, Opciones de sala,
   Elegir bot y botón "Añadir bot". Sin imágenes salvo móviles, mapas e ítems.
   ===================================================================== */

/* Cabecera azul común (se dibuja con ::before en cada ventana) */
#roomMobileSelect::before, #dialog_room_options::before, #select_bot_div::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 52px;
    box-sizing: border-box;
    padding: 0 20px;
    clip-path: polygon(0 0, 100% 0, 100% 60%, calc(100% - 26px) 100%, 0 100%);
    background: linear-gradient(90deg, #2f8cf0, #1f5fbf);
    font: italic 700 20px/52px var(--font-d);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
    white-space: nowrap;
}

/* ---------- Elegir móvil ---------- */

#roomMobileSelect {
    left: 165px !important;
    top: 40px !important;
    width: 470px !important;
    height: auto !important;
    min-height: 300px;
    box-sizing: border-box;
    padding: 66px 14px 40px 22px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f6faff 0%, #e4efff 100%) !important;
    box-shadow: 0 0 0 2px #06102a, 0 8px 0 #06102a, 0 24px 50px rgba(0, 0, 0, .6);
    overflow: hidden;
    z-index: 99;
}

#roomMobileSelect::before { content: "Elegir móvil"; }

#roomMobileSelect::after {
    content: "Pasa el ratón para ver su animación · clic para equipar";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    text-align: center;
    font: 600 12px var(--font);
    color: #1f5fbf;
}

.mobileSelectBtn {
    width: 74px !important;
    height: 86px !important;
    margin: 0 10px 10px 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #fff 0, #fff 62px, #e4efff 62px) !important;
    box-shadow: inset 0 0 0 2px #8cc2f5, 0 3px 0 #b8cfee;
    transition: transform .1s, box-shadow .1s;
}

.mobileSelectBtn:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #fffaf0 0, #fffaf0 62px, #ffe7b3 62px) !important;
    box-shadow: inset 0 0 0 2px #ffc533, 0 3px 0 #e8a900, 0 0 14px rgba(255, 197, 51, .5);
}

.mobileName {
    left: 0 !important;
    top: 64px !important;
    width: 74px !important;
    font: 700 11px/20px var(--font-d) !important;
    color: #173f80 !important;
    text-shadow: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cancelar: X en la cabecera */
#roomMobileSelectCancel {
    left: auto !important;
    right: 34px !important;
    top: 10px !important;
    bottom: auto !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 16px no-repeat,
        #173f80 !important;
    box-shadow: inset 0 -3px 0 #0b1d41, 0 0 0 2px rgba(255, 255, 255, .6) !important;
    z-index: 2;
}

#roomMobileSelectCancel::before, #roomMobileSelectCancel::after { display: none !important; }

/* ---------- Opciones de sala ---------- */

#dialog_room_options {
    left: 174px !important;
    top: 20px !important;
    width: 452px !important;
    height: 476px !important;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #f6faff 0%, #e4efff 100%) !important;
    box-shadow: 0 0 0 2px #06102a, 0 8px 0 #06102a, 0 24px 50px rgba(0, 0, 0, .6);
    z-index: 40;
}

#dialog_room_options::before { content: "Opciones de sala"; }

/* Botones ◀ ▶ */
#dialog_room_options .buttonPrev, #dialog_room_options .buttonNext {
    width: 30px !important;
    height: 28px !important;
    border-radius: 7px;
    background: linear-gradient(180deg, #2c5fae, #173f80) !important;
    box-shadow: inset 0 -3px 0 #0b1d41, inset 0 2px 0 rgba(255, 255, 255, .3), 0 0 0 2px #06102a;
    opacity: 1 !important;
}

#dialog_room_options .buttonPrev::before, #dialog_room_options .buttonNext::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -6px;
    border: 6px solid transparent;
}

#dialog_room_options .buttonPrev::before { border-right: 8px solid #fff; border-left: 0; margin-left: -5px; }
#dialog_room_options .buttonNext::before { border-left: 8px solid #fff; border-right: 0; margin-left: -3px; }
#dialog_room_options .buttonPrev:hover, #dialog_room_options .buttonNext:hover { filter: brightness(1.25); }

/* Valores: pastilla oscura centrada entre las flechas, con la etiqueta a la izquierda (::before) */
#RoomOptionsMode, #RoomOptionsPlayers, #RoomOptionsAvatars, #RoomOptionsWind {
    left: 200px !important;
    width: 150px !important;
    height: 28px !important;
    border-radius: 7px;
    background: #173f80;
    font: 700 14px/28px var(--font-d) !important;
    color: #fff !important;
    text-shadow: none !important;
    text-align: center;
    white-space: nowrap;
}

#RoomOptionsMode::before, #RoomOptionsPlayers::before, #RoomOptionsAvatars::before, #RoomOptionsWind::before {
    position: absolute;
    left: -180px;
    width: 130px;
    text-align: left;
    font: 700 13px/28px var(--font-d);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #173f80;
}

#RoomOptionsMode::before { content: "Modo de juego"; }
#RoomOptionsPlayers::before { content: "Equipos"; }
#RoomOptionsAvatars::before { content: "Avatares"; }
#RoomOptionsWind::before { content: "Viento máx."; }

/* Mapa arriba: ◀ [imagen] ▶ y el nombre debajo */
#RoomOptionsMapPrev { left: 40px !important; top: 82px !important; }
#RoomOptionsMapNext { left: 382px !important; top: 82px !important; }
#RoomOptionsMapImage, #RoomOptionsMapLock { left: 120px !important; top: 66px !important; border-radius: 8px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #8cc2f5; }
#RoomOptionsMapName {
    left: 120px !important;
    top: 122px !important;
    width: 213px !important;
    font: 700 13px var(--font-d) !important;
    color: #1f5fbf !important;
    text-shadow: none !important;
}

/* Filas */
#RoomOptionsModePrev, #RoomOptionsMode, #RoomOptionsModeNext { top: 152px !important; }
#RoomOptionsNumPlayersPrev, #RoomOptionsPlayers, #RoomOptionsNumPlayersNext { top: 192px !important; }
#RoomOptionsAvatarsPrev, #RoomOptionsAvatars, #RoomOptionsAvatarsNext { top: 232px !important; }
#RoomOptionsWindPrev, #RoomOptionsWind, #RoomOptionsWindNext { top: 272px !important; }

#RoomOptionsModePrev, #RoomOptionsNumPlayersPrev, #RoomOptionsAvatarsPrev, #RoomOptionsWindPrev { left: 164px !important; }
#RoomOptionsModeNext, #RoomOptionsNumPlayersNext, #RoomOptionsAvatarsNext, #RoomOptionsWindNext { left: 356px !important; }

#RoomOptionsModeIcon { left: 396px !important; top: 146px !important; scale: .8; }
#RoomOptionsModeLocked { left: 264px !important; top: 156px !important; z-index: 2; }

#RoomOptionsAvatarsGP, #RoomOptionsWindGP {
    left: 394px !important;
    width: 50px;
    font: 700 11px/28px var(--font-d) !important;
    color: #c27a00 !important;
    text-shadow: none !important;
}

#RoomOptionsAvatarsGP { top: 232px !important; }
#RoomOptionsWindGP { top: 272px !important; }

/* Reglas: equipos aleatorios, tiempo de turno y disparos */
#dialog_room_options::after {
    content: "Reglas";
    position: absolute;
    left: 20px;
    top: 318px;
    font: 700 13px/28px var(--font-d);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #173f80;
}

#RoomOptionsRandomTeams {
    left: 164px !important;
    top: 318px !important;
    height: 28px;
    padding: 0 10px;
    border-radius: 7px;
    background: #fff;
    box-shadow: inset 0 0 0 2px #8cc2f5;
    font: 700 12px/28px var(--font-d) !important;
    color: #173f80 !important;
    text-shadow: none !important;
}

#RoomOptionsRandomTeamsRank { left: 162px !important; top: 334px !important; }
#RoomOptionsRandomTeamsLock { left: 164px !important; top: 314px !important; }

#RoomOptionsTurnTime {
    left: 300px !important;
    top: 318px !important;
    height: 28px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: var(--b-blue) !important;
    box-shadow: inset 0 -3px 0 var(--b-blue-edge) !important;
    font: 700 12px/28px var(--font-d) !important;
    color: #fff !important;
    text-shadow: none !important;
}

#RoomOptionsTurnTimeRank { left: 298px !important; top: 334px !important; }
#RoomOptionsTurnTimeLock { left: 300px !important; top: 314px !important; }

/* Disparos (iconos de ítems del juego) */
#RoomOptionsS1, #RoomOptionsTele, #RoomOptionsDualP { top: 360px !important; border-radius: 6px; box-shadow: 0 0 0 2px #8cc2f5; }
#RoomOptionsS1 { left: 164px !important; }
#RoomOptionsTele { left: 240px !important; }
#RoomOptionsDualP { left: 316px !important; }
#RoomOptionsS1Rank { left: 164px !important; top: 380px !important; }
#RoomOptionsTeleRank { left: 238px !important; top: 377px !important; }
#RoomOptionsDualPRank { left: 314px !important; top: 377px !important; }
#RoomOptionsS1Lock { left: 164px !important; top: 360px !important; }
#RoomOptionsTeleLock { left: 240px !important; top: 360px !important; }
#RoomOptionsDualPLock { left: 316px !important; top: 360px !important; }

/* Cancelar / Guardar */
#RoomOptionsCancel, #RoomOptionsOK {
    top: 422px !important;
    bottom: auto !important;
    width: 196px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background-image: none !important;
}

#RoomOptionsCancel { left: 20px !important; background: var(--b-red) !important; box-shadow: inset 0 -4px 0 var(--b-red-edge), 0 0 0 2px #06102a !important; }
#RoomOptionsOK { left: auto !important; right: 20px !important; background: var(--b-green) !important; box-shadow: inset 0 -4px 0 var(--b-green-edge), 0 0 0 2px #06102a !important; }

#RoomOptionsCancel::before, #RoomOptionsOK::before {
    position: absolute;
    inset: 0 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 15px var(--font-d) !important;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}

#RoomOptionsCancel::before { content: "Cancelar" !important; }
#RoomOptionsOK::before { content: "Guardar" !important; }

/* ---------- Elegir bot (modo Boss) ---------- */

#select_bot_div {
    left: 200px !important;
    top: 40px !important;
    width: 400px !important;
    overflow: hidden;
    padding: 62px 14px 14px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #f6faff 0%, #e4efff 100%) !important;
    box-shadow: 0 0 0 2px #06102a, 0 8px 0 #06102a, 0 24px 50px rgba(0, 0, 0, .6);
    opacity: 1 !important;
    color: #173f80;
    z-index: 45 !important;
}

#select_bot_div::before { content: "Elegir bot"; z-index: 1; }

.bs_line {
    position: relative;
    height: 26px !important;
    margin-bottom: 4px;
    padding: 0 !important;
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #c9d9f0;
    font: 700 12px/26px var(--font-d);
    cursor: pointer;
}

.bs_line:hover { background: #fff3cc !important; box-shadow: inset 0 0 0 2px #ffc533; }
.bs_line > div { top: 0; line-height: 26px; }
.bs_rank { left: 8px !important; top: 6px !important; }
.bs_name { left: 40px !important; color: #173f80; }
.bs_gp { left: 150px !important; color: #c27a00 !important; }
.bs_line .stat_icon { top: 6px !important; }
.bs_atk, .bs_def, .bs_life, .bs_dig { color: #1f5fbf; }

/* Añadir bot: botón dorado en la columna del equipo B */
body.Futuro #add_bot_button {
    left: 812px !important;
    top: 132px !important;
    width: 140px !important;
    height: 32px !important;
    border-radius: 9px;
    background: var(--b-gold) !important;
    box-shadow: inset 0 -3px 0 var(--b-gold-edge), inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 0 2px #06102a;
    z-index: 3;
}

body.Futuro #add_bot_button::after {
    content: "+ Añadir bot";
    position: absolute;
    inset: 0 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 14px var(--font-d);
    color: #4a2a00;
}

body.Futuro #add_bot_button:hover { filter: brightness(1.08); }

/* =====================================================================
   Sala: Objetos y Amigos/Clan en ventana emergente (#roomPopup).
   El panel derecho desaparece: el chat y la barra inferior ocupan todo el ancho.
   Las listas son las del juego; #container.popItems / .popFriends deciden cuál se ve.
   ===================================================================== */

/* Sin ventana abierta: nada del antiguo panel derecho */
#container.Room #room_item_buddy_tab1,
#container.Room:not(.popFriends) #room_item_buddy_tab2,
#container.Room:not(.popFriends) #room_item_buddy_tab3,
#container.Room:not(.popItems) #itemsSelection,
#container.Room:not(.popFriends) #friendsList,
#container.Room:not(.popFriends) #guildMembersList,
#container.Room:not(.popFriends) #friendsListExtra,
#container.Room:not(.popFriends) #guildRoomTabExtra { display: none !important; }

/* Ventana */
#roomPopup {
    position: absolute;
    left: 323px;
    top: 60px;
    width: 420px;
    height: 420px;
    z-index: 90;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #13306a 0%, #0b1d41 100%);
    box-shadow: 0 0 0 2px #3a78d0, 0 8px 0 #06102a, 0 24px 50px rgba(0, 0, 0, .65);
}

#roomPopup.hide { display: none; }

#roomPopup::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 60px;
    clip-path: polygon(0 0, 100% 0, 100% 64%, calc(100% - 26px) 100%, 0 100%);
    background: linear-gradient(90deg, #2f8cf0, #1f5fbf);
}

.rpKicker, .rpTitle { position: absolute; left: 22px; z-index: 1; white-space: nowrap; }
.rpKicker { top: 10px; font: 700 10px var(--font-d); letter-spacing: 2px; text-transform: uppercase; color: #ffd273; }
.rpTitle { top: 22px; font: italic 700 22px/30px var(--font-d); text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }

#roomPopupClose {
    position: absolute;
    right: 34px;
    top: 13px;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    cursor: pointer;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 16px no-repeat,
        #173f80;
    box-shadow: inset 0 -3px 0 #0b1d41, 0 0 0 2px rgba(255, 255, 255, .6);
}

#roomPopupClose:hover { filter: brightness(1.2); }

/* Objetos: la selección del juego, centrada y más grande */
#container.Room.popItems #itemsSelection {
    left: 397px !important;
    top: 140px !important;
    translate: none !important;
    z-index: 91 !important;
    scale: 1.3;
    transform-origin: 0 0;
    background: none !important;
}

#container.Room.popItems #itemsSelectText { color: #d6e6ff; font-family: var(--font-d); }

/* Amigos / Clan: pestañas bajo la cabecera y la lista debajo */
#container.Room.popFriends #room_item_buddy_tab2,
#container.Room.popFriends #room_item_buddy_tab3 {
    display: block !important;
    top: 132px !important;
    width: 190px !important;
    height: 32px !important;
    translate: none !important;
    z-index: 91 !important;
}

#container.Room.popFriends #room_item_buddy_tab2 { left: 343px !important; }
#container.Room.popFriends #room_item_buddy_tab3 { left: 533px !important; }

#container.Room.popFriends #friendsList,
#container.Room.popFriends #guildMembersList {
    left: 343px !important;
    top: 172px !important;
    width: 380px !important;
    height: 250px !important;
    translate: none !important;
    z-index: 91 !important;
}

#container.Room.popFriends #friendsList .viewport,
#container.Room.popFriends #guildMembersList .viewport,
#container.Room.popFriends #friendsList .overview,
#container.Room.popFriends #guildMembersList .overview { width: 366px !important; }

#container.Room.popFriends #friendsList .viewport,
#container.Room.popFriends #guildMembersList .viewport { height: 246px !important; }

/* Texto de ayuda al pie de la ventana */
#container.Room.popFriends #friendsListExtra,
#container.Room.popFriends #guildRoomTabExtra {
    left: 343px !important;
    top: 428px !important;
    width: 380px !important;
    height: auto !important;
    padding: 0 !important;
    translate: none !important;
    z-index: 91 !important;
    background: none !important;
    font: 600 11px/1.3 var(--font) !important;
    color: #a9c1e6 !important;
    text-align: center;
}

/* Clan en la sala: sin el formulario de crear clan (sigue en la pestaña Clan del lobby) */
#container.Room #guildMembersListHtml:has(#guild_create) { font-size: 0 !important; padding-top: 70px; }
#container.Room #guildMembersListHtml:has(#guild_create) br,
#container.Room #guildMembersListHtml #create_guild_name,
#container.Room #guildMembersListHtml #guild_create { display: none !important; }

#container.Room #guildMembersListHtml:has(#guild_create)::before {
    content: "🛡 Aún no tienes clan";
    display: block;
    font: 700 18px var(--font-d);
    color: #fff;
}

#container.Room #guildMembersListHtml:has(#guild_create)::after {
    content: "Un líder puede invitarte desde tu Info. Para crear un clan, ve a la pestaña Clan del lobby.";
    display: block;
    margin: 8px 30px 0;
    font: 600 13px/1.4 var(--font);
    color: #a9c1e6;
}

/* ---------- Panel central: [INICIAR] arriba; [Móvil] [Objetos] [Lado] debajo ---------- */

body.Futuro #roomButtonStart, body.Futuro #roomButtonReady {
    left: 282px !important;
    top: 178px !important;
    width: 236px !important;
    height: 44px !important;
}

body.Futuro #roomButtonMobile, body.Futuro #roomButtonChangeTeam, #roomButtonItems { top: 228px !important; width: 74px !important; height: 44px !important; }
body.Futuro #roomButtonMobile { left: 282px !important; }
body.Futuro #roomButtonChangeTeam { left: 444px !important; }

#roomButtonItems {
    position: absolute;
    left: 363px;
    translate: 133px 0;
    border-radius: 10px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2304f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M9 8V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V8M3 13h18M11 12v2h2v-2'/%3E%3C/svg%3E") center 6px / 22px no-repeat,
        linear-gradient(180deg, #ffffff, #dbe9ff);
    box-shadow: inset 0 -3px 0 #9fb8dc, 0 0 0 2px #06102a, 0 4px 8px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: transform .1s, filter .1s;
}

#roomButtonItems::after {
    content: "Objetos";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    text-align: center;
    font: 700 11px var(--font-d);
    color: #1f5fbf;
}

#roomButtonItems:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* Lo que estaba debajo de los botones baja un poco */
body.Futuro #gp_rate { top: 278px !important; }
body.Futuro #gp_team_a, body.Futuro #gp_team_b { top: 292px !important; }
body.Futuro #RoomWatchers { left: 470px !important; top: 276px !important; }
body.Futuro #RoomS1Disabled { top: 316px !important; }
body.Futuro #RoomRandomTeams { top: 322px !important; }
body.Futuro #room_timer { top: 276px !important; }

/* ---------- Chat y barra inferior a todo el ancho ---------- */

body.Futuro #roomChat { width: 1034px !important; }
body.Futuro #roomChat .viewport, body.Futuro #roomChat .overview { width: 1020px !important; }
body.Futuro #roomInput { width: 1000px !important; }
body.Futuro #roomBcm { left: 1030px !important; translate: none !important; }

body.Futuro #roomButtonBack, body.Futuro #buttonShopFromRoom, body.Futuro #buttonOptionsRoom, body.Futuro #container.Room #facebook_post { width: 196px !important; }
body.Futuro #roomButtonBack { left: 18px !important; }
body.Futuro #buttonShopFromRoom { left: 226px !important; }
body.Futuro #buttonOptionsRoom { left: 434px !important; }
body.Futuro #container.Room #facebook_post { left: 642px !important; }

#roomButtonFriends {
    position: absolute;
    left: 850px;
    top: 560px;
    width: 196px;
    height: 32px;
    border-radius: 9px;
    background: var(--b-blue);
    box-shadow: inset 0 -4px 0 var(--b-blue-edge), inset 0 2px 0 rgba(255, 255, 255, .4), 0 0 0 2px #06102a;
    cursor: pointer;
}

#roomButtonFriends::after {
    content: "👥 Amigos y clan";
    position: absolute;
    inset: 0 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 600 14px var(--font-d);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

#roomButtonFriends:hover { filter: brightness(1.1); }
#container:not(.Room) #roomButtonFriends, #container:not(.Room) #roomPopup { display: none; }