/* ═══════════════════════════════════════════════════════════════════════════
   UC-HOME — Lobby "Command Center" (rediseño 2026-07-19)
   Spec: docs/superpowers/specs/2026-07-19-home-redesign-design.md
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'Lilita One';
    src: url('../fonts/lilita-one-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Onest';
    src: url('../fonts/onest-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --uc-font-display: 'Lilita One', 'Inter', sans-serif;
    --uc-bg0: #0a0b13;
    --uc-bg1: #12131f;
    --uc-bg2: #181a2b;
    --uc-bg3: #1f2236;
    --uc-line: rgba(147, 130, 255, .13);
    --uc-line-strong: rgba(147, 130, 255, .28);
    --uc-ink: #eef0ff;
    --uc-ink-dim: #a3a8cc;
    --uc-ink-faint: #636a96;
    --uc-accent: #7c5cff;
    --uc-accent-2: #a78bfa;
    --uc-accent-soft: rgba(124, 92, 255, .16);
    --uc-green: #2ee6a8;
    --uc-red: #ff4d6d;
    --uc-gold: #ffc94d;
    --uc-radius: 18px;
    --uc-radius-sm: 12px;
    --glow-core: 255, 255, 255;
    --glow-lilac: 205, 175, 255;
    --glow-violet: 150, 90, 255;
    --glow-magenta: 214, 92, 220;
    --glow-pink: 245, 120, 170;
}

@property --hgx {
    syntax: '<length-percentage>';
    inherits: true;
    initial-value: 15%;
}

@property --hgy {
    syntax: '<length-percentage>';
    inherits: true;
    initial-value: 0%;
}

@property --hgh {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

@property --hgv {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

/* ── Atmósfera de fondo (como la sala) ── */
body {
    background:
        radial-gradient(900px 600px at 82% 110%, rgba(124, 92, 255, .12), transparent 60%),
        radial-gradient(700px 500px at 8% -10%, rgba(124, 92, 255, .09), transparent 60%),
        var(--uc-bg0) !important;
}

/* ── Aurora orbital en el borde (como el sidebar de la sala) ── */
.hero-card {
    position: relative;
    border-radius: var(--uc-radius) !important;
    border: 1px solid var(--uc-line-strong);
    --hgx: 15%;
    --hgy: 0%;
    --hgh: 1;
    --hgv: 0;
    animation: uc-home-orbit 150s linear infinite;
    overflow: visible !important;
}

@keyframes uc-home-orbit {
    0%    { --hgx: 15%;  --hgy: 0%;   --hgh: 1; --hgv: 0; }
    35%   { --hgx: 100%; --hgy: 0%;   --hgh: 1; --hgv: 0; }
    37%   { --hgx: 100%; --hgy: 12%;  --hgh: 0; --hgv: 1; }
    48%   { --hgx: 100%; --hgy: 88%;  --hgh: 0; --hgv: 1; }
    50%   { --hgx: 100%; --hgy: 100%; --hgh: .5; --hgv: .5; }
    52%   { --hgx: 88%;  --hgy: 100%; --hgh: 1; --hgv: 0; }
    83%   { --hgx: 12%;  --hgy: 100%; --hgh: 1; --hgv: 0; }
    85%   { --hgx: 0%;   --hgy: 100%; --hgh: .5; --hgv: .5; }
    87%   { --hgx: 0%;   --hgy: 88%;  --hgh: 0; --hgv: 1; }
    96%   { --hgx: 0%;   --hgy: 12%;  --hgh: 0; --hgv: 1; }
    98%   { --hgx: 0%;   --hgy: 0%;   --hgh: 1; --hgv: 0; }
    100%  { --hgx: 15%;  --hgy: 0%;   --hgh: 1; --hgv: 0; }
}

/* Anillo del borde iluminado */
.hero-card::after {
    content: "";
    position: absolute;
    inset: -1.5px;
    z-index: 3;
    border-radius: inherit;
    padding: 1.5px;
    opacity: .75;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    background:
        radial-gradient(90px circle at var(--hgx) var(--hgy),
            rgba(var(--glow-core), 1), transparent 62%),
        radial-gradient(170px circle at var(--hgx) var(--hgy),
            rgba(var(--glow-lilac), 0.85), transparent 66%),
        radial-gradient(190px circle at calc(var(--hgx) - 14%) var(--hgy),
            rgba(var(--glow-pink), 0.8), transparent 68%),
        radial-gradient(190px circle at calc(var(--hgx) + 14%) var(--hgy),
            rgba(var(--glow-magenta), 0.8), transparent 68%),
        radial-gradient(260px circle at var(--hgx) var(--hgy),
            rgba(var(--glow-violet), 0.85), transparent 70%);
}

/* ============================================================
   LOBBY v2 — Command Center
   ============================================================ */

/* ----- Grid principal (columna derecha retirada 19-jul — módulos viven
       en /api/lobby/* por si se retoman) ----- */
.uc-lobby {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.uc-lobby-main, .uc-lobby-side { min-width: 0; }

/* ----- Wordmark ----- */
.uc-lobby-brand { margin: 0 0 18px; }
.uc-lobby-logo { display: block; height: auto; }

/* ----- Hero ilustrado (mockup 2026-07-19) ----- */
.uc-hero {
    position: relative;
    margin-bottom: 15px;
    border-radius: var(--uc-radius);
    background: var(--uc-bg1) !important;
    display: flex;
    align-items: center;
}

.uc-hero-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
    /* sin imagen estática de fondo: con cover + bg se veían dos capas
       desalineadas al hacer resize; el poster del <video> cubre la carga */
}
.uc-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
}
.uc-hero-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        #0f1025 0%,
        rgb(5 5 29) 34%,
        rgb(6 7 28) 52%,
        transparent 66%);
}

.uc-hero-copy {
    position: relative;
    z-index: 1;
    padding: 20px 36px;
    max-width: 64%;
}


.uc-hero-title {
    position: relative;
    margin: 0 0 16px;
    font-family: var(--uc-font-display);
    font-weight: 400;
    font-size: clamp(34px, 3.6vw, 54px);
    line-height: 1.04;
    color: #fff;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .55);
}
.uc-title-l1 {
    display: inline-block;
    transform: rotate(-2deg);
}
.uc-title-l2 {
    display: inline-block;
    transform: rotate(-2.5deg);
    margin-top: 4px;
}
.uc-title-l2 em {
    position: relative;
    display: inline-block;
    font-style: normal;
    font-size: 1.1em;
    background: linear-gradient(100deg, #c4b0ff 0%, #8e6bff 45%, #6aa8ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(124, 92, 255, .45));
}

/* ----- Sparks del título ----- */
.uc-spark { position: absolute; pointer-events: none; }
.uc-spark svg { display: block; width: 100%; height: 100%; }
.uc-spark-p1 {
    left: -30px; top: 54%;
    width: 15px; height: 6px;
    border-radius: 4px;
    background: #4675ef;
    --spark-rot: 5deg;
    transform: rotate(-32deg);
    animation: uc-spark-bob 5s ease-in-out infinite alternate;
}
.uc-spark-p2 {
    left: -54px; top: 86%;
    width: 25px; height: 6px;
    border-radius: 4px;
    background: #a855f7;
    transform: rotate(-4deg);
}

/* chispitas espejo del lado derecho */
.uc-spark-p1r {
    right: 150px; top: 24%;
    width: 22px; height: 7px;
    border-radius: 4px;
    background: #d946ef;
    --spark-rot: -22deg;
    transform: rotate(28deg);
    animation: uc-spark-bob 5.2s ease-in-out infinite alternate;
}
.uc-spark-p2r {
    right: 116px; top: 64%;
    width: 25px; height: 6px;
    border-radius: 4px;
    background: #a855f7;
    transform: rotate(4deg);
}
.uc-spark-cometr {
    right: 124px; bottom: -8px;
    width: 28px; height: 7px;
    border-radius: 4px;
    background: linear-gradient(270deg, #ec4899, transparent);
    --spark-rot: 22deg;
    transform: rotate(22deg);
    animation: uc-spark-bob 4.8s ease-in-out infinite alternate-reverse;
}
.uc-spark-comet {
    left: -18px; bottom: -4px;
    width: 28px; height: 7px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ec4899, transparent);
    --spark-rot: -24deg;
    transform: rotate(-24deg);
    animation: uc-spark-bob 4.5s ease-in-out infinite alternate-reverse;
}
.uc-spark-star {
    right: -11%; bottom: -12px;
    width: 24px; height: 24px;
    filter: drop-shadow(0 0 8px rgba(167, 139, 250, .8));
    animation: uc-spark-twinkle 3.2s ease-in-out infinite;
}
@keyframes uc-spark-bob {
    from { transform: translateY(0) rotate(var(--spark-rot, 0deg)); }
    to { transform: translateY(-6px) rotate(var(--spark-rot, 0deg)); }
}
@keyframes uc-spark-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(.8) rotate(18deg); }
}

.uc-hero-sub {
    margin: 0 0 16px;
    max-width: 46ch;
    color: var(--uc-ink-dim);
    font-size: .98rem;
    line-height: 1.5;
}

.uc-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.uc-hero-pills li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border-radius: 999px;
    background: rgba(10, 11, 19, .72);
    border: 1px solid var(--uc-line-strong);
    color: var(--uc-ink);
    font-size: .84rem;
    font-weight: 600;
}
.uc-pill-ico {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--uc-accent-soft);
    font-size: .8rem;
}
img.uc-pill-ico {
    object-fit: cover;
    border: 1px solid var(--uc-line-strong);
    background: none;
}

/* CTAs del hero */
.uc-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}
.uc-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 17px;
    border-radius: 16px !important;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform .15s ease, filter .15s ease;
}
.uc-cta:hover { transform: translateY(-2px); filter: brightness(1.07); }
.uc-cta:active { transform: scale(.98); }
.uc-cta-ico-bare {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    color: #fff;
    filter: drop-shadow(0 2px 6px rgba(20, 5, 60, .5));
}
.uc-cta-ico-bare svg { width: 24px; height: 24px; }
.uc-cta-ico-chip {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    color: #e6e2ff;
}
.uc-cta-ico-chip svg { width: 19px; height: 19px; }
.uc-cta-lines { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.uc-cta-lines b { font-weight: 800; font-size: 1.02rem; }
.uc-cta-lines small { font-weight: 500; font-size: .74rem; opacity: .8; }

.uc-cta-primary {
    color: #fff !important;
    border: 1px solid rgba(200, 170, 255, .55) !important;
    background:
        radial-gradient(250px 20px at 50% 0%, rgb(255 255 255 / 23%), transparent 70%),
        radial-gradient(120% 150% at 50% -20%, #8465f2 0%, #6a48e0 45%, #4c30ba 100%) !important;
    box-shadow:
        inset 0 -8px 18px rgba(30, 10, 90, .4),
        0 10px 26px -10px rgba(80, 50, 200, .7) !important;
}
.uc-cta-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 48%, transparent 60%);
    transform: translateX(-130%);
    animation: uc-home-sheen 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes uc-home-sheen { 14%, 100% { transform: translateX(130%); } }

.uc-cta-secondary {
    color: var(--uc-ink) !important;
    border: 1px solid var(--uc-line-strong) !important;
    background:
        radial-gradient(250px 20px at 50% 0%, rgb(255 255 255 / 10%), transparent 70%),
        rgba(10, 11, 19, .78) !important;
    box-shadow: inset 0 -8px 18px rgba(0, 0, 0, .3), 0 8px 22px -12px rgba(0, 0, 0, .6) !important;
}
/* ----- Selector de tiempo custom con iconos por categoría ----- */
.uc-timeselect { position: relative; }
.uc-timeselect-native {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; pointer-events: none; overflow: hidden;
}
.uc-timeselect-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 8px;
    border-radius: 999px;
    border: 1px solid var(--uc-line-strong);
    background: var(--uc-bg2);
    color: var(--uc-ink);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.uc-timeselect-trigger:hover { border-color: var(--uc-accent-2); }
.uc-timeselect.open .uc-timeselect-trigger { border-color: var(--uc-accent-2); background: var(--uc-bg3); }
.uc-timeselect-ico {
    width: 35px; height: 35px;
    border-radius: 19px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(124, 92, 255, .4));
}
.uc-timeselect-caret { width: 12px; height: 8px; color: var(--uc-ink-dim); transition: transform .18s ease; }
.uc-timeselect.open .uc-timeselect-caret { transform: rotate(180deg); }

.uc-timeselect-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    min-width: 210px;
    margin: 0; padding: 6px;
    list-style: none;
    border-radius: 16px;
    background: var(--uc-bg2);
    border: 1px solid var(--uc-line-strong);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}
.uc-timeselect.open .uc-timeselect-menu { opacity: 1; transform: none; pointer-events: auto; }
.uc-timeselect-menu li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: 11px;
    cursor: pointer;
    transition: background .12s ease;
}
.uc-timeselect-menu li:hover { background: rgba(124, 92, 255, .12); }
.uc-timeselect-menu li[aria-selected="true"] { background: var(--uc-accent-soft); }
.uc-timeselect-menu li img {
    width: 34px; height: 34px;
    border-radius: 10px;
    object-fit: contain;
    flex: 0 0 34px;
    filter: drop-shadow(0 3px 8px rgba(124, 92, 255, .4));
}
.uc-timeselect-menu li span { display: flex; flex-direction: column; line-height: 1.15; }
.uc-timeselect-menu li b { font-weight: 800; font-size: .95rem; color: var(--uc-ink); }
.uc-timeselect-menu li small { font-size: .74rem; color: var(--uc-ink-faint); }

/* ----- Badge de ELO (rediseñado) ----- */
.uc-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 7px;
    border-radius: 999px;
    background:
        radial-gradient(120% 160% at 50% -40%, rgba(124, 92, 255, .28), transparent 70%),
        var(--uc-bg2);
    border: 1px solid var(--uc-line-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 20px -12px rgba(124, 92, 255, .6);
}
.uc-rating-ico {
    width: 35px; height: 35px;
    border-radius: 19px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(124, 92, 255, .45));
}
.uc-rating-main { display: flex; flex-direction: column; line-height: 1.05; }
.uc-rating-main b {
    font-weight: 900;
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(100deg, #c4b0ff, #8e6bff 60%, #6aa8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity .2s ease;
}
.uc-rating-main small {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--uc-ink-faint);
}

.uc-play-hint { margin: 12px 0 0; font-size: .9rem; color: var(--uc-ink-dim); }
.uc-play-hint a { color: var(--uc-accent-2); font-weight: 600; }

.uc-online-now {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin: 16px 0 0;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: rgba(46, 230, 168, .1);
    border: 1px solid rgba(46, 230, 168, .28);
    font-size: .85rem;
    font-weight: 600;
    color: var(--uc-green);
}
.uc-online-now[hidden] { display: none; }
.uc-online-now b { font-weight: 800; font-variant-numeric: tabular-nums; }
.uc-online-now span:last-child { color: var(--uc-ink-dim); }
.uc-online-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--uc-green);
    box-shadow: 0 0 10px var(--uc-green);
    animation: uc-online-pulse 2.4s ease-in-out infinite;
}
@keyframes uc-online-pulse { 50% { opacity: .45; } }

/* ----- Tarjetas Crear / Unirse (layout mockup 2 columnas) ----- */
.uc-rooms {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 14px;
    align-items: start;
}
.uc-room-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 10px;
    border-radius: var(--uc-radius);
    background: var(--uc-bg2);
    border: 1px solid var(--uc-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 34px -20px rgba(0, 0, 0, .7);
}
.uc-room-head { display: flex; align-items: center; gap: 12px; }
.uc-room-ico {
    width: 56px; height: 56px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--uc-line-strong);
}
.uc-room-head h3 { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--uc-ink); }
.uc-room-head p { margin: 0; font-size: .82rem; color: var(--uc-ink-faint); }

/* Tabs segmentados */
.uc-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--uc-bg1);
    border: 1px solid var(--uc-line);
    border-radius: 14px;
    overflow: hidden;
}
.uc-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 5px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--uc-ink-dim);
    text-align: left;
    transition: background .15s ease;
}
.uc-tab + .uc-tab { border-left: 1px solid var(--uc-line); }
.uc-tab img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: 0 0 36px; }
.uc-tab span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.uc-tab b { font-size: .88rem; color: var(--uc-ink); white-space: nowrap; }
.uc-tab small { font-size: .68rem; color: var(--uc-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-tab.active { background: linear-gradient(140deg, #8465f2, #5b3bd6); }
.uc-tab.active b { color: #fff; }
.uc-tab.active small { color: rgba(255, 255, 255, .75); }
.uc-tab:hover:not(.active) { background: rgba(124, 92, 255, .08); }

.uc-tab-panel { display: flex; flex-direction: column; gap: 12px; }
.uc-tab-panel[hidden] { display: none; }
.uc-online-note { margin: 0; color: var(--uc-ink-dim); font-size: .88rem; line-height: 1.5; }

/* Aviso "Requiere Cuenta" */
.uc-warn {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 201, 77, .07);
    border: 1px solid rgba(255, 201, 77, .35);
}
.uc-warn-ico {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: rgba(255, 201, 77, .15);
    color: var(--uc-gold);
}
.uc-warn-ico svg { width: 18px; height: 18px; }
.uc-warn b { color: var(--uc-gold); font-size: .92rem; }
.uc-warn p { margin: 2px 0 0; color: #d9b96a; font-size: .8rem; line-height: 1.4; }

/* Panel "Inicia sesión para continuar" */
.uc-signin-panel {
    display: block;
    padding: 14px;
    border-radius: 12px;
    background: var(--uc-accent-soft);
    border: 1px solid var(--uc-line-strong);
    text-decoration: none;
    text-align: center;
    transition: border-color .15s ease, transform .15s ease;
}
.uc-signin-panel:hover { border-color: var(--uc-accent-2); transform: translateY(-1px); }
.uc-signin-title { display: inline-flex; align-items: center; gap: 8px; }
.uc-signin-title img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.uc-signin-title b { color: var(--uc-ink); font-size: .95rem; }
.uc-signin-panel p { margin: 4px 0 0; color: var(--uc-ink-faint); font-size: .8rem; }

/* Campos con label e icono */
.uc-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.uc-field-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--uc-ink-dim);
}
.uc-field-label svg { width: 15px; height: 15px; color: var(--uc-ink-faint); }
.uc-field-label i { color: var(--uc-red); font-style: normal; }

/* Botón grande de Unirse */
.uc-join-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 14px;
    border: 1px solid rgba(200, 170, 255, .55);
    cursor: pointer;
    color: #fff;
    background:
        radial-gradient(250px 20px at 50% 0%, rgb(255 255 255 / 23%), transparent 70%),
        linear-gradient(90deg, #7c53f0, #8e6bff);
    box-shadow: inset 0 -8px 18px rgba(30, 10, 90, .35), 0 10px 24px -10px rgba(80, 50, 200, .65);
    transition: transform .15s ease, filter .15s ease;
}
.uc-join-btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.uc-join-btn:active { transform: scale(.985); }
.uc-join-lines { display: flex; flex-direction: column; line-height: 1.15; }
.uc-join-lines b { font-weight: 800; font-size: 1rem; }
.uc-join-lines small { font-size: .74rem; opacity: .85; font-weight: 500; }
.uc-join-btn svg { width: 20px; height: 20px; }
.uc-join-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    font-size: .76rem;
    color: var(--uc-ink-faint);
}
.uc-join-hint svg { width: 14px; height: 14px; flex: 0 0 14px; }
.uc-mode-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px;
    border-radius: var(--uc-radius);
    background: var(--uc-bg2);
    border: 1px solid var(--uc-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 34px -20px rgba(0, 0, 0, .7);
    transition: transform .15s ease, border-color .15s ease;
}
.uc-mode-card:hover { transform: translateY(-2px); border-color: var(--uc-line-strong); }
.uc-mode-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--uc-ink);
}
.uc-mode-ico {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--uc-accent-soft);
    border: 1px solid var(--uc-line);
    font-size: .95rem;
}
img.uc-mode-ico {
    width: 36px; height: 36px;
    object-fit: cover;
    background: none;
    border-color: var(--uc-line-strong);
}
.uc-mode-desc { margin: 0 0 2px; font-size: .82rem; color: var(--uc-ink-faint); min-height: 2.2em; }

.uc-input,
.form-control.uc-input,
.form-select.uc-input {
    background-color: var(--uc-bg1) !important;
    border: 1px solid var(--uc-line) !important;
    border-radius: var(--uc-radius-sm) !important;
    color: var(--uc-ink) !important;
    font-size: .92rem;
}
.uc-code-input {
    text-transform: uppercase;
    letter-spacing: .35em;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Botones de modo — glint estilo Rematch conservando el lenguaje */
.uc-mode-btn {
    margin-top: auto;
    font-weight: 700 !important;
    color: #fff !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    background:
        radial-gradient(250px 20px at 50% 0%, rgb(255 255 255 / 23%), transparent 70%),
        linear-gradient(140deg, #8465f2, #5b3bd6) !important;
    box-shadow:
        inset 0 -8px 18px rgba(0, 0, 0, .25),
        0 8px 22px -10px rgba(0, 0, 0, .55) !important;
    transition: transform .15s, filter .15s;
}
.uc-mode-btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.uc-mode-btn:active { transform: scale(.98); }

/* ----- Columna derecha ----- */
.uc-side-card {
    padding: 16px;
    margin-bottom: 14px;
    border-radius: var(--uc-radius);
    background: var(--uc-bg2);
    border: 1px solid var(--uc-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.uc-side-title {
    margin: 0 0 10px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--uc-ink-faint);
}
.uc-side-empty { list-style: none; color: var(--uc-ink-faint); font-size: .85rem; }

.uc-profile-top { display: flex; align-items: center; gap: 12px; }
.uc-profile-avatar {
    width: 48px; height: 48px;
    border-radius: 12px;
    object-fit: cover;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #8b5cf6, #5b3bd6);
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 14px -6px rgba(124, 92, 255, .8);
}
.uc-profile-name { display: block; color: var(--uc-ink); font-size: 1rem; }
.uc-profile-sub { display: block; color: var(--uc-ink-faint); font-size: .8rem; }
.uc-profile-elo {
    margin-top: 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.uc-profile-elo span { font-size: 40px; font-weight: 900; color: var(--uc-ink); line-height: 1; }
.uc-profile-elo small { display: block; margin-top: 2px; color: var(--uc-ink-faint); letter-spacing: .08em; }

.uc-recent-list, .uc-top5-list { margin: 0; padding: 0; list-style: none; }
.uc-recent-list li + li, .uc-top5-list li + li { margin-top: 6px; }
.uc-recent-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--uc-radius-sm);
    background: var(--uc-bg1);
    border: 1px solid var(--uc-line);
    color: var(--uc-ink-dim);
    font-size: .85rem;
    text-decoration: none;
}
.uc-recent-list a:hover { border-color: var(--uc-line-strong); color: var(--uc-ink); }
.uc-recent-result { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.uc-recent-success .uc-recent-result { background: var(--uc-green); box-shadow: 0 0 8px var(--uc-green); }
.uc-recent-danger .uc-recent-result { background: var(--uc-red); }
.uc-recent-warning .uc-recent-result { background: var(--uc-gold); }
.uc-recent-opp { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.uc-recent-term { font-size: .75rem; color: var(--uc-ink-faint); }

.uc-top5-list { counter-reset: top5; }
.uc-top5-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--uc-radius-sm);
    color: var(--uc-ink-dim);
    font-size: .88rem;
    counter-increment: top5;
}
.uc-top5-list li::before {
    content: counter(top5);
    width: 20px;
    font-weight: 800;
    color: var(--uc-ink-faint);
    font-variant-numeric: tabular-nums;
}
.uc-top5-list li:first-child { background: rgba(255, 201, 77, .08); border: 1px solid rgba(255, 201, 77, .25); }
.uc-top5-list li:first-child::before { color: var(--uc-gold); }
.uc-top5-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--uc-ink); }
.uc-top5-elo { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--uc-ink); }

/* ----- Zona de features (tiles con iconos Gemini) ----- */
.uc-feature-zone { margin-top: 15px; }
.uc-feature-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.uc-feature-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--uc-radius);
    background: var(--uc-bg1);
    border: 1px solid var(--uc-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: transform .15s ease, border-color .15s ease;
}
.uc-feature-tile:hover { transform: translateY(-2px); border-color: var(--uc-line-strong); }
.uc-feature-tile img {
    width: 58px; height: 58px;
    flex: 0 0 58px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(124, 92, 255, .35));
}
.uc-feature-tile h3 { margin: 0 0 2px; font-size: .92rem; font-weight: 800; color: var(--uc-ink); }
.uc-feature-tile p { margin: 0; font-size: .78rem; color: var(--uc-ink-faint); line-height: 1.35; }

/* ----- Cómo funciona (4 pasos) ----- */
.uc-steps-zone { margin-top: 22px; }
.uc-zone-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--uc-ink);
}
.uc-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.uc-step {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-radius: var(--uc-radius);
    background: var(--uc-bg2);
    border: 1px solid var(--uc-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
    transition: transform .15s ease, border-color .15s ease;
}
.uc-step:hover { transform: translateY(-2px); border-color: var(--uc-line-strong); }
.uc-step-num {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-family: var(--uc-font-display);
    font-weight: 400;
    font-size: 1.3rem;
    color: #fff;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .35), 0 8px 16px -8px rgba(0, 0, 0, .8);
}
.uc-step-1 { background: linear-gradient(140deg, #8b5cf6, #5b3bd6); }
.uc-step-2 { background: linear-gradient(140deg, #4ff0b8, #1eb583); color: #08331f; }
.uc-step-3 { background: linear-gradient(140deg, #ffd66e, #d9a616); color: #3d2c00; }
.uc-step-4 { background: linear-gradient(140deg, #ff6b87, #e0344f); }
.uc-step h3 { margin: 0 0 4px; font-size: .95rem; font-weight: 800; color: var(--uc-ink); }
.uc-step p { margin: 0; font-size: .78rem; color: var(--uc-ink-faint); line-height: 1.4; }

/* ----- Banner CTA final ----- */
.uc-cta-banner {
    margin-top: 22px;
    margin-bottom: 64px;
    padding: 44px 24px 40px;
    text-align: center;
    background: radial-gradient(120% 180% at 50% -30%, #8b6bf5 0%, #6a48e0 45%, #4c30ba 100%) !important;
}
.uc-cta-crown {
    width: 92px; height: 92px;
    border-radius: 24px;
    object-fit: cover;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 14px 30px -12px rgba(20, 5, 60, .8), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.uc-cta-banner h2 {
    margin: 0 0 6px;
    font-family: var(--uc-font-display);
    font-weight: 400;
    font-size: clamp(24px, 2.6vw, 34px);
    color: #fff;
    text-shadow: 0 3px 16px rgba(30, 10, 90, .6);
}
.uc-cta-banner p { margin: 0 0 18px; color: rgba(255, 255, 255, .85); font-size: .98rem; }
.uc-cta-banner .uc-cta { margin: 0 auto; display: inline-flex; }

.modal-dialog { margin: 0 auto; }


/* ----- Responsive ----- */
@media (max-width: 991px) {
    /* Scroll vertical en mobile (portado del <style> inline viejo — crítico) */
    html {
        height: 100%;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    body {
        min-height: 100vh !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    .modal-dialog { max-width: 340px; }

    .uc-lobby { grid-template-columns: 1fr; }
    .uc-rooms { grid-template-columns: 1fr; }
    .uc-feature-tiles { grid-template-columns: 1fr 1fr; }
    .uc-steps { grid-template-columns: 1fr 1fr; }

    /* Hero en móvil: el arte pasa a fondo completo atenuado */
    .uc-hero { min-height: 0; }
    .uc-hero-copy { max-width: 100%; padding: 26px 22px; }
    .uc-hero-art { background-position: right -80px center; }
    .uc-hero-art::after {
        background: linear-gradient(90deg,
            rgba(18, 19, 31, .96) 0%,
            rgba(18, 19, 31, .88) 55%,
            rgba(18, 19, 31, .55) 100%);
    }
    /* Video del hero en móvil: cubrir y reencuadrar hacia la derecha */
    .uc-hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: -280px center;
    }
    /* La tarjeta de perfil sube arriba del JUGAR en móvil
       (ambas columnas se disuelven en la grilla de 1 columna) */
    .uc-lobby-side, .uc-lobby-main { display: contents; }
    .uc-lobby-brand { order: -2; }
    .uc-profile-card { order: -1; }
    .uc-lobby > *, .uc-lobby-main > *, .uc-lobby-side > * { min-width: 0; }
}

@media (max-width: 576px) {
    .uc-feature-tiles { grid-template-columns: 1fr; }
    .uc-steps { grid-template-columns: 1fr; }
    .uc-hero-title { font-size: clamp(30px, 9vw, 38px); }
}

/* ----- SweetAlert2 con el lenguaje del lobby ----- */
body .swal2-container { background: rgba(6, 6, 14, .72); backdrop-filter: blur(4px); }
body .swal2-popup {
    background: var(--uc-bg2);
    border: 1px solid var(--uc-line-strong);
    border-radius: var(--uc-radius);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05);
    color: var(--uc-ink);
    padding-bottom: 26px;
}
body .swal2-title { color: var(--uc-ink); font-weight: 800; font-size: 1.3rem; }
body .swal2-html-container { color: var(--uc-ink-dim); font-size: .95rem; }
body .swal2-popup .swal2-confirm {
    background:
        radial-gradient(250px 20px at 50% 0%, rgb(255 255 255 / 23%), transparent 70%),
        linear-gradient(140deg, #8465f2, #5b3bd6) !important;
    border: 1px solid rgba(200, 170, 255, .55) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 -8px 18px rgba(30, 10, 90, .35), 0 8px 22px -10px rgba(0, 0, 0, .55) !important;
    font-weight: 700;
    padding: 10px 28px;
}
body .swal2-popup .swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(124, 92, 255, .4) !important; }
body .swal2-popup .swal2-cancel {
    background: rgba(10, 11, 19, .8) !important;
    border: 1px solid var(--uc-line-strong) !important;
    border-radius: 14px !important;
    color: var(--uc-ink) !important;
    font-weight: 600;
}
body .swal2-icon.swal2-error {
    border-color: rgba(255, 77, 109, .45);
    background: rgba(255, 77, 109, .07);
}
body .swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--uc-red); }
body .swal2-icon.swal2-success { border-color: rgba(46, 230, 168, .45) !important; }
body .swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--uc-green); }
body .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(46, 230, 168, .35); }
body .swal2-icon.swal2-warning {
    border-color: rgba(255, 201, 77, .5);
    color: var(--uc-gold);
}
body .swal2-icon.swal2-question {
    border-color: var(--uc-line-strong);
    color: var(--uc-accent-2);
}

@media (min-width: 992px) {
    .content { padding: 20px 0 0 0 !important; }
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    .uc-cta-primary::after { animation: none; }
    .uc-online-dot { animation: none; }
    .hero-card, .uc-hero { animation: none !important; }
    .matchmaking-searching-icon { animation: none; }
}