@import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap");
/* ---------------------------------------------------------------------------
   Tematica de las paginas sociales: Chat, Mis amigos / vecinos, Jugadores.
   ---------------------------------------------------------------------------
   Un solo lenguaje visual para todos los destinos de la barra de pestanas,
   calcado del juego: acero azul marino, filo y texto dorados, botones con el
   oro 3D del boton principal. Se carga DESPUES de facebook.css y mobile.css,
   de modo que pisa sus estilos de caja, cabecera y boton. Los colores se
   repiten a proposito: estas paginas no cargan buttons.css, que es donde
   viven las variables.

   Nota: varios botones del marcado llevan `style="border:0"`, asi que las
   reglas de borde llevan !important para poder competir con ellos.
*/

/* === Fondo de pagina ===================================================== */
/* facebook.css pinta el canvas de claro; aqui pasa a estar a media noche. */
body.canvas,
body.liquid,
body.ego_wide {
    background: #12163c !important;
    background-image:
        radial-gradient(1100px 520px at 50% -8%, rgba(90, 110, 230, .38), transparent 62%),
        radial-gradient(760px 420px at 88% 108%, rgba(247, 201, 72, .12), transparent 60%),
        linear-gradient(180deg, #171d54 0%, #12163c 46%, #0d1030 100%) !important;
    background-attachment: fixed !important;
}

/* === Caja contenedora ==================================================== */
/* Las paginas de amigos y jugadores van algo mas anchas que el minimo de
   555px: con dos botones por fila la lista se queda justa. */
.socialBox {
    width: 660px;
    max-width: calc(100vw - 20px);
}

.uiInterstitial.uiBoxWhite {
    background: linear-gradient(180deg, #262d78 0%, #1d2364 100%);
    border: 1px solid rgba(247, 201, 72, .42);
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .45),
                0 10px 0 rgba(8, 10, 34, .45),
                0 26px 60px rgba(0, 0, 0, .55),
                inset 0 1px 0 rgba(255, 255, 255, .14);
    overflow: hidden;
}

/* === Cabecera ============================================================ */
.uiHeader.interstitialHeader {
    background: linear-gradient(180deg, #4653c4 0%, #2c3386 52%, #232870 100%);
    border-bottom: 2px solid #f7c948 !important;
    border-radius: 13px 13px 0 0;
    margin: 0 !important;
    padding: 11px 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26),
                inset 0 -10px 22px rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* El icono de la cabecera: mas pequeno y con aro dorado, no flotando suelto. */
.uiHeader.interstitialHeader img {
    height: 30px !important;
    width: auto;
    border-radius: 7px;
    padding: 3px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .18));
    border: 1px solid rgba(247, 201, 72, .55);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
    vertical-align: middle !important;
}

.uiHeader.interstitialHeader h2,
.uiHeader.interstitialHeader h2 a {
    color: #ffe07a !important;
    font: bold 18px "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    letter-spacing: .4px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .55);
    margin: 0;
}

.uiHeader.interstitialHeader p {
    /* Sobre el azul de la cabecera el tono claro no llegaba a 4.5:1. */
    color: #e6ebff;
    font-size: 12px;
    margin: 2px 0 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.uiHeader.interstitialHeader p b {
    color: #fff;
}

/* Punto de conexion junto al nombre. */
.pOnline {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #35c04a;
    box-shadow: 0 0 6px rgba(53, 192, 74, .9);
    margin-right: 4px;
    vertical-align: 1px;
}

/* === Cuerpo =============================================================== */
.uiInterstitialContent {
    color: #dbe1ff;
    font-size: 13px;
}

/* Etiquetas de seccion: versalitas doradas. */
.pSection {
    color: #f7c948;
    font: bold 11px "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin: 18px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(247, 201, 72, .28);
}
.pSection:first-child { margin-top: 0; }

/* Fila de jugador / amigo: una ficha, no una linea con filo. */
.pRow {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    margin-bottom: 7px;
    border: 1px solid rgba(150, 170, 235, .28);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(82, 100, 205, .3), rgba(35, 42, 110, .45));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    transition: border-color .12s, transform .1s, box-shadow .12s;
}
.pRow:hover {
    border-color: rgba(247, 201, 72, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
                0 3px 10px rgba(0, 0, 0, .3);
}

.pAvatar {
    width: 44px;
    height: 44px;
    border-radius: 9px;
    flex: 0 0 auto;
    background: #171d50;
    border: 1px solid rgba(247, 201, 72, .5);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
    object-fit: cover;
}

.pInfo { flex: 1; min-width: 0; }

.pName {
    color: #fff;
    font: bold 14px "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.pMeta {
    /* Sobre la ficha azul el tono tenue se queda corto: va algo mas claro
       para que los 12px sigan leyendose en el movil. */
    color: #b9c3f5;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pDot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5a63a0;
    flex: 0 0 auto;
}
.pDot.on {
    background: #35c04a;
    box-shadow: 0 0 6px rgba(53, 192, 74, .85);
}

.pBadge {
    background: linear-gradient(180deg, #ff7d6b 0%, #d64541 100%);
    color: #fff;
    border-radius: 10px;
    font: bold 11px "Trebuchet MS", Arial, sans-serif;
    padding: 1px 8px;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.pActions {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    align-items: center;
}
/* Los formularios son hijos de .pActions: necesitan su propio hueco. */
.pActions form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0;
}
/* Una fila con dos acciones no debe empujar el nombre fuera de la tarjeta. */
.pRow .pInfo { flex: 1 1 140px; }

/* Variante serena de la insignia, para lo que no es una alerta. */
.pBadge.mute {
    background: linear-gradient(180deg, #5264cd 0%, #2c3482 100%);
    border: 1px solid rgba(150, 170, 235, .55);
    color: #dbe1ff;
}

/* Caja destacada (imperio propio, invitacion). */
.pCard {
    border: 1px solid rgba(150, 170, 235, .4);
    border-top: 2px solid #f7c948;
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(82, 100, 205, .26), rgba(29, 35, 100, .5));
    padding: 13px 15px;
    margin: 0 0 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
                0 4px 14px rgba(0, 0, 0, .28);
}

/* Campo de invitacion: el del marcado ya no lleva estilo en linea. */
#inviteUrl {
    flex: 1;
    min-width: 200px;
    font-size: 13px;
    font-family: Consolas, "Courier New", monospace;
    color: #1b2050;
    padding: 9px 11px;
    background: #fff;
    border: 1px solid rgba(150, 170, 235, .7);
    border-radius: 8px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .14);
    box-sizing: border-box;
}
#inviteUrl:focus {
    outline: none;
    border-color: #f7c948;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .14),
                0 0 0 3px rgba(247, 201, 72, .32);
}
#inviteCopyDone:empty { display: none; }

/* Texto auxiliar tenue. */
.pHint {
    color: #aeb8ee;
    font-size: 12px;
    line-height: 1.55;
    margin: 8px 0 0;
}

/* Estado vacio: caja con icono en vez de un parrafo suelto. */
.pEmpty {
    border: 1px dashed rgba(150, 170, 235, .45);
    border-radius: 11px;
    background: rgba(20, 25, 75, .45);
    color: #a7b1e6;
    text-align: center;
    padding: 22px 16px;
    font-size: 13px;
    line-height: 1.6;
    margin: 6px 0 0;
}

/* === Buscador ============================================================= */
.pSearch {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}
.pSearch input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 15px;
    color: #1b2050;
    background: #fff;
    border: 1px solid rgba(150, 170, 235, .7);
    border-radius: 10px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .14);
    box-sizing: border-box;
}
.pSearch input:focus {
    outline: none;
    border-color: #f7c948;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .14),
                0 0 0 3px rgba(247, 201, 72, .32);
}

/* === Enlaces ============================================================= */
.uiInterstitialContent a {
    color: #ffdf7d;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 223, 125, .35);
}
.uiInterstitialContent a:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .7);
}
/* Los botones son anclas: no llevan subrayado ni filo inferior. */
.uiInterstitialContent a.uiButton,
.uiInterstitialContent a.uiButtonConfirm,
.uiInterstitialContent a.uiButton:hover,
.uiInterstitialContent a.uiButtonConfirm:hover {
    border-bottom: 1px solid rgba(150, 170, 235, .6);
    color: #e6ebff;
}
.uiInterstitialContent a.uiButtonConfirm,
.uiInterstitialContent a.uiButtonConfirm:hover {
    border-bottom: 3px solid #8a5c08;
    color: #3b2600;
}

/* === Barra de pie ======================================================== */
.uiInterstitialBar.uiBoxGray {
    background: linear-gradient(180deg, #343d9a 0%, #232870 100%);
    border-top: 2px solid #f7c948 !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* === Botones ============================================================= */
.uiButton,
.uiButtonConfirm {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    box-sizing: border-box;
    margin: 0;
}
/* Un <button> trae borde y relleno de la hoja de agente; se limpian aqui. */
button.uiButton,
button.uiButtonConfirm {
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.2;
}
.uiButton:focus-visible,
.uiButtonConfirm:focus-visible {
    outline: 2px solid #ffe68a;
    outline-offset: 2px;
}

.uiButton {
    background: linear-gradient(180deg, #5264cd 0%, #2c3482 100%);
    border: 1px solid rgba(150, 170, 235, .6) !important;
    border-bottom: 3px solid #171c52 !important;
    border-radius: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25),
                0 2px 6px rgba(0, 0, 0, .3);
    padding: 5px 13px;
    transition: filter .12s, transform .08s, box-shadow .08s;
}
.uiButton:hover { filter: brightness(1.16); }
.uiButton:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25),
                0 1px 3px rgba(0, 0, 0, .3);
}
.uiButton .uiButtonText,
.uiButton input {
    /* Blanco puro: la parte clara del degradado acero es el peor fondo. */
    color: #ffffff !important;
    font: bold 12px "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    letter-spacing: .3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
    padding: 0;
}

.uiButtonConfirm {
    background: linear-gradient(180deg, #ffe68a 0%, #f7c948 45%, #dfa01a 100%);
    border: 1px solid #a8710c !important;
    border-bottom: 3px solid #8a5c08 !important;
    border-radius: 13px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65),
                0 2px 6px rgba(0, 0, 0, .3);
}
.uiButtonConfirm:hover { filter: brightness(1.05); }
.uiButtonConfirm:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65),
                0 1px 3px rgba(0, 0, 0, .3);
}
.uiButtonConfirm .uiButtonText,
.uiButtonConfirm input {
    color: #3b2600 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

/* =========================================================================
   CHAT
   ========================================================================= */
.chatBox { width: 780px; max-width: calc(100vw - 20px); }

.chatWrap { display: flex; gap: 14px; align-items: stretch; }

/* --- Panel lateral de salas --------------------------------------------- */
.chatSide {
    flex: 0 0 208px;
    background: linear-gradient(180deg, rgba(20, 25, 78, .8), rgba(15, 19, 60, .8));
    border: 1px solid rgba(150, 170, 235, .3);
    border-radius: 11px;
    padding: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.chatFriend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none;
    color: #dbe1ff;
    font-size: 13px;
    margin-bottom: 4px;
    transition: background .12s, border-color .12s;
}
.chatFriend:hover {
    background: rgba(82, 100, 205, .3);
    border-color: rgba(150, 170, 235, .4);
}
.chatFriend.active {
    background: linear-gradient(180deg, #ffe68a 0%, #f7c948 55%, #e0a11b 100%);
    border-color: #a8710c;
    color: #3b2600;
    font-weight: bold;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6),
                0 2px 6px rgba(0, 0, 0, .3);
}
.chatFriend img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #171d50;
    border: 1px solid rgba(247, 201, 72, .45);
    flex: 0 0 auto;
    object-fit: cover;
}
.chatFriend .chatLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chatBadge {
    margin-left: auto;
    background: linear-gradient(180deg, #ff7d6b 0%, #d64541 100%);
    color: #fff;
    border-radius: 10px;
    font: bold 11px "Trebuchet MS", Arial, sans-serif;
    padding: 1px 8px;
    min-width: 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.chatDot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5a63a0;
    flex: 0 0 auto;
}
.chatDot.on {
    background: #35c04a;
    box-shadow: 0 0 6px rgba(53, 192, 74, .85);
}
/* La fila activa lleva el punto en marron para que se lea sobre el oro. */
.chatFriend.active .chatDot { background: #6b4a05; box-shadow: none; }
.chatFriend.active .chatBadge { color: #fff; }

.chatHint {
    margin-left: auto;
    font-size: 10px;
    color: #9aa5dd;
    background: rgba(82, 100, 205, .35);
    border-radius: 8px;
    padding: 1px 7px;
}
.chatFriend.active .chatHint {
    background: rgba(59, 38, 0, .2);
    color: #3b2600;
}

.chatSideEmpty {
    color: #8f9ad4;
    font-size: 12px;
    line-height: 1.6;
    margin: 4px 2px 0;
}

/* --- Conversacion -------------------------------------------------------- */
.chatMain {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

.chatTitle {
    color: #fff;
    font: bold 14px "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    margin: 0 0 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.chatTitle span {
    color: #9aa5dd;
    font-weight: normal;
    font-size: 12px;
}

.chatLog {
    flex: 1;
    min-height: 250px;
    max-height: 56vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #171d52 0%, #12163c 100%);
    border: 1px solid rgba(150, 170, 235, .4);
    border-radius: 11px;
    padding: 12px;
    box-shadow: inset 0 3px 12px rgba(0, 0, 0, .55);
    -webkit-overflow-scrolling: touch;
}
.chatLog::-webkit-scrollbar { width: 9px; }
.chatLog::-webkit-scrollbar-track { background: rgba(0, 0, 0, .25); border-radius: 9px; }
.chatLog::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #5264cd, #2c3482);
    border-radius: 9px;
    border: 1px solid rgba(247, 201, 72, .3);
}

.chatRow { display: flex; margin-bottom: 11px; gap: 8px; align-items: flex-end; }
.chatRow.mine { justify-content: flex-end; }

/* Avatar de mensaje: aro dorado, o inicial sobre un tono fijo del emperador. */
.chatAv {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: bold 13px "Trebuchet MS", Arial, sans-serif;
    border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.chatAv.c0 { background: linear-gradient(180deg, #7d8ce8, #3f4bb0); }
.chatAv.c1 { background: linear-gradient(180deg, #e8a15c, #b06a24); }
.chatAv.c2 { background: linear-gradient(180deg, #6fc0e8, #2b7bb0); }
.chatAv.c3 { background: linear-gradient(180deg, #b48ce8, #6a3fb0); }
.chatAv.c4 { background: linear-gradient(180deg, #8ce8a1, #3fb05c); }
.chatAv.c5 { background: linear-gradient(180deg, #e88181, #b03232); }
.chatRow.mine .chatAv {
    background: linear-gradient(180deg, #ffe68a, #dfa01a);
    color: #3b2600;
    border-color: #a8710c;
    text-shadow: none;
}
/* La foto del imperio: el mismo disco, ahora con la cara elegida. */
img.chatAv {
    object-fit: cover;
    background: #141a4d;
}

.chatBody { max-width: 78%; min-width: 0; }
.chatRow.mine .chatBody { display: flex; flex-direction: column; align-items: flex-end; }

.chatWho {
    color: #ffd76a;
    font: bold 12px "Trebuchet MS", Arial, sans-serif;
    margin: 0 0 3px 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.chatBubble {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 13px;
    font-size: 14px;
    line-height: 1.45;
    color: #eef1ff;
    background: linear-gradient(180deg, #3b4599 0%, #2a3180 100%);
    border: 1px solid rgba(150, 170, 235, .5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
                0 2px 5px rgba(0, 0, 0, .3);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.chatRow.mine .chatBubble {
    background: linear-gradient(180deg, #ffe68a 0%, #f7c948 100%);
    border: 1px solid #a8710c;
    color: #3b2600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6),
                0 2px 5px rgba(0, 0, 0, .3);
}

.chatMeta {
    color: #7f8ac9;
    font-size: 10px;
    margin: 3px 2px 0;
}
.chatRow.mine .chatMeta { color: #c8a33c; }

/* Estado vacio del registro: centrado y con icono, no un parrafo gris. */
.chatLog p.chatEmpty {
    color: #8f9ad4;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    margin: 46px 12px;
}
.chatLog p.chatEmpty::before {
    content: "";
    display: block;
    width: 42px;
    height: 42px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: rgba(82, 100, 205, .35);
    border: 1px solid rgba(247, 201, 72, .4);
}

/* --- Redaccion ----------------------------------------------------------- */
.chatComposer {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}
.chatComposer input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    font-size: 15px;
    color: #1b2050;
    background: #fff;
    border: 1px solid rgba(150, 170, 235, .7);
    border-radius: 20px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .16);
    box-sizing: border-box;
}
.chatComposer input:focus {
    outline: none;
    border-color: #f7c948;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .16),
                0 0 0 3px rgba(247, 201, 72, .32);
}
.chatComposer .uiButton { padding: 9px 18px; }

#chatError {
    font-size: 12px;
    color: #ff9d8f;
    margin: 7px 0 0;
    min-height: 15px;
}

/* === Movil ============================================================== */
@media (max-width: 720px) {
    .uiHeader.interstitialHeader {
        padding: 9px 10px !important;
    }
    .uiHeader.interstitialHeader h2,
    .uiHeader.interstitialHeader h2 a {
        font-size: 15px;
    }
    .chatWrap { flex-direction: column; }
    .chatSide { flex: 0 0 auto; }
    .chatLog { max-height: 46vh; }
    .chatBody { max-width: 86%; }
    .uiInterstitialBar.uiBoxGray { padding: 8px; }
    .uiButton { padding: 6px 11px; }
    .pRow { flex-wrap: wrap; }
    .pActions { width: 100%; justify-content: flex-end; }
}

/* =========================================================================
   TEMA MILITAR: camuflaje jungla | volcán
   =========================================================================
   Va al final para pisar la paleta azul/dorada de arriba sin tocar la
   maquetación: fondo partido en diagonal (jungla a la izquierda, volcán a
   la derecha, grieta de lava en el corte), cajas de metal oscuro, acentos
   lava y oliva, títulos en letra de plantilla militar. */

html { background: #1c1818 url("../img/camo-volcano.svg") 0 0 / 420px 420px repeat fixed; }
body.canvas,
body.liquid,
body.ego_wide {
    background: transparent !important;
    background-image: none !important;
    position: relative;
}
body.ego_wide::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: #3d4a22 url("../img/camo-jungle.svg") 0 0 / 420px 420px repeat;
    -webkit-mask-image: linear-gradient(100deg, #000 50%, transparent 50%);
            mask-image: linear-gradient(100deg, #000 50%, transparent 50%);
}
body.ego_wide::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(100deg, transparent calc(50% - 3px), #ffb36b calc(50% - 1px), #fff3d6 50%,
                        #ffb36b calc(50% + 1px), transparent calc(50% + 3px)),
        linear-gradient(100deg, transparent calc(50% - 26px), rgba(226, 64, 28, .5) calc(50% - 4px),
                        rgba(226, 64, 28, .5) calc(50% + 4px), transparent calc(50% + 26px)),
        radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, .15), rgba(0, 0, 0, .65));
}

.uiInterstitial.uiBoxWhite {
    background: linear-gradient(180deg, rgba(38, 36, 31, .97) 0%, rgba(20, 19, 17, .97) 100%);
    border: 2px solid #4a4740;
    border-radius: 10px;
    box-shadow: 0 0 0 1px #000, 0 26px 60px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.uiHeader.interstitialHeader {
    background: linear-gradient(rgba(18, 14, 12, .55), rgba(18, 14, 12, .75)),
                #1c1818 url("../img/camo-volcano.svg") 0 0 / 300px 300px repeat;
    border-bottom: 4px solid !important;
    border-image: linear-gradient(90deg, #6b7d2f 0 50%, #e2401c 50% 100%) 1 !important;
    border-radius: 8px 8px 0 0;
}
.uiHeader.interstitialHeader h2 a {
    font-family: "Black Ops One", Impact, sans-serif;
    font-weight: normal;
    letter-spacing: 1.5px;
    color: #fff3d6;
    text-shadow: 0 2px 0 #000, 0 0 12px rgba(226, 64, 28, .55);
}
.uiHeader.interstitialHeader p { color: #d6cfc2; }

.pSection {
    color: #ff7a3d;
    border-bottom-color: rgba(226, 64, 28, .4);
    font-family: "Black Ops One", Impact, sans-serif;
    font-weight: normal;
    letter-spacing: 2px;
}
.pRow {
    border-color: rgba(239, 233, 221, .14);
    border-left: 4px solid #6b7d2f;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(48, 45, 39, .85), rgba(26, 24, 21, .9));
}
.pRow:hover {
    border-color: rgba(255, 122, 61, .55);
    border-left-color: #e2401c;
}
.pName { color: #f4efe6; }
.pMeta { color: #b9b2a5; }
.pAvatar { border-color: #8a9a4a !important; }
.pCard {
    border-color: rgba(239, 233, 221, .16);
    border-top: 3px solid #e2401c;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(48, 45, 39, .85), rgba(26, 24, 21, .92));
}
.pHint, .pEmpty { color: #b9b2a5; }
.pEmpty { background: rgba(0, 0, 0, .3); border-color: rgba(239, 233, 221, .15); }
.uiInterstitialContent a { color: #ff9a63; }
#inviteUrl, .pSearch input, .chatComposer input {
    color: #f4efe6 !important;
    background: rgba(10, 10, 8, .9) !important;
    border: 1px solid #5b5552 !important;
    border-radius: 6px !important;
}
#inviteUrl:focus, .pSearch input:focus, .chatComposer input:focus {
    border-color: #e2401c !important;
    box-shadow: 0 0 0 3px rgba(226, 64, 28, .28) !important;
}

.uiInterstitialBar.uiBoxGray {
    background: rgba(12, 11, 9, .85);
    border-top: 1px solid rgba(239, 233, 221, .12);
}
.uiButtonConfirm,
button.uiButtonConfirm,
.uiInterstitialContent a.uiButtonConfirm {
    background: linear-gradient(180deg, #ff7a3d 0%, #e2401c 55%, #9a1d12 100%) !important;
    border: 1px solid #ff9a63 !important;
    color: #fff !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 #5e0f07, 0 6px 14px rgba(0, 0, 0, .4) !important;
    border-radius: 6px !important;
}
.uiButton {
    background: linear-gradient(180deg, #8a9a4a 0%, #6b7d2f 55%, #3d4a22 100%) !important;
    border: 1px solid #a8b86a !important;
    color: #fff !important;
    border-radius: 6px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 0 #262e15, 0 6px 14px rgba(0, 0, 0, .4) !important;
}
.uiButton .uiButtonText, .uiButtonConfirm .uiButtonText { color: #fff !important; }

/* Chat */
.chatSide {
    background: linear-gradient(180deg, rgba(30, 28, 24, .9), rgba(16, 15, 13, .92));
    border-color: rgba(239, 233, 221, .15);
}
.chatFriend { color: #efe9dd; }
.chatFriend:hover { background: rgba(107, 125, 47, .35); border-color: rgba(168, 184, 106, .5); }
.chatFriend.active {
    background: linear-gradient(180deg, #ff7a3d 0%, #e2401c 55%, #9a1d12 100%);
    border-color: #ff9a63;
    color: #fff;
}
.chatFriend.active .chatDot { background: #fff3d6; }
.chatFriend img { border-color: #8a9a4a; }
.chatHint { background: rgba(107, 125, 47, .45); color: #e6efc4; }
.chatTitle span { color: #b9b2a5; }
.chatLog {
    background: linear-gradient(180deg, rgba(22, 20, 17, .95), rgba(12, 11, 9, .95));
    border-color: rgba(239, 233, 221, .18);
}
.chatBubble {
    background: linear-gradient(180deg, #3f4a2a 0%, #2c3420 100%);
    border-color: rgba(168, 184, 106, .5);
    color: #f4efe6;
}
.chatRow.mine .chatBubble {
    background: linear-gradient(180deg, #ff7a3d 0%, #c62d1f 100%);
    border-color: #ff9a63;
    color: #fff;
}
.chatMeta { color: #9a9283; }
.chatRow.mine .chatMeta { color: #ffb36b; }
.chatWho { color: #b6c47a; }
.chatLog p.chatEmpty { color: #b9b2a5; }
.chatLog p.chatEmpty::before { background: rgba(226, 64, 28, .35); }
.chatLog::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #e2401c, #9a1d12) !important;
    border-color: rgba(255, 179, 107, .5) !important;
}
.chatLog { scrollbar-color: #e2401c rgba(0, 0, 0, .3); }
.uiInterstitialBar.uiBoxGray { border-top: 2px solid #6b7d2f !important; }
.chatFriend .chatLabel { color: inherit; }