/* Global custom cursor (uses external .ani with GIF fallback) */
html, body {
	cursor: url("https://downloads.totallyfreecursors.com/cursor_files/questionboxpinkglit.ani"), url("https://downloads.totallyfreecursors.com/thumbnails/questionboxpinkglit.gif"), auto;
}

/* small helper for the cursor banner positioning if used */
.cursor-banner{z-index:9;visibility:visible;position:fixed;left:50%;transform:translateX(-50%);bottom:6px}

/* ads (bottom-right) and popup styles */
.ads-container{position:fixed;right:12px;bottom:12px;z-index:12}
.ads-button{background:transparent;border:0;padding:0;cursor:pointer;display:inline-block}
.ads-button img{display:block;width:88px;height:auto;max-width:22vw;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.45)}
.ads-popup{position:fixed;right:12px;bottom:112px;max-width:320px;width:min(44vw,320px);max-height:48vh;background:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.5);overflow:auto;padding:12px;z-index:13}
.ads-popup[hidden]{display:none}
.ads-popup-inner{outline:none}
.ads-popup h3{margin:0 0 8px 0;font-size:14px}
.ads-popup p{margin:0;font-size:13px;line-height:1.4;color:#111}

/* music page stats box */
.ads-stats{background:rgba(255,255,255,0.95);color:#111;padding:14px;border-radius:10px;max-width:720px;margin:18px 0;box-shadow:0 6px 20px rgba(0,0,0,0.25)}
.ads-stats h2{margin:0 0 10px 0;font-size:18px}
.stats-numbers{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.stats-numbers > div{min-width:120px}
.stat-value{font-size:20px;font-weight:700;margin-top:6px}
.stats-bars{margin-top:8px}
.bar-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.bar-label{width:110px;font-size:13px;color:#333}
.bar-track{flex:1;height:14px;background:#e9e9e9;border-radius:8px;overflow:hidden}
.bar-fill{height:100%;border-radius:8px 0 0 8px}
.bar-fill.viewed{background:linear-gradient(90deg,#5dd39e,#55bfa9)}
.bar-fill.clicked{background:linear-gradient(90deg,#ffd166,#ff9a66)}
.bar-fill.music{background:linear-gradient(90deg,#7c83ff,#a77bff)}
.stat-note{margin-top:12px;font-size:13px}

/* Retro/net-art pie styles (early 2000s feel) */
.stats-visual{display:flex;align-items:center;gap:12px}
.retro-pie{background:linear-gradient(135deg,#0b0223,#2b0036);padding:6px;border-radius:6px}
.retro-pie .pie-outline{fill:none;stroke:#000;stroke-width:4}
.pie-slice{fill:none;stroke-width:30;stroke-linecap:butt;transform-origin:50% 50%;transform:rotate(-90deg)}
.pie-slice.viewed{stroke:#00ff9f;filter:drop-shadow(0 1px 0 #000) drop-shadow(0 2px 6px rgba(0,0,0,0.6));}
.pie-slice.clicked{stroke:#ffd166;filter:drop-shadow(0 1px 0 #000)}
.pie-slice.music{stroke:#a77bff;filter:drop-shadow(0 1px 0 #000)}
.pie-slice.class{stroke:#8f7bff;filter:drop-shadow(0 1px 0 #000)}
.pie-slice.event{stroke:#ffb366;filter:drop-shadow(0 1px 0 #000)}
.pie-slice.consumption{stroke:#7ac7ff;filter:drop-shadow(0 1px 0 #000)}
.pie-legend{font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#050505;display:flex;flex-direction:column;gap:6px}
.legend-swatch{display:inline-block;width:14px;height:12px;margin-right:8px;border:2px solid #000;box-shadow:1px 1px 0 #fff inset}
.viewed-swatch{background:#00ff9f}
.clicked-swatch{background:#ffd166}
.music-swatch{background:#a77bff}
.class-swatch{background:#8f7bff}
.event-swatch{background:#ffb366}
.consumption-swatch{background:#7ac7ff}
.retro-note{font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#111;margin-top:6px}

/* make the stats box smaller overall for a net-art badge look */
.ads-stats{max-width:420px;padding:10px;border:3px dashed #111;background:linear-gradient(180deg,rgba(255,255,255,0.98),#fff)}
.stats-numbers{gap:10px}
.stat-value{font-size:16px}

/* events box next to left images — net-art / early-2000s styling */
.events-box{position:fixed;left:220px;top:120px;z-index:1001;max-width:300px;background:linear-gradient(180deg,#fff7f7,#fff);padding:10px;border-radius:6px;border:2px dashed #111;box-shadow:6px 6px 0 rgba(0,0,0,0.12);font-family:Verdana, Geneva, sans-serif;color:#111}
.events-box h3{margin:0 0 8px 0;font-size:13px;text-transform:uppercase;letter-spacing:0.6px;color:#2b0036;text-shadow:1px 1px #fff}
.events-box ul{margin:0;padding-left:18px;font-size:13px}
.events-box li{margin:6px 0}
.events-box strong{background:linear-gradient(90deg,#fff,#f2f2ff);padding:2px 4px;border:1px solid #000;display:inline-block}

@media (max-width:800px){
	.events-box{position:static;margin:12px 0;left:auto;top:auto;max-width:100%}
}

/* manifestation section styles */
.manifest-section{position:fixed;left:220px;top:340px;z-index:1001;max-width:420px}
.manifest-question{font-family:Verdana, Geneva, sans-serif;font-size:14px;margin-bottom:8px;color:#2b0036;text-shadow:1px 1px #fff}
.manifest-gif img{width:360px;max-width:68vw;height:auto;display:block;margin:6px 0 10px 0;cursor:pointer}
.manifest-box{background:linear-gradient(180deg,#fffdf7,#fff);padding:10px;border-radius:6px;border:2px dashed #111;box-shadow:6px 6px 0 rgba(0,0,0,0.08);margin-top:6px;max-width:420px}

/* lower manifest box when we want it aligned under the gif */
.manifest-box.manifest-lowered{margin-top:18px}

/* when manifest-section has .manifest-open, lay out gif and box side-by-side */
.manifest-section.manifest-open{display:flex;gap:14px;align-items:flex-start}
.manifest-section.manifest-open .manifest-gif{flex:0 0 auto}
.manifest-section.manifest-open .manifest-box{display:block;margin-top:0}
/* show the manifest box by default (lowered variant controls offset) */
.manifest-section .manifest-box{display:block}
.manifest-box h4{margin:0 0 6px 0;font-size:13px}
.manifest-box p{margin:0;font-size:13px}

@media (max-width:800px){
	.manifest-section{position:static;margin:8px 0}
}

/* right-side info button and popup */
.info-button{position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:120;display:block;border:0;background:transparent;padding:0;cursor:pointer}
.info-button img{width:64px;height:auto;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.45))}
.info-popup{position:fixed;right:92px;top:50%;transform:translateY(-50%);z-index:121;max-width:360px;background:rgba(255,255,255,0.98);padding:12px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.45)}
.info-popup[hidden]{display:none}
.info-popup-inner{outline:none}

@media (max-width:700px){
	.info-button{right:8px;top:auto;bottom:12px;transform:none}
	.info-popup{right:8px;top:auto;bottom:84px;transform:none}
}

/* right-side artists box */
.artists-box{position:fixed;left:560px;top:120px;z-index:1002;max-width:240px;background:linear-gradient(180deg,#fff7f7,#fff);padding:10px;border-radius:6px;border:2px dashed #111;box-shadow:6px 6px 0 rgba(0,0,0,0.12);font-family:Verdana, Geneva, sans-serif;color:#111}
.artists-box h3{margin:0 0 8px 0;font-size:13px;text-transform:uppercase;color:#2b0036;text-shadow:1px 1px #fff}
.artists-box ul{margin:0;padding-left:18px;font-size:13px}
.artists-box li{margin:6px 0}
.artists-note{font-size:12px;margin-top:8px}

@media (max-width:1200px){
	/* move the artists box rightwards slightly on narrower wide screens */
	.artists-box{left:540px}
}

@media (max-width:900px){
	.artists-box{display:none}
}

/* recommendations box to the right of artists box */
.recs-box{position:fixed;z-index:1002;background:linear-gradient(180deg,#fff,#f7fbff);padding:8px;border-radius:6px;border:2px dashed #111;box-shadow:6px 6px 0 rgba(0,0,0,0.12);font-family:Verdana, Geneva, sans-serif;color:#111}
.recs-box h3{margin:0 0 8px 0;font-size:13px;text-transform:uppercase;color:#2b0036;text-shadow:1px 1px #fff}
.recs-box.compact{left:820px;top:120px;width:260px;max-height:260px;overflow:auto;padding:10px}
.recs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.recs-list a{color:#1a0dab;text-decoration:underline;font-weight:600}
.recs-desc{font-size:12px;color:#333;margin-top:4px}
.recs-note{font-size:12px;margin-top:8px;color:#333}

/* place compact recs box in the top-right corner; small gap from edge */
.recs-box.compact{position:fixed;right:12px;top:12px;z-index:140;display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:320px;width:auto;height:auto;padding:8px 14px;overflow:visible;white-space:normal;cursor:pointer;background:linear-gradient(180deg,#fff,#f7fbff);border-radius:6px;border:2px dashed #111;box-sizing:border-box;gap:2px}
.recs-box.compact h3{font-size:13px;margin:0 0 2px 0;line-height:1.2;font-weight:700;display:block}
.recs-box.compact .subtitle{font-size:12px;margin:0;line-height:1.1;font-weight:400;color:#333;display:block}

/* hidden player container that appears beneath the compact recs box */
.recs-player{position:fixed;right:12px;top:80px;z-index:124;width:360px;max-width:calc(100vw - 24px);background:linear-gradient(180deg,#000,#050505);padding:8px;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,0.6);display:none}
.recs-player.open{display:block}
.recs-player iframe{width:100%;height:300px;border:0;border-radius:4px;display:block}
.recs-player .credit{font-size:11px;color:#cccccc;margin-top:6px}

@media (max-width:999px){
	.recs-box.compact{display:none}
}

/* place info button at bottom-right and align popup above it for readability */
.info-button{position:fixed;right:12px;bottom:12px;top:auto;transform:none;z-index:130}
.info-popup{position:fixed;right:92px;bottom:84px;top:auto;transform:none;z-index:9999;max-width:420px;padding:14px;background:rgba(255,255,255,0.98);border-radius:8px;box-shadow:0 10px 40px 0 rgba(0,0,0,0.45)}
.info-popup .stats-visual{margin-top:8px}

/* trippy tiled background for music page */
.trippy-bg{
	background-image: url('images/026.gif');
	background-repeat: repeat;
	background-position: 0 0;
	background-size: auto;
}

/* wider aside variant used for manifest box */
.asideclass{
	background: linear-gradient(180deg,#fffdf7,#fff);
	padding:12px;
	border-radius:6px;
	border:2px dashed #111;
	box-shadow:6px 6px 0 rgba(0,0,0,0.08);
	max-width:420px;
	width: min(36vw,420px);
}

/* Helper to disable page scrolling when needed */
.no-scroll { overflow: hidden !important; }

/* Yellow glitter tiled background helper */
.yellow-glitter-bg {
	background-image: url('images/yellowglitter.gif');
	background-repeat: repeat;
	background-position: 0 0;
	background-size: auto;
}

/* Left fixed swag image with caption overlay */
.swag-left {
	position: fixed;
	left: 12px;
	top: 12px; /* moved to top-left */
	z-index: 120;
	max-width: 325px; /* 260 * 1.25 */
	width: min(30vw, 325px); /* increased by ~25% */
	pointer-events: none; /* let clicks pass through unless caption clickable */
}
.swag-left img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.swag-caption {
	/* fallback/default caption styling (used when not overlay) */
	display: block;
	margin-top: 8px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	padding: 8px 10px;
	font-size: 13px;
	border-radius: 6px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.45);
	pointer-events: auto;
	font-family: Verdana, Geneva, sans-serif;
	white-space: normal; /* allow line breaks */
	line-height: 1.25;
}
.swag-image-wrap{position:relative;display:block}
.swag-image-wrap img{display:block;border-radius:6px}
.swag-caption.overlay{
	position:absolute;
	left:8px;
	right:8px;
	bottom:8px;
	margin:0;
	background:linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.45));
	font-size:13px;
	padding:8px 10px;
	border-radius:6px;
	box-shadow:0 6px 16px rgba(0,0,0,0.5);
	text-align:center;
}
.swag-left-wrapper{position:relative;z-index:120;width:min(30vw,325px)}

/* Glitter graphic placed below the swag caption: lower it slightly so it doesn't crowd the image */
.swag-glitter{display:block;margin-top:18px;pointer-events:auto}
.swag-glitter img{display:block;max-width:100%;height:auto;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.35)}

/* Small instructional note placed under the glitter graphic */
.swag-glitter-note{
	margin-top:10px;
	background: linear-gradient(180deg,#fffef7,#fff);
	border:3px dashed #111;
	padding:8px 10px;
	border-radius:6px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:13px;
	color:#111;
	box-shadow:6px 6px 0 rgba(0,0,0,0.08);
	max-width:100%;
	text-align:center;
	pointer-events:auto;
}

@media (max-width:700px){
	.swag-glitter-note{font-size:12px;padding:6px}
}

/* Top-left stacked art images (art1 over art2) */
.top-left-stack{
	position:fixed;
	left:12px;
	top:12px;
	z-index:122;
	display:flex;
	flex-direction:column;
	gap:10px;
	width: min(26vw, 300px);
	max-width:300px;
	pointer-events:none; /* allow clicks to pass through images unless explicitly enabled */
}
.top-left-stack img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.35);pointer-events:auto}


/* Container to hold swag + barney side-by-side at top-left */
.top-pair{position:fixed;left:12px;top:12px;z-index:121;display:flex;gap:12px;align-items:flex-start}

/* Net-art gallery: stacked clickable images with caption boxes below */
.net-art-gallery{
	position: fixed;
	left: 12px;
	top: calc(12px + min(30vw,325px) + 12px); /* below swag image */
	z-index: 118;
	display:flex;
	flex-direction:column;
	gap:14px;
	width: min(30vw, 340px);
	max-width: 340px;
}

/* Scrollable boxed container holding columns */
.net-art-box{
	position: relative;
	display:flex;
	gap:12px;
	/* taller: allow the box to extend close to the bottom of the viewport */
	max-height: calc(86vh);
	overflow:auto;
	padding:10px;
	background: linear-gradient(180deg,#fff8f0,#fff);
	border:3px solid #111;
	border-radius:8px;
	box-shadow:6px 6px 0 rgba(0,0,0,0.08);
}
.net-art-column{display:flex;flex-direction:column;gap:12px;min-width:180px;width:min(30vw,325px)}
.net-art-item{display:block;cursor:pointer;pointer-events:auto}
.net-art-item img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.35);border:2px solid #000}

.net-art-caption{
	/* use max-height so the caption can expand to fit longer text without a fixed height */
	max-height: 0;
	overflow: hidden;
	margin-top: 8px;
	background: linear-gradient(180deg,#fff,#f7fbff);
	padding: 0 10px;
	border-radius: 6px;
	border: 3px dashed #111;
	box-shadow: 6px 6px 0 rgba(0,0,0,0.12);
	font-family: Verdana, Geneva, sans-serif;
	color: #111;
	font-size: 13px;
	transition: max-height 320ms ease, padding 220ms ease;
	white-space: normal;
}
.net-art-item.open .net-art-caption{
	/* large max-height so most content fits; if it's larger, caption will scroll */
	max-height: 1000px;
	padding: 10px;
	overflow: auto;
}
.net-art-item .net-art-caption .close-hint{font-size:12px;color:#555;margin-top:6px}

/* club image: smaller, centered variant */
.net-art-club{width:50%;margin:0 auto;display:block}

@media (max-width:700px){
	.net-art-gallery{position:static;width:100%;gap:8px}
	.swag-left-wrapper{display:none} /* hide swag on small screens to save space */
}

/* top-right home link that appears on most pages and links to swag.html */
.home-link{position:fixed;top:12px;right:12px;z-index:99999;display:block;border:0;background:transparent;padding:0;cursor:pointer}
.home-link img{width:64px;height:auto;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.45))}

@media (max-width:700px){
    .home-link{right:8px;top:8px}
    .home-link img{width:48px}
}