html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(circle at center, #101010 0%, #000 70%);
}

#terminal {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#terminal .crt-shell {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    transform-origin: top left;
    will-change: transform;
}

#terminal .crt-shell .xterm {
    position: relative;
    background: #000;
}

#terminal .crt-shell .xterm.crt-screen {
    /* Very modest rounding so the screen doesn't feel perfectly rectangular. */
    border-radius: 10px;
    overflow: hidden;
}

#terminal .crt-shell .xterm.crt-screen::before {
    content: '';
    position: absolute;
    inset: -10px;
    pointer-events: none;
    z-index: 12;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 18% 0%, rgba(255, 80, 140, 0.30), rgba(0, 0, 0, 0.0) 58%),
        radial-gradient(ellipse at 72% 0%, rgba(40, 160, 255, 0.22), rgba(0, 0, 0, 0.0) 60%),
        radial-gradient(ellipse at 35% 100%, rgba(40, 160, 255, 0.22), rgba(0, 0, 0, 0.0) 58%),
        radial-gradient(ellipse at 88% 100%, rgba(255, 80, 140, 0.20), rgba(0, 0, 0, 0.0) 62%),
        radial-gradient(ellipse at 0% 42%, rgba(255, 80, 140, 0.24), rgba(0, 0, 0, 0.0) 60%),
        radial-gradient(ellipse at 100% 55%, rgba(40, 160, 255, 0.18), rgba(0, 0, 0, 0.0) 62%);
    opacity: 0.42;
    filter: blur(1px);
    mix-blend-mode: screen;
    animation: crt-bleed 12s ease-in-out infinite;
}

#terminal .crt-shell.crt {
    border-radius: 34px;
    padding: 16px;
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(25, 25, 25, 1) 0%, rgba(0, 0, 0, 1) 75%);
    isolation: isolate;
    -webkit-clip-path: url(#crt-clip);
    clip-path: url(#crt-clip);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.04),
        0 24px 80px rgba(0, 0, 0, 0.85),
        inset 10px 0 22px rgba(255, 40, 90, 0.12),
        inset -10px 0 22px rgba(40, 160, 255, 0.10);
    animation: crt-flicker 11s infinite;
}

#terminal .crt-shell.crt::before,
#terminal .crt-shell.crt::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Scanlines + vignette */
#terminal .crt-shell.crt::before {
    z-index: 20;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.06) 0px,
            rgba(255, 255, 255, 0.06) 1px,
            rgba(0, 0, 0, 0.0) 2px,
            rgba(0, 0, 0, 0.0) 4px),
        radial-gradient(circle at 0% 0%, rgba(255, 40, 90, 0.14), rgba(0, 0, 0, 0.0) 55%),
        radial-gradient(circle at 100% 0%, rgba(40, 160, 255, 0.14), rgba(0, 0, 0, 0.0) 55%),
        radial-gradient(circle at 0% 100%, rgba(40, 160, 255, 0.10), rgba(0, 0, 0, 0.0) 55%),
        radial-gradient(circle at 100% 100%, rgba(255, 40, 90, 0.10), rgba(0, 0, 0, 0.0) 55%),
        radial-gradient(ellipse at left center, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.0) 62%),
        radial-gradient(ellipse at right center, rgba(0,  0, 0, 0.45), rgba(0, 0, 0, 0.0) 62%),
        radial-gradient(circle at center,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(0, 0, 0, 0.0) 55%,
            rgba(0, 0, 0, 0.78) 100%);
    opacity: 0.68;
}

/* Procedural noise (SVG feTurbulence) */
#terminal .crt-shell.crt::after {
    z-index: 20;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.16;
    animation: crt-noise 0.25s steps(2) infinite;
}

/* Rolling scan highlight */
#terminal .crt-shell.crt .crt-overlay {
    position: absolute;
    inset: 0;
    z-index: 18;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.0) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(0, 0, 0, 0.0) 100%);
    background-size: 100% 220px;
    opacity: 0.18;
    animation: crt-roll 6.5s linear infinite;
}

@keyframes crt-roll {
    0% { background-position: 0 160%; }
    100% { background-position: 0 -60%; }
}

@keyframes crt-noise {
    0%   { transform: translate(0, 0); }
    10%  { transform: translate(-2%, 1%); }
    20%  { transform: translate(-1%, -1%); }
    30%  { transform: translate(1%, 2%); }
    40%  { transform: translate(2%, -1%); }
    50%  { transform: translate(-2%, 2%); }
    60%  { transform: translate(-1%, 1%); }
    70%  { transform: translate(1%, -2%); }
    80%  { transform: translate(2%, 1%); }
    90%  { transform: translate(-1%, -1%); }
    100% { transform: translate(0, 0); }
}

@keyframes crt-flicker {
    0%, 100% { filter: brightness(1) contrast(1.10) saturate(1.06); }
    8% { filter: brightness(1.04) contrast(1.12) saturate(1.10); }
    9% { filter: brightness(0.94) contrast(1.06) saturate(1.02); }
    10% { filter: brightness(1.03) contrast(1.12) saturate(1.10); }
    45% { filter: brightness(1.02) contrast(1.10) saturate(1.08); }
    46% { filter: brightness(0.95) contrast(1.06) saturate(1.02); }
    47% { filter: brightness(1.05) contrast(1.12) saturate(1.10); }
    72% { filter: brightness(1.01) contrast(1.10) saturate(1.07); }
    73% { filter: brightness(0.93) contrast(1.06) saturate(1.02); }
    74% { filter: brightness(1.04) contrast(1.12) saturate(1.10); }
}

@keyframes crt-bleed {
    0%, 100% { opacity: 0.35; transform: translate(0, 0); }
    30% { opacity: 0.55; transform: translate(0.4%, -0.2%); }
    60% { opacity: 0.45; transform: translate(-0.2%, 0.3%); }
    80% { opacity: 0.52; transform: translate(0.2%, 0.1%); }
}

#terminal .xterm .xterm-screen canvas {
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}