:root {
    --neon-cyan: #00ffcc;
    --neon-blue: #0099ff;
    --neon-pink: #ff0055;
    --neon-yellow: #facc15;
    --neon-green: #22c55e;
    --neon-purple: #a855f7;

    --bg-void: #02040a;
    --glass-panel: rgba(2, 8, 20, 0.88);

    --glow-main:
        0 0 30px rgba(0, 255, 204, 0.4);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-void);
    color: var(--neon-cyan);
    font-family: 'Share Tech Mono', monospace;

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 25px 15px;

    overflow-x: hidden;
    position: relative;
}

/* =========================
   BACKGROUND
========================= */

#matrix-canvas {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -3;
    opacity: 0.18;

    pointer-events: none;
}

.cyber-grid {
    position: fixed;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(0, 255, 204, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 255, 204, 0.05) 1px,
            transparent 1px
        );

    background-size: 35px 35px;

    z-index: -2;

    animation: gridMove 20s linear infinite;

    pointer-events: none;
}

@keyframes gridMove {

    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 35px 35px;
    }

}

/* =========================
   CONTAINER
========================= */

.quantum-container {
    width: 100%;
    max-width: 620px;

    background: var(--glass-panel);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    border: 1px solid var(--neon-cyan);

    box-shadow:
        var(--glow-main),
        inset 0 0 30px rgba(0, 255, 204, 0.1);

    padding: 28px;

    position: relative;

    clip-path: polygon(
        0 0,
        calc(100% - 25px) 0,
        100% 25px,
        100% 100%,
        25px 100%,
        0 calc(100% - 25px)
    );
}

.quantum-container::before {
    content: '';

    position: absolute;

    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;

    background:
        linear-gradient(
            45deg,
            var(--neon-cyan),
            transparent,
            var(--neon-pink),
            transparent,
            var(--neon-blue)
        );

    z-index: -1;

    opacity: 0.6;

    animation: borderGlow 6s linear infinite;

    clip-path: polygon(
        0 0,
        calc(100% - 25px) 0,
        100% 25px,
        100% 100%,
        25px 100%,
        0 calc(100% - 25px)
    );
}

@keyframes borderGlow {

    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }

}

/* =========================
   HEADER
========================= */

.header {
    text-align: center;

    margin-bottom: 22px;

    border-bottom:
        1px dashed rgba(0, 255, 204, 0.4);

    padding-bottom: 15px;

    position: relative;
}

.header h1 {
    font-family: 'Orbitron', sans-serif;

    font-size: 17px;
    font-weight: 900;

    letter-spacing: 4px;

    color: #fff;

    text-shadow:
        0 0 15px var(--neon-cyan),
        0 0 30px var(--neon-blue);

    animation: textFlicker 3s infinite;
}

@keyframes textFlicker {

    0%,
    19%,
    21%,
    23%,
    25%,
    54%,
    56%,
    100% {
        opacity: 1;
    }

    20%,
    24%,
    55% {
        opacity: 0.8;
        text-shadow: none;
    }

}

.header-meta {
    display: flex;

    justify-content: space-between;

    font-size: 11px;

    color: var(--neon-blue);

    margin-top: 10px;

    letter-spacing: 1px;
}

/* =========================
   SECTION
========================= */

.hud-section {
    margin-bottom: 18px;

    background: rgba(0, 0, 0, 0.65);

    border-left: 4px solid var(--neon-cyan);

    border-top:
        1px solid rgba(0, 255, 204, 0.15);

    border-right:
        1px solid rgba(0, 255, 204, 0.15);

    border-bottom:
        1px solid rgba(0, 255, 204, 0.15);

    padding: 14px 16px;

    position: relative;
}

.hud-title {
    font-family: 'Orbitron', sans-serif;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #fff;

    margin-bottom: 10px;

    display: flex;

    justify-content: space-between;
    align-items: center;
}

.section-number {
    color: #64748b;
    font-size: 9px;
}

.hud-list {
    list-style: none;

    font-size: 11px;

    color: #a5f3fc;

    line-height: 1.6;
}

.hud-list li {
    margin-bottom: 5px;

    position: relative;

    padding-left: 15px;
}

.hud-list li::before {
    content: '⚡';

    position: absolute;

    left: 0;

    font-size: 10px;

    color: var(--neon-cyan);
}

/* =========================
   SCAN CONTROL
========================= */

.scan-control {
    margin-top: 12px;

    display: flex;

    justify-content: space-between;
    align-items: center;

    background: rgba(0, 0, 0, 0.4);

    padding: 8px 10px;

    border:
        1px dashed rgba(0, 255, 204, 0.2);

    gap: 10px;
}

.scan-status {
    font-size: 10px;
    color: #a5f3fc;
}

/* =========================
   BUTTON
========================= */

.cyber-btn {
    flex: 1;

    background:
        rgba(0, 255, 204, 0.1);

    border:
        1px solid var(--neon-cyan);

    color: var(--neon-cyan);

    padding: 12px;

    font-family: 'Orbitron', sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    cursor: pointer;

    transition: all 0.3s;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    position: relative;

    overflow: hidden;

    box-shadow:
        0 0 10px rgba(0, 255, 204, 0.1);
}

.cyber-btn:hover {
    background: var(--neon-cyan);

    color: #000;

    box-shadow:
        0 0 25px var(--neon-cyan);

    transform: translateY(-2px);
}

.cyber-btn.accent {
    border-color: var(--neon-pink);

    color: var(--neon-pink);

    background:
        rgba(255, 0, 85, 0.1);
}

.cyber-btn.accent:hover {
    background: var(--neon-pink);

    color: #fff;

    box-shadow:
        0 0 25px var(--neon-pink);
}

.scan-btn {
    flex: unset;
    padding: 6px 12px;
}

/* =========================
   INPUT
========================= */

.input-group {
    margin-bottom: 12px;
}

.input-label {
    display: block;

    font-size: 10px;

    letter-spacing: 1.5px;

    color: #38bdf8;

    margin-bottom: 5px;

    font-family: 'Orbitron', sans-serif;
}

.cyber-input,
.cyber-select {
    width: 100%;

    background: rgba(0, 0, 0, 0.9);

    border:
        1px solid rgba(0, 153, 255, 0.5);

    color: #fff;

    padding: 11px;

    font-family:
        'Share Tech Mono',
        monospace;

    font-size: 12px;

    outline: none;

    transition: all 0.3s;
}

.cyber-input:focus,
.cyber-select:focus {
    border-color: var(--neon-cyan);

    box-shadow:
        0 0 15px rgba(0, 255, 204, 0.4);

    background:
        rgba(0, 15, 30, 0.95);
}

.cyber-select option {
    background: #02040a;
    color: #fff;
}

/* =========================
   LIVE FEED
========================= */

.console-feed {
    height: 110px;

    overflow-y: hidden;

    position: relative;

    font-size: 10px;

    color: #38bdf8;

    border:
        1px dashed rgba(0, 255, 204, 0.3);

    padding: 8px;

    background:
        rgba(0, 0, 0, 0.7);
}

.feed-stream {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.feed-line {
    padding-bottom: 4px;

    border-bottom:
        1px dotted rgba(255, 255, 255, 0.05);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}

.feed-line span {
    color: var(--neon-yellow);
}

/* =========================
   HISTORY
========================= */

.history-header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 10px;

    margin-bottom: 10px;
}

.live-indicator {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #34d399;

    font-size: 9px;

    letter-spacing: 1px;
}

.live-dot {
    width: 7px;
    height: 7px;

    background: #22c55e;

    border-radius: 50%;

    box-shadow:
        0 0 10px #22c55e;

    animation: livePulse 1s infinite;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }

}

.history-note {
    color: #64748b;

    font-size: 8px;

    margin-bottom: 9px;

    padding: 7px 9px;

    border:
        1px dashed rgba(250, 204, 21, 0.25);

    background:
        rgba(250, 204, 21, 0.03);
}

.next-scan-box {
    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 8px 10px;

    margin-bottom: 8px;

    background:
        rgba(0, 255, 204, 0.03);

    border:
        1px solid rgba(0, 255, 204, 0.12);

    color: #64748b;

    font-size: 8px;

    letter-spacing: 1px;
}

.next-scan-box b {
    color: var(--neon-cyan);

    font-size: 10px;

    letter-spacing: 1px;
}

.game-history {
    height: 255px;

    overflow-y: auto;

    background:
        rgba(0, 0, 0, 0.72);

    border:
        1px solid rgba(0, 255, 204, 0.2);

    padding: 7px;

    scrollbar-width: thin;

    scrollbar-color:
        var(--neon-cyan)
        #02040a;
}

.game-history::-webkit-scrollbar {
    width: 4px;
}

.game-history::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
}

.history-item {
    display: grid;

    grid-template-columns:
        52px 1fr auto;

    gap: 8px;

    align-items: center;

    padding: 9px 7px;

    margin-bottom: 5px;

    border-bottom:
        1px dotted rgba(255, 255, 255, 0.08);

    animation:
        historyAppear 0.35s ease;
}

@keyframes historyAppear {

    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

}

.history-time {
    color: #64748b;
    font-size: 9px;
}

.history-game {
    color: #fff;

    font-family: 'Orbitron', sans-serif;

    font-size: 9px;

    letter-spacing: 0.5px;
}

.history-user {
    display: block;

    color: #38bdf8;

    font-size: 9px;

    margin-top: 3px;
}

.history-result {
    text-align: right;

    font-size: 10px;

    font-weight: bold;
}

.result-green {
    color: #22c55e;

    text-shadow:
        0 0 8px rgba(34, 197, 94, 0.4);
}

.result-red {
    color: #ff0055;

    text-shadow:
        0 0 8px rgba(255, 0, 85, 0.4);
}

.result-yellow {
    color: #facc15;

    text-shadow:
        0 0 8px rgba(250, 204, 21, 0.4);
}

.history-footer {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 7px;

    margin-top: 9px;
}

.history-stat {
    padding: 8px;

    background:
        rgba(0, 0, 0, 0.5);

    border:
        1px solid rgba(255, 255, 255, 0.06);

    text-align: center;
}

.history-stat span {
    display: block;

    color: #64748b;

    font-size: 8px;

    margin-bottom: 4px;
}

.history-stat b {
    color: #fff;

    font-size: 11px;
}

/* =========================
   INTRO
========================= */

.intro-box {
    background:
        linear-gradient(
            135deg,
            rgba(0, 255, 204, 0.05),
            rgba(0, 153, 255, 0.02),
            rgba(168, 85, 247, 0.04)
        );

    border:
        1px solid rgba(0, 255, 204, 0.18);

    padding: 13px;

    margin-top: 5px;
}

.intro-main {
    color: #dbeafe;

    font-size: 11px;

    line-height: 1.75;

    margin-bottom: 12px;
}

.intro-highlight {
    color: var(--neon-cyan);
}

.intro-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-top: 10px;
}

.intro-card {
    padding: 10px;

    background:
        rgba(0, 0, 0, 0.42);

    border:
        1px solid rgba(255, 255, 255, 0.07);
}

.intro-card .icon {
    color: var(--neon-cyan);

    font-size: 15px;

    margin-bottom: 5px;
}

.intro-card h4 {
    font-family: 'Orbitron', sans-serif;

    color: #fff;

    font-size: 9px;

    letter-spacing: 1px;

    margin-bottom: 5px;
}

.intro-card p {
    color: #94a3b8;

    font-size: 9px;

    line-height: 1.55;
}

.intro-features {
    list-style: none;

    margin-top: 12px;
}

.intro-features li {
    color: #a5f3fc;

    font-size: 10px;

    padding: 6px 0;

    border-bottom:
        1px dotted rgba(255, 255, 255, 0.06);
}

.intro-features li::before {
    content: '[+] ';

    color: var(--neon-green);
}

/* =========================
   TELEMETRY
========================= */

.telemetry-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    font-size: 11px;
}

.tele-item {
    background:
        rgba(0, 0, 0, 0.5);

    padding: 8px 10px;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    position: relative;
}

.tele-item span {
    display: block;

    font-size: 9px;

    color: #64748b;

    font-family: 'Orbitron', sans-serif;

    letter-spacing: 1px;
}

.tele-item b {
    color: #fff;

    font-weight: normal;

    font-size: 10px;
}

.status-badge {
    display: inline-block;

    width: 7px;
    height: 7px;

    background:
        var(--neon-cyan);

    border-radius: 50%;

    box-shadow:
        0 0 10px var(--neon-cyan);

    margin-right: 5px;

    animation:
        pulseGlow 1.2s infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }

}

/* =========================
   PROGRESS
========================= */

.progress-container {
    display: none;

    width: 100%;

    background:
        rgba(0, 0, 0, 0.9);

    border:
        1px solid var(--neon-cyan);

    height: 20px;

    margin-top: 12px;

    position: relative;

    overflow: hidden;

    box-shadow:
        inset 0 0 15px rgba(0, 255, 204, 0.3);
}

.progress-bar {
    width: 0%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--neon-blue),
            var(--neon-cyan)
        );

    box-shadow:
        0 0 20px var(--neon-cyan);

    transition:
        width 0.1s linear;
}

.progress-text {
    position: absolute;

    width: 100%;

    top: 0;
    left: 0;

    font-size: 10px;

    color: #000;

    font-family: 'Orbitron', sans-serif;

    font-weight: 900;

    text-align: center;

    line-height: 20px;

    letter-spacing: 1.5px;
}

/* =========================
   POPUP
========================= */

.scan-popup-overlay {
    display: none;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(2, 4, 10, 0.9);

    z-index: 9999;

    justify-content: center;
    align-items: center;

    backdrop-filter: blur(8px);
}

.scan-popup-box {
    width: 90%;

    max-width: 480px;

    background:
        rgba(2, 8, 20, 0.95);

    border:
        1px solid var(--neon-cyan);

    box-shadow:
        0 0 40px rgba(0, 255, 204, 0.3);

    padding: 20px;

    position: relative;
}

.scan-popup-title {
    font-family: 'Orbitron', sans-serif;

    font-size: 12px;

    color: var(--neon-yellow);

    letter-spacing: 2px;

    margin-bottom: 12px;

    border-bottom:
        1px dashed rgba(255, 255, 255, 0.2);

    padding-bottom: 8px;
}

.scan-log-list {
    font-size: 11px;

    height: 140px;

    overflow-y: hidden;

    color: #38bdf8;

    display: flex;

    flex-direction: column;

    gap: 6px;

    background:
        rgba(0, 0, 0, 0.6);

    padding: 8px;

    border:
        1px solid rgba(0, 255, 204, 0.2);
}

.support-wrap {
    margin-top: 12px;
    display: flex;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 520px) {

    body {
        padding: 10px;
    }

    .quantum-container {
        padding: 18px;
    }

    .header h1 {
        font-size: 13px;
        letter-spacing: 2px;
    }

    .header-meta {
        font-size: 9px;
    }

    .intro-grid {
        grid-template-columns: 1fr;
    }

    .history-item {
        grid-template-columns:
            45px 1fr auto;
    }

    .telemetry-grid {
        grid-template-columns: 1fr;
    }

    .history-footer {
        grid-template-columns:
            1fr 1fr 1fr;
    }

    .scan-control {
        flex-direction: column;
        align-items: stretch;
    }

    .scan-btn {
        width: 100%;
    }

    .next-scan-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

}