/* ══════════════════════════════════════════════
   UNHACKABLE v2 — WASM EDITION
   Now the CSS is the only readable part. Enjoy.
   ══════════════════════════════════════════════ */

:root {
    --bg:          #04080f;
    --bg1:         #060d1a;
    --bg2:         #081020;
    --blue:        #3b82f6;
    --blue-bright: #60a5fa;
    --cyan:        #22d3ee;
    --cyan-dim:    #0891b2;
    --red:         #f43f5e;
    --amber:       #fbbf24;
    --green:       #4ade80;
    --text:        #cbd5e1;
    --text-dim:    #475569;
    --text-mute:   #1e3a5f;
    --border:      rgba(59,130,246,.18);
    --border-hi:   rgba(59,130,246,.4);
    --glass:       rgba(8,16,32,.6);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); overflow-x: hidden; }

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

/* ── BACKGROUND ── */
.bg-grid {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image: radial-gradient(rgba(59,130,246,.14) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.bg-orb {
    position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
    filter: blur(90px); opacity: .4;
}
.bg-orb-1 { width: 700px; height: 700px; top: -250px; left: -250px; background: radial-gradient(circle, #1e3a8a 0%, transparent 70%); }
.bg-orb-2 { width: 600px; height: 600px; bottom: -200px; right: -200px; background: radial-gradient(circle, #0c4a6e 0%, transparent 70%); }
.bg-orb-3 { width: 350px; height: 350px; top: 45%; left: 65%; background: radial-gradient(circle, #164e63 0%, transparent 70%); animation: drift 12s ease-in-out infinite alternate; }
.bg-scan {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.05) 3px, rgba(0,0,0,.05) 4px);
    animation: scanMove 10s linear infinite;
}

/* ── ANIMATIONS ── */
@keyframes drift { from{transform:translate(0,0);} to{transform:translate(-40px,20px);} }
@keyframes scanMove { from{transform:translateY(0);} to{transform:translateY(8px);} }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
@keyframes shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
@keyframes orb-pulse { 0%,100%{opacity:.4;transform:scale(1);} 50%{opacity:1;transform:scale(1.2);} }
@keyframes shield-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@keyframes glitch {
    0%,88%,100% { filter:none; transform:translate(0); }
    90% { filter:drop-shadow(-2px 0 #f43f5e) drop-shadow(2px 0 #22d3ee); transform:translate(-1px,0); }
    92% { filter:drop-shadow(2px 0 #f43f5e) drop-shadow(-2px 0 #22d3ee); transform:translate(1px,0); }
    94% { filter:none; transform:translate(0); }
}

/* ── CONTAINER ── */
.container {
    position: relative; z-index: 1;
    width: 100%; max-width: 780px;
    display: flex; flex-direction: column; align-items: center;
    animation: fadeUp .8s ease both;
}

/* ── STATUS PILL ── */
.status-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(34,211,238,.06);
    border: 1px solid rgba(34,211,238,.22);
    border-radius: 100px;
    padding: .38rem 1.1rem .38rem .7rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem; color: var(--cyan);
    letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: 2.5rem;
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: blink 2s step-end infinite; flex-shrink:0; }

/* ── WASM BADGE ── */
.wasm-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(139,92,246,.08);
    border: 1px solid rgba(139,92,246,.25);
    border-radius: 6px;
    padding: .25rem .7rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .58rem; color: #a78bfa;
    letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.wasm-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 6px #a78bfa; animation: blink 1.8s step-end infinite; }

/* ── SHIELD ── */
.shield-wrap { position: relative; margin-bottom: 1.75rem; }
.shield-glow {
    position: absolute; inset: -24px;
    background: radial-gradient(circle, rgba(59,130,246,.22) 0%, transparent 70%);
    border-radius: 50%; animation: orb-pulse 3.5s ease-in-out infinite;
}
.shield {
    font-size: 5rem; display: block; position: relative;
    animation: shield-float 4s ease-in-out infinite;
    filter: drop-shadow(0 0 28px rgba(59,130,246,.65));
    cursor: pointer; user-select: none;
}

/* ── HEADLINE ── */
h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2.5rem, 8vw, 5.2rem);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -.025em;
    text-align: center;
    margin-bottom: 1rem;
    background: linear-gradient(145deg, #ffffff 0%, #93c5fd 45%, #22d3ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: glitch 8s infinite;
}
.sub { font-size: clamp(.85rem,2vw,1rem); color: var(--text-dim); letter-spacing:.04em; margin-bottom:3rem; }

/* ── TERMINAL ── */
.terminal {
    width: 100%;
    background: var(--glass);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.75rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 28px 64px rgba(0,0,0,.55), 0 0 100px rgba(59,130,246,.07), inset 0 1px 0 rgba(255,255,255,.04);
}
.terminal-bar {
    display: flex; align-items: center; gap: .45rem;
    padding: .7rem 1.25rem;
    background: rgba(255,255,255,.025);
    border-bottom: 1px solid var(--border);
}
.t-dot { width: 11px; height: 11px; border-radius: 50%; }
.t-dot-r { background: #ff5f57; }
.t-dot-y { background: #febc2e; }
.t-dot-g { background: #28c840; }
.t-title {
    margin: 0 auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: .66rem; color: var(--text-dim); letter-spacing: .1em;
}
.terminal-body {
    padding: 1.25rem 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .8rem; line-height: 2;
}
.line { display: block; }
.line-ok   { color: #4ade80; }
.line-warn { color: var(--amber); }
.line-fail { color: var(--red); }
.line-info { color: var(--blue-bright); }
.line-dim  { color: #1e3a5f; }
.line-cmd  { color: var(--cyan); }
.prompt { color: var(--text-dim); margin-right: .5rem; user-select: none; }
.cursor { display:inline-block; width:8px; height:.9em; background:var(--cyan); vertical-align:text-bottom; animation:blink 1s step-end infinite; }

/* ── STATS ── */
.stats {
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: 1rem; width: 100%; margin-bottom: 2rem;
}
.stat {
    background: var(--glass);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.35rem 1rem; text-align: center;
    transition: border-color .25s, box-shadow .25s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.stat:hover { border-color: var(--border-hi); box-shadow: 0 0 28px rgba(59,130,246,.12), inset 0 1px 0 rgba(255,255,255,.03); }
.stat-val {
    font-family: 'Syne', sans-serif;
    font-size: 2.2rem; font-weight: 800; display: block;
    background: linear-gradient(135deg, var(--blue-bright), var(--cyan));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; margin-bottom: .3rem;
}
.stat-val-red { background: linear-gradient(135deg, #fb7185, var(--red)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent; }
.stat-label { font-size:.65rem; color:var(--text-dim); letter-spacing:.12em; text-transform:uppercase; font-family:'JetBrains Mono',monospace; }

/* ── HACK COUNTER ── */
.counter-wrap {
    position: fixed; top: 1.5rem; right: 1.5rem;
    background: var(--glass);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .55rem .9rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .6rem; color: var(--text-dim); letter-spacing: .1em; text-align: right;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.counter-val {
    font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 800;
    color: var(--red); display: block;
    text-shadow: 0 0 14px rgba(244,63,94,.5);
}

.footer-text { font-size:.64rem; color:var(--text-dim); letter-spacing:.05em; font-family:'JetBrains Mono',monospace; opacity:.45; }

/* ── INTEL PANEL ── */
.intel-panel {
    position: fixed; top: 50%; right: 1.5rem;
    transform: translateY(-50%);
    width: 220px;
    background: var(--glass);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 20px 50px rgba(0,0,0,.5), 0 0 60px rgba(59,130,246,.07);
    animation: fadeUp .9s .3s ease both;
}
.intel-header {
    display: flex; align-items: center; gap: .5rem;
    padding: .65rem .9rem;
    background: rgba(244,63,94,.07);
    border-bottom: 1px solid rgba(244,63,94,.18);
}
.intel-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 6px var(--red); animation: blink 1.5s step-end infinite; flex-shrink:0; }
.intel-title { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: var(--red); letter-spacing: .14em; text-transform: uppercase; }
.intel-body { padding: .75rem .9rem; }
.intel-row { display: flex; flex-direction: column; padding: .45rem 0; border-bottom: 1px solid rgba(59,130,246,.07); }
.intel-row:last-child { border-bottom: none; }
.intel-label { font-family: 'JetBrains Mono', monospace; font-size: .56rem; color: var(--text-dim); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .18rem; }
.intel-value { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--text); word-break: break-all; line-height: 1.4; }
.intel-value-highlight { color: var(--cyan); }
.intel-value-loading {
    background: linear-gradient(90deg, rgba(59,130,246,.1) 25%, rgba(59,130,246,.2) 50%, rgba(59,130,246,.1) 75%);
    background-size: 200% 100%; animation: shimmer 1.4s infinite;
    border-radius: 3px; min-height: .72rem; color: transparent;
}
.intel-footer {
    padding: .5rem .9rem;
    border-top: 1px solid var(--border);
    background: rgba(0,0,0,.2);
    font-family: 'JetBrains Mono', monospace;
    font-size: .55rem; color: var(--text-dim); letter-spacing: .08em;
    display: flex; align-items: center; gap: .4rem;
}
.intel-footer-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--red); animation: blink 1.5s step-end infinite; }

@media (max-width:1100px) { .intel-panel { display: none; } }
@media (max-width:600px) { .stats{grid-template-columns:1fr;} .counter-wrap{display:none;} }