/* VERTISE — main.css
 * CRT tube aesthetic, black/white/muted-grey only, sharp corners.
 */

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

html,
body {
	height: 100%;
	width: 100%;
	color: #ffffff;
	overflow: hidden;
}

body {
	/* Screen fills the viewport — no CRT frame. */
	background-color: #000000;
	font-family: 'Press Start 2P', monospace;
	cursor: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

button {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	cursor: none;
}

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

img,
svg {
	display: block;
	max-width: 100%;
}

/* ---------- KEYFRAMES (preserved from reference repo) ---------- */
@keyframes blinker {
	50% { opacity: 0; }
}

@keyframes flicker {
	0%   { opacity: 0.18382489; }
	5%   { opacity: 0.34270544; }
	10%  { opacity: 0.96586561; }
	15%  { opacity: 0.72077474; }
	20%  { opacity: 0.2364895;  }
	25%  { opacity: 0.70936118; }
	30%  { opacity: 0.00409007; }
	35%  { opacity: 0.65961344; }
	40%  { opacity: 0.50734813; }
	45%  { opacity: 0.88146788; }
	50%  { opacity: 0.0465525;  }
	55%  { opacity: 0.33315262; }
	60%  { opacity: 0.36203894; }
	65%  { opacity: 0.68575812; }
	70%  { opacity: 0.77522172; }
	75%  { opacity: 0.75757868; }
	80%  { opacity: 0.60799146; }
	85%  { opacity: 0.77076662; }
	90%  { opacity: 0.90846953; }
	95%  { opacity: 0.02312783; }
	100% { opacity: 0.15431698; }
}

@keyframes noise-anim {
	0%   { clip: rect(22px, 9999px, 73px, 0); }
	5%   { clip: rect(42px, 9999px, 27px, 0); }
	10%  { clip: rect(57px, 9999px, 80px, 0); }
	15%  { clip: rect(55px, 9999px, 89px, 0); }
	20%  { clip: rect(44px, 9999px, 44px, 0); }
	25%  { clip: rect(7px,  9999px, 14px, 0); }
	30%  { clip: rect(25px, 9999px, 49px, 0); }
	35%  { clip: rect(87px, 9999px, 71px, 0); }
	40%  { clip: rect(52px, 9999px, 79px, 0); }
	45%  { clip: rect(19px, 9999px, 3px,  0); }
	50%  { clip: rect(26px, 9999px, 33px, 0); }
	55%  { clip: rect(81px, 9999px, 68px, 0); }
	60%  { clip: rect(13px, 9999px, 57px, 0); }
	65%  { clip: rect(34px, 9999px, 2px,  0); }
	70%  { clip: rect(44px, 9999px, 53px, 0); }
	75%  { clip: rect(1px,  9999px, 68px, 0); }
	80%  { clip: rect(56px, 9999px, 26px, 0); }
	85%  { clip: rect(87px, 9999px, 74px, 0); }
	90%  { clip: rect(45px, 9999px, 75px, 0); }
	95%  { clip: rect(31px, 9999px, 62px, 0); }
	100% { clip: rect(16px, 9999px, 45px, 0); }
}

@keyframes noise-anim-2 {
	0%   { clip: rect(73px, 9999px, 38px, 0); }
	5%   { clip: rect(83px, 9999px, 48px, 0); }
	10%  { clip: rect(37px, 9999px, 90px, 0); }
	15%  { clip: rect(34px, 9999px, 66px, 0); }
	20%  { clip: rect(87px, 9999px, 19px, 0); }
	25%  { clip: rect(32px, 9999px, 58px, 0); }
	30%  { clip: rect(27px, 9999px, 7px,  0); }
	35%  { clip: rect(15px, 9999px, 16px, 0); }
	40%  { clip: rect(44px, 9999px, 63px, 0); }
	45%  { clip: rect(56px, 9999px, 47px, 0); }
	50%  { clip: rect(95px, 9999px, 10px, 0); }
	55%  { clip: rect(44px, 9999px, 21px, 0); }
	60%  { clip: rect(17px, 9999px, 8px,  0); }
	65%  { clip: rect(83px, 9999px, 19px, 0); }
	70%  { clip: rect(50px, 9999px, 37px, 0); }
	75%  { clip: rect(95px, 9999px, 11px, 0); }
	80%  { clip: rect(48px, 9999px, 53px, 0); }
	85%  { clip: rect(93px, 9999px, 30px, 0); }
	90%  { clip: rect(39px, 9999px, 22px, 0); }
	95%  { clip: rect(86px, 9999px, 53px, 0); }
	100% { clip: rect(54px, 9999px, 34px, 0); }
}

@keyframes turn-on {
	0% {
		transform: scale(1, 0.8) translate3d(0, 0, 0);
		-webkit-transform: scale(1, 0.8) translate3d(0, 0, 0);
		filter: brightness(30);
		-webkit-filter: brightness(30);
		opacity: 1;
	}
	3.5% {
		transform: scale(1, 0.8) translate3d(0, 100%, 0);
		-webkit-transform: scale(1, 0.8) translate3d(0, 100%, 0);
	}
	3.6% {
		transform: scale(1, 0.8) translate3d(0, -100%, 0);
		-webkit-transform: scale(1, 0.8) translate3d(0, -100%, 0);
		opacity: 1;
	}
	9% {
		transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
		-webkit-transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
		filter: brightness(30);
		-webkit-filter: brightness(30);
		opacity: 0;
	}
	11% {
		transform: scale(1, 1) translate3d(0, 0, 0);
		-webkit-transform: scale(1, 1) translate3d(0, 0, 0);
		filter: contrast(0) brightness(0) saturate(1);
		-webkit-filter: contrast(0) brightness(0) saturate(1);
		opacity: 0;
	}
	100% {
		transform: scale(1, 1) translate3d(0, 0, 0);
		-webkit-transform: scale(1, 1) translate3d(0, 0, 0);
		filter: contrast(1.075) brightness(1.14) saturate(1.3);
		-webkit-filter: contrast(1.075) brightness(1.14) saturate(1.3);
		opacity: 1;
	}
}

@keyframes fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---------- ANIMATED CURSOR ---------- */
#vertise-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 44px;
	height: 44px;
	z-index: 9999;
	pointer-events: none;
	transform: translate(-50%, -50%);
	image-rendering: auto;
	will-change: transform;
	display: none;
}

#vertise-cursor.ready { display: block; }
@media (pointer: coarse) { #vertise-cursor { display: none !important; } }

/* Home / Landing cursor — small neon-grey dot with a static-drag trail.
 * Toggled on via body.cursor-dot from JS. */
body.cursor-dot #vertise-cursor { display: none !important; }

#vertise-cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	width: 9px;
	height: 9px;
	z-index: 9999;
	pointer-events: none;
	transform: translate(-50%, -50%);
	will-change: transform;
	border-radius: 50%;
	background: radial-gradient(circle, #c9c9c9 0%, #8e8e8e 50%, rgba(120,120,120,0.1) 100%);
	box-shadow:
		0 0 6px rgba(200, 200, 200, 0.85),
		0 0 14px rgba(200, 200, 200, 0.35);
	display: none;
}

body.cursor-dot #vertise-cursor-dot { display: block; }

/* Cursor-trail canvas is no longer drawn to (initCursorTrail call
   removed). Force-hide it so it doesn't sit as a fullscreen blend
   layer doing per-pixel composite work on every paint. */
#vertise-cursor-trail { display: none !important; }

/* Sections without a custom cursor get the OS pointer back */
body.cursor-default,
body.cursor-default * { cursor: auto; }

body.cursor-default #vertise-cursor,
body.cursor-default #vertise-cursor-dot,
body.cursor-default #vertise-cursor-trail { display: none !important; }

@media (pointer: coarse) {
	#vertise-cursor-dot { display: none !important; }
	#vertise-cursor-trail { display: none !important; }
}

/* Vertical static lines shooting across on home/landing */
#vertise-vlines {
	position: fixed;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	overflow: hidden;
	display: none;
}

body.vlines-on #vertise-vlines { display: block; }

/* Two compositor-only sweep streaks that drift across the screen.
   Pure CSS, no DOM churn, no rAF, no setTimeout. */
#vertise-vlines::before,
#vertise-vlines::after {
	content: "";
	position: absolute;
	top: -10%;
	height: 120%;
	width: 1px;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(255, 255, 255, 0.85) 40%,
		rgba(255, 255, 255, 0.25) 60%,
		transparent 100%);
	filter: blur(0.4px);
	opacity: 0;
	will-change: transform, opacity;
}
#vertise-vlines::before {
	left: 33vw;
	animation: vline-sweep 5.3s linear infinite;
}
#vertise-vlines::after {
	left: 71vw;
	animation: vline-sweep 7.9s linear infinite 2.4s;
}
@keyframes vline-sweep {
	0%   { transform: translateX(0)       scaleY(1.2); opacity: 0; }
	7%   { opacity: 0.85; }
	18%  { opacity: 0;    transform: translateX(-160px) scaleY(0.9); }
	100% { opacity: 0;    transform: translateX(-160px) scaleY(0.9); }
}

/* Static / TV snow — shifts background position at an unrelenting rate */
@keyframes static-shift {
	0%   { background-position: 0 0,       0 0; }
	20%  { background-position: -17px 5px, 11px -3px; }
	40%  { background-position: 23px -9px, -7px 13px; }
	60%  { background-position: -5px 19px, 17px 7px; }
	80%  { background-position: 13px -11px, -21px -5px; }
	100% { background-position: -9px 3px,  5px -17px; }
}

/* TV channel change — quick noise pulse then out */
@keyframes tv-static-in {
	0%   { opacity: 0; }
	40%  { opacity: 1; }
	100% { opacity: 0; }
}

/* Home icon spin (coin flip around Y) */
@keyframes coin-spin {
	0%   { transform: rotateY(0deg); }
	100% { transform: rotateY(360deg); }
}

/* CRT turn-off — content squishes to a horizontal line, then a dot */
@keyframes content-turn-off {
	0%   { transform: scale(1, 1);       opacity: 1; filter: brightness(1); }
	55%  { transform: scale(1, 0.004);   opacity: 1; filter: brightness(6); }
	75%  { transform: scale(0.01, 0.004); opacity: 1; filter: brightness(12); }
	100% { transform: scale(0, 0);       opacity: 0; filter: brightness(30); }
}

/* CRT turn-on for the new content that comes back */
@keyframes content-turn-on {
	0%   { transform: scale(0, 0);       opacity: 0; filter: brightness(30); }
	25%  { transform: scale(1.3, 0.004); opacity: 1; filter: brightness(12); }
	60%  { transform: scale(1, 1);       opacity: 0.7; filter: brightness(2); }
	100% { transform: scale(1, 1);       opacity: 1; filter: brightness(1); }
}

/* Home icon gentle float */
@keyframes float-bob {
	0%   { transform: translateY(0); }
	50%  { transform: translateY(-6px); }
	100% { transform: translateY(0); }
}

/* ---------- CRT TUBE ---------- */
.vertise-tube-shape {
	position: fixed;
	inset: 0;
	background: #000000;
	color: #ffffff;
	text-align: center;
	overflow: hidden;
}

#vertise-tube-border {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 9;
	box-shadow:
		inset 0 0 140px 20px rgba(0, 0, 0, 0.85),
		inset 0 0 40px 0 rgba(0, 0, 0, 0.6);
}

.vertise-tube-shape::before {
	content: " ";
	display: none;
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
		linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.02));
	background-size: 100% 2px, 3px 100%;
	z-index: 7;
	pointer-events: none;
}

.vertise-tube-shape::after {
	content: " ";
	display: none;
	position: absolute;
	inset: 0;
	background: rgba(18, 16, 16, 0.1);
	opacity: 0;
	z-index: 7;
	pointer-events: none;
	animation: flicker 0.15s infinite;
}

body.crt-on .vertise-tube-shape::before,
body.crt-on .vertise-tube-shape::after { display: block; }

/* Hide the persistent black static + tube-border vignette on themed
 * scopes so the Win98 / Pip-Boy / GTA screens render bright and clean. */
#vertise-static,
#vertise-tube-border { display: none; }

body.crt-on #vertise-static,
body.crt-on #vertise-tube-border { display: block; }

.vertise-tube-shape.turning-on {
	animation: turn-on 3.4s linear;
	animation-fill-mode: forwards;
}

#vertise-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 8;
}

/* Persistent black static — shown at all times behind content.
 * Two noise layers at slightly different scales shift independently
 * to scintillate. Low opacity so the logo (white) stays contrasty. */
#vertise-static {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-color: #000000;
	/* Pre-baked PNG noise tile, animated by background-position so it
	   shimmers. No mix-blend-mode — that was the per-pixel killer at
	   large viewports (every pixel had to be blended on the main
	   compositor every paint, and noise paints often). The noise PNG
	   already has alpha so it composites cheaply over the black bg. */
	background-image: url("../assets/static-noise.png");
	background-repeat: repeat;
	background-size: 128px 128px;
	animation: static-shift 0.5s steps(1) infinite;
	opacity: 0.55;
	will-change: background-position;
}

/* TV channel-change flash — opaque dense static during section switch */
#tv-transition {
	position: absolute;
	inset: 0;
	z-index: 13;
	pointer-events: none;
	opacity: 0;
	background-color: #000000;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.5 -0.1'/></filter><rect width='100%25' height='100%25' filter='url(%23t)'/></svg>");
	background-repeat: repeat;
	background-size: 200px 200px;
}

#tv-transition.active {
	animation:
		static-shift 0.06s steps(1) infinite,
		tv-static-in 0.55s ease-out forwards;
}

/* ---------- CONTENT SHELL ---------- */
#vertise-content {
	position: relative;
	z-index: 3;
	height: 100%;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	transform-origin: center center;
	animation: fade-in 0.4s ease-in-out;
}

#vertise-content.turning-off {
	animation: content-turn-off 0.55s ease-in forwards;
	transform-origin: center center;
}

#vertise-content.turning-on {
	animation: content-turn-on 0.6s ease-out both;
	transform-origin: center center;
}

#vertise-content::-webkit-scrollbar {
	width: 6px;
}

#vertise-content::-webkit-scrollbar-track {
	background: #000000;
}

#vertise-content::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.12);
}

/* ---------- FLOATING BAG ---------- */
.vertise-bag-float {
	position: fixed;
	top: max(16px, env(safe-area-inset-top));
	right: max(16px, env(safe-area-inset-right));
	z-index: 50;
	font-family: 'Press Start 2P', monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: #ffffff;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.18);
	padding: 10px 14px;
	min-height: 44px;
	min-width: 44px;
	text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: color 0.2s ease, text-shadow 0.2s ease, opacity 0.35s ease;
}

.vertise-bag-float:hover {
	color: #ffffff;
	text-shadow: 0 0 14px rgba(255, 255, 255, 0.7);
}

.vertise-bag-float.hidden {
	display: none !important;
}

/* ---------- FLOATING BACK BUTTON ---------- */
.vertise-back-float {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 12;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: none;
	transition: filter 0.2s ease, transform 0.2s ease, opacity 0.35s ease;
}

.vertise-back-float img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.vertise-back-float:hover {
	transform: scale(1.05);
}

.vertise-back-float.hidden {
	opacity: 0;
	pointer-events: none;
}

/* Tiny variant on themed sections so it doesn't crowd the OS UI */
.vertise-back-float--tiny {
	width: 30px;
	height: 30px;
	top: 6px;
	left: 6px;
}

/* ---------- LOGO (ARCHED SVG) ---------- */
.vertise-logo-svg {
	width: clamp(220px, 50vw, 520px);
	height: auto;
}

.vertise-logo-text {
	font-family: 'Cinzel', serif;
	font-weight: 900;
	font-size: 68px;
	letter-spacing: 6px;
	fill: #ffffff;
}

/* ---------- LANDING ---------- */
.landing-wrapper {
	min-height: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 36px 20px 20px;
	position: relative;
}

.landing-spacer { flex: 0 0 auto; height: 0; }

.landing-center {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
	width: 100%;
}

.landing-logo {
	display: flex;
	justify-content: center;
}

.landing-press-start {
	font-family: 'Press Start 2P', monospace;
	font-size: 14px;
	letter-spacing: 0.2em;
	color: #ffffff;
	animation: blinker 1.1s linear infinite;
	user-select: none;
}

.landing-hint {
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	letter-spacing: 0.15em;
	color: #9b9b9b;
	margin-top: 8px;
}

/* ---------- SECTIONS ---------- */
.section-wrapper {
	min-height: 100%;
	padding: 56px 28px 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.section-title {
	font-family: 'Cinzel', serif;
	font-weight: 900;
	font-size: clamp(2rem, 6vw, 5rem);
	letter-spacing: 0.2em;
	color: #ffffff;
	text-align: center;
}

.copyright {
	font-family: 'Press Start 2P', monospace;
	font-size: 9px;
	letter-spacing: 0.15em;
	color: #9b9b9b;
	text-align: center;
	padding: 24px 0 12px;
	margin-top: auto;
}

.blinking {
	animation: blinker 1.3s linear infinite;
}

/* ---------- HOME BUTTONS ---------- */
.home-wrapper {
	min-height: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px 48px;
	gap: 48px;
}

.home-scroll-hint {
	font-family: 'Press Start 2P', monospace;
	font-size: 9px;
	letter-spacing: 0.2em;
	color: #9b9b9b;
	margin-top: 24px;
	animation: blinker 1.6s linear infinite;
}

.home-more {
	min-height: 70vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 60px 24px;
}

.home-more-label {
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	letter-spacing: 0.2em;
	color: #9b9b9b;
}

.home-logo {
	display: flex;
	justify-content: center;
}

.home-options {
	display: grid;
	grid-template-columns: repeat(3, minmax(180px, 240px));
	gap: 40px;
	align-items: center;
	justify-content: center;
}

.home-options-wrapper {
	user-select: none;
	-webkit-user-select: none;
	cursor: none;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	min-height: 44px;
	perspective: 800px;
}

.home-option-icon {
	position: relative;
	width: 160px;
	height: 160px;
	background: transparent;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: float-bob 3.2s ease-in-out infinite;
	will-change: transform;
	/* Glow is a cheap radial-gradient pseudo-element instead of a
	   filter: drop-shadow on the (animated, 1 MB) GIF — drop-shadow
	   on a moving GIF was burning the main thread on every hover. */
}
.home-option-icon img,
.home-option-icon video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;
	background: transparent;
	/* Scope GIF frame invalidation to the icon's box so each spinner
	   frame only repaints its own 120-px square, not the whole page. */
	contain: layout paint style;
}

/* Scale the clothing and website spinners (projects stays full size) */
.home-options-wrapper[data-section="clothing"] .home-option-icon img,
.home-options-wrapper[data-section="clothing"] .home-option-icon video {
	width: 62%;
	height: 62%;
}

.home-options-wrapper[data-section="websites"] .home-option-icon img,
.home-options-wrapper[data-section="websites"] .home-option-icon video {
	width: 55%;
	height: 55%;
}

.home-options-wrapper:nth-child(2) .home-option-icon {
	animation-duration: 2.8s;
	animation-delay: -0.6s;
}

.home-options-wrapper:nth-child(3) .home-option-icon {
	animation-duration: 3.6s;
	animation-delay: -1.2s;
}

.home-option-icon-label {
	font-family: 'Cinzel', serif;
	font-weight: 900;
	font-size: 15px;
	letter-spacing: 0.22em;
	color: #ffffff;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	backface-visibility: visible;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

.home-option-label {
	font-family: 'Press Start 2P', monospace;
	font-size: 12px;
	letter-spacing: 0.15em;
	color: #9b9b9b;
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

.home-options-wrapper:hover .home-option-label {
	color: #ffffff;
	text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* ---------- CARDS (generic) ---------- */
.card-grid {
	width: 100%;
	max-width: 1200px;
	display: grid;
	gap: 28px;
}

.card-grid--clothing {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card-grid--websites {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.card-grid--projects {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.card {
	position: relative;
	background: transparent;
	border: 0;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	cursor: none;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.card:hover {
	filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.4));
}

.card--disabled {
	opacity: 0.6;
	pointer-events: none;
}

.card-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: transparent;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
}

.card-image--wide {
	aspect-ratio: 16 / 9;
}

.card-image-label {
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.18em;
	color: #9b9b9b;
	text-transform: uppercase;
}

.card-name {
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.1em;
	color: #ffffff;
	text-transform: uppercase;
}

.card-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.card-tag,
.card-price,
.card-status {
	font-family: 'Press Start 2P', monospace;
	font-size: 9px;
	letter-spacing: 0.12em;
	color: #9b9b9b;
}

.tag-badge {
	display: inline-block;
	padding: 6px 2px;
	border: 0;
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	letter-spacing: 0.15em;
	color: #9b9b9b;
}

.card-cta {
	align-self: flex-start;
	margin-top: 6px;
	padding: 8px 0;
	border: 0;
	font-family: 'Press Start 2P', monospace;
	font-size: 9px;
	letter-spacing: 0.15em;
	color: #ffffff;
	transition: text-shadow 0.2s ease, color 0.2s ease;
}

.card-cta:hover {
	color: #ffffff;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

/* Glitch effect on hover (card) */
.card.glitching .card-name {
	position: relative;
	display: inline-block;
	color: #ffffff;
}

.card.glitching .card-name::before,
.card.glitching .card-name::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: #111111;
	overflow: hidden;
	color: #ffffff;
}

.card.glitching .card-name::before {
	left: 2px;
	text-shadow: -1px 0 rgba(255, 255, 255, 0.6);
	animation: noise-anim 0.4s infinite linear alternate-reverse;
}

.card.glitching .card-name::after {
	left: -2px;
	text-shadow: 1px 0 rgba(255, 255, 255, 0.4);
	animation: noise-anim-2 0.4s infinite linear alternate-reverse;
}

.drop-footer {
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	letter-spacing: 0.2em;
	color: #9b9b9b;
	margin-top: 10px;
}

.empty-state {
	font-family: 'Press Start 2P', monospace;
	font-size: 12px;
	letter-spacing: 0.2em;
	color: #9b9b9b;
	padding: 80px 0;
}

/* ---------- MODALS ---------- */
.modal-overlay {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.72);
	opacity: 0;
	pointer-events: none;
	overflow-y: auto;
	z-index: 20;
	transition: opacity 0.35s ease-in-out;
	padding: 20px;
}

.modal-overlay.modal-opened {
	opacity: 1;
	pointer-events: inherit;
}

.modal-overlay {
	padding-top:    max(20px, env(safe-area-inset-top));
	padding-right:  max(20px, env(safe-area-inset-right));
	padding-bottom: max(20px, env(safe-area-inset-bottom));
	padding-left:   max(20px, env(safe-area-inset-left));
}

.modal-modal {
	position: relative;
	background: #111111;
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 32px 28px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease-in-out;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	text-align: center;
}

.modal-modal.modal-opened {
	opacity: 1;
	pointer-events: inherit;
}

.modal-modal--notify {
	max-width: 420px;
	padding: 36px 28px;
}

.modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	font-family: 'Press Start 2P', monospace;
	font-size: 18px;
	color: #9b9b9b;
	padding: 4px 8px;
	transition: color 0.2s ease;
	line-height: 1;
}

.modal-close:hover {
	color: #ffffff;
}

.modal-content {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: stretch;
}

.item-modal-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: #000000;
	border: 1px solid rgba(255, 255, 255, 0.12);
	margin-bottom: 4px;
}

.item-modal-image.has-img .card-image-label { display: none; }

.item-modal-thumbs {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
}

.thumb-btn {
	width: 56px;
	height: 56px;
	padding: 0;
	background: #000000;
	border: 1px solid rgba(255, 255, 255, 0.18);
	overflow: hidden;
	position: relative;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	letter-spacing: 0.1em;
	color: #9b9b9b;
}

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

.thumb-btn:hover { border-color: rgba(255, 255, 255, 0.55); }

.thumb-btn.selected {
	border-color: #ffffff;
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
}

.thumb-btn--empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

.item-modal-name {
	font-family: 'Cinzel', serif;
	font-weight: 900;
	font-size: 20px;
	letter-spacing: 0.15em;
	color: #ffffff;
	text-transform: uppercase;
}

.item-modal-price {
	font-family: 'Press Start 2P', monospace;
	font-size: 11px;
	letter-spacing: 0.15em;
	color: #9b9b9b;
}

.item-modal-desc {
	font-family: 'Press Start 2P', monospace;
	font-size: 9px;
	line-height: 1.8;
	letter-spacing: 0.08em;
	color: #9b9b9b;
}

.item-modal-section-label {
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	letter-spacing: 0.18em;
	color: #9b9b9b;
	text-align: center;
	margin-top: 4px;
}

.item-modal-section-label span {
	color: #ffffff;
}

.item-modal-colors,
.item-modal-sizes {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.color-row,
.size-row {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.color-btn {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.25);
	padding: 0;
	background: var(--swatch, #444);
	cursor: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease;
	font-size: 0;
}

.color-btn:hover { border-color: rgba(255, 255, 255, 0.7); }

.color-btn.selected {
	border-color: #ffffff;
	transform: scale(1.08);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

.size-btn {
	font-family: 'Press Start 2P', monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: #9b9b9b;
	padding: 10px 14px;
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: transparent;
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

.size-btn:hover,
.size-btn.selected {
	color: #ffffff;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.add-to-bag-btn,
.checkout-btn,
.notify-ok-btn {
	font-family: 'Press Start 2P', monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
	color: #000000;
	background: #ffffff;
	padding: 14px 16px;
	min-height: 44px;
	transition: background 0.2s ease, color 0.2s ease;
	align-self: stretch;
}

.add-to-bag-btn:hover,
.checkout-btn:hover,
.notify-ok-btn:hover {
	background: #9b9b9b;
	color: #000000;
}

.notify-ok-btn {
	position: static;
	display: inline-block;
	min-width: 120px;
	align-self: center;
	margin-top: 8px;
}

.bag-modal-title {
	font-family: 'Cinzel', serif;
	font-weight: 900;
	font-size: 18px;
	letter-spacing: 0.2em;
	color: #ffffff;
	margin-bottom: 4px;
}

.bag-modal-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bag-modal-list:empty::before {
	content: "YOUR BAG IS EMPTY";
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	letter-spacing: 0.15em;
	color: #9b9b9b;
	padding: 40px 0;
	display: block;
}

.bag-item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 8px;
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 10px 0;
	text-align: left;
}

.bag-item-info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bag-item-name {
	font-family: 'Cinzel', serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	color: #ffffff;
	text-transform: uppercase;
}

.bag-item-meta {
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	letter-spacing: 0.1em;
	color: #9b9b9b;
}

.bag-item-price {
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	letter-spacing: 0.1em;
	color: #ffffff;
}

.bag-item-remove {
	font-family: 'Press Start 2P', monospace;
	font-size: 11px;
	color: #9b9b9b;
	padding: 6px 8px;
	border: 0;
	background: transparent;
	min-height: 32px;
	min-width: 32px;
	transition: color 0.2s ease, text-shadow 0.2s ease;
}

.bag-item-remove:hover {
	color: #ffffff;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.bag-modal-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-family: 'Press Start 2P', monospace;
	font-size: 11px;
	letter-spacing: 0.15em;
	color: #ffffff;
}

/* ---------- BAG UPSELL + SUMMARY + EMAIL ---------- */
.bag-upsell {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 0 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.bag-upsell-line {
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	letter-spacing: 0.12em;
	color: #ffffff;
	text-align: center;
}

.bag-upsell-line--shipping { color: #9b9b9b; }
.bag-upsell-line--shipping.unlocked { color: #ffffff; }

.bag-progress {
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, 0.12);
}

.bag-progress-bar {
	height: 100%;
	background: #ffffff;
	width: 0%;
	transition: width 0.25s ease;
}

.bag-summary {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 0 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.bag-summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'Press Start 2P', monospace;
	font-size: 9px;
	letter-spacing: 0.12em;
	color: #9b9b9b;
}

.bag-summary-row--saving { color: #ffffff; }

.bag-summary-row--total {
	font-size: 11px;
	letter-spacing: 0.15em;
	color: #ffffff;
	padding-top: 6px;
	margin-top: 4px;
	border-top: 1px dashed rgba(255, 255, 255, 0.24);
}

.bag-summary-row.hidden { display: none; }

.bag-email {
	padding: 12px 0 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bag-email-title {
	font-family: 'Press Start 2P', monospace;
	font-size: 9px;
	letter-spacing: 0.12em;
	color: #ffffff;
	text-align: center;
	margin-bottom: 8px;
}

.bag-email-form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px;
}

.bag-email-form input {
	background: #000000;
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: #ffffff;
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	letter-spacing: 0.06em;
	padding: 10px;
	min-height: 40px;
	outline: none;
}

.bag-email-form input::placeholder { color: #6b6b6b; }
.bag-email-form input:focus { border-color: #ffffff; }

.bag-email-btn {
	font-family: 'Press Start 2P', monospace;
	font-size: 9px;
	letter-spacing: 0.12em;
	color: #000000;
	background: #ffffff;
	padding: 0 14px;
	min-height: 40px;
	border: 0;
	white-space: nowrap;
}

.bag-email-btn:hover { background: #9b9b9b; }

.bag-email-applied {
	font-family: 'Press Start 2P', monospace;
	font-size: 9px;
	letter-spacing: 0.12em;
	color: #ffffff;
	text-align: center;
	padding: 8px 0 0;
}

.bag-email-applied.hidden { display: none; }
.bag-email-form.hidden    { display: none; }

/* ----- Promo code block ----- */
.bag-promo {
	padding: 10px 0 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.bag-promo-form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px;
}
.bag-promo-form input {
	background: #000000;
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: #ffffff;
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 10px;
	min-height: 40px;
	outline: none;
}
.bag-promo-form input::placeholder { color: #6b6b6b; }
.bag-promo-form input:focus        { border-color: #ffffff; }
.bag-promo-btn {
	font-family: 'Press Start 2P', monospace;
	font-size: 9px;
	letter-spacing: 0.12em;
	color: #000000;
	background: #ffffff;
	padding: 0 14px;
	min-height: 40px;
	border: 0;
	white-space: nowrap;
	cursor: pointer;
}
.bag-promo-btn:hover { background: #9b9b9b; }
.bag-promo-msg {
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	letter-spacing: 0.08em;
	color: #ff7474;
	min-height: 1em;
	margin-top: 6px;
}
.bag-promo-msg.ok { color: #74ff8a; }
.bag-promo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}
.bag-promo-chip {
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	letter-spacing: 0.1em;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	padding: 4px 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.bag-promo-chip-x {
	background: none;
	border: 0;
	color: #ff7474;
	cursor: pointer;
	font: inherit;
	font-size: 10px;
}

.bag-email-remove {
	background: none;
	border: 0;
	color: #9b9b9b;
	font: inherit;
	letter-spacing: inherit;
	padding: 0 4px;
	text-decoration: underline;
}

.bag-footnote {
	font-family: 'Press Start 2P', monospace;
	font-size: 7px;
	letter-spacing: 0.12em;
	color: #6b6b6b;
	text-align: center;
	padding-top: 8px;
}

.notify-modal-message {
	font-family: 'Press Start 2P', monospace;
	font-size: 12px;
	letter-spacing: 0.15em;
	line-height: 1.8;
	color: #ffffff;
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
	.vertise-bag-float {
		top: 10px;
		right: 10px;
		font-size: 9px;
		padding: 10px 12px;
	}

	.vertise-back-float {
		top: 10px;
		left: 10px;
		width: 52px;
		height: 52px;
	}

	.home-option-icon {
		width: 120px;
		height: 120px;
	}

	.home-options {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.section-wrapper {
		padding: 48px 16px 40px;
		gap: 28px;
	}

	.card-grid {
		gap: 18px;
	}
}

@media (max-width: 420px) {
	.vertise-logo-svg {
		width: 88vw;
	}
}

/* =================================================================
 * WINDOWS 98 — scoped to the Websites section only.
 * The whole OS UI lives inside .win98 so it doesn't leak into the
 * rest of the site. Colours and bevels are authentic Chicago/98.
 * ================================================================= */
.win98 {
	position: absolute;
	inset: 0;
	font-family: Tahoma, 'MS Sans Serif', 'Pixelated MS Sans Serif', Arial, sans-serif;
	font-size: 11px;
	color: #000;
	--w98-face:   #c3c3c3;
	--w98-hi:     #ffffff;
	--w98-lo:     #808080;
	--w98-dark:   #000000;
	--w98-face-d: #dfdfdf;
	--w98-sel:    #000080;
	--w98-sel-t:  #ffffff;
}

.win98 * {
	box-sizing: border-box;
}

.win98 button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/* The Windows "desktop" — Bliss-style rolling hills + sky.
 * Composed entirely in CSS so there's no external wallpaper. */
.win98-desktop {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-color: #3ea0dc;
	background-image:
		radial-gradient(ellipse 140% 70% at 50% 120%, #4fa524 0%, #3b8a1d 45%, transparent 46%),
		radial-gradient(ellipse 80% 40% at 15% 115%, #6bc138 0%, transparent 50%),
		radial-gradient(ellipse 90% 45% at 85% 130%, #388619 0%, transparent 60%),
		linear-gradient(to bottom, #74b8f3 0%, #a9d6f5 55%, #c6e1f4 70%, #86c8f2 71%, #3ea0dc 75%, #3ea0dc 100%);
}

.win98-desktop::before {
	/* Soft cloud wisps */
	content: "";
	position: absolute;
	inset: 0 0 30% 0;
	background:
		radial-gradient(ellipse 20% 8% at 20% 35%, rgba(255,255,255,0.55), transparent 70%),
		radial-gradient(ellipse 30% 10% at 70% 25%, rgba(255,255,255,0.4), transparent 70%),
		radial-gradient(ellipse 15% 6% at 85% 50%, rgba(255,255,255,0.5), transparent 70%);
	pointer-events: none;
}

/* ----- Desktop shortcuts ----- */
.win98-shortcut {
	position: absolute;
	width: 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 4px;
	user-select: none;
	color: #fff;
	text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
	text-align: center;
	cursor: inherit;
}

/* Desktop shortcut grid — a tidy column on the left. The container is
   pointer-events: none so its empty area doesn't intercept clicks on
   windows behind it; only the shortcut tiles themselves are clickable. */
.win98-shortcuts {
	position: absolute;
	top: 12px;
	left: 12px;
	bottom: 40px;
	width: 96px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 8px 12px;
	z-index: 1;
	pointer-events: none;
}

.win98-shortcuts > .win98-shortcut {
	position: static;
	pointer-events: auto;
	width: 80px;
	padding: 4px;
}

.win98-shortcut:focus-within .win98-shortcut-icon,
.win98-shortcut.selected .win98-shortcut-icon {
	filter: brightness(0.5) hue-rotate(200deg);
}

.win98-shortcut-label { font-size: 11px; line-height: 1.2; }

/* ----- Window ----- */
.win98-window {
	position: absolute;
	top: 40px;
	left: 120px;
	width: min(640px, calc(100% - 160px));
	height: min(420px, calc(100% - 90px));
	background: var(--w98-face);
	padding: 3px;
	box-shadow:
		inset 1px 1px 0 var(--w98-hi),
		inset -1px -1px 0 var(--w98-dark),
		inset 2px 2px 0 var(--w98-face-d),
		inset -2px -2px 0 var(--w98-lo);
	display: flex;
	flex-direction: column;
	z-index: 4;
}

.win98-titlebar {
	background: linear-gradient(to right, var(--w98-sel) 0%, #1084d0 100%);
	color: #fff;
	font-weight: bold;
	padding: 3px 4px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 22px;
	flex: 0 0 auto;
	cursor: move;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
}

.win98-window.maximised > .win98-titlebar { cursor: default; }
.win98-titlebar .win98-titlebar-controls { cursor: default; }

.win98-titlebar-text {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	letter-spacing: 0.02em;
}

.win98-titlebar-controls { display: flex; gap: 2px; }

.win98-tbtn {
	width: 16px;
	height: 14px;
	background: var(--w98-face);
	color: #000;
	border: 0;
	padding: 0;
	font-size: 9px;
	line-height: 1;
	box-shadow: inset 1px 1px 0 var(--w98-hi), inset -1px -1px 0 var(--w98-dark),
	            inset 2px 2px 0 var(--w98-face-d), inset -2px -2px 0 var(--w98-lo);
}

.win98-tbtn:active {
	box-shadow: inset 1px 1px 0 var(--w98-dark), inset -1px -1px 0 var(--w98-hi),
	            inset 2px 2px 0 var(--w98-lo), inset -2px -2px 0 var(--w98-face-d);
}

.win98-menubar {
	display: flex;
	gap: 2px;
	padding: 2px;
	font-size: 11px;
	background: var(--w98-face);
}

.win98-menubar span {
	padding: 2px 6px;
	cursor: inherit;
	user-select: none;
}

.win98-menubar span:hover,
.win98-menu-btn.active {
	background: var(--w98-sel);
	color: #fff;
}

/* ----- Menu dropdowns ----- */
.win98-dropdown {
	position: absolute;
	z-index: 30;
	background: var(--w98-face);
	padding: 2px;
	min-width: 200px;
	box-shadow:
		inset 1px 1px 0 var(--w98-hi),
		inset -1px -1px 0 var(--w98-dark),
		inset 2px 2px 0 var(--w98-face-d),
		inset -2px -2px 0 var(--w98-lo),
		2px 2px 0 rgba(0, 0, 0, 0.3);
}

.win98-dropdown.hidden { display: none; }

.win98-dropdown ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.win98-dropdown li {
	padding: 4px 24px 4px 22px;
	font-size: 12px;
	position: relative;
}

.win98-dropdown li:hover:not(.disabled):not(.win98-dropdown-sep) {
	background: var(--w98-sel);
	color: #fff;
}

.win98-dropdown li.disabled { color: var(--w98-lo); }

.win98-dropdown li.checked::before {
	content: "•";
	position: absolute;
	left: 8px;
}

.win98-dropdown-sep {
	height: 0;
	border-top: 1px solid var(--w98-lo);
	border-bottom: 1px solid var(--w98-hi);
	margin: 3px 2px;
	padding: 0;
	pointer-events: none;
}

/* ----- Window states ----- */
.win98-window.hidden { display: none; }

.win98-window.minimised { display: none; }

.win98-window.maximised {
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 30px !important;
	width: auto !important;
	height: auto !important;
}

/* List-view variant of explorer contents */
.win98-contents.list-view {
	grid-template-columns: 1fr;
	gap: 2px;
	align-content: start;
	padding: 4px;
}

.win98-contents.list-view .win98-icon {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 2px 4px;
}

.win98-contents.list-view .win98-icon-img {
	transform: scale(0.45);
	transform-origin: left center;
	width: 32px;
	height: 32px;
}

.win98-toolbar {
	display: flex;
	gap: 4px;
	align-items: center;
	padding: 3px 4px 5px;
	background: var(--w98-face);
	border-bottom: 1px solid var(--w98-lo);
}

.win98-tb-btn {
	width: 22px;
	height: 22px;
	background: var(--w98-face);
	border: 0;
	padding: 0;
	font-size: 12px;
	box-shadow: inset 1px 1px 0 var(--w98-hi), inset -1px -1px 0 var(--w98-dark),
	            inset 2px 2px 0 var(--w98-face-d), inset -2px -2px 0 var(--w98-lo);
}

.win98-tb-btn:active {
	box-shadow: inset 1px 1px 0 var(--w98-dark), inset -1px -1px 0 var(--w98-hi),
	            inset 2px 2px 0 var(--w98-lo), inset -2px -2px 0 var(--w98-face-d);
}

.win98-addressbar {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 4px;
}

.win98-addr-label { font-size: 11px; }

.win98-addr-input {
	flex: 1;
	background: #fff;
	padding: 2px 6px;
	font-size: 11px;
	box-shadow: inset 1px 1px 0 var(--w98-lo), inset -1px -1px 0 var(--w98-hi),
	            inset 2px 2px 0 var(--w98-dark), inset -2px -2px 0 var(--w98-face-d);
}

.win98-contents {
	flex: 1;
	background: #fff;
	padding: 10px;
	overflow: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, 80px);
	gap: 10px;
	align-content: start;
	justify-content: start;
	box-shadow: inset 1px 1px 0 var(--w98-lo), inset -1px -1px 0 var(--w98-hi),
	            inset 2px 2px 0 var(--w98-dark), inset -2px -2px 0 var(--w98-face-d);
}

.win98-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 3px;
	cursor: inherit;
	outline: none;
}

.win98-icon:focus-within .win98-icon-label,
.win98-icon.selected .win98-icon-label {
	background: var(--w98-sel);
	color: var(--w98-sel-t);
}

.win98-icon:focus-within .win98-icon-img,
.win98-icon.selected .win98-icon-img {
	filter: brightness(0.6) hue-rotate(200deg);
}

.win98-icon-label {
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	padding: 1px 2px;
}

.win98-statusbar {
	background: var(--w98-face);
	display: flex;
	gap: 2px;
	padding: 2px;
	font-size: 11px;
}

.win98-status-cell {
	flex: 1;
	padding: 2px 6px;
	background: var(--w98-face);
	box-shadow: inset 1px 1px 0 var(--w98-lo), inset -1px -1px 0 var(--w98-hi);
}

/* ----- Taskbar ----- */
.win98-taskbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30px;
	background: var(--w98-face);
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 2px;
	box-shadow: inset 0 1px 0 var(--w98-hi);
	z-index: 5;
}

.win98-start {
	height: 24px;
	padding: 0 6px 0 4px;
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--w98-face);
	border: 0;
	font-weight: bold;
	font-size: 11px;
	box-shadow: inset 1px 1px 0 var(--w98-hi), inset -1px -1px 0 var(--w98-dark),
	            inset 2px 2px 0 var(--w98-face-d), inset -2px -2px 0 var(--w98-lo);
}

.win98-start.active,
.win98-start:active {
	box-shadow: inset 1px 1px 0 var(--w98-dark), inset -1px -1px 0 var(--w98-hi),
	            inset 2px 2px 0 var(--w98-lo), inset -2px -2px 0 var(--w98-face-d);
}

.win98-start-logo {
	width: 16px;
	height: 16px;
	background:
		linear-gradient(to bottom, #ff3b3b 0 50%, #ffd54f 50% 100%) left/50% 100% no-repeat,
		linear-gradient(to bottom, #32a852 0 50%, #2e8ddb 50% 100%) right/50% 100% no-repeat;
	display: inline-block;
}

.win98-taskbar-apps {
	flex: 1;
	display: flex;
	gap: 2px;
	overflow: hidden;
}

.win98-task-btn {
	height: 22px;
	padding: 0 8px;
	background: var(--w98-face);
	border: 0;
	font-size: 11px;
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-shadow: inset 1px 1px 0 var(--w98-hi), inset -1px -1px 0 var(--w98-dark),
	            inset 2px 2px 0 var(--w98-face-d), inset -2px -2px 0 var(--w98-lo);
}

.win98-task-btn.active {
	box-shadow: inset 1px 1px 0 var(--w98-dark), inset -1px -1px 0 var(--w98-hi),
	            inset 2px 2px 0 var(--w98-lo), inset -2px -2px 0 var(--w98-face-d);
	background:
		repeating-linear-gradient(45deg, #c3c3c3 0 2px, #a6a6a6 2px 4px);
}

.win98-task-btn.hidden { display: none; }

.win98-tray {
	padding: 0 8px;
	height: 22px;
	display: flex;
	align-items: center;
	font-size: 11px;
	box-shadow: inset 1px 1px 0 var(--w98-lo), inset -1px -1px 0 var(--w98-hi);
}

/* ----- Start menu ----- */
.win98-startmenu {
	position: absolute;
	left: 2px;
	bottom: 32px;
	width: 220px;
	background: var(--w98-face);
	box-shadow: inset 1px 1px 0 var(--w98-hi), inset -1px -1px 0 var(--w98-dark),
	            inset 2px 2px 0 var(--w98-face-d), inset -2px -2px 0 var(--w98-lo);
	display: flex;
	z-index: 10;
}

.win98-startmenu.hidden { display: none; }

.win98-startmenu-side {
	width: 22px;
	background: linear-gradient(to bottom, #7f7f7f, #000080 30%, #000080);
	color: #c3c3c3;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.04em;
	padding: 10px 0;
	text-align: end;
	font-family: Arial, sans-serif;
}

.win98-startmenu-side strong { color: #fff; }

.win98-startmenu-items {
	list-style: none;
	padding: 2px;
	margin: 0;
	flex: 1;
}

.win98-sm-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 6px;
	font-size: 12px;
	cursor: inherit;
}

.win98-sm-item:hover {
	background: var(--w98-sel);
	color: var(--w98-sel-t);
}

.win98-sm-sep {
	height: 1px;
	background: var(--w98-lo);
	border-bottom: 1px solid var(--w98-hi);
	margin: 3px 2px;
}

.win98-sm-heading {
	padding: 2px 6px;
	font-size: 10px;
	color: var(--w98-lo);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* ----- Icons (pure CSS, no external images) ----- */
.win98-ico-folder {
	width: 40px;
	height: 34px;
	background:
		linear-gradient(to bottom, #fad166 0 24%, #e3b63e 24% 100%);
	clip-path: polygon(0 16%, 40% 16%, 48% 0, 100% 0, 100% 100%, 0 100%);
	box-shadow:
		inset -2px -2px 0 #a87d10,
		inset 2px 2px 0 #fff2b8;
}

.win98-ico-folder-small {
	display: inline-block;
	width: 16px;
	height: 13px;
	background: linear-gradient(to bottom, #fad166 0 28%, #e3b63e 28% 100%);
	clip-path: polygon(0 20%, 35% 20%, 45% 0, 100% 0, 100% 100%, 0 100%);
}

/* Classic Internet Explorer-style "e" with yellow orbital swoosh,
   rendered inline as an SVG so it scales cleanly and stays sharp. */
.win98-ico-html,
.win98-ico-html-small {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><ellipse cx='32' cy='34' rx='28' ry='12' fill='none' stroke='%23f0c63a' stroke-width='7' stroke-linecap='round' transform='rotate(-22 32 34)'/><ellipse cx='32' cy='34' rx='28' ry='12' fill='none' stroke='%23ffffff' stroke-width='2' stroke-dasharray='2 200' stroke-dashoffset='-6' transform='rotate(-22 32 34)'/><text x='30' y='52' text-anchor='middle' font-family='Times New Roman, Times, serif' font-style='italic' font-weight='900' font-size='54' fill='%230a4ec1' stroke='%23073d97' stroke-width='1'>e</text></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-color: transparent;
}

.win98-ico-html {
	width: 32px;
	height: 32px;
	box-shadow: none;
	clip-path: none;
}

.win98-ico-home,
.win98-ico-shirt,
.win98-ico-tape,
.win98-ico-shut,
.win98-ico-html-small {
	display: inline-block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.win98-ico-home   { background: linear-gradient(#d44, #900); clip-path: polygon(50% 0, 100% 45%, 90% 45%, 90% 100%, 10% 100%, 10% 45%, 0 45%); }
.win98-ico-shirt  { background: #1a7bd0; clip-path: polygon(25% 12%, 35% 0, 65% 0, 75% 12%, 100% 22%, 85% 45%, 75% 40%, 75% 100%, 25% 100%, 25% 40%, 15% 45%, 0 22%); }
.win98-ico-tape   { background: #222; box-shadow: inset 0 0 0 2px #555; }
.win98-ico-tape::before, .win98-ico-tape::after { content: ""; }
.win98-ico-shut   { background: radial-gradient(#c33, #700 60%, #400); clip-path: polygon(50% 0, 70% 10%, 85% 30%, 90% 55%, 75% 85%, 50% 95%, 25% 85%, 10% 55%, 15% 30%, 30% 10%); }
.win98-ico-html-small {
	box-shadow: none;
	clip-path: none;
	position: relative;
}

.win98-ico-wmp,
.win98-ico-wmp-small {
	display: inline-block;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background:
		radial-gradient(circle at 50% 50%, #fff 0 24%, transparent 25%),
		conic-gradient(from 0deg, #ff7a00, #ffd000, #00d36b, #00a9ff, #b94aff, #ff3b8e, #ff7a00);
	border-radius: 50%;
	border: 1px solid #000;
}

.win98-ico-wmp-small {
	width: 14px; height: 14px;
}

/* Buy a Website — pound-sign coin style. The £ is flex-centred inside
   the disc so it never bleeds out and never overlaps the label below. */
.win98-ico-buy,
.win98-ico-buy-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	background: radial-gradient(circle at 35% 30%, #fff5b3 0 18%, #f4c542 40%, #b88716 100%);
	border-radius: 50%;
	border: 1px solid #5a3a00;
	color: #5a3a00;
	font-family: 'Times New Roman', serif;
	font-weight: bold;
	font-size: 12px;
	line-height: 1;
	overflow: hidden;
}

.win98-ico-buy::before,
.win98-ico-buy-small::before { content: "£"; }

.win98-ico-buy-small { width: 14px; height: 14px; font-size: 10px; }

/* When the buy icon lives inside a desktop shortcut it needs the
   larger 36px treatment that other shortcut icons get. The flex
   centring keeps the £ neatly inside the disc. */
.win98-shortcut-icon.win98-ico-buy {
	width: 36px;
	height: 36px;
	font-size: 22px;
}

/* Folder view icon variant for the £-coin */
.win98-icon-img.win98-ico-buy {
	width: 30px;
	height: 30px;
	font-size: 20px;
}

.win98-shortcut-icon.win98-ico-home,
.win98-shortcut-icon.win98-ico-shirt,
.win98-shortcut-icon.win98-ico-tape,
.win98-shortcut-icon.win98-ico-wmp,
.win98-shortcut-icon.win98-ico-shut {
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
}

/* ============= Windows Media Player ============= */
.win98-window--wmp {
	top: 60px;
	left: 80px;
	right: auto;
	bottom: auto;
	width: min(680px, calc(100% - 40px));
	height: min(440px, calc(100% - 70px));
	z-index: 25;
}

.win98-wmp-menubar { border-bottom: 1px solid var(--w98-lo); }

.win98-wmp-body {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 200px;
	background: #000;
	min-height: 0;
}

.win98-wmp-stage {
	position: relative;
	background: #000;
	overflow: hidden;
}

.win98-wmp-stage canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

.win98-wmp-overlay {
	position: absolute;
	bottom: 6px;
	left: 8px;
	right: 8px;
	color: #fff;
	font-family: Tahoma, sans-serif;
	font-size: 11px;
	text-shadow: 1px 1px 0 #000;
	pointer-events: none;
	z-index: 2;
}

.win98-wmp-now-label {
	font-size: 9px;
	letter-spacing: 0.18em;
	opacity: 0.8;
}

.win98-wmp-now-title { font-size: 14px; font-weight: bold; }

.win98-wmp-sidebar {
	background: var(--w98-face);
	border-left: 1px solid var(--w98-lo);
	padding: 6px 6px;
	overflow-y: auto;
	color: #000;
	font-size: 11px;
}

.win98-wmp-section-title {
	font-weight: bold;
	margin: 6px 2px 4px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.win98-wmp-select {
	width: 100%;
	font-family: inherit;
	font-size: 11px;
	padding: 2px;
	background: #fff;
	border: 0;
	box-shadow: inset 1px 1px 0 var(--w98-lo), inset -1px -1px 0 var(--w98-hi);
}

.win98-wmp-playlist {
	list-style: none;
	padding: 0;
	margin: 0;
	background: #fff;
	box-shadow: inset 1px 1px 0 var(--w98-lo), inset -1px -1px 0 var(--w98-hi);
	max-height: calc(100% - 80px);
	overflow-y: auto;
}

.win98-wmp-playlist li {
	padding: 4px 6px;
	font-size: 11px;
	border-bottom: 1px solid #e6e6e6;
}

.win98-wmp-playlist li:hover { background: #d4d4d4; }
.win98-wmp-playlist li.playing { background: var(--w98-sel); color: #fff; }

.win98-wmp-transport {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--w98-face);
	padding: 4px 6px;
	border-top: 1px solid var(--w98-lo);
}

.win98-wmp-btn {
	background: var(--w98-face);
	border: 0;
	padding: 4px 10px;
	min-width: 30px;
	font-size: 11px;
	box-shadow:
		inset 1px 1px 0 var(--w98-hi), inset -1px -1px 0 var(--w98-dark),
		inset 2px 2px 0 var(--w98-face-d), inset -2px -2px 0 var(--w98-lo);
}

.win98-wmp-btn:active {
	box-shadow:
		inset 1px 1px 0 var(--w98-dark), inset -1px -1px 0 var(--w98-hi),
		inset 2px 2px 0 var(--w98-lo), inset -2px -2px 0 var(--w98-face-d);
}

.win98-wmp-btn--play { min-width: 44px; }

.win98-wmp-time {
	flex: 1;
	text-align: center;
	font-size: 11px;
	font-family: 'Consolas', 'Courier New', monospace;
}

.win98-wmp-vol {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
}

.win98-wmp-vol input[type="range"] { width: 80px; }

@media (max-width: 768px) {
	.win98-window--wmp {
		top: 6px;
		left: 6px;
		right: 6px;
		width: auto;
		height: calc(100% - 42px);
	}
	.win98-wmp-body { grid-template-columns: 1fr; }
	.win98-wmp-sidebar { border-left: 0; border-top: 1px solid var(--w98-lo); }
}

/* ============= Buy a Website form window ============= */
.win98-window--buy {
	top: 80px;
	left: 140px;
	width: min(520px, calc(100% - 60px));
	height: auto;
	max-height: calc(100% - 80px);
	z-index: 26;
}

.win98-buy-body {
	flex: 1;
	background: var(--w98-face);
	padding: 12px 14px;
	overflow-y: auto;
}

.win98-buy-form { display: flex; flex-direction: column; gap: 8px; }

.win98-buy-row {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.win98-buy-row > span {
	font-size: 11px;
	font-weight: bold;
}

.win98-buy-row input,
.win98-buy-row select,
.win98-buy-row textarea {
	font-family: Tahoma, sans-serif;
	font-size: 12px;
	padding: 4px;
	background: #fff;
	border: 0;
	box-shadow: inset 1px 1px 0 var(--w98-lo), inset -1px -1px 0 var(--w98-hi);
}

.win98-buy-row textarea { resize: vertical; min-height: 60px; }

.win98-buy-actions {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-top: 4px;
}

.win98-buy-msg {
	flex: 1;
	font-size: 11px;
}

.win98-buy-msg.ok  { color: #006600; }
.win98-buy-msg.err { color: #c00000; }

.win98-buy-btn {
	background: var(--w98-face);
	border: 0;
	padding: 4px 14px;
	font-size: 12px;
	min-width: 80px;
	box-shadow:
		inset 1px 1px 0 var(--w98-hi), inset -1px -1px 0 var(--w98-dark),
		inset 2px 2px 0 var(--w98-face-d), inset -2px -2px 0 var(--w98-lo);
}

.win98-buy-btn:active {
	box-shadow:
		inset 1px 1px 0 var(--w98-dark), inset -1px -1px 0 var(--w98-hi),
		inset 2px 2px 0 var(--w98-lo), inset -2px -2px 0 var(--w98-face-d);
}

.win98-buy-btn--primary { font-weight: bold; }

.win98-buy-foot {
	margin: 8px 0 0;
	font-size: 11px;
	color: #444;
}

@media (max-width: 768px) {
	.win98-window--buy {
		top: 6px;
		left: 6px;
		right: 6px;
		width: auto;
		max-height: calc(100% - 42px);
	}
}

.win98-sm-icon { display: inline-block; }

/* =================================================================
 * PIP-BOY — scoped to the Projects section only.
 * Green phosphor CRT terminal. Splash plays once, fades to reveal the
 * interface. Everything lives inside .pipboy so nothing leaks.
 * ================================================================= */
.pipboy {
	position: absolute;
	inset: 0;
	background: #050c05;
	overflow: hidden;
	color: #5cff8e;
	font-family: 'VT323', 'Share Tech Mono', 'Courier New', monospace;
	--pb-green:        #5cff8e;
	--pb-green-bright: #a2ffbf;
	--pb-green-dim:    #2b7a44;
	--pb-green-deep:   #0e2a16;
	--pb-bg:           #050c05;
	text-shadow: 0 0 6px rgba(92, 255, 142, 0.55), 0 0 14px rgba(92, 255, 142, 0.25);
}

.pipboy *,
.pipboy *::before,
.pipboy *::after { box-sizing: border-box; }

/* Splash — imported Pip-Boy boot GIF fills the screen, plays once */
.pipboy-splash {
	position: absolute;
	inset: 0;
	background: #000;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.6s ease-out;
}

.pipboy-splash.fading-out { opacity: 0; pointer-events: none; }

.pipboy-splash img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Main screen */
.pipboy-screen {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 26px 34px 18px;
	opacity: 0;
	transition: opacity 0.5s ease-in;
	background:
		radial-gradient(ellipse 120% 90% at 50% 50%, rgba(35, 80, 45, 0.25), transparent 70%),
		linear-gradient(to bottom, #05130a, #050a05 50%, #04100a 100%);
}

.pipboy-screen.active { opacity: 1; }

/* Light vignette only (kept bright; the heavy outer CRT glare is off) */
.pipboy-curve {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	box-shadow:
		inset 0 0 140px 20px rgba(0, 0, 0, 0.35),
		inset 0 0 260px 50px rgba(10, 36, 18, 0.18);
}

/* Pip-Boy internal scanlines — kept, but lighter */
.pipboy-scanlines {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 6;
	background: repeating-linear-gradient(
		to bottom,
		rgba(92, 255, 142, 0.05) 0 2px,
		rgba(0, 0, 0, 0.12) 2px 4px
	);
	opacity: 0.5;
}

.pipboy-header,
.pipboy-body,
.pipboy-footer {
	position: relative;
	z-index: 2;
	width: 100%;
}

.pipboy-header { flex: 0 0 auto; }

.pipboy-brand {
	font-size: 18px;
	letter-spacing: 0.08em;
	color: var(--pb-green-bright);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--pb-green-dim);
}

.pipboy-tabs {
	display: flex;
	gap: 0;
	margin-top: 14px;
	border-bottom: 1px solid var(--pb-green-dim);
}

.pipboy-tab {
	flex: 1;
	background: transparent;
	border: 0;
	color: var(--pb-green-dim);
	font-family: inherit;
	font-size: 22px;
	letter-spacing: 0.18em;
	padding: 8px 6px;
	position: relative;
	cursor: inherit;
	transition: color 0.2s ease;
	text-shadow: inherit;
}

.pipboy-tab:hover { color: var(--pb-green); }

.pipboy-tab.active {
	color: var(--pb-green-bright);
}

.pipboy-tab.active::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -1px;
	height: 3px;
	background: var(--pb-green-bright);
	box-shadow: 0 0 12px var(--pb-green);
}

.pipboy-subtabs {
	display: flex;
	gap: 20px;
	padding: 8px 0;
	font-size: 16px;
	letter-spacing: 0.18em;
	border-bottom: 1px solid var(--pb-green-dim);
	overflow-x: auto;
}

.pipboy-subtab {
	background: transparent;
	border: 0;
	color: var(--pb-green-dim);
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	padding: 2px 6px;
	cursor: inherit;
	text-shadow: inherit;
}

.pipboy-subtab.active,
.pipboy-subtab:hover { color: var(--pb-green-bright); }

.pipboy-body {
	flex: 1;
	padding: 14px 0 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.pipboy-pane {
	display: none;
	min-height: 0;
}

.pipboy-pane.active {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	overflow-y: auto;
	animation: pipboy-fade 0.25s ease-out;
}

/* DATA pane manages its own internal scrolling via .pipboy-split */
.pipboy-pane--data { overflow-y: hidden; gap: 6px; }

@keyframes pipboy-fade {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.pipboy-boot {
	font-size: 18px;
	line-height: 1.4;
	letter-spacing: 0.02em;
	margin: 0 0 6px;
	white-space: pre-wrap;
	color: var(--pb-green-bright);
	flex: 0 0 auto;
}

/* Compact boot banner for DATA so the project list + details always
   fit on one screen without pushing down. */
.pipboy-boot--data {
	font-size: 13px;
	line-height: 1.35;
	padding-bottom: 4px;
	border-bottom: 1px dashed var(--pb-green-dim);
}

.pipboy-boot--stat {
	font-size: 18px;
	margin-bottom: 12px;
	padding-bottom: 4px;
	border-bottom: 1px dashed var(--pb-green-dim);
}

.pipboy-boot::after {
	content: "_";
	display: inline-block;
	animation: blinker 0.9s linear infinite;
	color: var(--pb-green-bright);
}

.pipboy-split {
	flex: 1 1 auto;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 2fr;
	gap: 20px;
	align-items: stretch;
	overflow: hidden;
}

.pipboy-split > .pipboy-list,
.pipboy-split > .pipboy-details {
	overflow-y: auto;
	height: 100%;
	min-height: 0;
}

.pipboy-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 20px;
	letter-spacing: 0.08em;
}

.pipboy-item {
	display: grid;
	grid-template-columns: 18px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	cursor: inherit;
	color: var(--pb-green);
	transition: background 0.1s ease, color 0.1s ease;
	outline: none;
}

.pipboy-item:hover,
.pipboy-item:focus {
	background: var(--pb-green-deep);
}

.pipboy-item.selected {
	background: var(--pb-green);
	color: #041009;
	text-shadow: none;
}

.pipboy-item .pipboy-bullet::before { content: ""; }

.pipboy-item.selected .pipboy-bullet::before { content: "\25B6"; }

.pipboy-item:hover .pipboy-bullet::before,
.pipboy-item:focus .pipboy-bullet::before { content: "\25B6"; }

.pipboy-name { letter-spacing: 0.1em; }

.pipboy-tag {
	font-size: 14px;
	letter-spacing: 0.12em;
	opacity: 0.8;
	justify-self: end;
}

.pipboy-sep {
	list-style: none;
	border-top: 1px dashed var(--pb-green-dim);
	margin: 8px 0;
	padding: 0;
}

.pipboy-sm-head {
	list-style: none;
	padding: 4px 10px;
	font-size: 16px;
	letter-spacing: 0.12em;
	color: var(--pb-green-dim);
}

.pipboy-list--inv,
.pipboy-list--radio {
	max-width: 680px;
	margin: 10px auto 0;
}

.pipboy-radio-now {
	max-width: 680px;
	margin: 16px auto 0;
	padding: 6px 10px;
	font-size: 18px;
	letter-spacing: 0.08em;
	color: var(--pb-green-bright);
	border-top: 1px dashed var(--pb-green-dim);
}

/* STAT pane: dense table of project metrics + contact card */
.pipboy-stat-table {
	font-size: 17px;
	line-height: 1.4;
	width: 100%;
	max-width: 820px;
	margin: 0 auto;
}

.pipboy-stat-row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 12px;
	padding: 4px 6px;
	border-bottom: 1px dashed rgba(43, 122, 68, 0.6);
}

.pipboy-stat-row--head {
	color: var(--pb-green-bright);
	border-bottom: 1px solid var(--pb-green-dim);
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pipboy-stat-row--total {
	margin-top: 6px;
	font-size: 18px;
	color: var(--pb-green-bright);
	border-top: 1px solid var(--pb-green-dim);
	border-bottom: 0;
}

.pipboy-stat-mrr {
	color: var(--pb-green-bright);
	letter-spacing: 0.04em;
}

.pipboy-stat-contact {
	max-width: 820px;
	margin: 18px auto 0;
	font-size: 17px;
	line-height: 1.5;
	color: var(--pb-green);
}

.pipboy-stat-contact-title {
	color: var(--pb-green-bright);
	font-size: 18px;
	letter-spacing: 0.08em;
	padding-bottom: 4px;
	border-bottom: 1px dashed var(--pb-green-dim);
	margin-bottom: 6px;
}

.pipboy-link {
	color: var(--pb-green-bright);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pipboy-link:hover { color: #fff; }

.pipboy-details-cta {
	display: inline-block;
	margin-top: 10px;
	padding: 4px 10px;
	border: 1px solid var(--pb-green);
	color: var(--pb-green-bright);
	font-size: 16px;
	letter-spacing: 0.1em;
	text-decoration: none;
}

.pipboy-details-cta:hover {
	background: var(--pb-green);
	color: #041009;
}

.pipboy-item.selected .pipboy-tag { color: inherit; opacity: 1; }

.pipboy-details {
	border-left: 1px solid var(--pb-green-dim);
	padding-left: 20px;
	min-height: 240px;
	color: var(--pb-green);
}

.pipboy-details-title {
	font-size: 22px;
	letter-spacing: 0.12em;
	color: var(--pb-green-bright);
	padding-bottom: 6px;
	border-bottom: 1px dashed var(--pb-green-dim);
	margin-bottom: 10px;
}

.pipboy-details-body {
	font-size: 17px;
	line-height: 1.5;
	margin: 0;
	white-space: pre-wrap;
}

.pipboy-footer {
	display: flex;
	gap: 20px;
	border-top: 1px solid var(--pb-green-dim);
	padding-top: 6px;
	font-size: 16px;
	letter-spacing: 0.12em;
	color: var(--pb-green-dim);
}

.pipboy-footer-cell { flex: 1; }
.pipboy-footer-cell:last-child { flex: 0 0 auto; }

/* ----- VERTISE.DAT // ADMIN row in the DATA list ----- */
.pipboy-item--admin {
	margin-top: 4px;
	color: var(--pb-green-dim);
	letter-spacing: 0.12em;
}
.pipboy-item--admin .pipboy-tag {
	color: var(--pb-green-dim);
	opacity: 0.85;
}
.pipboy-item--admin.selected,
.pipboy-item--admin:hover {
	color: var(--pb-green-bright);
}
.pipboy-item--admin.selected .pipboy-tag {
	color: var(--pb-green-bright);
}

/* ----- Admin gate + dashboard inside Pip-Boy details ----- */
.pipboy-admin-gate,
.pipboy-admin-dash {
	color: var(--pb-green);
	font-family: 'VT323', 'Share Tech Mono', monospace;
	font-size: 17px;
	line-height: 1.45;
}
.pipboy-admin-gate.shake {
	animation: pbAdminShake 0.35s linear;
}
@keyframes pbAdminShake {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-6px); }
	40%      { transform: translateX(6px); }
	60%      { transform: translateX(-3px); }
	80%      { transform: translateX(3px); }
}
.pipboy-admin-line { padding: 2px 0; }
.pipboy-admin-dim  { color: var(--pb-green-dim); }
.pipboy-admin-row  { display: flex; gap: 8px; margin: 10px 0; }
.pipboy-admin-input {
	flex: 1;
	background: transparent;
	border: 1px solid var(--pb-green-dim);
	color: var(--pb-green-bright);
	font-family: inherit;
	font-size: 18px;
	letter-spacing: 0.2em;
	padding: 6px 10px;
	outline: none;
}
.pipboy-admin-input:focus { border-color: var(--pb-green-bright); }
.pipboy-admin-btn {
	background: transparent;
	border: 1px solid var(--pb-green);
	color: var(--pb-green-bright);
	font-family: inherit;
	font-size: 16px;
	letter-spacing: 0.12em;
	padding: 6px 14px;
	cursor: pointer;
}
.pipboy-admin-btn:hover { background: var(--pb-green); color: #041009; }
.pipboy-admin-btn[disabled] { opacity: 0.5; cursor: default; }
.pipboy-admin-msg {
	min-height: 1.4em;
	color: var(--pb-green-bright);
	letter-spacing: 0.06em;
}

.pipboy-admin-h {
	color: var(--pb-green-bright);
	letter-spacing: 0.14em;
	border-bottom: 1px dashed var(--pb-green-dim);
	padding-bottom: 2px;
	margin: 14px 0 6px;
	font-size: 15px;
}
.pipboy-admin-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 12px 0 16px;
}
.pipboy-admin-card {
	border: 1px solid var(--pb-green-dim);
	padding: 8px 10px;
	background: rgba(40, 200, 90, 0.04);
}
.pipboy-admin-card-l { color: var(--pb-green-dim); font-size: 13px; letter-spacing: 0.16em; }
.pipboy-admin-card-v { color: var(--pb-green-bright); font-size: 24px; letter-spacing: 0.05em; }
.pipboy-admin-cols {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 24px;
	margin-bottom: 12px;
}
.pipboy-admin-col { min-width: 0; }
.pipboy-admin-li {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	border-bottom: 1px dotted rgba(40, 200, 90, 0.18);
	padding: 2px 0;
}
.pipboy-admin-li-n {
	color: var(--pb-green);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	flex: 1;
}
.pipboy-admin-li-c {
	color: var(--pb-green-bright);
	flex: 0 0 auto;
}

.pipboy-admin-spark { margin: 8px 0 16px; }
.pipboy-admin-bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 70px;
	border-bottom: 1px solid var(--pb-green-dim);
	padding-bottom: 2px;
}
.pipboy-admin-bar {
	flex: 1;
	min-width: 4px;
	background: var(--pb-green);
	position: relative;
	opacity: 0.85;
}
.pipboy-admin-bar:hover { opacity: 1; background: var(--pb-green-bright); }
.pipboy-admin-bar-n {
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	color: var(--pb-green-bright);
	font-size: 11px;
	letter-spacing: 0.04em;
	opacity: 0;
	transition: opacity 120ms;
	white-space: nowrap;
}
.pipboy-admin-bar:hover .pipboy-admin-bar-n { opacity: 1; }

.pipboy-admin-feed { margin-top: 10px; }
.pipboy-admin-feed-row {
	display: grid;
	grid-template-columns: 90px 1fr 140px;
	gap: 8px;
	padding: 2px 0;
	border-bottom: 1px dotted rgba(40, 200, 90, 0.18);
	font-size: 15px;
}
.pipboy-admin-when  { color: var(--pb-green-dim); }
.pipboy-admin-what  { color: var(--pb-green); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipboy-admin-where { color: var(--pb-green-bright); text-align: right; }

@media (max-width: 768px) {
	.pipboy-admin-stats { grid-template-columns: repeat(2, 1fr); }
	.pipboy-admin-cols  { grid-template-columns: 1fr; }
	.pipboy-admin-feed-row {
		grid-template-columns: 64px 1fr 90px;
		font-size: 13px;
	}
	.pipboy-admin-card-v { font-size: 20px; }
}

/* ----- Mobile compressions ----- */
@media (max-width: 768px) {
	/* Generic mobile window fallback */
	.win98-window {
		top: 6px;
		left: 6px;
		right: 6px;
		width: auto;
		height: calc(100% - 42px);
	}

	/* Explorer is smaller on phones so the desktop shortcut column +
	   a strip of desktop stay visible behind it. */
	#win98-explorer {
		top: 24px;
		left: 96px;
		right: 8px;
		bottom: 80px;
		width: auto;
		height: auto;
	}

	#win98-explorer.maximised {
		top: 6px !important;
		left: 6px !important;
		right: 6px !important;
		bottom: 36px !important;
	}

	.win98 .win98-shortcut:nth-of-type(1),
	.win98 .win98-shortcut:nth-of-type(2),
	.win98 .win98-shortcut:nth-of-type(3) { display: none; }

	.win98-task-btn { max-width: 120px; }
	.win98-addressbar { display: none; }

	.pipboy-screen { padding: 14px 14px 10px; }
	.pipboy-brand { font-size: 14px; }
	.pipboy-tab { font-size: 16px; padding: 6px 4px; letter-spacing: 0.1em; }
	.pipboy-subtabs { font-size: 12px; gap: 12px; }
	.pipboy-boot, .pipboy-details-body, .pipboy-list { font-size: 16px; }
	.pipboy-split { grid-template-columns: 1fr; gap: 16px; }
	.pipboy-details { border-left: 0; border-top: 1px dashed var(--pb-green-dim); padding-left: 0; padding-top: 12px; }
	.pipboy-footer { font-size: 12px; gap: 10px; flex-wrap: wrap; }
}


/* =================================================================
 * GTA — scoped to the Clothing section.
 * Splash loader (xnLoad-style rotating SA screens) + in-shop HUD
 * with minimap, 5-star wanted level, health/armor meters, and a
 * car-radio menu. Everything inside .gta so nothing leaks.
 * ================================================================= */
.gta {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: #fff;
	font-family: 'Russo One', 'Oswald', 'Arial Black', sans-serif;
	--gta-accent:  #ffb300;
	--gta-red:     #ff3b3b;
	--gta-green:   #5dc14e;
	--gta-blue:    #2d8ce4;
	--gta-cash:    #b1ff6b;
	--gta-chrome:  #d9d9d9;
	--gta-dark:    #0d0d10;
	--gta-panel:   rgba(0, 0, 0, 0.62);
	--gta-stroke:  #000;
}

/* ---------- Loading splash ---------- */
.gta-splash {
	position: absolute;
	inset: 0;
	z-index: 20;
	transition: opacity 0.7s ease-out;
	background: #000;
}

.gta-splash.fading-out { opacity: 0; pointer-events: none; }

.gta-splash-bg {
	position: absolute;
	inset: 0;
	background-color: #000;
	background-size: cover;
	background-position: center;
	transition: background-image 1.2s ease-in-out;
	filter: saturate(1.1) contrast(1.05);
}

.gta-splash-vignette {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.9) 100%),
		radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.6) 100%);
	pointer-events: none;
}

.gta-splash-top {
	position: absolute;
	top: 8%;
	left: 6%;
}

.gta-splash-bottom {
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: 6%;
}

.gta-splash-h1,
.gta-splash-h2,
.gta-splash-mark,
.gta-interior-title {
	position: relative;
	margin: 0;
	color: #fff;
	font-family: 'Russo One', 'Oswald', Impact, sans-serif;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	-webkit-text-stroke: 1px #000;
	text-shadow: 3px 3px 0 #000, -1px -1px 0 #000;
}

.gta-splash-h1 { font-size: clamp(42px, 7vw, 92px); line-height: 0.95; }
.gta-splash-h2 { font-size: clamp(20px, 3vw, 38px); margin-top: 4px; opacity: 0.95; }
.gta-splash-mark { font-size: clamp(44px, 8vw, 110px); line-height: 0.9; margin-bottom: 6px; }

.gta-loadbar {
	width: 100%;
	height: 18px;
	background: rgba(140, 140, 140, 0.75);
	overflow: hidden;
	margin: 14px 0 6px;
}

.gta-loadbar-fill {
	width: 0%;
	height: 100%;
	background: #eee;
	transition: width 0.2s ease-out;
}

.gta-splash-loading {
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 15px;
	margin: 0;
	letter-spacing: 0.04em;
}

/* ---------- Main shop ---------- */
.gta-shop {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease-in;
	overflow-y: auto;
	background-color: #0b051e;
	background-repeat: no-repeat;
	background-image:
		/* SA-style character artwork, pinned to the right */
		url("../assets/pngaaa.com-772737.png"),
		/* Los Santos skyline + palm silhouettes, pinned to the bottom */
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 500' preserveAspectRatio='xMidYMax slice'><g fill='%23000'><path d='M0 500 L0 370 L70 370 L70 330 L140 330 L140 360 L200 360 L200 310 L260 310 L260 280 L320 280 L320 330 L400 330 L400 300 L470 300 L470 350 L540 350 L540 320 L610 320 L610 290 L670 290 L670 340 L750 340 L750 310 L820 310 L820 360 L880 360 L880 340 L960 340 L960 300 L1020 300 L1020 340 L1090 340 L1090 360 L1150 360 L1150 320 L1220 320 L1220 360 L1300 360 L1300 340 L1400 340 L1400 500 Z'/><path d='M 58 500 L 64 270 L 74 270 L 82 500 Z'/><g transform='translate(70 270)'><path d='M0 0 Q -55 -40 -95 -20 Q -35 -5 -4 6 Z'/><path d='M0 0 Q 55 -40 95 -20 Q 35 -5 4 6 Z'/><path d='M0 0 Q -10 -55 15 -80 Q 10 -30 4 -4 Z'/><path d='M0 0 Q -75 -8 -110 25 Q -38 8 0 6 Z'/><path d='M0 0 Q 75 -4 108 28 Q 40 10 4 6 Z'/></g><path d='M 1316 500 L 1322 258 L 1332 258 L 1340 500 Z'/><g transform='translate(1328 258)'><path d='M0 0 Q -55 -35 -95 -10 Q -35 0 -4 8 Z'/><path d='M0 0 Q 55 -35 95 -10 Q 35 0 4 8 Z'/><path d='M0 0 Q 5 -60 -20 -82 Q -15 -30 -4 -4 Z'/><path d='M0 0 Q -80 -5 -110 25 Q -40 10 0 8 Z'/><path d='M0 0 Q 80 -10 105 22 Q 40 8 4 8 Z'/></g></g></svg>"),
		/* Warm setting-sun glow */
		radial-gradient(ellipse 70% 32% at 50% 64%, rgba(255, 200, 100, 0.55), transparent 60%),
		/* Darker ground band at the bottom */
		linear-gradient(to bottom, transparent 55%, rgba(15, 5, 30, 0.55) 85%, #09031a 100%),
		/* Sunset sky — orange → pink → magenta → purple → deep night */
		linear-gradient(to bottom,
			#ff8a4c 0%,
			#ff5e7e 18%,
			#c8418a 38%,
			#6a2a80 58%,
			#281a52 78%,
			#0b051e 100%);
	background-size:
		auto 78%,
		100% auto,
		100% 100%,
		100% 100%,
		100% 100%;
	background-position:
		92% 108%,
		center bottom,
		center,
		center,
		center;
}

.gta-shop.active { opacity: 1; }

.gta-shop::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	background:
		radial-gradient(ellipse 60% 35% at 50% 90%, rgba(0,0,0,0.55), transparent 70%);
	pointer-events: none;
}

/* ----- HUD top-right ----- */
.gta-hud {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	font-family: 'Russo One', 'Oswald', Impact, sans-serif;
	text-transform: uppercase;
}

.gta-hud-row { display: flex; align-items: center; gap: 8px; }

.gta-cash {
	color: var(--gta-cash);
	font-size: 34px;
	letter-spacing: 0.02em;
	-webkit-text-stroke: 1px #000;
	text-shadow: 2px 2px 0 #000;
}

.gta-stars { display: flex; gap: 2px; font-size: 26px; }

.gta-star {
	color: rgba(255, 255, 255, 0.25);
	text-shadow: 2px 2px 0 #000;
}

.gta-star.active {
	color: #fff;
	animation: gta-star-flash 0.9s steps(2) infinite;
}

@keyframes gta-star-flash {
	0%   { color: #fff; }
	50%  { color: #888; }
	100% { color: #fff; }
}

.gta-meter {
	display: flex;
	align-items: center;
	gap: 6px;
}

.gta-meter-icon {
	font-size: 16px;
	color: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px 0 #000;
}

.gta-meter-bar {
	width: 160px;
	height: 8px;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(0, 0, 0, 0.8);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.gta-meter--health .gta-meter-fill { background: var(--gta-green); }
.gta-meter--armor  .gta-meter-fill { background: var(--gta-blue); }

.gta-meter-fill { height: 100%; }

/* ----- Minimap bottom-left ----- */
.gta-minimap {
	position: absolute;
	bottom: 18px;
	left: 18px;
	z-index: 4;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow:
		0 0 0 2px #000,
		0 0 0 4px rgba(255, 255, 255, 0.85),
		0 6px 18px rgba(0, 0, 0, 0.55);
	isolation: isolate;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.gta-minimap-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.gta-minimap-ring {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.7);
}

.gta-minimap-label {
	position: absolute;
	left: 50%;
	bottom: -24px;
	transform: translateX(-50%);
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 11px;
	letter-spacing: 0.15em;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
	white-space: nowrap;
}

/* ----- Car radio bottom-right ----- */
.gta-radio {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 5;
	width: min(420px, calc(100% - 220px));
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gta-radio-card {
	background: rgba(0, 0, 0, 0.32);
	border: 1px solid rgba(255, 255, 255, 0.18);
	padding: 10px 14px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: center;
	color: #fff;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.gta-radio {
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.gta-radio-wave {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 30px;
	width: 36px;
}

.gta-radio-wave span {
	flex: 1;
	background: var(--gta-accent);
	animation: gta-wave 0.9s ease-in-out infinite;
	height: 30%;
}

.gta-radio-wave span:nth-child(2) { animation-delay: 0.1s; height: 60%; }
.gta-radio-wave span:nth-child(3) { animation-delay: 0.2s; height: 45%; }
.gta-radio-wave span:nth-child(4) { animation-delay: 0.3s; height: 80%; }
.gta-radio-wave span:nth-child(5) { animation-delay: 0.4s; height: 50%; }
.gta-radio-wave span:nth-child(6) { animation-delay: 0.5s; height: 70%; }
.gta-radio-wave span:nth-child(7) { animation-delay: 0.6s; height: 35%; }

.gta-radio.paused .gta-radio-wave span { animation-play-state: paused; opacity: 0.35; }

@keyframes gta-wave {
	0%, 100% { transform: scaleY(0.4); }
	50%      { transform: scaleY(1);   }
}

.gta-radio-info { min-width: 0; }
.gta-radio-station {
	font-family: 'Russo One', 'Oswald', Impact, sans-serif;
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
}
.gta-radio-song {
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 12px;
	color: #e8c44a;
	letter-spacing: 0.04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gta-radio-controls { display: flex; gap: 4px; }

.gta-radio-btn {
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 13px;
	padding: 0;
	transition: background 0.12s ease, color 0.12s ease;
}

.gta-radio-btn:hover { background: rgba(255, 179, 0, 0.3); color: #fff; }
.gta-radio-btn--play { background: rgba(255, 179, 0, 0.35); }

.gta-radio-stations {
	display: flex;
	gap: 4px;
	overflow: hidden;
	opacity: 0.75;
}

.gta-radio-dot {
	flex: 1;
	height: 3px;
	background: rgba(255, 255, 255, 0.28);
	transition: background 0.2s ease;
}

.gta-radio-dot.active { background: var(--gta-accent); }

/* ----- Shop interior / rack ----- */
.gta-interior {
	position: relative;
	z-index: 2;
	max-width: 980px;
	margin: 0 auto;
	padding: 80px 24px 240px;
	text-align: center;
}

.gta-interior-title {
	font-size: clamp(46px, 8vw, 92px);
	line-height: 0.9;
	color: #fff;
	-webkit-text-stroke: 2px #000;
	text-shadow: 4px 4px 0 #000;
	letter-spacing: 0.02em;
}

.gta-interior-sub {
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #ffd166;
	margin: 8px 0 36px;
	text-shadow: 1px 1px 0 #000;
}

.gta-rack {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px;
}

.gta-item {
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
	color: #fff;
	text-align: left;
}

.gta-item:hover {
	transform: translateY(-3px);
	border-color: var(--gta-accent);
	background: rgba(0, 0, 0, 0.55);
}

.gta-item-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, #0a0a0a, #1f1f1f);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.gta-item-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gta-item-img.has-img .gta-item-img-label { display: none; }

.gta-item-img-label {
	font-family: 'Russo One', Impact, sans-serif;
	font-size: 12px;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
	padding: 8px;
	text-align: center;
}

.gta-item-name {
	font-family: 'Russo One', Impact, sans-serif;
	font-size: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-shadow: 1px 1px 0 #000;
}

.gta-item-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.gta-item-price {
	font-family: 'Russo One', Impact, sans-serif;
	font-size: 18px;
	color: var(--gta-cash);
	text-shadow: 1px 1px 0 #000;
}

.gta-item-tag {
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--gta-accent);
	text-shadow: 1px 1px 0 #000;
}

.gta-interior-foot {
	margin-top: 30px;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
	animation: blinker 1.4s linear infinite;
}

/* ----- Mobile compressions for the GTA scope ----- */
@media (max-width: 768px) {
	/* Top-right HUD: compress and stack tightly */
	.gta-hud {
		top: 10px;
		right: 10px;
		gap: 3px;
		align-items: flex-end;
	}
	.gta-cash { font-size: 16px; }
	.gta-stars { font-size: 14px; gap: 1px; }
	.gta-meter-icon { font-size: 12px; }
	.gta-meter-bar { width: 90px; height: 6px; }

	/* Radio: hidden off the bottom until the user scrolls,
	   then it slides up and sticks as the bottom bar. */
	.gta-radio {
		position: fixed;
		bottom: 10px;
		z-index: 6;
		opacity: 0;
		transform: translateY(60px);
		pointer-events: none;
		left: 10px;
		right: 10px;
		width: auto;
	}

	.gta-shop.scrolled .gta-radio {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	.gta-radio-card {
		background: rgba(0, 0, 0, 0.42);
		padding: 6px 10px;
		gap: 8px;
	}
	.gta-radio-wave { width: 24px; height: 24px; }
	.gta-radio-station { font-size: 11px; }
	.gta-radio-song { font-size: 9px; }
	.gta-radio-btn { width: 26px; height: 26px; font-size: 11px; }
	.gta-radio-stations { display: none; }

	/* Character art: dim on mobile so it doesn't overwhelm the HUD */
	.gta-shop { background-size: auto 55%, 100% auto, 100% 100%, 100% 100%, 100% 100%; background-position: 105% 112%, center bottom, center, center, center; }

	/* Push the shop title + rack down so the HUD (5-star wanted +
	   health + armor cluster) doesn't sit on top of it on phones */
	.gta-interior { padding: 200px 16px 200px; }
	.gta-splash-h1 { font-size: 44px; }
	.gta-splash-h2 { font-size: 18px; }
	.gta-splash-mark { font-size: 52px; }
}

/* =================================================================
 * MOBILE — full optimisation pass.
 * Hides the heart back button entirely, keeps the bag clear of every
 * themed HUD, expands modals to fill more screen, sizes inputs so iOS
 * stops auto-zooming, and tightens generic spacing.
 * ================================================================= */
@media (max-width: 768px) {
	/* No more heart button on phones */
	.vertise-back-float,
	.vertise-back-float--tiny {
		display: none !important;
	}

	/* Bag stays top-right, but a touch smaller and respects safe-area
	   insets on notched devices. Position is already fixed + env() in
	   the base rule. */
	.vertise-bag-float {
		font-size: 10px;
		padding: 8px 10px;
		min-height: 40px;
	}

	/* Section-specific top-right HUDs are repositioned to clear the bag */
	body.section-clothing .gta-hud {
		top: max(56px, calc(env(safe-area-inset-top) + 50px));
	}


	/* ----- Modals: nearly full-screen on phones ----- */
	.modal-overlay {
		padding: 12px !important;
		padding-top:    max(12px, env(safe-area-inset-top)) !important;
		padding-right:  max(12px, env(safe-area-inset-right)) !important;
		padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
		padding-left:   max(12px, env(safe-area-inset-left)) !important;
		align-items: flex-start;
	}

	.modal-modal {
		width: 100%;
		max-width: none;
		max-height: calc(100dvh - 24px);
		padding: 20px 16px max(16px, env(safe-area-inset-bottom));
		margin-top: 4vh;
	}

	/* Bag CHECKOUT pinned to the bottom of the modal so it's always
	   reachable, mirroring a native payment sheet. */
	#bag-modal .checkout-btn {
		position: sticky;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 12px -16px -16px;
		padding: 16px 12px;
		min-height: 52px;
		background: #ffffff;
		color: #000000;
		z-index: 5;
		box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.45);
	}
	#bag-modal .bag-footnote { padding-bottom: 60px; }

	/* Leave space above the sticky CHECKOUT so the email signup +
	   footnote aren't permanently hidden under it. */
	#bag-modal .modal-content,
	#item-modal .modal-content { padding-bottom: 72px; }

	/* Item modal ADD TO BAG pinned to the bottom like the bag's CHECKOUT */
	#item-modal .add-to-bag-btn {
		position: sticky;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 12px -16px -16px;
		padding: 16px 12px;
		min-height: 52px;
		background: #ffffff;
		color: #000000;
		z-index: 5;
		box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.45);
	}

	.modal-modal--notify { padding: 24px 16px; }

	.modal-close {
		top: 4px;
		right: 6px;
		font-size: 22px;
		min-width: 40px;
		min-height: 40px;
	}

	.modal-content { gap: 14px; }

	.item-modal-name { font-size: 17px; }
	.item-modal-image { aspect-ratio: 4 / 5; max-height: 50vh; }

	.size-btn { font-size: 12px; padding: 8px 12px; min-width: 40px; min-height: 40px; }
	.color-btn { width: 34px; height: 34px; }
	.thumb-btn { width: 48px; height: 48px; }

	.add-to-bag-btn,
	.checkout-btn,
	.notify-ok-btn {
		font-size: 12px;
		padding: 14px 12px;
		min-height: 48px;
	}

	/* ----- Bag modal compactness ----- */
	.bag-item {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"info remove"
			"price price";
		gap: 4px 8px;
	}
	.bag-item-info   { grid-area: info; }
	.bag-item-remove { grid-area: remove; justify-self: end; }
	.bag-item-price  { grid-area: price; text-align: right; padding-top: 4px; }
	.bag-modal-title { font-size: 14px; }
	.bag-upsell-line { font-size: 7px; line-height: 1.4; }
	.bag-summary-row { font-size: 8px; }
	.bag-summary-row--total { font-size: 10px; }
	.bag-email-title { font-size: 8px; }
	.bag-footnote { font-size: 6px; }

	/* iOS doesn't zoom into inputs ≥ 16px font-size */
	input[type="text"],
	input[type="email"],
	input[type="number"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	select,
	textarea {
		font-size: 16px !important;
	}

	/* ----- Buy a Website form ----- */
	.win98-window--buy {
		left: 6px !important;
		right: 6px !important;
		top: 6px !important;
		width: auto !important;
		max-height: calc(100% - 42px) !important;
	}

	/* GTA splash header text shouldn't crowd the top */
	.gta-splash-top { top: max(8%, calc(env(safe-area-inset-top) + 12px)); }
}

@media (max-width: 480px) {
	.gta-splash-h1   { font-size: 36px; }
	.gta-splash-h2   { font-size: 14px; }
	.gta-splash-mark { font-size: 42px; }
	.gta-interior-title { font-size: 38px; }
	.gta-radio-card { padding: 6px 8px; gap: 6px; }
	.gta-radio-station { font-size: 10px; }
	.gta-radio-song { font-size: 8px; }
	.gta-radio-btn { width: 28px; height: 28px; }
	.vertise-bag-float { font-size: 9px; padding: 7px 9px; min-height: 36px; min-width: 36px; }

	.pipboy-screen { padding: 12px 10px 8px; }
	.pipboy-brand  { font-size: 12px; }
	.pipboy-tab    { font-size: 14px; letter-spacing: 0.08em; }
	.pipboy-boot   { font-size: 14px; }
	.pipboy-boot--data { font-size: 11px; }

	.win98-shortcuts > .win98-shortcut { width: 70px; }
	.win98-shortcut-label { font-size: 10px; }
}

/* =================================================================
 * EXTRA WINDOWS / FEATURES BUNDLE
 * Notepad / Run / Snake / DOS / Recycle Bin / Confirm
 * Phone HUD / WASTED / MISSION PASSED / Channel-flip / VHS rewind
 * Pip-Boy STAT grid / HOLOTAPES
 * ================================================================= */

/* ----- New Win98 icon glyphs (CSS-only) ----- */
.win98-ico-notepad,
.win98-ico-notepad-small {
	display: inline-block;
	width: 18px; height: 18px; flex: 0 0 18px;
	background: linear-gradient(#fffbe6 0 14%, #fff 14% 100%);
	border: 1px solid #000;
	position: relative;
}
.win98-ico-notepad::after {
	content: "";
	position: absolute; left: 12%; right: 12%; top: 28%; bottom: 14%;
	background:
		linear-gradient(to bottom, #000 0 1px, transparent 1px 3px) repeat-y;
	background-size: 100% 3px;
}
.win98-ico-notepad-small { width: 14px; height: 14px; }
.win98-shortcut-icon.win98-ico-notepad { width: 32px; height: 36px; }

.win98-ico-snake,
.win98-ico-snake-small {
	display: inline-block;
	width: 18px; height: 18px; flex: 0 0 18px;
	background: #001a08;
	position: relative;
	border: 1px solid #002a10;
}
.win98-ico-snake::after {
	content: "";
	position: absolute; inset: 12%;
	background:
		linear-gradient(#5cff8e 0 0) 0 0/3px 3px no-repeat,
		linear-gradient(#5cff8e 0 0) 3px 0/3px 3px no-repeat,
		linear-gradient(#5cff8e 0 0) 3px 3px/3px 3px no-repeat,
		linear-gradient(#5cff8e 0 0) 6px 3px/3px 3px no-repeat,
		linear-gradient(#5cff8e 0 0) 6px 6px/3px 3px no-repeat,
		linear-gradient(#ffd166 0 0) 12px 0/2px 2px no-repeat;
}
.win98-ico-snake-small { width: 14px; height: 14px; }
.win98-shortcut-icon.win98-ico-snake { width: 32px; height: 32px; }

.win98-ico-dos,
.win98-ico-dos-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px; height: 18px; flex: 0 0 18px;
	background: #000;
	color: #fff;
	font-family: 'Consolas', 'Courier New', monospace;
	font-size: 10px;
	border: 1px solid #444;
}
.win98-ico-dos::before { content: "C:>"; }
.win98-ico-dos-small { width: 14px; height: 14px; font-size: 8px; }
.win98-shortcut-icon.win98-ico-dos { width: 32px; height: 32px; font-size: 16px; }

.win98-ico-run-small,
.win98-ico-run-large {
	display: inline-block;
	width: 18px; height: 18px; flex: 0 0 18px;
	background:
		linear-gradient(135deg, #1e7bd6 0 50%, #0a4d9c 50% 100%);
	clip-path: polygon(0 30%, 70% 30%, 70% 0, 100% 50%, 70% 100%, 70% 70%, 0 70%);
}
.win98-ico-run-large { width: 36px; height: 36px; }

.win98-ico-recycle,
.win98-ico-recycle-small {
	display: inline-block;
	width: 18px; height: 18px; flex: 0 0 18px;
	background:
		linear-gradient(#1f3aa7 0 22%, #607c9b 22% 24%, #b6c0d0 24% 100%);
	clip-path: polygon(8% 22%, 92% 22%, 86% 100%, 14% 100%);
	border: 1px solid #000;
}
.win98-ico-recycle-small { width: 14px; height: 14px; }
.win98-shortcut-icon.win98-ico-recycle { width: 36px; height: 36px; }
.win98-recyclebin.win98-recycle-full .win98-ico-recycle {
	background:
		radial-gradient(circle at 70% 35%, #e7e7e7 0 6%, transparent 7%),
		radial-gradient(circle at 30% 50%, #d2d2d2 0 5%, transparent 6%),
		linear-gradient(#1f3aa7 0 22%, #607c9b 22% 24%, #b6c0d0 24% 100%);
}

.win98-ico-warn {
	display: inline-block;
	width: 16px; height: 14px; flex: 0 0 16px;
	background: #ffe066;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	position: relative;
}

/* ----- Notepad window ----- */
.win98-window--notepad {
	top: 70px;
	left: 200px;
	width: min(620px, calc(100% - 60px));
	height: min(460px, calc(100% - 80px));
	z-index: 22;
}
.win98-notepad-text {
	flex: 1;
	resize: none;
	background: #fff;
	color: #000;
	border: 0;
	box-shadow: inset 1px 1px 0 var(--w98-lo), inset -1px -1px 0 var(--w98-hi);
	padding: 8px;
	font-family: 'Lucida Console', 'Consolas', monospace;
	font-size: 13px;
	line-height: 1.45;
	outline: none;
}


/* ----- Run dialog ----- */
.win98-window--run {
	top: 30%;
	left: 50%;
	transform: translateX(-50%);
	width: min(420px, calc(100% - 40px));
	height: auto;
	z-index: 27;
}
.win98-run-body {
	display: flex;
	gap: 14px;
	padding: 14px;
	background: var(--w98-face);
	align-items: flex-start;
}
.win98-run-icon { flex: 0 0 36px; }
.win98-run-fields { flex: 1; }
.win98-run-fields p { margin: 0 0 10px; font-size: 11px; }
.win98-run-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}
.win98-run-row span { font-size: 11px; }
.win98-run-row input {
	flex: 1;
	font-family: Tahoma, sans-serif;
	font-size: 12px;
	padding: 3px 4px;
	background: #fff;
	border: 0;
	box-shadow: inset 1px 1px 0 var(--w98-lo), inset -1px -1px 0 var(--w98-hi);
}
.win98-run-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* ----- Snake ----- */
.win98-window--snake {
	top: 50px;
	left: 220px;
	width: min(520px, calc(100% - 40px));
	height: min(420px, calc(100% - 80px));
	z-index: 23;
}
.win98-snake-body {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 120px;
	gap: 6px;
	padding: 6px;
	background: var(--w98-face);
	min-height: 0;
}
.win98-snake-body canvas {
	background: #000;
	width: 100%;
	height: 100%;
	max-height: 100%;
	display: block;
	box-shadow: inset 1px 1px 0 var(--w98-lo), inset -1px -1px 0 var(--w98-hi);
	aspect-ratio: 1;
	justify-self: center;
}
.win98-snake-side {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 11px;
}
.win98-snake-stat {
	display: flex;
	justify-content: space-between;
	background: #fff;
	box-shadow: inset 1px 1px 0 var(--w98-lo), inset -1px -1px 0 var(--w98-hi);
	padding: 4px 6px;
}
.win98-snake-stat strong { font-weight: bold; }
.win98-snake-help { margin: auto 0 0; font-size: 10px; color: #444; }

/* ----- DOS prompt ----- */
.win98-window--dos {
	top: 90px;
	left: 260px;
	width: min(560px, calc(100% - 40px));
	height: min(360px, calc(100% - 90px));
	z-index: 24;
}
.win98-dos-body {
	flex: 1;
	background: #000;
	color: #fff;
	font-family: 'Consolas', 'Courier New', monospace;
	font-size: 13px;
	padding: 6px 8px;
	overflow-y: auto;
	min-height: 0;
}
.win98-dos-output {
	margin: 0;
	white-space: pre-wrap;
}
.win98-dos-line {
	display: flex;
	gap: 4px;
	align-items: baseline;
}
.win98-dos-line input {
	flex: 1;
	background: transparent;
	border: 0;
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	outline: none;
	padding: 0;
}

/* ----- Recycle Bin window ----- */
.win98-window--recyclebin {
	top: 60px;
	left: 160px;
	width: min(420px, calc(100% - 40px));
	height: min(360px, calc(100% - 80px));
	z-index: 22;
}
.win98-recycle-body {
	flex: 1;
	padding: 6px;
	background: #fff;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: #000;
}
.win98-recycle-toolbar { display: flex; gap: 4px; }
.win98-recycle-list {
	list-style: none;
	padding: 4px;
	margin: 0;
	flex: 1;
	background: #fff;
	box-shadow: inset 1px 1px 0 var(--w98-lo), inset -1px -1px 0 var(--w98-hi);
	overflow-y: auto;
}
.win98-recycle-list:empty::before {
	content: "(empty)";
	color: var(--w98-lo);
	font-size: 11px;
	display: block;
	padding: 12px;
	text-align: center;
}
.win98-recycle-list li {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 6px;
	font-size: 12px;
}
.win98-recycle-list li:hover { background: #d6ddee; }

/* When a shortcut is being dragged */
.win98-shortcut.dragging { opacity: 0.4; }

/* Recycle bin highlight when something is dragged over it */
.win98-recyclebin.drop-active .win98-shortcut-icon {
	outline: 2px dashed #fff;
	outline-offset: 2px;
}

/* Hidden trashed shortcuts */
.win98-shortcut.trashed { display: none !important; }

/* ----- Confirm dialog ----- */
.win98-window--confirm {
	top: 35%;
	left: 50%;
	transform: translateX(-50%);
	width: min(360px, calc(100% - 40px));
	height: auto;
	z-index: 30;
}
.win98-titlebar--warn {
	background: linear-gradient(to right, #c33 0%, #911 100%);
}
.win98-confirm-body {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	padding: 16px;
	background: var(--w98-face);
	align-items: center;
}
.win98-confirm-icon {
	width: 40px; height: 40px;
	background: radial-gradient(#fff, #cfe0ff);
	border: 1px solid #000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Times New Roman', serif;
	font-weight: bold;
	font-size: 24px;
	color: #0a4ec1;
}
.win98-confirm-msg { margin: 0; font-size: 12px; line-height: 1.4; grid-column: 2; }
.win98-confirm-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }

/* ----- Phone HUD (GTA) ----- */
.gta-phone {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 179, 0, 0.5);
	padding: 8px 12px;
	font-family: 'Russo One', 'Oswald', sans-serif;
	text-transform: uppercase;
	color: #fff;
	max-width: 280px;
	min-width: 200px;
	transform: translateY(120%);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(.2,.7,.3,1.2), opacity 0.25s;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.gta-phone.ringing { transform: translateY(0); opacity: 1; }
.gta-phone-icon {
	font-size: 24px;
	color: var(--gta-accent);
	animation: gta-phone-ring 0.4s ease-in-out infinite;
}
.gta-phone.silent .gta-phone-icon { animation: none; color: #aaa; }
@keyframes gta-phone-ring {
	0%, 100% { transform: rotate(-12deg); }
	50%      { transform: rotate(12deg); }
}
.gta-phone-name { font-size: 11px; letter-spacing: 0.1em; color: var(--gta-accent); }
.gta-phone-msg  { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 0.02em; text-transform: none; color: #fff; line-height: 1.25; }

/* ----- WANTED stars flash on add-to-bag ----- */
@keyframes gta-wanted-bump {
	0%   { transform: scale(1);    filter: brightness(1); }
	30%  { transform: scale(1.18); filter: brightness(2); }
	60%  { transform: scale(0.96); filter: brightness(1.2); }
	100% { transform: scale(1);    filter: brightness(1); }
}
.gta-stars.bump { animation: gta-wanted-bump 0.65s ease-out; }

.gta-respect-toast {
	position: absolute;
	right: 16px;
	top: 90px;
	z-index: 5;
	font-family: 'Russo One', sans-serif;
	font-size: 26px;
	color: var(--gta-cash);
	-webkit-text-stroke: 1px #000;
	text-shadow: 2px 2px 0 #000;
	pointer-events: none;
	opacity: 0;
}
.gta-respect-toast.show {
	animation: gta-respect-rise 1.2s ease-out forwards;
}
@keyframes gta-respect-rise {
	0%   { opacity: 0; transform: translateY(20px); }
	20%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-40px); }
}

/* ----- WASTED overlay ----- */
#vertise-wasted {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: radial-gradient(ellipse at center, rgba(120,0,0,0.85), rgba(20,0,0,0.95));
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ff3333;
	font-family: 'Times New Roman', serif;
	font-style: italic;
	font-weight: 900;
}
#vertise-wasted.hidden { display: none; }
.vertise-wasted-text {
	font-size: clamp(64px, 14vw, 180px);
	letter-spacing: 0.05em;
	text-shadow:
		0 0 30px #ff0000,
		4px 4px 0 #5a0000;
	animation: wasted-in 1.8s ease-out;
}
@keyframes wasted-in {
	0%   { opacity: 0; transform: scale(0.6); filter: blur(8px); }
	30%  { opacity: 1; transform: scale(1.05); filter: blur(0); }
	100% { opacity: 1; transform: scale(1); }
}

/* ----- MISSION PASSED overlay ----- */
#vertise-mission-passed {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: radial-gradient(ellipse at center, rgba(0,0,30,0.85), rgba(0,0,0,0.96));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #ffd166;
	font-family: 'Russo One', 'Oswald', sans-serif;
	text-transform: uppercase;
}
#vertise-mission-passed.hidden { display: none; }
.vertise-mp-top {
	font-size: clamp(36px, 8vw, 96px);
	letter-spacing: 0.06em;
	-webkit-text-stroke: 2px #000;
	text-shadow: 4px 4px 0 #000;
	animation: mp-in 0.6s ease-out;
}
.vertise-mp-bottom {
	font-size: clamp(16px, 3vw, 32px);
	letter-spacing: 0.18em;
	color: var(--gta-cash);
	text-shadow: 2px 2px 0 #000;
	animation: mp-in 0.6s 0.15s ease-out backwards;
}
@keyframes mp-in {
	0%   { opacity: 0; transform: translateY(40px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ----- Channel-flip "CH 0X" bug ----- */
#vertise-channel {
	position: fixed;
	top: 14px;
	right: 80px;
	z-index: 60;
	padding: 4px 8px;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.25);
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	color: #fff;
	letter-spacing: 0.12em;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
#vertise-channel.show {
	opacity: 1;
	transform: translateY(0);
}

/* ----- VHS rewind overlay (going back to home) ----- */
#vertise-vhs {
	position: fixed;
	inset: 0;
	z-index: 150;
	pointer-events: none;
	display: none;
	background:
		repeating-linear-gradient(110deg,
			rgba(255,255,255,0) 0px,
			rgba(255,255,255,0.10) 2px,
			rgba(0,0,0,0.10) 4px,
			rgba(255,255,255,0) 6px),
		linear-gradient(to bottom,
			rgba(0,0,0,0.05),
			rgba(0,0,0,0.5));
	mix-blend-mode: screen;
}
#vertise-vhs.run {
	display: block;
	animation: vhs-rewind 0.7s steps(14) forwards;
}
@keyframes vhs-rewind {
	0%   { opacity: 0; transform: scaleX(1); }
	10%  { opacity: 1; }
	100% { opacity: 0; transform: scaleX(-1); }
}

/* ----- Pip-Boy STAT bouncing-number grid ----- */
.pipboy-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px;
	max-width: 820px;
	margin: 0 auto 14px;
}
.pipboy-stat-card {
	border: 1px solid var(--pb-green-dim);
	padding: 8px 10px;
	text-align: left;
}
.pipboy-stat-card-label {
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--pb-green-dim);
	text-transform: uppercase;
}
.pipboy-stat-card-value {
	font-size: 26px;
	letter-spacing: 0.05em;
	color: var(--pb-green-bright);
	font-variant-numeric: tabular-nums;
}

/* Recycle-bin shortcut on mobile keeps showing under the column */
@media (max-width: 768px) {
	.win98-shortcuts > .win98-shortcut { width: 76px; }
	.win98-window--snake { left: 6px !important; right: 6px !important; top: 6px !important; bottom: 40px !important; width: auto !important; height: auto !important; }
	.win98-snake-body { grid-template-columns: 1fr; }
	.win98-snake-body canvas { aspect-ratio: 1; max-height: 60vh; }
	.win98-window--dos,
	.win98-window--notepad,
	.win98-window--recyclebin {
		left: 6px !important; right: 6px !important;
		top: 6px !important; bottom: 40px !important;
		width: auto !important; height: auto !important;
	}
	.win98-window--run,
	.win98-window--confirm {
		left: 50% !important;
		transform: translateX(-50%);
		width: calc(100% - 24px) !important;
	}
	.gta-phone {
		left: 8px;
		bottom: 8px;
		max-width: calc(100% - 16px);
		padding: 6px 10px;
	}
	.gta-phone-name { font-size: 9px; }
	.gta-phone-msg  { font-size: 10px; }
	#vertise-channel { right: 60px; font-size: 8px; }
}

/* Pip-Boy splash skip ASCII */
.pipboy-splash-skip {
	position: absolute;
	inset: 0;
	margin: 0;
	color: #5cff8e;
	background: #000;
	font-family: 'VT323', 'Share Tech Mono', monospace;
	font-size: 24px;
	letter-spacing: 0.05em;
	padding: 12vh 8vw;
	white-space: pre-wrap;
	text-shadow: 0 0 8px rgba(92, 255, 142, 0.55);
	z-index: 5;
}

/* BSOD */
#vertise-bsod {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: #0a37a6;
	color: #fff;
	font-family: 'Lucida Console', 'Consolas', monospace;
	font-size: 14px;
	padding: 30px;
	white-space: pre-wrap;
	overflow: auto;
}
#vertise-bsod pre { margin: 0; }

/* =================================================================
 * SHADER OVERLAY + CURSOR GHOSTS + VAULT-13 SECRET ROUTE
 * ================================================================= */

/* The WebGL CRT shader sits above everything except the GIF cursor
   and global overlays. It only paints scanlines / RGB shift /
   vignette / barrel; the DOM behind stays interactive. */
#vertise-crt-shader {
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	mix-blend-mode: normal;
}

/* --- /#vault-13 secret route --- */
.vault-13-overlay {
	position: fixed;
	inset: 0;
	z-index: 220;
	background:
		radial-gradient(ellipse at center, rgba(10, 36, 18, 0.6), rgba(0, 0, 0, 0.95)),
		repeating-linear-gradient(to bottom,
			rgba(92, 255, 142, 0.05) 0 2px,
			rgba(0, 0, 0, 0.2) 2px 4px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #5cff8e;
	font-family: 'VT323', 'Share Tech Mono', monospace;
	text-shadow: 0 0 8px rgba(92, 255, 142, 0.6);
	padding: 20px;
}

.vault-13-frame {
	border: 2px solid #5cff8e;
	padding: 28px 32px;
	max-width: 480px;
	width: 100%;
	background: rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 40px rgba(92, 255, 142, 0.25), inset 0 0 30px rgba(92, 255, 142, 0.05);
	text-align: center;
}

.vault-13-title { font-size: 22px; letter-spacing: 0.18em; color: #a2ffbf; }
.vault-13-sub   { font-size: 14px; letter-spacing: 0.18em; color: #2b7a44; margin-bottom: 20px; }

.vault-13-screen {
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid #2b7a44;
	padding: 16px 12px;
	font-size: 18px;
	letter-spacing: 0.15em;
	margin-bottom: 16px;
}
.vault-13-prompt { color: #a2ffbf; }
.vault-13-display { font-size: 34px; letter-spacing: 0.4em; margin: 14px 0 6px; color: #fff; }
.vault-13-feedback { font-size: 14px; min-height: 1.4em; color: #ffd166; }

.vault-13-screen.shake { animation: vault-shake 0.6s ease-in-out; }
@keyframes vault-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-8px); }
	40%, 80% { transform: translateX(8px); }
}

.vault-13-pad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0 auto 14px;
	max-width: 280px;
}
.vault-13-key {
	font-family: inherit;
	font-size: 22px;
	color: #5cff8e;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid #2b7a44;
	padding: 12px 0;
	min-height: 48px;
	transition: background 0.1s, color 0.1s;
}
.vault-13-key:hover { background: #2b7a44; color: #fff; }
.vault-13-key:active { transform: translateY(1px); }
.vault-13-key--ok   { color: #a2ffbf; border-color: #5cff8e; }
.vault-13-key--back { color: #ffd166; }

.vault-13-foot { font-size: 12px; color: #2b7a44; letter-spacing: 0.18em; }
.vault-13-foot a { color: #a2ffbf; text-decoration: underline; }

.vault-13-frame--reward { animation: vault-reveal 0.6s ease-out; }
.vault-13-message {
	text-align: left;
	font-size: 14px;
	line-height: 1.4;
	color: #5cff8e;
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid #2b7a44;
	padding: 10px 12px;
	margin: 0 0 12px;
	white-space: pre-wrap;
}
.vault-13-promo {
	font-family: 'VT323', monospace;
	font-size: 44px;
	letter-spacing: 0.3em;
	color: #a2ffbf;
	background: rgba(0, 0, 0, 0.55);
	border: 1px dashed #5cff8e;
	padding: 8px 0;
	margin-bottom: 12px;
}
.vault-13-copy, .vault-13-shop {
	font-family: inherit;
	font-size: 16px;
	letter-spacing: 0.12em;
	color: #5cff8e;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid #5cff8e;
	padding: 10px 18px;
	margin: 4px;
	min-height: 44px;
}
.vault-13-copy:hover, .vault-13-shop:hover { background: #2b7a44; color: #fff; }
@keyframes vault-reveal {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

/* When the vault overlay is open, dim/hide the underlying CRT
   so it doesn't fight visually. */
body.vault-13-on .vertise-tube-shape { filter: blur(6px) brightness(0.4); }
body.vault-13-on #vertise-cursor,
body.vault-13-on #vertise-channel,
body.vault-13-on #vertise-crt-shader,

/* =================================================================
 * BLUEPRINT MODE — hold the VERTISE logo to flip everything into
 * Figma-style wireframe outlines.
 * ================================================================= */
body.blueprint-mode {
	background: #0e2244 !important;
}
body.blueprint-mode .vertise-tube-shape,
body.blueprint-mode .vertise-tube-shape * {
	color: #cfe6ff !important;
	background: transparent !important;
	background-image: none !important;
	border-color: rgba(207, 230, 255, 0.55) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	filter: none !important;
	fill: currentColor !important;
	stroke: currentColor !important;
}
body.blueprint-mode .vertise-tube-shape *:not(svg):not(path):not(text):not(textPath) {
	outline: 1px dashed rgba(207, 230, 255, 0.45);
	outline-offset: -1px;
}
body.blueprint-mode img,
body.blueprint-mode video,
body.blueprint-mode canvas { opacity: 0.18 !important; filter: grayscale(1) brightness(0.6) !important; }
body.blueprint-mode .vertise-tube-shape::before,
body.blueprint-mode .vertise-tube-shape::after,
body.blueprint-mode #vertise-static,
body.blueprint-mode #vertise-cursor { display: none !important; }
body.blueprint-mode::after {
	content: "BLUEPRINT MODE  ·  HOLD THE LOGO AGAIN TO RETURN";
	position: fixed;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	color: #cfe6ff;
	font-family: 'Press Start 2P', monospace;
	font-size: 9px;
	letter-spacing: 0.18em;
	z-index: 999;
	pointer-events: none;
}

/* =================================================================
 * PET CAT — pixel-cat sprite that walks across the page now and then
 * ================================================================= */
#vertise-cat {
	position: fixed;
	z-index: 95;
	width: 36px;
	height: 20px;
	pointer-events: auto;
	cursor: pointer;
	background:
		/* Body (dark grey) */
		linear-gradient(#3a3a3a 0 100%) 4px 4px/26px 12px no-repeat,
		/* Head */
		linear-gradient(#3a3a3a 0 100%) 0 0/12px 12px no-repeat,
		/* Ears (triangles via gradients are limited; use small rects) */
		linear-gradient(#3a3a3a 0 100%) 0 -2px/4px 6px no-repeat,
		linear-gradient(#3a3a3a 0 100%) 8px -2px/4px 6px no-repeat,
		/* Tail */
		linear-gradient(#3a3a3a 0 100%) 30px 2px/6px 4px no-repeat,
		/* Legs */
		linear-gradient(#3a3a3a 0 100%) 8px 16px/3px 4px no-repeat,
		linear-gradient(#3a3a3a 0 100%) 22px 16px/3px 4px no-repeat;
	image-rendering: pixelated;
	transition: filter 0.2s ease;
	opacity: 0.85;
}
#vertise-cat::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 2px;
	width: 2px;
	height: 2px;
	background: #ffd166;
	box-shadow: 4px 0 0 #ffd166;
}
#vertise-cat.walking { animation: cat-bob 0.36s steps(2) infinite; }
#vertise-cat.purring { filter: drop-shadow(0 0 8px #ffd166); }
#vertise-cat.purring::after {
	content: "♥";
	position: absolute;
	right: -14px;
	top: -10px;
	color: #ff7aa0;
	font-size: 14px;
	animation: purr-heart 1.6s ease-out forwards;
}
@keyframes cat-bob {
	0%, 100% { transform: translateY(0) scaleX(var(--sx, 1)); }
	50%      { transform: translateY(-1px) scaleX(var(--sx, 1)); }
}
@keyframes purr-heart {
	0%   { opacity: 0; transform: translateY(0)  scale(1); }
	30%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-30px) scale(1.6); }
}

/* =================================================================
 * HOME EXTRAS — small Drive / 3D / Garden buttons under main row
 * ================================================================= */
.home-extras {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: -12px;
}
.home-extra {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 18px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #fff;
	min-width: 130px;
	transition: background 0.2s, border-color 0.2s;
	font-family: 'Press Start 2P', monospace;
}
.home-extra:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: #fff;
}
.home-extra-icon { font-size: 22px; line-height: 1; }
.home-extra-label { font-size: 10px; letter-spacing: 0.15em; color: #fff; }
.home-extra-sub   { font-size: 7px;  letter-spacing: 0.12em; color: #9b9b9b; }

/* =================================================================
 * THE GARDEN
 * ================================================================= */
.garden-wrap {
	position: relative;
	min-height: 100%;
	background:
		linear-gradient(to bottom, #050617 0%, #0c1130 40%, #0b1f3f 100%);
	color: #fff;
	overflow: hidden;
}
#garden-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: crosshair;
	touch-action: none;
}
.garden-ui {
	position: relative;
	z-index: 2;
	padding: 14px 18px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: 'Press Start 2P', monospace;
	pointer-events: none;
}
.garden-ui > * { pointer-events: auto; }
.garden-title    { font-size: 16px; letter-spacing: 0.2em; }
.garden-sub      { font-size: 9px;  letter-spacing: 0.12em; color: #9bb6ff; }
.garden-counter  { font-size: 8px;  letter-spacing: 0.12em; color: #6a7fb6; margin-top: 4px; }
.garden-controls {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 8px;
	flex-wrap: wrap;
}
.garden-swatch { font-size: 8px; letter-spacing: 0.1em; display: flex; align-items: center; gap: 6px; }
.garden-swatch input[type="range"] { width: 160px; }
.garden-back {
	font-family: 'Press Start 2P', monospace;
	font-size: 9px;
	letter-spacing: 0.12em;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	padding: 8px 12px;
}
.garden-back:hover { background: rgba(255, 255, 255, 0.1); }

.garden-note {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
}
.garden-note.hidden { display: none; }
.garden-note-card {
	background: #0c1130;
	border: 1px solid #4060a0;
	padding: 18px;
	width: min(420px, 90%);
	font-family: 'Press Start 2P', monospace;
	color: #fff;
}
.garden-note-title { font-size: 10px; letter-spacing: 0.1em; margin-bottom: 10px; }
.garden-note-card textarea {
	width: 100%;
	min-height: 80px;
	background: #050617;
	border: 1px solid #4060a0;
	color: #fff;
	font-family: inherit;
	font-size: 11px;
	padding: 8px;
	box-sizing: border-box;
}
.garden-note-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }
.garden-note-actions button {
	font-family: inherit;
	font-size: 9px;
	letter-spacing: 0.1em;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	padding: 8px 12px;
}
#garden-note-save { background: #fff; color: #000; border-color: #fff; }

/* =================================================================
 * DRIVE MODE
 * ================================================================= */
.drive-wrap {
	position: relative;
	min-height: 100%;
	background: #0a0a0a;
	overflow: hidden;
	color: #fff;
}
#drive-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
}
.drive-ui {
	position: relative;
	z-index: 2;
	padding: 14px 18px;
	font-family: 'Press Start 2P', monospace;
	pointer-events: none;
}
.drive-ui > * { pointer-events: auto; }
.drive-title { font-size: 16px; letter-spacing: 0.2em; }
.drive-sub   { font-size: 8px;  letter-spacing: 0.12em; color: #9b9b9b; margin-top: 4px; }
.drive-back  {
	font-family: 'Press Start 2P', monospace;
	font-size: 9px;
	letter-spacing: 0.12em;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	padding: 8px 12px;
	margin-top: 10px;
}
.drive-touch {
	position: absolute;
	bottom: 16px;
	right: 16px;
	z-index: 3;
	display: none;
}
@media (max-width: 768px), (pointer: coarse) {
	.drive-touch { display: block; }
}
.drive-pad {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px;
	grid-template-areas:
		". up ."
		"left down right";
	gap: 4px;
}
.drive-pad button {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	font-size: 22px;
	touch-action: manipulation;
	user-select: none;
}
.drive-pad button[data-d="up"]    { grid-area: up; }
.drive-pad button[data-d="left"]  { grid-area: left; }
.drive-pad button[data-d="down"]  { grid-area: down; }
.drive-pad button[data-d="right"] { grid-area: right; }

/* =================================================================
 * CRT 3D
 * ================================================================= */
.crt3d-wrap {
	position: relative;
	min-height: 100%;
	background: radial-gradient(ellipse at center, #0c0c20 0%, #000 80%);
	overflow: hidden;
	color: #fff;
}
#crt3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.crt3d-ui {
	position: relative;
	z-index: 2;
	padding: 14px 18px;
	font-family: 'Press Start 2P', monospace;
	pointer-events: none;
}
.crt3d-ui > * { pointer-events: auto; }
.crt3d-title { font-size: 16px; letter-spacing: 0.2em; }
.crt3d-sub   { font-size: 8px; letter-spacing: 0.12em; color: #9b9b9b; margin-top: 4px; }

/* =================================================================
 * AIRDROP QR in bag modal
 * ================================================================= */
.bag-airdrop {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.bag-airdrop canvas,
.bag-airdrop img {
	width: 72px;
	height: 72px;
	background: #fff;
	padding: 4px;
}
.bag-airdrop-text {
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	letter-spacing: 0.12em;
	color: #9b9b9b;
	line-height: 1.5;
}
.bag-airdrop-text strong { color: #fff; }