/* ==========================================================================
   PODUNK PLAYER: the hands-on cassette deck (apps/player.js)
   ========================================================================== */

.player2 { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; background: #030000; }

/* --------------------------------------------------------------------------
   The deck
   -------------------------------------------------------------------------- */

.deck2 {
	margin: 12px;
	padding: 12px 14px 16px;
	border: 2px solid #2a1010;
	border-radius: 3px;
	background:
		repeating-linear-gradient(90deg, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #1f1616, #0d0909 70%);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 12px 30px rgb(0 0 0 / 0.7);
}
.deck2__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.deck2__brand { font-family: var(--f-display); font-size: 16px; color: var(--red); text-shadow: var(--text-glow); }
.deck2__model { color: #a88; font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; }
.deck2__led { width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: #3a0a0a; box-shadow: inset 0 1px 2px #000; transition: background 0.1s, box-shadow 0.1s; }
.deck2.is-playing .deck2__led { background: var(--red); box-shadow: 0 0 8px var(--red); }
.deck2__led.is-peak { background: #ffe0e0; box-shadow: 0 0 12px #fff; }

.deck2__main { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }

/* The cassette door: hinged at the bottom, swings towards you. */
.deck2__door {
	position: relative;
	aspect-ratio: 1.5;
	border: 2px solid #3a1515;
	border-radius: 4px;
	background: radial-gradient(80% 80% at 50% 40%, #1a0707, #050000);
	box-shadow: inset 0 0 24px #000;
	perspective: 700px;
	cursor: var(--cursor-hover);
	transition: border-color 0.2s, box-shadow 0.2s;
}
.deck2__flap {
	position: absolute;
	inset: 6%;
	border: 2px solid #4a1d1d;
	border-radius: 3px;
	background: rgb(0 0 0 / 0.35);
	transform-origin: 50% 100%;
	transform-style: preserve-3d;
	transition: transform 0.26s cubic-bezier(.3, .7, .3, 1.2);
}
.deck2__door.is-open .deck2__flap { transform: rotateX(-32deg) translateY(3%); }
.deck2__bay { position: absolute; inset: 9% 6%; display: grid; place-items: center; }
.deck2__bay .tape { width: 100%; transition: transform 0.16s ease-out; }
.deck2__bay .tape.is-lifting { transform: translateY(-16%) rotate(-2deg); }
.deck2__bay .tape.is-seating { animation: tape-seat 0.3s ease-out; }
@keyframes tape-seat { 0% { transform: translateY(-6%); } 70% { transform: translateY(2%); } 100% { transform: none; } }
.deck2__glass {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(115deg, rgb(255 255 255 / 0.14) 0 14%, transparent 26% 62%, rgb(255 255 255 / 0.05) 70%, transparent 78%),
		rgb(255 69 69 / 0.04);
}
.deck2__slot {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--f-display);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pink);
	text-shadow: var(--text-glow);
	animation: slot-pulse 1.8s ease-in-out infinite;
	pointer-events: none;
}
.deck2__door.is-loaded .deck2__slot { display: none; }
@keyframes slot-pulse { 50% { opacity: 0.35; } }
.deck2__door.is-target { border-color: var(--red); border-style: dashed; }
.deck2__door.is-hover { box-shadow: inset 0 0 24px #000, var(--glow-strong); border-style: solid; }

/* Side panel: VU meters, counter, time, knob. */
.deck2__vus { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vu {
	position: relative;
	aspect-ratio: 1.35;
	overflow: hidden;
	border: 2px solid #120606;
	border-radius: 3px;
	background: radial-gradient(120% 90% at 50% 100%, #fff4e0, #e6d3b8 80%);
	box-shadow: inset 0 0 14px rgb(255 150 60 / 0.35), inset 0 -8px 12px rgb(0 0 0 / 0.15);
}
.vu__face { position: absolute; inset: 0; width: 100%; height: 100%; }
.vu__arc { fill: none; stroke: #1a0a0a; stroke-width: 1; }
.vu__zone { fill: none; stroke: var(--red); stroke-width: 4; }
.vu__tick { stroke: #1a0a0a; }
.vu__tick.is-red { stroke: #b31d1d; }
.vu__mark { fill: #7e2323; font-family: var(--f-display); font-size: 10px; text-anchor: middle; }
.vu__needle {
	position: absolute;
	left: calc(50% - 1px);
	bottom: 8%;
	width: 2px;
	height: 72%;
	background: linear-gradient(#1a0505 80%, #7e2323);
	transform-origin: 50% 100%;
	transform: rotate(-48deg);
	will-change: transform;
}
.vu__pivot { position: absolute; left: 50%; bottom: 0; width: 12%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #1a0505; }
.vu__label { position: absolute; left: 8%; bottom: 6%; font-family: var(--f-num); font-size: 10px; font-weight: 800; color: #7e2323; }

.deck2__dials { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.counter { display: inline-flex; gap: 2px; padding: 3px; border: 1.5px solid #3a1515; background: #000; }
.counter__digit { width: 14px; height: 20px; overflow: hidden; background: #f5efe6; color: #000; font-family: var(--f-num); font-size: 13px; font-weight: 700; text-align: center; }
.counter__strip { display: block; width: 14px; line-height: 20px; word-break: break-all; transform: translateY(calc(var(--d, 0) * -20px)); transition: transform 0.25s ease-out; }
.deck2__time { font-family: var(--f-num); font-size: 12px; color: var(--pink); }
.knob {
	--turn: 0deg;
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 2px solid #000;
	background:
		repeating-conic-gradient(rgb(255 255 255 / 0.06) 0 4deg, transparent 4deg 12deg),
		radial-gradient(circle at 35% 30%, #4a4040, #120c0c 70%);
	box-shadow: 0 3px 6px #000, inset 0 1px 0 rgb(255 255 255 / 0.15);
	touch-action: none;
	cursor: grab;
}
.knob__cap { position: absolute; inset: 0; transform: rotate(var(--turn)); }
.knob__cap::before { content: ''; position: absolute; left: 50%; top: 5px; width: 3px; height: 13px; margin-left: -1.5px; background: var(--red); box-shadow: var(--glow); }
.knob:focus-visible { outline-offset: 4px; }

/* Piano keys: they go down, and PLAY stays down while it plays. */
.deck2__keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px; }
.pkey {
	display: grid;
	place-items: center;
	height: 54px;
	border: 1px solid #000;
	border-radius: 2px;
	background: linear-gradient(180deg, #3a3232 0%, #1d1717 55%, #120d0d 100%);
	color: #f5efe6;
	box-shadow: 0 6px 0 #070404, 0 7px 10px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.18);
	transition: transform 0.08s, box-shadow 0.08s, color 0.15s;
	touch-action: none;
}
.pkey .pd-glyph { width: 20px; height: 20px; }
.pkey:hover { color: #fff; }
.pkey:active,
.pkey.is-pressed,
.pkey.is-held,
.pkey.is-latched {
	transform: translateY(5px);
	box-shadow: 0 1px 0 #070404, 0 2px 4px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.08);
}
.pkey--play.is-latched { color: var(--red); filter: drop-shadow(0 0 6px rgb(255 69 69 / calc(0.9 * var(--glow-k)))); }

/* Reels turn while it plays; FF and REW whizz. */
.deck2.is-playing .deck2__bay .tape__reel { animation: spin 1.8s linear infinite; }
.deck2.is-ff .deck2__bay .tape__reel { animation: spin 0.22s linear infinite; }
.deck2.is-rew .deck2__bay .tape__reel { animation: spin 0.22s linear infinite reverse; }

/* --------------------------------------------------------------------------
   Cassettes (used in the rack, the deck and in flight)
   -------------------------------------------------------------------------- */

.tape {
	--pack-l: 0.6;
	--pack-r: 0.4;
	position: relative;
	display: block;
	aspect-ratio: 1.58;
	container-type: inline-size;
	border-radius: 5% / 8%;
	background:
		linear-gradient(180deg, rgb(255 255 255 / 0.07), transparent 40%),
		var(--shell);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 -6px 12px rgb(0 0 0 / 0.35), 0 4px 10px rgb(0 0 0 / 0.5);
	color: var(--ink);
	transition: transform 0.25s var(--ease-out), opacity 0.2s, filter 0.2s;
}
.tape--clear { border: 1px solid rgb(255 255 255 / 0.18); }
.tape__label {
	position: absolute;
	left: 7%;
	right: 7%;
	top: 8%;
	height: 60%;
	padding: 3% 5% 0;
	border-radius: 3%;
	background: var(--label);
	overflow: hidden;
}
.tape__title {
	display: block;
	padding-right: 12%;
	font-family: var(--f-display);
	font-size: 8cqi;
	line-height: 1.05;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--ink);
}
.tape__side { position: absolute; right: 5%; top: 5%; font-family: var(--f-num); font-size: 7cqi; font-weight: 800; color: var(--ink); }
.tape__stripe { position: absolute; left: 0; right: 0; top: 34%; height: 7%; background: var(--ink); opacity: 0.85; }
.tape__window {
	position: absolute;
	left: 22%;
	right: 22%;
	top: 44%;
	height: 21%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 5%;
	border-radius: 20cqi;
	border: 1px solid rgb(0 0 0 / 0.6);
	background: rgb(12 4 4 / 0.92);
	overflow: hidden;
}
.tape__reel {
	position: relative;
	width: 12cqi;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle, #f5efe6 0 24%, transparent 25%),
		repeating-conic-gradient(#f5efe6 0 16deg, transparent 16deg 60deg);
	border: 1.4cqi solid #f5efe6;
}
/* The wound tape around each hub: the left empties as the right fills. */
.tape__reel--l { box-shadow: 0 0 0 calc(0.6cqi + var(--pack-l) * 5cqi) #3d1414; }
.tape__reel--r { box-shadow: 0 0 0 calc(0.6cqi + var(--pack-r) * 5cqi) #3d1414; }
.tape__base {
	position: absolute;
	left: 20%;
	right: 20%;
	bottom: 0;
	height: 22%;
	background:
		radial-gradient(circle at 30% 60%, rgb(0 0 0 / 0.7) 0 6%, transparent 7%),
		radial-gradient(circle at 70% 60%, rgb(0 0 0 / 0.7) 0 6%, transparent 7%),
		rgb(0 0 0 / 0.28);
	clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}
.tape__screws {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 4% 6%, #8a8080 0 1.2cqi, transparent 1.4cqi),
		radial-gradient(circle at 96% 6%, #8a8080 0 1.2cqi, transparent 1.4cqi),
		radial-gradient(circle at 4% 94%, #8a8080 0 1.2cqi, transparent 1.4cqi),
		radial-gradient(circle at 96% 94%, #8a8080 0 1.2cqi, transparent 1.4cqi);
}
.tape--flying { box-shadow: 0 24px 40px rgb(0 0 0 / 0.65), var(--glow); }
.tape--dragging { filter: brightness(1.1); }

/* --------------------------------------------------------------------------
   The rack
   -------------------------------------------------------------------------- */

.rack { padding: 2px 12px 16px; }
.rack__title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 4px 2px 10px; }
.rack__title span:first-child { font-family: var(--f-display); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); text-shadow: var(--text-glow); }
.rack__hint { color: var(--pink); font-size: 17px; }
.rack__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.rack__slot {
	padding: 7px;
	border: 1.5px solid #2a1010;
	background: linear-gradient(180deg, #0d0404, #050000);
	box-shadow: inset 0 -3px 0 #1a0606;
	touch-action: pan-y;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	cursor: grab;
}
.rack__slot.is-lifted .tape { transform: translateY(-6px) rotate(-3deg) scale(1.05); box-shadow: 0 14px 22px rgb(0 0 0 / 0.7), var(--glow); }
.rack__slot:hover .tape,
.rack__slot:focus-visible .tape { transform: translateY(-4px) rotate(-1.5deg); }
.rack__slot.is-out .tape { opacity: 0.12; filter: grayscale(1); transform: none; }
.rack__slot.is-landing .tape { opacity: 0; }

@media (max-width: 899px) {
	.deck2 { margin: 10px; }
	.deck2__main { grid-template-columns: 1fr; }
	/* Meters beside the dials, so the deck still fits on one screen. */
	.deck2__side { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; align-items: center; }
	.deck2__dials { flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin-top: 0; }
	.rack__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.rack__slot { padding: 5px; }
	.pkey { height: 58px; }
}