/* Estilo futurista (neón / cristal oscuro) para la interfaz del juego.
   Se carga después de #DragonTheme, así que gana a los temas sin tocar sus imágenes.
   Las secciones "body.Futuro" solo se aplican con el tema Futuro (sala y lobby sin imagen de fondo). */

@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/static/fonts/exo2-latin.woff2) format('woff2');
}

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

:root {
    --bg: #060a1c;
    --ink: #04061a;
    --cyan: #23d5ff;
    --violet: #8b5cff;
    --magenta: #ff3d9a;
    --orange: #ff8a3d;
    --yellow: #ffc83d;
    --lime: #2dff9a;
    --red: #ff4d6a;
    --text: #e8f4ff;
    --muted: #8fb3e6;
    --glass: linear-gradient(180deg, rgba(20, 30, 74, .96) 0%, rgba(9, 14, 42, .96) 100%);
    --card-grad: var(--glass);
    --head-grad: linear-gradient(90deg, rgba(35, 213, 255, .22), rgba(139, 92, 255, .22) 50%, rgba(255, 61, 154, .22));
    --edge: linear-gradient(90deg, var(--cyan), var(--violet) 50%, var(--magenta));
    --neon: 0 0 0 1px rgba(35, 213, 255, .75), 0 0 18px rgba(35, 213, 255, .35), 0 12px 40px rgba(0, 0, 0, .55);
    --sticker: var(--neon);
    --font: 'Exo 2', Emoji, 'Segoe UI', Verdana, sans-serif;
    --font-d: 'Orbitron', 'Exo 2', sans-serif;
}

body, input, select, textarea, button { font-family: var(--font) !important; }

body.Futuro {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(35, 213, 255, .18), transparent 45%),
        radial-gradient(ellipse at 90% 80%, rgba(255, 61, 154, .16), transparent 45%),
        linear-gradient(rgba(59, 108, 255, .07) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(59, 108, 255, .07) 1px, transparent 1px) 0 0 / 32px 32px,
        var(--bg) !important;
}

/* ---------- Pantalla de carga ---------- */

#Loading {
    background:
        radial-gradient(ellipse at 50% 35%, rgba(139, 92, 255, .35) 0%, transparent 55%),
        linear-gradient(rgba(35, 213, 255, .08) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(35, 213, 255, .08) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--bg) !important;
}

#Loading::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0, rgba(35, 213, 255, .12) 50%, transparent 100%) 0 0 / 100% 120px no-repeat;
    animation: fxScan 3.5s linear infinite;
}

@keyframes fxScan {
    from { background-position: 0 -120px; }
    to { background-position: 0 110vh; }
}

#LoadingS {
    font-family: var(--font) !important;
    font-weight: 600;
    font-size: 26px !important;
    height: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    color: var(--text);
    text-shadow: 0 0 12px rgba(35, 213, 255, .6);
    letter-spacing: 1px;
}

#LoadingS::before {
    content: "DRAGONBOUND";
    display: block;
    margin-bottom: 22px;
    font-family: var(--font-d);
    font-size: 70px;
    font-weight: 900;
    letter-spacing: 8px;
    line-height: 1;
    background: linear-gradient(90deg, var(--cyan), #fff 30%, var(--violet) 60%, var(--magenta));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 14px rgba(35, 213, 255, .55));
    animation: fxShine 4s linear infinite, fxFlicker 5s steps(1) infinite;
}

@keyframes fxShine { to { background-position: -200% 0; } }

@keyframes fxFlicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: .55; }
    94% { opacity: 1; }
    96% { opacity: .7; }
}

#meterDN3 { width: 80% !important; max-width: 640px; margin-top: 10px !important; }

.meterDN {
    height: 26px !important;
    padding: 3px !important;
    background: rgba(4, 6, 26, .85) !important;
    border: 1px solid var(--cyan);
    border-radius: 4px !important;
    box-shadow: 0 0 18px rgba(35, 213, 255, .35) !important;
}

.meterDN > span {
    border-radius: 2px !important;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 2px, transparent 2px 10px),
        linear-gradient(90deg, var(--cyan), var(--violet) 60%, var(--magenta)) !important;
    box-shadow: 0 0 12px rgba(35, 213, 255, .7) !important;
}

#meterDN1 {
    font-family: var(--font-d);
    font-size: 15px !important;
    line-height: 26px !important;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 6px var(--ink), 0 0 10px rgba(35, 213, 255, .8) !important;
}

@media (max-width: 900px), (max-height: 200px) {
    #LoadingS { font-size: 16px !important; }
    #LoadingS::before { font-size: 36px; letter-spacing: 4px; margin-bottom: 10px; }
}

/* ---------- Panel de rankings (izquierda) ---------- */

#ranking_panel {
    background: linear-gradient(180deg, rgba(14, 22, 58, .96) 0%, rgba(6, 10, 28, .96) 100%) !important;
    border-right: 1px solid rgba(35, 213, 255, .55);
    box-shadow: 4px 0 24px rgba(35, 213, 255, .12);
}

#ranking_title {
    font-family: var(--font-d);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cyan) !important;
    text-shadow: 0 0 8px rgba(35, 213, 255, .7) !important;
}

.ranking_btn {
    background: rgba(35, 213, 255, .08) !important;
    border: 1px solid rgba(35, 213, 255, .45) !important;
    border-radius: 3px !important;
    color: var(--text) !important;
    text-shadow: none !important;
    transition: background .12s, box-shadow .12s, transform .1s;
}

.ranking_btn:hover { background: rgba(35, 213, 255, .2) !important; box-shadow: 0 0 10px rgba(35, 213, 255, .45); transform: translateY(-1px); }
.ranking_btn.selected, .ranking_btn.active { background: linear-gradient(90deg, rgba(255, 61, 154, .5), rgba(139, 92, 255, .5)) !important; border-color: var(--magenta) !important; }

#ranking_panel_open {
    background: rgba(14, 22, 58, .95) !important;
    border: 1px solid var(--cyan) !important;
    color: var(--cyan) !important;
    box-shadow: 0 0 10px rgba(35, 213, 255, .4);
}

/* ---------- Selección de servidor ---------- */

#BrokerWindow,
#BrokerPlayer {
    background: var(--glass) !important;
    border: 1px solid var(--cyan) !important;
    box-shadow: var(--neon) !important;
}

#BrokerWindow { border-radius: 8px !important; }

#BrokerWindow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    pointer-events: none;
    background:
        linear-gradient(rgba(35, 213, 255, .06) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(35, 213, 255, .06) 1px, transparent 1px) 0 0 / 24px 24px;
}

#BrokerTitle, #BrokerPlayer {
    font-family: var(--font-d);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text) !important;
    text-shadow: 0 0 8px rgba(35, 213, 255, .6) !important;
}

.BrokerChannel {
    background: linear-gradient(180deg, rgba(14, 22, 58, .95), rgba(6, 10, 30, .95)) !important;
    border: 1px solid var(--c1, var(--cyan));
    border-radius: 6px;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 0 10px color-mix(in srgb, var(--c1, #23d5ff) 35%, transparent);
    transition: transform .12s, box-shadow .12s, filter .12s;
}

.BrokerChannel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 25px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c1, #23d5ff) 55%, transparent), color-mix(in srgb, var(--c2, #3a8bff) 25%, transparent));
    border-bottom: 1px solid var(--c1, var(--cyan));
}

#BrokerChannel0, #BrokerChannel5 { --c1: #23d5ff; --c2: #3a8bff; }
#BrokerChannel1, #BrokerChannel6 { --c1: #2dff9a; --c2: #16b878; }
#BrokerChannel2, #BrokerChannel7 { --c1: #ffc83d; --c2: #ff8a3d; }
#BrokerChannel3, #BrokerChannel8 { --c1: #ff3d9a; --c2: #ff4d6a; }
#BrokerChannel4, #BrokerChannel9 { --c1: #8b5cff; --c2: #5a3cff; }
#BrokerChannel10 { --c1: #ffc83d; --c2: #ff3d9a; }

.BrokerChannelName {
    top: 3px !important;
    left: 8px !important;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: .5px;
    color: #fff !important;
    text-shadow: 0 0 6px var(--ink), 0 1px 0 var(--ink) !important;
    white-space: nowrap;
}

.BrokerMaxPlayers2 {
    left: 106px !important;
    width: 70px !important;
    height: 6px !important;
    top: 33px !important;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .1) !important;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 2px;
}

.BrokerNumPlayers2 {
    left: 107px !important;
    max-width: 68px;
    height: 4px !important;
    top: 34px !important;
    background: var(--c1, var(--lime)) !important;
    box-shadow: 0 0 8px var(--c1, var(--lime));
    border-radius: 1px;
}

.BrokerChannel:not(.BrokerChannelOnline) { filter: grayscale(.9) brightness(.7); }

.BrokerChannelOnline:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px var(--c1, var(--cyan)), 0 0 22px color-mix(in srgb, var(--c1, #23d5ff) 70%, transparent);
}

.BrokerChannelOnline:active { transform: translateY(1px); }

#NewUser2Text { font-weight: 700; font-size: 15px !important; white-space: nowrap; }

/* ---------- Diálogos y alertas ---------- */

.AlertBox {
    background: var(--glass) !important;
    border: 1px solid var(--cyan);
    border-radius: 8px;
    box-shadow: var(--neon);
    box-sizing: border-box;
}

/* Cabecera */
.AlertBox::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 34px;
    border-radius: 7px 7px 0 0;
    background: var(--head-grad);
    border-bottom: 1px solid rgba(35, 213, 255, .55);
    pointer-events: none;
}

/* Esquinas doradas tipo visor */
.AlertBox::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 8px;
    pointer-events: none;
    background:
        linear-gradient(var(--yellow), var(--yellow)) 0 0 / 16px 2px,
        linear-gradient(var(--yellow), var(--yellow)) 0 0 / 2px 16px,
        linear-gradient(var(--yellow), var(--yellow)) 100% 100% / 16px 2px,
        linear-gradient(var(--yellow), var(--yellow)) 100% 100% / 2px 16px;
    background-repeat: no-repeat;
}

.AlertBoxTitle {
    z-index: 2;
    top: 6px !important;
    font-family: var(--font-d);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cyan) !important;
    text-shadow: 0 0 8px rgba(35, 213, 255, .7) !important;
}

.AlertBoxContent {
    font-weight: 500;
    color: var(--text) !important;
    text-shadow: 0 1px 2px var(--ink) !important;
}

.AlertBoxBackground { background: radial-gradient(ellipse at center, rgba(14, 22, 58, .9) 0%, #000 100%) !important; opacity: .7 !important; }

.buttonOK, .buttonCancel, .AlertBoxOK, .AlertBoxCancel { transition: transform .1s, filter .1s; }
.buttonOK:hover, .buttonCancel:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.15) drop-shadow(0 0 6px rgba(35, 213, 255, .8)); }
.buttonOK:active, .buttonCancel:active { transform: translateY(1px) scale(.97); }

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

#OptionsDialog {
    background: var(--glass) !important;
    border: 1px solid var(--cyan) !important;
    border-radius: 8px;
    box-shadow: var(--neon) !important;
    color: var(--text) !important;
}

#OptionsDialog .OptionsDialogTitle {
    font-family: var(--font-d);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cyan) !important;
    text-shadow: 0 0 8px rgba(35, 213, 255, .7);
}

#OptionsDialog [id^=OptionsText] { color: var(--text) !important; font-weight: 500; text-shadow: none; }
#OptionsDialog #OptionsText1, #OptionsDialog #OptionsText6, #OptionsDialog #OptionsText7, #OptionsDialog #OptionsText8,
#OptionsDialog #OptionsText9, #OptionsDialog #OptionsText10, #OptionsDialog #OptionsText3 {
    color: var(--yellow) !important;
    font-family: var(--font-d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#OptionsOK {
    background: linear-gradient(180deg, rgba(35, 213, 255, .45), rgba(35, 213, 255, .15)) !important;
    border: 1px solid var(--cyan) !important;
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(35, 213, 255, .45);
    color: #fff !important;
    font-family: var(--font-d);
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 0 6px var(--cyan);
}

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

/* El texto "OK" venía dentro de la imagen del tema */
#OptionsOK::after {
    content: "OK";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

#OptionsDialog select,
#OptionsDialog input[type=button],
#OptionsDialog button {
    border: 1px solid rgba(35, 213, 255, .6);
    border-radius: 4px;
    background: rgba(4, 6, 26, .85);
    color: var(--text);
    font-weight: 600;
}

/* ---------- Ventana Charge: la página /recarga ocupa toda la ventana ---------- */

#chargeWindow {
    max-height: calc(100vh - 20px);
    box-sizing: border-box;
    overflow: hidden;
    background: var(--bg) !important;
    border: 1px solid var(--cyan) !important;
    border-radius: 10px !important;
    box-shadow: var(--neon);
}

#chargeWindow .seller_button,
#chargeMyUserID { display: none !important; }

#chargeWindowPayment {
    position: absolute;
    inset: 0;
    margin: 0 !important;
}

#chargeFrame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

#chargeWindowClose { z-index: 5; top: 8px !important; right: 8px !important; }

/* ---------- Ventana del Pass / Radar (#freecashWindow) ---------- */

#freecashWindow {
    background: var(--bg) !important;
    border: 1px solid var(--cyan) !important;
    border-radius: 10px !important;
    box-shadow: var(--neon) !important;
    font-family: var(--font);
}

#freecashWindow .DragonWindowTitleBar {
    height: 40px;
    line-height: 40px;
    border-radius: 9px 9px 0 0;
    box-shadow: none;
    background: var(--head-grad) !important;
    border-bottom: 1px solid rgba(35, 213, 255, .55);
}

#freecashWindow .DragonWindowTitle {
    font-family: var(--font-d);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cyan);
    text-shadow: 0 0 10px rgba(35, 213, 255, .7);
}

#freecashWindow .DragonWindowClose { top: 10px; }

#freecashWindow .DragonWindowBody { padding: 0; }

.pz {
    padding: 14px 16px 16px;
    color: var(--text);
    background:
        radial-gradient(ellipse 60% 40% at 15% 0%, rgba(139, 92, 255, .22), transparent 70%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(255, 61, 154, .14), transparent 70%);
    border-radius: 0 0 10px 10px;
}

.pzHead {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.pzStatus {
    font-family: var(--font-d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.pzStatus.on { color: #04140c; background: var(--lime); box-shadow: 0 0 14px rgba(45, 255, 154, .55); }
.pzStatus.off { color: var(--muted); border: 1px solid rgba(255, 255, 255, .2); }

.pzWins { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.pzWins b { font-family: var(--font-d); font-size: 26px; color: var(--yellow); text-shadow: 0 0 12px rgba(255, 200, 61, .55); }
.pzWins span { color: var(--muted); font-size: 13px; }

.pzReady {
    margin-left: auto;
    font-size: 13px;
    color: var(--cyan);
    text-align: right;
}

.pzBar {
    position: relative;
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(35, 213, 255, .25);
    overflow: hidden;
    margin-bottom: 12px;
}

.pzBar span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    box-shadow: 0 0 12px var(--cyan);
}

/* Premios: una columna por cada 30 victorias, fila gratis arriba y fila del Pass abajo */
.pzTrack { display: flex; gap: 6px; }

.pzRowLabels {
    display: grid;
    grid-template-rows: 20px 82px 82px;
    row-gap: 6px;
    width: 46px;
    flex: none;
}

.pzRowLabels div {
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--cyan);
    border-radius: 6px;
    background: rgba(35, 213, 255, .08);
}

.pzRowLabels div:first-child { background: none; }
.pzRowLabels .pass { color: var(--yellow); background: rgba(255, 200, 61, .1); }

.pzCols {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
}

.pzCol {
    display: grid;
    grid-template-rows: 20px 82px 82px;
    row-gap: 6px;
    min-width: 0;
}

.pzTier {
    text-align: center;
    font-family: var(--font-d);
    font-size: 11px;
    color: var(--muted);
    line-height: 20px;
    border-bottom: 2px solid rgba(255, 255, 255, .12);
}

.pzCol.reached .pzTier { color: var(--cyan); border-bottom-color: var(--cyan); }

.pzCell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 8px;
    background: rgba(12, 18, 46, .85);
    border: 1px solid rgba(255, 255, 255, .1);
    overflow: hidden;
    text-align: center;
    line-height: 1.1;
}

.pzCell b { font-family: var(--font-d); font-size: 12px; color: var(--yellow); }
.pzCell small { font-size: 9px; color: var(--muted); padding: 0 2px; }
.pzCell img { width: 40px; height: 40px; object-fit: contain; }

.pzCoin {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6c7, var(--yellow) 45%, #b8780c);
    box-shadow: 0 0 8px rgba(255, 200, 61, .6), inset 0 -2px 0 rgba(0, 0, 0, .25);
}

.pzCell.locked { opacity: .45; }
.pzCell.nopass { opacity: .4; filter: grayscale(.8); }

.pzCell.locked::after,
.pzCell.nopass::after {
    content: "\1F512";
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 10px;
}

/* Se apaga el contenido, no la celda, para que el ✔ se vea brillante */
.pzCell.done > * { filter: grayscale(.7); opacity: .45; }

.pzCell.done::after {
    content: "\2714";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--lime);
    background: rgba(4, 8, 24, .35);
    text-shadow: 0 0 10px var(--lime);
}

/* Deja sitio a la banda COBRAR */
.pzCell.ready { padding-bottom: 12px; }

.pzCell.ready {
    cursor: pointer;
    border-color: var(--lime);
    background: linear-gradient(180deg, rgba(45, 255, 154, .22), rgba(12, 18, 46, .9));
    animation: pzReady 1.6s ease-in-out infinite;
}

.pzCell.ready::before {
    content: "COBRAR";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: var(--font-d);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #04140c;
    background: var(--lime);
    padding: 2px 0;
}

.pzCell.ready:hover { transform: translateY(-2px); }

@keyframes pzReady {
    0%, 100% { box-shadow: 0 0 6px rgba(45, 255, 154, .4); }
    50% { box-shadow: 0 0 18px rgba(45, 255, 154, .9); }
}

.pzBottom {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 14px;
    margin-top: 14px;
}

.pzSet, .pzInfo {
    border-radius: 8px;
    background: rgba(12, 18, 46, .7);
    border: 1px solid rgba(35, 213, 255, .25);
    padding: 10px 12px;
}

.pzSet { text-align: center; }
.pzSet img { width: 140px; border-radius: 6px; margin-top: 6px; box-shadow: 0 0 16px rgba(139, 92, 255, .45); }

.pzLbl {
    font-family: var(--font-d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--cyan);
}

.pzInfo ul { list-style: none; margin: 8px 0 12px; padding: 0; font-size: 13px; }
.pzInfo li { position: relative; padding: 3px 0 3px 18px; }
.pzInfo li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 6px var(--lime); }
.pzInfo li.warn { color: var(--muted); }
.pzInfo li.warn::before { background: var(--magenta); box-shadow: 0 0 6px var(--magenta); }

#PassBtn.pzBuy { width: 100%; height: auto; margin-top: 0; }

.pzBuy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 16px;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-d);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1a0f00;
    background: linear-gradient(90deg, var(--yellow), #ff8a3d);
    box-shadow: 0 0 18px rgba(255, 200, 61, .5);
    transition: transform .1s, filter .1s;
}

.pzBuy span { font-size: 13px; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, .2); color: #fff; }
.pzBuy:hover { filter: brightness(1.1); transform: translateY(-1px); }

.pzOwned {
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    font-family: var(--font-d);
    font-size: 13px;
    color: var(--lime);
    border: 1px solid var(--lime);
    background: rgba(45, 255, 154, .08);
}

/* ---------- Free Cash y premios del Pass: tarjetas de Cash y Gold ---------- */

/* El diálogo mide 300x176: el contenido se centra y deja sitio al botón OK */
.AlertBoxContent:has(.fxReward) {
    right: 0;
    padding: 0 16px !important;
}

.fxReward {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 2px 0 8px;
}

.fxRCard {
    flex: 1;
    display: grid;
    grid-template-columns: 22px auto;
    grid-template-rows: auto auto;
    column-gap: 7px;
    align-items: center;
    justify-content: center;
    padding: 7px 6px;
    border-radius: 6px;
    background: rgba(12, 18, 46, .85);
    border: 1px solid var(--yellow);
    box-shadow: 0 0 12px rgba(255, 200, 61, .35);
    animation: fxRewardPop .45s cubic-bezier(.2, 1.4, .4, 1) both;
}

.fxRCard.gold { border-color: #ff9d3d; animation-delay: .12s; }

.fxRCard i {
    grid-row: 1 / 3;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6c7, var(--yellow) 45%, #b8780c);
    box-shadow: 0 0 8px rgba(255, 200, 61, .7);
}

.fxRCard.gold i { background: radial-gradient(circle at 35% 30%, #ffe2c2, #ff9d3d 45%, #9a4a08); }

.fxRCard b {
    font-family: var(--font-d);
    font-size: 15px;
    line-height: 1;
    color: var(--yellow);
    text-shadow: 0 0 8px rgba(255, 200, 61, .6);
}

.fxRCard.gold b { color: #ffb36b; }
.fxRCard span { font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

.fxRewardNote { margin: 0; text-align: center; font-size: 11px; color: var(--muted); }
.fxRewardNote b { color: var(--cyan); }

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

/* ---------- Tienda: orden por precio, sugerencias de conjuntos y barra del conjunto ---------- */

/* Arriba a la derecha, junto al título AVATAR SHOP */
#shopSortBox {
    position: absolute;
    right: 8px;
    top: 5px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 3px;
    font-family: var(--font);
}

#shopSortBox button {
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    border: 1px solid rgba(35, 213, 255, .45);
    background: rgba(6, 10, 28, .85);
    color: var(--text);
    font: 600 10px var(--font);
    white-space: nowrap;
    cursor: pointer;
}

#shopSortBox button:hover { border-color: var(--cyan); }

#shopSortBox button.on {
    color: #04101c;
    border-color: var(--cyan);
    background: var(--cyan);
    box-shadow: 0 0 10px rgba(35, 213, 255, .6);
}

#shopSuggest {
    position: absolute;
    left: 10px;
    bottom: 126px;
    width: 236px;
    z-index: 20;
    border-radius: 8px;
    border: 1px solid var(--cyan);
    background: rgba(6, 10, 28, .97);
    box-shadow: var(--neon), 0 10px 30px rgba(0, 0, 0, .6);
    overflow: hidden;
    font-family: var(--font);
}

.sgItem {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sgItem:last-child { border-bottom: 0; }
.sgItem:hover, .sgItem.on { background: rgba(35, 213, 255, .16); }

.sgName {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    color: var(--text);
}

.sgName mark { background: none; color: var(--cyan); font-weight: 700; }

.sgSet {
    flex: none;
    font-family: var(--font-d);
    font-size: 8px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 3px;
    color: #1a0f00;
    background: var(--yellow);
}

.sgPieces { display: flex; gap: 1px; flex: none; }

.sgPieces .shop_item_icon {
    position: static !important;
    display: inline-block;
    transform: scale(.75);
    margin: -2px -3px;
}

.sgEmpty { padding: 10px; font-size: 12px; color: var(--muted); text-align: center; }

/* En el hueco entre los items y los botones de categoría */
#shopSetBar {
    position: absolute;
    left: 259px;
    top: 477px;
    width: 518px;
    height: 20px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 0 10px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid var(--yellow);
    background: rgba(6, 10, 28, .94);
    box-shadow: 0 0 12px rgba(255, 200, 61, .35);
    font-family: var(--font);
    font-size: 12px;
    color: var(--text);
}

#shopSetBar.hide { display: none; }

.sbLabel { font-family: var(--font-d); font-size: 9px; font-weight: 700; letter-spacing: 1px; color: var(--yellow); }
.sbName { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 200px; color: #fff; }
.sbInfo { color: var(--muted); white-space: nowrap; }

#shopTrySet {
    margin-left: auto;
    height: 16px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font: 700 11px var(--font);
    color: #1a0f00;
    background: linear-gradient(90deg, var(--yellow), #ff8a3d);
}

#shopSetClose {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    color: var(--muted);
    background: rgba(255, 255, 255, .08);
    font-size: 11px;
}

#shopSetClose:hover { color: #fff; background: var(--red); }

/* ---------- Lobby (todos los temas) ---------- */

.LobbyButton { transition: transform .12s ease-out, filter .12s; }

.LobbyButton:hover {
    transform: translateY(-3px) scale(1.06);
    filter: brightness(1.12) drop-shadow(0 0 7px rgba(35, 213, 255, .95));
}

.LobbyButton:active { transform: translateY(1px) scale(.96); }

#channelInput,
#lobby_channel {
    box-sizing: border-box;
    border: 1px solid rgba(35, 213, 255, .55) !important;
    border-radius: 4px !important;
    background: rgba(4, 6, 26, .85) !important;
    color: var(--text) !important;
    font-weight: 500;
    outline: none;
}

#channelInput:focus { box-shadow: 0 0 0 1px var(--cyan), 0 0 12px rgba(35, 213, 255, .5); }

#BrokerLogout, #BrokerRefresh { transition: transform .12s, filter .12s; }
#BrokerLogout:hover, #BrokerRefresh:hover { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(35, 213, 255, .9)); }

/* Barras de desplazamiento */
.DragonScroll::-webkit-scrollbar, .flexcroll::-webkit-scrollbar { width: 8px; }
.DragonScroll::-webkit-scrollbar-track, .flexcroll::-webkit-scrollbar-track { background: rgba(4, 6, 26, .6); border-radius: 4px; }
.DragonScroll::-webkit-scrollbar-thumb, .flexcroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--cyan), var(--violet));
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(35, 213, 255, .6);
}

/* ---------- Crear Sala: en CSS puro (antes el título y las etiquetas venían pintados en la imagen) ---------- */

#dialogCreateRoom {
    width: 341px !important;
    height: 290px !important;
    top: 110px !important;
}

#crHeader {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 34px;
    z-index: 2;
    line-height: 34px;
    text-align: center;
    font-family: var(--font-d);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cyan);
    text-shadow: 0 0 10px rgba(35, 213, 255, .8);
}

#dialogCreateRoom .crLabel {
    position: absolute;
    left: 14px;
    width: 92px;
    z-index: 2;
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 24px;
    color: var(--muted);
}

#crLabelTitle { top: 46px; }
#crLabelPlayers { top: 136px; }
#crLabelMode { top: 164px; }
#dialogCreateRoom #crLabelPass { left: 0; top: 0; }

/* Campos de texto */
#dialogCreateRoom #createRoomTitle,
#dialogCreateRoom #createRoomPasswordInput {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    width: 212px !important;
    height: 24px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(35, 213, 255, .6) !important;
    border-radius: 4px;
    background: rgba(4, 6, 26, .85) !important;
    color: var(--text) !important;
    font-size: 13px;
    font-weight: 500;
    outline: none;
    transition: box-shadow .15s;
}

#dialogCreateRoom #createRoomTitle { left: 112px; top: 46px; }
#dialogCreateRoom #createRoomPasswordInput { left: 98px; top: 0; }
#dialogCreateRoom #createRoomTitle:focus,
#dialogCreateRoom #createRoomPasswordInput:focus { box-shadow: 0 0 0 1px var(--cyan), 0 0 12px rgba(35, 213, 255, .6); }

#CreateRoomPassword {
    left: 14px !important;
    top: 104px !important;
    width: 310px !important;
    height: 24px !important;
    z-index: 2;
    background: none !important;
}

/* Casilla "Sala privada" */
#CreateRoomPrivateCheckbox {
    left: 112px !important;
    top: 78px !important;
    width: 140px !important;
    height: 18px !important;
    z-index: 2;
    background: none !important;
    cursor: pointer;
}

#CreateRoomPrivateCheckbox::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 1px solid var(--cyan);
    border-radius: 3px;
    background: rgba(4, 6, 26, .85);
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    transition: background .12s, box-shadow .12s;
}

#CreateRoomPrivateCheckbox.checkboxOn::before { content: "✓"; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

#CreateRoomPrivateCheckbox::after {
    content: "Sala privada";
    position: absolute;
    left: 25px;
    top: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    color: var(--text);
}

/* Selectores de jugadores y modo */
#dialogCreateRoom #CreateRoomPlayers,
#dialogCreateRoom #CreateRoomMode {
    left: 140px !important;
    width: 156px !important;
    z-index: 2;
    text-align: center;
    white-space: nowrap;
    color: var(--text) !important;
    font-weight: 700;
}

#dialogCreateRoom #CreateRoomPlayers { top: 136px !important; }
#dialogCreateRoom #CreateRoomMode { top: 164px !important; }

#dialogCreateRoom .buttonPrev,
#dialogCreateRoom .buttonNext {
    z-index: 3;
    box-sizing: border-box;
    width: 22px !important;
    height: 22px !important;
    border: 1px solid var(--cyan);
    border-radius: 4px;
    background: rgba(35, 213, 255, .1) !important;
    cursor: pointer;
    transition: transform .1s, background .1s, box-shadow .1s;
}

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

#dialogCreateRoom .buttonPrev::before { border-right: 7px solid var(--cyan); border-left: 0; margin-left: -4px; }
#dialogCreateRoom .buttonNext::before { border-left: 7px solid var(--cyan); border-right: 0; margin-left: -3px; }
#dialogCreateRoom .buttonPrev:hover, #dialogCreateRoom .buttonNext:hover { transform: scale(1.12); background: rgba(35, 213, 255, .3) !important; box-shadow: 0 0 10px var(--cyan); }
#dialogCreateRoom .buttonPrev:active, #dialogCreateRoom .buttonNext:active { transform: scale(.95); }

#CreateRoomNumPlayersPrev { left: 114px !important; top: 137px !important; }
#CreateRoomNumPlayersNext { left: 302px !important; top: 137px !important; }
#CreateRoomModePrev { left: 114px !important; top: 165px !important; }
#CreateRoomModeNext { left: 302px !important; top: 165px !important; }
#dialogCreateLocked { left: 302px !important; top: 163px !important; z-index: 4; }

/* Descripción del modo */
#dialogCreateRoom #CreateRoomModeIcon {
    left: 18px !important;
    top: 196px !important;
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(35, 213, 255, .7));
}

#dialogCreateRoom #dialogCreateMessage {
    position: absolute;
    left: 76px !important;
    top: 200px !important;
    width: 250px;
    z-index: 2;
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.35;
    text-shadow: none;
}

/* Botones Cancelar / Crear */
#dialogCreateRoomButtonCancel,
#dialogCreateRoomButtonOK {
    display: block !important;
    top: auto !important;
    bottom: 12px !important;
    z-index: 3;
    box-sizing: border-box;
    width: 148px !important;
    height: 34px !important;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    transition: transform .08s, box-shadow .12s, filter .1s;
}

#dialogCreateRoomButtonCancel {
    left: 14px !important;
    right: auto !important;
    border-color: var(--red);
    background: linear-gradient(180deg, rgba(255, 77, 106, .45), rgba(255, 77, 106, .12)) !important;
    box-shadow: 0 0 10px rgba(255, 77, 106, .4);
}

#dialogCreateRoomButtonOK {
    right: 14px !important;
    left: auto !important;
    border-color: var(--lime);
    background: linear-gradient(180deg, rgba(45, 255, 154, .5), rgba(45, 255, 154, .14)) !important;
    box-shadow: 0 0 12px rgba(45, 255, 154, .45);
}

#dialogCreateRoomButtonCancel::before,
#dialogCreateRoomButtonOK::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-d);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 8px var(--ink);
}

#dialogCreateRoomButtonCancel::before { content: "Cancelar"; }
#dialogCreateRoomButtonOK::before { content: "Crear"; }
#dialogCreateRoomButtonCancel:hover, #dialogCreateRoomButtonOK:hover { filter: brightness(1.25); transform: translateY(-1px); }
#dialogCreateRoomButtonCancel:active, #dialogCreateRoomButtonOK:active { transform: translateY(2px); }

/* =====================================================================
   TEMA FUTURO: lobby y sala dibujados con SVG/CSS (sin imágenes de fondo)
   ===================================================================== */

/* ---------- Lobby ---------- */

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

/* El modo sin imagen agrega fondos grises; los paneles ya están en el SVG */
body.Futuro #channel.TBGnBorder,
body.Futuro #channelName.TBGnBorder,
body.Futuro #playersList.TBG,
body.Futuro #myInfoBox {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.Futuro #channelInput.TBGnBorder { border: 0 !important; background: transparent !important; box-shadow: none !important; }

body.Futuro #channelName {
    font-family: var(--font-d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cyan);
    text-shadow: 0 0 8px rgba(35, 213, 255, .7);
}

body.Futuro #myName2 { font-family: var(--font-d); font-weight: 700; letter-spacing: .5px; color: #fff; text-shadow: 0 0 8px rgba(255, 200, 61, .7); }
body.Futuro #myPhotoDiv { border-radius: 4px; box-shadow: 0 0 0 1px var(--yellow), 0 0 12px rgba(255, 200, 61, .5); }
body.Futuro #myGP2 { color: var(--cyan) !important; }
body.Futuro #myCash2 { color: var(--magenta) !important; }
body.Futuro #myGold2 { color: var(--yellow) !important; }

body.Futuro .playerListItem { border-radius: 3px; transition: background .1s; }
body.Futuro .playerListItem:hover { background: rgba(35, 213, 255, .14); }

/* ---------- Sala de espera ---------- */

body.Futuro #roomScreen {
    background: url(/static/images/ui/room-futuro.svg) 0 0 / 100% 100% no-repeat;
    color: var(--text);
}

body.Futuro #roomOverly { display: none !important; }

/* Barra superior: número y nombre de la sala */
body.Futuro #roomNumber { left: 49px; top: 9px; }

body.Futuro #roomTitle {
    left: 96px;
    top: 8px;
    width: 520px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.Futuro #room_change_title_button { left: 20px; top: 8px; }

/* Ranuras de jugadores: 2x2 por equipo (el JS fija "top" en línea) */
body.Futuro .playerInRoom {
    width: 126px;
    height: 150px;
    z-index: 1;
    cursor: pointer;
}

body.Futuro #playerInRoom0 { left: 8px !important; top: 32px !important; }
body.Futuro #playerInRoom2 { left: 140px !important; top: 32px !important; }
body.Futuro #playerInRoom4 { left: 8px !important; top: 188px !important; }
body.Futuro #playerInRoom6 { left: 140px !important; top: 188px !important; }
body.Futuro #playerInRoom1 { left: 534px !important; top: 32px !important; }
body.Futuro #playerInRoom3 { left: 666px !important; top: 32px !important; }
body.Futuro #playerInRoom5 { left: 534px !important; top: 188px !important; }
body.Futuro #playerInRoom7 { left: 666px !important; top: 188px !important; }

/* Relleno de la tarjeta (el marco neón está en el SVG) */
body.Futuro .playerInRoom::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
    background:
        radial-gradient(ellipse 60% 18% at 50% 84%, var(--tc-soft), transparent 70%),
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 100% 6px,
        linear-gradient(180deg, var(--tc-top) 0%, #0a1434 55%, #050a1e 100%);
    transition: filter .15s;
}

body.Futuro .playerInRoom.SideA { --tc: #23d5ff; --tc-top: #11406a; --tc-soft: rgba(35, 213, 255, .45); }
body.Futuro .playerInRoom.SideB { --tc: #ff3d9a; --tc-top: #4f1150; --tc-soft: rgba(255, 61, 154, .45); }
body.Futuro .playerInRoom:hover::before { filter: brightness(1.35); }

/* Entrada de la tarjeta al aparecer */
body.Futuro .playerInRoom { animation: fxSlotIn .35s ease-out backwards; }

@keyframes fxSlotIn {
    from { opacity: 0; transform: translateY(8px) scale(.96); }
}

/* Nombre: franja inferior */
body.Futuro .playerInRoom .roomPlayerName {
    left: 1px !important;
    right: 1px;
    top: auto !important;
    bottom: 1px;
    width: auto !important;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
    background: rgba(3, 5, 18, .88);
    border-top: 1px solid var(--tc);
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón de información */
body.Futuro .playerInRoom .roomPlayerInfo {
    top: 6px !important;
    width: 18px !important;
    height: 18px !important;
    box-sizing: border-box;
    transform: none !important;
    background: rgba(3, 5, 18, .8) !important;
    border: 1px solid var(--tc);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--tc);
}

body.Futuro .SideA .roomPlayerInfo { left: 6px !important; right: auto !important; }
body.Futuro .SideB .roomPlayerInfo { right: 6px !important; left: auto !important; }

body.Futuro .playerInRoom .roomPlayerInfo::before {
    content: "i";
    position: absolute;
    inset: 0;
    font-family: Georgia, serif;
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    line-height: 16px;
    text-align: center;
    color: #fff;
}

/* Estado: MASTER / LISTO / ESPERANDO */
body.Futuro .playerInRoom .roomPlayerMaster,
body.Futuro .playerInRoom .roomPlayerReady,
body.Futuro .playerInRoom .roomPlayerNotReady {
    top: 7px !important;
    bottom: auto !important;
    width: auto !important;
    height: 15px !important;
    padding: 0 6px;
    background: none !important;
    border-radius: 2px;
    font-family: var(--font-d);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 15px;
    white-space: nowrap;
}

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

body.Futuro .playerInRoom .roomPlayerMaster {
    background: linear-gradient(180deg, #ffe48a, var(--yellow)) !important;
    color: #2a1800;
    box-shadow: 0 0 10px rgba(255, 200, 61, .8);
}

body.Futuro .playerInRoom .roomPlayerMaster::before { content: "★ MASTER"; }

body.Futuro .playerInRoom .roomPlayerReady {
    background: rgba(45, 255, 154, .2) !important;
    border: 1px solid var(--lime);
    color: var(--lime);
    text-shadow: 0 0 6px var(--lime);
    box-shadow: 0 0 10px rgba(45, 255, 154, .5);
    animation: fxReadyPulse 1.6s ease-in-out infinite;
}

body.Futuro .playerInRoom .roomPlayerReady::before { content: "LISTO"; }

@keyframes fxReadyPulse {
    50% { box-shadow: 0 0 16px rgba(45, 255, 154, .9); }
}

body.Futuro .playerInRoom .roomPlayerNotReady {
    background: rgba(3, 5, 18, .7) !important;
    border: 1px solid rgba(143, 179, 230, .4);
    color: var(--muted);
}

body.Futuro .playerInRoom .roomPlayerNotReady::before { content: "ESPERANDO"; }

/* Personaje: el dibujo se ancla en .roomPlayerMobile; se agranda desde ese punto (los pies) */
body.Futuro .playerInRoom .roomPlayerMobile { transform: scale(1.4); transform-origin: 0 0; }
body.Futuro .SideA .roomPlayerMobile { left: 66px !important; top: 116px !important; }
body.Futuro .SideB .roomPlayerMobile { right: 66px !important; top: 116px !important; }

/* Plataforma holográfica bajo el personaje */
body.Futuro .playerInRoom .roomPlayerShadow {
    bottom: 16px !important;
    width: 96px !important;
    height: 16px !important;
    background: radial-gradient(ellipse at center, var(--tc) 0%, transparent 70%) !important;
    opacity: .55;
    animation: fxPad 2.4s ease-in-out infinite;
}

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

@keyframes fxPad {
    50% { opacity: .9; transform: scaleX(1.1); }
}

body.Futuro .SideA .roomPlayerMyself { left: 6px !important; top: 30px !important; }
body.Futuro .SideB .roomPlayerMyself { right: 6px !important; top: 30px !important; }

/* Elegir / quitar bot (modo BOSS) */
body.Futuro .playerInRoom .roomBotSelect,
body.Futuro .playerInRoom .roomBotRemove {
    left: 28px !important;
    top: 28px !important;
    width: 70px !important;
    height: 16px !important;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: 3px;
    font-family: var(--font-d);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 14px;
    text-align: center;
    color: #fff;
}

body.Futuro .playerInRoom .roomBotSelect { border-color: var(--violet); background: rgba(139, 92, 255, .35) !important; box-shadow: 0 0 8px rgba(139, 92, 255, .6); }
body.Futuro .playerInRoom .roomBotRemove { border-color: var(--red); background: rgba(255, 77, 106, .3) !important; box-shadow: 0 0 8px rgba(255, 77, 106, .6); }
body.Futuro .playerInRoom .roomBotSelect::before { content: "ELEGIR BOT"; }
body.Futuro .playerInRoom .roomBotRemove::before { content: "✕ QUITAR"; }

body.Futuro .playerInRoom .roomPlayerBalloon { bottom: 112px !important; }
body.Futuro .playerInRoom .roomPlayerBalloonTip { bottom: 105px !important; }
body.Futuro .SideA .roomPlayerBalloon { left: 30px !important; }
body.Futuro .SideB .roomPlayerBalloon { right: 30px !important; }
body.Futuro .playerInRoom .roomPlayerPhoto { left: 32px !important; top: 26px !important; }

/* Panel central: modo, mapa e información */
body.Futuro #room_game_mode,
body.Futuro #room_players {
    top: 40px !important;
    width: 96px !important;
    font-family: var(--font-d);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 14px;
    text-transform: uppercase;
    text-shadow: 0 0 8px currentColor !important;
}

body.Futuro #room_game_mode { left: 300px !important; text-align: right; color: var(--lime); }
body.Futuro #room_players { left: 404px !important; text-align: left; color: var(--yellow) !important; }

body.Futuro #room_map,
body.Futuro #room_map.room_map_fix {
    left: 294px !important;
    top: 61px !important;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(35, 213, 255, .7), 0 0 14px rgba(35, 213, 255, .35);
    cursor: pointer;
    transition: box-shadow .15s, filter .15s;
}

body.Futuro #room_map:hover { filter: brightness(1.15); box-shadow: 0 0 0 1px var(--cyan), 0 0 20px rgba(35, 213, 255, .7); }

body.Futuro #room_avatars,
body.Futuro #room_wind {
    left: 286px !important;
    width: 164px !important;
    height: 16px;
    text-align: right;
    font-size: 12px !important;
    font-weight: 800;
    line-height: 16px;
    color: var(--cyan) !important;
    text-shadow: 0 0 6px rgba(35, 213, 255, .6) !important;
}

body.Futuro #room_avatars { top: 120px !important; }
body.Futuro #room_wind { top: 138px !important; }

body.Futuro #room_avatars::before,
body.Futuro #room_wind::before {
    float: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--muted);
    text-shadow: none;
}

body.Futuro #room_avatars::before { content: "Avatares"; }
body.Futuro #room_wind::before { content: "Viento"; }

/* El texto traducido ("Tiempo de turno:") no cabe junto al valor; se muestra una etiqueta corta */
body.Futuro #room_turn_time_text {
    left: 286px !important;
    right: auto !important;
    top: 156px !important;
    font-size: 0 !important;
}

body.Futuro #room_turn_time_text::before {
    content: "Turno";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 16px;
    text-transform: uppercase;
    color: var(--muted);
    text-shadow: none !important;
}

body.Futuro #room_turn_time {
    left: 360px !important;
    top: 156px !important;
    width: 90px !important;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 800;
    line-height: 16px;
    color: var(--cyan) !important;
    text-shadow: 0 0 6px rgba(35, 213, 255, .6) !important;
}

/* Opciones de la sala */
body.Futuro #room_options_button,
body.Futuro #room_options_button.room_options_button_fix {
    left: 458px !important;
    top: 118px !important;
    width: 58px !important;
    height: 52px !important;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(139, 92, 255, .4), rgba(139, 92, 255, .12)) !important;
    border: 1px solid var(--violet);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(139, 92, 255, .5);
    transition: transform .1s, box-shadow .15s;
}

body.Futuro #room_options_button::before {
    content: "⚙";
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    text-shadow: 0 0 10px var(--violet);
    transition: transform .4s;
}

body.Futuro #room_options_button::after {
    content: "OPCIONES";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    font-family: var(--font-d);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    color: var(--text);
}

body.Futuro #room_options_button:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(139, 92, 255, .9); }
body.Futuro #room_options_button:hover::before { transform: rotate(90deg); }

/* INICIAR / LISTO */
body.Futuro #roomButtonStart,
body.Futuro #roomButtonReady {
    left: 326px !important;
    top: 182px !important;
    width: 148px !important;
    height: 46px !important;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: 5px;
    overflow: hidden;
    transition: transform .1s, filter .15s;
}

body.Futuro #roomButtonStart {
    border-color: var(--lime);
    background: linear-gradient(180deg, rgba(45, 255, 154, .55) 0%, rgba(22, 184, 120, .35) 50%, rgba(6, 40, 34, .9) 100%) !important;
    animation: fxStartGlow 1.8s ease-in-out infinite;
}

body.Futuro #roomButtonReady {
    border-color: var(--yellow);
    background: linear-gradient(180deg, rgba(255, 200, 61, .6) 0%, rgba(255, 138, 61, .35) 50%, rgba(48, 24, 6, .9) 100%) !important;
    animation: fxReadyGlow 1.8s ease-in-out infinite;
}

@keyframes fxStartGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(45, 255, 154, .45); }
    50% { box-shadow: 0 0 24px rgba(45, 255, 154, .9), 0 0 2px #fff inset; }
}

@keyframes fxReadyGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 200, 61, .45); }
    50% { box-shadow: 0 0 24px rgba(255, 200, 61, .9), 0 0 2px #fff inset; }
}

body.Futuro #roomButtonStart::before,
body.Futuro #roomButtonReady::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-d);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #fff;
    text-shadow: 0 0 10px currentColor, 0 2px 0 var(--ink);
}

body.Futuro #roomButtonStart::before { content: "INICIAR"; }
body.Futuro #roomButtonReady::before { content: "LISTO"; }

/* Brillo que cruza el botón */
body.Futuro #roomButtonStart::after,
body.Futuro #roomButtonReady::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    left: -60px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    animation: fxShineBtn 2.6s ease-in-out infinite;
}

@keyframes fxShineBtn {
    0%, 55% { left: -60px; }
    100% { left: 170px; }
}

body.Futuro #roomButtonStart:hover, body.Futuro #roomButtonReady:hover { transform: translateY(-2px); filter: brightness(1.2); }
body.Futuro #roomButtonStart:active, body.Futuro #roomButtonReady:active { transform: translateY(1px) scale(.98); }
body.Futuro #roomButtonStart.grayscale { animation: none; filter: grayscale(1) brightness(.75); }
body.Futuro #roomButtonStart.grayscale::after { display: none; }

body.Futuro #roomButtonMobile { left: 282px !important; top: 186px !important; }
body.Futuro #roomButtonChangeTeam { left: 486px !important; top: 192px !important; }

/* Bonos de GP y espectadores */
body.Futuro #gp_rate {
    left: 350px !important;
    top: 240px !important;
    width: 100px;
    text-align: center;
    font-family: var(--font-d);
    font-size: 11px;
    font-weight: 800;
    color: var(--yellow) !important;
}

body.Futuro #gp_team_a,
body.Futuro #gp_team_b {
    top: 254px !important;
    width: 100px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
}

body.Futuro #gp_team_a { left: 290px !important; color: var(--cyan) !important; }
body.Futuro #gp_team_b { left: 410px !important; color: var(--magenta) !important; }
body.Futuro #gp_team_a u, body.Futuro #gp_team_b u { text-decoration: none; font-family: var(--font-d); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }

body.Futuro #RoomWatchers { left: 292px !important; top: 302px !important; right: auto !important; bottom: auto !important; }
body.Futuro #add_bot_button { left: 359px !important; top: 302px !important; }
body.Futuro #RoomS1Disabled { left: 486px !important; top: 300px !important; }
body.Futuro #RoomRandomTeams { left: 300px !important; top: 320px !important; width: 200px; text-align: center; color: var(--yellow); }
body.Futuro #room_timer { left: 476px !important; top: 236px !important; }
body.Futuro #team_search { left: 286px !important; top: 184px !important; width: 228px; text-align: center; }
body.Futuro #no_win_bonus { left: 290px !important; top: 60px !important; width: 210px !important; z-index: 50; border: 1px solid var(--orange); border-radius: 4px; }

/* Chat de la sala */
body.Futuro #roomChat { left: 16px !important; top: 350px !important; width: 504px !important; height: 168px !important; }
body.Futuro #roomChat .viewport { width: 490px !important; height: 168px !important; }
body.Futuro #roomChat .overview { width: 490px !important; }
body.Futuro #roomChatHtml { color: #cfe6ff; }

body.Futuro #roomInput {
    left: 22px !important;
    top: 524px !important;
    width: 470px !important;
    height: 18px;
    color: var(--text) !important;
    font-size: 12px;
}

body.Futuro #roomInput,
body.Futuro #roomInput:focus,
body.Futuro #roomInput.TBGnBorder,
body.Futuro #roomChat.TBGnBorder { background: none !important; border: 0 !important; box-shadow: none !important; outline: none; }

body.Futuro #roomInput::placeholder { color: rgba(143, 179, 230, .6); }

/* ---------- Partida (tema Futuro): barra inferior más oscura con borde neón ---------- */

/* Tiñe solo el fondo del sprite: la capa queda debajo de los botones e ítems (hijos de #gameui) */
body.Futuro #gameui { isolation: isolate; }

body.Futuro #gameui::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, #4a5cb8 0%, #222c6a 100%);
    mix-blend-mode: multiply;
}

body.Futuro #gameScreen::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 515px;
    height: 2px;
    z-index: 5;
    pointer-events: none;
    background: var(--edge);
    box-shadow: 0 0 10px rgba(35, 213, 255, .8), 0 0 22px rgba(139, 92, 255, .5);
    animation: fxEdge 3s ease-in-out infinite;
}

@keyframes fxEdge {
    50% { opacity: .55; }
}

body.Futuro #roomBcm { left: 497px !important; top: 523px !important; }

/* Ítems / amigos / guild */
body.Futuro #room_item_buddy_tab1 { left: 554px !important; top: 347px !important; }
body.Futuro #room_item_buddy_tab2 { left: 630px !important; top: 347px !important; }
body.Futuro #room_item_buddy_tab3 { left: 703px !important; top: 347px !important; }
body.Futuro #itemsSelection.InRoom { left: 558px !important; top: 382px !important; }
body.Futuro #friendsListExtra, body.Futuro #guildRoomTabExtra { left: 544px !important; top: 380px !important; width: 218px !important; background: rgba(4, 6, 26, .85) !important; }
body.Futuro #itemsSelectText { color: var(--text); }

/* Barra inferior: SALIR / TIENDA / OPCIONES / CASH */
body.Futuro #roomButtonBack,
body.Futuro #buttonShopFromRoom,
body.Futuro #buttonOptionsRoom,
body.Futuro #container.Room #facebook_post {
    left: auto;
    right: auto !important;
    top: 562px !important;
    bottom: auto !important;
    width: 116px !important;
    height: 28px !important;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(35, 213, 255, .28), rgba(35, 213, 255, .06)) !important;
    border: 1px solid rgba(35, 213, 255, .75);
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(35, 213, 255, .3);
    transform: none !important;
    filter: none !important;
    transition: box-shadow .15s, background .15s, transform .1s !important;
}

body.Futuro #roomButtonBack { left: 16px !important; border-color: rgba(255, 77, 106, .8); background: linear-gradient(180deg, rgba(255, 77, 106, .32), rgba(255, 77, 106, .06)) !important; }
body.Futuro #buttonShopFromRoom { left: 142px !important; }
body.Futuro #buttonOptionsRoom { left: 268px !important; }
body.Futuro #container.Room #facebook_post { left: 394px !important; border-color: rgba(255, 200, 61, .8); background: linear-gradient(180deg, rgba(255, 200, 61, .32), rgba(255, 200, 61, .06)) !important; }

body.Futuro #roomButtonBack::before,
body.Futuro #buttonShopFromRoom::before,
body.Futuro #buttonOptionsRoom::before,
body.Futuro #container.Room #facebook_post::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-d);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 8px currentColor;
}

body.Futuro #roomButtonBack::before { content: "◄ SALIR"; }
body.Futuro #buttonShopFromRoom::before { content: "TIENDA"; }
body.Futuro #buttonOptionsRoom::before { content: "AJUSTES"; }
body.Futuro #container.Room #facebook_post::before { content: "CASH GRATIS"; font-size: 9px; letter-spacing: 1px; }
body.Futuro #container.Room #facebook_post .event_button_text { display: none; }

body.Futuro #roomButtonBack:hover,
body.Futuro #buttonShopFromRoom:hover,
body.Futuro #buttonOptionsRoom:hover,
body.Futuro #container.Room #facebook_post:hover { transform: translateY(-2px) !important; box-shadow: 0 0 16px rgba(35, 213, 255, .75); }

body.Futuro #roomButtonBack:active,
body.Futuro #buttonShopFromRoom:active,
body.Futuro #buttonOptionsRoom:active,
body.Futuro #container.Room #facebook_post:active { transform: translateY(1px) !important; }

@media (prefers-reduced-motion: reduce) {
    body.Futuro .playerInRoom,
    body.Futuro .playerInRoom .roomPlayerReady,
    body.Futuro .playerInRoom .roomPlayerShadow,
    body.Futuro #roomButtonStart,
    body.Futuro #roomButtonReady,
    body.Futuro #roomButtonStart::after,
    body.Futuro #roomButtonReady::after,
    #LoadingS::before,
    #Loading::after { animation: none !important; }
}