/* ==========================================================================
   Factor of Safety — CRT terminal theme
   Pale phosphor green on black. Old-school monitor aesthetic.
   ========================================================================== */

/* ---- Theme tokens ------------------------------------------------------- */
:root {
	--crt-bg:        #050805;   /* near-black backdrop            */
	--crt-panel:     #0a0f0a;   /* module background             */
	--crt-green:     #7dfd7d;   /* primary pale phosphor green   */
	--crt-green-dim: #3fae3f;   /* muted green for secondary text */
	--crt-green-hot: #baffba;   /* highlight / hover             */
	--crt-line:      #1c3a1c;   /* borders, rules                */
	--crt-glow:      rgba(125, 253, 125, 0.35);

	/* VT323 for "chrome" (titles, bars, nav); a crisp mono for readable body copy */
	--font-mono: "VT323", "Consolas", "Courier New", monospace;
	--font-body: "Consolas", "SF Mono", "Menlo", "Courier New", monospace;
	--maxw: 960px;
	--gap: 1.5rem;
}

/* ---- Reset -------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 18px;
}

body {
	min-height: 100vh;
	background-color: var(--crt-bg);
	color: var(--crt-green);
	font-family: var(--font-mono);
	line-height: 1.6;
	letter-spacing: 0.5px;
	text-shadow: 0 0 4px var(--crt-glow);
	overflow-x: hidden;
}

/* ---- CRT screen overlays ------------------------------------------------ */
/* Scanlines + subtle vignette live on a fixed overlay so they don't scroll. */
.crt-overlay {
	pointer-events: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
}

/* Horizontal scanlines */
.crt-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0,
		rgba(0, 0, 0, 0) 2px,
		rgba(0, 0, 0, 0.25) 3px,
		rgba(0, 0, 0, 0.25) 4px
	);
}

/* Vignette to fake the curvature falloff of a tube */
.crt-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, 0) 55%,
		rgba(0, 0, 0, 0.55) 100%
	);
}

/* Gentle brightness flicker of the whole page */
@keyframes crt-flicker {
	0%   { opacity: 1;    }
	97%  { opacity: 1;    }
	98%  { opacity: 0.82; }
	100% { opacity: 1;    }
}

.crt-screen {
	animation: crt-flicker 6s infinite steps(1);
}

/* ---- Layout ------------------------------------------------------------- */
.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

/* ---- Header ------------------------------------------------------------- */
.site-header {
	border-bottom: 1px solid var(--crt-line);
	padding-bottom: 1.25rem;
	margin-bottom: 1rem;
}

.site-title {
	font-size: 2.75rem;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--crt-green-hot);
	text-shadow: 0 0 8px var(--crt-glow), 0 0 18px var(--crt-glow);
}

.site-title .cursor {
	display: inline-block;
	width: 0.6ch;
	background: var(--crt-green-hot);
	animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
	50% { opacity: 0; }
}

.site-tagline {
	margin-top: 0.5rem;
	color: var(--crt-green-dim);
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* ---- Social bar --------------------------------------------------------- */
/* Default (narrow / flex): an in-flow horizontal box between header and main.
   On wide screens it becomes a fixed vertical rail in the side gutter (see the
   min-width media query below). */
.social-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	padding: 0.6rem 0.8rem;
	margin-bottom: 2rem;
	border: 1px solid var(--crt-line);
	background: rgba(8, 12, 8, 0.94);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.social-bar__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--crt-line);
	color: var(--crt-green);
	transition: all 0.15s ease;
}

.social-bar__item:hover,
.social-bar__item:focus {
	color: var(--crt-green-hot);
	border-color: var(--crt-green);
	box-shadow: 0 0 8px var(--crt-glow);
	outline: none;
}

.social-bar__item svg {
	width: 1.3rem;
	height: 1.3rem;
	fill: currentColor;
	filter: drop-shadow(0 0 3px var(--crt-glow));
}

/* Disabled item (e.g. Steam, not live yet): grayed out, no glow. */
.social-bar__item.is-disabled {
	color: var(--crt-green-dim);
	opacity: 0.4;
	cursor: not-allowed;
}

.social-bar__item.is-disabled svg {
	filter: none;
}

.social-bar__item.is-disabled:hover,
.social-bar__item.is-disabled:focus {
	color: var(--crt-green-dim);
	border-color: var(--crt-line);
	box-shadow: none;
}

/* "Coming soon" tooltip for disabled items. */
.social-bar__item[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	padding: 0.25rem 0.5rem;
	background: var(--crt-panel);
	border: 1px solid var(--crt-line);
	color: var(--crt-green);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.social-bar__item[data-tooltip]:hover::after,
.social-bar__item[data-tooltip]:focus::after {
	opacity: 1;
}

/* Wide screens: lift the bar out of flow into a fixed vertical rail that sits
   in the left gutter beside the centered column and stays put while scrolling.
   Breakpoint chosen so the gutter is wide enough to hold the rail without
   overlapping content; below it, the bar stays the in-flow horizontal box. */
@media (min-width: 1160px) {
	.social-bar {
		position: fixed;
		top: 50%;
		/* Anchor the rail's right edge just left of the centered column. */
		right: calc(50% + (var(--maxw) / 2) + 1rem);
		transform: translateY(-50%);
		flex-direction: column;
		flex-wrap: nowrap;
		margin-bottom: 0;
		z-index: 50;
	}

	/* In the vertical rail, show the tooltip to the right of the icon so it
	   doesn't cover the icons stacked below it. */
	.social-bar__item[data-tooltip]::after {
		top: 50%;
		left: calc(100% + 0.5rem);
		transform: translateY(-50%);
	}
}

/* ---- Navigation --------------------------------------------------------- */
.site-nav {
	margin-top: 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.site-nav a {
	color: var(--crt-green);
	text-decoration: none;
	border: 1px solid var(--crt-line);
	padding: 0.25rem 0.75rem;
	transition: all 0.15s ease;
}

.site-nav a::before {
	content: "> ";
	color: var(--crt-green-dim);
}

.site-nav a:hover,
.site-nav a:focus {
	color: var(--crt-green-hot);
	border-color: var(--crt-green);
	box-shadow: 0 0 8px var(--crt-glow);
	outline: none;
}

/* ---- Modules (reusable containers) ------------------------------------- */
.modules {
	display: grid;
	gap: var(--gap);
}

.module {
	background: var(--crt-panel);
	border: 1px solid var(--crt-line);
	position: relative;
}

/* Title bar across the top of each module, like a window chrome */
.module__bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.9rem;
	border-bottom: 1px solid var(--crt-line);
	background: rgba(125, 253, 125, 0.04);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--crt-green-dim);
}

.module__bar::before {
	content: "▚";
	color: var(--crt-green-dim);
}

.module__body {
	padding: 1.25rem;
	/* Readable body copy: crisp mono, larger, brighter, minimal glow so the
	   scanlines don't chew up the letterforms. */
	font-family: var(--font-body);
	font-size: 0.95rem;
	line-height: 1.75;
	letter-spacing: 0.2px;
	color: var(--crt-green-hot);
	text-shadow: 0 0 1px var(--crt-glow);
}

.module__body p + p {
	margin-top: 1rem;
}

/* ---- Sample image container --------------------------------------------- */
.image-frame {
	border: 1px dashed var(--crt-line);
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--crt-green-dim);
	background: repeating-linear-gradient(
		45deg,
		rgba(125, 253, 125, 0.02) 0,
		rgba(125, 253, 125, 0.02) 10px,
		transparent 10px,
		transparent 20px
	);
}

.image-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.image-frame__placeholder {
	padding: 1rem;
	font-size: 0.95rem;
	letter-spacing: 1px;
}

/* ---- Footage showcase (multiple gifs) ----------------------------------- */
/* Desktop: gifs share a single cinematic 16:9 frame, side by side and
   touching. Each is cover-cropped so the sides are cut off (the tall,
   cinematic look). Mobile: they stack vertically to avoid overflow. */
.footage {
	display: flex;
	gap: 0;                 /* no space between the gifs */
	aspect-ratio: 16 / 9;   /* the shared cinematic frame */
	border: 1px solid var(--crt-line);
	overflow: hidden;
}

.footage img {
	flex: 1 1 0;   /* split the frame evenly */
	min-width: 0;  /* allow shrinking below intrinsic width (prevents overflow) */
	width: 100%;
	height: 100%;
	object-fit: cover;   /* crop the sides to fill each half */
	display: block;
}

/* Mobile: stack the gifs one above the other, each a full-width cropped
   banner, still touching. */
@media (max-width: 640px) {
	.footage {
		flex-direction: column;
		aspect-ratio: auto;   /* height comes from the stacked images */
	}

	.footage img {
		flex: none;
		height: auto;
		aspect-ratio: 16 / 9;   /* keep a cropped cinematic slice per gif */
	}
}

/* ---- Embed container (Itch widget, video, etc.) ------------------------ */
.embed {
	display: flex;
	justify-content: center;
	border: 1px dashed var(--crt-line);
	padding: 1rem;
	background: rgba(125, 253, 125, 0.02);
}

/* Itch's download/purchase widget is a fixed-size iframe; keep it centered
   and let it shrink on narrow screens without overflowing. */
.embed iframe {
	max-width: 100%;
	border: 0;
}

/* Use .embed--responsive when embedding something that should fill the width
   at a fixed aspect ratio (e.g. a video or a full game frame). */
.embed--responsive {
	padding: 0;
	position: relative;
	aspect-ratio: 16 / 9;
}

.embed--responsive iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Two-up grid for modules that should sit side by side on wide screens */
.modules--split {
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.modules--split {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---- Image gallery ------------------------------------------------------ */
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 0.75rem;
}

/* Each thumbnail is a button for keyboard/accessibility. */
.gallery__item {
	display: block;
	padding: 0;
	border: 1px solid var(--crt-line);
	background: #000;
	cursor: pointer;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	transition: all 0.15s ease;
}

.gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}

.gallery__item:hover,
.gallery__item:focus {
	border-color: var(--crt-green);
	box-shadow: 0 0 10px var(--crt-glow);
	outline: none;
}

.gallery__item:hover img,
.gallery__item:focus img {
	transform: scale(1.05);
}

/* ---- Lightbox (expanded image overlay) ---------------------------------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(0, 0, 0, 0.88);
	cursor: zoom-out;
}

.lightbox.is-open {
	display: flex;
}

.lightbox__img {
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
	border: 1px solid var(--crt-line);
	box-shadow: 0 0 24px var(--crt-glow);
	cursor: default;
}

.lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	width: 2.6rem;
	height: 2.6rem;
	background: transparent;
	border: 1px solid var(--crt-line);
	color: var(--crt-green-hot);
	font-family: var(--font-mono);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: all 0.15s ease;
}

.lightbox__close:hover,
.lightbox__close:focus {
	border-color: var(--crt-green);
	box-shadow: 0 0 8px var(--crt-glow);
	outline: none;
}

/* Prev/next navigation arrows on the sides of the lightbox. */
.lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 4rem;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid var(--crt-line);
	color: var(--crt-green-hot);
	font-family: var(--font-mono);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	transition: all 0.15s ease;
}

.lightbox__nav--prev { left: 1.25rem; }
.lightbox__nav--next { right: 1.25rem; }

.lightbox__nav:hover,
.lightbox__nav:focus {
	border-color: var(--crt-green);
	box-shadow: 0 0 8px var(--crt-glow);
	color: var(--crt-green-hot);
	outline: none;
}

@media (max-width: 620px) {
	.lightbox__nav {
		width: 2.4rem;
		height: 3.2rem;
		font-size: 1.3rem;
	}

	.lightbox__nav--prev { left: 0.4rem; }
	.lightbox__nav--next { right: 0.4rem; }
}

/* Lock background scroll while the lightbox is open. */
body.no-scroll {
	overflow: hidden;
}

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
	margin-top: 3rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--crt-line);
	color: var(--crt-green-dim);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* ---- Accessibility: honor reduced-motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.crt-screen,
	.site-title .cursor {
		animation: none;
	}
}