:root {
    --bg-void: #000000;
    --bg-panel: #0a0a0a;
    --bg-panel-alt: #0c0c0c;
    --border: #232323;
    --border-strong: #4a4a4a;
    --green: #39ff8a;
    --green-bright: #baffd8;
    --green-dim: #1f9c53;
    --green-muted: #7c8a80;
    /* Texto de apoyo (parrafos explicativos, subtitulos) -- mas brillante
       y legible que --green-muted, que es demasiado apagado para leerse
       comodo en parrafos, solo pensado para etiquetas cortas. */
    --copy-text: #bcc9c1;
    --green-glow: rgba(57, 255, 138, 0.35);
    --red-alert: #ff3b4e;
    --brand-glow: #39ff8a;
    --ip-color: #64d7ff;
    --version-color: #c49bff;
    --players-color: #ffd93b;
    --motd-color: #63e084;
    --warning-color: #ffd166;
    --font-mono: "JetBrains Mono", "Consolas", "Courier New", monospace;
    --font-ui: "Segoe UI", "Inter", Tahoma, Arial, sans-serif;
    --font-mc: "Minecraft", "JetBrains Mono", monospace;
    /* Cromado en gris oscuro casi negro, con el verde neon reservado como
       unico acento (bordes, iconos, brillos) — nunca como relleno grande.
       El terminal (negro + texto de colores) sigue viviendo dentro de
       estas ventanas, sin tocar sus propios colores de datos (IP/jugadores/
       version/motd), que ya funcionaban bien y dan la unica otra variacion
       cromatica real. */
    --win-face: #121212;
    --win-face-light: #1c1f1c;
    --win-face-dark: #060706;
    --win-shadow: #000000;
    --win-title-from: #141614;
    --win-title-to: #0c0d0c;
    --win-text: #eafff2;
    --desktop-bg: #030403;
    --radius: 12px;
    --radius-sm: 8px;
}

* {
    box-sizing: border-box;
}

/* Insignia de cuenta, fija en la esquina: muestra si hay sesion iniciada
   y con que plan, para verlo de un vistazo sin abrir ningun panel. */
#accountBadge {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 2100;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--win-face);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 5px 12px 5px 5px;
}
#accountBadge a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
#accountBadge img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: block;
}
.account-tier {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--green);
}
.account-tier-guest {
    color: var(--green-muted);
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    background:
        radial-gradient(ellipse at 76% -15%, rgba(57, 255, 138, 0.1), transparent 42%),
        radial-gradient(ellipse at 0% 110%, rgba(57, 255, 138, 0.08), transparent 40%),
        var(--bg-void);
    color: var(--green);
    font-family: var(--font-mono);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- Ventanas estilo "Fluent" (Windows 11 Settings): cromado gris casi
   negro, esquinas redondeadas y un borde muy tenue en verde neon en vez
   del cromo/gradiente azul clasico. ------------------------------------ */
.win-window {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(57, 255, 138, 0.1);
    border-radius: var(--radius);
    background: var(--win-face);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
}

.win-titlebar {
    flex: 0 0 auto;
    padding: 10px 12px 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--win-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%),
        var(--win-title-to);
    border-bottom: 1px solid rgba(57, 255, 138, 0.08);
}

.win-titlebar-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 0 3px rgba(57, 255, 138, 0.55));
}


.win-body {
    flex: 1;
    min-height: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.app-actions { display: flex; flex-direction: row; align-items: stretch; gap: 10px; }
.app-actions .nav-action { flex: 1; }

/* Filas planas y suavemente redondeadas, gris-azulado, al estilo de la
   barra lateral de "Game Settings" de Minecraft — icono a la izquierda,
   etiqueta a la derecha, sin relieve 3D marcado. */
/* Boton clasico de Minecraft: relleno gris solido, sin redondear, con el
   bisel de 3 tonos (borde negro exterior + arista clara arriba-izda +
   arista oscura abajo-dcha) y el texto con la sombra caida tipica de la
   fuente del juego. */
.nav-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid #000000;
    border-radius: 0;
    box-shadow:
        inset 2px 2px 0 0 rgba(255, 255, 255, 0.3),
        inset -2px -2px 0 0 rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3px;
    text-decoration: none;
    text-transform: none;
    text-shadow: 2px 2px 0 #3f3f3f;
    background: #8c8c8c;
    font-family: var(--font-mc);
    cursor: pointer;
    transition: background 0.05s ease, color 0.05s ease;
}

.nav-icon {
    width: 20px;
    height: 20px;
    color: #d9d9d9;
    flex: 0 0 auto;
}

.nav-action:hover {
    background: #9d9d76;
    color: #ffffa0;
}

.nav-action:active {
    background: #707070;
    box-shadow:
        inset -2px -2px 0 0 rgba(255, 255, 255, 0.3),
        inset 2px 2px 0 0 rgba(0, 0, 0, 0.4);
}

/* Cada categoria lleva su propio color de icono, como en el menu de
   ajustes de Minecraft (Video/Audio/Broadcast tienen cada uno el suyo). */
.nav-action[data-open="loginPanel"] .nav-icon { color: #7fd4f0; }
.nav-action[data-open="plansPanel"] .nav-icon { color: #7de3ab; }
.nav-action-ranking .nav-icon { color: #f0c274; }

.terminal-intro-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    color: #777;
    font-size: 10px;
    letter-spacing: 1.3px;
}

.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red-alert);
    box-shadow: 0 0 6px var(--red-alert);
    animation: liveBlink 1.6s ease-in-out infinite;
}

@keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* --- Stats (en la barra superior) --------------------------------------
   Linea simple de terminal, como si fuera texto de un prompt cualquiera. */
#statsBar {
    color: var(--players-color);
    font-size: 13px;
    white-space: nowrap;
}

.stat-sep {
    margin: 0 8px;
    color: #4d5961;
}

/* --- Main content layout: cuadricula 2x2, los cuatro cuadros iguales ---
   Arriba-izda: logo + estadisticas. Abajo-izda: terminal con las IPs.
   Arriba-dcha: panel de control (botones). Abajo-dcha: mapa. */
/* --- Barra superior: marca + stats + navegacion, todo en una linea ----- */
/* --- Contenido principal: barra lateral (logo + panel de control) mas
   dos paneles grandes de contenido de verdad (feed y mapa). No tienen que
   ser iguales — el logo y los botones no necesitan tanto hueco como el
   feed/mapa, pero SI necesitan verse bien, no quedar diminutos. --------- */
#content {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(340px, 42fr) minmax(420px, 58fr);
    grid-template-rows: minmax(300px, 38fr) minmax(320px, 62fr);
    grid-template-areas:
        "logo    control"
        "feed    map";
    gap: 6px;
    padding: 6px;
    background: var(--desktop-bg);
    min-height: 0;
}

#logoPane { grid-area: logo; min-height: 0; position: relative; }

/* Mosaico de digitos hex de fondo -- textura pura, muy tenue, detras de
   todo lo demas del panel (logo + stats van encima, con su propio z-index). */
#hexMosaic {
    position: absolute;
    inset: 32px 0 0 0; /* deja fuera la barra de titulo */
    margin: 0;
    padding: 4px 8px;
    overflow: hidden;
    color: rgba(57, 255, 138, 0.16);
    font: 700 10px/1.35 var(--font-mono);
    letter-spacing: 1px;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
#controlPanel { grid-area: control; min-height: 0; }
#panel { grid-area: feed; min-height: 0; min-width: 0; }
#mapPane { grid-area: map; min-height: 0; }

.term-window { background: #000; }
.term-window .win-titlebar { background: #202020; }

/* --- Logo + stats (dentro de la barra lateral) -------------------------*/
#terminalIntro {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 10px;
    overflow: hidden;
}

/* Etiqueta de estado tipo HUD, esquina superior derecha del logo -- reusa
   el punto parpadeante ya definido en otra parte de la web (mismo lenguaje
   visual, no un elemento nuevo suelto). */
.intro-status {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--green-muted);
}
.intro-status .live-dot {
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
}

#squareLogo {
    flex: 0 0 auto;
    align-self: center;
    width: clamp(40px, 9vh, 76px);
    height: clamp(40px, 9vh, 76px);
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(57, 255, 138, 0.45));
}

#asciiLogoWrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#asciiLogo {
    width: max-content;
    max-width: 100%;
    margin: 0;
    color: var(--green);
    font: 700 15px/24px var(--font-mono);
    letter-spacing: 0;
    text-shadow: 0 0 12px var(--green-glow), 0 0 24px rgba(57, 255, 138, 0.2);
}

/* Linea de "banner" justo debajo del logo ascii, como la que imprime
   cualquier herramienta de hacking real nada mas arrancar en terminal
   (nombre, version, una linea describiendo que hace) -- sin esto, el logo
   y los contadores se veian como dos widgets separados en vez de la salida
   continua de una sola sesion de terminal. */
#introTagline {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    padding: 0 14px;
    color: var(--green-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.term-cursor {
    display: inline-block;
    margin-left: 2px;
    color: var(--green);
    animation: termCursorBlink 1s steps(1) infinite;
}
@keyframes termCursorBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

#statsBar {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    padding: 4px 14px 8px;
    color: var(--green);
    text-shadow: 0 0 12px var(--green-glow);
    background: rgba(0, 0, 0, 0.55);
}

/* Contadores estilo terminal: lineas de salida como las que imprime
   cualquier herramienta real ("[+] algo: valor"), todas con el mismo
   tamaño de letra y pegadas entre si -- antes la etiqueta era pequeña y
   el numero enorme, lo que se leia mas a "ficha de datos" que a texto de
   consola. Cada linea mantiene su propio color neon. */
.counter-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
    padding: 0;
}

.counter-prompt {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 20px;
}

.counter-label {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mc);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-shadow: none;
    opacity: 0.85;
}

.counter-value {
    flex: 0 0 auto;
    font-family: var(--font-mc);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}

/* Sombra dura tipo Minecraft (sin difuminar, como el texto del juego) mas
   un resplandor neon detras, para que sea a la vez "de Minecraft" y "de
   hacker" y no solo una cosa u otra. */
.counter-cyan .counter-prompt, .counter-cyan .counter-label, .counter-cyan .counter-value { color: #1fe0ff; }
.counter-cyan .counter-value { text-shadow: 2px 2px 0 #0a4a55, 0 0 16px rgba(31, 224, 255, 0.55); }

.counter-amber .counter-prompt, .counter-amber .counter-label, .counter-amber .counter-value { color: #ffb300; }
.counter-amber .counter-value { text-shadow: 2px 2px 0 #6b4400, 0 0 16px rgba(255, 179, 0, 0.55); }

.counter-magenta .counter-prompt, .counter-magenta .counter-label, .counter-magenta .counter-value { color: #ff2fd0; }
.counter-magenta .counter-value { text-shadow: 2px 2px 0 #6b0d57, 0 0 16px rgba(255, 47, 208, 0.55); }


/* El panel de control usa una tipografia de interfaz clasica (no
   monoespaciada), a peticion expresa — se ve mas a "widget de escritorio"
   y menos a terminal, para distinguirlo del resto de paneles. */
#controlPanel {
    --win-face: #57595e;
    --win-face-light: #6b6f76;
    --win-face-dark: #3a3c40;
    font-family: var(--font-mc);
    border-color: #2f3134;
}

#controlPanel .win-titlebar {
    background: #45474b;
    border-bottom: 1px solid #2f3134;
    font-family: var(--font-mc);
    font-weight: 400;
    letter-spacing: 0.5px;
}

#controlPanel .win-titlebar-icon {
    filter: none;
}

#controlPanel .win-body {
    background-image: url("/static/mc-texture.png");
    background-size: 16px 16px;
    image-rendering: pixelated;
}

/* Maqueta visual de "Opciones de escaneo" — todavia no hay backend que
   controle el escaneo en vivo, asi que de momento este espacio aloja el
   filtro por region y version — los mismos que el modal de FILTERS, para
   poder cambiarlos sin abrir nada. */
.filter-inline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
}

.filter-inline-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.filter-inline-row label {
    font-size: 12px;
    color: #b7bcc0;
    font-family: var(--font-mc);
    letter-spacing: 0.3px;
}

/* Selector clasico de Minecraft: hueco oscuro semitransparente con un
   fino marco claro-arriba/oscuro-abajo, como los campos de "Edit Server". */
.filter-inline-row select {
    width: 100%;
    padding: 9px 10px;
    border: 2px solid #000000;
    border-radius: 0;
    background: rgba(15, 16, 18, 0.6);
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 13px;
    box-shadow:
        inset 1px 1px 0 0 rgba(0, 0, 0, 0.5),
        inset -1px -1px 0 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

/* --- Top 3 de la vitrina de destacados (servidores que han pagado por
   salir aqui) — mismo lenguaje visual que los selectores de arriba. ------ */
.featured-widget {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.featured-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 15px;
    font-family: var(--font-mc);
    color: #d4d8dc;
    letter-spacing: 0.3px;
}

.featured-widget-link {
    color: var(--green);
    font-size: 12px;
    font-family: var(--font-mono);
    text-decoration: none;
}

.featured-widget-link:hover { color: var(--green-bright); }

.featured-top3-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.featured-top3-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 40%),
        rgba(15, 16, 18, 0.6);
    border: 2px solid #000000;
    box-shadow:
        inset 1px 1px 0 0 rgba(0, 0, 0, 0.5),
        inset -1px -1px 0 0 rgba(255, 255, 255, 0.08);
    font-family: var(--font-mono);
    font-size: 15px;
}

.featured-row {
    cursor: pointer;
    transition: background 0.1s ease, transform 0.06s ease;
}
.featured-row:hover, .featured-row:focus-visible {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 40%),
        rgba(57, 255, 138, 0.08);
    outline: none;
}
.featured-row:active {
    transform: translateY(1px);
}

.featured-icon {
    flex: 0 0 auto;
    border-radius: 3px;
    image-rendering: pixelated;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.featured-rank { flex: 0 0 auto; color: var(--players-color); font-weight: 700; }
.featured-endpoint { flex: 1; min-width: 0; color: var(--ip-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.featured-bid { flex: 0 0 auto; color: var(--players-color); font-weight: 700; }

.featured-empty {
    padding: 8px 2px;
    color: #8a9a90;
    font-size: 12px;
    font-family: var(--font-mono);
}
.featured-empty a { color: var(--green); }

/* --- Hueco reservado para publicidad (aun sin red conectada) ----------- */
#adSlot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    color: #566058;
    font-size: 10px;
    letter-spacing: 2px;
    background: #0a0c0a;
    border-top: 1px dashed var(--win-face-dark);
}

/* Cabecera de columnas estilo htop (PID/USER/PRI...): barra solida con las
   etiquetas en mayuscula, para que el feed se lea como una tabla real de
   herramienta de sistema en vez de una lista de lineas sueltas. Sin buscador
   -- el contador de objetivos vive aqui mismo, al final de la barra. */
#listHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--green);
    color: #001b0c;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    flex-shrink: 0;
}
#listHeader .lh-time { flex: 0 0 60px; }
#listHeader .lh-target { flex: 0 0 240px; }
#listHeader .lh-players { flex: 0 0 62px; }
#listHeader .lh-version { flex: 0 0 88px; }
#listHeader .lh-motd { flex: 1 1 auto; }
#listHeader .lh-region { flex: 0 0 82px; }

#matchCount {
    flex: 0 0 auto;
    font-size: 13px;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: rgba(0, 27, 12, 0.6);
    white-space: nowrap;
}

#serverList {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 8px;
    position: relative;
}

#serverList::-webkit-scrollbar {
    width: 6px;
}
#serverList::-webkit-scrollbar-thumb {
    background: var(--border-strong);
}
#serverList::-webkit-scrollbar-track {
    background: transparent;
}

.server-row {
    display: flex;
    align-items: center;
    height: 62px;
    padding: 0 18px;
    font-size: 12.5px;
    border-bottom: 1px solid #171717;
    cursor: pointer;
    transition: background 0.12s ease;
}

.server-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.015);
}

.server-row.row-enter {
    animation: rowEnter 0.45s ease both;
}

@keyframes rowEnter {
    from {
        opacity: 0;
        transform: translateY(-6px);
        background: rgba(57, 255, 138, 0.22);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        background: transparent;
    }
}

.server-row:nth-child(even) {
    background: transparent;
}

.server-row:hover {
    background: #0b0b0b;
}

.server-row.row-active {
    background: #101010;
    box-shadow: inset 2px 0 0 #56d6a4;
}

.server-row > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.log-time {
    color: #4a4a4a;
    font-size: 10.5px;
    flex: 0 0 44px;
}

.log-result {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    width: 100%;
    color: var(--green-bright);
}

.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-strong);
    margin-right: 7px;
    vertical-align: middle;
}

.status-dot.status-online {
    background: var(--green);
    box-shadow: 0 0 5px var(--green);
}

.col-ip {
    color: var(--ip-color);
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 212px;
    min-width: 0;
    overflow: hidden;
}

.server-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 4px;
    image-rendering: pixelated;
    opacity: 0.95;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.warn-icon {
    flex: 0 0 auto;
    color: var(--warning-color);
    font-size: 11px;
    text-shadow: 0 0 6px rgba(244, 255, 0, 0.55);
    cursor: help;
}

.copy-btn {
    opacity: 0.6;
    color: var(--green-muted);
    font-size: 11px;
    cursor: pointer;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.server-row:hover .copy-btn {
    opacity: 1;
}

.copy-btn:hover {
    color: var(--green-bright);
}

.copy-btn.copy-done {
    opacity: 1;
    color: var(--green);
}

.col-players {
    color: var(--players-color);
    flex: 0 0 42px;
}

.players-unknown .col-players {
    color: #a5adb2;
}

.unknown-eye {
    display: inline-block;
    margin-right: 5px;
    color: #c5cdd2;
    font-size: 18px;
    line-height: 0;
    vertical-align: -1px;
}

.red-unknown {
    color: #ff4f61;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 79, 97, 0.6);
}

.col-version {
    color: var(--version-color);
    flex: 0 0 64px;
}

.col-motd {
    color: var(--motd-color);
    flex: 1 1 auto;
    min-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-country {
    flex: 0 0 62px;
    color: #f0c674;
    font-size: 12px;
}

.warning-badge {
    flex: 0 0 auto;
    color: var(--warning-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow: 0 0 7px rgba(244, 255, 0, 0.55);
}

.possible-open {
    border-left: 3px solid var(--warning-color);
    background: rgba(244, 255, 0, 0.035);
}

.empty-state {
    padding: 24px 12px;
    color: var(--green-muted);
    font-size: 13px;
}

.cursor-blink {
    display: inline-block;
    animation: blink 1s steps(1) infinite;
    margin-right: 4px;
}

.dots {
    animation: blink 1.4s steps(1) infinite;
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* --- Map ---------------------------------------------------------------*/
#mapWrap {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* --- Dialogs: deliberately desktop-like, similar to classic settings --- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 4, 7, 0.78);
    backdrop-filter: blur(2px);
}

.modal.is-open { display: flex; }

.settings-panel,
.plans-panel {
    position: relative;
    width: min(520px, 100%);
    padding: 0 0 22px;
    color: var(--win-text);
    border: 1px solid rgba(57, 255, 138, 0.16);
    border-radius: var(--radius);
    background: var(--win-face);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.65);
    font-family: var(--font-mono);
}

.plans-panel { width: min(1180px, 100%); }

.settings-panel::before,
.plans-panel::before {
    content: "";
    display: block;
    height: 30px;
    background: var(--win-title-to);
    border-bottom: 1px solid rgba(57, 255, 138, 0.1);
    border-radius: var(--radius) var(--radius) 0 0;
}

.modal-close {
    position: absolute;
    top: 5px;
    right: 8px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--win-text);
    background: transparent;
    font-size: 16px;
    line-height: 16px;
    cursor: pointer;
}

.modal-close:hover { background: #b3453f; color: #fff; }

/* Boton "VOLVER" arriba a la izquierda, mismo lenguaje que el de la base
   de datos (una flecha + texto, no una X diminuta en la esquina) -- mas
   facil de ver y de acertar con el dedo en movil que el aspa de 20x20. */
.modal-back {
    position: absolute;
    top: 14px;
    left: 14px;
    right: auto;
    width: auto;
    height: auto;
    padding: 7px 14px;
    border: 1px solid rgba(57, 255, 138, 0.3);
    border-radius: var(--radius-sm);
    background: rgba(57, 255, 138, 0.06);
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.modal-back:hover { background: rgba(57, 255, 138, 0.14); color: var(--green-bright); }

.settings-panel > *:not(.modal-close):not(::before),
.plans-panel > *:not(.modal-close):not(::before) {
    padding-left: 28px;
    padding-right: 28px;
}

.window-kicker { margin: 24px 0 6px; color: var(--green); font: 700 13px var(--font-mono); letter-spacing: 1.2px; }
.settings-panel h2, .plans-panel h2 { margin: 0; color: var(--win-text); font-family: var(--font-mc); font-size: 34px; font-weight: 400; letter-spacing: 0.5px; }
.window-copy { margin: 12px 0 24px; color: var(--copy-text); font-size: 18px; line-height: 1.55; }

.settings-panel label { display: block; margin: 14px 0 5px; color: #b9c9bf; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; }
.settings-panel select {
    width: 100%;
    padding: 9px 8px;
    border: 1px solid rgba(57, 255, 138, 0.14);
    border-radius: var(--radius-sm);
    color: var(--win-text);
    background: #0e100e;
    font-family: var(--font-mono);
}
/* Mismo boton de Minecraft (bisel de 3 tonos + sombra dura de texto) que
   ya usa el panel de control, aplicado tambien a estos modales -- antes
   eran cajas planas con borde fino, un lenguaje visual distinto al resto
   de la web. */
.google-button, .plan-select {
    border: 2px solid #000000;
    border-radius: 0;
    padding: 12px 16px;
    color: #ffffff;
    background: #8c8c8c;
    box-shadow:
        inset 2px 2px 0 0 rgba(255, 255, 255, 0.3),
        inset -2px -2px 0 0 rgba(0, 0, 0, 0.4);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font-mc);
    letter-spacing: 0.4px;
    font-weight: 400;
    text-shadow: 2px 2px 0 #3f3f3f;
    transition: background 0.05s ease, color 0.05s ease;
}
.plan-select:hover { background: #9d9d76; color: #ffffa0; }
.plan-select:active {
    background: #707070;
    box-shadow: inset -2px -2px 0 0 rgba(255, 255, 255, 0.3), inset 2px 2px 0 0 rgba(0, 0, 0, 0.4);
}

.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan-card { position: relative; min-height: 270px; padding: 26px 20px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); background: #0e100e; text-align: center; }
.plan-card h3 { margin: 0 0 16px; color: #c3d0c9; font-family: var(--font-mc); font-size: 20px; letter-spacing: 1.5px; }
.plan-card strong { display: block; min-height: 50px; color: var(--green-bright); font-family: var(--font-mc); font-size: 38px; text-shadow: 2px 2px 0 #0a4a2e; }
.plan-card small { font-size: 14px; font-weight: 400; }
.plan-card p { min-height: 64px; color: #9fb0a6; font-size: 15px; line-height: 1.5; }
.plan-card.plan-featured { border: 1px solid var(--brand-glow); box-shadow: 0 0 0 1px rgba(57, 255, 138, 0.25), 0 0 22px rgba(57, 255, 138, 0.12); }
.plan-card.plan-featured > span { position: absolute; top: -11px; left: 50%; padding: 5px 11px; transform: translateX(-50%); color: #001b0c; background: var(--brand-glow); font: 700 11px var(--font-mono); letter-spacing: .6px; border-radius: 3px; }
.plan-select { width: 100%; padding: 14px 4px; font-size: 15px; }
.google-button {
    display: block;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    width: 100%;
    margin-top: 10px;
    padding: 19px;
    font-size: 18px;
    color: #1c2a20;
    background: #e8ecef;
    box-shadow:
        inset 2px 2px 0 0 rgba(255, 255, 255, 0.6),
        inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
    text-shadow: none;
}
.google-button:hover { background: #ffffff; }

.login-panel { width: min(560px, 100%); text-align: center; }
.login-panel-logo {
    display: block;
    margin: 34px auto 0;
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(57, 255, 138, 0.45));
}
.login-panel .window-kicker,
.login-panel .window-copy { text-align: center; }

#map {
    width: 100%;
    height: 100%;
}


/* Fondo detras del globo: un resplandor gris muy tenue centrado (para dar
   profundidad, como una sala de control) mas un campo de estrellas de
   tamanos variados, sobre negro puro — paleta neutra, sin color. */
#mapWrap {
    background:
        radial-gradient(ellipse at 50% 45%, rgba(150, 155, 165, 0.12), transparent 55%),
        radial-gradient(ellipse at 50% 45%, rgba(200, 205, 212, 0.05), transparent 75%),
        radial-gradient(1.6px 1.6px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 60% 70%, #cfe, transparent),
        radial-gradient(1.4px 1.4px at 80% 20%, #fff, transparent),
        radial-gradient(1px 1px at 35% 85%, #cfe, transparent),
        radial-gradient(1.2px 1.2px at 92% 55%, #fff, transparent),
        radial-gradient(1px 1px at 10% 65%, #cfe, transparent),
        radial-gradient(1.6px 1.6px at 50% 12%, #fff, transparent),
        radial-gradient(1px 1px at 72% 88%, #cfe, transparent),
        radial-gradient(1px 1px at 5% 40%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 45% 60%, #cfe, transparent),
        radial-gradient(1px 1px at 88% 10%, #fff, transparent),
        #020403;
    background-size: 100% 100%;
    opacity: 1;
}

/* Lineas de escaner tipo monitor CRT, muy tenues, que derivan despacio hacia
   abajo -- da sensacion de "pantalla tactica activa" sin llamar la atencion. */
#mapWrap::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 390;
    background: repeating-linear-gradient(
        to bottom,
        rgba(210, 214, 220, 0.05) 0px,
        rgba(210, 214, 220, 0.05) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: screen;
    animation: scanline-drift 10s linear infinite;
}

@keyframes scanline-drift {
    from { background-position: 0 0; }
    to { background-position: 0 60px; }
}

#mapWrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 400;
    box-shadow: inset 0 0 110px 26px rgba(0, 0, 0, 0.8);
}

/* Modo "pantalla completa": el panel del mapa se saca del grid y cubre toda
   la ventana, para poder ver el globo con mucho mas detalle sin cambiar
   el zoom de la camara 3D en si. */
#mapPane.map-fullscreen {
    position: fixed;
    inset: 12px;
    z-index: 900;
    width: auto;
    height: auto;
}

/* Boton pequeño de expandir en la barra de titulo -- mismo icono/estilo que
   el del mapa, pero integrado en la propia titlebar en vez de flotando
   encima del contenido (el terminal no tiene un hueco tipo globe-zoom). */
.win-titlebar-expand {
    flex: 0 0 auto;
    margin-left: auto;
    width: 28px;
    height: 22px;
    border: 1px solid rgba(57, 255, 138, 0.2);
    background: rgba(57, 255, 138, 0.06);
    color: var(--green);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

/* El titulo "LIVE FEED" y su icono, mas grandes que el resto de ventanas
   (esta es la que mas se mira, al llevar la lista en vivo). */
#panel .win-titlebar {
    font-size: 14px;
    padding: 12px 14px;
}
#panel .win-titlebar-icon {
    width: 19px;
    height: 19px;
}
.win-titlebar-expand:hover {
    background: rgba(57, 255, 138, 0.16);
}
/* Cuando hay boton de expandir, los iconos decorativos van justo detras,
   ya no al final de la barra (el margin-left:auto de arriba se lo lleva). */

/* Modo "pantalla completa" del terminal (Live Feed), igual que el mapa. */
#panel.term-fullscreen {
    position: fixed;
    inset: 12px;
    z-index: 900;
    width: auto;
    height: auto;
}

/* Boton de volver, solo visible dentro del modo pantalla completa -- el
   icono de la titlebar tambien sirve, pero este es mas claro/visible sin
   tener que fijarse en un icono pequeño. */
.term-back-btn {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    margin-right: 10px;
    padding: 5px 11px;
    border: 1px solid #001b0c;
    background: rgba(0, 27, 12, 0.15);
    color: #001b0c;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    cursor: pointer;
}
.term-back-btn:hover {
    background: rgba(0, 27, 12, 0.3);
}
#panel.term-fullscreen .term-back-btn {
    display: inline-flex;
}

/* Esquinas tipo visor/HUD militar enmarcando el panel del mapa. */
.hud-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    z-index: 500;
    pointer-events: none;
    border: 2px solid rgba(220, 224, 230, 0.5);
    animation: hud-corner-breathe 5s ease-in-out infinite;
}
.hud-corner-tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.hud-corner-tr { top: 8px; right: 8px; border-left: none; border-bottom: none; animation-delay: 1.25s; }
.hud-corner-bl { bottom: 8px; left: 8px; border-right: none; border-top: none; animation-delay: 2.5s; }
.hud-corner-br { bottom: 8px; right: 8px; border-left: none; border-top: none; animation-delay: 3.75s; }

@keyframes hud-corner-breathe {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

#mapStatus {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 500;
    background: rgba(9, 11, 9, 0.9);
    border: 1px solid var(--border-strong);
    color: var(--green-muted);
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 10px;
    pointer-events: none;
}

/* Lector de coordenadas en vivo -- sigue el punto de vista de la camara,
   detalle tipo "consola tactica" en la esquina, junto al marco HUD. */
#mapCoords {
    position: absolute;
    bottom: 10px;
    right: 12px;
    z-index: 500;
    color: rgba(200, 204, 210, 0.6);
    font-size: 9px;
    letter-spacing: 1px;
    font-family: var(--font-mono);
    pointer-events: none;
}

/* Aviso de "no se pudo ubicar" -- toast bien visible en el centro del mapa,
   no solo un cambio discreto de texto en #mapStatus que pasaba desapercibido. */
.map-warning[hidden] {
    display: none;
}

.map-warning {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(40, 8, 8, 0.95);
    border: 1px solid var(--red-alert);
    color: #ffd7d7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    box-shadow: 0 0 16px rgba(255, 59, 78, 0.35);
    animation: map-warning-cycle 3s ease-in-out forwards;
    pointer-events: none;
}

.map-warning-icon {
    color: var(--red-alert);
    font-size: 14px;
}

/* Una sola animacion para todo el ciclo (entra, se queda, sale) -- dos
   animaciones separadas tocando la misma propiedad (opacity) se pisaban
   entre si y el aviso nunca llegaba a verse. */
@keyframes map-warning-cycle {
    0% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    8% { opacity: 1; transform: translateX(-50%) translateY(0); }
    88% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}

/* Controles de zoom propios del globo (sustituyen a los de Leaflet) */
.globe-zoom {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.globe-zoom button {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-strong);
    background: rgba(9, 11, 9, 0.9);
    color: var(--green);
    font-size: 15px;
    font-family: var(--font-mono);
    cursor: pointer;
    line-height: 1;
}

.globe-zoom button:hover {
    background: rgba(57, 255, 138, 0.16);
}

/* Tooltip al pasar el raton por un punto del globo (globe.gl lo inyecta
   como HTML flotante fuera del flujo normal, por eso va aparte del resto
   de estilos de componentes). */
.globe-tooltip {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--win-text);
    background: #141414;
    border: 1px solid #3a3a3a;
    padding: 5px 8px;
    border-radius: 2px;
    white-space: nowrap;
}

.globe-tooltip-alert {
    color: var(--warning-color);
}

/* Retícula de "objetivo fijado" sobre el punto seleccionado en el globo —
   su posición la calcula el JS proyectando lat/lng a pantalla en cada
   frame, aquí solo se define el aspecto (circulo discontinuo + cruz). */
.target-reticle {
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    pointer-events: none;
    z-index: 450;
}

.reticle-ring {
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: reticle-spin 9s linear infinite;
}

.reticle-ring-outer {
    inset: 0;
    border-style: dotted;
    border-color: rgba(255, 255, 255, 0.35);
    animation-duration: 14s;
    animation-direction: reverse;
}

.reticle-cross::before,
.reticle-cross::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(255, 255, 255, 0.9);
}

.reticle-cross::before { width: 20px; height: 1px; transform: translate(-50%, -50%); }
.reticle-cross::after { width: 1px; height: 20px; transform: translate(-50%, -50%); }

/* Esquinas tipo enfoque de camara/mira, un poco por fuera del anillo --
   refuerzan la lectura de "objetivo encuadrado", no solo un circulo. */
.reticle-bracket {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(255, 255, 255, 0.65);
}
.reticle-bracket-tl { top: -6px; left: -6px; border-right: none; border-bottom: none; }
.reticle-bracket-tr { top: -6px; right: -6px; border-left: none; border-bottom: none; }
.reticle-bracket-bl { bottom: -6px; left: -6px; border-right: none; border-top: none; }
.reticle-bracket-br { bottom: -6px; right: -6px; border-left: none; border-top: none; }

@keyframes reticle-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Cartel de identificacion del objetivo seleccionado -- aparece junto a la
   retícula, mismos colores que usa cada dato en el terminal (IP/MOTD/region)
   para que se lea como el mismo sistema, no como un elemento nuevo suelto. */
.target-card {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 195px;
    max-width: 280px;
    z-index: 460;
    pointer-events: none;
    background: rgba(8, 9, 8, 0.92);
    border: 1px solid rgba(210, 214, 220, 0.35);
    border-left: 2px solid var(--ip-color);
    padding: 9px 12px;
    font-family: var(--font-mono);
    animation: target-card-in 0.18s ease-out;
}

@keyframes target-card-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.target-card-ip {
    color: var(--ip-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-bottom: 5px;
    white-space: nowrap;
}

.target-card-row {
    display: flex;
    gap: 7px;
    font-size: 12px;
    line-height: 1.5;
    align-items: baseline;
}

.tc-label {
    flex: 0 0 auto;
    color: #6b7680;
    letter-spacing: 1px;
}

.tc-motd {
    color: var(--motd-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-players {
    color: var(--players-color);
    white-space: nowrap;
}

.tc-region {
    color: #f0c674;
    white-space: nowrap;
}

.tc-version {
    color: var(--version-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Responsive ----------------------------------------------------------*/
@media (max-width: 820px) {
    /* En escritorio el body no se desplaza a proposito (cada panel se
       desplaza por dentro, todo cabe en la rejilla de la pantalla) -- pero
       apilados en columna en movil, el contenido pasa facilmente de la
       altura de la pantalla, y con overflow:hidden quedaba todo atrapado
       sin poder bajar mas alla del segundo panel. */
    /* Barra de scroll propia, gris y ancha (facil de agarrar con el dedo)
       en vez de la finisima por defecto -- solo en movil, en desktop cada
       panel ya se desplaza por dentro y no hace falta. */
    body {
        overflow-y: auto;
        scroll-behavior: smooth;
        scrollbar-color: #6b6f76 #1a1c1a;
        scrollbar-width: auto;
    }
    body::-webkit-scrollbar { width: 16px; }
    body::-webkit-scrollbar-track { background: var(--win-face-dark); }
    /* El "agarre" de la barra: bloque gris cuadrado con el mismo bisel de
       3 tonos que los botones de Minecraft del resto de la web, en vez de
       una pastilla redondeada generica. */
    body::-webkit-scrollbar-thumb {
        border-radius: 3px;
        border: 2px solid #000000;
        background: #8c8c8c;
        box-shadow:
            inset 2px 2px 0 0 rgba(255, 255, 255, 0.3),
            inset -2px -2px 0 0 rgba(0, 0, 0, 0.4);
    }
    body::-webkit-scrollbar-thumb:hover { background: #9d9d76; }

    /* Misma rejilla por areas que ya usa el escritorio (logo/control/feed/
       map) -- logo y control a ancho completo arriba, mapa a la izquierda
       y tabla a la derecha debajo (la tabla se desliza por dentro para
       ver el resto de columnas, ver mas abajo). */
    #content {
        /* #content traia flex:1 del escritorio (alli tiene sentido: un
           solo viewport, sin scroll de pagina). En movil eso le obligaba
           a medir su alto SOLO con el hueco que le sobraba en el body,
           ignorando que su contenido real (la rejilla de abajo) era
           mucho mas alto -- el anuncio (siguiente hermano en el body) se
           posicionaba justo donde #content "oficialmente" terminaba,
           pero el contenido real se desbordaba mas abajo por encima
           suyo: se veian solapados. flex:0 0 auto le deja medirse por su
           contenido real, como el resto de elementos apilados. */
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Ninguna fila puede ser "auto" con un .win-window dentro: su
           barra de contenido (.win-body) usa flex:1 por dentro y overflow
           hidden en la ventana -- combinados, una fila "auto" de rejilla
           no consigue medir el contenido real y colapsa a un par de
           pixeles (probado: ni min-height:auto lo arregla, es codo la
           combinacion grid-auto-track + overflow:hidden + flex anidado).
           Alto fijo, igual que el logo: sin ambiguedad posible. */
        grid-template-rows: 220px 500px 50vh;
        grid-template-areas:
            "logo logo"
            "control control"
            "feed map";
        padding: 8px;
        gap: 8px;
        scroll-snap-type: y proximity;
    }
    #logoPane { height: 220px; scroll-snap-align: start; }
    #controlPanel { height: 500px; scroll-snap-align: start; }
    /* La tabla completa (240px solo el objetivo, mas jugadores, version,
       motd, region...) no cabe ni de lejos en la mitad de un movil -- en
       vez de dejarla a su ancho real y obligar a deslizar hacia los
       lados (que se sentia "a medias", nunca se ve la fila entera de
       golpe), se muestran solo HORA/OBJETIVO/JUGADORES a un ancho que
       cabe de verdad, y el resto de columnas se ocultan en vez de
       recortarse a la mitad. */
    #panel { min-height: 0; min-width: 0; scroll-snap-align: start; }
    .lh-version, .lh-motd, .lh-region,
    .col-version, .col-motd, .col-country { display: none; }
    /* #listHeader .lh-time (base, escritorio) es un selector con ID +
       clase -- mas especifico que un simple ".lh-time", asi que sin
       repetir "#listHeader" aqui esas reglas de escritorio seguian
       ganando pese a venir de una media query posterior en el fichero
       (la especificidad manda sobre el orden). */
    #listHeader .lh-time, .log-time { flex: 0 0 40px; font-size: 9.5px; }
    /* min-width:0 es imprescindible: por defecto un item flex no se
       encoge mas alla del tamaño de su contenido aunque tenga
       overflow:hidden -- sin esto, el ellipsis nunca llegaba a activarse
       y la fila entera seguia desbordando el panel. */
    #listHeader .lh-target, .col-ip { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
    .log-result { min-width: 0; gap: 4px; }
    #listHeader .lh-players, .col-players { flex: 0 0 30px; font-size: 11px; }
    .server-icon { width: 22px; height: 22px; }
    /* El padding lateral de 18px (36px en total) pensado para una tabla
       de escritorio se comia el ancho de una columna que ya de por si
       solo tiene ~190px -- reducido a lo minimo para dejarle sitio de
       verdad al texto de la IP. */
    #listHeader { padding: 8px 8px; gap: 4px; }
    .server-row { padding: 0 8px; }
    #mapPane { min-height: 0; min-width: 0; scroll-snap-align: start; }
    #statsBar { font-size: 13px; }
    /* Menos ancho para el icono cuadrado = mas ancho libre para el logo
       ascii, que en movil ya iba muy justo de espacio horizontal. */
    #squareLogo { width: 50px; height: 50px; }
    /* "LOG IN" es el unico texto con un espacio (DATABASE/RANKING son una
       sola palabra) -- al estrecharse el boton, era el unico que se
       partia en dos lineas, ademas de comer parte del espacio con nowrap
       las otras dos etiquetas por igual (mas consistente). */
    .nav-action { padding: 10px 8px; font-size: 11px; gap: 6px; }
    .nav-action span { white-space: nowrap; }
    .scan-grid { grid-template-columns: 1fr; }
    .settings-panel, .plans-panel { padding: 24px 17px 18px; }
    .plan-grid { grid-template-columns: 1fr; max-height: 60vh; overflow-y: auto; padding: 10px 2px; }
    .plan-card { min-height: 0; }
}

/* Movil estrecho de verdad: los 3 selectores en fila y los 3 contadores a
   20px ya no caben comodos junto al logo ascii en el mismo panel. */
@media (max-width: 480px) {
    .filter-inline { grid-template-columns: 1fr; gap: 8px; }
    .counter-label, .counter-value, .counter-prompt { font-size: 16px; }
    .featured-top3-list li { font-size: 13px; padding: 8px 10px; gap: 8px; }
    .plan-card strong { font-size: 24px; }
}