/* ============================================================
   Pixel Olympiad — retro core: palette, fonts, CRT overlay
   32-colour fixed palette (DawnBringer-ish), reused everywhere.
   ============================================================ */
:root {
    /* --- 32 colour palette --- */
    --c-black:    #140c1c;
    --c-darkblue: #1f2447;
    --c-blue:     #346bd4;
    --c-skyblue:  #5fcde4;
    --c-cyan:     #99e8e2;
    --c-teal:     #3a7a6c;
    --c-green:    #6abe30;
    --c-limegrn:  #a8e72e;
    --c-darkgrn:  #2e5a1c;
    --c-olive:    #8f9c20;
    --c-yellow:   #fbf236;
    --c-gold:     #ffce40;
    --c-orange:   #df7126;
    --c-rust:     #ac3232;
    --c-red:      #d04648;
    --c-pink:     #d27d9e;
    --c-magenta:  #b14cb1;
    --c-purple:   #7e3caa;
    --c-violet:   #5b3a90;
    --c-brown:    #8a5b3a;
    --c-tan:      #d9a066;
    --c-cream:    #eec39a;
    --c-white:    #ffffff;
    --c-fog:      #cbdbfc;
    --c-grey:     #847e87;
    --c-dgrey:    #4b4158;
    --c-slate:    #30334d;
    --c-silver:   #c0cbdc;
    --c-bronze:   #cd7f32;
    --c-shadow:   #0d0717;
    --c-night:    #0b1021;
    --c-screen:   #10131f;

    /* semantic */
    --bg:         var(--c-night);
    --panel:      var(--c-slate);
    --panel-2:    var(--c-darkblue);
    --ink:        var(--c-fog);
    --ink-dim:    var(--c-grey);
    --accent:     var(--c-yellow);
    --accent-2:   var(--c-skyblue);
    --danger:     var(--c-red);
    --ok:         var(--c-green);

    --font: "Press Start 2P", "Courier New", monospace;
    --pixel: 4px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.7;
    -webkit-font-smoothing: none;
    image-rendering: pixelated;
}

body {
    min-height: 100vh;
    background-image:
        radial-gradient(circle at 50% -10%, var(--c-darkblue) 0%, transparent 60%),
        repeating-linear-gradient(45deg, #0c1124 0 12px, #0a0f20 12px 24px);
}

canvas, img, .pixelated { image-rendering: pixelated; }

h1, h2, h3 { font-weight: normal; letter-spacing: 1px; }

/* ---- CRT scanline + vignette overlay (toggle via body.crt) ---- */
body.crt::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0) 2px,
            rgba(0, 0, 0, 0.18) 3px,
            rgba(0, 0, 0, 0.18) 4px);
    mix-blend-mode: multiply;
}
body.crt::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.55) 100%);
}

/* shared pixel-border look */
.pixel-border {
    border: var(--pixel) solid var(--c-black);
    box-shadow:
        0 0 0 var(--pixel) var(--c-dgrey),
        0 var(--pixel) 0 var(--pixel) var(--c-shadow);
}

.hidden { display: none !important; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-screen); }
::-webkit-scrollbar-thumb { background: var(--c-dgrey); border: 2px solid var(--c-screen); }