/* =====================================================
   HOME PAGE — Terminal Screen Design
   ===================================================== */

/* Override page background */
html,
body {
    background: #050810 !important;
    margin: 0;
}

html {
    scroll-behavior: auto !important;
}

/* ── Hacker typing background ── */
.hacker-bg {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 30%;
    max-width: 420px;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 10px 20px;
}

.hacker-bg .hacker-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.hacker-bg .hacker-line {
    white-space: pre;
    color: rgba(0, 255, 136, 0.06);
}

.hacker-bg .hacker-line.cmd {
    color: rgba(0, 255, 136, 0.10);
}

.hacker-bg .hacker-line.active {
    color: rgba(0, 255, 136, 0.14);
    border-right: 1px solid rgba(0, 255, 136, 0.25);
    padding-right: 2px;
}

.hacker-bg .hacker-line.active.cmd {
    color: rgba(0, 255, 136, 0.18);
}

/* ── Defender typing background (right) ── */
.defender-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30%;
    max-width: 420px;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: 10px 20px;
}

.defender-bg .defender-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.defender-bg .defender-line {
    white-space: pre;
    color: rgba(0, 150, 255, 0.06);
}

.defender-bg .defender-line.cmd {
    color: rgba(0, 150, 255, 0.10);
}

.defender-bg .defender-line.alert {
    color: rgba(255, 60, 60, 0.10);
}

.defender-bg .defender-line.active {
    color: rgba(0, 150, 255, 0.14);
    border-right: 1px solid rgba(0, 150, 255, 0.25);
    padding-right: 2px;
}

.defender-bg .defender-line.active.cmd {
    color: rgba(0, 150, 255, 0.18);
}

.defender-bg .defender-line.active.alert {
    color: rgba(255, 60, 60, 0.16);
}

/* Keep terminal-screen above the background */
.terminal-screen {
    position: relative;
    z-index: 1;
}

/* Let container centre the terminal box */
body .container {
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.terminal-screen {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    border: 1px solid rgba(0, 255, 213, 0.25);
    border-radius: 10px;
    overflow: visible;
    background: rgba(3, 4, 10, 0.95);
    box-shadow:
        0 0 30px rgba(0, 255, 213, 0.06),
        0 0 80px rgba(106, 0, 255, 0.04);
    animation: fadeInUp 0.6s ease-out;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 40px);
}

/* Chrome bar (dots + title) */
.terminal-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    height: 42px;
    background: rgba(3, 4, 10, 0.98);
    border-bottom: 1px solid rgba(0, 255, 213, 0.12);
    flex-shrink: 0;
    z-index: 100;
}

/* ── User menu: inside the chrome bar, pushed to the right ── */
#user-menu {
    margin-left: auto !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    z-index: 10000 !important;
}

.user-menu-signin-btn {
    background: transparent !important;
    border: 1px solid rgba(0, 255, 213, 0.3) !important;
    color: var(--cyan, #00ffd5) !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.user-menu-signin-btn:hover {
    background: rgba(0, 255, 213, 0.08) !important;
    box-shadow: none !important;
    transform: none !important;
}

.user-menu-button {
    background: transparent !important;
    border: 1px solid rgba(0, 255, 213, 0.25) !important;
    color: var(--cyan, #00ffd5) !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    gap: 6px !important;
}

.user-menu-button:hover {
    border-color: rgba(0, 255, 213, 0.5) !important;
    background: rgba(0, 255, 213, 0.06) !important;
}

.user-menu-avatar {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
    background: rgba(0, 255, 213, 0.15) !important;
    color: var(--cyan, #00ffd5) !important;
    border: 1px solid rgba(0, 255, 213, 0.3) !important;
}

.user-menu-dropdown {
    background: rgba(3, 4, 10, 0.98) !important;
    border: 1px solid rgba(0, 255, 213, 0.2) !important;
    border-radius: 4px !important;
    font-family: 'Courier New', Courier, monospace !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

.user-menu-header {
    border-bottom-color: rgba(0, 255, 213, 0.15) !important;
    padding: 12px 14px !important;
}

.user-menu-name {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 13px !important;
    color: var(--cyan, #00ffd5) !important;
}

.user-menu-email {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 12px !important;
}

.user-menu-link {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    color: var(--text-muted, #9fb3c6) !important;
}

.user-menu-link:hover {
    background: rgba(0, 255, 213, 0.06) !important;
    color: var(--cyan, #00ffd5) !important;
}

.user-menu-divider {
    border-top-color: rgba(0, 255, 213, 0.15) !important;
}

.user-menu-logout {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
}

.terminal-dots {
    display: flex;
    gap: 7px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

a.dot-red {
    cursor: pointer;
    transition: box-shadow 0.2s;
}

a.dot-red:hover {
    box-shadow: 0 0 6px rgba(255, 95, 87, 0.6);
}

.dot-red {
    background: #ff5f57;
}

.dot-yellow {
    background: #febc2e;
}

.dot-green {
    background: #28c840;
}

.terminal-title-bar {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

/* Body */
.terminal-body {
    padding: 24px 32px 36px;
    font-family: 'Courier New', Courier, monospace;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 213, 0.25) transparent;
}

.terminal-body::-webkit-scrollbar {
    width: 6px;
}

.terminal-body::-webkit-scrollbar-track {
    background: transparent;
}

.terminal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 213, 0.2);
    border-radius: 3px;
}

.terminal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 213, 0.4);
}

/* Typed-looking lines */
.terminal-line {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.5;
}

.system-line {
    color: var(--accent);
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.tagline-line {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 8px;
}

/* Hero section: centred banner + tagline */
.terminal-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0 24px;
}

.terminal-hero .ascii-banner {
    text-align: left;
    font-size: min(0.42rem, calc((100vw - 100px) / 78));
}

.terminal-hero .system-line,
.terminal-hero .tagline-line {
    text-align: center;
    width: 100%;
}

/* ASCII banner */

/* ── Neon sign container ── */
.neon-sign {
    position: relative;
    display: inline-block;
    padding: 36px 52px;
    margin: 10px 0 6px;
}

/* ambient wall glow behind the sign */
.neon-sign::before {
    content: '';
    position: absolute;
    inset: -40px;
    background: radial-gradient(ellipse at center,
            rgba(199, 146, 234, 0.06) 0%,
            transparent 65%);
    pointer-events: none;
    z-index: -1;
}

/* ── Tube base: white-hot core + layered purple glow ── */
.neon-sign>.ntube {
    position: absolute;
    border-radius: 3px;
    background: #f0e6ff;
    box-shadow:
        0 0 2px #fff,
        0 0 6px rgba(255, 255, 255, 0.7),
        0 0 10px #d4a8f5,
        0 0 20px #c792ea,
        0 0 36px rgba(155, 77, 202, 0.4),
        0 0 52px rgba(123, 44, 168, 0.18);
}

/* horizontal tubes */
.neon-sign>.ntube-h {
    height: 5px;
}

/* vertical tubes */
.neon-sign>.ntube-v {
    width: 5px;
}

/* ── Corner arcs ── */
.neon-sign>.ncorner {
    position: absolute;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 5px solid #f0e6ff;
    background: transparent;
    box-shadow:
        0 0 2px #fff,
        0 0 6px rgba(255, 255, 255, 0.7),
        0 0 10px #d4a8f5,
        0 0 20px #c792ea,
        0 0 36px rgba(155, 77, 202, 0.4);
}

.nc-tl {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 14px;
}

.nc-tr {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 14px;
}

.nc-bl {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 14px;
}

.nc-br {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 14px;
}

/* ── Segment positions (offset by 14px for corner arcs) ── */
/* Top side: gap at ~42% */
.nt-tl {
    top: 0;
    left: 14px;
    width: calc(42% - 2px - 14px);
}

.nt-tr {
    top: 0;
    right: 14px;
    width: calc(58% - 2px - 14px);
}

/* Bottom side: gap at ~64% */
.nt-bl {
    bottom: 0;
    left: 14px;
    width: calc(64% - 2px - 14px);
}

.nt-br {
    bottom: 0;
    right: 14px;
    width: calc(36% - 2px - 14px);
}

/* Left side: gap at ~55% */
.nt-lt {
    left: 0;
    top: 14px;
    height: calc(55% - 2px - 14px);
}

.nt-lb {
    left: 0;
    bottom: 14px;
    height: calc(45% - 2px - 14px);
}

/* Right side: gap at ~46% */
.nt-rt {
    right: 0;
    top: 14px;
    height: calc(46% - 2px - 14px);
}

.nt-rb {
    right: 0;
    bottom: 14px;
    height: calc(54% - 2px - 14px);
}

/* ── Broken tube: top-right segment (rapid buzz) ── */
.nt-tr {
    animation: tube-buzz 6s ease-in-out infinite;
}

/* ── Broken tube: right-bottom segment (slow dim) ── */
.nt-rb {
    animation: tube-dim 9s ease-in-out infinite;
}

/* ── Light-shadow overlays ── */
.neon-sign>.nshadow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 2px;
}

/* top-right tube illuminates upper-right region */
.nshadow-tr {
    background: radial-gradient(ellipse 70% 80% at 78% 0%,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.7) 20%,
            rgba(0, 0, 0, 0.35) 45%,
            transparent 72%);
    opacity: 0;
    animation: shadow-buzz 6s ease-in-out infinite;
}

/* right-bottom tube illuminates lower-right region */
.nshadow-rb {
    background: radial-gradient(ellipse 65% 75% at 100% 72%,
            rgba(0, 0, 0, 0.9) 0%,
            rgba(0, 0, 0, 0.65) 18%,
            rgba(0, 0, 0, 0.3) 40%,
            transparent 68%);
    opacity: 0;
    animation: shadow-dim 9s ease-in-out infinite;
}

/* shadow synced to tube-buzz timings */
@keyframes shadow-buzz {

    0%,
    28%,
    35%,
    66%,
    71%,
    100% {
        opacity: 0;
    }

    29% {
        opacity: 1;
    }

    30% {
        opacity: 0.3;
    }

    30.5% {
        opacity: 1;
    }

    31.2% {
        opacity: 0.2;
    }

    31.6% {
        opacity: 1;
    }

    32.5% {
        opacity: 0;
    }

    67.5% {
        opacity: 1;
    }

    68.2% {
        opacity: 0.4;
    }

    68.6% {
        opacity: 1;
    }

    69.4% {
        opacity: 0;
    }
}

/* shadow synced to tube-dim timings */
@keyframes shadow-dim {

    0%,
    42%,
    56%,
    100% {
        opacity: 0;
    }

    44% {
        opacity: 0.5;
    }

    47% {
        opacity: 0.85;
    }

    50% {
        opacity: 1;
    }

    52% {
        opacity: 0.7;
    }

    54% {
        opacity: 0.3;
    }
}

/* buzz: rapid micro-flicker cluster, like arcing contacts */
@keyframes tube-buzz {

    0%,
    28%,
    35%,
    66%,
    71%,
    100% {
        opacity: 1;
        background: #f0e6ff;
        box-shadow:
            0 0 2px #fff,
            0 0 6px rgba(255, 255, 255, 0.7),
            0 0 10px #d4a8f5,
            0 0 20px #c792ea,
            0 0 36px rgba(155, 77, 202, 0.4),
            0 0 52px rgba(123, 44, 168, 0.18);
    }

    /* ── first buzz cluster ── */
    29% {
        opacity: 0.06;
        background: rgba(90, 26, 122, 0.4);
        box-shadow: none;
    }

    30% {
        opacity: 0.65;
        background: #c792ea;
        box-shadow: 0 0 3px #c792ea, 0 0 8px rgba(155, 77, 202, 0.3);
    }

    30.5% {
        opacity: 0.04;
        background: rgba(90, 26, 122, 0.3);
        box-shadow: none;
    }

    31.2% {
        opacity: 0.8;
        background: #d4a8f5;
        box-shadow: 0 0 2px #fff, 0 0 6px #c792ea;
    }

    31.6% {
        opacity: 0.08;
        background: rgba(90, 26, 122, 0.35);
        box-shadow: none;
    }

    32.5% {
        opacity: 1;
        background: #f0e6ff;
        box-shadow:
            0 0 2px #fff,
            0 0 6px rgba(255, 255, 255, 0.7),
            0 0 10px #d4a8f5,
            0 0 20px #c792ea,
            0 0 36px rgba(155, 77, 202, 0.4),
            0 0 52px rgba(123, 44, 168, 0.18);
    }

    /* ── second buzz cluster ── */
    67.5% {
        opacity: 0.1;
        background: rgba(90, 26, 122, 0.4);
        box-shadow: none;
    }

    68.2% {
        opacity: 0.5;
        background: #b07ad0;
        box-shadow: 0 0 3px rgba(199, 146, 234, 0.4);
    }

    68.6% {
        opacity: 0.06;
        background: rgba(90, 26, 122, 0.3);
        box-shadow: none;
    }

    69.4% {
        opacity: 1;
        background: #f0e6ff;
        box-shadow:
            0 0 2px #fff,
            0 0 6px rgba(255, 255, 255, 0.7),
            0 0 10px #d4a8f5,
            0 0 20px #c792ea,
            0 0 36px rgba(155, 77, 202, 0.4),
            0 0 52px rgba(123, 44, 168, 0.18);
    }
}

/* dim: slow fade-out and gradual reignition */
@keyframes tube-dim {

    0%,
    42%,
    56%,
    100% {
        opacity: 1;
        background: #f0e6ff;
        box-shadow:
            0 0 2px #fff,
            0 0 6px rgba(255, 255, 255, 0.7),
            0 0 10px #d4a8f5,
            0 0 20px #c792ea,
            0 0 36px rgba(155, 77, 202, 0.4),
            0 0 52px rgba(123, 44, 168, 0.18);
    }

    44% {
        opacity: 0.6;
        background: #c792ea;
        box-shadow: 0 0 3px #c792ea, 0 0 10px rgba(155, 77, 202, 0.3);
    }

    47% {
        opacity: 0.2;
        background: rgba(155, 77, 202, 0.5);
        box-shadow: 0 0 2px rgba(155, 77, 202, 0.15);
    }

    50% {
        opacity: 0.15;
        background: rgba(90, 26, 122, 0.4);
        box-shadow: none;
    }

    52% {
        opacity: 0.45;
        background: #9b4dca;
        box-shadow: 0 0 2px #9b4dca;
    }

    54% {
        opacity: 0.75;
        background: #c792ea;
        box-shadow: 0 0 3px #c792ea, 0 0 10px rgba(155, 77, 202, 0.3);
    }
}

.ascii-banner {
    color: var(--cyan);
    font-family: 'Courier New', Courier, monospace;
    font-size: min(0.55rem, calc((100vw - 100px) / 78));
    line-height: 1.15;
    margin: 0;
    padding: 0;
    white-space: pre;
    overflow: hidden;
}

/* =====================================================
   Section ASCII banners (e.g. Essentials / Hacking)
   ===================================================== */

.section-ascii {
    color: var(--accent);
    font-family: 'Courier New', Courier, monospace;
    font-size: min(0.42rem, calc((100vw - 100px) / 78));
    line-height: 1.15;
    margin: 4px 0 0 0;
    padding: 0;
    white-space: pre;
    overflow: hidden;
    opacity: 0.7;
}

/* =====================================================
   Cascading nav cards
   ===================================================== */

.terminal-nav-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

/* ── Tron light border effect ── */
@keyframes tron-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.terminal-nav-card {
    display: block;
    position: relative;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    padding: 20px 24px;
    background: transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    z-index: 0;
}

.terminal-nav-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    aspect-ratio: 1;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            transparent 45deg,
            rgba(0, 255, 213, 0.02) 52deg,
            rgba(0, 255, 213, 0.04) 58deg,
            rgba(0, 255, 213, 0.08) 64deg,
            rgba(0, 255, 213, 0.18) 70deg,
            rgba(0, 255, 213, 0.4) 76deg,
            #00ffd5 80deg,
            rgba(0, 255, 213, 0.25) 83deg,
            rgba(0, 255, 213, 0.06) 87deg,
            transparent 92deg,
            transparent 225deg,
            rgba(0, 255, 213, 0.02) 232deg,
            rgba(0, 255, 213, 0.04) 238deg,
            rgba(0, 255, 213, 0.08) 244deg,
            rgba(0, 255, 213, 0.18) 250deg,
            rgba(0, 255, 213, 0.4) 256deg,
            #00ffd5 260deg,
            rgba(0, 255, 213, 0.25) 263deg,
            rgba(0, 255, 213, 0.06) 267deg,
            transparent 272deg,
            transparent 360deg);
    animation: tron-spin 4s linear infinite;
    z-index: -2;
    pointer-events: none;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.terminal-nav-card::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 6px;
    background: var(--bg, #03040a);
    z-index: -1;
    pointer-events: none;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

.terminal-nav-card:hover {
    box-shadow: 0 0 30px rgba(0, 255, 213, 0.15), 0 0 60px rgba(0, 255, 213, 0.05);
    transform: translateX(6px);
}

.terminal-nav-card:hover::before {
    filter: brightness(2) drop-shadow(0 0 6px rgba(0, 255, 213, 0.4));
}

.terminal-nav-card:hover::after {
    background: rgba(3, 8, 20, 0.95);
    box-shadow: inset 0 0 30px rgba(0, 255, 213, 0.05);
}

@media (prefers-reduced-motion: reduce) {
    .terminal-nav-card::before {
        animation: none;
        background: rgba(0, 255, 213, 0.12);
    }
}

/* Card ASCII art */
.card-ascii {
    color: var(--cyan);
    font-family: 'Courier New', Courier, monospace;
    font-size: min(0.48rem, calc((100vw - 140px) / 78));
    line-height: 1.15;
    margin: 0 0 10px 0;
    padding: 0;
    white-space: pre;
    overflow: hidden;
}

.terminal-nav-card:hover .card-ascii {
    color: var(--accent);
}

/* Description */
.card-desc {
    color: var(--text-muted);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.card-path-link {
    color: var(--text-muted);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    margin: 0 0 8px 0;
}

.card-path-link a {
    color: #00d4ff;
    text-decoration: none;
}

.card-path-link a:hover {
    text-decoration: underline;
}

/* Fake prompt at bottom of card */
.card-prompt {
    display: block;
    color: var(--accent);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
}

.cursor-blink {
    animation: blink 1s step-end infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Completion badge — positioned top-right of card, beside ASCII art */

/* Footer links inside terminal */
.terminal-footer {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 12px 0 4px;
    flex-wrap: wrap;
}

.terminal-footer a {
    color: var(--text-muted);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.terminal-footer a:hover {
    color: var(--accent);
}

.completion-badge {
    position: absolute;
    top: 14px;
    right: 18px;
    color: #00ff88;
    font-size: 0.82rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
    border: 1px solid rgba(0, 255, 136, 0.3);
    padding: 3px 10px;
    border-radius: 4px;
    background: rgba(0, 255, 136, 0.06);
}

/* Offset when a tier badge (e.g. super-user) is also present on the
   same card. The tier badge occupies the top-right corner, so the
   completion badge sits directly below it. */
.completion-badge.completion-badge-offset {
    top: 46px;
}

/* Super User tier badge for gated content */
.tier-badge {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 0.78rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 4px;
    z-index: 2;
}

.super-badge {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.06);
}

/* Free tier badge */
.free-badge {
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
    border: 1px solid rgba(0, 255, 136, 0.3);
    background: rgba(0, 255, 136, 0.06);
}

/* Home button in chrome bar */
.terminal-home-btn {
    margin-left: 12px;
    color: var(--text-muted, #7a8a9e);
    font-size: 1rem;
    text-decoration: none;
    padding: 0 8px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.terminal-home-btn:hover {
    color: var(--accent, #00ffd5);
}

/* Coming soon card (non-clickable) */
.coming-soon-card {
    position: relative;
    display: block;
    border: 1px solid rgba(0, 255, 213, 0.1);
    border-radius: 8px;
    padding: 28px 24px 18px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    cursor: default;
    opacity: 0.6;
}

.coming-soon-card .card-ascii {
    color: var(--text-muted, #7a8a9e);
    font-size: min(0.36rem, calc((100vw - 100px) / 100));
    line-height: 1.15;
    overflow-x: auto;
    white-space: pre;
}

.coming-soon-card .card-desc {
    color: var(--text-muted, #7a8a9e);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 12px 0 0;
}

.coming-soon-card .card-prompt {
    display: block;
    margin-top: 12px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    color: var(--text-muted, #7a8a9e);
    opacity: 0.6;
}

/* Dim gated cards slightly */
.terminal-nav-card[data-tier="super"] .card-ascii {
    opacity: 0.5;
}

.terminal-nav-card[data-tier="super"] .card-desc {
    opacity: 0.7;
}

/* Card leaderboard toggle button */
.card-lb-toggle {
    position: absolute;
    bottom: 14px;
    right: 18px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.72rem;
    color: var(--cyan, #00ffd5);
    letter-spacing: 1px;
    cursor: pointer;
    padding: 3px 10px;
    border: 1px solid rgba(0, 255, 213, 0.2);
    border-radius: 4px;
    background: rgba(0, 255, 213, 0.04);
    transition: all 0.2s;
    z-index: 2;
}

.card-lb-toggle:hover {
    background: rgba(0, 255, 213, 0.1);
    border-color: rgba(0, 255, 213, 0.4);
}

/* Card leaderboard — hidden by default, pops out as overlay */
.card-lb-box {
    display: none;
    position: absolute;
    bottom: 14px;
    right: 18px;
    width: 280px;
    border: 1px solid rgba(0, 255, 213, 0.2);
    border-radius: 8px;
    background: #0a0e1a;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 255, 213, 0.05);
    z-index: 10;
}

.card-lb-box.open {
    display: block;
}

.card-lb-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(10, 14, 39, 0.95);
    border-bottom: 1px solid rgba(0, 255, 213, 0.12);
}

.card-lb-chrome .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.card-lb-chrome .dot-red {
    background: #ff5f56;
}

.card-lb-close {
    cursor: pointer;
}

.card-lb-chrome .dot-yellow {
    background: #ffbd2e;
}

.card-lb-chrome .dot-green {
    background: #27c93f;
}

.card-lb-box-title {
    flex: 1;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.65rem;
    color: var(--text-muted, #9fb3c6);
    letter-spacing: 1px;
}

.card-lb-body {
    padding: 12px 14px;
}

.card-lb-heading {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    color: var(--cyan, #00ffd5);
    letter-spacing: 2px;
    margin-bottom: 8px;
    opacity: 0.85;
}

.card-lb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.78rem;
    line-height: 1.6;
}

.card-lb-list li {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted, #9fb3c6);
    padding: 1px 0;
}

.card-lb-list li .lb-rank {
    color: var(--cyan, #00ffd5);
    min-width: 24px;
}

.card-lb-list li .lb-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
}

.card-lb-list li .lb-time {
    white-space: nowrap;
    color: var(--accent, #00ffd5);
}

/* =====================================================
   Responsive
   ===================================================== */

@media (max-width: 640px) {
    body .container {
        padding: 8px;
    }

    .terminal-screen {
        height: calc(100vh - 16px);
        border-radius: 8px;
    }

    .terminal-body {
        padding: 16px 12px 24px;
    }

    .terminal-hero {
        padding: 20px 0 16px;
    }

    .terminal-nav-card {
        padding: 14px 12px;
    }

    .terminal-chrome {
        padding: 8px 12px;
        height: 36px;
    }

    .terminal-title-bar {
        font-size: 0.75rem;
    }

    /* Hide hacker/defender backgrounds on small screens */
    .hacker-bg,
    .defender-bg {
        display: none;
    }
}

@media (min-width: 641px) and (max-width: 960px) {
    body .container {
        padding: 12px;
    }

    .terminal-screen {
        height: calc(100vh - 24px);
    }

    .ascii-banner {
        font-size: min(0.48rem, calc((100vw - 100px) / 78));
    }

    .card-ascii {
        font-size: min(0.42rem, calc((100vw - 140px) / 78));
    }

    /* Reduce hacker/defender width on tablets */
    .hacker-bg,
    .defender-bg {
        width: 20%;
        max-width: 220px;
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    body .container {
        padding: 4px;
    }

    .terminal-screen {
        height: calc(100vh - 8px);
        border-radius: 6px;
    }

    .terminal-body {
        padding: 10px 8px 16px;
    }

    .terminal-hero {
        padding: 12px 0 10px;
    }

    .terminal-hero .ascii-banner {
        font-size: min(0.3rem, calc((100vw - 40px) / 78));
    }

    .terminal-nav-card {
        padding: 10px 8px;
    }

    .card-ascii {
        font-size: min(0.3rem, calc((100vw - 40px) / 78));
    }

    .card-desc {
        font-size: 0.78rem;
    }

    .card-prompt {
        font-size: 0.72rem;
    }

    .terminal-chrome {
        padding: 6px 8px;
        height: 32px;
        gap: 8px;
    }

    .terminal-title-bar {
        font-size: 0.65rem;
    }

    .dot {
        width: 10px;
        height: 10px;
    }

    .neon-sign {
        padding: 20px 24px;
    }

    .completion-badge {
        font-size: 0.7rem;
        padding: 2px 6px;
        top: 8px;
        right: 8px;
    }

    .card-lb-toggle {
        font-size: 0.65rem;
        padding: 2px 6px;
        bottom: 8px;
        right: 8px;
    }

    .card-lb-box {
        width: 220px;
        right: 8px;
        bottom: 8px;
    }

    .terminal-footer {
        gap: 12px;
        padding: 8px 0 4px;
    }

    .terminal-footer a {
        font-size: 0.72rem;
    }

    .section-ascii {
        font-size: min(0.3rem, calc((100vw - 40px) / 78));
    }

    .system-line {
        font-size: 0.82rem;
    }

    .tagline-line {
        font-size: 0.82rem;
    }
}

@media (max-width: 360px) {

    .terminal-hero .ascii-banner,
    .card-ascii,
    .section-ascii {
        font-size: min(0.24rem, calc((100vw - 24px) / 78));
    }

    .neon-sign {
        padding: 14px 16px;
        transform: scale(0.85);
        transform-origin: center;
    }

    .card-desc {
        font-size: 0.72rem;
    }

    .terminal-body {
        padding: 8px 6px 12px;
    }
}

/* ── Utility classes for CSP compliance ─── */

.system-line-spaced {
    margin-top: 24px;
}

.cd-home-link {
    margin-top: 24px;
    display: block;
    text-decoration: none;
    color: var(--accent);
    transition: color 0.2s;
}

.cd-home-comment {
    color: var(--text-muted, #9fb3c6);
}

.iframe-container {
    max-width: 1000px;
    margin: 0 auto;
}

.coming-soon-iframe {
    width: 100%;
    height: 600px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
}

/* ── Info hint button + panel ── */
.info-hint {
    margin: 0 0 12px;
    position: relative;
}

.info-hint-btn {
    background: none;
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 4px;
    color: var(--accent);
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    padding: 5px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0.7;
    transition: opacity 0.2s, border-color 0.2s;
}

.info-hint-btn:hover {
    opacity: 1;
    border-color: var(--accent);
}

.info-hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
}

.info-hint-label {
    color: var(--text-muted);
}

.info-hint-panel {
    display: none;
    margin-top: 10px;
    padding: 14px 18px;
    border-left: 2px solid var(--accent);
    background: rgba(0, 212, 255, 0.04);
    border-radius: 0 4px 4px 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
    position: relative;
    animation: infoSlide 0.2s ease-out;
}

.info-hint-panel.open {
    display: block;
}

@keyframes infoSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-hint-panel p {
    margin: 0 0 8px;
}

.info-hint-panel p:last-child {
    margin-bottom: 0;
}

.info-hint-panel strong {
    color: #fff;
}

.info-accent {
    color: var(--accent);
}

.info-hint-close {
    position: absolute;
    top: 8px;
    right: 12px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.8rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.info-hint-close:hover {
    opacity: 1;
    color: var(--accent);
}