:root {
--bg: #05100a;
--bg-vignette: #010402;
--phosphor: #7c4dff;
--phosphor-dim: #4c2b8a;
--glow: rgba(116, 77, 255, 0.45);

--font-display: "Press Start 2P", "Courier New", monospace;
--font-mono: "VT323", "Courier New", monospace;
}

* {
box-sizing: border-box;
}

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

body {
min-height: 100vh;
background: var(--bg);
color: var(--phosphor);
font-family: var(--font-mono);
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
position: relative;
}

/* CRT vignette */
.backdrop {
position: fixed;
inset: 0;
z-index: 0;
background: radial-gradient(ellipse 80% 70% at 50% 45%, var(--bg) 0%, var(--bg-vignette) 100%);
}

/* Scanlines */
.scanlines {
position: fixed;
inset: 0;
z-index: 2;
pointer-events: none;
background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0px,
    rgba(0, 0, 0, 0.25) 1px,
    transparent 1px,
    transparent 3px
);
opacity: 0.5;
}

main {
position: relative;
z-index: 1;
padding: 6vh 1.25rem;
display: flex;
justify-content: center;
}

/* -----------------------------------------------------------
    The retro window frame.
    ----------------------------------------------------------- */

.window {
width: min(92vw, 560px);
border: 2px solid var(--phosphor-dim);
background: rgba(15, 5, 16, 0.9);
box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 4px rgba(0, 0, 0, 0.6),
    0 25px 60px rgba(0, 0, 0, 0.65);
}

.title-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.75rem;
border-bottom: 2px solid var(--phosphor-dim);
font-family: var(--font-mono);
font-size: 1rem;
letter-spacing: 0.04em;
color: var(--phosphor-dim);
}

.title-bar .dots {
display: flex;
gap: 5px;
}

.title-bar .dots span {
width: 9px;
height: 9px;
border: 1px solid var(--phosphor-dim);
}

.window-body {
padding: clamp(1.75rem, 6vw, 3.25rem) clamp(1.1rem, 5vw, 2.25rem);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1.4rem, 4vw, 2.1rem);
text-align: center;
}

h1 {
margin: 0;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(1.15rem, 6.2vw, 2.4rem);
line-height: 1.5;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--phosphor);
text-shadow: 0 0 6px var(--glow), 0 0 18px var(--glow);
}

.divider {
font-family: var(--font-display);
font-size: 0.6rem;
letter-spacing: 0.35em;
color: var(--phosphor-dim);
margin: 0;
}

.socials {
display: flex;
gap: clamp(0.9rem, 3vw, 1.5rem);
justify-content: center;
flex-wrap: wrap;
}

.badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: var(--phosphor-dim);
}

.badge .icon-box {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--phosphor-dim);
background: rgba(202, 77, 255, 0.05);
box-shadow:
inset 1px 1px 0 rgba(255, 255, 255, 0.12),
inset -1px -1px 0 rgba(0, 0, 0, 0.5);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* the canvas is drawn at a tiny resolution (see JS below), then
scaled up here with smoothing turned off -- that's the actual
pixelation step, not the canvas drawing itself */
.badge canvas {
width: 28px;
height: 28px;
image-rendering: pixelated;
image-rendering: crisp-edges; /* Firefox fallback */
}

.badge:hover .icon-box,
.badge:focus-visible .icon-box {
border-color: var(--phosphor);
background: rgba(202, 77, 255, 0.12);
box-shadow:
inset 1px 1px 0 rgba(255, 255, 255, 0.12),
inset -1px -1px 0 rgba(0, 0, 0, 0.5),
0 0 10px var(--glow);
}

.badge:hover,
.badge:focus-visible { color: var(--phosphor); }

.badge:focus-visible {
outline: 2px solid var(--phosphor);
outline-offset: 3px;
}

.badge .label {
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.08em;
}

.tagline {
margin: 0;
font-family: var(--font-mono);
font-size: clamp(1rem, 3.4vw, 1.25rem);
color: var(--phosphor);
text-shadow: 0 0 6px var(--glow);
}

.cursor {
display: inline-block;
width: 0.55em;
height: 1em;
background: var(--phosphor);
margin-left: 0.15em;
vertical-align: -0.15em;
animation: blink 1.1s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
.cursor {
    animation: none;
    opacity: 1;
}
}

@keyframes blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}