/* ═══════════════════════════════════════════════════════
   LOGIN RADAR DISPLAY & CRT EFFECTS
   Vintage monochrome CRT terminal with rotating radar
   ═══════════════════════════════════════════════════════ */

/* ── Green Phosphor Palette ──
   Primary:     #00FF88
   Bright:      #00FFAA
   Dim Grid:    rgba(0,255,136,0.15)
   Sweep Edge:  rgba(0,255,170,0.9)
   Glow:        rgba(0,255,136,0.3)
   Background:  #000a04
*/

/* ── CRT Scanline Overlay (full screen) ── */
#login-screen::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    pointer-events: none;
    z-index: 3;
    animation: crt-flicker 8s ease-in-out infinite;
}

/* CRT glow/bloom on the entire login screen */
#login-screen::after {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: radial-gradient(ellipse at center, rgba(0,255,136,0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

@keyframes crt-flicker {
    0%, 100% { opacity: 0.9; }
    3% { opacity: 0.85; }
    6% { opacity: 0.92; }
    50% { opacity: 0.88; }
    53% { opacity: 0.95; }
    97% { opacity: 0.9; }
}

/* Override login screen background for CRT feel */
#login-screen {
    background: radial-gradient(ellipse at center, #001a0e 0%, #000a04 50%, #000000 100%) !important;
    overflow: hidden;
}

/* ── Radar Container ── */
.login-radar-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    z-index: 0;
    opacity: 0.18;
    pointer-events: none;
}

/* ── Radar Display Circle ── */
.login-radar {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 136, 0.4);
    background: radial-gradient(circle, rgba(0, 255, 136, 0.03) 0%, transparent 70%);
    box-shadow:
        0 0 40px rgba(0, 255, 136, 0.1),
        inset 0 0 60px rgba(0, 255, 136, 0.05);
    overflow: hidden;
}

/* ── Concentric Range Rings ── */
.login-radar .range-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 136, 0.12);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login-radar .range-ring:nth-child(1) {
    width: 25%;
    height: 25%;
}
.login-radar .range-ring:nth-child(2) {
    width: 50%;
    height: 50%;
}
.login-radar .range-ring:nth-child(3) {
    width: 75%;
    height: 75%;
}
.login-radar .range-ring:nth-child(4) {
    width: 100%;
    height: 100%;
    border-color: rgba(0, 255, 136, 0.25);
}

/* ── Crosshair Lines ── */
.login-radar .crosshair-h,
.login-radar .crosshair-v {
    position: absolute;
    background: rgba(0, 255, 136, 0.1);
}

.login-radar .crosshair-h {
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
}

.login-radar .crosshair-v {
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
}

/* ── Rotating Sweep Arm ── */
.login-radar .sweep {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 340deg,
        rgba(0, 255, 170, 0.08) 345deg,
        rgba(0, 255, 170, 0.15) 350deg,
        rgba(0, 255, 170, 0.35) 355deg,
        rgba(0, 255, 170, 0.6) 358deg,
        rgba(0, 255, 255, 0.85) 360deg
    );
    animation: radar-sweep 4s linear infinite;
}

@keyframes radar-sweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ── Sweep Edge Glow Line ── */
.login-radar .sweep::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 255, 170, 0.8), transparent);
    transform-origin: left center;
    box-shadow: 0 0 8px rgba(0, 255, 170, 0.6);
}

/* ── Center Dot ── */
.login-radar .center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: #00FF88;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px #00FF88, 0 0 16px rgba(0, 255, 136, 0.5);
    z-index: 2;
}

/* ── Radar Blips ── */
.radar-blip {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00FFAA;
    border-radius: 50%;
    box-shadow: 0 0 6px #00FFAA, 0 0 12px rgba(0, 255, 170, 0.4);
    animation: blip-pulse 2.5s ease-out forwards;
    z-index: 1;
}

@keyframes blip-pulse {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 6px #00FFAA, 0 0 12px rgba(0, 255, 170, 0.6);
    }
    30% {
        opacity: 0.9;
        transform: scale(1.8);
        box-shadow: 0 0 10px #00FFAA, 0 0 20px rgba(0, 255, 170, 0.4);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
        box-shadow: none;
    }
}

/* Announcement-triggered blip (brighter, larger) */
.radar-blip.announcement-blip {
    width: 6px;
    height: 6px;
    background: #00FFCC;
    box-shadow: 0 0 10px #00FFCC, 0 0 20px rgba(0, 255, 204, 0.5);
    animation: announcement-blip-pulse 3s ease-out forwards;
}

@keyframes announcement-blip-pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    20% {
        opacity: 1;
        transform: scale(2.5);
        box-shadow: 0 0 14px #00FFCC, 0 0 28px rgba(0, 255, 204, 0.5);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* ── Compass Tick Marks ── */
.login-radar .compass-label {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 8px;
    color: rgba(0, 255, 136, 0.3);
    letter-spacing: 1px;
    z-index: 2;
}
.login-radar .compass-label.north { top: 4px; left: 50%; transform: translateX(-50%); }
.login-radar .compass-label.south { bottom: 4px; left: 50%; transform: translateX(-50%); }
.login-radar .compass-label.east { right: 6px; top: 50%; transform: translateY(-50%); }
.login-radar .compass-label.west { left: 6px; top: 50%; transform: translateY(-50%); }

/* ═══════════════════════════════════════════════════════
   LOGIN ANNOUNCEMENTS
   ═══════════════════════════════════════════════════════ */

/* ── Intelligence Feed Ticker (scrolling top bar) ── */
.login-intel-ticker {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: rgba(0, 10, 4, 0.9);
    border-bottom: 1px solid rgba(0, 255, 136, 0.25);
    overflow: hidden;
    z-index: 5;
    display: flex;
    align-items: center;
}

.login-intel-ticker .ticker-label {
    background: rgba(0, 255, 136, 0.15);
    color: #00FF88;
    font-family: 'Courier New', monospace;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 0 12px;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    border-right: 1px solid rgba(0, 255, 136, 0.2);
    flex-shrink: 0;
    text-shadow: 0 0 4px rgba(0, 255, 136, 0.5);
}

.login-intel-ticker .ticker-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.login-intel-ticker .ticker-scroll {
    display: flex;
    gap: 60px;
    animation: ticker-scroll-anim 30s linear infinite;
    white-space: nowrap;
    padding-left: 100%;
}

.login-intel-ticker .ticker-item {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #00DD77;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: 0 0 3px rgba(0, 255, 136, 0.3);
}

.login-intel-ticker .ticker-item .ticker-sep {
    color: rgba(0, 255, 136, 0.3);
    margin: 0 12px;
}

@keyframes ticker-scroll-anim {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Featured Card (High Command Bulletin) ── */
.login-featured-card {
    position: relative;
    max-width: 600px;
    width: 90%;
    margin: 12px auto 0;
    background: rgba(0, 10, 4, 0.85);
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 16px 20px;
    z-index: 5;
    font-family: 'Courier New', monospace;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.08), inset 0 0 30px rgba(0, 255, 136, 0.02);
}

.login-featured-card .featured-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 255, 136, 0.15);
}

.login-featured-card .featured-category {
    font-size: 9px;
    letter-spacing: 2px;
    color: #00FF88;
    text-transform: uppercase;
    text-shadow: 0 0 4px rgba(0, 255, 136, 0.4);
}

.login-featured-card .featured-priority {
    font-size: 9px;
    letter-spacing: 1px;
    color: rgba(0, 255, 136, 0.5);
}

.login-featured-card .featured-title {
    font-size: 13px;
    font-weight: bold;
    color: #FFD700;
    letter-spacing: 1px;
    margin-bottom: 6px;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.3);
}

.login-featured-card .featured-content {
    font-size: 11px;
    color: #00DD77;
    line-height: 1.5;
    letter-spacing: 0.5px;
}

.login-featured-card .featured-cta {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 16px;
    border: 1px solid #FFD700;
    color: #FFD700;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    transition: all 0.2s;
}

.login-featured-card .featured-cta:hover {
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* ── Visual Style Variants ── */
.login-featured-card.style-urgent {
    border-color: rgba(255, 107, 107, 0.5);
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.1);
}
.login-featured-card.style-urgent .featured-category {
    color: #FF6B6B;
    text-shadow: 0 0 4px rgba(255, 107, 107, 0.4);
}
.login-featured-card.style-urgent .featured-content {
    color: #FF9999;
}

.login-featured-card.style-intel {
    border-color: rgba(100, 180, 255, 0.4);
    box-shadow: 0 0 20px rgba(100, 180, 255, 0.08);
}
.login-featured-card.style-intel .featured-category {
    color: #64B4FF;
    text-shadow: 0 0 4px rgba(100, 180, 255, 0.4);
}
.login-featured-card.style-intel .featured-content {
    color: #88CCFF;
}

.login-featured-card.style-victory {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}
.login-featured-card.style-victory .featured-category {
    color: #FFD700;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
}
.login-featured-card.style-victory .featured-content {
    color: #FFE066;
}

/* ── Bulletin List (stacked list below terminal) ── */
.login-bulletin-list {
    position: relative;
    max-width: 600px;
    width: 90%;
    margin: 12px auto 0;
    z-index: 5;
    font-family: 'Courier New', monospace;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.login-bulletin-item {
    background: rgba(0, 10, 4, 0.8);
    border: 1px solid rgba(0, 255, 136, 0.2);
    padding: 8px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.login-bulletin-item .bulletin-marker {
    color: #00FF88;
    font-size: 10px;
    margin-top: 2px;
    flex-shrink: 0;
    text-shadow: 0 0 4px rgba(0, 255, 136, 0.5);
}

.login-bulletin-item .bulletin-text {
    flex: 1;
}

.login-bulletin-item .bulletin-title {
    font-size: 11px;
    font-weight: bold;
    color: #00FF88;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.login-bulletin-item .bulletin-detail {
    font-size: 10px;
    color: rgba(0, 221, 119, 0.7);
    margin-top: 2px;
    line-height: 1.4;
}

.login-bulletin-item .bulletin-cta {
    color: #FFD700;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none;
    border: 1px solid rgba(255, 215, 0, 0.4);
    padding: 2px 8px;
    margin-top: 4px;
    display: inline-block;
    transition: all 0.2s;
}

.login-bulletin-item .bulletin-cta:hover {
    background: rgba(255, 215, 0, 0.1);
}

/* Visual style variants for bulletin items */
.login-bulletin-item.style-urgent {
    border-color: rgba(255, 107, 107, 0.3);
}
.login-bulletin-item.style-urgent .bulletin-marker,
.login-bulletin-item.style-urgent .bulletin-title {
    color: #FF6B6B;
}

.login-bulletin-item.style-intel {
    border-color: rgba(100, 180, 255, 0.3);
}
.login-bulletin-item.style-intel .bulletin-marker,
.login-bulletin-item.style-intel .bulletin-title {
    color: #64B4FF;
}

.login-bulletin-item.style-victory {
    border-color: rgba(255, 215, 0, 0.3);
}
.login-bulletin-item.style-victory .bulletin-marker,
.login-bulletin-item.style-victory .bulletin-title {
    color: #FFD700;
}

/* ── Ensure retro-terminal sits above radar ── */
#login-screen .retro-terminal {
    position: relative;
    z-index: 2;
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .login-radar-container {
        width: 300px;
        height: 300px;
    }
    .login-featured-card {
        padding: 12px 14px;
    }
    .login-bulletin-list {
    }
}