@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Silkscreen:wght@400;700&family=VT323&display=swap');

@font-face {
    font-family: 'Terminus';
    src: url('https://cdn.jsdelivr.net/gh/haabe/retro-fonts@main/terminus/Terminus.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/haabe/retro-fonts@main/terminus/Terminus.woff') format('woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}


:root {
    color-scheme: dark;
    --bg: #020504;
    --panel: #06100b;
    --line: #163b27;
    --text: #d8ffe7;
    --muted: #557b63;
    --cyan: #39ff14;
    --green: #00ff8c;
    --pink: #ff2ad4;
}


/* CLI-selectable color themes */
:root[data-theme="sega"],
:root[data-theme="default"] {
    --bg: #030817;
    --panel: #07142b;
    --line: #1558a8;
    --text: #f4fbff;
    --muted: #6f91b8;
    --cyan: #18b8ff;
    --green: #ffe229;
    --pink: #ffffff;
}

:root[data-theme="c64"] {
    --bg: #25236b;
    --panel: #34328a;
    --line: #7776d9;
    --text: #aaa9ff;
    --muted: #7776bb;
    --cyan: #b8b7ff;
    --green: #8fe388;
    --pink: #e7a3ff;
}

:root[data-theme="amiga"] {
    --bg: #07101b;
    --panel: #0b1726;
    --line: #24445f;
    --text: #d7ecff;
    --muted: #7192ad;
    --cyan: #4db8ff;
    --green: #7cffbc;
    --pink: #ff78cb;
}

:root[data-theme="atari"] {
    --bg: #100b08;
    --panel: #1a120c;
    --line: #5a3b20;
    --text: #ffe4bb;
    --muted: #aa8158;
    --cyan: #ffb347;
    --green: #b6ff66;
    --pink: #ff6b35;
}

:root[data-theme="hackers"] {
    --bg: #020504;
    --panel: #06100b;
    --line: #163b27;
    --text: #d8ffe7;
    --muted: #557b63;
    --cyan: #39ff14;
    --green: #00ff8c;
    --pink: #ff2ad4;
}

/* Light/dark is independent of the selected accent theme. */
:root[data-mode="light"] {
    --bg: #e8edf0;
    --panel: #f6f9fa;
    --line: #a7bbc2;
    --text: #142027;
    --muted: #657981;
}

:root[data-mode="dark"] {
    color-scheme: dark;
}

:root[data-mode="light"] {
    color-scheme: light;
}

:root[data-mode="light"] body {
    background:
        linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px),
        radial-gradient(circle at 50% -20%, rgba(255,255,255,.95) 0, transparent 48%),
        var(--bg);
}

:root[data-mode="light"] .month {
    background: rgba(255,255,255,.72);
}

:root[data-mode="light"] .day {
    color: #43555d;
    border-color: rgba(80,110,120,.24);
}

:root[data-mode="light"] body::before,
:root[data-mode="light"] body::after {
    opacity: .10;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    background:
        linear-gradient(rgba(0,245,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,245,255,.025) 1px, transparent 1px),
        radial-gradient(circle at 50% -20%, #0b2530 0, transparent 45%),
        var(--bg);
    background-size: 28px 28px, 28px 28px, auto, auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

a { color: inherit; }

.shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px 2vw 14px;
}

.topbar {
    display: flex;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 9px;
}

.identity {
    position: relative;
    min-width: 0;
    flex: 1 1 0;
    max-width: 100%;
    overflow: hidden;
}

.brand-terminal {
    position: relative;
    display: flex;
    align-items: baseline;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    gap: 0;
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    cursor: text;
    transform: translateY(-5px);
    font-family: "Terminus", "Fixed", "DejaVu Sans Mono", monospace;
    animation: phosphor-flicker 9s infinite;
}

.brand-prefix {
    color: var(--cyan);
    font-size: clamp(2.8rem, 5.2vw, 4.8rem);
    line-height: .82;
    font-weight: 400;
    letter-spacing: .015em;
    text-shadow:
        0 0 1px rgba(0,245,255,.50),
        0 0 3px rgba(0,245,255,.16);
}

.prompt-home {
    display: inline-block;
    font: inherit;
    line-height: 1;
    transform: translateY(.30em);
}


.brand-command-wrap {
    display: inline-flex;
    align-items: baseline;
    min-width: 1ch;
    max-width: 42vw;
    padding-right: 12px;
    overflow: visible;
}

#terminal-input {
    width: 0;
    min-width: 0;
    max-width: 38vw;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: var(--cyan);
    font-family: "Terminus", "Fixed", "DejaVu Sans Mono", monospace;
    font-size: clamp(2.8rem, 5.2vw, 4.8rem);
    line-height: .82;
    font-weight: 400;
    letter-spacing: .015em;
    text-shadow:
        0 0 1px rgba(0,245,255,.50),
        0 0 3px rgba(0,245,255,.16);
    caret-color: transparent;
}

#terminal-input:not(:placeholder-shown) {
    width: min(38vw, 16ch);
}

.terminal-hint {
    display: inline-block;
    margin-left: .18em;
    color: var(--muted);
    font-family: "Terminus", "Fixed", "DejaVu Sans Mono", monospace;
    font-size: clamp(2.8rem, 5.2vw, 4.8rem);
    line-height: .82;
    font-weight: 400;
    letter-spacing: .015em;
    opacity: .72;
    text-shadow: none;
    white-space: nowrap;
    pointer-events: none;
    transform: none;
}

.terminal-hint[hidden] {
    display: none;
}

.cursor {
    display: inline-block;
    color: var(--cyan);
    font-family: "Terminus", "Fixed", "DejaVu Sans Mono", monospace;
    font-size: clamp(2.8rem, 5.2vw, 4.8rem);
    line-height: .82;
    font-weight: 400;
    transform: translateY(.02em);
    text-shadow:
        0 0 1px rgba(0,245,255,.55),
        0 0 3px rgba(0,245,255,.14);
    animation:
        cursor-blink .82s steps(1, end) infinite;
}

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

.tagline {
    margin-top: 5px;
    color: var(--muted);
    letter-spacing: .25em;
    font-size: .68rem;
}

.category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 10px;
    margin-top: 4px;
    min-height: 1.1rem;
}

.category-filter {
    width: auto;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--green);
    font-family: "Terminus", "Fixed", "DejaVu Sans Mono", monospace;
    font-size: .88rem;
    line-height: 1;
    letter-spacing: .06em;
    cursor: pointer;
    text-shadow: 0 0 4px color-mix(in srgb, var(--green) 28%, transparent);
}

.category-filter::before {
    content: "[x] ";
    color: var(--cyan);
}

.category-filter:not(.is-active) {
    color: var(--muted);
    opacity: .55;
    text-shadow: none;
}

.category-filter:not(.is-active)::before {
    content: "[ ] ";
    color: var(--muted);
}

.category-filter:hover,
.category-filter:focus-visible {
    color: var(--text);
    outline: none;
}

.event-span.category-filtered-out {
    display: none !important;
}

.terminal-output {
    touch-action: pan-y;
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    transform: none;
    min-width: 0;
    max-width: none;
    margin-left: 0;
    color: var(--pink);
    font-family: "VT323", "Courier New", monospace;
    font-size: clamp(1.55rem, 2.6vw, 2.5rem);
    line-height: .9;
    letter-spacing: .01em;
    text-shadow:
        0 0 4px rgba(255,61,242,.9),
        0 0 12px rgba(255,61,242,.55);
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    text-overflow: clip;
    scrollbar-width: none;
    scroll-behavior: smooth;
    vertical-align: baseline;
}

.terminal-output.is-ticker {
    overflow: hidden;
    scroll-behavior: auto;
    min-height: 1em;
    height: 1em;
}

.terminal-output.is-ticker .terminal-ticker-text {
    position: relative;
    display: inline-block;
    width: max-content;
    padding-left: 100%;
    white-space: nowrap;
    animation: terminal-ticker-run 8s linear infinite;
}

@keyframes terminal-ticker-run {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .terminal-output.is-ticker .terminal-ticker-text {
        position: static;
        animation: none !important;
        transform: none;
    }
}


.nav-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 2px;
    flex: 0 0 auto;
    min-width: max-content;
    position: relative;
    z-index: 2;
}

.theme-indicator {
    color: var(--pink);
    font-family: "VT323", "Courier New", monospace;
    font-size: clamp(1.55rem, 2.6vw, 2.5rem);
    line-height: .9;
    letter-spacing: .01em;
    text-transform: none;
    white-space: nowrap;
    text-shadow:
        0 0 4px rgba(255,61,242,.9),
        0 0 12px rgba(255,61,242,.55);
    transform: none;
    margin: 0;
}

.year-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1rem;
    padding-bottom: 4px;
}

.year-nav a {
    color: var(--cyan);
    text-decoration: none;
    font-size: 1.55rem;
}

.year-nav strong { color: var(--green); }

.calendar-grid {
    display: grid;
    margin-top: 5px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.month {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    background: linear-gradient(180deg, rgba(8,20,26,.96), rgba(4,10,14,.96));
    border: 1px solid var(--line);
    box-shadow: inset 0 0 28px rgba(0,245,255,.025);
    padding: 8px 10px;
}

.month h2 {
    margin: 0 0 5px;
    color: var(--cyan);
    font-size: .82rem;
    line-height: 1;
    letter-spacing: .16em;
}

.month h2 span { color: var(--pink); }

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: .52rem;
    text-align: center;
}

.days {
    display: grid;
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 3px;
    min-height: 0;
}

.week-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    min-height: 0;
}

.day {
    position: relative;
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(18,48,58,.5);
    padding: 2px 3px;
    font-size: .61rem;
    color: #88a9b1;
    overflow: hidden;
    z-index: 1;
}

.day.empty {
    border-color: transparent;
    background: transparent;
}

.number {
    position: relative;
    z-index: 5;
}

.week-events {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
    pointer-events: none;
    z-index: 3;
}

.event-span {
    grid-column: var(--span-start) / var(--span-end);
    position: relative;
    display: block;
    min-width: 0;
    border: 2px solid var(--event-color);
    border-radius: 7px;
    overflow: hidden;
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    box-shadow:
        inset 0 0 10px color-mix(in srgb, var(--event-color) 36%, transparent),
        inset 0 0 20px color-mix(in srgb, var(--event-color) 16%, transparent),
        0 0 5px color-mix(in srgb, var(--event-color) 100%, transparent),
        0 0 11px color-mix(in srgb, var(--event-color) 78%, transparent),
        0 0 20px color-mix(in srgb, var(--event-color) 42%, transparent);
    animation: event-frame-flicker 7s infinite;
}

.event-span::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--event-color) 10%, transparent) 0%,
            color-mix(in srgb, var(--event-color) 50%, transparent) 50%,
            color-mix(in srgb, var(--event-color) 100%, transparent) 100%
        );
}

.event-span[style*="--event-text-mask"]::before {
    -webkit-mask-image:
        linear-gradient(#000 0 0),
        var(--event-text-mask);
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-position: center, right 2px center;
    -webkit-mask-size: 100% 100%, auto 50%;
    -webkit-mask-composite: xor;

    mask-image:
        linear-gradient(#000 0 0),
        var(--event-text-mask);
    mask-repeat: no-repeat, no-repeat;
    mask-position: center, right 2px center;
    mask-size: 100% 100%, auto 50%;
    mask-composite: exclude;
}

.event-span-short-text {
    display: none;
}

.event-span-icon-overlay {
    position: absolute;
    z-index: 2;
    right: 6px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 1;
    pointer-events: none;
}

.event-span-icon-overlay svg,
.event-span-icon-overlay img {
    width: 20px;
    height: 20px;
    display: block;
    overflow: visible;
}

.event-span-icon-overlay svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: square;
    stroke-linejoin: miter;
}


.event-span:focus-visible {
    outline: 1px dashed var(--text);
    outline-offset: -4px;
}


@keyframes event-frame-flicker {
    0%, 100% {
        opacity: .96;
        filter: brightness(1);
    }
    49% {
        opacity: .94;
        filter: brightness(.98);
    }
    50% {
        opacity: .80;
        filter: brightness(1.13);
    }
    51% {
        opacity: .96;
        filter: brightness(1);
    }
}

.event-tooltip {
    position: fixed;
    z-index: 10020;
    width: max-content;
    max-width: min(340px, calc(100vw - 20px));
    padding: 10px 12px 9px;
    border: 1px solid var(--event-tooltip-color, var(--cyan));
    background: color-mix(in srgb, var(--panel) 96%, black);
    color: var(--text);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.7),
        0 0 18px color-mix(in srgb, var(--event-tooltip-color, var(--cyan)) 30%, transparent);
    pointer-events: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    line-height: 1.35;
}

.event-tooltip[hidden] {
    display: none;
}

.event-tooltip-title {
    color: var(--cyan);
    font-family: "VT323", "Courier New", monospace;
    font-size: 1.35rem;
    line-height: 1;
}

.event-tooltip-meta {
    margin-top: 4px;
    color: var(--pink);
    font-size: .68rem;
    letter-spacing: .04em;
}

.event-tooltip-description {
    margin-top: 7px;
    color: var(--text);
    font-size: .72rem;
}

.event-tooltip-action {
    margin-top: 8px;
    color: var(--green);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

footer {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    color: var(--muted);
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* CRT atmosphere */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.040) 0px,
            rgba(255,255,255,.040) 1px,
            rgba(0,0,0,.10) 2px,
            rgba(0,0,0,.10) 4px
        );
    mix-blend-mode: screen;
    opacity: .40;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,245,255,.008) 48%,
            rgba(255,255,255,.012) 50%,
            rgba(0,245,255,.006) 52%,
            transparent 100%
        );
    background-size: 100% 11px;
    opacity: .10;
    animation: crt-roll 14s linear infinite;
}

.crt-title {
    text-shadow: 0 0 1px rgba(255,255,255,.55);
}

@keyframes phosphor-flicker {
    0%, 100% { opacity: 1; filter: brightness(1); }
    49% { opacity: .997; filter: brightness(.997); }
    50% { opacity: .988; filter: brightness(.988); }
    51% { opacity: 1; filter: brightness(1); }
}

@keyframes crt-roll {
    from { transform: translateY(-11px); }
    to { transform: translateY(11px); }
}

@media (prefers-reduced-motion: reduce) {
    .brand-terminal,
    .cursor,
    .event-span,
    body::after {
        animation: none !important;
    }
}

/* Public crawlable event detail pages */
.event-detail-shell {
    width: min(860px, calc(100% - 32px));
    margin: 0 auto;
    padding: clamp(28px, 6vw, 72px) 0 60px;
}

.event-detail-back {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--cyan);
    text-decoration: none;
    font-family: "VT323", "Courier New", monospace;
    font-size: 1.25rem;
}

.event-detail-back:hover,
.event-detail-back:focus-visible {
    text-decoration: underline;
}

.event-detail-card {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--event-color) 72%, var(--line));
    background: color-mix(in srgb, var(--panel) 94%, black);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.72),
        0 0 28px color-mix(in srgb, var(--event-color) 22%, transparent);
}

.event-detail-tape {
    height: 12px;
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--event-color) 78%, white),
            var(--event-color) 55%,
            color-mix(in srgb, var(--event-color) 82%, black)
        );
    box-shadow: 0 0 16px color-mix(in srgb, var(--event-color) 34%, transparent);
}

.event-detail-content {
    padding: clamp(22px, 5vw, 44px);
}

.event-detail-kicker {
    margin: 0 0 6px;
    color: var(--event-color);
    font-size: .72rem;
    letter-spacing: .16em;
}

.event-detail-card h1 {
    margin: 0;
    color: var(--text);
    font-family: "VT323", "Courier New", monospace;
    font-size: clamp(2.5rem, 7vw, 5.4rem);
    line-height: .88;
    font-weight: 400;
}

.event-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 34px;
    margin: 28px 0 0;
}

.event-detail-meta div {
    min-width: 140px;
}

.event-detail-meta dt {
    margin: 0 0 3px;
    color: var(--muted);
    font-size: .62rem;
    letter-spacing: .12em;
}

.event-detail-meta dd {
    margin: 0;
    color: var(--cyan);
    font-size: .9rem;
}

.event-detail-description {
    max-width: 68ch;
    margin: 28px 0 0;
    color: var(--text);
    line-height: 1.65;
}

.event-detail-actions {
    margin: 30px 0 0;
}

.event-detail-actions .button {
    background: var(--event-color);
}

@media (max-width: 620px) {
    .event-detail-shell {
        width: min(100% - 20px, 860px);
        padding-top: 24px;
    }

    .event-detail-meta {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }
}


/* Admin */
.admin-page-root,
.admin-page {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.admin-shell {
    width: min(980px, calc(100% - 32px));
    margin: 40px auto;
}

.admin-card {
    background: rgba(7,16,22,.95);
    border: 1px solid var(--line);
    padding: 22px;
    margin-bottom: 18px;
}

.admin-card h1,
.admin-card h2 { color: var(--cyan); margin-top: 0; }

label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: .78rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.admin-shell input,
textarea,
select,
button {
    width: 100%;
    background: #03080b;
    color: var(--text);
    border: 1px solid #1a414c;
    padding: 11px 12px;
    font: inherit;
}

textarea { min-height: 110px; resize: vertical; }

button, .button {
    display: inline-block;
    width: auto;
    cursor: pointer;
    text-decoration: none;
    color: #001014;
    background: var(--cyan);
    border: 0;
    font-weight: 800;
    padding: 10px 14px;
}

.button.secondary { background: #163039; color: var(--text); }
.button.danger { background: var(--pink); color: #150014; }

.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.event-list {
    width: 100%;
    border-collapse: collapse;
}

.event-list th, .event-list td {
    padding: 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.error { color: var(--pink); }

/* On a normal desktop/laptop viewport, the entire year fits without scrolling. */
@media (min-width: 1101px) and (min-height: 650px) {
    html, body { height: 100%; overflow: hidden; }

    .shell {
        height: 100dvh;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .shell.demo-mode {
        grid-template-rows: auto auto minmax(0, 1fr) auto;
    }

    .calendar-grid {
        min-height: 0;
        height: 100%;
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .calendar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid { grid-template-columns: 1fr; }
    .brand-command-wrap { max-width: 44vw; }
}

@media (max-width: 520px) {
    .calendar-grid { grid-template-columns: 1fr; }
    .topbar { align-items: flex-start; }
    .brand-terminal { white-space: normal; flex-wrap: wrap; }
    #terminal-input { max-width: 70vw; }
}


.terminal-suggestion {
    color: var(--pink);
    padding: 0 .04em;
}

.terminal-suggestion.selected {
    color: var(--bg);
    background: var(--pink);
    text-shadow: none;
    box-shadow: 0 0 5px color-mix(in srgb, var(--pink) 45%, transparent);
}


.terminal-suggestion-list {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    will-change: transform, opacity;
}






.terminal-suggestion-list.snap-next {
    animation: suggestion-snap-next 280ms cubic-bezier(.18,.86,.25,1);
}

.terminal-suggestion-list.snap-prev {
    animation: suggestion-snap-prev 280ms cubic-bezier(.18,.86,.25,1);
}

@keyframes suggestion-snap-next {
    0%   { transform: translateX(28px); }
    70%  { transform: translateX(-4px); }
    88%  { transform: translateX(1.5px); }
    100% { transform: translateX(0); }
}

@keyframes suggestion-snap-prev {
    0%   { transform: translateX(-28px); }
    70%  { transform: translateX(4px); }
    88%  { transform: translateX(-1.5px); }
    100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .terminal-suggestion-list.snap-next,
    .terminal-suggestion-list.snap-prev {
        animation: none !important;
    }
}


.terminal-suggestion-list.manual-list {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.terminal-output.is-manual-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    white-space: normal !important;
    overflow-x: visible !important;
    overflow-y: visible;
    line-height: .95;
}

.terminal-manual-command,
.terminal-manual-description {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: normal !important;
}

.terminal-manual-description {
    margin-top: .24em;
    overflow-wrap: anywhere;
}


.terminal-output::-webkit-scrollbar {
    display: none;
}


/* Impressum + privacy */
.legal-page {
    width: min(920px, 96vw);
    margin: 0 auto;
    padding: 34px 0 60px;
}

.legal-page h1,
.legal-page h2 {
    font-family: "VT323", "Courier New", monospace;
    font-weight: 400;
}

.legal-page h1 {
    margin: 0 0 22px;
    color: var(--cyan);
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: .9;
}

.legal-page h2 {
    margin: 28px 0 8px;
    color: var(--pink);
    font-size: 1.8rem;
}

.legal-page p,
.legal-page address {
    max-width: 76ch;
    line-height: 1.65;
    color: var(--text);
}

.legal-page address {
    font-style: normal;
}

.legal-back {
    display: inline-block;
    margin-top: 28px;
    color: var(--cyan);
    text-decoration: none;
}

footer a {
    color: inherit;
    text-decoration: none;
}

footer a:hover,
.legal-back:hover {
    text-decoration: underline;
}


/* HACKERS // UV gaffer tape event markers */
:root[data-theme="hackers"] .event-span {
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--event-color) 88%, #f8ff6a) 0%,
            color-mix(in srgb, var(--event-color) 78%, #dfff4d) 48%,
            color-mix(in srgb, var(--event-color) 84%, #8dff58) 100%
        );
    clip-path: polygon(
        4px 0,
        calc(100% - 4px) 0,
        100% 10%,
        calc(100% - 3px) 20%,
        100% 31%,
        calc(100% - 4px) 42%,
        100% 54%,
        calc(100% - 3px) 66%,
        100% 78%,
        calc(100% - 4px) 89%,
        calc(100% - 4px) 100%,
        4px 100%,
        0 89%,
        3px 78%,
        0 66%,
        4px 54%,
        0 42%,
        3px 31%,
        0 20%,
        4px 10%
    );
    box-shadow:
        0 0 3px color-mix(in srgb, var(--event-color) 48%, transparent),
        0 0 8px color-mix(in srgb, var(--event-color) 20%, transparent);
    animation: none;
    filter: saturate(1.18) brightness(1.02);
}

/* woven/plastic tape texture; straight top/bottom, torn ends */
:root[data-theme="hackers"] .event-span::before,
:root[data-theme="hackers"] .event-span[style*="--event-text-mask"]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), transparent 24%, rgba(0,0,0,.06) 72%, rgba(255,255,255,.08)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px);
    opacity: .72;
    -webkit-mask-image: none;
    mask-image: none;
    mix-blend-mode: overlay;
}

/* marker-pen writing on the tape */
:root[data-theme="hackers"] .event-span-short-text {
    position: absolute;
    z-index: 4;
    right: 7px;
    top: 50%;
    display: block;
    max-width: calc(100% - 19px);
    overflow: hidden;
    transform: translateY(-52%) rotate(-1.1deg);
    color: rgba(3, 8, 8, .90);
    font-family: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
    font-size: clamp(.48rem, .62vw, .72rem);
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
    text-align: right;
    text-shadow:
        .35px .35px 0 rgba(0,0,0,.28),
        -.25px .15px 0 rgba(0,0,0,.15);
    opacity: .96;
    pointer-events: none;
}

/* existing icons should look printed/stuck onto the same tape */
:root[data-theme="hackers"] .event-span-icon-overlay {
    z-index: 4;
    right: 7px;
    color: rgba(3,8,8,.88);
    filter: none;
    opacity: .90;
}

:root[data-theme="hackers"] .event-span-icon-overlay img {
    filter: brightness(0) saturate(100%);
    opacity: .84;
}

:root[data-theme="hackers"] .event-span:focus-visible {
    outline: 1px dashed rgba(245,255,220,.85);
    outline-offset: 2px;
}

/* tiny variations make separate pieces feel hand-torn, not UI-generated */
:root[data-theme="hackers"] .week-row:nth-child(2n) .event-span {
    clip-path: polygon(
        3px 0,
        calc(100% - 5px) 0,
        100% 12%,
        calc(100% - 4px) 24%,
        100% 37%,
        calc(100% - 2px) 50%,
        100% 63%,
        calc(100% - 5px) 77%,
        100% 89%,
        calc(100% - 3px) 100%,
        5px 100%,
        0 88%,
        4px 74%,
        0 61%,
        3px 48%,
        0 35%,
        5px 22%,
        0 10%
    );
}


/* HACKERS // tape correction v2 */
:root[data-theme="hackers"] .event-span,
:root[data-theme="hackers"] .event-span:hover,
:root[data-theme="hackers"] .event-span:focus {
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--event-color) 82%, white) 0%,
            color-mix(in srgb, var(--event-color) 94%, white) 22%,
            var(--event-color) 58%,
            color-mix(in srgb, var(--event-color) 82%, black) 100%
        ) !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
    opacity: .94;
    overflow: hidden;

    /* straight top/bottom, clearly torn left/right edges */
    clip-path: polygon(
        9px 0,
        calc(100% - 9px) 0,

        100% 7%,
        calc(100% - 5px) 15%,
        100% 24%,
        calc(100% - 8px) 33%,
        100% 43%,
        calc(100% - 4px) 53%,
        100% 63%,
        calc(100% - 7px) 73%,
        100% 83%,
        calc(100% - 5px) 92%,

        calc(100% - 9px) 100%,
        9px 100%,

        0 92%,
        6px 83%,
        0 73%,
        8px 63%,
        0 53%,
        5px 43%,
        0 33%,
        7px 24%,
        0 15%,
        5px 7%
    ) !important;
}

/* Tape surface: dull UV plastic/fabric, not a neon button. */
:root[data-theme="hackers"] .event-span::before,
:root[data-theme="hackers"] .event-span[style*="--event-text-mask"]::before {
    content: "" !important;
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.04) 24%,
            rgba(30,45,0,.05) 58%,
            rgba(10,20,0,.10) 100%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.045) 0 1px,
            transparent 1px 5px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(35,55,0,.035) 0 1px,
            transparent 1px 3px
        ) !important;
    opacity: .72 !important;
    mix-blend-mode: multiply;
    -webkit-mask: none !important;
    mask: none !important;
    pointer-events: none;
}

/* One handwritten marker label only. */
:root[data-theme="hackers"] .event-span-short-text {
    display: block !important;
    position: absolute;
    z-index: 6;
    right: 10px;
    top: 50%;
    max-width: calc(100% - 26px);
    overflow: hidden;
    transform: translateY(-51%) rotate(-1.4deg);
    color: #10160a !important;
    font-family: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive !important;
    font-size: clamp(.72rem, .86vw, .98rem) !important;
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.015em;
    white-space: nowrap;
    text-align: right;
    text-shadow: none !important;
    opacity: .95;
    pointer-events: none;
}

/* Old cut-out label is disabled in this theme. */
:root[data-theme="hackers"] .event-span[style*="--event-text-mask"]::before {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Date numbers should look like they were written over the tape, not glow above it. */
:root[data-theme="hackers"] .week-row:has(.event-span) .number {
    text-shadow: none;
}

/* Icons become black marker-like prints on the tape. */
:root[data-theme="hackers"] .event-span-icon-overlay {
    color: #11160a !important;
    opacity: .82 !important;
    filter: none !important;
}

:root[data-theme="hackers"] .event-span-icon-overlay img {
    filter: brightness(0) saturate(100%) !important;
    opacity: .82;
}

/* Alternate hand-torn edge pattern so multiple strips do not look cloned. */
:root[data-theme="hackers"] .week-row:nth-child(even) .event-span {
    clip-path: polygon(
        8px 0,
        calc(100% - 10px) 0,

        100% 8%,
        calc(100% - 7px) 18%,
        100% 29%,
        calc(100% - 4px) 39%,
        100% 51%,
        calc(100% - 8px) 62%,
        100% 74%,
        calc(100% - 5px) 86%,
        100% 93%,

        calc(100% - 8px) 100%,
        10px 100%,

        0 91%,
        7px 81%,
        0 70%,
        4px 59%,
        0 47%,
        8px 36%,
        0 25%,
        5px 14%,
        0 7%
    ) !important;
}


/* HACKERS // single-day label inset */
:root[data-theme="hackers"] .event-span[style*="--span-end:"]:not([style*="--span-end: 3"]) .event-span-short-text {
    right: 12px;
}

/* One-day event strips need a little more breathing room at the torn right edge. */
:root[data-theme="hackers"] .event-span-short-text {
    right: 11px;
}


/* HACKERS // tape layer fix v3 */
/* The outer event is NOT clipped. The torn tape lives only in ::before,
   so handwriting/icons can sit freely above it. */
:root[data-theme="hackers"] .event-span,
:root[data-theme="hackers"] .week-row:nth-child(even) .event-span,
:root[data-theme="hackers"] .week-row:nth-child(2n) .event-span {
    background: transparent !important;
    clip-path: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    isolation: isolate;
}

/* Actual tape layer */
:root[data-theme="hackers"] .event-span::before,
:root[data-theme="hackers"] .event-span[style*="--event-text-mask"]::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    opacity: .94 !important;
    mix-blend-mode: normal !important;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.14) 0%,
            rgba(255,255,255,.03) 22%,
            rgba(20,35,0,.05) 68%,
            rgba(10,20,0,.10) 100%
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.035) 0 1px,
            transparent 1px 5px
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--event-color) 82%, white) 0%,
            color-mix(in srgb, var(--event-color) 94%, white) 22%,
            var(--event-color) 58%,
            color-mix(in srgb, var(--event-color) 82%, black) 100%
        ) !important;
    clip-path: polygon(
        9px 0,
        calc(100% - 9px) 0,
        100% 7%,
        calc(100% - 5px) 15%,
        100% 24%,
        calc(100% - 8px) 33%,
        100% 43%,
        calc(100% - 4px) 53%,
        100% 63%,
        calc(100% - 7px) 73%,
        100% 83%,
        calc(100% - 5px) 92%,
        calc(100% - 9px) 100%,
        9px 100%,
        0 92%,
        6px 83%,
        0 73%,
        8px 63%,
        0 53%,
        5px 43%,
        0 33%,
        7px 24%,
        0 15%,
        5px 7%
    ) !important;
    -webkit-mask: none !important;
    mask: none !important;
    pointer-events: none;
}

/* Alternate torn edge only on the tape layer */
:root[data-theme="hackers"] .week-row:nth-child(even) .event-span::before {
    clip-path: polygon(
        8px 0,
        calc(100% - 10px) 0,
        100% 8%,
        calc(100% - 7px) 18%,
        100% 29%,
        calc(100% - 4px) 39%,
        100% 51%,
        calc(100% - 8px) 62%,
        100% 74%,
        calc(100% - 5px) 86%,
        100% 93%,
        calc(100% - 8px) 100%,
        10px 100%,
        0 91%,
        7px 81%,
        0 70%,
        4px 59%,
        0 47%,
        8px 36%,
        0 25%,
        5px 14%,
        0 7%
    ) !important;
}

/* Handwriting always above the tape and never clipped */
:root[data-theme="hackers"] .event-span-short-text {
    z-index: 20 !important;
    right: 9px !important;
    max-width: none !important;
    overflow: visible !important;
    clip-path: none !important;
}

/* Same for icons */
:root[data-theme="hackers"] .event-span-icon-overlay {
    z-index: 20 !important;
}


/* SEGA // 90s arcade default theme */
:root[data-theme="sega"] body,
:root[data-theme="default"] body {
    background:
        radial-gradient(circle at 50% -15%, rgba(36,148,255,.25) 0, transparent 44%),
        linear-gradient(rgba(55,156,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(55,156,255,.04) 1px, transparent 1px),
        linear-gradient(180deg, #071126 0%, #0b2146 48%, #07152e 100%);
    background-size: auto, 18px 18px, 18px 18px, auto;
}

:root[data-theme="sega"] .topbar,
:root[data-theme="default"] .topbar {
    border-bottom-color: rgba(35,145,255,.72);
    box-shadow:
        0 1px 0 rgba(255,255,255,.08),
        0 10px 34px rgba(0,83,210,.08);
}

:root[data-theme="sega"] .brand-prefix,
:root[data-theme="default"] .brand-prefix,
:root[data-theme="sega"] #terminal-input,
:root[data-theme="default"] #terminal-input,
:root[data-theme="sega"] .cursor,
:root[data-theme="default"] .cursor {
    color: #f7fbff;
    text-shadow:
        2px 0 0 #087ce8,
        -2px 0 0 #087ce8,
        0 0 5px rgba(19,137,255,.55);
}

:root[data-theme="sega"] .terminal-hint,
:root[data-theme="default"] .terminal-hint {
    color: #6b8cac;
}

:root[data-theme="sega"] .theme-indicator,
:root[data-theme="default"] .theme-indicator {
    color: #18b8ff;
    text-shadow:
        0 0 3px rgba(24,184,255,.85),
        0 0 10px rgba(24,184,255,.28);
}

:root[data-theme="sega"] .year-nav strong,
:root[data-theme="default"] .year-nav strong {
    color: #ffe229;
    text-shadow: 0 0 7px rgba(255,226,41,.32);
}

:root[data-theme="sega"] .year-nav a,
:root[data-theme="default"] .year-nav a {
    color: #f4fbff;
    text-shadow: 0 0 5px rgba(24,184,255,.35);
}

:root[data-theme="sega"] .category-filter,
:root[data-theme="default"] .category-filter {
    color: #f4fbff;
    text-shadow: 0 0 4px rgba(24,184,255,.24);
}

:root[data-theme="sega"] .category-filter::before,
:root[data-theme="default"] .category-filter::before {
    color: #18b8ff;
}

:root[data-theme="sega"] .category-filter:nth-child(3n+2),
:root[data-theme="default"] .category-filter:nth-child(3n+2) {
    color: #18b8ff;
}

:root[data-theme="sega"] .category-filter:nth-child(3n),
:root[data-theme="default"] .category-filter:nth-child(3n) {
    color: #ffe229;
}

:root[data-theme="sega"] .category-filter:not(.is-active),
:root[data-theme="default"] .category-filter:not(.is-active) {
    color: #506b86;
    text-shadow: none;
}

:root[data-theme="sega"] .month,
:root[data-theme="default"] .month {
    background:
        linear-gradient(180deg, rgba(7,21,45,.96), rgba(2,9,22,.97));
    border-color: #1558a8;
    box-shadow:
        inset 0 0 0 1px rgba(67,169,255,.035),
        inset 0 0 26px rgba(13,112,223,.035);
}

:root[data-theme="sega"] .month:nth-child(4n+1),
:root[data-theme="default"] .month:nth-child(4n+1) { border-color: #167ad8; }
:root[data-theme="sega"] .month:nth-child(4n+2),
:root[data-theme="default"] .month:nth-child(4n+2) { border-color: #209dff; }
:root[data-theme="sega"] .month:nth-child(4n+3),
:root[data-theme="default"] .month:nth-child(4n+3) { border-color: #3dbfff; }
:root[data-theme="sega"] .month:nth-child(4n+4),
:root[data-theme="default"] .month:nth-child(4n+4) { border-color: #f0c91c; }

:root[data-theme="sega"] .month h2,
:root[data-theme="default"] .month h2 {
    color: #f7fbff;
    text-shadow:
        1px 0 0 #087ce8,
        0 0 4px rgba(24,184,255,.25);
}

:root[data-theme="sega"] .month h2 span,
:root[data-theme="default"] .month h2 span {
    color: #18b8ff;
}

:root[data-theme="sega"] .month:nth-child(4n+4) h2 span,
:root[data-theme="default"] .month:nth-child(4n+4) h2 span {
    color: #ffe229;
}

:root[data-theme="sega"] .day,
:root[data-theme="default"] .day {
    border-color: rgba(31,91,145,.36);
    color: #8ca8c2;
}

:root[data-theme="sega"] footer,
:root[data-theme="default"] footer {
    color: #6f91b8;
}

:root[data-theme="sega"] .event-tooltip,
:root[data-theme="default"] .event-tooltip {
    border-color: #18b8ff;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.75),
        0 0 18px rgba(24,184,255,.14);
}


/* SEGA // Green Hill platform pass */
:root[data-theme="sega"] .calendar-grid {
    position: relative;
    padding: 4px;
    border: 1px solid rgba(116,77,33,.18);
    background:
        linear-gradient(90deg, rgba(0,100,220,.02), transparent 20% 80%, rgba(0,100,220,.02)),
        rgba(1,7,18,.18);
}

:root[data-theme="sega"] .month {
    position: relative;
    overflow: hidden;
    border: 2px solid #8b5a2b !important;
    background:
        linear-gradient(180deg, rgba(9,36,82,.96) 0%, rgba(4,18,48,.97) 54%, rgba(3,13,34,.98) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(117,199,255,.05),
        inset 0 0 24px rgba(0,89,214,.06),
        0 0 0 1px rgba(0,0,0,.28);
    padding-bottom: 10px;
}

/* Green Hill grass + checkerboard earth along the month base */
:root[data-theme="sega"] .month::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background:
        linear-gradient(#42ef4d 0 3px, #2cab33 3px 4px, transparent 4px),
        conic-gradient(
            from 45deg,
            #8b5a2b 0 25%,
            #b97633 0 50%,
            #8b5a2b 0 75%,
            #b97633 0
        );
    background-size: 100% 100%, 8px 8px;
    box-shadow: 0 -1px 0 #7cff69;
    opacity: .96;
}

:root[data-theme="sega"] .month > * {
    position: relative;
    z-index: 1;
}

/* Plain month heading: no rings, no red speed stripe */
:root[data-theme="sega"] .month h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 19px;
    color: #f8fbff !important;
    letter-spacing: .12em;
    text-shadow:
        1px 0 0 #056ed4,
        -1px 0 0 #056ed4;
}

:root[data-theme="sega"] .month h2 span {
    display: inline;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0;
    color: #18b8ff !important;
    background: transparent;
    box-shadow: none;
    font-size: inherit;
    letter-spacing: inherit;
}

:root[data-theme="sega"] .month h2::after {
    content: none !important;
}

:root[data-theme="sega"] .weekdays {
    color: #76caff;
    font-weight: 700;
    text-shadow: 0 0 3px rgba(24,184,255,.18);
}

:root[data-theme="sega"] .day {
    background:
        linear-gradient(180deg, rgba(9,36,73,.32), rgba(2,12,31,.18));
    border-color: rgba(34,115,184,.38);
    color: #d8eeff;
}

:root[data-theme="sega"] .week-row .day:nth-child(6),
:root[data-theme="sega"] .week-row .day:nth-child(7) {
    background:
        linear-gradient(180deg, rgba(32,126,216,.18), rgba(4,20,47,.24));
}

:root[data-theme="sega"] .number {
    color: #eaf7ff;
    text-shadow: 0 0 2px rgba(17,121,255,.22);
}

/* Events become Green Hill platforms:
   grass on top, checkerboard earth underneath. */
:root[data-theme="sega"] .event-span {
    border: 2px solid #74471f !important;
    border-radius: 1px !important;
    background:
        linear-gradient(
            180deg,
            #61f45f 0 18%,
            #30b53b 18% 28%,
            transparent 28%
        ),
        conic-gradient(
            from 45deg,
            #8b5a2b 0 25%,
            #c47a31 0 50%,
            #8b5a2b 0 75%,
            #c47a31 0
        ) !important;
    background-size: 100% 100%, 10px 10px !important;
    box-shadow:
        inset 0 1px 0 rgba(190,255,150,.35),
        0 0 0 1px rgba(0,0,0,.22) !important;
    animation: none !important;
    filter: none !important;
    overflow: hidden;
}

/* Remove old red/white and generic gradient overlays. */
:root[data-theme="sega"] .event-span::before,
:root[data-theme="sega"] .event-span[style*="--event-text-mask"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.10) 0%,
            rgba(255,255,255,.02) 22%,
            rgba(0,0,0,.06) 100%
        ) !important;
    opacity: .55;
    -webkit-mask: none !important;
    mask: none !important;
    pointer-events: none;
}

/* Labels/icons sit clearly on the platform. */
:root[data-theme="sega"] .event-span-short-text {
    display: block;
    z-index: 4;
    color: #fffef4 !important;
    text-shadow:
        1px 1px 0 #5e3716,
        0 0 2px rgba(0,0,0,.45) !important;
}

:root[data-theme="sega"] .event-span-icon-overlay {
    z-index: 4;
    color: #fffef4;
    filter: drop-shadow(1px 1px 0 #5e3716);
}

:root[data-theme="sega"] .event-tooltip-title {
    color: #ffe229;
}

:root[data-theme="sega"] .event-tooltip-meta {
    color: #18b8ff;
}



/* HACKERS // left-aligned tape labels */
:root[data-theme="hackers"] .event-span-short-text {
    left: 9px !important;
    right: auto !important;
    max-width: calc(100% - 18px) !important;
    overflow: visible !important;
    text-align: left !important;
    z-index: 20 !important;
}


/* HACKERS // subtle UV tape glow */
:root[data-theme="hackers"] .event-span::before,
:root[data-theme="hackers"] .event-span[style*="--event-text-mask"]::before {
    filter:
        drop-shadow(0 0 2px rgba(214,255,58,.30))
        drop-shadow(0 0 5px rgba(162,255,44,.16)) !important;
}


/* HACKERS // strong UV tape glow */
:root[data-theme="hackers"] .event-span::before,
:root[data-theme="hackers"] .event-span[style*="--event-text-mask"]::before {
    filter:
        drop-shadow(0 0 2px rgba(235,255,90,.95))
        drop-shadow(0 0 5px rgba(202,255,55,.78))
        drop-shadow(0 0 10px rgba(165,255,35,.52))
        drop-shadow(0 0 18px rgba(125,255,25,.30)) !important;
}

:root[data-theme="hackers"] .event-span {
    filter:
        drop-shadow(0 0 4px rgba(205,255,55,.45))
        drop-shadow(0 0 10px rgba(150,255,30,.24)) !important;
}


/* SEGA // golden ring month frames */
:root[data-theme="sega"] .month {
    border: 2px solid transparent !important;
    border-image:
        linear-gradient(
            135deg,
            #fff7a8 0%,
            #ffd92f 16%,
            #e2ad0a 38%,
            #a96d00 52%,
            #ffe45c 70%,
            #c48700 86%,
            #fff178 100%
        ) 1 !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,246,174,.34),
        inset 0 0 24px rgba(0,89,214,.06),
        0 0 0 1px rgba(92,57,0,.50),
        0 0 7px rgba(255,211,39,.16) !important;
}


/* SEGA // darker checkerboard pixel sky calendar */
:root[data-theme="sega"] .month {
    background:
        conic-gradient(
            from 45deg,
            #4a9fe3 0 25%,
            #3f91d8 0 50%,
            #4a9fe3 0 75%,
            #3f91d8 0
        ) !important;
    background-size: 10px 10px !important;
}

/* Hard Sonic-blue day grid over the stronger checkerboard. */
:root[data-theme="sega"] .day {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.025) 0%,
            rgba(0,37,101,.12) 100%
        ) !important;
    border-color: rgba(2,42,116,.94) !important;
    color: #05285f !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 0 -1px 0 rgba(0,0,0,.17) !important;
}

:root[data-theme="sega"] .week-row .day:nth-child(6),
:root[data-theme="sega"] .week-row .day:nth-child(7) {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045) 0%,
            rgba(0,35,98,.16) 100%
        ) !important;
}

:root[data-theme="sega"] .number {
    color: #042456 !important;
    text-shadow: none !important;
    font-weight: 700;
}

:root[data-theme="sega"] .weekdays {
    color: #063a86 !important;
    text-shadow: none !important;
}

:root[data-theme="sega"] .month h2 {
    color: #eaf6ff !important;
    text-shadow:
        1px 1px 0 #004cae,
        2px 2px 0 rgba(0,0,0,.16) !important;
}

:root[data-theme="sega"] .month h2 span {
    color: #a8dcff !important;
}

/* Keep Green Hill event platforms crisp against the darker pixel sky. */
:root[data-theme="sega"] .event-span {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 1px 0 rgba(0,0,0,.18),
        0 0 0 1px rgba(0,0,0,.22) !important;
}



/* SEGA // flat day cells */
:root[data-theme="sega"] .day {
    background: rgba(255,255,255,.055) !important;
    border-color: #083f93 !important;
    color: #05285f !important;
    box-shadow: none !important;
}

:root[data-theme="sega"] .week-row .day:nth-child(6),
:root[data-theme="sega"] .week-row .day:nth-child(7) {
    background: rgba(255,255,255,.075) !important;
}

/* Keep all day-cell visuals hard/pixel-flat. */
:root[data-theme="sega"] .day::before,
:root[data-theme="sega"] .day::after {
    background: none !important;
    box-shadow: none !important;
    filter: none !important;
}


/* SEGA // pixel event labels */
:root[data-theme="sega"] .event-span-short-text {
    display: block !important;
    position: absolute !important;
    z-index: 6 !important;
    left: 7px !important;
    right: 7px !important;
    top: 50% !important;
    max-width: none !important;
    overflow: hidden !important;
    transform: translateY(calc(-50% + 3px)) !important;
    color: #fff8cf !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
    font-size: clamp(.56rem, .66vw, .76rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-shadow:
        1px 1px 0 #704018,
        -1px 0 0 rgba(76,38,8,.45) !important;
    pointer-events: none !important;
}

/* Keep icon events vertically centered in the same platform. */
:root[data-theme="sega"] .event-span-icon-overlay {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Keep icon events vertically centered in the same platform. */
:root[data-theme="sega"] .event-span-icon-overlay {
    top: 50% !important;
    transform: translateY(-50%) !important;
}


/* SEGA // white month frames + pixel month labels */
:root[data-theme="sega"] .month h2 {
    font-family: "Silkscreen", "Terminus", monospace !important;
    font-size: clamp(.62rem, .72vw, .82rem) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: uppercase;
}

:root[data-theme="sega"] .month h2 span {
    font-family: "Silkscreen", "Terminus", monospace !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

:root[data-theme="sega"] .month {
    border: 2px solid #083f93 !important;
    border-image: none !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 0 0 1px rgba(2,32,82,.36) !important;
}


/* C64 // authentic BASIC screen pass */
:root[data-theme="c64"] {
    --bg: #7869c4;
    --panel: #40318d;
    --line: #7869c4;
    --text: #a9a3e9;
    --muted: #7e77c7;
    --cyan: #a9a3e9;
    --green: #a9a3e9;
    --pink: #ffffff;
}

:root[data-theme="c64"] body {
    background: #7869c4 !important;
    color: #a9a3e9;
    image-rendering: pixelated;
}

:root[data-theme="c64"] .shell {
    min-height: 100vh;
    background: #40318d;
    border: 12px solid #7869c4;
    padding: 12px 1.4vw 10px;
}

/* C64 screen = flat colors, square geometry, no generic neon. */
:root[data-theme="c64"] .topbar {
    border-bottom: 2px solid #a9a3e9;
    box-shadow: none;
}

:root[data-theme="c64"] .brand-terminal,
:root[data-theme="c64"] .brand-prefix,
:root[data-theme="c64"] #terminal-input,
:root[data-theme="c64"] .terminal-hint,
:root[data-theme="c64"] .theme-indicator,
:root[data-theme="c64"] .year-nav,
:root[data-theme="c64"] .category-filter {
    font-family: "Silkscreen", "Terminus", monospace !important;
    text-shadow: none !important;
}

:root[data-theme="c64"] .brand-prefix,
:root[data-theme="c64"] #terminal-input,
:root[data-theme="c64"] .theme-indicator,
:root[data-theme="c64"] .year-nav strong,
:root[data-theme="c64"] .year-nav a {
    color: #a9a3e9 !important;
}

:root[data-theme="c64"] .terminal-hint {
    color: #7f78c8 !important;
}

:root[data-theme="c64"] .category-filter {
    color: #a9a3e9 !important;
}

:root[data-theme="c64"] .category-filter::before {
    color: #ffffff !important;
}

:root[data-theme="c64"] .category-filter:not(.is-active) {
    color: #6f68b2 !important;
}

/* Calendar months as little C64 BASIC screens. */
:root[data-theme="c64"] .calendar-grid {
    background: transparent !important;
    border: 0 !important;
}

:root[data-theme="c64"] .month {
    background: #40318d !important;
    border: 2px solid #7869c4 !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 0 0 1px rgba(169,163,233,.12) !important;
    overflow: hidden;
}

:root[data-theme="c64"] .month h2 {
    font-family: "Silkscreen", "Terminus", monospace !important;
    font-size: clamp(.60rem, .70vw, .80rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    color: #a9a3e9 !important;
    text-shadow: none !important;
    text-transform: uppercase;
}

:root[data-theme="c64"] .month h2 span {
    color: #ffffff !important;
    font-family: inherit !important;
    font-weight: 400 !important;
}

:root[data-theme="c64"] .weekdays {
    font-family: "Silkscreen", "Terminus", monospace !important;
    color: #a9a3e9 !important;
    text-shadow: none !important;
}

:root[data-theme="c64"] .day,
:root[data-theme="c64"] .week-row .day:nth-child(6),
:root[data-theme="c64"] .week-row .day:nth-child(7) {
    background: #40318d !important;
    border-color: rgba(169,163,233,.38) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #a9a3e9 !important;
}

:root[data-theme="c64"] .number {
    color: #a9a3e9 !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
    font-weight: 400 !important;
    text-shadow: none !important;
}

/* Events: inverse-video BASIC style instead of neon bars. */
:root[data-theme="c64"] .event-span {
    border: 0 !important;
    border-radius: 0 !important;
    background: #a9a3e9 !important;
    box-shadow: none !important;
    filter: none !important;
    animation: none !important;
    overflow: hidden;
}

:root[data-theme="c64"] .event-span::before,
:root[data-theme="c64"] .event-span[style*="--event-text-mask"]::before {
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 0 !important;
}

:root[data-theme="c64"] .event-span-short-text {
    display: block !important;
    position: absolute !important;
    z-index: 5 !important;
    left: 5px !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: none !important;
    overflow: hidden !important;
    color: #40318d !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
    font-size: clamp(.50rem, .58vw, .68rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: none !important;
    white-space: nowrap !important;
}

:root[data-theme="c64"] .event-span-icon-overlay {
    color: #40318d !important;
    filter: none !important;
    opacity: 1 !important;
}

:root[data-theme="c64"] .event-span-icon-overlay img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(44%) saturate(2208%) hue-rotate(230deg) brightness(75%) contrast(95%) !important;
}

:root[data-theme="c64"] .event-tooltip {
    background: #40318d !important;
    color: #a9a3e9 !important;
    border: 2px solid #a9a3e9 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
}

:root[data-theme="c64"] .event-tooltip-title,
:root[data-theme="c64"] .event-tooltip-meta {
    color: #ffffff !important;
    text-shadow: none !important;
}

:root[data-theme="c64"] footer {
    color: #a9a3e9 !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
}


/* AMIGA // classic Workbench pass */
:root[data-theme="amiga"] {
    --bg: #0055aa;
    --panel: #0055aa;
    --line: #ffffff;
    --text: #ffffff;
    --muted: #7fbfff;
    --cyan: #ffffff;
    --green: #ff8800;
    --pink: #ff8800;
}

/* Classic Workbench: flat four-colour desktop, no neon gradients. */
:root[data-theme="amiga"] body {
    background: #0055aa !important;
    color: #ffffff;
    image-rendering: pixelated;
}

:root[data-theme="amiga"] .shell {
    background: #0055aa;
}

:root[data-theme="amiga"] .topbar {
    border-bottom: 2px solid #ffffff !important;
    box-shadow:
        0 2px 0 #000000,
        0 4px 0 #ff8800 !important;
}

:root[data-theme="amiga"] .brand-terminal,
:root[data-theme="amiga"] .brand-prefix,
:root[data-theme="amiga"] #terminal-input,
:root[data-theme="amiga"] .terminal-hint,
:root[data-theme="amiga"] .theme-indicator,
:root[data-theme="amiga"] .year-nav,
:root[data-theme="amiga"] .category-filter {
    font-family: "Silkscreen", "Terminus", monospace !important;
    text-shadow: none !important;
}

:root[data-theme="amiga"] .brand-prefix,
:root[data-theme="amiga"] #terminal-input {
    color: #ffffff !important;
}

:root[data-theme="amiga"] .terminal-hint {
    color: #7fbfff !important;
}

:root[data-theme="amiga"] .theme-indicator {
    color: #ff8800 !important;
}

:root[data-theme="amiga"] .year-nav strong {
    color: #ffffff !important;
}

:root[data-theme="amiga"] .year-nav a {
    color: #ff8800 !important;
}

:root[data-theme="amiga"] .category-filter {
    color: #ffffff !important;
}

:root[data-theme="amiga"] .category-filter::before {
    color: #ff8800 !important;
}

:root[data-theme="amiga"] .category-filter:not(.is-active) {
    color: #72a8dd !important;
}

/* Every month becomes a small Workbench window. */
:root[data-theme="amiga"] .month {
    position: relative;
    overflow: hidden;
    background: #0055aa !important;
    border: 2px solid #ffffff !important;
    border-radius: 0 !important;
    box-shadow:
        2px 2px 0 #000000,
        -1px -1px 0 #7fbfff !important;
    padding-top: 20px;
}

/* White Workbench title bar with orange close gadget. */
:root[data-theme="amiga"] .month h2 {
    position: absolute !important;
    z-index: 6;
    left: 0;
    right: 0;
    top: 0;
    height: 18px;
    margin: 0 !important;
    padding: 3px 24px 2px 6px !important;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #ffffff !important;
    color: #0055aa !important;
    border-bottom: 2px solid #000000;
    font-family: "Silkscreen", "Terminus", monospace !important;
    font-size: clamp(.52rem, .60vw, .68rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

:root[data-theme="amiga"] .month h2 span {
    color: #0055aa !important;
    font-family: inherit !important;
    font-weight: 700 !important;
}

/* Little square Workbench-style window gadget. */
:root[data-theme="amiga"] .month h2::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 3px;
    width: 10px;
    height: 10px;
    background: #ff8800;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
}

/* Calendar grid: flat pixels and hard borders. */
:root[data-theme="amiga"] .weekdays {
    color: #ffffff !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
    text-shadow: none !important;
}

:root[data-theme="amiga"] .day,
:root[data-theme="amiga"] .week-row .day:nth-child(6),
:root[data-theme="amiga"] .week-row .day:nth-child(7) {
    background: #0055aa !important;
    border-color: rgba(255,255,255,.44) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

:root[data-theme="amiga"] .number {
    color: #ffffff !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
    font-weight: 400 !important;
    text-shadow: none !important;
}

/* Orange Workbench-style event gadgets with hard 3-D bevels. */
:root[data-theme="amiga"] .event-span {
    border: 0 !important;
    border-radius: 0 !important;
    background: #ff8800 !important;
    box-shadow:
        inset 2px 2px 0 #ffffff,
        inset -2px -2px 0 #000000 !important;
    filter: none !important;
    animation: none !important;
    overflow: hidden;
}

:root[data-theme="amiga"] .event-span::before,
:root[data-theme="amiga"] .event-span[style*="--event-text-mask"]::before {
    background: none !important;
    opacity: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
}

:root[data-theme="amiga"] .event-span-short-text {
    display: block !important;
    position: absolute !important;
    z-index: 5 !important;
    left: 6px !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: none !important;
    overflow: hidden !important;
    color: #000000 !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
    font-size: clamp(.49rem, .57vw, .66rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: none !important;
    white-space: nowrap !important;
}

:root[data-theme="amiga"] .event-span-icon-overlay {
    color: #000000 !important;
    opacity: 1 !important;
    filter: none !important;
}

:root[data-theme="amiga"] .event-span-icon-overlay img {
    filter: brightness(0) saturate(100%) !important;
}

/* Tooltip as a Workbench requester. */
:root[data-theme="amiga"] .event-tooltip {
    background: #0055aa !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 0 !important;
    box-shadow:
        3px 3px 0 #000000,
        inset -2px -2px 0 #000000 !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
}

:root[data-theme="amiga"] .event-tooltip-title {
    color: #ff8800 !important;
    text-shadow: none !important;
}

:root[data-theme="amiga"] .event-tooltip-meta {
    color: #ffffff !important;
    text-shadow: none !important;
}

:root[data-theme="amiga"] footer {
    color: #ffffff !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
}



/* No generic neon overlay: the warm Atari bands are the surface. */
:root[data-theme="atari"] .event-span::before,
:root[data-theme="atari"] .event-span[style*="--event-text-mask"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: none !important;
    opacity: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    pointer-events: none;
}

:root[data-theme="atari"] .event-span-short-text {
    display: block !important;
    position: absolute !important;
    z-index: 5 !important;
    left: 5px !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: none !important;
    overflow: hidden !important;
    color: #1f1207 !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
    font-size: clamp(.75rem, .87vw, 1.02rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow:
        0 1px 0 rgba(255,239,178,.26) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

:root[data-theme="atari"] .event-span-icon-overlay {
    z-index: 5 !important;
    color: #1f1207 !important;
    filter: none !important;
    opacity: 1 !important;
}

:root[data-theme="atari"] .event-span-icon-overlay img {
    filter: brightness(0) saturate(100%) !important;
}

/* No neon overlay: the Atari colour bands are the event surface. */
:root[data-theme="atari"] .event-span::before,
:root[data-theme="atari"] .event-span[style*="--event-text-mask"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: none !important;
    opacity: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    pointer-events: none;
}

:root[data-theme="atari"] .event-span-short-text {
    display: block !important;
    position: absolute !important;
    z-index: 5 !important;
    left: 5px !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: none !important;
    overflow: hidden !important;
    color: #1b1208 !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
    font-size: clamp(.50rem, .58vw, .68rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.26) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

:root[data-theme="atari"] .event-span-icon-overlay {
    z-index: 5 !important;
    color: #1b1208 !important;
    filter: none !important;
    opacity: 1 !important;
}

:root[data-theme="atari"] .event-span-icon-overlay img {
    filter: brightness(0) saturate(100%) !important;
}

/* Remove generic neon overlays and text-mask glow. */
:root[data-theme="atari"] .event-span::before,
:root[data-theme="atari"] .event-span[style*="--event-text-mask"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: none !important;
    opacity: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    pointer-events: none;
}

/* Atari label: centered, hard-edged, dark on orange. */
:root[data-theme="atari"] .event-span-short-text {
    display: block !important;
    position: absolute !important;
    z-index: 5 !important;
    left: 5px !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: none !important;
    overflow: hidden !important;
    color: #1e1204 !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
    font-size: clamp(.50rem, .58vw, .68rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

:root[data-theme="atari"] .event-span-icon-overlay {
    z-index: 5 !important;
    color: #1e1204 !important;
    filter: none !important;
    opacity: 1 !important;
}

:root[data-theme="atari"] .event-span-icon-overlay img {
    filter: brightness(0) saturate(100%) !important;
}


/* ATARI // warm gold striped event markers */
:root[data-theme="atari"] .event-span {
    border: 1px solid #5a2f0b !important;
    border-radius: 0 !important;
    background:
        linear-gradient(
            180deg,
            #f2c14e 0 20%,
            #d99b2b 20% 40%,
            #c9781d 40% 60%,
            #a95a16 60% 80%,
            #7f3f12 80% 100%
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,244,188,.22),
        inset 0 -1px 0 rgba(54,24,4,.20) !important;
    filter: none !important;
    animation: none !important;
    overflow: hidden;
}

:root[data-theme="atari"] .event-span:hover,
:root[data-theme="atari"] .event-span:focus {
    box-shadow:
        inset 0 1px 0 rgba(255,244,188,.28),
        inset 0 -1px 0 rgba(54,24,4,.24) !important;
    filter: brightness(1.04) !important;
}

:root[data-theme="atari"] .event-span::before,
:root[data-theme="atari"] .event-span[style*="--event-text-mask"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: none !important;
    opacity: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    pointer-events: none;
}

:root[data-theme="atari"] .event-span-short-text {
    display: block !important;
    position: absolute !important;
    z-index: 5 !important;
    left: 5px !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: none !important;
    overflow: hidden !important;
    color: #1f1207 !important;
    font-family: "Silkscreen", "Terminus", monospace !important;
    font-size: clamp(.75rem, .87vw, 1.02rem) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow:
        0 1px 0 rgba(255,239,178,.26) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

:root[data-theme="atari"] .event-span-icon-overlay {
    z-index: 5 !important;
    color: #1f1207 !important;
    filter: none !important;
    opacity: 1 !important;
}

:root[data-theme="atari"] .event-span-icon-overlay img {
    filter: brightness(0) saturate(100%) !important;
}


/* HACK THE PLANET // rabbit virus attack */
html.rabbit-attack-active,
html.rabbit-attack-active body {
    overflow: hidden;
}

.rabbit-attack-layer {
    position: fixed;
    inset: 0;
    z-index: 9998;
    overflow: hidden;
    pointer-events: none;
    background: transparent;
    contain: layout paint style;
}

.rabbit-attack-layer.is-clearing {
    visibility: hidden;
}

.rabbit-glitch-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.rabbit-glitch-block {
    position: absolute;
    display: block;
    background:
        repeating-conic-gradient(
            #e6e6df 0 12.5%,
            transparent 0 50%
        ) 0 0 / 4px 4px;
    image-rendering: pixelated;
    animation: rabbit-block-jitter 2800ms steps(2, end) infinite;
}

.rabbit-glitch-block.glitch-1 {
    background:
        repeating-conic-gradient(
            #d4d4cd 0 12.5%,
            transparent 0 50%
        ) 1px 1px / 6px 6px;
}

.rabbit-glitch-block.glitch-2 {
    background:
        repeating-linear-gradient(
            0deg,
            #efefe9 0 2px,
            transparent 2px 7px
        );
}

.rabbit-glitch-block.glitch-3 {
    background:
        repeating-linear-gradient(
            90deg,
            #cfcfc8 0 2px,
            transparent 2px 8px
        );
}

.rabbit-glitch-block.glitch-4 {
    background:
        repeating-conic-gradient(
            #f2f2ec 0 12.5%,
            transparent 0 25%
        ) 0 0 / 8px 8px;
}

@keyframes rabbit-block-jitter {
    0% {
        transform: translate(0, 0);
        background-position: 0 0;
    }
    50% {
        transform: translate(var(--glitch-shift-x, 0), var(--glitch-shift-y, 0));
        background-position: 2px 1px;
    }
    100% {
        transform: translate(0, 1px);
        background-position: 1px 2px;
    }
}

.rabbit-attack-field {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.rabbit-virus-icon {
    position: absolute;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    image-rendering: pixelated;
    opacity: 1;
    color: #e4282f;
    transition: none !important;
    animation: none !important;
}

.rabbit-virus-icon.rabbit-black {
    color: #080808;
}

.rabbit-virus-icon.rabbit-red {
    color: #e1262f;
}

/*
 * Rabbit sprite drawn by maru. The PNG is used as an alpha mask so the exact
 * same pixels can be rendered red or black without maintaining two files.
 */
.rabbit-virus-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask-image: url("/assets/rabbit.png");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url("/assets/rabbit.png");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.rabbit-virus-icon {
    transform: translate(-50%, -50%) scaleX(-1);
}

.rabbit-virus-icon.rabbit-facing-left {
    transform: translate(-50%, -50%) scaleX(1);
}

.rabbit-virus-icon.rabbit-runner {
    z-index: 2;
}

.rabbit-system-alert {
    position: fixed;
    z-index: 10000;
    left: 50%;
    top: 50%;
    width: min(540px, calc(100vw - 28px));
    transform: translate(-50%, -50%);
    display: grid;
    gap: 7px;
    padding: 16px 20px 15px;
    border: 3px solid #e1262f;
    outline: 2px solid #f3f3ef;
    outline-offset: -7px;
    background: #090909;
    color: #f3f3ef;
    font-family: "Terminus", "Fixed", monospace;
    text-align: center;
    letter-spacing: .055em;
    box-shadow:
        0 0 0 3px #090909,
        0 0 22px rgba(225,38,47,.58);
    animation: rabbit-alert-in 150ms steps(2, end) both;
}

.rabbit-system-alert strong {
    color: #ff343e;
    font-size: clamp(1.25rem, 3vw, 1.9rem);
}

.rabbit-system-alert span {
    color: #f2f2ef;
    font-size: clamp(.76rem, 1.55vw, 1rem);
}

.rabbit-system-alert b {
    display: inline-block;
    justify-self: center;
    margin-top: 2px;
    padding: 3px 12px 2px;
    background: #e1262f;
    color: #fff;
    font-size: clamp(.9rem, 2vw, 1.2rem);
}

@keyframes rabbit-alert-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 719px) {
    .rabbit-glitch-block {
        background-size: 4px 4px;
    }

    .rabbit-system-alert {
        gap: 5px;
        padding: 13px 14px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rabbit-attack-layer,
    .rabbit-virus-icon,
    .rabbit-system-alert {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* HACK THE PLANET // touch-friendly terminal choices */
.terminal-suggestion {
    cursor: pointer;
    touch-action: manipulation;
}


@media (pointer: coarse) {
    .terminal-suggestion {
        display: inline-block;
        padding: .2em .3em;
        min-height: 1.4em;
        touch-action: manipulation;
    }

    .terminal-output {
        touch-action: pan-y;
    }
}


/* Mobile CLI: use a real, stable native text input instead of the desktop fake caret. */
@media (pointer: coarse) {
    .brand-command-wrap {
        position: relative;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-right: 0;
    }

    #terminal-input,
    #terminal-input:not(:placeholder-shown) {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        min-width: 8ch;
        padding: .06em 0 .1em;
        caret-color: currentColor;
        touch-action: manipulation;
        -webkit-user-select: text;
        user-select: text;
    }

    .brand-command-wrap > .cursor {
        visibility: hidden;
        pointer-events: none;
        width: 0;
        overflow: hidden;
    }

    .brand-command-wrap > .terminal-hint {
        position: absolute;
        left: 0;
        top: .06em;
        margin-left: 0;
        pointer-events: none;
    }
}


/* Mobile terminal output lives in normal document flow so menus and quiz choices
   cannot be clipped below the command line. */
@media (pointer: coarse) {
    .brand-terminal {
        overflow: visible;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .terminal-output {
        position: static !important;
        flex: 0 0 100%;
        width: 100% !important;
        max-width: 100%;
        min-height: 0;
        margin-top: .18em;
        overflow-x: hidden;
        overflow-y: visible;
        white-space: nowrap;
    }

    .terminal-output:empty {
        display: none;
        margin-top: 0;
    }

    .terminal-output:not(:empty) {
        display: block;
    }
}


/* Mobile header: give the CLI the full viewport width.
   Status/year navigation moves onto its own row below it. */
@media (pointer: coarse) {
    .topbar {
        flex-wrap: wrap;
        overflow: visible;
        gap: 6px;
    }

    .identity {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .nav-stack {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        align-items: flex-end;
    }

    .brand-terminal,
    .terminal-output,
    .terminal-suggestion-list {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* Mobile choices are tap-only now; wrap instead of horizontal scrolling. */
@media (pointer: coarse) {
    .terminal-output {
        overflow-x: visible !important;
    }

    .terminal-suggestion-list,
    .terminal-suggestion-list.manual-list {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}


/* Mobile manual: use the same multiline choice layout as the quiz. */
@media (pointer: coarse) {
    .terminal-suggestion-list.manual-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .22em .5em;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .terminal-suggestion-list.manual-list .terminal-suggestion {
        display: block;
        box-sizing: border-box;
        min-width: 0;
    }
}


/* Mobile quiz: fixed 2x2 answer grid below the question. */
@media (pointer: coarse) {
    .terminal-output.is-quiz .terminal-suggestion-prompt {
        display: block;
        width: 100%;
        margin-bottom: .25em;
        white-space: normal;
    }

    .terminal-suggestion-list.quiz-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .22em .5em;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .terminal-suggestion-list.quiz-list .terminal-suggestion {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        padding: .28em .35em;
        overflow-wrap: anywhere;
        word-break: normal;
        text-align: left;
    }
}