/* ============ FUN LAYER ============ */

/* Living EQ: once live, the bars rise from a baseline and JS drives scaleY on the shared beat */
.hero .waveline { height: 50px; gap: 5px; align-items: flex-end; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.waveline.live span { height: 100% !important; border-radius: 3px 3px 1px 1px; transform-origin: 50% 100%; transform: scaleY(0); will-change: transform; opacity: .16; background: var(--ink); }
.waveline.live span:nth-child(3n+2) { opacity: .28; }
.waveline.live span:nth-child(5n+3) { opacity: .6; background: var(--amber-deep); }
.logo .bars.live span { height: 100% !important; animation: none; transform-origin: 50% 100%; will-change: transform; }

/* ============ SECTION MAP: the record ============ */
/* Wide screens: a slice of vinyl on the right edge. Content narrows a touch so they never overlap. */
.record-rail { position: fixed; top: 0; right: 0; bottom: 0; width: 112px; z-index: 40; pointer-events: none; display: none; }
.record-rail svg { display: block; overflow: visible; }
.rec-disc { pointer-events: auto; cursor: grab; touch-action: none; }
.record-rail.grabbing .rec-disc, .record-rail.grabbing .rec-track { cursor: grabbing; }
.record-rail { touch-action: none; user-select: none; -webkit-user-select: none; }
.rec-body { fill: #14161C; stroke: rgba(255,255,255,.14); stroke-width: 1.5; }
.rec-groove { fill: none; stroke: rgba(255,255,255,.05); stroke-width: 1; }
.rec-mark { fill: none; stroke: #fff; stroke-width: 1; stroke-linecap: round; }
.rec-sheen { pointer-events: none; }
.rec-track { pointer-events: auto; cursor: pointer; text-decoration: none; transition: opacity .3s ease; }
.rec-track text { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; fill: var(--bass-text-soft); transition: fill .3s ease, font-size .3s ease, letter-spacing .3s ease; }
.rec-track:hover text, .rec-track:focus-visible text { fill: #fff; }
.rec-track.active text { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: .03em; fill: var(--amber); }
.rec-track:focus-visible { outline: none; }
.rec-playhead { fill: var(--amber); }

@media (min-width: 1280px) {
	.record-rail { display: block; }
	:root { --wide: 1120px; }
}
@media (min-width: 1440px) { :root { --wide: 1200px; } }

/* Narrow screens: a floating "now playing" pill that opens the tracklist */
/* Player dock: play + always-visible volume. Bottom-left on wide screens;
   on narrow screens a full-width bar that also carries the now-playing pill. */
.player {
	position: fixed; z-index: 60; left: 20px; bottom: max(16px, env(safe-area-inset-bottom));
	display: flex; align-items: center; gap: .4rem; padding: .35rem .7rem .35rem .35rem; border-radius: 999px;
	background: rgba(20,22,28,.92); color: var(--bass-text); backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,.08); box-shadow: 0 8px 24px rgba(20,22,28,.22);
}
.np-pill {
	display: inline-flex; align-items: center; gap: .55rem; min-width: 0; flex: 1;
	padding: .15rem .6rem .15rem .15rem; border-radius: 999px; border: 0; background: transparent; color: inherit; cursor: pointer;
	font-family: var(--font-mono); font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.np-pill:hover { background: rgba(255,255,255,.06); }
@media (min-width: 1280px) { .np-pill { display: none; } }
@media (max-width: 1279px) { .player { left: 12px; right: 12px; } }

/* the player shows in disco mode — and whenever music plays (e.g. the game), so the volume
   control is always visible while there's sound. Otherwise narrow screens keep just the section pill. */
html:not(.disco):not(.is-playing) .pl-track, html:not(.disco):not(.is-playing) .pl-skip,
html:not(.disco):not(.is-playing) .pl-play, html:not(.disco):not(.is-playing) .pl-vol { display: none; }
@media (min-width: 1280px) { html:not(.disco):not(.is-playing) .player { display: none; } }
@media (max-width: 1279px) {
	html:not(.disco):not(.is-playing) .player { left: 50%; right: auto; transform: translateX(-50%); padding-right: .35rem; }
	html.disco .np-pill, html.is-playing .np-pill { display: none; }
}
html.disco .player, html.is-playing .player { animation: playerIn .45s cubic-bezier(.3,1.4,.5,1) backwards; }
html.disco:not(.is-playing) .player { animation-delay: .9s; }
@keyframes playerIn { from { opacity: 0; transform: translateY(20px); } }
@media (max-width: 1279px) { html:not(.disco):not(.is-playing) .player { animation: none; } }

.pl-track { display: flex; flex-direction: column; min-width: 0; max-width: 190px; padding: 0 .55rem 0 .7rem; line-height: 1.2; }
.pl-name { font-family: var(--font-display); font-weight: 800; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-meta { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; color: var(--bass-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-skip { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; }
.pl-skip:hover { background: rgba(255,255,255,.08); }
.pl-skip svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 1279px) { html.disco .pl-track { flex: 1; max-width: none; padding-left: .5rem; } }
@media (max-width: 520px) { .pl-meta { display: none; } .pl-skip { width: 30px; } }

.pl-play {
	flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	display: grid; place-items: center; background: var(--amber); color: var(--amber-ink);
	transition: transform .15s ease, background .2s ease;
}
.pl-play:hover { transform: scale(1.06); background: #ffc04d; }
.pl-play svg { width: 22px; height: 22px; fill: currentColor; grid-area: 1 / 1; }
.pl-play .i-pause, .pl-play[aria-pressed="true"] .i-play { display: none; }
.pl-play[aria-pressed="true"] .i-pause { display: block; }

.pl-vol { flex: none; display: flex; align-items: center; gap: .35rem; padding: .2rem .25rem; border-radius: 999px; transition: box-shadow .3s ease; }
.pl-mute { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; }
.pl-mute:hover { background: rgba(255,255,255,.08); }
.pl-mute svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pl-mute .spk { fill: currentColor; stroke: none; }
.pl-mute .cross { display: none; }
.player.silent .pl-mute .wave { display: none; }
.player.silent .pl-mute .cross { display: inline; }

/* big, easy volume slider */
#dockVolume { -webkit-appearance: none; appearance: none; width: 128px; height: 28px; background: transparent; cursor: pointer; --fill: 60%; }
#dockVolume::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--amber) var(--fill), rgba(255,255,255,.18) var(--fill)); }
#dockVolume::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--amber) var(--fill), rgba(255,255,255,.18) var(--fill)); }
#dockVolume::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; border: 3px solid var(--amber); }
#dockVolume::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--amber); }
#dockVolume:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; }
@media (max-width: 520px) { #dockVolume { width: 84px; } .player { gap: .2rem; } .np-name { min-width: 0; } }

/* while music plays, the volume control glows so it's obvious where to turn it down */
.player.playing .pl-vol { animation: volPulse 2.2s ease-in-out infinite; }
@keyframes volPulse { 0%, 100% { box-shadow: 0 0 0 1.5px rgba(255,174,31,.55); } 50% { box-shadow: 0 0 0 1.5px rgba(255,174,31,.55), 0 0 18px 2px rgba(255,174,31,.35); } }
@media (prefers-reduced-motion: reduce) { .player.playing .pl-vol { animation: none; box-shadow: 0 0 0 1.5px rgba(255,174,31,.55); } }
.np-disc {
	width: 28px; height: 28px; border-radius: 50%; flex: none;
	background: radial-gradient(circle, var(--amber) 0 22%, #0b0c10 23% 27%, transparent 28%),
		repeating-radial-gradient(circle, #1d2029 0 2px, #14161C 2px 4px);
	animation: npSpin 3.2s linear infinite;
}
.np-disc::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 40deg, rgba(255,255,255,.12) 55deg, transparent 70deg 220deg, rgba(255,255,255,.08) 235deg, transparent 250deg); }
@keyframes npSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .np-disc { animation: none; } }
.np-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 9ch; text-align: left; }

.tracklist { position: fixed; inset: 0; z-index: 70; background: var(--bass); color: var(--bass-text); display: grid; place-items: center; padding: 2rem 1.25rem; overflow-y: auto; }
.tracklist[hidden] { display: none; }
.tracklist-inner { width: 100%; max-width: 26rem; }
.tracklist .eyebrow { color: var(--bass-text-soft); }
.tracklist ol { list-style: none; margin: 1.25rem 0 2rem; padding: 0; border-top: 1px solid var(--bass-line); }
.tracklist li { border-bottom: 1px solid var(--bass-line); }
.tracklist a { display: flex; align-items: baseline; gap: 1rem; padding: .85rem .25rem; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--bass-text); }
.tracklist a span { font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--bass-text-soft); min-width: 2.2em; }
.tracklist a.active, .tracklist a:hover { color: var(--amber); }
.tracklist .btn-outline { background: transparent; border-color: var(--bass-text-soft); color: var(--bass-text); }
.tracklist .btn-outline:hover { background: var(--bass-text); color: var(--bass); }

/* ============ DISCO MODE ============ */
/* Night theme: deep indigo rather than black, so later shadows still read */
html.disco {
	--paper: #15112E;
	--paper-raised: #1C1740;
	--ink: #F2EEFF;
	--ink-soft: #B9B3D9;
	--ink-faint: #8D86B3;
	--line: #2E2858;
	--amber-text: #FFB84D;
	--bass: #0C0A22;
	--bass-raised: #151235;
	--bass-line: #2E2858;
}
body { transition: background-color .4s ease, color .4s ease; }
html.disco header.site { border-bottom-color: var(--line); }
html.disco header.site::before { background: rgba(21,17,46,.86); }
html.disco .nav-toggle span, html.disco .nav-toggle span::before, html.disco .nav-toggle span::after { background: var(--ink); }
html.disco nav.primary { background: var(--paper); }
@media (min-width: 921px) { html.disco nav.primary { background: none; } }
html.disco .btn-solid { background: var(--amber); color: var(--amber-ink); }
html.disco .btn-solid:hover { background: #fff; color: var(--amber-ink); }
html.disco .flap:not(.space) { background: #0C0A22; color: #F2EEFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 0 14px rgba(181,140,255,.25); }
html.disco .hero-photo, html.disco .about-photo { background: #241D4A; }

/* dance floor: tiles flash to a colour on the beat and fade out over it */
html.disco #co-cekat .rider-item { background-color: transparent; }
html.disco #co-cekat .rider-item.lit { animation: tileFlash .62s ease-out forwards; }
html.disco #co-cekat .rider-item.lit-static { background-color: rgba(var(--tile), .18); }
@keyframes tileFlash {
	0% { background-color: rgba(var(--tile), .5); box-shadow: inset 0 0 46px rgba(var(--tile), .55), 0 0 30px rgba(var(--tile), .25); }
	100% { background-color: rgba(var(--tile), .07); box-shadow: inset 0 0 18px rgba(var(--tile), .12), 0 0 0 rgba(var(--tile), 0); }
}
html.disco #co-cekat .rider-grid { box-shadow: 0 0 60px rgba(139,92,255,.18); }

/* the rest of the page on the beat: one item per group glows in turn */
html.disco .beat-lit { animation: beatGlow .62s ease-out; }
@keyframes beatGlow {
	0% { box-shadow: 0 0 0 1.5px rgba(var(--tile), .95), 0 0 30px rgba(var(--tile), .5); }
	100% { box-shadow: 0 0 0 1.5px rgba(var(--tile), 0), 0 0 30px rgba(var(--tile), 0); }
}
html.disco .btn-solid { box-shadow: 0 0 calc(var(--kick, 0) * 26px) rgba(255,174,31, calc(var(--kick, 0) * .55)); }
@media (prefers-reduced-motion: reduce) {
	html.disco .beat-lit { animation: none; }
}

/* the record stops: EQ drops before the lights go out */
html.record-stop .waveline.live span { transform: scaleY(.04) !important; transition: transform .25s ease-in; }

.disco-blackout { position: fixed; inset: 0; z-index: 80; background: #07061A; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.disco-blackout.on { opacity: .92; }

/* mirror ball hanging from the header */
.disco-rig { position: fixed; left: 50%; top: 64px; z-index: 49; width: 0; pointer-events: none; }
.disco-rig[hidden] { display: none; }
.disco-sway { position: absolute; left: 0; top: 0; transform-origin: 0 0; } /* swing + rope length come from the physics in disco.js */
.disco-cable { position: absolute; left: -1px; top: 0; width: 2px; height: var(--cable, 70px); background: linear-gradient(#5a5f78, #c9cce0); }
.disco-cap { position: absolute; left: -8px; top: calc(var(--cable, 70px) - 3px); width: 16px; height: 10px; border-radius: 3px 3px 1px 1px; background: #8a8fa8; }
.disco-ball {
	pointer-events: auto; cursor: grab; touch-action: none;
	position: absolute; top: calc(var(--cable, 70px) + 3px); left: 0; translate: -50% 0; display: block; border-radius: 50%;
	box-shadow: 0 0 40px 10px rgba(255,255,255,.14), 0 0 110px 28px rgba(181,140,255,.2);
}
.disco-rig.drop .disco-sway > * { animation: discoDrop 1.1s cubic-bezier(.3,.7,.4,1) both; }
.disco-rig.rise .disco-sway > * { animation: discoRise .55s ease-in both; }
@keyframes discoDrop {
	0% { transform: translateY(-260px); }
	55% { transform: translateY(14px); }
	72% { transform: translateY(-6px); }
	86% { transform: translateY(3px); }
	100% { transform: translateY(0); }
}
@keyframes discoRise { to { transform: translateY(-300px); } }
@media (max-width: 760px) { .disco-rig { --cable: 40px; } }
.disco-ball.grabbing { cursor: grabbing; }

/* light layer: canvas (half resolution, stretched) blended onto the page */
.disco-lights { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 48; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1s ease; }
.disco-lights.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.disco-rig.drop .disco-sway > *, .disco-rig.rise .disco-sway > * { animation: none; }
}

/* the button lives in the header: a live mini mirror ball with a slowly turning rainbow rim */
.nav-row { gap: 1rem; }
.nav-row .logo { margin-right: auto; }
.disco-slot { position: relative; display: flex; }
.disco-btn {
	position: relative; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; isolation: isolate;
	padding: .3rem .95rem .3rem .3rem; border-radius: 999px; border: 0;
	background: #14161C; color: #F2EEFF;
	font-family: var(--font-mono); font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	transition: transform .15s ease, box-shadow .25s ease;
}
/* rainbow rim */
.disco-btn::before {
	content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
	background: conic-gradient(from var(--rim, 0deg), #FFAE1F, #ff5fa2, #b58cff, #5fd4ff, #FFAE1F);
	animation: rimTurn 4s linear infinite;
}
.disco-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #14161C; }
@property --rim { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes rimTurn { to { --rim: 360deg; } }
.disco-btn:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 6px 22px rgba(255,95,170,.35), 0 0 0 4px rgba(255,174,31,.18); }
.disco-btn:hover .mini-ball { animation-duration: 1.2s; }
.disco-btn[aria-pressed="true"]::after { background: #2a1f52; }
.mini-ball { display: block; width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: 0 0 10px rgba(255,255,255,.25); animation: miniHang 9s ease-in-out infinite; transform-origin: 50% -6px; }
/* every ~9s: a little swing to invite a click */
@keyframes miniHang { 0%, 84%, 100% { transform: rotate(0); } 87% { transform: rotate(18deg); } 90% { transform: rotate(-13deg); } 93% { transform: rotate(7deg); } 96% { transform: rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .mini-ball, .disco-btn::before { animation: none; } }
.disco-hint {
	position: absolute; top: calc(100% + 12px); right: 0; white-space: nowrap;
	margin: 0; padding: .45rem .8rem; border-radius: 10px; background: var(--amber); color: var(--amber-ink);
	font-family: var(--font-mono); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	box-shadow: 0 6px 18px rgba(20,22,28,.18); pointer-events: none;
	opacity: 0; transform: translateY(-6px); transition: opacity .35s ease, transform .35s ease;
}
.disco-hint::after { content: ""; position: absolute; right: 26px; top: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--amber); }
.disco-hint.show { opacity: 1; transform: none; }
@media (max-width: 920px) {
	.disco-btn { padding: .3rem .8rem .3rem .3rem; }
}
@media (max-width: 400px) {
	.disco-btn { padding: .3rem; }
	.disco-btn .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ============ DANCERS (disco mode) ============ */
/* stages: zero-height anchors on the top edge of things; figures stand on them */
.stage { display: flex; align-items: flex-end; gap: .25rem; height: 0; pointer-events: none; z-index: 5; }
.stage-floor { position: relative; justify-content: flex-end; padding-right: 2.5rem; }
.stage-card, .stage-stiga, .stage-form { position: absolute; top: 0; }
.stage-card { left: 2.25rem; }
.stage-stiga { left: 1.25rem; }
.stage-form { right: 1.75rem; }
.price-card, .form, .extra-media { position: relative; }

.dancer {
	pointer-events: auto; background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--ink); line-height: 0;
	animation: dancerIn .5s cubic-bezier(.3,1.5,.5,1) backwards;
	transform-origin: 50% 100%;
	transition: color .4s ease, filter .4s ease;
}
html.disco .dancer { color: #F2EEFF; filter: drop-shadow(0 0 6px rgba(181,140,255,.55)); }
/* sections that are dark in daylight too: light ink, like their text */
.section-dark .dancer { color: var(--bass-text); }
.section-dark .dancer .shades { stroke: #14161C; }
.section-dark .dancer .dress { fill: var(--bass-text); stroke: none; }
.dancer svg { display: block; overflow: visible; }
.dancer:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px; }
.dancer .limb { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.dancer .head { fill: currentColor; }
.dancer .accent-fill { fill: var(--amber); }
/* daylight: white dress outlined in ink; at night it glows */
.dancer .dress { fill: var(--paper-raised); stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
html.disco .dancer .dress { fill: #F2EEFF; stroke: none; }
.dancer .veil { fill: rgba(20,22,28,.18); }
html.disco .dancer .veil { fill: rgba(255,255,255,.55); }
.dancer .skirt { fill: #b58cff; }
.dancer .shades { stroke: var(--paper-raised); stroke-width: 2.6; stroke-linecap: round; }
html.disco .dancer .shades { stroke: #14161C; }
.dancer .phones { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linecap: round; }
.dancer .balloon { fill: #ff5fa2; }
.dancer .string { fill: none; stroke: currentColor; stroke-opacity: .6; stroke-width: .8; }
.dancer-zenich .torso { stroke-width: 6.5; }
.dancer-leo .torso { stroke-width: 5; stroke: #8fd3ff; }
.dancer.spin svg { animation: dancerSpin .65s ease-in-out; }
.dancer.jump svg { animation: dancerJump .65s cubic-bezier(.3,.7,.4,1); }
@keyframes dancerIn { from { opacity: 0; transform: translateY(14px) scale(.3); } }
@keyframes dancerSpin { to { transform: rotateY(360deg); } }
@keyframes dancerJump { 40% { transform: translateY(-26px); } 70% { transform: translateY(2px); } }
@media (max-width: 760px) { .dancer svg { width: calc(48px * var(--fig-scale, 1)); height: auto; } }

/* conga line: everyone walks across the bottom of the screen */
.conga { position: fixed; left: 0; bottom: 10px; z-index: 65; display: flex; align-items: flex-end; gap: .4rem; pointer-events: none; animation: congaRun 9s linear forwards; }
.conga .dancer { animation: none; pointer-events: none; }
@keyframes congaRun { from { transform: translateX(-110%); } to { transform: translateX(100vw); } }


/* ============ NAMIXUJ SI (beat-maker) ============ */
.game-section { background: #0B0D1E; border-top: 1px solid var(--bass-line); }
.mixer {
	position: relative; max-width: 980px; margin: 0 auto; padding: clamp(1rem, 3vw, 1.75rem);
	background: linear-gradient(180deg, #1A1D38, #13152B); border: 1px solid var(--bass-line); border-radius: 20px;
	box-shadow: 0 30px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.mix-banner { margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 10px; background: var(--amber); color: var(--amber-ink); font-family: var(--font-mono); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-align: center; }

.mix-top { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.mix-play {
	display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.4rem .7rem 1rem; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--amber); color: var(--amber-ink); font-family: var(--font-mono); font-weight: 600; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
	box-shadow: 0 6px 20px rgba(255,174,31,.3); transition: transform .15s ease;
}
.mix-play:hover { transform: translateY(-2px); }
.mix-play svg { width: 22px; height: 22px; fill: currentColor; }
.mix-play .i-pause, .mix-play[aria-pressed="true"] .i-play { display: none; }
.mix-play[aria-pressed="true"] .i-pause { display: block; }
.mix-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.mix-presets button {
	padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--bass-line); background: transparent; color: var(--bass-text-soft); cursor: pointer;
	font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
}
.mix-presets button:hover { color: var(--bass-text); border-color: var(--bass-text-soft); }
.mix-presets button[aria-pressed="true"] { background: var(--bass-text); color: var(--bass); border-color: var(--bass-text); }

/* the grid: 16 steps, grouped in 4 beats */
.seq { display: grid; gap: .45rem; overflow-x: auto; padding-bottom: .25rem; }
.seq-row { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: .6rem; min-width: 640px; }
.seq-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bass-text-soft); }
.seq-cells { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.seq-cells .pad:nth-child(4n+1):not(:first-child) { margin-left: 6px; }
.pad {
	aspect-ratio: 1; min-width: 26px; border-radius: 6px; border: 1px solid #2B2F55; background: #20234A; cursor: pointer; padding: 0;
	font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: var(--amber-ink);
	transition: background .1s ease, transform .1s ease, box-shadow .15s ease;
}
.seq-cells .pad:nth-child(4n+1) { background: #262A55; }
.pad:hover { border-color: var(--bass-text-soft); }
.seq-cells .pad[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 12px rgba(255,174,31,.45); }
.seq-clap .pad[aria-pressed="true"] { background: #ff5fa2; border-color: #ff5fa2; box-shadow: 0 0 12px rgba(255,95,162,.45); }
.seq-hat .pad[aria-pressed="true"], .seq-ohat .pad[aria-pressed="true"] { background: #5fd4ff; border-color: #5fd4ff; box-shadow: 0 0 12px rgba(95,212,255,.45); }
.seq-bass .pad[aria-pressed="true"] { background: #b58cff; border-color: #b58cff; box-shadow: 0 0 12px rgba(181,140,255,.45); }
.seq-keys .pad[aria-pressed="true"] { background: #F2EEFF; border-color: #F2EEFF; box-shadow: 0 0 12px rgba(242,238,255,.4); }
/* playhead */
.pad.now { transform: translateY(-2px); border-color: #fff; }
.pad.now:not([aria-pressed="true"]) { background: #3A3F75; }
.pad.now[aria-pressed="true"] { filter: brightness(1.25); }

/* phones: label on top, the 16 steps in two lines of 8 — big enough to tap, no sideways scrolling */
@media (max-width: 640px) {
	.seq { gap: .7rem; }
	.seq-row { grid-template-columns: 1fr; min-width: 0; gap: .3rem; }
	.seq-cells { grid-template-columns: repeat(8, 1fr); row-gap: 5px; }
	.seq-cells .pad:nth-child(4n+1):not(:first-child) { margin-left: 0; }
	.seq-cells .pad:nth-child(5), .seq-cells .pad:nth-child(13) { margin-left: 6px; }
	.pad { min-width: 0; }
	.seq-label { font-size: .66rem; }
}
.mix-controls { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 1.25rem; margin-top: 1.5rem; }
.mix-ctl { display: flex; flex-direction: column; gap: .5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bass-text-soft); }
.mix-ctl > span { display: flex; justify-content: space-between; gap: .5rem; }
.mix-ctl output { color: var(--amber); }
.mix-xfade b { font-weight: 600; }
.mix-ctl input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
.mix-ctl input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #2B2F55; }
.mix-ctl input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: #2B2F55; }
.mix-ctl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 6px; background: #F2EEFF; border: 3px solid var(--amber); }
.mix-ctl input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 6px; background: #F2EEFF; border: 3px solid var(--amber); }
.mix-xfade input[type="range"]::-webkit-slider-thumb { width: 16px; height: 30px; margin-top: -12px; border-radius: 4px; }
@media (max-width: 720px) { .mix-controls { grid-template-columns: 1fr; } }

/* the crowd */
.crowd { margin-top: 1.75rem; border-top: 1px solid var(--bass-line); padding-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.crowd-floor {
	display: flex; justify-content: center; align-items: flex-end; gap: clamp(.75rem, 4vw, 2.5rem); min-height: 100px; width: 100%;
	padding: 0 1rem; border-bottom: 3px solid #2B2F55; background: radial-gradient(ellipse at 50% 100%, rgba(181,140,255,.18), transparent 70%);
	transition: background .4s ease;
}
.mixer.full-floor .crowd-floor { background: radial-gradient(ellipse at 50% 100%, rgba(255,174,31,.35), transparent 70%); }
.crowd-floor .dancer { color: #F2EEFF; animation: none; pointer-events: none; }
.crowd-floor .dancer .dress { fill: #F2EEFF; stroke: none; }
.crowd-floor .dancer .shades { stroke: #14161C; }
.floor-label { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--bass-text); }
.mixer.full-floor .floor-label { color: var(--amber); }

.mix-share { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.mix-share .btn-outline { background: transparent; border-color: var(--bass-text-soft); color: var(--bass-text); }
.mix-share .btn-outline:hover { background: var(--bass-text); color: var(--bass); }
#mixShareOut { flex: 1 1 18rem; max-width: 30rem; padding: .7rem .9rem; border-radius: 8px; border: 1px solid var(--bass-line); background: var(--bass); color: var(--bass-text); font: .8rem var(--font-mono); }

.mix-cta { text-align: center; margin-top: 2.5rem; }
.mix-cta p { color: var(--bass-text-soft); font-size: 1.1rem; margin-bottom: 1rem; }

/* ---------- mode switch: Volná hra / Hádej beat ---------- */
/* the mixer's blocks have their own display rules; make `hidden` win */
.mixer [hidden] { display: none !important; }
.mix-modes { display: inline-flex; padding: 4px; margin: 0 auto 1.25rem; border-radius: 999px; background: #0E1024; border: 1px solid var(--bass-line); }
.mixer > .mix-modes { display: flex; width: max-content; max-width: 100%; }
.mix-modes button {
	padding: .55rem 1.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--bass-text-soft); cursor: pointer;
	font-family: var(--font-mono); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.mix-modes button[aria-selected="true"] { background: var(--amber); color: var(--amber-ink); }

/* ---------- "Hádej beat" ---------- */
.mixer.quiz-idle .seq, .mixer.quiz-idle .crowd { display: none; }
.quiz-intro { max-width: 34rem; margin: 1rem auto 1.5rem; text-align: center; }
.quiz-intro h3 { font-size: clamp(2rem, 5vw, 3rem); margin: .4rem 0 .8rem; color: var(--bass-text); }
.quiz-intro p { color: var(--bass-text-soft); }
.quiz-rules { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: .5rem; text-align: left; font-size: .95rem; color: var(--bass-text-soft); }
.quiz-rules li { padding: .7rem .9rem; border: 1px solid var(--bass-line); border-radius: 10px; background: rgba(255,255,255,.02); }
.quiz-rules b { color: var(--bass-text); }
.quiz-start { font-size: 1rem; padding: 1.1em 2.2em; }

.quiz-bar { position: relative; display: grid; gap: .9rem; margin-bottom: 1.25rem; }
.quiz-status { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.quiz-level .flap { background: #0C0A22; color: var(--amber); }
.quiz-hearts { display: flex; gap: .2rem; font-size: 1.6rem; line-height: 1; }
.heart { color: #ff4d7d; text-shadow: 0 0 12px rgba(255,77,125,.5); transition: color .3s ease, transform .3s ease; }
.heart.empty { color: #33375A; text-shadow: none; }
.heart.lost { animation: heartLost .7s ease; }
@keyframes heartLost { 0% { color: #ff4d7d; transform: scale(1.5); } 100% { color: #33375A; transform: scale(1); } }
.quiz-best { margin: 0; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bass-text-soft); }
.quiz-status .quiz-best { margin-left: auto; }
.quiz-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.quiz-btn {
	display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--bass-line); background: #20234A; color: var(--bass-text);
	font-family: var(--font-mono); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.quiz-btn:hover { border-color: var(--bass-text-soft); }
/* play ▶ while paused, pause ❚❚ while playing; blue = the hidden beat, amber = your attempt */
.quiz-btn .qi { width: 1.05em; height: 1.05em; flex: none; }
.qi-target { fill: #5fd4ff; }
.qi-mine { fill: var(--amber); }
.quiz-btn .qi-pause, .quiz-btn[aria-pressed="true"] .qi-play { display: none; }
.quiz-btn[aria-pressed="true"] .qi-pause { display: inline; }
.quiz-btn[aria-pressed="true"] .qi { fill: var(--bass); }
.quiz-btn[aria-pressed="true"] { background: var(--bass-text); color: var(--bass); }
.quiz-check { margin-left: auto; background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }
.quiz-check:disabled { opacity: .5; cursor: default; }
.quiz-msg { margin: 0; min-height: 1.5em; color: var(--bass-text); font-weight: 500; }
.quiz-exit {
	position: absolute; top: -.25rem; right: 0; display: none; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--bass-line); background: transparent; color: var(--bass-text-soft); font: 600 .72rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.quiz-exit:hover { color: var(--bass-text); border-color: var(--bass-text-soft); }
html.quiz-full .quiz-exit { display: inline-flex; position: fixed; top: 1rem; right: 1rem; z-index: 6; background: #14162B; }
@media (max-width: 560px) { .quiz-exit span { display: none; } .quiz-check { margin-left: 0; } }

/* while the hidden beat plays, the playhead is blue (the pressed Vzor button says the rest) */
.mixer.hearing-target .pad.now { border-color: #5fd4ff; }
/* rows not used in this level */
.seq-row.off { opacity: .25; }
.seq-row.off .pad { cursor: not-allowed; }
/* rows with a mistake after "Zkontrolovat" */
.seq-row.wrong .seq-label { color: #ff4d7d; }
.seq-row.wrong .seq-name::after { content: " ✗"; }
/* rows already right after a wrong guess: locked */
.seq-row.locked .seq-label { color: #5fe0a0; }
.seq-row.locked .seq-name::after { content: " ✓"; }
.seq-row.locked .pad { cursor: default; }
/* mute a correct row to hear the rest (appears only on locked rows) */
.seq-label { display: flex; align-items: center; gap: .4rem; }
.row-mute { display: none; width: 26px; height: 26px; flex: none; padding: 0; border-radius: 50%; border: 1px solid var(--bass-line); background: transparent; color: var(--bass-text-soft); cursor: pointer; place-items: center; }
.seq-row.locked .row-mute { display: inline-grid; }
.row-mute:hover { color: var(--bass-text); border-color: var(--bass-text-soft); }
.row-mute svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.row-mute .spk { fill: currentColor; stroke: none; }
.row-mute .cross { display: none; }
.row-mute[aria-pressed="true"] { background: var(--bass-text); color: var(--bass); border-color: var(--bass-text); }
.row-mute[aria-pressed="true"] .wave { display: none; }
.row-mute[aria-pressed="true"] .cross { display: inline; }
.seq-row.muted .seq-cells { opacity: .3; }
.seq-row.locked .pad:not([aria-pressed="true"]) { opacity: .55; }
.seq.shake { animation: seqShake .45s ease; }
@keyframes seqShake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.seq.win .pad[aria-pressed="true"] { animation: padWin .5s ease 3; }
/* a brightness flash, not scale: growing pads would overflow the grid's scroll box and flash a scrollbar */
@keyframes padWin { 50% { filter: brightness(1.5) saturate(1.2); } }
@media (prefers-reduced-motion: reduce) { .seq.shake, .seq.win .pad[aria-pressed="true"], .heart.lost { animation: none; } }

/* game over / victory */
.quiz-over { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 1rem; border-radius: inherit; background: rgba(11,13,30,.88); backdrop-filter: blur(6px); }
.quiz-over[hidden] { display: none; }
.quiz-over-card { max-width: 30rem; text-align: center; padding: 2rem 1.5rem; border-radius: 16px; border: 1px solid var(--bass-line); background: #1A1D38; }
.quiz-over-card h3 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: .5rem 0; color: var(--bass-text); }
.quiz-over-card p { color: var(--bass-text-soft); }
.quiz-over.won .quiz-over-card { border-color: var(--amber); box-shadow: 0 0 60px rgba(255,174,31,.25); }
.quiz-over.won h3 { color: var(--amber); }
.quiz-over-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.25rem; }
.quiz-over-actions .btn-outline { background: transparent; border-color: var(--bass-text-soft); color: var(--bass-text); }
.quiz-over-actions .btn-outline:hover { background: var(--bass-text); color: var(--bass); }

/* fullscreen: the mixer takes over the screen (scrollable); the player dock stays on top */
html.quiz-full, html.quiz-full body { overflow: hidden; }
html.quiz-full .mixer {
	position: fixed; inset: 0; z-index: 58; max-width: none; margin: 0; border-radius: 0; border: 0;
	overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
	padding: clamp(1rem, 4vh, 2.5rem) max(1rem, calc((100vw - 980px) / 2)) 7rem;
	background: radial-gradient(ellipse at 50% 0%, #22264D, #0B0D1E 70%);
}
html.quiz-full .mixer .quiz-over { position: fixed; }
/* in the game, the bar only appears while sound plays (its volume control); no section pill */
html.quiz-full:not(.is-playing) .player { display: none; }
html.quiz-full .np-pill { display: none; }

/* intro: breathing room between "Začít hru" and the record */
.quiz-intro .quiz-best { margin-top: 1rem; }

/* phones, in the game: the crowd sits fixed at the bottom, tight, with a fading glow
   behind it so the instruments stay faintly visible underneath */
@media (max-width: 640px) {
	html.quiz-full .mixer .crowd {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
		margin: 0; padding: .25rem .75rem calc(.35rem + env(safe-area-inset-bottom)); gap: 0; border-top: 0;
		background: linear-gradient(180deg, rgba(11,13,30,0) 0%, rgba(11,13,30,.55) 35%, rgba(11,13,30,.88) 100%);
		pointer-events: none;
	}
	html.quiz-full .mixer .crowd-floor { min-height: 0; padding: 0; border-bottom-width: 2px; }
	html.quiz-full .mixer .floor-label { font-size: .9rem; margin: .15rem 0 0; }
	html.quiz-full .mixer { padding-bottom: 8.5rem; } /* room to scroll the last rows above the crowd */
	html.quiz-full.is-playing .mixer .crowd { bottom: 76px; }  /* above the player bar (volume) */
	html.quiz-full.is-playing .mixer { padding-bottom: 13rem; }
}

/* in the game, the game's own buttons start/stop the music: the bar becomes a small round speaker
   button in the bottom-left corner (where the player normally sits); hovering it (or a first tap on touch
   screens) slides the volume out to the right, over the dancers */
html.quiz-full .pl-track, html.quiz-full .pl-skip, html.quiz-full .pl-play { display: none; }
html.quiz-full .player { left: 12px; right: auto; bottom: max(10px, env(safe-area-inset-bottom)); transform: none; padding: 3px; gap: 0; }
html.quiz-full .pl-vol { padding: 0; gap: 0; }
html.quiz-full .pl-mute { width: 40px; height: 40px; }
html.quiz-full #dockVolume { width: 0; opacity: 0; margin: 0; transition: width .25s ease, opacity .2s ease, margin .25s ease; }
html.quiz-full .player:hover #dockVolume, html.quiz-full .player:focus-within #dockVolume, html.quiz-full .player.open #dockVolume { width: 120px; opacity: 1; margin: 0 .7rem 0 .4rem; }
/* the dancers stay glued to the bottom, even while sound plays */
@media (max-width: 640px) {
	html.quiz-full.is-playing .mixer .crowd { bottom: 0; }
	html.quiz-full.is-playing .mixer { padding-bottom: 8.5rem; }
}

/* ---------- victory finale: the ball drops, sparkles sweep, the card makes room ---------- */
.quiz-over.finale-on { padding-top: clamp(9rem, 30vh, 16rem); }
.quiz-over-card { position: relative; z-index: 1; }
.finale { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.finale-cable { position: absolute; left: 50%; top: 0; width: 2px; height: clamp(3rem, 12vh, 7rem); margin-left: -1px; background: linear-gradient(#5a5f78, #c9cce0); animation: finaleDrop 1.2s cubic-bezier(.3,.7,.4,1) both; }
.finale-ball { position: absolute; left: 50%; top: clamp(3rem, 12vh, 7rem); translate: -50% 0; border-radius: 50%; box-shadow: 0 0 50px 12px rgba(255,255,255,.18), 0 0 120px 30px rgba(181,140,255,.25); animation: finaleDrop 1.2s cubic-bezier(.3,.7,.4,1) both; }
@keyframes finaleDrop {
	0% { transform: translateY(-70vh); }
	55% { transform: translateY(18px); }
	72% { transform: translateY(-8px); }
	86% { transform: translateY(3px); }
	100% { transform: translateY(0); }
}
.finale i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px 3px currentColor; opacity: 0; animation: finaleSpark 4s linear infinite; }
@keyframes finaleSpark { 0% { opacity: 0; transform: translateX(-60px); } 20%, 70% { opacity: .9; } 100% { opacity: 0; transform: translateX(80px); } }
@media (prefers-reduced-motion: reduce) { .finale-cable, .finale-ball, .finale i { animation: none; } .finale i { opacity: .7; } }
/* the conga over the dark game screen: dancers in their glowing night style */
html.quiz-full .conga .dancer { color: #F2EEFF; filter: drop-shadow(0 0 6px rgba(181,140,255,.55)); }
html.quiz-full .conga .dancer .dress { fill: #F2EEFF; stroke: none; }
html.quiz-full .conga .dancer .veil { fill: rgba(255,255,255,.55); }
html.quiz-full .conga .dancer .shades { stroke: #14161C; }
/* finale rays: a fan of coloured beams from the ball's centre, sweeping slowly */
.finale-rays { position: absolute; left: 50%; top: calc(clamp(3rem, 12vh, 7rem) + 60px); width: 0; height: 0; mix-blend-mode: screen; animation: finaleRaysIn 1.6s ease-out both .6s; }
@media (max-width: 640px) { .finale-rays { top: calc(clamp(3rem, 12vh, 7rem) + 45px); } }
.finale-ray {
	/* a thin wedge from a point at the ball: width = 2 · length · tan(half angle) */
	--len: 170vmax;
	position: absolute; top: 0; height: var(--len); width: calc(var(--len) * var(--w) * 2); left: calc(var(--len) * var(--w) * -1);
	transform-origin: 50% 0;
	background: linear-gradient(rgba(var(--c), .42), rgba(var(--c), .13) 45%, rgba(var(--c), 0));
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	animation: finaleRay 4s ease-in-out infinite alternate;
}
@keyframes finaleRay { from { transform: rotate(calc(var(--a) - var(--sw))); } to { transform: rotate(calc(var(--a) + var(--sw))); } }
@keyframes finaleRaysIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .finale-ray { animation: none; transform: rotate(var(--a)); } .finale-rays { animation: none; } }

/* ============ EASTER EGGS ============ */
/* Instax: shutter flash + a polaroid that slides out and develops */
.instax-flash { position: absolute; inset: 0; z-index: 3; border-radius: var(--radius); background: #fff; pointer-events: none; animation: instaxFlash .6s ease-out forwards; }
@keyframes instaxFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
.polaroid {
	position: absolute; z-index: 4; left: var(--x, 30%); bottom: -8%; width: clamp(120px, 34%, 190px); margin: 0;
	padding: 8px 8px 30px; background: #fbfaf6; border-radius: 3px; box-shadow: 0 14px 30px rgba(20,22,28,.35);
	transform: rotate(var(--tilt, 0deg)); cursor: pointer;
	animation: polaroidOut .9s cubic-bezier(.2,.8,.3,1.2) both;
}
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1px; animation: polaroidDevelop 4.5s ease-in both .4s; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 600 .8rem/1 var(--font-display); color: #53565F; }
.polaroid.toss { animation: polaroidToss .5s ease-in forwards; }
@keyframes polaroidOut { from { transform: translateY(-60%) rotate(0deg) scale(.6); opacity: 0; } }
@keyframes polaroidDevelop { 0% { filter: brightness(2.6) saturate(0) blur(2px); } 60% { filter: brightness(1.2) saturate(.5) blur(0); } 100% { filter: none; } }
@keyframes polaroidToss { to { transform: translate(120%, 40%) rotate(40deg); opacity: 0; } }

/* projector screen: 5-6-7-8, then a dancer */
.screen.jd-on > .flap-row, .screen.jd-on > .modes { visibility: hidden; }
.jd { position: absolute; inset: 0; display: grid; place-items: center; }
.jd-count { margin: 0; font: 800 clamp(3rem, 9vw, 5rem)/1 var(--font-display); color: var(--amber); grid-area: 1 / 1; }
.jd-count.pop { animation: jdPop .45s ease-out; }
@keyframes jdPop { from { transform: scale(1.6); opacity: .3; } }
.jd-stage { grid-area: 1 / 1; display: flex; align-items: flex-end; justify-content: center; height: 70%; }
.jd-stage .dancer { color: #F2EEFF; filter: drop-shadow(0 0 4px rgba(255,174,31,.5)); animation: none; pointer-events: none; transform: scale(var(--jd-scale, 2.2)); transform-origin: 50% 100%; }
@media (max-width: 640px) { .jd-stage .dancer { --jd-scale: 1.6; } }
.jd-stage .dancer .dress { fill: #F2EEFF; stroke: none; }
.jd-stage .dancer .shades { stroke: #14161C; }
.jd-label { position: absolute; bottom: 8%; margin: 0; font: 600 .72rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bass-text-soft); opacity: 0; transition: opacity .3s ease; }
.jd.dancing .jd-label { opacity: 1; }

/* late night: the disco button glows warmer */
html.night .disco-btn { box-shadow: 0 0 18px rgba(255,174,31,.45); }
@media (prefers-reduced-motion: reduce) { .polaroid, .polaroid img, .instax-flash, .jd-count.pop { animation: none; } }
/* a refused click (would break a locked row) */
.pad.nope { animation: padNope .35s ease; }
@keyframes padNope { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .pad.nope { animation: none; } }

/* ============ HINTS: a soft pulse around a clickable surprise (js/hints.js) ============ */
.egg-hint { position: fixed; z-index: 59; pointer-events: none; opacity: 0; box-shadow: 0 0 0 0 rgba(255,174,31,.5); animation: eggHint 2.8s ease-out forwards; }
@keyframes eggHint {
	0%   { opacity: 0; box-shadow: 0 0 0 0 rgba(255,174,31,.5); }
	10%  { opacity: 1; }
	45%  { opacity: 1; box-shadow: 0 0 0 14px rgba(255,174,31,0); }
	55%  { box-shadow: 0 0 0 0 rgba(255,174,31,.4); }
	90%  { opacity: 1; box-shadow: 0 0 0 14px rgba(255,174,31,0); }
	100% { opacity: 0; box-shadow: 0 0 0 14px rgba(255,174,31,0); }
}
@media (prefers-reduced-motion: reduce) { .egg-hint { display: none; } }