/* ============================================================
   MISSION CONTROL — SPACE LOGIN PAGE (SYSPRO Dark Theme)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --mc-bg-deep:    #000000;   /* SYSPRO BG */
    --mc-bg-dark:    #061C22;   /* SYSPRO sidebar dark */
    --mc-cyan:       #74FFE0;   /* SYSPRO primary teal */
    --mc-blue:       #026FFF;   /* SYSPRO blue */
    --mc-blue-primary: #0031CA; /* SYSPRO button blue */
    --mc-amber:      #FFC000;
    --mc-text:       #F5F6F6;
    --mc-text-muted: #CDD2D3;
}

/* ── Font scale (applied via settings widget) ─────────────── */
html.fs-large .login-title       { font-size: 20.7px; }
html.fs-large .login-subtitle    { font-size: 14.95px; }
html.fs-large .btn-launch        { font-size: 17.25px; }
html.fs-large .login-footer-note { font-size: 12.65px; }
html.fs-large .tel-label         { font-size: 12.65px; }
html.fs-large .tel-status        { font-size: 11.5px; }
html.fs-large .tel-value         { font-size: 39.1px; }
html.fs-large .hud-coords,
html.fs-large .hud-coords-left   { font-size: 12.65px; }

html.fs-xl .login-title          { font-size: 23.4px; }
html.fs-xl .login-subtitle       { font-size: 16.9px; }
html.fs-xl .btn-launch           { font-size: 19.5px; }
html.fs-xl .login-footer-note    { font-size: 14.3px; }
html.fs-xl .tel-label            { font-size: 14.3px; }
html.fs-xl .tel-status           { font-size: 13px; }
html.fs-xl .tel-value            { font-size: 44.2px; }
html.fs-xl .hud-coords,
html.fs-xl .hud-coords-left      { font-size: 14.3px; }

/* ── Body ─────────────────────────────────────────────────── */
.login-body {
    min-height: 100vh;
    width: 100%;
    background: var(--mc-bg-deep);
    font-family: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Starfield ────────────────────────────────────────────── */
.stars-layer {
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 0;
}

.stars-layer-1 {
    background-image:
        radial-gradient(1px 1px at 12% 5%,  #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 28% 18%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 43% 9%,  #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 67% 3%,  #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 82% 14%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 95% 7%,  #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 5%  24%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 19% 31%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 36% 27%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 54% 22%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 73% 29%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 88% 36%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 8%  42%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 24% 48%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 47% 39%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 61% 44%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 79% 51%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 93% 46%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 3%  58%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 16% 63%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 32% 57%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 51% 68%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 62%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 85% 74%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 10% 79%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 27% 83%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 44% 76%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 59% 88%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 76% 81%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 91% 93%, #fff 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 22% 11%, #a8d8ff 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 16%, #a8d8ff 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 77% 42%, #a8d8ff 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 38% 71%, #a8d8ff 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 64% 85%, #a8d8ff 0%, transparent 100%),
        radial-gradient(2px 2px at 15% 55%,  #c8f0e8 0%, transparent 100%),
        radial-gradient(2px 2px at 49% 33%,  #c8f0e8 0%, transparent 100%),
        radial-gradient(2px 2px at 84% 67%,  #c8f0e8 0%, transparent 100%);
    opacity: 0.9;
    animation: twinkle 6s ease-in-out infinite alternate, driftSlow 120s linear infinite;
}

.stars-layer-2 {
    background-image:
        radial-gradient(1px 1px at 7%  13%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 21% 8%,  #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 39% 19%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 58% 11%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 74% 23%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 17%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 14% 37%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 44%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 46% 52%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 63% 58%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 81% 49%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 97% 61%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 4%  72%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 17% 66%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 80%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 53% 75%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 69% 91%, #fff 0%, transparent 100%),
        radial-gradient(1px 1px at 87% 84%, #fff 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 42% 60%, #ffd8c8 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 25% 90%, #ffd8c8 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 72% 35%, #ffd8c8 0%, transparent 100%),
        radial-gradient(2px 2px at 8%  88%,  #e8d0ff 0%, transparent 100%),
        radial-gradient(2px 2px at 92% 28%,  #e8d0ff 0%, transparent 100%);
    opacity: 0.6;
    animation: twinkle 9s ease-in-out infinite alternate-reverse, driftSlow 180s linear infinite reverse;
}

@keyframes twinkle {
    0%   { opacity: 0.4; }
    50%  { opacity: 1.0; }
    100% { opacity: 0.6; }
}

@keyframes driftSlow {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-5%, -5%); }
}

/* ── Nebula blobs ─────────────────────────────────────────── */
.nebula {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    animation: nebulaPulse 12s ease-in-out infinite alternate;
}

.nebula-1 {
    width: 600px; height: 600px;
    top: -150px; right: -100px;
    background: radial-gradient(circle, rgba(116,255,224,0.10) 0%, transparent 70%);
    animation-delay: 0s;
}
.nebula-2 {
    width: 500px; height: 500px;
    bottom: -100px; left: -80px;
    background: radial-gradient(circle, rgba(0,49,202,0.12) 0%, transparent 70%);
    animation-delay: -4s;
}
.nebula-3 {
    width: 400px; height: 400px;
    top: 30%; left: 20%;
    background: radial-gradient(circle, rgba(2,111,255,0.07) 0%, transparent 70%);
    animation-delay: -7s;
}
.nebula-4 {
    width: 350px; height: 350px;
    top: 10%; right: 30%;
    background: radial-gradient(circle, rgba(116,255,224,0.05) 0%, transparent 70%);
    animation-delay: -2s;
}

@keyframes nebulaPulse {
    0%   { transform: scale(1);    opacity: 0.8; }
    100% { transform: scale(1.15); opacity: 1.0; }
}

/* ── Planet ───────────────────────────────────────────────── */
.planet {
    position: fixed;
    bottom: -80px;
    left: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        #4a7fa5 0%,
        #2d4f6b 30%,
        #1a2e40 60%,
        #0d1a24 100%
    );
    box-shadow:
        inset -30px -20px 50px rgba(0,0,0,0.6),
        inset 20px 15px 40px rgba(93,255,194,0.08),
        0 0 60px rgba(93,255,194,0.05);
    z-index: 0;
    animation: planetFloat 20s ease-in-out infinite alternate;
    overflow: hidden;
}

.planet::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-linear-gradient(
        -15deg,
        transparent 0px,
        transparent 18px,
        rgba(255,255,255,0.025) 18px,
        rgba(255,255,255,0.025) 20px
    );
}

.planet::after {
    content: '';
    position: absolute;
    top: 20%; left: -20%;
    width: 140%; height: 30%;
    background: rgba(133,183,235,0.06);
    border-radius: 50%;
    transform: rotate(-15deg);
}

@keyframes planetFloat {
    0%   { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-20px) rotate(5deg); }
}


/* ── Rocket ───────────────────────────────────────────────── */
.rocket {
    position: fixed;
    font-size: 48px;
    z-index: 1;
    animation: rocketFly 10s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(250,199,117,0.6));
    pointer-events: none;
    user-select: none;
}

@keyframes rocketFly {
    0%   { bottom: -80px; right: -80px; transform: rotate(-45deg); opacity: 0; }
    8%   { opacity: 1; }
    45%  { bottom: 60vh; right: 55vw; transform: rotate(-45deg); opacity: 1; }
    55%  { bottom: 70vh; right: 65vw; transform: rotate(-45deg); opacity: 0.8; }
    100% { bottom: 120vh; right: 110vw; transform: rotate(-45deg); opacity: 0; }
}

/* ── Shooting star ────────────────────────────────────────── */
.shooting-star {
    position: fixed;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}
.shooting-star::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 120px;
    height: 1px;
    background: linear-gradient(to left, rgba(255,255,255,0.8), transparent);
}

.shooting-star-1 {
    top: 20%; left: 80%;
    animation: shootingStar 7s linear 2s infinite;
}
.shooting-star-2 {
    top: 40%; left: 70%;
    animation: shootingStar 9s linear 5s infinite;
}
.shooting-star-3 {
    top: 10%; left: 60%;
    animation: shootingStar 11s linear 8s infinite;
}

@keyframes shootingStar {
    0%   { transform: translateX(0)   translateY(0)    scaleX(0); opacity: 0; }
    2%   { transform: translateX(0)   translateY(0)    scaleX(1); opacity: 1; }
    100% { transform: translateX(-70vw) translateY(50vh) scaleX(1); opacity: 0; }
}

/* ── Login card ───────────────────────────────────────────── */
.login-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 40px 20px;
}

.login-card {
    background: rgba(6, 28, 34, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(116, 255, 224, 0.15);
    border-radius: 24px;
    padding: 56px 52px;
    width: 100%;
    max-width: 440px;
    text-align: center;
    box-shadow:
        0 0 0 1px rgba(93,255,194,0.05),
        0 32px 64px rgba(0,0,0,0.5),
        0 0 80px rgba(93,255,194,0.04);
    animation: cardEntrance 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cardEntrance {
    0%   { opacity: 0; transform: translateY(30px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Logo ─────────────────────────────────────────────────── */
.login-syspro-logo {
    height: 40px;
    width: auto;
    display: block;
    margin: 0 auto 24px;
    filter: drop-shadow(0 0 12px rgba(116,255,224,0.35));
}

/* ── Divider ──────────────────────────────────────────────── */
.login-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--mc-cyan), transparent);
    margin: 0 auto 28px;
    border-radius: 2px;
}

/* ── Tagline ──────────────────────────────────────────────── */
.login-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--mc-text);
    margin-bottom: 8px;
}

.login-subtitle {
    font-size: 13px;
    color: var(--mc-text-muted);
    line-height: 1.6;
    margin-bottom: 36px;
}

/* ── Launch button ────────────────────────────────────────── */
.btn-launch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--mc-blue-primary) 0%, #0042e8 50%, var(--mc-blue) 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow:
        0 0 20px rgba(0,49,202,0.4),
        0 8px 24px rgba(0,0,0,0.3);
    animation: glowPulse 3s ease-in-out infinite;
}

.btn-launch::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
    border-radius: inherit;
}

.btn-launch:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 0 36px rgba(2,111,255,0.6),
        0 12px 32px rgba(0,0,0,0.4);
    animation-play-state: paused;
}

.btn-launch:active {
    transform: translateY(0) scale(0.99);
}

@keyframes glowPulse {
    0%   { box-shadow: 0 0 20px rgba(0,49,202,0.4), 0 8px 24px rgba(0,0,0,0.3); }
    50%  { box-shadow: 0 0 40px rgba(2,111,255,0.6), 0 8px 24px rgba(0,0,0,0.3); }
    100% { box-shadow: 0 0 20px rgba(0,49,202,0.4), 0 8px 24px rgba(0,0,0,0.3); }
}

.btn-launch-icon {
    font-size: 20px;
}

/* ── Footer note ──────────────────────────────────────────── */
.login-footer-note {
    margin-top: 24px;
    font-size: 11px;
    color: rgba(138,168,160,0.5);
    letter-spacing: 0.5px;
}

/* ── Telemetry Pods ───────────────────────────────────────── */
.tel-pod {
    position: fixed;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    animation: podFloat 7s ease-in-out infinite;
}

/* Corner positions */
.tel-pod-tl  { top: 12%;    left: 5%;  animation-delay:  0s;  }
.tel-pod-tr  { top: 12%;    right: 5%; animation-delay: -2.5s; }
.tel-pod-bl  { bottom: 14%; left: 5%;  animation-delay: -5s;  }
.tel-pod-br  { bottom: 14%; right: 5%; animation-delay: -1.5s; }

@keyframes podFloat {
    0%   { transform: translateY(0px);   }
    33%  { transform: translateY(-10px); }
    66%  { transform: translateY(-4px);  }
    100% { transform: translateY(0px);   }
}

/* Entrance animation */
.tel-pod { opacity: 0; animation: podFloat 7s ease-in-out infinite, podEntrance 0.8s ease forwards; }
.tel-pod-tl { animation-delay: 0s,   0.3s; }
.tel-pod-tr { animation-delay: -2.5s, 0.5s; }
.tel-pod-bl { animation-delay: -5s,  0.7s; }
.tel-pod-br { animation-delay: -1.5s, 0.9s; }

@keyframes podEntrance {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1);   }
}

/* ── Radar circle ──────────────────────────────────────────── */
.tel-radar {
    position: relative;
    width: 164px;
    height: 164px;
    border-radius: 50%;
    background: rgba(6, 28, 34, 0.88);
    border: 1.5px solid rgba(116, 255, 224, 0.25);
    box-shadow:
        0 0 0 1px rgba(116,255,224,0.06),
        0 0 24px rgba(116,255,224,0.08),
        inset 0 0 20px rgba(116,255,224,0.04);
    overflow: hidden;
    backdrop-filter: blur(12px);
}

/* Concentric range rings */
.tel-rings {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, transparent 28%, rgba(116,255,224,0.10) 29%, transparent 30%),
        radial-gradient(circle at 50% 50%, transparent 54%, rgba(116,255,224,0.07) 55%, transparent 56%),
        radial-gradient(circle at 50% 50%, transparent 80%, rgba(116,255,224,0.05) 81%, transparent 82%);
}

/* Cross-hair lines */
.tel-rings::before, .tel-rings::after {
    content: '';
    position: absolute;
    background: rgba(116,255,224,0.06);
}
.tel-rings::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.tel-rings::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }

/* Rotating sweep */
.tel-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(116,255,224,0.08) 330deg,
        rgba(116,255,224,0.35) 355deg,
        rgba(116,255,224,0.5)  360deg
    );
    animation: radarSpin 3.5s linear infinite;
}

.tel-sweep-blue {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(2,111,255,0.08) 330deg,
        rgba(2,111,255,0.35)  355deg,
        rgba(2,111,255,0.5)   360deg
    );
    animation: radarSpin 4s linear infinite;
}

.tel-sweep-amber {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(255,192,0,0.08) 330deg,
        rgba(255,192,0,0.35)  355deg,
        rgba(255,192,0,0.5)   360deg
    );
    animation: radarSpin 4.5s linear infinite reverse;
}

.tel-sweep-coral {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 300deg,
        rgba(255,107,53,0.08) 330deg,
        rgba(255,107,53,0.35)  355deg,
        rgba(255,107,53,0.5)   360deg
    );
    animation: radarSpin 5s linear infinite;
}

@keyframes radarSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Radar blips */
.tel-blip {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #74FFE0;
    box-shadow: 0 0 6px #74FFE0, 0 0 12px rgba(116,255,224,0.6);
    animation: blipPulse 2s ease-in-out infinite;
}

.tel-blip-1 { top: 28%; left: 60%; animation-delay: 0s; }
.tel-blip-2 { top: 55%; left: 32%; animation-delay: 0.8s; }
.tel-blip-3 { top: 35%; right: 28%; background: #026FFF; box-shadow: 0 0 6px #026FFF; animation-delay: 0.3s; }
.tel-blip-4 { top: 62%; left: 55%; background: #026FFF; box-shadow: 0 0 6px #026FFF; animation-delay: 1.1s; }
.tel-blip-5 { top: 30%; left: 38%; background: #FFC000; box-shadow: 0 0 6px #FFC000; animation-delay: 0.6s; }
.tel-blip-6 { top: 60%; left: 65%; background: #FFC000; box-shadow: 0 0 6px #FFC000; animation-delay: 1.4s; }
.tel-blip-7 { top: 42%; left: 30%; background: #FF6B35; box-shadow: 0 0 6px #FF6B35; animation-delay: 0.2s; }
.tel-blip-8 { top: 25%; left: 60%; background: #FF6B35; box-shadow: 0 0 6px #FF6B35; animation-delay: 1.0s; }

@keyframes blipPulse {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%       { opacity: 0.3; transform: scale(0.5); }
}

/* Center content */
.tel-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    z-index: 2;
}

.tel-icon {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(116,255,224,0.5));
}

.tel-value {
    font-size: 34px;
    font-weight: 800;
    color: var(--mc-cyan);
    line-height: 1;
    text-shadow: 0 0 20px rgba(116,255,224,0.6);
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
}

/* Override value colour per variant */
.tel-pod-tr .tel-value { color: #85B7EB; text-shadow: 0 0 16px rgba(2,111,255,0.6); }
.tel-pod-bl .tel-value { color: #FFC000; text-shadow: 0 0 16px rgba(255,192,0,0.6); }
.tel-pod-br .tel-value { color: #FF6B35; text-shadow: 0 0 16px rgba(255,107,53,0.6); }

/* Override radar border colour per variant */
.tel-pod-tr .tel-radar { border-color: rgba(2,111,255,0.25);   box-shadow: 0 0 0 1px rgba(2,111,255,0.05),   0 0 24px rgba(2,111,255,0.08);   }
.tel-pod-bl .tel-radar { border-color: rgba(255,192,0,0.25);   box-shadow: 0 0 0 1px rgba(255,192,0,0.05),   0 0 24px rgba(255,192,0,0.08);   }
.tel-pod-br .tel-radar { border-color: rgba(255,107,53,0.25);  box-shadow: 0 0 0 1px rgba(255,107,53,0.05),  0 0 24px rgba(255,107,53,0.08);  }

/* Labels */
.tel-label {
    font-size: 11px;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    color: #F5F6F6;
    text-align: center;
    text-shadow: 0 0 8px rgba(116,255,224,0.4);
}
.tel-pod-tr .tel-label { color: #F5F6F6; text-shadow: 0 0 8px rgba(133,183,235,0.4); }
.tel-pod-bl .tel-label { color: #F5F6F6; text-shadow: 0 0 8px rgba(255,192,0,0.4);   }
.tel-pod-br .tel-label { color: #F5F6F6; text-shadow: 0 0 8px rgba(255,107,53,0.4);  }

/* Live indicator */
.tel-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    color: var(--mc-cyan);
}
.tel-status-blue  { color: #85B7EB; }
.tel-status-amber { color: #FFC000; }
.tel-status-coral { color: #FF6B35; }

.tel-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mc-cyan);
    animation: dotBlink 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
.tel-dot-blue  { background: #85B7EB; }
.tel-dot-amber { background: #FFC000; }
.tel-dot-coral { background: #FF6B35; }

@keyframes dotBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.1; }
}

/* Hide pods on small screens where they'd overlap the card */
@media (max-width: 960px) {
    .tel-pod { display: none; }
}

/* ── Coordinates HUD element ──────────────────────────────── */
.hud-coords {
    position: fixed;
    bottom: 24px;
    right: 24px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    color: var(--mc-cyan);
    letter-spacing: 1px;
    z-index: 1;
    line-height: 2;
    text-align: right;
    animation: hudBlink 4s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(116,255,224,0.4);
}

@keyframes hudBlink {
    0%, 90%, 100% { opacity: 1; }
    95%            { opacity: 0.4; }
}

.hud-coords-left {
    position: fixed;
    bottom: 24px;
    left: 24px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    color: #85B7EB;
    letter-spacing: 1px;
    z-index: 1;
    line-height: 2;
    text-shadow: 0 0 8px rgba(133,183,235,0.4);
    animation: hudBlink 5s ease-in-out infinite reverse;
}