/* SiS Pepernoten-Radio. Everything drawn in CSS; no images, fonts or external files. */
.sisr {
	--sisr-navy: #000034;
	--sisr-red: #be202e;
	--sisr-red-dark: #8e1520;
	--sisr-wood: #8a4a20;
	--sisr-wood-dark: #5a2c10;
	--sisr-cream: #f7ead0;
	--sisr-gold: #e7b23c;
	--sisr-nut: #b8732f;
	--sisr-focus: #ffcf3f;
	max-width: 920px;
	margin: 24px auto 0;
	padding: 34px 6px 40px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.3;
	color: var(--sisr-navy);
	text-align: center;
	-webkit-tap-highlight-color: transparent;
}
.sisr *, .sisr *::before, .sisr *::after { box-sizing: border-box; }

/* Reset the theme's button styling inside the radio. */
.sisr button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	cursor: pointer;
	min-width: 0;
	height: auto;
	width: auto;
	opacity: 1;
	border-radius: 0 !important; /* Salient sets 4px !important on every button */
}
.sisr :focus { outline: none; }
.sisr :focus-visible,
.sisr button:focus-visible {
	outline: 4px solid var(--sisr-focus);
	outline-offset: 3px;
	box-shadow: 0 0 0 9px var(--sisr-navy);
}

.sisr .sisr-sr {
	display: block !important;
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- cabinet ---- */
.sisr-radio { position: relative; }
.sisr-antenna {
	position: absolute;
	right: 18%;
	top: -30px;
	width: 5px;
	height: 70px;
	background: linear-gradient(90deg, #8d8d8d, #e9e9e9 45%, #7a7a7a);
	border-radius: 3px;
	transform: rotate(28deg);
	transform-origin: bottom center;
	z-index: 0;
}
.sisr-antenna::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -14px;
	width: 22px;
	height: 20px;
	margin-left: -11px;
	border-radius: 48% 52% 50% 50% / 55% 55% 45% 45%;
	background:
		radial-gradient(circle at 30% 35%, #7a3d12 0 2px, transparent 3px),
		radial-gradient(circle at 65% 60%, #7a3d12 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 40% 30%, #e0a060, var(--sisr-nut) 55%, #7c4317);
}
.sisr-cabinet {
	position: relative;
	z-index: 1;
	padding: 46px 18px 22px;
	border-radius: 44px 44px 22px 22px;
	background:
		repeating-linear-gradient(92deg, rgba(255,255,255,.04) 0 6px, rgba(0,0,0,.05) 6px 9px, transparent 9px 17px),
		linear-gradient(180deg, #a0592a, var(--sisr-wood) 40%, var(--sisr-wood-dark));
	box-shadow:
		inset 0 3px 0 rgba(255,255,255,.25),
		inset 0 -6px 0 rgba(0,0,0,.25),
		0 14px 0 -4px #3d1c08,
		0 22px 34px rgba(0,0,52,.28);
}
.sisr-plate {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	padding: 5px 16px;
	border-radius: 999px;
	background: linear-gradient(180deg, #f8d77a, var(--sisr-gold) 60%, #b98420);
	color: var(--sisr-navy);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.sisr .sisr-sticker {
	position: absolute;
	left: -10px;
	top: -22px;
	width: 84px !important; /* the theme sets width:auto / height:auto on images in columns */
	height: 84px !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0;
	border-radius: 50%;
	border: 5px solid #fff;
	background: #fff;
	object-fit: cover;
	transform: rotate(-9deg);
	box-shadow: 0 6px 12px rgba(0,0,0,.3);
	z-index: 3;
	pointer-events: none;
}
.sisr .sisr-sticker[hidden] { display: none; }

.sisr-face {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 18px;
	padding: 16px;
	border-radius: 26px;
	background: linear-gradient(180deg, #fbf1dc, var(--sisr-cream));
	box-shadow: inset 0 0 0 4px #e2c99a, inset 0 6px 14px rgba(90,44,16,.25);
}

/* ---- speaker grille with pepernoten ---- */
.sisr-grille {
	position: relative;
	border-radius: 22px;
	padding: 10px;
	background: linear-gradient(180deg, #c99c55, #9c6f2f);
	box-shadow: inset 0 3px 8px rgba(0,0,0,.35);
	min-height: 230px;
}
.sisr-cloth {
	position: absolute;
	inset: 10px;
	border-radius: 16px;
	overflow: hidden;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
	place-items: center;
	padding: 6px;
	background:
		repeating-linear-gradient(0deg, rgba(90,50,10,.22) 0 2px, transparent 2px 6px),
		repeating-linear-gradient(90deg, rgba(90,50,10,.22) 0 2px, transparent 2px 6px),
		linear-gradient(180deg, #ecd39c, #d9b571);
	box-shadow: inset 0 0 18px rgba(80,40,0,.35);
}
.sisr-nut {
	display: block;
	width: 34px;
	height: 31px;
	border-radius: 48% 52% 50% 50% / 56% 54% 46% 44%;
	background:
		radial-gradient(circle at 28% 38%, #6e3510 0 2px, transparent 2.6px),
		radial-gradient(circle at 62% 30%, #6e3510 0 1.6px, transparent 2.2px),
		radial-gradient(circle at 55% 66%, #6e3510 0 2.2px, transparent 2.8px),
		radial-gradient(circle at 34% 30%, #e7a866, var(--sisr-nut) 52%, #7c4317 92%);
	box-shadow: 0 3px 3px rgba(60,30,5,.35);
	will-change: transform;
}
.sisr-nut:nth-child(3n+2) { width: 30px; height: 28px; }
.sisr-nut:nth-child(4n+1) { border-radius: 52% 48% 46% 54% / 50% 56% 44% 50%; }

/* ---- tuning dial ---- */
.sisr-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sisr-dial {
	position: relative;
	height: 72px;
	border-radius: 16px;
	background: linear-gradient(180deg, #3b210f, #25130a);
	padding: 6px;
	box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.6);
}
.sisr-scale {
	position: relative;
	display: flex;
	gap: 2px;
	height: 60px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	border-radius: 11px;
	padding: 0 6px;
	background:
		repeating-linear-gradient(90deg, rgba(0,0,52,.45) 0 1px, transparent 1px 10px) bottom / 100% 10px no-repeat,
		linear-gradient(180deg, #fff6cf, #f1d98e);
	box-shadow: inset 0 0 10px rgba(160,100,0,.45);
	-webkit-overflow-scrolling: touch;
}
.sisr-scale::-webkit-scrollbar { display: none; }
.sisr .sisr-year {
	flex: 1 0 52px;
	min-width: 52px;
	height: 48px;
	margin-top: 2px;
	border-radius: 10px !important;
	background: transparent;
	color: var(--sisr-navy);
	font-weight: 800;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
}
.sisr .sisr-year {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.sisr-dots { display: flex; gap: 1px; height: 3px; max-width: 44px; }
.sisr-dots span { display: block; width: 3px; height: 3px; border-radius: 50%; background: rgba(0,0,52,.5); }
.sisr .sisr-year[aria-pressed="true"] .sisr-dots span { background: var(--sisr-red); }
.sisr .sisr-year:hover { background: rgba(190,32,46,.1); }
.sisr .sisr-year[aria-pressed="true"] {
	color: var(--sisr-red);
	font-size: 19px;
	text-shadow: 0 0 10px rgba(255,190,60,.9);
}
.sisr .sisr-year:focus-visible { box-shadow: none; outline-offset: -4px; }
.sisr-needle {
	position: absolute;
	left: 0;
	top: 3px;
	bottom: 3px;
	width: 4px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--sisr-red);
	box-shadow: 0 0 6px rgba(190,32,46,.8);
	pointer-events: none;
	opacity: 0;
	transition: transform .35s cubic-bezier(.3,1.4,.5,1), opacity .2s;
}
.sisr-ready .sisr-needle { opacity: 1; }

/* ---- lichtkrant ---- */
.sisr-display {
	position: relative;
	height: 82px;
	overflow: hidden;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	padding-top: 8px;
	background:
		radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.6px) 0 0 / 5px 5px,
		var(--sisr-navy);
	box-shadow: inset 0 3px 8px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.6);
	color: #ffb648;
	font: 700 22px/48px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	text-shadow: 0 0 6px rgba(255,170,40,.85);
	white-space: nowrap;
	text-align: left;
}
.sisr-display-top {
	display: block;
	height: 22px;
	padding: 0 14px;
	font-size: 15px;
	line-height: 22px;
	color: #ffd88f;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sisr-display-line { position: relative; display: block; height: 48px; overflow: hidden; }
.sisr-marquee {
	position: absolute;
	left: 0;
	top: 0;
	white-space: nowrap;
	will-change: transform;
}
.sisr-display.sisr-fits .sisr-marquee,
.sisr-display:not(.sisr-fits) .sisr-marquee:not(.sisr-scroll) {
	position: static;
	display: block;
	padding: 0 14px;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sisr-marquee.sisr-scroll { animation: sisr-scroll linear infinite; }
@keyframes sisr-scroll {
	from { transform: translateX(var(--sisr-from, 100%)); }
	to { transform: translateX(var(--sisr-to, -100%)); }
}

/* ---- buttons ---- */
.sisr-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
}
.sisr .sisr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50% !important;
	background: linear-gradient(180deg, #fffaf0, #e8d4ad);
	color: var(--sisr-navy);
	box-shadow: 0 5px 0 #a98a55, 0 8px 12px rgba(0,0,0,.25);
	transition: transform .08s, box-shadow .08s;
}
.sisr .sisr-btn svg { width: 28px; height: 28px; fill: currentColor; }
.sisr .sisr-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #a98a55, 0 3px 6px rgba(0,0,0,.25); }
.sisr .sisr-play {
	width: 92px;
	height: 92px;
	color: #fff;
	background: radial-gradient(circle at 35% 30%, #f2525f, var(--sisr-red) 55%, var(--sisr-red-dark));
	box-shadow: 0 7px 0 #6d0f18, 0 12px 18px rgba(0,0,0,.3);
}
.sisr .sisr-play svg { width: 44px; height: 44px; }
.sisr .sisr-play:active { box-shadow: 0 2px 0 #6d0f18, 0 4px 8px rgba(0,0,0,.3); transform: translateY(5px); }
.sisr .sisr-i-pause { display: none; }
.sisr-on .sisr-play .sisr-i-play { display: none; }
.sisr-on .sisr-play .sisr-i-pause { display: block; }
.sisr-on .sisr-play { box-shadow: 0 7px 0 #6d0f18, 0 0 0 6px rgba(255,190,60,.55), 0 12px 18px rgba(0,0,0,.3); }

/* ---- pepernoot knobs ---- */
.sisr-knobs { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 0 4px; }
.sisr-knobwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sisr-knob {
	--sisr-rot: 0deg;
	position: relative;
	width: 74px;
	height: 70px;
	cursor: grab;
	touch-action: none;
	border-radius: 48% 52% 50% 50% / 55% 53% 47% 45%;
	filter: drop-shadow(0 5px 3px rgba(60,30,5,.4));
}
.sisr-knob:active { cursor: grabbing; }
.sisr-knob-face {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	transform: rotate(var(--sisr-rot));
	transition: transform .3s cubic-bezier(.3,1.4,.5,1);
	background:
		radial-gradient(circle at 25% 40%, #6e3510 0 2.5px, transparent 3.2px),
		radial-gradient(circle at 70% 30%, #6e3510 0 2px, transparent 2.6px),
		radial-gradient(circle at 60% 72%, #6e3510 0 2.6px, transparent 3.3px),
		radial-gradient(circle at 38% 68%, #6e3510 0 1.6px, transparent 2.2px),
		radial-gradient(circle at 34% 30%, #eaae6c, var(--sisr-nut) 50%, #74400f 95%);
}
.sisr-knob-face::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 6px;
	width: 8px;
	height: 18px;
	margin-left: -4px;
	border-radius: 4px;
	background: var(--sisr-cream);
	box-shadow: inset 0 0 0 2px var(--sisr-red);
}
.sisr-knob-label { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b3c18; }

/* ---- feet and the surprise button ---- */
.sisr-feet { display: flex; justify-content: space-between; padding: 0 12%; height: 16px; }
.sisr-feet span { width: 60px; height: 14px; border-radius: 0 0 14px 14px; background: #2b1405; }
.sisr .sisr-surprise {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	padding: 8px;
	border-radius: 50% !important;
	background: radial-gradient(circle at 35% 30%, #fff1b8, var(--sisr-gold) 55%, #b98420);
	color: var(--sisr-navy);
	font-size: 18px;
	font-weight: 900;
	line-height: 1.05;
	text-align: center;
	white-space: normal;
	box-shadow: 0 6px 0 #8d6a16, 0 10px 14px rgba(0,0,0,.3);
	transition: transform .08s, box-shadow .08s;
}
.sisr .sisr-surprise:active { transform: translateY(5px); box-shadow: 0 1px 0 #8d6a16, 0 4px 8px rgba(0,0,0,.3); }

/* ---- zenderlijst: the songs of the current station ---- */
.sisr-list {
	margin-top: 22px;
	padding: 16px;
	border-radius: 22px;
	background: var(--sisr-cream);
	color: var(--sisr-navy);
	text-align: left;
	box-shadow: inset 0 0 0 4px #e2c99a, 0 10px 20px rgba(0,0,0,.25);
}
.sisr-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 0 4px; }
.sisr-list-title { font-size: 22px; font-weight: 900; color: var(--sisr-navy); }
.sisr-list-count { padding: 5px 12px; border-radius: 999px; background: var(--sisr-red); color: #fff; font-size: 15px; font-weight: 800; white-space: nowrap; }
.sisr .sisr-songs, .sisr .sisr-songs li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.sisr .sisr-songs li::before, .sisr .sisr-songs li::marker { content: none; }
.sisr .sisr-songs { display: flex; flex-wrap: wrap; gap: 8px !important; }
.sisr .sisr-song {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	max-width: 100%;
	padding: 6px 18px 6px 6px;
	border-radius: 999px !important;
	background: #fff;
	color: var(--sisr-navy);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	box-shadow: inset 0 0 0 2px #e2c99a, 0 3px 0 #d6bb88;
}
.sisr .sisr-song:hover { box-shadow: inset 0 0 0 2px var(--sisr-red), 0 3px 0 #d6bb88; }
.sisr-song-nr {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--sisr-navy);
	color: #fff;
	font-size: 16px;
	font-weight: 800;
}
.sisr .sisr-song.sisr-cur { background: var(--sisr-red); color: #fff; box-shadow: 0 3px 0 var(--sisr-red-dark); }
.sisr .sisr-song.sisr-cur .sisr-song-nr { background: var(--sisr-gold); color: var(--sisr-navy); }
.sisr-on .sisr-song[aria-current="true"] .sisr-song-t::after { content: " \266A"; }

.sisr-wiggle { animation: sisr-wiggle .6s ease-in-out; }
@keyframes sisr-wiggle {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(-2deg) scale(1.01); }
	40% { transform: rotate(2deg) scale(1.02); }
	60% { transform: rotate(-1.5deg); }
	80% { transform: rotate(1deg); }
}

.sisr-error { padding: 12px 16px; border-radius: 8px; background: #fff3f3; color: var(--sisr-red); font-weight: 600; }

/* ---- phones ---- */
@media (max-width: 719px) {
	.sisr { padding-top: 30px; }
	.sisr-cabinet { padding: 44px 10px 16px; border-radius: 34px 34px 18px 18px; }
	.sisr-face { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 14px; }
	.sisr-grille { min-height: 150px; }
	.sisr-cloth { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); }
	.sisr-nut { width: 28px; height: 26px; }
	.sisr-nut:nth-child(3n+2) { width: 25px; height: 23px; }
	.sisr .sisr-sticker { width: 64px !important; height: 64px !important; left: -4px; top: -18px; border-width: 4px; }
	.sisr-display { font-size: 20px; }
	.sisr-controls { gap: 18px; }
	.sisr-knob { width: 64px; height: 61px; }
	.sisr .sisr-surprise { width: 88px; height: 88px; font-size: 17px; }
	.sisr-list { padding: 12px; }
	.sisr .sisr-song { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.sisr-needle, .sisr-knob-face, .sisr .sisr-btn, .sisr .sisr-surprise { transition: none; }
	.sisr-marquee.sisr-scroll, .sisr-wiggle { animation: none; }
}