/* =============================================================================
   SYSTEM.exe · Game Client · base.css
   Custom properties, reset, typography, shared utilities
   ============================================================================= */

/* ── Custom properties ───────────────────────────────────────────────────────── */

:root {
    /* ─ Palette ─────────────────────────────────────────────────────────────── */
    --c-black:        #0A0A0A;
    --c-dark:         #111111;
    --c-surface:      #1A1A1A;

    --c-amber:        #C8873A;
    --c-amber-dim:    #8B6014;
    --c-amber-pale:   #E8A050;
    --c-amber-glow:   rgba(200, 135, 58, 0.18);

    --c-green:        #33FF33;
    --c-green-dim:    #1A8A1A;
    --c-green-glow:   rgba(51, 255, 51, 0.14);

    --c-cream:        #E8E4D9;
    --c-sepia:        #8B7355;
    --c-dim:          #5A5248;
    --c-red-muted:    #8B2020;

    /* ─ Rarity glow colours ──────────────────────────────────────────────────── */
    --rarity-common:     #5A5A5A;
    --rarity-uncommon:   #8B6014;
    --rarity-rare:       #C8873A;
    --rarity-legendary:  #33FF33;

    /* ─ Typography ───────────────────────────────────────────────────────────── */
    --font-game:   'VT323', 'Courier New', monospace;        /* narrative, cards */
    --font-ui:     'IBM Plex Mono', 'Courier New', monospace; /* labels, chrome  */

    --fs-tiny:     12px;
    --fs-sm:       14px;
    --fs-base:     18px;   /* VT323 reads larger */
    --fs-md:       20px;
    --fs-lg:       24px;
    --fs-xl:       30px;
    --fs-2xl:      42px;

    /* ─ Layout ───────────────────────────────────────────────────────────────── */
    --header-h:    46px;
    --max-w:       680px;

    /* ─ Motion ───────────────────────────────────────────────────────────────── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */

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

html {
    height: 100%;
    background: var(--c-black);
}

body {
    min-height: 100%;
    background: var(--c-black);
    color: var(--c-cream);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

button:disabled { cursor: not-allowed; opacity: 0.4; }

img { display: block; max-width: 100%; }

[hidden] { display: none !important; }

/* ── Utility classes ─────────────────────────────────────────────────────────── */

.dim        { color: var(--c-dim); }
.amber      { color: var(--c-amber); }
.green      { color: var(--c-green); }
.uppercase  { text-transform: uppercase; letter-spacing: 0.1em; }

/* Blinking cursor — used in multiple contexts */
.cursor-blink {
    animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── CRT scanlines (shared between game and loading screen) ──────────────────── */

.crt-scanlines {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.18) 2px,
            rgba(0, 0, 0, 0.18) 4px
    );
    z-index: 10;
}

/* Vignette for CRT image frame */
.crt-vignette {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: radial-gradient(
            ellipse at center,
            transparent 55%,
            rgba(0, 0, 0, 0.65) 100%
    );
    z-index: 11;
}

/* Subtle phosphor flicker — applied to full image frame */
.crt-flicker {
    pointer-events: none;
    position: absolute;
    inset: 0;
    animation: crt-flicker 8s linear infinite;
    z-index: 12;
    mix-blend-mode: overlay;
    background: transparent;
}

@keyframes crt-flicker {
    0%, 91%, 95%, 97%, 100% { opacity: 0; }
    92%  { opacity: 0.04; background: rgba(255,255,255,0.02); }
    94%  { opacity: 0.08; background: rgba(255,255,255,0.04); }
    96%  { opacity: 0.03; }
    98%  { opacity: 0.06; }
}

/* ── CRT panel (shared border style) ────────────────────────────────────────── */

.crt-panel {
    border: 1px solid var(--c-amber-dim);
    box-shadow:
            0 0 0 1px rgba(0,0,0,0.8),
            0 0 20px var(--c-amber-glow),
            inset 0 0 40px rgba(0,0,0,0.5);
}