/* ==========================================================================
   Apps
   ========================================================================== */

.app { position: relative; background: var(--panel); }

/* --------------------------------------------------------------------------
   MUSIC.EXE
   -------------------------------------------------------------------------- */

.music { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.music__deck {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	padding: 18px 18px 14px;
	border-bottom: 1.5px solid var(--red-deep);
	background:
		radial-gradient(90% 120% at 0% 0%, rgb(255 69 69 / 0.24), transparent 60%),
		#030000;
	overflow: hidden;
}

.music__viz {
	display: block;
	width: 100%;
	height: 58px;
	flex: none;
	border-bottom: 2px solid var(--red);
	background:
		repeating-linear-gradient(0deg, rgb(255 69 69 / 0.06) 0 1px, transparent 1px 4px),
		#020000;
	pointer-events: none;
}

.music__now { position: relative; display: grid; gap: 4px; min-height: 96px; }
.music__title {
	font-family: var(--f-display);
	font-size: clamp(24px, 4.4cqi, 40px);
	line-height: 1.05;
	text-transform: uppercase;
	text-shadow: var(--text-glow-white);
}
.music__meta { color: var(--red); font-family: var(--f-num); font-size: 14px; letter-spacing: 0.12em; }
.music__note { color: var(--blush); font-size: 19px; }

.music__transport {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.tbtn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--red);
	background: #000;
	color: var(--white);
	transition: background 0.12s, color 0.12s, box-shadow 0.15s;
}
.tbtn .pd-glyph { width: 18px; height: 18px; }
.tbtn:hover { background: var(--red); color: var(--black); box-shadow: var(--glow); }
.tbtn--big { width: 56px; height: 56px; background: var(--red); color: var(--black); box-shadow: var(--glow); }
.tbtn--big .pd-glyph { width: 24px; height: 24px; }
.tbtn--big:hover { background: var(--white); }

.music__time { font-family: var(--f-num); font-size: 13px; color: var(--pink); min-width: 42px; text-align: center; }
.range--seek { flex: 1; min-width: 120px; }
.music__vol { display: flex; align-items: center; gap: 6px; color: var(--pink); width: 130px; }
.music__vol .pd-glyph { width: 18px; height: 18px; }

.tracklist {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	counter-reset: t;
}

.track { position: relative; border-bottom: 1.5px solid var(--red-deep); }
.track__btn {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr auto auto auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 14px;
	text-align: left;
	color: var(--white);
	transition: background 0.12s;
}
.track__btn:hover { background: rgb(255 69 69 / 0.1); }
.track__disc { width: 40px; transition: filter 0.2s; }
.track__title { font-family: var(--f-display); font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track__tag {
	padding: 2px 6px 1px;
	border: 1px solid var(--red);
	color: var(--red);
	font-family: var(--f-display);
	font-size: 9px;
	letter-spacing: 0.1em;
}
.track__bpm,
.track__dur { color: var(--pink); font-size: 19px; white-space: nowrap; }
.track__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1.5px;
	height: 3px;
	pointer-events: none;
}
.track__bar i { display: block; width: 0; height: 100%; background: var(--red); box-shadow: var(--glow); }

.track.is-current .track__btn { background: linear-gradient(90deg, rgb(255 69 69 / 0.28), rgb(255 69 69 / 0.04)); }
.track.is-current .track__title { color: var(--white); text-shadow: var(--text-glow); }
.track.is-playing .track__disc { animation: spin 1.6s linear infinite; filter: drop-shadow(0 0 8px var(--red)); }

.track__links { display: flex; gap: 12px; padding: 0 14px 10px 70px; font-size: 18px; }
.js .track__native { display: none; }
.no-js .track__native { width: calc(100% - 28px); margin: 0 14px 10px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   PODUNK PLAYER (the cassette deck)
   -------------------------------------------------------------------------- */

.deck { display: flex; flex-direction: column; gap: 12px; padding: 14px; flex: 1; background: #030000; }

.deck__tape {
	position: relative;
	aspect-ratio: 1.62;
	border: 2px solid var(--red);
	background:
		linear-gradient(180deg, #2a0707, #120202 60%, #050000);
	box-shadow: inset 0 0 0 6px #000, var(--glow);
	overflow: hidden;
}
.deck__label {
	position: absolute;
	inset: 10% 8% auto;
	height: 30%;
	display: grid;
	align-content: center;
	padding: 4px 12px;
	background: var(--blush);
	color: var(--black);
	box-shadow: inset 0 -5px 0 var(--red);
}
.deck__label-title {
	font-family: var(--f-display);
	font-size: 15px;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.deck__label-meta { font-size: 16px; color: var(--red-deep); }
.deck__window {
	position: absolute;
	left: 18%;
	right: 18%;
	top: 48%;
	height: 30%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 7%;
	border: 2px solid var(--red-deep);
	background: #000;
}
.deck__reel {
	position: relative;
	width: 26%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 3px solid var(--blush);
	background: repeating-conic-gradient(var(--blush) 0 12deg, transparent 12deg 60deg);
	box-shadow: 0 0 0 calc(var(--wind, 0.3) * 18px) #3a1010;
}
.deck__reel::after {
	content: '';
	position: absolute;
	inset: 34%;
	border-radius: 50%;
	background: #000;
	border: 2px solid var(--red);
}
.is-playing .deck__reel { animation: spin 1.8s linear infinite; }
.deck__screws { position: absolute; inset: 6px; pointer-events: none; }

.deck__vu { display: grid; gap: 4px; }
.deck__vu-row { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 8px; color: var(--pink); font-family: var(--f-num); font-size: 11px; }
.deck__vu-bar {
	height: 10px;
	background:
		linear-gradient(90deg, #42ff7a 0 60%, #ffd54a 60% 80%, var(--red) 80%) left / var(--lvl, 0%) 100% no-repeat,
		repeating-linear-gradient(90deg, #1a0505 0 6px, #000 6px 8px);
	transition: background-size 0.06s linear;
}
.deck__controls { display: flex; justify-content: center; gap: 10px; }

/* --------------------------------------------------------------------------
   SHOP.EXE
   -------------------------------------------------------------------------- */

.shop { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.shop__grid-wrap,
.product { flex: 1; min-height: 0; overflow-y: auto; }
.shop__grid-wrap[hidden],
.product[hidden] { display: none; }

.shop__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 16px;
	list-style: none;
}

.pcard {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px 10px;
	padding: 10px 10px 12px;
	border: 2px solid var(--red-deep);
	background: #0a0101;
	color: var(--white);
	text-decoration: none;
	transition: border-color 0.18s, box-shadow 0.18s, transform 0.25s var(--ease-out);
}
.pcard:hover { border-color: var(--red); box-shadow: var(--glow); transform: translateY(-3px); color: var(--white); }

.pcard__img {
	position: relative;
	grid-column: 1 / -1;
	aspect-ratio: 1;
	overflow: hidden;
	background:
		radial-gradient(60% 60% at 50% 45%, rgb(255 69 69 / 0.22), transparent 70%),
		repeating-linear-gradient(0deg, rgb(255 69 69 / 0.05) 0 1px, transparent 1px 3px),
		#140303;
}
.pcard__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6%;
	transition: opacity 0.35s, transform 0.5s var(--ease-out);
}
.pcard__alt { opacity: 0; }
.pcard:hover .pcard__img img:first-child { transform: scale(1.05); }
.pcard:hover .pcard__alt { opacity: 1; }
.pcard:hover .pcard__alt ~ img,
.pcard:hover .pcard__img:has(.pcard__alt) img:first-child { opacity: 0; }

.pcard__name { font-family: var(--f-display); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--red); text-shadow: var(--text-glow); }
.pcard__price { font-family: var(--f-num); font-size: 13px; font-weight: 700; }
.pcard__flag {
	position: absolute;
	top: 18px;
	left: 18px;
	padding: 3px 8px;
	background: var(--white);
	color: var(--black);
	font-family: var(--f-display);
	font-size: 10px;
	text-transform: uppercase;
}

.product {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: start;
	gap: 22px;
	padding: 18px;
}
.product:not([hidden]) { animation: view-in 0.35s var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateX(18px); } }

.product__stage {
	aspect-ratio: 1;
	border: 2px solid var(--red-deep);
	background:
		radial-gradient(60% 60% at 50% 45%, rgb(255 69 69 / 0.25), transparent 70%),
		repeating-linear-gradient(0deg, rgb(255 69 69 / 0.05) 0 1px, transparent 1px 3px),
		#140303;
	overflow: hidden;
}
.product__stage img { width: 100%; height: 100%; object-fit: contain; padding: 5%; }
.product__stage img.is-swapping { animation: img-swap 0.35s var(--ease-out); }
@keyframes img-swap { from { opacity: 0; transform: scale(0.97); filter: brightness(2); } }

.product__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.product__thumb {
	width: 68px;
	aspect-ratio: 1;
	border: 2px solid var(--red-deep);
	background: #140303;
	overflow: hidden;
}
.product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product__thumb[aria-pressed='true'] { border-color: var(--red); box-shadow: var(--glow); }

.product__info { display: grid; gap: 12px; }
.product__cat { color: var(--pink); font-family: var(--f-display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.product__name { font-family: var(--f-display); font-size: clamp(26px, 3.4vw, 40px); font-weight: 400; line-height: 1; text-transform: uppercase; text-shadow: var(--text-glow-white); }
.product__price { font-family: var(--f-num); font-size: 22px; font-weight: 700; color: var(--red); text-shadow: var(--text-glow); }
.product__copy { color: var(--blush); font-size: 20px; }
.product__copy p { margin: 0 0 0.6em; }

.product__form { display: grid; gap: 14px; }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.sizes__legend { width: 100%; margin-bottom: 6px; font-family: var(--f-display); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink); }
.sizes__opt { position: relative; }
.sizes__opt input { position: absolute; opacity: 0; inset: 0; }
.sizes__opt span {
	display: grid;
	place-items: center;
	min-width: 52px;
	height: 44px;
	padding: 0 10px;
	border: 2px solid var(--red-deep);
	font-family: var(--f-display);
	font-size: 13px;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sizes__opt:hover span { border-color: var(--red); }
.sizes__opt input:checked + span { background: var(--red); border-color: var(--red); color: var(--black); box-shadow: var(--glow); }
.sizes__opt input:focus-visible + span { outline: 2px dashed var(--blush); outline-offset: 2px; }
.sizes__opt input:disabled + span { opacity: 0.35; text-decoration: line-through; }
.sizes.is-missing .sizes__opt span { animation: shake 0.4s; border-color: var(--white); }

@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.product__buy { display: flex; gap: 10px; flex-wrap: wrap; }
.product__buy .btn { flex: 1; min-width: 180px; min-height: 52px; font-size: 16px; }
.qty { display: inline-flex; align-items: stretch; border: 2px solid var(--red-deep); }
.qty input {
	width: 46px;
	border: 0;
	background: #000;
	text-align: center;
	font-family: var(--f-num);
	font-size: 15px;
	-moz-appearance: textfield;
}
.qty input::-webkit-inner-spin-button,
.qty input::-webkit-outer-spin-button { -webkit-appearance: none; }
.qty__btn { width: 38px; display: grid; place-items: center; color: var(--white); }
.qty__btn:hover { background: rgb(255 69 69 / 0.25); }
.qty__btn .pd-glyph { width: 14px; height: 14px; }
.product__status { min-height: 1.2em; color: var(--blush); font-size: 19px; }

/* Cart app */
.cart { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cart__list { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 8px 0; list-style: none; }
.cart__empty { display: grid; place-content: center; justify-items: center; gap: 16px; flex: 1; padding: 30px; text-align: center; color: var(--pink); }
.cart__empty .pd-icon { width: 72px; opacity: 0.8; }
.cart-line {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1.5px solid var(--red-deep);
}
.cart-line__img { width: 64px; aspect-ratio: 1; background: #140303; border: 1.5px solid var(--red-deep); object-fit: contain; }
.cart-line__name { font-family: var(--f-display); font-size: 13px; text-transform: uppercase; }
.cart-line__meta { color: var(--pink); font-size: 18px; }
.cart-line__side { display: grid; justify-items: end; gap: 6px; }
.cart-line__price { font-family: var(--f-num); font-size: 13px; font-weight: 700; }
.cart-line__remove { color: var(--pink); font-size: 17px; text-decoration: underline; }
.cart-line__remove:hover { color: var(--white); }
.cart-line .qty { transform: scale(0.85); transform-origin: right center; }
.cart__foot { display: grid; gap: 12px; padding: 14px; border-top: 2px solid var(--red); background: #050000; }
.cart__total { display: flex; justify-content: space-between; font-family: var(--f-display); font-size: 15px; text-transform: uppercase; }
.cart__total b { font-family: var(--f-num); color: var(--red); text-shadow: var(--text-glow); }
.cart__note { color: var(--pink); font-size: 17px; }
.cart.is-busy { opacity: 0.6; pointer-events: none; }

/* --------------------------------------------------------------------------
   ARCHIVE (explorer)
   -------------------------------------------------------------------------- */

.explorer { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.explorer__body { display: grid; grid-template-columns: 220px 1fr; flex: 1; min-height: 0; }

.explorer__tree {
	display: grid;
	align-content: start;
	gap: 2px;
	padding: 10px 8px;
	border-right: 1.5px solid var(--red-deep);
	background: #040000;
	overflow-y: auto;
}

.folder-link {
	display: grid;
	grid-template-columns: 30px 1fr auto;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 4px 8px;
	color: var(--white);
	font-family: var(--f-display);
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}
.folder-link__icon { width: 30px; }
.folder-link__count { font-family: var(--f-sys); font-size: 18px; color: var(--pink); letter-spacing: 0; }
.folder-link:hover { background: rgb(255 69 69 / 0.12); color: var(--white); }
.folder-link[aria-current='true'] { background: var(--red); color: var(--black); }
.folder-link[aria-current='true'] .folder-link__count { color: var(--black); }

.explorer__main { position: relative; min-height: 0; overflow-y: auto; padding: 14px; }
.explorer__desc { margin-bottom: 12px; color: var(--blush); font-size: 20px; }
.explorer__desc[hidden] { display: none; }

.explorer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.explorer__grid li[hidden] { display: none; }
.explorer__grid li { animation: tile-in 0.4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes tile-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }

.tile { display: grid; gap: 6px; color: var(--white); text-decoration: none; }
.tile__img {
	position: relative;
	aspect-ratio: 1;
	border: 2px solid var(--red-deep);
	background: #140303;
	overflow: hidden;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.tile__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) contrast(1.05); transition: transform 0.5s var(--ease-out), filter 0.3s; }
.tile:hover .tile__img { border-color: var(--red); box-shadow: var(--glow); }
.tile:hover .tile__img img { transform: scale(1.06); filter: none; }
.tile__badge {
	position: absolute;
	top: 6px;
	right: 6px;
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	background: var(--red);
	color: var(--black);
	font-family: var(--f-num);
	font-size: 11px;
	font-weight: 800;
}
.tile__badge .pd-glyph { width: 12px; height: 12px; }
.tile__title { font-family: var(--f-display); font-size: 11px; line-height: 1.25; letter-spacing: 0.03em; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile__date { color: var(--pink); font-size: 17px; line-height: 1; }

.tapes[hidden] { display: none; }
.tapes__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tape__btn {
	display: grid;
	grid-template-columns: 54px 1fr auto auto;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 10px 14px;
	border: 2px solid var(--red-deep);
	background: #0a0101;
	color: var(--white);
	text-align: left;
	transition: border-color 0.15s, background 0.15s;
}
.tape__btn:hover { border-color: var(--red); background: rgb(255 69 69 / 0.08); }
.tape__icon { width: 50px; }
.tape__title { font-family: var(--f-display); font-size: 14px; text-transform: uppercase; }
.tape__meta,
.tape__dur { color: var(--pink); font-size: 18px; }
.tape.is-current .tape__btn { border-color: var(--red); box-shadow: var(--glow); }
.tape.is-playing .tape__icon { animation: tape-wobble 0.6s ease-in-out infinite alternate; }
@keyframes tape-wobble { to { transform: rotate(-4deg) scale(1.05); } }

.post-full { display: grid; gap: 14px; margin-top: 24px; padding-top: 18px; border-top: 2px solid var(--red-deep); }
.js .post-full { display: none; }
.post-full__title { font-family: var(--f-display); font-size: 28px; font-weight: 400; text-transform: uppercase; }
.post-full__date { color: var(--pink); }
.post-full__media { display: grid; gap: 10px; }
.post-full__body { color: var(--blush); white-space: pre-line; }

/* --------------------------------------------------------------------------
   VIEWER
   -------------------------------------------------------------------------- */

.viewer { display: grid; grid-template-rows: 1fr auto; flex: 1; min-height: 0; background: #000; }
.viewer__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 0;
	overflow: hidden;
	background:
		radial-gradient(70% 70% at 50% 50%, rgb(255 69 69 / 0.1), transparent 70%),
		#000;
}
.viewer__media { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; animation: img-swap 0.35s var(--ease-out); }
.viewer__nav {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 48px;
	height: 64px;
	transform: translateY(-50%);
	border: 2px solid var(--red);
	background: rgb(0 0 0 / 0.7);
	color: var(--white);
	transition: background 0.12s;
}
.viewer__nav:hover { background: var(--red); color: var(--black); }
.viewer__nav .pd-glyph { width: 22px; height: 22px; }
.viewer__nav--prev { left: 10px; }
.viewer__nav--next { right: 10px; }
.viewer__count { position: absolute; top: 10px; left: 10px; padding: 2px 8px; background: rgb(0 0 0 / 0.75); border: 1px solid var(--red-deep); font-family: var(--f-num); font-size: 12px; }
.viewer__info {
	display: grid;
	gap: 6px;
	max-height: 34%;
	padding: 12px 16px;
	border-top: 2px solid var(--red);
	background: #050000;
	overflow-y: auto;
}
.viewer__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.viewer__title { font-family: var(--f-display); font-size: 16px; font-weight: 400; text-transform: uppercase; }
.viewer__date { color: var(--pink); font-size: 18px; }
.viewer__body { color: var(--blush); font-size: 19px; }
.viewer__body p { margin: 0 0 0.5em; }
.viewer__links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 18px; }
.viewer__credit { color: var(--pink); }

/* --------------------------------------------------------------------------
   MSG.EXE (messenger)
   -------------------------------------------------------------------------- */

.msn { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #050000; }
.msn__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border-bottom: 1.5px solid var(--red-deep);
	background: linear-gradient(90deg, rgb(255 69 69 / 0.18), transparent 70%);
}
.msn__avatar { width: 56px; height: 56px; border: 2px solid var(--red); box-shadow: var(--glow); background: #000; }
.msn__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.msn__name { display: inline; font-family: var(--f-display); font-size: 18px; font-weight: 400; text-transform: uppercase; }
.msn__addr { font-family: var(--f-sys); font-size: 18px; text-transform: none; color: var(--pink); text-decoration: none; }
.msn__status { display: flex; align-items: center; gap: 8px; color: var(--blush); font-size: 19px; }
.msn__status i { width: 10px; height: 10px; background: #42ff7a; box-shadow: 0 0 8px #42ff7a; animation: blink 2s steps(1) infinite; }

.msn__convo { position: relative; flex: 1; min-height: 180px; overflow: hidden; border-bottom: 1.5px solid var(--red-deep); background: #000; }
.msn__gifs { position: absolute; inset: 0; pointer-events: none; opacity: 0.85; }
.gif { position: absolute; image-rendering: pixelated; }
.gif--devil { right: 4%; bottom: 4%; width: 70px; }
.gif--car { right: 18%; top: 8%; width: 120px; opacity: 0.8; }
.gif--ufo { left: 46%; top: 3%; width: 46px; animation: ufo 9s ease-in-out infinite; }
.gif--star { right: 4%; top: 46%; width: 30px; }
.gif--hand { left: 3%; bottom: 3%; width: 64px; opacity: 0.75; }
.gif--sparkles { left: 30%; bottom: 10%; width: 40px; opacity: 0.6; }
@keyframes ufo { 50% { transform: translate(-120px, 20px); } }

.msn__log {
	position: relative;
	display: grid;
	align-content: start;
	gap: 10px;
	height: 100%;
	padding: 14px;
	overflow-y: auto;
}
.bubble {
	max-width: 85%;
	padding: 8px 12px;
	border: 1.5px solid var(--red);
	background: rgb(20 0 0 / 0.88);
	font-size: 20px;
	line-height: 1.2;
	animation: bubble-in 0.35s var(--ease-snap) both;
	backdrop-filter: blur(2px);
}
.bubble__who { display: block; margin-bottom: 2px; color: var(--red); font-family: var(--f-display); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.bubble--me { justify-self: end; border-color: var(--blush); background: rgb(255 69 69 / 0.9); color: var(--black); }
.bubble--me .bubble__who { color: var(--black); }
.bubble--sys { justify-self: center; border-style: dashed; color: var(--pink); font-size: 18px; }
.bubble--typing { display: inline-flex; gap: 4px; align-items: center; }
.bubble--typing i { width: 7px; height: 7px; background: var(--red); animation: typing 1s infinite; }
.bubble--typing i:nth-child(2) { animation-delay: 0.15s; }
.bubble--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 50% { opacity: 0.2; transform: translateY(-3px); } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }

.msn__form { display: grid; gap: 10px; padding: 12px 14px 14px; }
.msn__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.msn__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.msn__actions .btn--hot { margin-left: auto; min-width: 120px; }
.msn__error { min-height: 1em; color: var(--white); font-size: 18px; }
.msn__error:empty { display: none; }

/* --------------------------------------------------------------------------
   README.TXT (notepad)
   -------------------------------------------------------------------------- */

.notepad { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.notepad__menu { display: flex; gap: 2px; padding: 4px 6px; border-bottom: 1.5px solid var(--red-deep); background: #050000; font-size: 19px; }
.notepad__menu span { padding: 0 8px; color: var(--pink); }
.notepad__page { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 24px; background: #000; font-size: 22px; line-height: 1.3; color: var(--blush); }
.notepad__title { margin-bottom: 14px; font-family: var(--f-display); font-size: 22px; font-weight: 400; color: var(--white); text-shadow: var(--text-glow); }
.notepad__body p { margin: 0 0 0.9em; }
.notepad__body a { color: var(--red); }
.notepad__members { display: grid; gap: 4px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1.5px dashed var(--red-deep); list-style: none; }
.notepad__members li { display: flex; gap: 10px; flex-wrap: wrap; }
.notepad__members a,
.notepad__members span:first-child { font-family: var(--f-display); font-size: 15px; text-transform: uppercase; color: var(--white); }
.notepad__role { color: var(--pink); }
.notepad__caret { color: var(--red); animation: blink 1s steps(1) infinite; }

/* --------------------------------------------------------------------------
   SNAKE.EXE
   -------------------------------------------------------------------------- */

.snake { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #000; }
.snake__hud { display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1.5px solid var(--red-deep); font-family: var(--f-num); font-size: 13px; letter-spacing: 0.1em; color: var(--pink); }
.snake__hud b { color: var(--red); text-shadow: var(--text-glow); }
.snake__stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 12px; }
.snake__canvas { width: 100%; max-width: 440px; aspect-ratio: 1; border: 2px solid var(--red); box-shadow: var(--glow); image-rendering: pixelated; touch-action: none; }
.snake__overlay {
	position: absolute;
	inset: 12px;
	display: grid;
	place-content: center;
	gap: 14px;
	text-align: center;
	background: rgb(0 0 0 / 0.75);
}
.snake__overlay[hidden] { display: none; }
.snake__big { font-family: var(--f-display); font-size: 30px; text-transform: uppercase; text-shadow: var(--text-glow-white); }
.snake__hint { color: var(--pink); }
.snake__pad { display: none; grid-template-columns: repeat(3, 56px); justify-content: center; gap: 6px; padding: 0 0 14px; }
.snake__pad button { height: 52px; border: 2px solid var(--red); color: var(--white); display: grid; place-items: center; }
.snake__pad button:active { background: var(--red); color: var(--black); }
.snake__pad .pd-glyph { width: 22px; height: 22px; }
.snake__pad [data-dir='up'] { grid-column: 2; }
.snake__pad [data-dir='left'] { grid-column: 1; grid-row: 2; }
.snake__pad [data-dir='down'] { grid-column: 2; grid-row: 2; }
.snake__pad [data-dir='right'] { grid-column: 3; grid-row: 2; }
@media (pointer: coarse) { .snake__pad { display: grid; } }

/* --------------------------------------------------------------------------
   TERMINAL.EXE
   -------------------------------------------------------------------------- */

.term {
	flex: 1;
	min-height: 0;
	padding: 12px 14px;
	overflow-y: auto;
	background: #000;
	color: #ff8a8a;
	font-family: var(--f-sys);
	font-size: 21px;
	line-height: 1.2;
	text-shadow: 0 0 6px rgb(255 69 69 / calc(0.6 * var(--glow-k)));
}
.term__out { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; }
.term__out .t-hi { color: var(--white); }
.term__out .t-red { color: var(--red); }
.term__out .t-dim { color: #9a5555; }
.term__out a { color: var(--white); }
.term__line { display: flex; gap: 0.5ch; }
.term__prompt { color: var(--white); white-space: nowrap; }
.term__input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--white);
	caret-color: var(--red);
	font: inherit;
	text-shadow: inherit;
}
.term.is-matrix { position: relative; }

/* --------------------------------------------------------------------------
   CMOS SETUP (BIOS)
   -------------------------------------------------------------------------- */

.bios {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	background: #0a0000;
	color: #e9e9e9;
	font-family: var(--f-sys);
	font-size: 22px;
}
.bios__head { padding: 8px; text-align: center; background: var(--red); color: var(--black); font-family: var(--f-display); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.bios__body { display: grid; grid-template-columns: 1.4fr 1fr; flex: 1; min-height: 0; margin: 10px; border: 3px double var(--red); }
.bios__list { margin: 0; padding: 8px 0; list-style: none; overflow-y: auto; border-right: 3px double var(--red); }
.bios__opt {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	width: 100%;
	padding: 2px 14px;
	color: inherit;
	text-align: left;
}
.bios__opt-val { color: var(--pink); }
.bios__opt:hover,
.bios__opt:focus-visible,
.bios__opt.is-focus { background: var(--red); color: var(--black); outline: none; }
.bios__opt:hover .bios__opt-val,
.bios__opt:focus-visible .bios__opt-val,
.bios__opt.is-focus .bios__opt-val { color: var(--black); }
.bios__opt--action { color: var(--white); }
.bios__help { padding: 12px 14px; color: var(--blush); }
.bios__help-title { color: var(--red); margin-bottom: 6px; }
.bios__keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; padding: 6px 10px 10px; color: #b9b9b9; font-size: 19px; }
.bios__keys b { color: var(--white); font-weight: 400; }

/* --------------------------------------------------------------------------
   Generic page window + 404
   -------------------------------------------------------------------------- */

.page-win { flex: 1; min-height: 0; overflow-y: auto; padding: 22px clamp(16px, 3vw, 36px) 40px; }
.page-win__title { margin-bottom: 18px; font-family: var(--f-display); font-size: clamp(26px, 3vw, 40px); font-weight: 400; text-transform: uppercase; text-shadow: var(--text-glow-white); }

.bsod {
	display: grid;
	gap: 16px;
	min-height: 100%;
	align-content: center;
	padding: 30px clamp(30px, 12vw, 240px);
	background: var(--red);
	color: var(--white);
	font-size: 24px;
}
.page-win:has(.bsod) { padding: 0; display: flex; }
.bsod { flex: 1; }
.bsod__title { justify-self: center; padding: 0 10px; background: var(--white); color: var(--red); font-family: var(--f-display); font-size: 18px; font-weight: 400; }
.bsod__list { margin: 0; padding-left: 1.2em; }
.bsod a { color: var(--white); }

/* --------------------------------------------------------------------------
   Phone adjustments for apps inside sheets
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
	.music__deck { padding: 16px; }
	.music__title { font-size: 28px; }
	.music__vol { display: none; }
	.music__transport .tbtn:first-child { margin-left: 0; }
	.music__transport .range--seek { order: 6; flex: 1 1 calc(100% - 120px); }
	.music__transport [data-time] { order: 5; text-align: left; }
	.music__transport [data-dur] { order: 7; }
	.track__btn { grid-template-columns: 36px 1fr auto; gap: 10px; padding: 12px; }
	.track__disc { width: 34px; }
	.track__bpm,
	.track__tag { display: none; }
	.track__title { font-size: 14px; white-space: normal; }
	.tracklist { overflow: visible; }

	.shop__grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
	.pcard { padding: 8px; }
	.pcard__name { font-size: 11px; grid-column: 1 / -1; }
	.product { grid-template-columns: 1fr; padding: 12px; gap: 16px; }
	.shop__grid-wrap,
	.product { overflow: visible; }

	.explorer__body { grid-template-columns: 1fr; }
	.explorer__tree {
		display: flex;
		gap: 6px;
		padding: 8px;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1.5px solid var(--red-deep);
	}
	.folder-link { flex: none; grid-template-columns: 26px auto auto; border: 1.5px solid var(--red-deep); }
	.explorer__main { overflow: visible; }
	.explorer__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.tape__btn { grid-template-columns: 44px 1fr auto; }
	.tape__meta { display: none; }

	.msn__fields { grid-template-columns: 1fr; }
	.msn__convo { min-height: 46vh; }
	.gif--car { width: 90px; }

	.bios__body { grid-template-columns: 1fr; }
	.bios__list { border-right: 0; border-bottom: 3px double var(--red); }
	.bios__keys { font-size: 17px; }

	.viewer { grid-template-rows: auto auto; }
	.viewer__stage { min-height: 50vh; }
	.viewer__info { max-height: none; }
}

/* --------------------------------------------------------------------------
   Dialogs
   -------------------------------------------------------------------------- */

.dialog { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 16px 18px; padding: 22px; flex: 1; }
.dialog__icon { width: 64px; }
.dialog__text { font-size: 22px; color: var(--blush); }
.dialog__btns { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: flex-end; }

/* --------------------------------------------------------------------------
   SHOWS.EXE: ticket stubs
   -------------------------------------------------------------------------- */

.shows { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.shows__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 16px 24px; }
.shows__group + .shows__group { margin-top: 10px; }
.shows__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0 12px;
	font-family: var(--f-display);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--white);
	text-shadow: var(--text-glow);
}
.shows__head::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--red), transparent); }

.shows__empty {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	border: 2px dashed var(--red-deep);
	background: rgb(255 69 69 / 0.05);
	color: var(--blush);
	font-size: 21px;
}
.shows__empty-icon { width: 56px; }

.gigs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.gig {
	--stub: 104px;
	position: relative;
	display: grid;
	grid-template-columns: var(--stub) 1fr auto;
	align-items: stretch;
	min-height: 132px;
	border: 2px solid var(--red-deep);
	background:
		repeating-linear-gradient(0deg, rgb(255 69 69 / 0.035) 0 1px, transparent 1px 3px),
		#0a0101;
	transition: border-color 0.18s, box-shadow 0.18s, transform 0.25s var(--ease-out);
	animation: tile-in 0.45s var(--ease-out) both;
}
.gig:hover { border-color: var(--red); box-shadow: var(--glow); }
.gig--upcoming { border-color: var(--red); box-shadow: var(--glow); }

/* The tear-off stub, perforated, with notches cut top and bottom. */
.gig__stub {
	position: relative;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 2px;
	padding: 10px 6px;
	background: linear-gradient(160deg, var(--red) 0%, #a32222 55%, #3e0707 100%);
	color: var(--white);
	text-align: center;
	border-right: 3px dashed #000;
	-webkit-mask: radial-gradient(circle 9px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat,
		radial-gradient(circle 9px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
	mask: radial-gradient(circle 9px at 100% 0, transparent 98%, #000) top / 100% 51% no-repeat,
		radial-gradient(circle 9px at 100% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.gigs--past .gig__stub { background: linear-gradient(160deg, #6a1717 0%, #3a0a0a 60%, #180202 100%); color: var(--blush); }
.gig__day { font-family: var(--f-display); font-size: 11px; letter-spacing: 0.12em; }
.gig__date { font-family: var(--f-num); font-size: 40px; font-weight: 800; line-height: 1; text-shadow: 0 2px 0 rgb(0 0 0 / 0.35); }
.gig__month { font-family: var(--f-display); font-size: 14px; letter-spacing: 0.08em; }
.gig__year { font-family: var(--f-num); font-size: 12px; opacity: 0.85; }

.gig__main { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 12px 16px; }
.gig__title { font-family: var(--f-display); font-size: 17px; font-weight: 400; line-height: 1.15; text-transform: uppercase; color: var(--white); }
.gig__where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--pink); font-size: 20px; }
.gig__chip {
	padding: 2px 6px 1px;
	border: 1px solid var(--red);
	color: var(--red);
	font-family: var(--f-display);
	font-size: 9px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.3;
}
.gig__chip--hot { background: var(--red); color: var(--black); }
.gig__chip:empty { display: none; }
.gig__lineup { color: var(--blush); font-size: 19px; line-height: 1.15; }
.gig__time { color: var(--white); font-size: 19px; }
.gig__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 6px; }
.gig__actions .btn { min-height: 38px; padding: 4px 14px; font-size: 12px; }
.gig__actions .btn__icon { width: 22px; }
.gig__link { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; }
.gig__link .pd-glyph { width: 14px; height: 14px; }

.gig__poster {
	align-self: center;
	width: 112px;
	aspect-ratio: 1;
	margin: 10px 12px 10px 0;
	border: 2px solid var(--red-deep);
	overflow: hidden;
	background: #140303;
}
.gig__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease-out); }
.gig__poster:hover { border-color: var(--red); box-shadow: var(--glow); }
.gig__poster:hover img { transform: scale(1.08); }

@media (max-width: 899px) {
	.shows__scroll { overflow: visible; padding: 4px 12px 24px; }
	.shows__empty { grid-template-columns: 44px 1fr; }
	.shows__empty .btn { grid-column: 1 / -1; }
	.shows__empty-icon { width: 44px; }
	.gig { --stub: 78px; grid-template-columns: var(--stub) 1fr; }
	.gig__date { font-size: 30px; }
	.gig__poster { grid-column: 1 / -1; width: auto; aspect-ratio: 16 / 9; margin: 0; border-width: 2px 0 0; }
	.gig__title { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   Buying music (MUSIC.EXE)
   -------------------------------------------------------------------------- */

.track__row { display: flex; align-items: stretch; }
.track__row .track__btn { flex: 1; min-width: 0; }
.track__buy-form { display: flex; }
.track__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 76px;
	margin: 10px 12px 10px 0;
	padding: 0 10px;
	border: 1.5px solid var(--red);
	color: var(--white);
	font-family: var(--f-num);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.12s, color 0.12s, box-shadow 0.15s;
}
.track__buy:hover { background: var(--red); color: var(--black); box-shadow: var(--glow); }
.track__buy-icon { width: 20px; }
.track__buy.is-owned { border-color: #42ff7a; color: #b8ffcb; font-family: var(--f-display); font-weight: 400; font-size: 10px; }
.track__buy.is-owned:hover { background: #42ff7a; color: #000; }
.track__buy.is-in-cart { background: var(--red-ink); border-style: dashed; font-family: var(--f-display); font-weight: 400; font-size: 9px; }
.track__buy[disabled] { opacity: 0.5; }

.music__own {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1.5px solid var(--red-deep);
	background: linear-gradient(90deg, rgb(255 69 69 / 0.16), transparent 70%), #060000;
}
.music__own-icon { width: 34px; }
.music__own-text { color: var(--blush); font-size: 20px; line-height: 1.1; }
.music__own form { display: flex; }
.music__own .btn { min-height: 42px; padding: 4px 14px; font-size: 13px; }
.music__own-price { font-family: var(--f-num); font-size: 13px; }
.music__own.is-owned { background: linear-gradient(90deg, rgb(66 255 122 / 0.12), transparent 70%), #000; }

/* --------------------------------------------------------------------------
   ACCOUNT
   -------------------------------------------------------------------------- */

.acct { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.acct__head {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-bottom: 1.5px solid var(--red-deep);
	background: linear-gradient(90deg, rgb(255 69 69 / 0.18), transparent 70%);
}
.acct__avatar { width: 56px; }
.acct__title { font-family: var(--f-display); font-size: 20px; font-weight: 400; text-transform: uppercase; text-shadow: var(--text-glow-white); }
.acct__sub { color: var(--pink); font-size: 19px; }
.acct__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: grid; align-content: start; gap: 18px; }
.acct__h { margin-bottom: 10px; font-family: var(--f-display); font-size: 14px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.acct__forms { display: grid; gap: 16px; }
.acct__form { display: grid; gap: 12px; padding: 16px; border: 2px solid var(--red-deep); background: #070101; }
.acct__form .btn { justify-self: start; min-width: 160px; }
.acct__small { color: var(--pink); font-size: 18px; }
.acct__small p { margin: 0; }
.acct__empty { display: grid; justify-items: start; gap: 12px; color: var(--blush); }
.acct__links { display: grid; gap: 2px; border-top: 1.5px solid var(--red-deep); padding-top: 12px; }
.acct__notices:empty { display: none; }
.check { display: flex; align-items: center; gap: 10px; color: var(--blush); font-size: 19px; }
.check input { width: 18px; height: 18px; accent-color: var(--red); }

.dl-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dl {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 0 12px;
	padding: 8px 10px;
	border: 1.5px solid var(--red-deep);
	background: #0a0101;
}
.dl__icon { grid-row: 1 / 3; width: 40px; }
.dl__name { font-family: var(--f-display); font-size: 13px; text-transform: uppercase; }
.dl__from { grid-column: 2; color: var(--pink); font-size: 17px; line-height: 1; }
.dl__btn { grid-column: 3; grid-row: 1 / 3; }

@media (max-width: 899px) {
	.music__own { grid-template-columns: 28px 1fr; }
	.music__own form,
	.music__own > .btn { grid-column: 1 / -1; }
	.music__own .btn { width: 100%; }
	.track__buy { min-width: 58px; margin-right: 8px; }
	.dl { grid-template-columns: 34px 1fr; }
	.dl__btn { grid-column: 1 / -1; grid-row: auto; margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   MUSIC.EXE tabs and the TV
   -------------------------------------------------------------------------- */

.music__tabs { display: flex; border-bottom: 1.5px solid var(--red-deep); background: #040000; }
.music__tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-right: 1.5px solid var(--red-deep);
	color: var(--pink);
	font-family: var(--f-display);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.music__tab-icon { width: 24px; }
.music__tab[aria-selected='true'] { background: var(--red); color: var(--black); }
.music__tab[aria-selected='true'] .music__tab-icon { filter: brightness(0.2); }
.music__panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.music__panel[hidden] { display: none; }
.music__panel--videos { overflow-y: auto; padding: 16px; gap: 18px; }

.track__watch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 10px 8px 10px 0;
	padding: 0 10px;
	border: 1.5px solid var(--red-deep);
	color: var(--blush);
	font-family: var(--f-display);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}
.track__watch:hover { border-color: var(--red); color: var(--white); background: rgb(255 69 69 / 0.15); }

.tv { margin: 0; display: grid; gap: 10px; }
.tv__set {
	position: relative;
	padding: 18px 64px 18px 18px;
	border: 2px solid var(--red-deep);
	border-radius: 2px;
	background:
		linear-gradient(180deg, #2a0909, #120303 70%);
	box-shadow: inset 0 0 0 4px #000, var(--glow);
}
.tv__screen {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 14px / 10px;
	background: #000;
	box-shadow: inset 0 0 40px rgb(0 0 0 / 0.9), 0 0 0 3px #000;
}
.tv__screen::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(0deg, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 3px),
		radial-gradient(120% 90% at 50% 50%, transparent 60%, rgb(0 0 0 / 0.55));
}
.tv__play, .tv__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv__play img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6) contrast(1.1); transition: filter 0.3s, transform 0.5s var(--ease-out); }
.tv__play:hover img { filter: none; transform: scale(1.03); }
.tv__btn {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	transform: translate(-50%, -50%);
	background: var(--red);
	color: var(--black);
	box-shadow: var(--glow-strong);
}
.tv__btn .pd-glyph { width: 30px; height: 30px; margin-left: 4px; }
.tv__knobs { position: absolute; right: 18px; top: 22px; display: grid; gap: 14px; }
.tv__knobs i { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9a9a, var(--red-deep)); box-shadow: 0 0 0 2px #000; }
.tv__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.tv__title { font-family: var(--f-display); font-size: 15px; text-transform: uppercase; color: var(--white); }
.tv__note { color: var(--pink); font-size: 19px; }
.tv__yt { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 18px; }
.tv__yt .pd-glyph { width: 14px; height: 14px; }

@media (max-width: 899px) {
	.tv__set { padding: 10px 40px 10px 10px; }
	.tv__knobs { right: 9px; top: 14px; gap: 10px; }
	.tv__knobs i { width: 18px; height: 18px; }
	.track__watch span { display: none; }
	.music__panel--videos { overflow: visible; }
}

/* --------------------------------------------------------------------------
   Product page (v2): gallery, buy box, trust, accordions, more to buy.
   Overrides the first-pass .product rules above.
   -------------------------------------------------------------------------- */

.product { display: block; padding: 0; }
.product__top {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: start;
	gap: 26px;
	padding: 20px;
}

.product__gallery { position: sticky; top: 0; display: grid; gap: 10px; }
.product__stage {
	position: relative;
	aspect-ratio: 4 / 5;
	border: 2px solid var(--red-deep);
	overflow: hidden;
	touch-action: pan-y;
}
.product__stage img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; }
.product__stage img.is-flat { object-fit: cover; }
.product__stage img.is-photo,
.product__stage img.is-mockup { object-fit: cover; }
.product__tag {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 2px 8px;
	background: rgb(0 0 0 / 0.75);
	border: 1px solid var(--red-deep);
	color: var(--blush);
	font-size: 16px;
}
.product__tag[hidden] { display: none; }
.product__nav {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 40px;
	height: 52px;
	transform: translateY(-50%);
	border: 2px solid var(--red);
	background: rgb(0 0 0 / 0.65);
	color: var(--white);
	opacity: 0;
	transition: opacity 0.2s, background 0.15s;
}
.product__stage:hover .product__nav,
.product__nav:focus-visible { opacity: 1; }
.product__nav:hover { background: var(--red); color: var(--black); }
.product__nav .pd-glyph { width: 20px; height: 20px; }
.product__nav--prev { left: 8px; }
.product__nav--next { right: 8px; }
.product__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin: 0; }
.product__thumb { width: auto; aspect-ratio: 1; }
.product__thumb.is-flat img { object-fit: cover; }

.product__info { display: grid; gap: 14px; }
.product__crumbs { color: var(--pink); font-family: var(--f-display); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.product__copy ul { margin: 0; padding-left: 1.1em; }

.sizes__legend { display: flex; justify-content: space-between; align-items: baseline; }
.sizes__guide { color: var(--blush); font-family: var(--f-sys); font-size: 18px; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; }
.sizes__guide:hover { color: var(--white); }

.product__add { flex: 1; }
.product__delivery { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; color: var(--white); font-size: 19px; line-height: 1.15; }
.product__delivery-icon { width: 30px; }

.trust { display: grid; gap: 10px; margin: 0; padding: 14px; list-style: none; border: 1.5px solid var(--red-deep); background: #070101; }
.trust__item { display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 12px; color: var(--blush); font-size: 18px; line-height: 1.15; }
.trust__item b { display: block; margin-bottom: 2px; color: var(--white); font-family: var(--f-display); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.trust__icon { width: 30px; }
.trust--strip { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 4px 16px 18px; }

.accs { display: grid; border-top: 1.5px solid var(--red-deep); }
.acc { border-bottom: 1.5px solid var(--red-deep); }
.acc__sum {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 48px;
	list-style: none;
	font-family: var(--f-display);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--white);
}
.acc__sum::-webkit-details-marker { display: none; }
.acc__sum .pd-glyph { width: 16px; height: 16px; transition: transform 0.2s; }
.acc[open] .acc__sum .pd-glyph { transform: rotate(180deg); }
.acc__body { padding: 0 0 14px; color: var(--blush); font-size: 19px; }
.acc__body p { margin: 0 0 0.6em; }
.acc__body ul { margin: 0 0 0.6em; padding-left: 1.1em; }
.size-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 19px; }
.size-table th, .size-table td { padding: 6px 8px; border-bottom: 1px solid var(--red-deep); text-align: left; }
.size-table thead th { color: var(--pink); font-family: var(--f-display); font-size: 10px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.size-table tbody th { color: var(--white); font-family: var(--f-display); font-size: 12px; font-weight: 400; }

.product__more { display: grid; gap: 14px; padding: 4px 20px 24px; border-top: 1.5px solid var(--red-deep); }
.product__more-title { margin: 6px 0 0; font-family: var(--f-display); font-size: 13px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.listen { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 12px; border: 1.5px dashed var(--red-deep); }
.listen__btn { display: grid; place-items: center; width: 48px; height: 48px; background: var(--red); color: var(--black); }
.listen__btn .pd-glyph { width: 20px; height: 20px; }
.listen__text { display: grid; color: var(--pink); font-size: 18px; line-height: 1.1; }
.listen__text b { color: var(--white); font-family: var(--f-display); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.listen.is-playing .listen__btn { animation: listen-pulse 1.2s ease-in-out infinite; }
@keyframes listen-pulse { 50% { box-shadow: var(--glow-strong); } }

.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.related__card { display: grid; gap: 4px; color: var(--white); text-decoration: none; }
.related__card img { width: 100%; aspect-ratio: 1; border: 1.5px solid var(--red-deep); background: #140303; object-fit: cover; transition: border-color 0.15s; }
.related__card img.is-flat { object-fit: cover; }
.related__card:hover img { border-color: var(--red); }
.related__name { font-family: var(--f-display); font-size: 10px; text-transform: uppercase; }
.related__price { font-family: var(--f-num); font-size: 11px; color: var(--pink); }

.sticky-buy { display: none; }

/* Grid cards */
.pcard__img img.is-photo,
.pcard__img img.is-mockup { object-fit: cover; padding: 0; }
.pcard__chip {
	position: absolute;
	left: 8px;
	top: 8px;
	padding: 2px 6px;
	background: rgb(0 0 0 / 0.75);
	border: 1px solid var(--red);
	color: var(--white);
	font-family: var(--f-display);
	font-size: 8px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.shop__banner { display: flex; align-items: center; gap: 10px; margin: 14px 16px 0; padding: 8px 12px; border: 1.5px solid var(--red-deep); background: linear-gradient(90deg, rgb(255 69 69 / 0.15), transparent 70%); color: var(--white); font-size: 19px; }
.shop__banner-icon { width: 28px; }

@media (max-width: 899px) {
	.product__top { grid-template-columns: 1fr; gap: 16px; padding: 0 0 16px; }
	.product__gallery { position: static; gap: 8px; }
	.product__stage { border-width: 0 0 2px; }
	.product__nav { opacity: 1; width: 34px; height: 44px; }
	.product__thumbs { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); padding: 0 12px; }
	.product__info { padding: 0 14px; }
	.product__more { padding: 4px 14px 24px; }
	.related { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.trust--strip { margin: 4px 12px 16px; }

	.sticky-buy {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--tabbar-h, 0px);
		z-index: 66;
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: center;
		gap: 10px;
		padding: 10px 12px;
		border-top: 2px solid var(--red);
		background: rgb(5 0 0 / 0.96);
		transform: translateY(110%);
		transition: transform 0.3s var(--ease-out);
	}
	.sticky-buy.is-shown { transform: none; }
	.sticky-buy__name { font-family: var(--f-display); font-size: 11px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.sticky-buy__price { font-family: var(--f-num); font-size: 13px; font-weight: 700; color: var(--red); }
	.sticky-buy .btn { min-height: 42px; padding: 4px 14px; font-size: 12px; }
}

/* Flat mockups carry their own tinted backdrop, so they fill the frame like a studio shot. */
.pcard__img img { object-fit: cover; padding: 0; }
.cart__free { padding: 12px 14px 0; color: var(--blush); font-size: 19px; }
.cart__free b { color: var(--white); }
.cart__free-track { display: block; height: 6px; margin-top: 6px; background: var(--red-ink); }
.cart__free-track i { display: block; height: 100%; background: var(--red); box-shadow: var(--glow); transition: width 0.4s var(--ease-out); }
.cart__trust { display: flex; align-items: center; gap: 8px; color: var(--pink); font-size: 17px; }
.cart__trust .pd-icon { width: 22px; }

/* Narrow phones: the sheet title already says where you are. */
@media (max-width: 599px) {
	.sheet .appbar__path { display: none; }
	.sheet .appbar { justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   SHOWS v2: image-led cards. A photo from the night sits behind the details
   in a red duotone (full colour on hover); the filmstrip holds the poster and
   the gig photos. Overrides the first-pass .gig rules above.
   -------------------------------------------------------------------------- */

.gig {
	grid-template-columns: var(--stub) minmax(0, 1fr);
	grid-template-areas: 'stub main' 'stub strip';
	min-height: 0;
	overflow: hidden;
}
.gig__stub { grid-area: stub; }
.gig__main {
	grid-area: main;
	position: relative;
	display: grid;
	align-content: center;
	min-height: 200px;
	padding: 0;
	isolation: isolate;
	overflow: hidden;
}
.gig__cover { position: absolute; inset: 0; z-index: -1; }
.gig__cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	filter: grayscale(1) contrast(1.2) brightness(1.05);
	transform: scale(1.01);
	transition: filter 0.6s, transform 1.4s var(--ease-out);
}
/* Red ink over the black and white... */
.gig__cover::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--red);
	mix-blend-mode: multiply;
	opacity: 0.5;
	transition: opacity 0.6s;
}
/* ...and a dark wash on the left so the text always reads. */
.gig__cover::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(90deg, rgb(6 0 0 / 0.96) 0%, rgb(6 0 0 / 0.88) 42%, rgb(6 0 0 / 0.25) 78%, rgb(6 0 0 / 0.1) 100%),
		repeating-linear-gradient(0deg, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 3px);
}
.gig:hover .gig__cover img { filter: grayscale(0.15) contrast(1.05) brightness(0.95); transform: scale(1.05); }
.gig:hover .gig__cover::after { opacity: 0.12; }

.gig__text { position: relative; display: grid; gap: 4px; padding: 18px 20px; }
.gig__title { font-size: 19px; text-shadow: 0 2px 10px rgb(0 0 0 / 0.8); }
.gig__where,
.gig__lineup,
.gig__time { text-shadow: 0 1px 6px rgb(0 0 0 / 0.9); }

.gig__strip {
	grid-area: strip;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 16px 14px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	border-top: 1.5px solid var(--red-deep);
	/* Film sprockets, top and bottom. */
	background:
		repeating-linear-gradient(90deg, #3a1414 0 7px, transparent 7px 16px) left 4px top 5px / 100% 5px no-repeat,
		repeating-linear-gradient(90deg, #3a1414 0 7px, transparent 7px 16px) left 4px bottom 5px / 100% 5px no-repeat,
		#050000;
}
.gig__strip li { flex: none; }
.gig__shot {
	position: relative;
	display: block;
	width: 118px;
	aspect-ratio: 1;
	overflow: hidden;
	border: 1.5px solid var(--red-deep);
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.3s var(--ease-out);
}
.gig__shot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.9) contrast(1.15) brightness(0.85); transition: filter 0.4s, transform 0.6s var(--ease-out); }
.gig__shot::after { content: ''; position: absolute; inset: 0; background: var(--red); mix-blend-mode: multiply; opacity: 0.45; transition: opacity 0.4s; pointer-events: none; }
.gig__shot:hover,
.gig__shot:focus-visible { border-color: var(--red); box-shadow: var(--glow); transform: translateY(-2px); }
.gig__shot:hover img,
.gig__shot:focus-visible img { filter: none; transform: scale(1.08); }
.gig__shot:hover::after,
.gig__shot:focus-visible::after { opacity: 0; }
.gig__shot-tag {
	position: absolute;
	left: 5px;
	bottom: 5px;
	z-index: 1;
	padding: 1px 5px;
	background: rgb(0 0 0 / 0.8);
	color: var(--blush);
	font-family: var(--f-display);
	font-size: 8px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (max-width: 899px) {
	.gig { --stub: 70px; }
	.gig__main { min-height: 240px; align-content: end; }
	.gig__cover::before {
		background:
			linear-gradient(0deg, rgb(6 0 0 / 0.97) 0%, rgb(6 0 0 / 0.85) 45%, rgb(6 0 0 / 0.2) 100%),
			repeating-linear-gradient(0deg, rgb(0 0 0 / 0.18) 0 1px, transparent 1px 3px);
	}
	.gig__text { padding: 14px; }
	.gig__title { font-size: 15px; }
	.gig__strip { padding: 14px 10px; }
	.gig__shot { width: 86px; }
}

/* --------------------------------------------------------------------------
   Viewer v2: the whole photo always shows, and the caption scrolls instead
   of being cut off. Overrides the first-pass viewer rules above.
   -------------------------------------------------------------------------- */

.viewer { display: flex; flex-direction: column; min-height: 0; }
.viewer__stage { position: relative; flex: 1 1 0; min-height: 160px; display: block; }
.viewer__media {
	position: absolute;
	inset: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	max-width: none;
	max-height: none;
	object-fit: contain;
}
.viewer__media.is-zoomable { cursor: zoom-in; }
.viewer__nav,
.viewer__count { z-index: 1; }
.viewer__info { flex: 0 1 auto; max-height: 42%; min-height: 64px; overflow-y: auto; overscroll-behavior: contain; }
.viewer__body { line-height: 1.25; }

/* Archive tiles: show the whole title. */
.tile__title { display: block; -webkit-line-clamp: unset; overflow: visible; }

@media (max-width: 899px) {
	.viewer__stage { flex: none; height: 62vh; min-height: 0; }
	.viewer__info { max-height: none; overflow: visible; }
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

html.has-lightbox body { overflow: hidden; }
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 7900;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: rgb(0 0 0 / 0.94);
	animation: fade-in 0.25s ease both;
}
.lightbox[hidden] { display: none; }
.lightbox.is-closing { animation: lb-out 0.22s ease forwards; }
@keyframes lb-out { to { opacity: 0; } }
.lightbox__top { display: flex; justify-content: space-between; align-items: center; padding: calc(10px + var(--safe-t)) 14px 6px; }
.lightbox__count { font-family: var(--f-num); font-size: 13px; color: var(--pink); }
.lightbox__close {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--red);
	color: var(--white);
	background: rgb(0 0 0 / 0.6);
}
.lightbox__close:hover { background: var(--red); color: var(--black); }
.lightbox__close .pd-glyph { width: 20px; height: 20px; }
.lightbox__stage { position: relative; min-height: 0; touch-action: pan-y; }
.lightbox__media {
	position: absolute;
	inset: 8px clamp(8px, 6vw, 90px);
	width: calc(100% - 2 * clamp(8px, 6vw, 90px));
	height: calc(100% - 16px);
	object-fit: contain;
	box-shadow: 0 0 60px rgb(255 69 69 / calc(0.25 * var(--glow-k)));
}
.lightbox__nav {
	position: fixed;
	top: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 56px;
	height: 72px;
	transform: translateY(-50%);
	border: 2px solid var(--red);
	background: rgb(0 0 0 / 0.65);
	color: var(--white);
}
.lightbox__nav[hidden] { display: none; }
.lightbox__nav:hover { background: var(--red); color: var(--black); }
.lightbox__nav .pd-glyph { width: 24px; height: 24px; }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }
.lightbox__info { display: grid; gap: 4px; max-height: 24vh; overflow-y: auto; padding: 10px clamp(14px, 6vw, 90px) calc(14px + var(--safe-b)); color: var(--blush); font-size: 19px; }
.lightbox__info p { margin: 0; }
.lightbox__title { font-family: var(--f-display); font-size: 15px; text-transform: uppercase; color: var(--white); }
.lightbox__title[hidden],
.lightbox__caption[hidden] { display: none; }
.lightbox__date { color: var(--pink); }

@media (max-width: 899px) {
	.lightbox__nav { width: 42px; height: 56px; }
	.lightbox__nav--prev { left: 6px; }
	.lightbox__nav--next { right: 6px; }
	.lightbox__media { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
}