@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=UnifrakturMaguntia&display=swap');

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

body {
    height: 100dvh;
    background: radial-gradient(circle at 50% 30%, #1a0d2b, #0d0015 70%);
    color: #f0e8ff;
    font-family: 'Cinzel Decorative', Georgia, serif;
    overflow: hidden;
    display: flex;
}

.sidebar {
    width: 30%;
    min-width: 260px;
    background: rgba(20, 5, 35, 0.88);
    border-right: 3px solid #3a1a5c;
    box-shadow: 4px 0 25px #000000aa;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    z-index: 5;
    overflow-y: auto;
}

main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #111;
    position: relative;
}

canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    background: #111;
    border: 3px solid #3a1a5c;
    border-radius: 8px;
    box-shadow: 0 0 40px #8b00ff44, inset 0 0 60px #22003388;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* Sidebar content styling */
header {
    text-align: center;
    margin-bottom: 2rem;
}

h1 {
    font-size: 3.2rem;
    color: #ffeb3b;
    text-shadow: 0 0 20px #ff9800, 0 0 40px #f57c00, 0 0 70px #ef6c00;
    animation: flicker 5s infinite alternate;
    margin: 0;
    line-height: 0.9;
}

h3 {
    font-size: 1.4rem;
    color: #d4a5ff;
    margin: 0.4rem 0 1rem;
    opacity: 0.9;
}

.controls-info {
    flex: 1;
    font-family: Georgia, serif;
    color: #e0d0ff;
}

.controls-info h4 {
    font-size: 1.5rem;
    color: #bb99ff;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid #5e35b188;
    padding-bottom: 0.4rem;
}

.controls-info ul {
    list-style: none;
    margin: 0.8rem 0 1.5rem;
    padding-left: 0;
}

.controls-info li {
    margin: 0.5rem 0;
    font-size: 1.1rem;
}

.tip {
    font-style: italic;
    opacity: 0.85;
    margin: 1.5rem 0;
}

.howto-btn {
    width: 100%;
    padding: 0.9rem;
    margin-top: 1rem;
    background: rgba(75, 0, 130, 0.7);
    color: #ffeb3b;
    border: 2px solid #8b00ff88;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.howto-btn:hover {
    background: rgba(139, 0, 255, 0.55);
    transform: scale(1.03);
}

footer {
    margin-top: auto;
    text-align: center;
    font-size: 0.85rem;
    color: #aa88cc;
    opacity: 0.7;
    padding-top: 1rem;
}

/* Overlay (modal) remains the same as before */
.intro-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 0, 21, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
}

.intro-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.intro-content {
    position: relative;
    max-width: 680px;
    margin: 1.5rem;
    padding: 2.5rem 2rem;
    background: rgba(30, 10, 50, 0.9);
    border: 3px solid #5e35b1;
    border-radius: 12px;
    box-shadow: 0 0 60px #8b00ff66;
    color: #e0d0ff;
    line-height: 1.6;
}

.close-btn {
    position: absolute;
    top: 0.6rem;
    right: 1rem;
    background: none;
    border: none;
    color: #ff9800;
    font-size: 2.4rem;
    cursor: pointer;
}

/* Flicker animation (same as before) */
@keyframes flicker {
    0%,19%,21%,23%,25%,54%,56%,100% { text-shadow: 0 0 10px #ff9800, 0 0 25px #f57c00, 0 0 50px #ef6c00; }
    20%,24%,55% { text-shadow: 0 0 15px #ff5722, 0 0 35px #d84315, 0 0 70px #bf360c; }
}

/* Mobile: stack vertically when screen is narrow */
@media (max-width: 768px) {
    body { flex-direction: column; }
    .sidebar {
        width: 100%;
        min-width: auto;
        border-right: none;
        border-bottom: 3px solid #3a1a5c;
        padding: 1rem;
    }
    main { height: 70vh; } /* give canvas decent space */
}

/* CRT overlay container – wrap the canvas */
.canvas-crt-wrapper {
    position: relative;
    width: fit-content;
    height: fit-content;
    border-radius: 8px;          /* keep your existing border-radius */
    overflow: hidden;
    box-shadow: 
        inset 0 0 60px #22003388,
        0 0 40px #8b00ff44;
}

/* Updated canvas rule – remove some properties we'll move to wrapper */
canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    background: #000;
    display: block;
}

/* CRT overlay layers */
.canvas-crt-wrapper::before,
.canvas-crt-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: multiply;   /* or screen / overlay for different feels */
    z-index: 1;
}

/* Scanlines (most important for 240p CRT vibe) */
.canvas-crt-wrapper::before {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0%,
        transparent 50%,
        rgba(0,0,0,0.65) 50%,
        rgba(0,0,0,0.65) 100%
    );
    background-size: 100% 4px;     /* 4–6px looks good at 240p */
    opacity: 0.125;
    animation: scan-move 8s linear infinite;
}

/* Gentle vertical phosphor glow + very light chromatic offset */
.canvas-crt-wrapper::after {
    background: radial-gradient(
        circle at 50% 50%,
        transparent 30%,
        rgba(180, 80, 255, 0.08) 70%,
        rgba(255, 60, 140, 0.06) 85%,
        transparent 100%
    );
    mix-blend-mode: screen;
    opacity: 0.0625;
    filter: blur(1.5px);
}

/* Very subtle overall vignette + edge darkening */
.canvas-crt-wrapper {
    background: radial-gradient(
        ellipse at center,
        transparent 65%,
        rgba(0,0,0,0.6) 100%
    );
}

/* Optional light global flicker (old TV vibe – comment out if too much) */
@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 24%, 55% { opacity: 0.99; }
}
.canvas-crt-wrapper {
    animation: flicker 2s infinite steps(1);
}

/* Optional – very slow rolling scanline (adds life) */

/* Optional tiny RGB split (chromatic aberration) */
.canvas-crt-wrapper canvas {
    /* comment out the next 3 lines if you don't like it */
    filter: 
        url(#split-r) blur(0.4px) brightness(1.02),
        url(#split-b) blur(0.4px) brightness(1.02);
}