:root {
    --ink: #0b0003;
    --fg: #ffe9c6;
    --bg1: #0f0018;
    /* midnight */
    --bg2: #360019;
    /* wine */
    --gold: #ffd86e;
    --violet: #ad7dff;
    --acid: #7dff95;
    --blood: #ff3b3b;
}

html,
body {
    height: 100%;
    margin: 0
}

body {
    color: var(--fg);
    background:
        repeating-linear-gradient(45deg, #120010 0 14px, #1a0018 14px 28px),
        radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, .06), transparent 60%),
        radial-gradient(ellipse at 80% 60%, rgba(255, 255, 255, .06), transparent 60%),
        linear-gradient(180deg, var(--bg1), var(--bg2));
    image-rendering: pixelated;
    font-family: "Verdana", "Comic Sans MS", system-ui, sans-serif;
    cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0iZmxhbWUiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0ib3JhbmdlIi8+CjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSJyZWQiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJkYXJrcmVkIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPHJlY3QgeD0iMTkiIHk9IjEwIiB3aWR0aD0iMiIgaGVpZ2h0PSIxOCIiIGZpbGw9InNpbHZlciIgc3Ryb2tlPSJncmF5IiBzdHJva2Utd2lkdGg9IjEiLz4KPHJlY3QgeD0iMTYiIHk9IjI2IiB3aWR0aD0iOCIgaGVpZ2h0PSIzIiBmaWxsPSIjYjg4NjBiIiBzdHJva2U9IiM2NTQzMjEiIHN0cm9rZS13aWR0aD0iMSIvPgo8cmVjdCB4PSIxOSIgeT0iMjkiIHdpZHRoPSIyIiBoZWlnaHQ9IjYiIGZpbGw9IiM2NTQzMjEiLz4KPHBhdGggZD0iTTIwIDEwIEMxNiA2LDE4IDE0LDE1IDEyIEMxNCAxNiwxOCAxOCwyMCAxNiBDMjIgMTgsMjYgMTYsMjUgMTIgQzIyIDE0LDI0IDYsMjAgMTAgWiIgZmlsbD0idXJsKCNmbGFtZSkiLz4KPC9zdmc+') 20 10, auto;
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px;
}

/* Header: Brutalist banner */
header {
    border: 6px double var(--gold);
    background:
        conic-gradient(from 45deg, rgba(255, 216, 110, .18), transparent 35%),
        linear-gradient(90deg, #2a000f, #3a1b00);
    box-shadow: 0 8px 0 rgba(255, 216, 110, .18), 0 18px 40px rgba(0, 0, 0, .7) inset;
    padding: 12px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

.logo {
    font-family: Impact, Haettenschweiler, 'Arial Black', sans-serif;
    font-size: clamp(28px, 6vw, 84px);
    letter-spacing: 2px;
    color: var(--gold);
    text-shadow: 4px 4px 0 #000, -2px -2px 0 #632, 0 0 16px rgba(255, 216, 110, .4);
    transform: skew(-3deg);
}

.logo .sparkle {
    color: #650018;
    /* neon purple — change to #ff003c for neon red */
    text-shadow:
        0 0 5px #bbb544,
        /*gold*/
        0 0 10px #bbb544,
        0 0 20px #bbb544,
        0 0 40px #bbb544,
        0 0 80px #bbb544;
    font-weight: bold;
}

.ticker {
    margin-top: 8px;
    height: 28px;
    overflow: hidden;
    white-space: nowrap;
    border: 2px dashed var(--violet);
    background: #18001a;
    font-weight: 800;
    color: #fff;
    font-size: 14px;
    line-height: 28px;
}

.ticker span {
    display: inline-block;
    vertical-align: middle;
    padding: 4px 0;
    min-width: 50%;
    animation: tscroll var(--scroll-speed, 20s) linear infinite;
    transition: opacity 0.6s ease-in;
}

.ticker span.play {
    animation-play-state: running;
    opacity: 1;
}

@keyframes tscroll {
    from {
        transform: translateX(20%);
    }

    /* start closer in */
    to {
        transform: translateX(-100%);
    }
}

/* Tabs: unapologetically boxy */
nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 12px 0;
}

.tab {
    color: #000;
    background: var(--gold);
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    border: 4px solid #000;
    box-shadow: 4px 4px 0 #000;
    padding: 8px 12px;
    position: relative;
}

.tab:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #000;
}

.tab.active {
    outline: 4px dotted var(--acid);
    background: linear-gradient(180deg, #ffe69e, var(--gold));
}

/* Cards: parchment slabs */
.card {
    background:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity=".05" viewBox="0 0 32 32"><text x="4" y="20" font-size="18" font-family="serif" fill="%23fff">&#9763;</text></svg>') left top/100px repeat,
        linear-gradient(180deg, #fff3c9, #f3dca4);
    color: #1b0d00;
    border: 6px ridge #c99b2b;
    border-radius: 14px;
    padding: 16px;
    margin: 16px 0;
    position: relative;
}


h2 {
    margin: 0 0 6px;
    font-family: Georgia, serif;
    color: #2b1600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hr {
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 20px);
    margin: 8px 0;
}

/* 88x31 buttons grid */
.buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    gap: 10px;
}

.web-btn {
    width: 88px;
    height: 31px;
    display: inline-grid;
    place-items: center;
    font: 700 10px/1 monospace;
    color: #fff;
    text-decoration: none;
    border: 3px outset #555;
    background: linear-gradient(180deg, #262626, #444);
    box-shadow: 0 3px 0 #000;
}

/* Resources lock */
.lock {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #1a0e00;
    border: 3px dashed var(--gold);
    padding: 10px;
}

.lock input {
    font-weight: 900;
    padding: 6px;
    border: 3px solid #000;
    background: #fffdb9;
}

.lock button {
    font-weight: 900;
    border: 4px solid #000;
    background: var(--acid);
    box-shadow: 3px 3px 0 #000;
    cursor: pointer;
}

.hidden {
    display: none !important;
}

/* Footer */
footer {
    text-align: center;
    color: #ffd;
    margin: 14px 0 40px;
    text-shadow: 0 0 8px rgba(255, 216, 110, .5);
}

.counter {
    font-weight: 900;
    background: #000;
    padding: 2px 6px;
    border: 3px double var(--gold);
}

/* Micro-joy: jitter & glow */
.jitter:hover {
    animation: shake .25s steps(2, end) 3;
}

@keyframes shake {
    0% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(-2px, 2px)
    }

    100% {
        transform: translate(0, 0)
    }
}

/* Responsive */
@media (max-width:600px) {
    .buttons {
        grid-template-columns: repeat(auto-fill, 88px);
    }
}