/* ═══════════════════════════════════════════════════
   CHEESYMAN CYBERPUNK DESIGN SYSTEM — cyberpunk.css
   Shared across all pages. Page-specific styles live
   in each file's own <style> block.
═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&family=Barlow+Condensed:wght@400;600;700&display=swap');

/* ─── DESIGN TOKENS ─────────────────────────────── */
:root {
    --bg:            #080810;
    --surface:       #0e0e1a;
    --surface2:      #13131f;
    --surface3:      #1a1a2a;
    --border:        #1e1e3a;
    --text:          #e8e8ff;
    --text-dim:      #7878a8;
    --text-faint:    #3a3a60;

    --green:         #00ff41;
    --green-glow:    rgba(0, 255, 65, 0.35);
    --blue:          #00e5ff;
    --blue-glow:     rgba(0, 229, 255, 0.35);
    --orange:        #ff6600;
    --orange-glow:   rgba(255, 102, 0, 0.35);
    --purple:        #df00ff;
    --purple-glow:   rgba(223, 0, 255, 0.35);
    --amber:         #ffe600;
    --amber-glow:    rgba(255, 230, 0, 0.3);

    /* Race surface — unchanged from original */
    --dirt:          #e09a3a;
    --dirt-glow:     rgba(224, 154, 58, 0.35);
    --pavement:      #4da6ff;
    --pavement-glow: rgba(77, 166, 255, 0.35);

    --font-display:  'Orbitron', monospace;
    --font-mono:     'Share Tech Mono', 'Courier New', monospace;
    --font-ui:       'Barlow Condensed', monospace;
}

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

/* ─── BASE ──────────────────────────────────────── */
body {
    font-family: var(--font-mono);
    background-color: var(--bg);
    color: var(--text);
    min-height: 100vh;
    background-image: radial-gradient(circle, #1a1a3a 1px, transparent 1px);
    background-size: 28px 28px;
}


/* ─── NEON TOP BAR ──────────────────────────────── */
.neon-bar {
    height: 4px;
    background: linear-gradient(90deg,
        var(--purple) 0%, var(--blue) 25%,
        var(--green) 50%, var(--orange) 75%,
        var(--purple) 100%
    );
    box-shadow:
        0 0 6px var(--purple),
        0 0 16px var(--blue),
        0 0 30px var(--green),
        0 0 6px var(--orange);
}

/* ─── LAYOUT ────────────────────────────────────── */
.page-wrap {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

/* ─── PAGE HEADER ───────────────────────────────── */
.page-header {
    text-align: center;
    padding: 36px 20px 28px;
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 110%, var(--orange-glow) 0%, transparent 70%);
    pointer-events: none;
}

.header-kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--orange);
    text-transform: uppercase;
    margin-bottom: 10px;
    text-shadow: 0 0 10px var(--orange);
}
.header-kicker::before { content: '> '; }

.page-header h1 {
    font-family: var(--font-display);
    font-size: clamp(24px, 5vw, 58px);
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #fff;
    line-height: 1.1;
    text-shadow:
        0 0 10px #fff,
        0 0 30px var(--orange),
        0 0 60px var(--orange),
        0 0 100px var(--orange-glow);
}

.header-sub {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-dim);
    letter-spacing: 0.1em;
}

.header-nav {
    margin-bottom: 20px;
}

/* ─── SECTION LABEL ─────────────────────────────── */
.section-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.section-label::before {
    content: '//';
    color: var(--orange);
    text-shadow: 0 0 8px var(--orange);
    flex-shrink: 0;
}
.section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* ─── HEADINGS ──────────────────────────────────── */
h2 {
    font-family: var(--font-display);
    font-size: clamp(15px, 2.5vw, 22px);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.06em;
    margin: 32px 0 12px;
}
h3 {
    font-family: var(--font-display);
    font-size: clamp(13px, 2vw, 17px);
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.05em;
    margin: 20px 0 10px;
}

/* ─── BUTTONS ───────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 10px 22px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid currentColor;
    border-radius: 2px;
    cursor: pointer;
    background: transparent;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
    margin: 5px;
    line-height: 1.4;
}
.btn::before { content: '['; margin-right: 4px; opacity: 0.6; }
.btn::after  { content: ']'; margin-left:  4px; opacity: 0.6; }
.btn:hover   { transform: translateY(-2px); }
.btn:disabled, .btn[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.btn-green  { color: var(--green);  border-color: var(--green);  text-shadow: 0 0 8px var(--green); }
.btn-green:not(:disabled):hover  { background: var(--green-glow);  box-shadow: 0 0 8px var(--green),  0 0 24px var(--green-glow),  inset 0 0 16px var(--green-glow); }

.btn-blue   { color: var(--blue);   border-color: var(--blue);   text-shadow: 0 0 8px var(--blue); }
.btn-blue:not(:disabled):hover   { background: var(--blue-glow);   box-shadow: 0 0 8px var(--blue),   0 0 24px var(--blue-glow),   inset 0 0 16px var(--blue-glow); }

.btn-orange { color: var(--orange); border-color: var(--orange); text-shadow: 0 0 8px var(--orange); }
.btn-orange:not(:disabled):hover { background: var(--orange-glow); box-shadow: 0 0 8px var(--orange), 0 0 24px var(--orange-glow), inset 0 0 16px var(--orange-glow); }

.btn-purple { color: var(--purple); border-color: var(--purple); text-shadow: 0 0 8px var(--purple); }
.btn-purple:not(:disabled):hover { background: var(--purple-glow); box-shadow: 0 0 8px var(--purple), 0 0 24px var(--purple-glow), inset 0 0 16px var(--purple-glow); }

.btn-amber  { color: var(--amber);  border-color: var(--amber);  text-shadow: 0 0 8px var(--amber); }
.btn-amber:not(:disabled):hover  { background: var(--amber-glow);  box-shadow: 0 0 8px var(--amber),  0 0 24px var(--amber-glow),  inset 0 0 16px var(--amber-glow); }

/* ─── PANELS ────────────────────────────────────── */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 20px 24px;
    position: relative;
    margin: 12px auto;
}
.panel::before, .panel::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    border-style: solid;
    border-color: var(--orange);
}
.panel::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.panel::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.panel-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #fff;
    margin-bottom: 12px;
}

.panel-orange { border-color: var(--orange); box-shadow: 0 0 12px var(--orange-glow), inset 0 0 24px rgba(255,102,0,0.03); }
.panel-orange::before, .panel-orange::after { border-color: var(--orange); }

.panel-green  { border-color: var(--green);  box-shadow: 0 0 12px var(--green-glow),  inset 0 0 24px rgba(0,255,65,0.03); }
.panel-green::before,  .panel-green::after  { border-color: var(--green); }

.panel-blue   { border-color: var(--blue);   box-shadow: 0 0 12px var(--blue-glow),   inset 0 0 24px rgba(0,229,255,0.03); }
.panel-blue::before,   .panel-blue::after   { border-color: var(--blue); }

.panel-purple { border-color: var(--purple); box-shadow: 0 0 12px var(--purple-glow), inset 0 0 24px rgba(223,0,255,0.03); }
.panel-purple::before, .panel-purple::after { border-color: var(--purple); }

.panel-amber  { border-color: var(--amber);  box-shadow: 0 0 12px var(--amber-glow),  inset 0 0 24px rgba(255,230,0,0.03); }
.panel-amber::before,  .panel-amber::after  { border-color: var(--amber); }

/* ─── INPUTS ────────────────────────────────────── */
.cy-input {
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 2px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cy-input::placeholder { color: var(--text-faint); }
.cy-input:focus {
    border-color: var(--orange);
    box-shadow: 0 0 8px var(--orange-glow);
}

/* ─── LOADING / ERROR ───────────────────────────── */
.loading {
    text-align: center;
    padding: 40px 20px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-dim);
    letter-spacing: 0.1em;
}
.loading::before { content: '> '; color: var(--green); text-shadow: 0 0 8px var(--green); }

.error-msg, .error {
    padding: 20px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: #ff4444;
    border: 1px solid rgba(255,68,68,0.4);
    background: rgba(255,68,68,0.05);
    border-radius: 2px;
    margin: 20px auto;
    max-width: 640px;
    text-align: center;
}
.error-msg a, .error a { color: #ff6666; }

/* ─── FOOTER ────────────────────────────────────── */
.page-footer {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-faint);
    margin-top: 60px;
    padding: 20px;
    border-top: 1px solid var(--border);
    letter-spacing: 0.1em;
}

/* ─── CURSOR ────────────────────────────────────── */
.cursor {
    display: inline-block;
    width: 8px; height: 14px;
    background: var(--green);
    vertical-align: middle;
    animation: blink 1s step-start infinite;
    box-shadow: 0 0 6px var(--green);
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }