/* ===========================================
   STORM.CSS - Sturmbetrieben shared styles
   =========================================== */

/* --- LOCAL FONTS (DSGVO-konform, kein Google-CDN) --- */
@font-face {
	font-family: 'Press Start 2P';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/press-start-2p-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Press Start 2P';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/press-start-2p-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'VT323';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/vt323-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'VT323';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/vt323-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
	--gold: #FFBC01;
	--gold-dark: #e5a800;
	--gold-glow: #ffd24d;
	--cream: #FFF6DE;
	--dark: #282525;
	--grey: #5a5555;
	--px: 4px;

	/* Comics accent */
	--cyan: #00D4FF;
	--cyan-dark: #00b8db;
	--cyan-glow: #66e5ff;
	--cyan-cream: #E0F7FF;

	/* Chaos pages */
	--magenta: #FF00AA;
	--magenta-dark: #cc0088;
	--magenta-glow: #ff55cc;
	--magenta-bg: #1a0012;
}

html { height: 100%; scroll-behavior: smooth; margin-top: 0 !important; }
#wpadminbar { display: none !important; }

body {
	font-family: 'VT323', monospace;
	color: var(--dark);
	background: var(--gold);
	overflow-x: hidden;
	min-height: 100vh;
	position: relative;
	transition: background-color 0.05s linear;
}

/* ==========================================
   HERO SECTION (full viewport)
   ========================================== */
.sb-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	position: relative;
}

.sb-scroll-hint {
	position: absolute;
	bottom: 30px;
	font-family: 'VT323', monospace;
	font-size: 18px;
	color: var(--dark);
	opacity: 0.4;
	letter-spacing: 2px;
	animation: hint-pulse 2s ease-in-out infinite;
	z-index: 2;
}
.sb-scroll-hint span {
	display: block;
	animation: hint-bounce 2s ease-in-out infinite;
}
@keyframes hint-pulse {
	0%, 100% { opacity: 0.2; }
	50% { opacity: 0.5; }
}
@keyframes hint-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

/* ==========================================
   RAIN
   ========================================== */
.rain {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	contain: strict;
}

.drop {
	position: absolute;
	width: 2px;
	background: linear-gradient(180deg, transparent, rgba(40,37,37,0.15));
	animation: fall linear infinite;
	will-change: transform;
}

@keyframes fall {
	0% { transform: translateY(-100vh); }
	100% { transform: translateY(100vh); }
}

@media (prefers-reduced-motion: reduce) {
	.drop { animation: none !important; opacity: 0 !important; }
	.lightning { animation: none !important; opacity: 0 !important; }
	.bolt-container { animation: none !important; opacity: 0 !important; }
	.wind-streak { animation: none !important; opacity: 0 !important; }
	.cloud { animation: none !important; }
	.sb-headline { animation: none !important; }
	.sb-drip { animation: none !important; }
	.sb-sfx { animation: none !important; opacity: 0 !important; }
	.sb-scroll-hint { animation: none !important; }
	.sb-scroll-hint span { animation: none !important; }
	.sb-chaos { display: none !important; }
}

/* ==========================================
   LIGHTNING FLASH
   ========================================== */
.lightning {
	position: fixed;
	inset: 0;
	background: rgba(255,255,255,0);
	pointer-events: none;
	z-index: 10;
	animation: lightning-flash 8s ease-in-out infinite;
	will-change: background;
}

@keyframes lightning-flash {
	0%, 100% { background: rgba(255,255,255,0); }
	42% { background: rgba(255,255,255,0); }
	42.5% { background: rgba(255,255,255,0.7); }
	43% { background: rgba(255,255,255,0); }
	43.5% { background: rgba(255,255,255,0.3); }
	44% { background: rgba(255,255,255,0); }
}

/* ==========================================
   PIXEL LIGHTNING BOLT (CSS)
   ========================================== */
.bolt-container {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	animation: bolt-appear 8s ease-in-out infinite;
	will-change: opacity;
}

@keyframes bolt-appear {
	0%, 100% { opacity: 0; }
	42% { opacity: 0; }
	42.3% { opacity: 1; }
	43.2% { opacity: 1; }
	43.5% { opacity: 0; }
	43.6% { opacity: 0.6; }
	44.2% { opacity: 0; }
}

.bolt {
	position: absolute;
	top: 0; left: 0;
	width: var(--px);
	height: var(--px);
	background: transparent;
	/* A jagged pixel lightning bolt from top of screen */
	box-shadow:
		/* Segment 1: top */
		calc(0*var(--px)) calc(0*var(--px)) 0 0 #fff,
		calc(1*var(--px)) calc(0*var(--px)) 0 0 #fff,
		calc(1*var(--px)) calc(1*var(--px)) 0 0 #fff,
		calc(2*var(--px)) calc(1*var(--px)) 0 0 #fff,
		calc(2*var(--px)) calc(2*var(--px)) 0 0 #fff,
		calc(2*var(--px)) calc(3*var(--px)) 0 0 #fff,
		calc(1*var(--px)) calc(3*var(--px)) 0 0 #fff,
		calc(1*var(--px)) calc(4*var(--px)) 0 0 #fff,
		calc(0*var(--px)) calc(4*var(--px)) 0 0 #fff,
		calc(0*var(--px)) calc(5*var(--px)) 0 0 #fff,
		calc(-1*var(--px)) calc(5*var(--px)) 0 0 #fff,
		calc(-1*var(--px)) calc(6*var(--px)) 0 0 #fff,
		calc(0*var(--px)) calc(6*var(--px)) 0 0 #fff,
		/* Zag right */
		calc(0*var(--px)) calc(7*var(--px)) 0 0 #fff,
		calc(1*var(--px)) calc(7*var(--px)) 0 0 #fff,
		calc(1*var(--px)) calc(8*var(--px)) 0 0 #fff,
		calc(2*var(--px)) calc(8*var(--px)) 0 0 #fff,
		calc(3*var(--px)) calc(8*var(--px)) 0 0 #fff,
		calc(3*var(--px)) calc(9*var(--px)) 0 0 #fff,
		calc(2*var(--px)) calc(9*var(--px)) 0 0 #fff,
		calc(2*var(--px)) calc(10*var(--px)) 0 0 #fff,
		calc(1*var(--px)) calc(10*var(--px)) 0 0 #fff,
		calc(1*var(--px)) calc(11*var(--px)) 0 0 #fff,
		calc(0*var(--px)) calc(11*var(--px)) 0 0 #fff,
		calc(0*var(--px)) calc(12*var(--px)) 0 0 #fff,
		calc(-1*var(--px)) calc(12*var(--px)) 0 0 #fff,
		calc(-1*var(--px)) calc(13*var(--px)) 0 0 #fff,
		calc(-2*var(--px)) calc(13*var(--px)) 0 0 #fff,
		calc(-2*var(--px)) calc(14*var(--px)) 0 0 #fff,
		/* Down */
		calc(-1*var(--px)) calc(14*var(--px)) 0 0 #fff,
		calc(-1*var(--px)) calc(15*var(--px)) 0 0 #fff,
		calc(0*var(--px)) calc(15*var(--px)) 0 0 #fff,
		calc(0*var(--px)) calc(16*var(--px)) 0 0 #fff,
		calc(1*var(--px)) calc(16*var(--px)) 0 0 #fff,
		calc(1*var(--px)) calc(17*var(--px)) 0 0 #fff,
		calc(2*var(--px)) calc(17*var(--px)) 0 0 #fff,
		calc(2*var(--px)) calc(18*var(--px)) 0 0 #fff,
		calc(3*var(--px)) calc(18*var(--px)) 0 0 #fff,
		calc(3*var(--px)) calc(19*var(--px)) 0 0 #fff,
		calc(2*var(--px)) calc(19*var(--px)) 0 0 #fff,
		calc(2*var(--px)) calc(20*var(--px)) 0 0 #fff,
		calc(1*var(--px)) calc(20*var(--px)) 0 0 #fff,
		/* Glow pixels (gold) */
		calc(-1*var(--px)) calc(0*var(--px)) 0 0 var(--gold-glow),
		calc(2*var(--px)) calc(0*var(--px)) 0 0 var(--gold-glow),
		calc(3*var(--px)) calc(2*var(--px)) 0 0 var(--gold-glow),
		calc(-2*var(--px)) calc(6*var(--px)) 0 0 var(--gold-glow),
		calc(4*var(--px)) calc(9*var(--px)) 0 0 var(--gold-glow),
		calc(-3*var(--px)) calc(13*var(--px)) 0 0 var(--gold-glow),
		calc(4*var(--px)) calc(18*var(--px)) 0 0 var(--gold-glow),
		calc(0*var(--px)) calc(21*var(--px)) 0 0 var(--gold-glow);
}

/* ==========================================
   MAIN CONTENT
   ========================================== */
.sb-main {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 20px;
	width: 100%;
	max-width: 900px;
}

/* ==========================================
   PIXEL STORM CLOUD
   ========================================== */
.cloud-container {
	margin: 0 auto 30px;
	position: relative;
	--cpx: 6px;
	width: calc(24 * var(--cpx));
	height: calc(12 * var(--cpx));
}

.cloud {
	position: absolute;
	top: 0; left: 0;
	width: var(--cpx);
	height: var(--cpx);
	background: transparent;
	box-shadow:
		/* Cloud body - dark angry storm cloud */
		calc(8*var(--cpx)) calc(2*var(--cpx)) 0 0 #3a3535,
		calc(9*var(--cpx)) calc(2*var(--cpx)) 0 0 #3a3535,
		calc(10*var(--cpx)) calc(2*var(--cpx)) 0 0 #3a3535,
		calc(11*var(--cpx)) calc(1*var(--cpx)) 0 0 #3a3535,
		calc(12*var(--cpx)) calc(1*var(--cpx)) 0 0 #4a4545,
		calc(13*var(--cpx)) calc(1*var(--cpx)) 0 0 #4a4545,
		calc(14*var(--cpx)) calc(1*var(--cpx)) 0 0 #3a3535,
		calc(15*var(--cpx)) calc(2*var(--cpx)) 0 0 #3a3535,
		calc(7*var(--cpx)) calc(3*var(--cpx)) 0 0 #3a3535,
		calc(6*var(--cpx)) calc(3*var(--cpx)) 0 0 #4a4545,
		calc(5*var(--cpx)) calc(3*var(--cpx)) 0 0 #3a3535,
		calc(8*var(--cpx)) calc(3*var(--cpx)) 0 0 #4a4545,
		calc(9*var(--cpx)) calc(3*var(--cpx)) 0 0 #555,
		calc(10*var(--cpx)) calc(3*var(--cpx)) 0 0 #555,
		calc(11*var(--cpx)) calc(2*var(--cpx)) 0 0 #4a4545,
		calc(12*var(--cpx)) calc(2*var(--cpx)) 0 0 #555,
		calc(13*var(--cpx)) calc(2*var(--cpx)) 0 0 #555,
		calc(14*var(--cpx)) calc(2*var(--cpx)) 0 0 #4a4545,
		calc(15*var(--cpx)) calc(3*var(--cpx)) 0 0 #4a4545,
		calc(16*var(--cpx)) calc(3*var(--cpx)) 0 0 #3a3535,
		calc(17*var(--cpx)) calc(3*var(--cpx)) 0 0 #3a3535,
		calc(11*var(--cpx)) calc(3*var(--cpx)) 0 0 #555,
		calc(12*var(--cpx)) calc(3*var(--cpx)) 0 0 #666,
		calc(13*var(--cpx)) calc(3*var(--cpx)) 0 0 #555,
		calc(14*var(--cpx)) calc(3*var(--cpx)) 0 0 #555,
		/* Middle row */
		calc(4*var(--cpx)) calc(4*var(--cpx)) 0 0 #3a3535,
		calc(5*var(--cpx)) calc(4*var(--cpx)) 0 0 #4a4545,
		calc(6*var(--cpx)) calc(4*var(--cpx)) 0 0 #555,
		calc(7*var(--cpx)) calc(4*var(--cpx)) 0 0 #555,
		calc(8*var(--cpx)) calc(4*var(--cpx)) 0 0 #666,
		calc(9*var(--cpx)) calc(4*var(--cpx)) 0 0 #666,
		calc(10*var(--cpx)) calc(4*var(--cpx)) 0 0 #666,
		calc(11*var(--cpx)) calc(4*var(--cpx)) 0 0 #777,
		calc(12*var(--cpx)) calc(4*var(--cpx)) 0 0 #777,
		calc(13*var(--cpx)) calc(4*var(--cpx)) 0 0 #666,
		calc(14*var(--cpx)) calc(4*var(--cpx)) 0 0 #666,
		calc(15*var(--cpx)) calc(4*var(--cpx)) 0 0 #555,
		calc(16*var(--cpx)) calc(4*var(--cpx)) 0 0 #555,
		calc(17*var(--cpx)) calc(4*var(--cpx)) 0 0 #4a4545,
		calc(18*var(--cpx)) calc(4*var(--cpx)) 0 0 #3a3535,
		/* Bottom - dark underbelly */
		calc(4*var(--cpx)) calc(5*var(--cpx)) 0 0 #2a2525,
		calc(5*var(--cpx)) calc(5*var(--cpx)) 0 0 #333,
		calc(6*var(--cpx)) calc(5*var(--cpx)) 0 0 #3a3535,
		calc(7*var(--cpx)) calc(5*var(--cpx)) 0 0 #3a3535,
		calc(8*var(--cpx)) calc(5*var(--cpx)) 0 0 #444,
		calc(9*var(--cpx)) calc(5*var(--cpx)) 0 0 #444,
		calc(10*var(--cpx)) calc(5*var(--cpx)) 0 0 #4a4545,
		calc(11*var(--cpx)) calc(5*var(--cpx)) 0 0 #4a4545,
		calc(12*var(--cpx)) calc(5*var(--cpx)) 0 0 #4a4545,
		calc(13*var(--cpx)) calc(5*var(--cpx)) 0 0 #444,
		calc(14*var(--cpx)) calc(5*var(--cpx)) 0 0 #444,
		calc(15*var(--cpx)) calc(5*var(--cpx)) 0 0 #3a3535,
		calc(16*var(--cpx)) calc(5*var(--cpx)) 0 0 #3a3535,
		calc(17*var(--cpx)) calc(5*var(--cpx)) 0 0 #333,
		calc(18*var(--cpx)) calc(5*var(--cpx)) 0 0 #2a2525,
		/* Very bottom fringe */
		calc(5*var(--cpx)) calc(6*var(--cpx)) 0 0 #2a2525,
		calc(6*var(--cpx)) calc(6*var(--cpx)) 0 0 #2a2525,
		calc(7*var(--cpx)) calc(6*var(--cpx)) 0 0 #333,
		calc(8*var(--cpx)) calc(6*var(--cpx)) 0 0 #333,
		calc(9*var(--cpx)) calc(6*var(--cpx)) 0 0 #3a3535,
		calc(10*var(--cpx)) calc(6*var(--cpx)) 0 0 #3a3535,
		calc(11*var(--cpx)) calc(6*var(--cpx)) 0 0 #3a3535,
		calc(12*var(--cpx)) calc(6*var(--cpx)) 0 0 #3a3535,
		calc(13*var(--cpx)) calc(6*var(--cpx)) 0 0 #333,
		calc(14*var(--cpx)) calc(6*var(--cpx)) 0 0 #333,
		calc(15*var(--cpx)) calc(6*var(--cpx)) 0 0 #2a2525,
		calc(16*var(--cpx)) calc(6*var(--cpx)) 0 0 #2a2525,
		/* Wind streaks on left */
		calc(1*var(--cpx)) calc(4*var(--cpx)) 0 0 rgba(40,37,37,0.3),
		calc(2*var(--cpx)) calc(4*var(--cpx)) 0 0 rgba(40,37,37,0.2),
		calc(19*var(--cpx)) calc(4*var(--cpx)) 0 0 rgba(40,37,37,0.3),
		calc(20*var(--cpx)) calc(4*var(--cpx)) 0 0 rgba(40,37,37,0.2),
		calc(0*var(--cpx)) calc(5*var(--cpx)) 0 0 rgba(40,37,37,0.15),
		calc(1*var(--cpx)) calc(5*var(--cpx)) 0 0 rgba(40,37,37,0.25),
		calc(2*var(--cpx)) calc(5*var(--cpx)) 0 0 rgba(40,37,37,0.3),
		calc(3*var(--cpx)) calc(5*var(--cpx)) 0 0 rgba(40,37,37,0.35),
		calc(19*var(--cpx)) calc(5*var(--cpx)) 0 0 rgba(40,37,37,0.35),
		calc(20*var(--cpx)) calc(5*var(--cpx)) 0 0 rgba(40,37,37,0.25),
		calc(21*var(--cpx)) calc(5*var(--cpx)) 0 0 rgba(40,37,37,0.15);
	animation: cloud-drift 6s ease-in-out infinite;
}

@keyframes cloud-drift {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(calc(3 * var(--cpx))); }
}

/* ==========================================
   HEADLINE - Graffiti style, pixel-edged
   ========================================== */
.sb-headline {
	font-family: 'Press Start 2P', monospace;
	font-size: clamp(22px, 6vw, 58px);
	color: var(--dark);
	text-transform: uppercase;
	letter-spacing: clamp(2px, 0.5vw, 6px);
	line-height: 1.3;
	position: relative;
	display: inline-block;
	/* Graffiti drip shadow */
	text-shadow:
		3px 3px 0 var(--gold-dark),
		6px 6px 0 rgba(40,37,37,0.15);
	animation: headline-glitch 8s ease-in-out infinite;
}

/* On lightning flash, the headline goes white */
@keyframes headline-glitch {
	0%, 100% { color: var(--dark); text-shadow: 3px 3px 0 var(--gold-dark), 6px 6px 0 rgba(40,37,37,0.15); }
	42% { color: var(--dark); }
	42.5% { color: #fff; text-shadow: 3px 3px 0 var(--gold), 0 0 30px rgba(255,255,255,0.6), 0 0 60px var(--gold-glow); }
	43% { color: var(--dark); text-shadow: 3px 3px 0 var(--gold-dark), 6px 6px 0 rgba(40,37,37,0.15); }
	43.5% { color: #fff; text-shadow: 3px 3px 0 var(--gold), 0 0 20px rgba(255,255,255,0.4); }
	44% { color: var(--dark); text-shadow: 3px 3px 0 var(--gold-dark), 6px 6px 0 rgba(40,37,37,0.15); }
}

/* Graffiti drip effect under the text */
.sb-drips {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-top: -4px;
	padding-left: 40px;
}

.sb-drip {
	width: 4px;
	background: var(--dark);
	border-radius: 0 0 2px 2px;
	animation: drip-grow 4s ease-in forwards;
	opacity: 0.6;
}

@keyframes drip-grow {
	0% { height: 0; }
	100% { height: var(--drip-h); }
}

/* ==========================================
   TAGLINE
   ========================================== */
.sb-tagline {
	font-family: 'VT323', monospace;
	font-size: 22px;
	color: var(--dark);
	margin: 30px auto 0;
	letter-spacing: 1px;
	opacity: 0.65;
	max-width: 520px;
	line-height: 1.4;
	text-align: center;
}

/* ==========================================
   DISCOGS LINK - spray painted stencil feel
   ========================================== */
.sb-link-row {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.sb-stencil {
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	color: var(--dark);
	text-decoration: none;
	letter-spacing: 2px;
	padding: 14px 22px;
	border: 3px solid var(--dark);
	position: relative;
	transition: color 0.15s, background 0.15s;
	background: transparent;
}

.sb-stencil:hover {
	background: var(--dark);
	color: var(--gold);
}

.sb-stencil:active {
	transform: translate(2px, 2px);
}

/* Paint splatter dot on the button */
.sb-stencil::after {
	content: "";
	position: absolute;
	width: 6px; height: 6px;
	background: var(--dark);
	border-radius: 50%;
	top: -4px; right: -4px;
	opacity: 0.4;
}

/* ==========================================
   PIXEL WIND STREAKS (animated)
   ========================================== */
.wind {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	contain: strict;
}

.wind-streak {
	position: absolute;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(40,37,37,0.12), transparent);
	animation: wind-blow linear infinite;
	will-change: transform;
}

@keyframes wind-blow {
	0% { transform: translateX(-200px); opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { transform: translateX(calc(100vw + 200px)); opacity: 0; }
}

/* ==========================================
   BLOG SECTION
   ========================================== */
.sb-blog {
	position: relative;
	z-index: 2;
	max-width: 800px;
	margin: 0 auto;
	padding: 60px 20px 80px;
}

.sb-blog-header {
	font-family: 'Press Start 2P', monospace;
	font-size: clamp(12px, 3vw, 18px);
	color: var(--fg, var(--dark));
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 40px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--fg, var(--dark));
	opacity: 0.8;
}

.sb-post {
	background: var(--card-bg, var(--cream));
	border: 3px solid var(--card-border, var(--dark));
	padding: 28px 24px 24px;
	margin-bottom: 28px;
	position: relative;
	transition: background 0.05s linear, border-color 0.05s linear;
}

.sb-post::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 30px;
	width: 50px;
	height: 12px;
	background: var(--tape, rgba(40,37,37,0.12));
	transform: rotate(-2deg);
}

.sb-post::after {
	content: "";
	position: absolute;
	top: -5px;
	right: 40px;
	width: 40px;
	height: 12px;
	background: var(--tape-light, rgba(40,37,37,0.08));
	transform: rotate(1.5deg);
}

.sb-post:nth-child(odd) {
	transform: rotate(-0.3deg);
}
.sb-post:nth-child(even) {
	transform: rotate(0.4deg);
}

.sb-post-date {
	font-family: 'VT323', monospace;
	font-size: 16px;
	color: var(--card-muted, var(--grey));
	letter-spacing: 1px;
	margin-bottom: 6px;
}

.sb-post-title {
	font-family: 'Press Start 2P', monospace;
	font-size: clamp(10px, 2vw, 14px);
	color: var(--card-text, var(--dark));
	line-height: 1.6;
	margin-bottom: 12px;
}

.sb-post-title a {
	color: var(--card-text, var(--dark));
	text-decoration: none;
}
.sb-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.sb-post-excerpt {
	font-family: 'VT323', monospace;
	font-size: 22px;
	line-height: 1.4;
	color: var(--card-muted, var(--grey));
}

.sb-post-read {
	display: inline-block;
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	color: var(--card-text, var(--dark));
	text-decoration: none;
	letter-spacing: 1px;
	padding: 8px 14px;
	border: 2px solid var(--card-border, var(--dark));
	margin-top: 14px;
	transition: background 0.15s, color 0.15s;
}
.sb-post-read:hover {
	background: var(--card-text, var(--dark));
	color: var(--gold);
}

.sb-no-posts {
	font-family: 'VT323', monospace;
	font-size: 24px;
	color: var(--grey);
	text-align: center;
	padding: 40px 0;
}

/* ==========================================
   BLOG GRID - Two-column Comics/Platten
   ========================================== */
.sb-blog-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}
/* Single-column mode (when Comics is hidden) */
.sb-blog-grid--single {
	grid-template-columns: 1fr;
	max-width: 640px;
	margin: 0 auto;
}

.sb-col-header {
	font-family: 'Press Start 2P', monospace;
	font-size: clamp(9px, 2vw, 12px);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 20px;
	padding-bottom: 8px;
	border-bottom: 2px solid;
	opacity: 0.7;
}

.sb-col-header--comics {
	color: var(--accent-cyan, var(--cyan));
	border-bottom-color: var(--accent-cyan, var(--cyan));
}

.sb-col-header--platten {
	color: var(--accent-gold, var(--gold));
	border-bottom-color: var(--accent-gold, var(--gold));
}

/* Category accent stripe on post cards */
.sb-post--comics {
	border-left: 4px solid var(--accent-cyan, var(--cyan));
}

.sb-post--platten {
	border-left: 4px solid var(--accent-gold, var(--gold));
}

/* Category badges (archive page) */
.sb-post-badge {
	font-family: 'Press Start 2P', monospace;
	font-size: 7px;
	letter-spacing: 1px;
	padding: 2px 6px;
	margin-right: 8px;
	vertical-align: middle;
	display: inline-block;
}

.sb-post-badge--comics {
	background: var(--cyan);
	color: var(--dark);
}

.sb-post-badge--platten {
	background: var(--gold);
	color: var(--dark);
}

/* Category label on single posts */
.sb-single-cat {
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	letter-spacing: 2px;
	margin-right: 12px;
}

/* CTA button area on single posts */
.sb-single-cta {
	margin-top: 40px;
	text-align: center;
}

/* ==========================================
   FOOTER
   ========================================== */
.sb-foot {
	text-align: center;
	padding: 20px;
	font-family: 'VT323', monospace;
	font-size: 16px;
	color: var(--magenta);
	z-index: 2;
}

.sb-foot-links {
	margin-bottom: 10px;
}

.sb-foot-nav {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 0;
	margin: 0;
	flex-wrap: wrap;
}

.sb-foot-nav li a {
	font-family: 'VT323', monospace;
	font-size: 16px;
	color: var(--magenta);
	text-decoration: none;
	opacity: 0.7;
	transition: opacity 0.15s, color 0.15s;
}

.sb-foot-nav li a:hover {
	opacity: 1;
	color: var(--magenta-glow);
}

.sb-foot-nav li + li::before {
	content: " \00b7 ";
	color: var(--magenta);
	opacity: 0.4;
	margin-right: 8px;
}

.sb-foot-copy {
	font-size: 14px;
	opacity: 0.4;
	color: var(--magenta);
}

/* ==========================================
   NAVIGATION BAR
   ========================================== */
.sb-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px;
	transition: background 0.3s, opacity 0.3s;
}

/* On homepage: hidden initially, JS adds --visible */
.home .sb-nav { opacity: 0; pointer-events: none; }
.home .sb-nav--visible { opacity: 1; pointer-events: auto; background: rgba(42,37,37,0.92); }

/* On subpages: always visible (override critical CSS transform) */
body:not(.home) .sb-nav { background: rgba(42,37,37,0.95); transform: translateY(0); }

.sb-nav-logo {
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	color: var(--gold);
	text-decoration: none;
	letter-spacing: 2px;
	white-space: nowrap;
}

.sb-nav-links {
	list-style: none;
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
}

.sb-nav-links li a {
	font-family: 'VT323', monospace;
	font-size: 22px;
	color: var(--cream);
	text-decoration: none;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: color 0.15s;
}

.sb-nav-links li a:hover,
.sb-nav-links li.current-menu-item a {
	color: var(--gold);
}

/* Burger menu (nav bar, mobile only) */
.sb-nav-burger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.sb-nav-burger span {
	display: block;
	width: 24px;
	height: 3px;
	background: var(--cream);
	margin: 4px 0;
	transition: transform 0.2s;
}

/* ==========================================
   HERO BURGER - visible on homepage pre-scroll
   ========================================== */
.sb-hero-burger {
	position: fixed;
	top: 16px;
	right: 20px;
	z-index: 101;
	background: none;
	border: 3px solid var(--dark);
	cursor: pointer;
	padding: 10px 9px;
	display: none;
	transition: border-color 0.2s, opacity 0.3s;
}

.home .sb-hero-burger {
	display: block;
}

.sb-hero-burger--hidden {
	opacity: 0 !important;
	pointer-events: none !important;
}

.sb-hero-burger span {
	display: block;
	width: 22px;
	height: 3px;
	background: var(--dark);
	margin: 4px 0;
	transition: transform 0.15s, opacity 0.15s;
}

/* Glitch on hover */
.sb-hero-burger:hover {
	animation: burger-glitch 0.4s steps(2) infinite;
	border-color: var(--gold-dark);
}

.sb-hero-burger:hover span:nth-child(1) {
	animation: burger-line-1 0.3s steps(3) infinite;
}
.sb-hero-burger:hover span:nth-child(2) {
	animation: burger-line-2 0.25s steps(2) infinite;
}
.sb-hero-burger:hover span:nth-child(3) {
	animation: burger-line-3 0.35s steps(3) infinite;
}

@keyframes burger-glitch {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-2px, 1px); }
	50% { transform: translate(1px, -1px); }
	75% { transform: translate(2px, 0); }
	100% { transform: translate(-1px, 1px); }
}

@keyframes burger-line-1 {
	0% { transform: translateX(0); background: var(--dark); }
	33% { transform: translateX(3px); background: var(--cyan); }
	66% { transform: translateX(-2px); background: var(--gold-dark); }
	100% { transform: translateX(0); background: var(--dark); }
}

@keyframes burger-line-2 {
	0% { transform: translateX(0) scaleX(1); }
	50% { transform: translateX(-3px) scaleX(0.7); background: var(--gold-dark); }
	100% { transform: translateX(1px) scaleX(1); }
}

@keyframes burger-line-3 {
	0% { transform: translateX(0); background: var(--dark); }
	33% { transform: translateX(-2px); background: var(--gold-dark); }
	66% { transform: translateX(4px); background: var(--cyan); }
	100% { transform: translateX(0); background: var(--dark); }
}

body:not(.home) .sb-hero-burger {
	display: none;
}

/* Mobile overlay */
.sb-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(42,37,37,0.97);
	z-index: 200;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}

.sb-nav-overlay--open {
	opacity: 1;
	pointer-events: auto;
}

.sb-nav-overlay .sb-nav-links {
	flex-direction: column;
	gap: 32px;
	text-align: center;
}

.sb-nav-overlay .sb-nav-links li a {
	font-size: 28px;
}

.sb-nav-close {
	position: absolute;
	top: 14px;
	right: 24px;
	background: none;
	border: none;
	font-family: 'VT323', monospace;
	font-size: 32px;
	color: var(--cream);
	cursor: pointer;
}

/* ==========================================
   INTRO SECTION (kept for backward compat)
   ========================================== */
.sb-intro {
	position: relative;
	z-index: 2;
	max-width: 680px;
	margin: 0 auto;
	padding: 50px 24px 20px;
	text-align: center;
}

.sb-intro-text {
	font-family: 'VT323', monospace;
	font-size: 24px;
	line-height: 1.5;
	color: var(--fg, var(--dark));
	opacity: 0.75;
	letter-spacing: 0.5px;
}

/* ==========================================
   BLOG "MORE" LINK
   ========================================== */
.sb-blog-more {
	text-align: center;
	margin-top: 32px;
}

/* ==========================================
   BLOG ARCHIVE MODIFIER
   ========================================== */
.sb-blog--archive {
	padding-top: 100px;
}

/* ==========================================
   PAGINATION
   ========================================== */
.sb-pagination {
	text-align: center;
	margin-top: 40px;
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
}

.sb-pagination a,
.sb-pagination span {
	display: inline-block;
	padding: 8px 12px;
	margin: 0 4px;
	border: 2px solid var(--card-border, var(--cream));
	color: var(--card-text, var(--cream));
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.sb-pagination .current {
	background: var(--gold);
	color: var(--dark);
	border-color: var(--gold);
}

.sb-pagination a:hover {
	background: var(--cream);
	color: var(--dark);
}

/* ==========================================
   GENERIC PAGE TEMPLATE
   ========================================== */
.sb-page {
	position: relative;
	z-index: 2;
	max-width: 800px;
	margin: 0 auto;
	padding: 100px 20px 80px;
}

.sb-page-card {
	background: var(--cream);
	border: 3px solid rgba(136,136,136,0.5);
	padding: 40px 32px;
	position: relative;
}

.sb-page-card::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 30px;
	width: 60px;
	height: 12px;
	background: rgba(180,175,170,0.2);
	transform: rotate(-1.5deg);
}

.sb-page-card::after {
	content: "";
	position: absolute;
	top: -5px;
	right: 35px;
	width: 45px;
	height: 12px;
	background: rgba(180,175,170,0.15);
	transform: rotate(1deg);
}

.sb-page-title {
	font-family: 'Press Start 2P', monospace;
	font-size: clamp(12px, 3vw, 20px);
	color: var(--dark);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 28px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--dark);
}

.sb-page-content {
	font-family: 'VT323', monospace;
	font-size: 22px;
	line-height: 1.5;
	color: var(--dark);
}

.sb-page-content p { margin-bottom: 16px; }
.sb-page-content a { color: var(--dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sb-page-content a:hover { color: var(--gold-dark); }
.sb-page-content h2,
.sb-page-content h3 {
	font-family: 'Press Start 2P', monospace;
	font-size: clamp(10px, 2.5vw, 14px);
	margin: 28px 0 12px;
	letter-spacing: 1px;
}
.sb-page-content ul,
.sb-page-content ol { margin: 0 0 16px 24px; }
.sb-page-content li { margin-bottom: 6px; }
.sb-page-content img { max-width: 100%; border: 3px solid rgba(40,37,37,0.15); margin: 16px 0; }

/* Form inputs inside pages (for contact forms) */
.sb-page-content input[type="text"],
.sb-page-content input[type="email"],
.sb-page-content textarea,
.sb-page-content select {
	font-family: 'VT323', monospace;
	font-size: 20px;
	background: rgba(255,246,222,0.5);
	border: 2px solid var(--dark);
	padding: 10px 12px;
	width: 100%;
	margin-bottom: 12px;
	color: var(--dark);
}

.sb-page-content input[type="submit"],
.sb-page-content button {
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	color: var(--dark);
	letter-spacing: 1px;
	padding: 12px 20px;
	border: 2px solid var(--dark);
	background: transparent;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.sb-page-content input[type="submit"]:hover,
.sb-page-content button:hover {
	background: var(--dark);
	color: var(--gold);
}

/* ==========================================
   SHOP / WOOCOMMERCE / DISCOGS
   ========================================== */
.sb-shop {
	position: relative;
	z-index: 2;
	max-width: 1100px;
	margin: 0 auto;
	padding: 80px 24px 60px;
	min-height: 80vh;
}

.sb-shop-title {
	font-family: 'Press Start 2P', monospace;
	font-size: clamp(14px, 3vw, 22px);
	color: var(--cream);
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 3px solid var(--cream);
	opacity: 0.85;
}

.sb-shop-content {
	color: var(--cream);
}

/* Discogs Seller Inventory block */
.discogs-seller-inventory {
	color: var(--cream);
}

.discogs-seller-inventory h2,
.discogs-seller-inventory h3 {
	font-family: 'Press Start 2P', monospace;
	color: var(--gold);
	font-size: clamp(10px, 2vw, 14px);
	letter-spacing: 2px;
	margin-bottom: 20px;
}

/* Sorting controls */
.discogs-sorting {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
	padding: 16px;
	background: rgba(255, 246, 222, 0.06);
	border: 2px solid rgba(255, 246, 222, 0.12);
}

.discogs-sorting label {
	font-family: 'VT323', monospace;
	font-size: 18px;
	color: var(--cream);
}

.discogs-sorting select {
	font-family: 'VT323', monospace;
	font-size: 18px;
	background: rgba(40, 37, 37, 0.8);
	color: var(--cream);
	border: 2px solid rgba(255, 246, 222, 0.2);
	padding: 6px 10px;
	cursor: pointer;
}

.discogs-sorting select:hover,
.discogs-sorting select:focus {
	border-color: var(--gold);
}

/* Inventory cards grid */
.discogs-layout-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

.discogs-layout-cards > div,
.discogs-layout-cards > article,
.discogs-layout-cards > li {
	background: var(--cream);
	border: 3px solid var(--dark);
	padding: 0;
	overflow: hidden;
	transition: transform 0.15s;
}

.discogs-layout-cards > div:hover,
.discogs-layout-cards > article:hover,
.discogs-layout-cards > li:hover {
	transform: translateY(-3px);
}

/* Release image */
.discogs-release-image {
	width: 100%;
	overflow: hidden;
}

.discogs-release-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Release titles */
.discogs-release-titles {
	padding: 16px;
	color: var(--dark);
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	line-height: 1.6;
	letter-spacing: 1px;
}

.discogs-release-titles a {
	color: var(--dark);
	text-decoration: none;
}

.discogs-release-titles a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Release info / description */
.discogs-release-information {
	padding: 0 16px 12px;
	color: var(--dark);
	font-family: 'VT323', monospace;
	font-size: 20px;
	line-height: 1.4;
	opacity: 0.8;
}

/* Release meta (format, year, grading, etc) */
.discogs-release-meta {
	padding: 0 16px 16px;
	font-family: 'VT323', monospace;
	font-size: 17px;
	color: var(--grey);
	line-height: 1.5;
}

.discogs-release-meta-grading {
	color: var(--dark);
	font-weight: bold;
}

.discogs-release-meta-offers {
	color: var(--dark);
	font-family: 'Press Start 2P', monospace;
	font-size: 14px;
	padding: 8px 0;
}

/* Purchase button */
.discogs-purchase-button {
	display: block;
	padding: 14px 16px;
	background: var(--dark);
	color: var(--gold);
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	letter-spacing: 2px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.15s, color 0.15s;
	border-top: 3px solid var(--dark);
}

.discogs-purchase-button:hover {
	background: var(--gold);
	color: var(--dark);
}

.discogs-purchase-button a {
	color: inherit;
	text-decoration: none;
}

/* WooCommerce overrides (notices, breadcrumbs) */
.woocommerce-result-count,
.woocommerce-ordering,
.woocommerce-info,
.woocommerce-notice {
	font-family: 'VT323', monospace;
	font-size: 20px;
	color: var(--cream);
}

.woocommerce-info {
	background: rgba(255, 246, 222, 0.06);
	border-left: 4px solid var(--gold);
	padding: 16px 20px;
	margin-bottom: 24px;
}

/* ==========================================
   CHAOS PAGE OVERRIDES (magenta background)
   ========================================== */
body.page-chaos {
	background: var(--magenta-bg) !important;
}

body.page-chaos .sb-page-card {
	background: rgba(30, 5, 25, 0.85);
	border-color: var(--magenta-dark);
	color: var(--cream);
}

body.page-chaos .sb-page-title {
	color: var(--magenta);
	border-bottom-color: var(--magenta);
}

body.page-chaos .sb-page-content {
	color: rgba(255, 246, 222, 0.9);
}

body.page-chaos .sb-page-content a {
	color: var(--magenta);
}

body.page-chaos .sb-page-content a:hover {
	color: var(--magenta-glow);
}

body.page-chaos .sb-page-content h2,
body.page-chaos .sb-page-content h3 {
	color: var(--magenta-glow);
}

body.page-chaos .sb-page-card::before {
	background: rgba(255, 0, 170, 0.15);
}

body.page-chaos .sb-page-card::after {
	background: rgba(255, 0, 170, 0.1);
}

body.page-chaos .sb-foot { color: var(--magenta-glow); }
body.page-chaos .sb-foot-nav li a { color: var(--magenta-glow); }
body.page-chaos .sb-foot-nav li a:hover { color: var(--cream); }
body.page-chaos .sb-foot-nav li + li::before { color: var(--magenta-glow); }
body.page-chaos .sb-foot-copy { color: var(--magenta-glow); }

/* ==========================================
   SINGLE POST TEMPLATE
   ========================================== */
.sb-single {
	position: relative;
	z-index: 2;
	max-width: 850px;
	margin: 0 auto;
	padding: 100px 20px 80px;
}

.sb-single-date {
	font-family: 'VT323', monospace;
	font-size: 18px;
	color: #aaa59f;
	letter-spacing: 1px;
}

.sb-single-title {
	font-family: 'Press Start 2P', monospace;
	font-size: clamp(12px, 3vw, 22px);
	color: var(--cream);
	line-height: 1.5;
	margin: 16px 0 32px;
}

.sb-single-body {
	font-family: 'VT323', monospace;
	font-size: 24px;
	line-height: 1.5;
	color: var(--cream);
}

.sb-single-body p { margin-bottom: 20px; }
.sb-single-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.sb-single-body a:hover { color: var(--gold-glow); }
.sb-single-body h2,
.sb-single-body h3 {
	font-family: 'Press Start 2P', monospace;
	font-size: clamp(10px, 2.5vw, 16px);
	margin: 32px 0 16px;
	letter-spacing: 1px;
}
.sb-single-body img { max-width: 100%; border: 3px solid rgba(136,136,136,0.3); margin: 20px 0; }
.sb-single-body blockquote {
	border-left: 4px solid var(--gold);
	padding-left: 20px;
	margin: 20px 0;
	opacity: 0.8;
}
.sb-single-body ul,
.sb-single-body ol { margin: 0 0 20px 24px; }
.sb-single-body li { margin-bottom: 8px; }

.sb-single-tags {
	font-family: 'VT323', monospace;
	font-size: 16px;
	color: #aaa59f;
	margin-top: 40px;
	padding-top: 16px;
	border-top: 2px solid rgba(136,136,136,0.3);
}

.sb-single-tags a {
	color: var(--gold);
	text-decoration: none;
}

/* "Mehr Platten" / "Mehr Comics" heading above nav */
.sb-single-nav-heading {
	font-family: 'Press Start 2P', monospace;
	font-size: 8px;
	color: var(--gold);
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 2px solid rgba(136,136,136,0.3);
	margin-bottom: 0;
}

/* Prev/Next navigation within category */
.sb-single-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 14px;
	padding-top: 0;
}
.sb-single-nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--cream);
	font-family: 'VT323', monospace;
	font-size: 20px;
	line-height: 1.3;
	width: 45%;
	min-width: 0;
	transition: color 0.2s;
}
.sb-single-nav-link:hover { color: var(--gold); }
.sb-single-nav-link--prev { justify-content: flex-start; }
.sb-single-nav-link--next { justify-content: flex-end; text-align: right; margin-left: auto; }
.sb-single-nav-link--disabled { visibility: hidden; width: 45%; }
.sb-single-nav-arrow {
	font-family: 'Press Start 2P', monospace;
	font-size: 10px;
	color: var(--gold);
	flex-shrink: 0;
}
.sb-single-nav-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
@media (max-width: 520px) {
	.sb-single-nav { flex-direction: column; gap: 14px; }
	.sb-single-nav-link { width: 100%; }
	.sb-single-nav-link--prev { justify-content: flex-start; }
	.sb-single-nav-link--next { justify-content: flex-start; text-align: left; margin-left: 0; flex-direction: row-reverse; }
	.sb-single-nav-link--disabled { display: none; }
}

.sb-single-back {
	margin-top: 24px;
	text-align: center;
}

/* Album cover on Platten single posts */
.sb-single-cover {
	margin: 0 0 32px;
	text-align: center;
}
.sb-cover-img {
	max-width: 400px;
	width: 100%;
	height: auto;
	border: 3px solid rgba(136,136,136,0.3);
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
@media (max-width: 520px) {
	.sb-cover-img { max-width: 100%; }
}

/* Privatverkaufshinweis */
.sb-private-sale {
	margin: 24px 0 0;
	font-family: 'VT323', monospace;
	font-size: 18px;
	color: #fff;
	text-align: center;
	opacity: 0.65;
}

/* ==========================================
   404 PAGE
   ========================================== */
.sb-404 .sb-headline {
	font-size: clamp(50px, 12vw, 120px);
}

.sb-404 .sb-tagline {
	font-size: clamp(16px, 3vw, 24px);
}

/* ==========================================
   BRIGHT STENCIL (for dark backgrounds)
   ========================================== */
.sb-stencil--bright {
	color: var(--gold);
	border-color: var(--gold);
}
.sb-stencil--bright::after {
	background: var(--gold);
}
.sb-stencil--bright:hover {
	background: var(--gold);
	color: var(--dark);
}

/* ==========================================
   CATEGORY: COMICS - Cyan storm variant
   ========================================== */
body.category-comics .sb-single-title {
	color: var(--cyan-cream);
}

body.category-comics .sb-single-body {
	color: var(--cyan-cream);
}

body.category-comics .sb-single-body a {
	color: var(--cyan);
}

body.category-comics .sb-single-body a:hover {
	color: var(--cyan-glow);
}

body.category-comics .sb-single-body blockquote {
	border-left-color: var(--cyan);
}

body.category-comics .sb-single-tags a {
	color: var(--cyan);
}

body.category-comics .sb-single-cat {
	color: var(--cyan);
}

body.category-comics .sb-stencil--bright {
	color: var(--cyan);
	border-color: var(--cyan);
}

body.category-comics .sb-stencil--bright::after {
	background: var(--cyan);
}

body.category-comics .sb-stencil--bright:hover {
	background: var(--cyan);
	color: var(--dark);
}

/* CATEGORY: PLATTEN - Default gold (no overrides needed) */
body.category-platten .sb-single-cat {
	color: var(--gold);
}

/* ==========================================
   CATEGORY ARCHIVE PAGES
   ========================================== */
.sb-cat-desc {
	font-family: 'VT323', monospace;
	font-size: 22px;
	line-height: 1.4;
	color: var(--cream);
	opacity: 0.6;
	margin: -28px 0 32px;
	letter-spacing: 0.5px;
}

/* Comics archive: cyan accents */
.sb-cat--comics .sb-blog-header {
	color: var(--cyan);
	border-bottom-color: var(--cyan);
}

.sb-cat--comics .sb-post {
	border-left: 4px solid var(--cyan);
}

.sb-cat--comics .sb-post-title a:hover {
	text-decoration-color: var(--cyan);
}

.sb-cat--comics .sb-post-read:hover {
	background: var(--cyan);
	color: var(--dark);
}

.sb-cat--comics .sb-stencil--bright {
	color: var(--cyan);
	border-color: var(--cyan);
}

.sb-cat--comics .sb-stencil--bright::after {
	background: var(--cyan);
}

.sb-cat--comics .sb-stencil--bright:hover {
	background: var(--cyan);
	color: var(--dark);
}

/* Platten archive: gold accents (default, but explicit for clarity) */
.sb-cat--platten .sb-blog-header {
	color: var(--gold);
	border-bottom-color: var(--gold);
}

.sb-cat--platten .sb-post {
	border-left: 4px solid var(--gold);
}

/* ==========================================
   COMIC SOUND EFFECTS
   ========================================== */
.sb-sfx {
	position: fixed;
	font-family: 'Press Start 2P', monospace;
	pointer-events: none;
	z-index: 3;
	opacity: 0;
	text-transform: uppercase;
	transform: rotate(var(--sfx-rot, -8deg)) scale(0.8);
}

.sb-sfx--1 {
	top: 10%;
	right: 5%;
	font-size: clamp(18px, 4vw, 38px);
	color: rgba(40,37,37,0.07);
	--sfx-rot: -12deg;
	animation: sfx-flash-1 8s ease-in-out infinite;
}

.sb-sfx--2 {
	top: 25%;
	left: 3%;
	font-size: clamp(14px, 3vw, 26px);
	color: rgba(40,37,37,0.06);
	--sfx-rot: 6deg;
	animation: sfx-flash-2 8s ease-in-out infinite;
}

.sb-sfx--3 {
	bottom: 32%;
	right: 6%;
	font-size: clamp(16px, 3.5vw, 32px);
	color: rgba(40,37,37,0.06);
	--sfx-rot: -4deg;
	animation: sfx-flash-3 12s ease-in-out infinite;
}

.sb-sfx--4 {
	bottom: 15%;
	left: 5%;
	font-size: clamp(10px, 2vw, 18px);
	color: rgba(40,37,37,0.05);
	--sfx-rot: 10deg;
	animation: sfx-float 5s ease-in-out infinite;
}

.sb-sfx--5 {
	top: 50%;
	right: 3%;
	font-size: clamp(10px, 2vw, 18px);
	color: rgba(40,37,37,0.05);
	--sfx-rot: -3deg;
	animation: sfx-float 6s ease-in-out infinite 1.5s;
}

.sb-sfx--6 {
	top: 42%;
	left: 7%;
	font-size: clamp(16px, 3.5vw, 30px);
	color: rgba(40,37,37,0.06);
	--sfx-rot: 8deg;
	animation: sfx-flash-4 10s ease-in-out infinite;
}

.sb-sfx--7 {
	top: 68%;
	right: 10%;
	font-size: clamp(10px, 2vw, 20px);
	color: rgba(40,37,37,0.05);
	--sfx-rot: -7deg;
	animation: sfx-float 7s ease-in-out infinite 3s;
}

.sb-sfx--8 {
	bottom: 45%;
	left: 12%;
	font-size: clamp(14px, 3vw, 26px);
	color: rgba(40,37,37,0.06);
	--sfx-rot: 5deg;
	animation: sfx-flash-1 8s ease-in-out infinite 4s;
}

/* Flash with lightning - sustained glow so you can read them */
@keyframes sfx-flash-1 {
	0%, 100% { opacity: 0; transform: rotate(-12deg) scale(0.8); }
	41.5% { opacity: 0; }
	42% { opacity: 0.9; transform: rotate(-12deg) scale(1.1); color: #fff; text-shadow: 0 0 20px var(--gold-glow); }
	46% { opacity: 0.8; transform: rotate(-12deg) scale(1.05); color: #fff; text-shadow: 0 0 14px var(--gold-glow); }
	49% { opacity: 0.4; transform: rotate(-12deg) scale(1.0); color: rgba(255,255,255,0.6); text-shadow: 0 0 8px var(--gold-glow); }
	52% { opacity: 0; }
}

@keyframes sfx-flash-2 {
	0%, 100% { opacity: 0; transform: rotate(6deg) scale(0.8); }
	42% { opacity: 0; }
	42.5% { opacity: 0.85; transform: rotate(6deg) scale(1.05); color: #fff; text-shadow: 0 0 15px var(--gold-glow); }
	46.5% { opacity: 0.7; transform: rotate(6deg) scale(1); color: #fff; text-shadow: 0 0 10px var(--gold-glow); }
	49.5% { opacity: 0.35; transform: rotate(6deg) scale(0.95); color: rgba(255,255,255,0.5); text-shadow: 0 0 6px var(--gold-glow); }
	52% { opacity: 0; }
}

@keyframes sfx-flash-3 {
	0%, 100% { opacity: 0; transform: rotate(-4deg) scale(0.8); }
	37.5% { opacity: 0; }
	38% { opacity: 0.75; transform: rotate(-4deg) scale(1.08); color: rgba(255,255,255,0.9); text-shadow: 0 0 12px var(--gold-glow); }
	42% { opacity: 0.6; transform: rotate(-4deg) scale(1.02); color: rgba(255,255,255,0.7); text-shadow: 0 0 8px var(--gold-glow); }
	45.5% { opacity: 0.3; transform: rotate(-4deg) scale(0.98); color: rgba(255,255,255,0.4); text-shadow: 0 0 5px var(--gold-glow); }
	48% { opacity: 0; }
}

/* 4th flash - offset timing for more chaos */
@keyframes sfx-flash-4 {
	0%, 100% { opacity: 0; transform: rotate(8deg) scale(0.8); }
	29.5% { opacity: 0; }
	30% { opacity: 0.85; transform: rotate(8deg) scale(1.12); color: #fff; text-shadow: 0 0 18px var(--gold-glow); }
	34% { opacity: 0.7; transform: rotate(8deg) scale(1.05); color: #fff; text-shadow: 0 0 12px var(--gold-glow); }
	37% { opacity: 0.35; transform: rotate(8deg) scale(1.0); color: rgba(255,255,255,0.5); text-shadow: 0 0 6px var(--gold-glow); }
	40% { opacity: 0; }
}

/* Ambient float - visible enough to notice */
@keyframes sfx-float {
	0%, 100% { opacity: 0.08; transform: rotate(var(--sfx-rot)) translateY(0); }
	50% { opacity: 0.18; transform: rotate(var(--sfx-rot)) translateY(-8px); }
}

/* ==========================================
   PAGE CHAOS - creatures, effects, madness
   ========================================== */
.sb-chaos {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 50;
	overflow: hidden;
	contain: layout style;
}

/* --- SCREEN SHAKE --- */
.sb-screenshake {
	animation: screenshake 0.4s ease-out;
}

@keyframes screenshake {
	0% { transform: translate(0, 0); }
	10% { transform: translate(-6px, 3px); }
	20% { transform: translate(5px, -4px); }
	30% { transform: translate(-4px, 2px); }
	40% { transform: translate(3px, -2px); }
	50% { transform: translate(-2px, 4px); }
	60% { transform: translate(4px, -1px); }
	70% { transform: translate(-1px, 3px); }
	80% { transform: translate(2px, -2px); }
	90% { transform: translate(-1px, 1px); }
	100% { transform: translate(0, 0); }
}

.sb-shake {
	animation: card-shake 0.5s ease-out;
}

@keyframes card-shake {
	0% { transform: rotate(0deg); }
	15% { transform: rotate(-1.5deg) translateX(-4px); }
	30% { transform: rotate(1deg) translateX(3px); }
	45% { transform: rotate(-0.5deg); }
	60% { transform: rotate(0.3deg) translateX(2px); }
	100% { transform: rotate(0deg); }
}

/* --- PAGE GLITCH --- */
.sb-page-glitch {
	animation: page-glitch 0.2s steps(4) infinite;
}

@keyframes page-glitch {
	0% { transform: translate(0, 0) skewX(0deg); clip-path: inset(0 0 0 0); }
	25% { transform: translate(-3px, 1px) skewX(-0.5deg); clip-path: inset(5% 0 10% 0); }
	50% { transform: translate(2px, -2px) skewX(0.3deg); clip-path: inset(15% 0 5% 0); }
	75% { transform: translate(-1px, 2px) skewX(-0.2deg); clip-path: inset(2% 0 20% 0); }
	100% { transform: translate(0, 0) skewX(0deg); clip-path: inset(0 0 0 0); }
}

/* --- PIXEL DOLPHIN --- */
.sb-px-dolphin {
	position: absolute;
	--px: 4px;
}

.sb-px-dolphin-body {
	width: var(--px);
	height: var(--px);
	background: transparent;
	box-shadow:
		/* body */
		calc(4*var(--px)) calc(0*var(--px)) 0 0 #4488cc,
		calc(5*var(--px)) calc(0*var(--px)) 0 0 #4488cc,
		calc(6*var(--px)) calc(0*var(--px)) 0 0 #4488cc,
		calc(3*var(--px)) calc(1*var(--px)) 0 0 #5599dd,
		calc(4*var(--px)) calc(1*var(--px)) 0 0 #66aaee,
		calc(5*var(--px)) calc(1*var(--px)) 0 0 #77bbee,
		calc(6*var(--px)) calc(1*var(--px)) 0 0 #66aaee,
		calc(7*var(--px)) calc(1*var(--px)) 0 0 #5599dd,
		calc(8*var(--px)) calc(1*var(--px)) 0 0 #4488cc,
		calc(2*var(--px)) calc(2*var(--px)) 0 0 #4488cc,
		calc(3*var(--px)) calc(2*var(--px)) 0 0 #66aaee,
		calc(4*var(--px)) calc(2*var(--px)) 0 0 #88ccff,
		calc(5*var(--px)) calc(2*var(--px)) 0 0 #99ddff,
		calc(6*var(--px)) calc(2*var(--px)) 0 0 #88ccff,
		calc(7*var(--px)) calc(2*var(--px)) 0 0 #66aaee,
		calc(8*var(--px)) calc(2*var(--px)) 0 0 #5599dd,
		calc(9*var(--px)) calc(2*var(--px)) 0 0 #4488cc,
		/* belly */
		calc(1*var(--px)) calc(3*var(--px)) 0 0 #4488cc,
		calc(2*var(--px)) calc(3*var(--px)) 0 0 #5599dd,
		calc(3*var(--px)) calc(3*var(--px)) 0 0 #88ccff,
		calc(4*var(--px)) calc(3*var(--px)) 0 0 #aaddff,
		calc(5*var(--px)) calc(3*var(--px)) 0 0 #aaddff,
		calc(6*var(--px)) calc(3*var(--px)) 0 0 #88ccff,
		calc(7*var(--px)) calc(3*var(--px)) 0 0 #5599dd,
		calc(8*var(--px)) calc(3*var(--px)) 0 0 #4488cc,
		/* nose + tail */
		calc(0*var(--px)) calc(4*var(--px)) 0 0 #4488cc,
		calc(1*var(--px)) calc(4*var(--px)) 0 0 #5599dd,
		calc(2*var(--px)) calc(4*var(--px)) 0 0 #77bbee,
		calc(3*var(--px)) calc(4*var(--px)) 0 0 #aaddff,
		calc(4*var(--px)) calc(4*var(--px)) 0 0 #cceeff,
		calc(5*var(--px)) calc(4*var(--px)) 0 0 #aaddff,
		calc(6*var(--px)) calc(4*var(--px)) 0 0 #77bbee,
		calc(7*var(--px)) calc(4*var(--px)) 0 0 #5599dd,
		calc(10*var(--px)) calc(2*var(--px)) 0 0 #3377aa,
		calc(11*var(--px)) calc(1*var(--px)) 0 0 #3377aa,
		calc(11*var(--px)) calc(3*var(--px)) 0 0 #3377aa,
		/* eye */
		calc(2*var(--px)) calc(2*var(--px)) 0 0 #111,
		/* fin (top) */
		calc(5*var(--px)) calc(-1*var(--px)) 0 0 #3377aa,
		calc(6*var(--px)) calc(-1*var(--px)) 0 0 #4488cc;
}

/* --- PIXEL ORC --- */
.sb-px-orc {
	position: absolute;
	--px: 5px;
	transition: transform 0.1s;
}

.sb-px-orc-body {
	width: var(--px);
	height: var(--px);
	background: transparent;
	box-shadow:
		/* head */
		calc(3*var(--px)) calc(0*var(--px)) 0 0 #3a5a2a,
		calc(4*var(--px)) calc(0*var(--px)) 0 0 #4a6a3a,
		calc(5*var(--px)) calc(0*var(--px)) 0 0 #3a5a2a,
		calc(2*var(--px)) calc(1*var(--px)) 0 0 #3a5a2a,
		calc(3*var(--px)) calc(1*var(--px)) 0 0 #5a8a4a,
		calc(4*var(--px)) calc(1*var(--px)) 0 0 #6a9a5a,
		calc(5*var(--px)) calc(1*var(--px)) 0 0 #5a8a4a,
		calc(6*var(--px)) calc(1*var(--px)) 0 0 #3a5a2a,
		/* eyes */
		calc(3*var(--px)) calc(2*var(--px)) 0 0 #ff2222,
		calc(5*var(--px)) calc(2*var(--px)) 0 0 #ff2222,
		calc(4*var(--px)) calc(2*var(--px)) 0 0 #6a9a5a,
		calc(2*var(--px)) calc(2*var(--px)) 0 0 #4a6a3a,
		calc(6*var(--px)) calc(2*var(--px)) 0 0 #4a6a3a,
		/* mouth / tusks */
		calc(3*var(--px)) calc(3*var(--px)) 0 0 #4a6a3a,
		calc(4*var(--px)) calc(3*var(--px)) 0 0 #2a3a1a,
		calc(5*var(--px)) calc(3*var(--px)) 0 0 #4a6a3a,
		calc(2*var(--px)) calc(3*var(--px)) 0 0 #ffffcc,
		calc(6*var(--px)) calc(3*var(--px)) 0 0 #ffffcc,
		/* body */
		calc(3*var(--px)) calc(4*var(--px)) 0 0 #5a3a2a,
		calc(4*var(--px)) calc(4*var(--px)) 0 0 #6a4a3a,
		calc(5*var(--px)) calc(4*var(--px)) 0 0 #5a3a2a,
		calc(2*var(--px)) calc(5*var(--px)) 0 0 #4a6a3a,
		calc(3*var(--px)) calc(5*var(--px)) 0 0 #6a4a3a,
		calc(4*var(--px)) calc(5*var(--px)) 0 0 #7a5a4a,
		calc(5*var(--px)) calc(5*var(--px)) 0 0 #6a4a3a,
		calc(6*var(--px)) calc(5*var(--px)) 0 0 #4a6a3a,
		calc(3*var(--px)) calc(6*var(--px)) 0 0 #5a3a2a,
		calc(4*var(--px)) calc(6*var(--px)) 0 0 #6a4a3a,
		calc(5*var(--px)) calc(6*var(--px)) 0 0 #5a3a2a,
		/* legs */
		calc(3*var(--px)) calc(7*var(--px)) 0 0 #4a6a3a,
		calc(5*var(--px)) calc(7*var(--px)) 0 0 #4a6a3a,
		calc(3*var(--px)) calc(8*var(--px)) 0 0 #3a3a2a,
		calc(5*var(--px)) calc(8*var(--px)) 0 0 #3a3a2a;
}

/* Axe - separate for rotation */
.sb-px-orc-axe {
	position: absolute;
	top: calc(-2 * 5px);
	right: calc(-3 * 5px);
	width: 5px;
	height: 5px;
	background: transparent;
	transform-origin: bottom left;
	transition: transform 0.3s;
	box-shadow:
		/* handle */
		calc(0*5px) calc(0*5px) 0 0 #8a6a3a,
		calc(0*5px) calc(1*5px) 0 0 #8a6a3a,
		calc(0*5px) calc(2*5px) 0 0 #8a6a3a,
		calc(0*5px) calc(3*5px) 0 0 #7a5a2a,
		calc(0*5px) calc(4*5px) 0 0 #7a5a2a,
		/* blade */
		calc(1*5px) calc(0*5px) 0 0 #aaaaaa,
		calc(2*5px) calc(0*5px) 0 0 #cccccc,
		calc(1*5px) calc(-1*5px) 0 0 #999999,
		calc(2*5px) calc(-1*5px) 0 0 #bbbbbb,
		calc(3*5px) calc(-1*5px) 0 0 #cccccc,
		calc(2*5px) calc(-2*5px) 0 0 #aaaaaa;
}

.sb-px-orc--windup .sb-px-orc-axe {
	transform: rotate(-60deg);
}

.sb-px-orc--smash .sb-px-orc-axe {
	transform: rotate(30deg);
	transition: transform 0.1s;
}

/* --- SCREEN CRACK --- */
.sb-px-crack {
	position: absolute;
	width: 3px;
	height: 3px;
	background: transparent;
	transition: opacity 1s;
	box-shadow:
		0 0 0 0 rgba(255,255,255,0.8),
		3px -4px 0 0 rgba(255,255,255,0.6),
		-2px -7px 0 0 rgba(255,255,255,0.5),
		5px -10px 0 0 rgba(255,255,255,0.4),
		-4px -13px 0 0 rgba(255,255,255,0.3),
		7px 3px 0 0 rgba(255,255,255,0.5),
		10px 7px 0 0 rgba(255,255,255,0.4),
		-5px 5px 0 0 rgba(255,255,255,0.4),
		-8px 9px 0 0 rgba(255,255,255,0.3),
		2px -16px 0 0 rgba(255,255,255,0.2),
		12px 3px 0 0 rgba(255,255,255,0.3),
		-10px -5px 0 0 rgba(255,255,255,0.3),
		14px -2px 0 0 rgba(255,255,255,0.2);
}

/* --- BUBBLES --- */
.sb-px-bubble {
	position: absolute;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35);
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), rgba(100,200,255,0.08));
	transition: opacity 0.3s;
}

/* --- BALLOON --- */
.sb-px-balloon {
	position: absolute;
	width: 30px;
	height: 36px;
	transition: transform 0.05s;
}

.sb-px-balloon::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	background: radial-gradient(circle at 35% 30%, #ff6666, #cc2222);
	box-shadow: inset -3px -3px 0 rgba(0,0,0,0.2), inset 4px 4px 0 rgba(255,255,255,0.2);
}

.sb-px-balloon::after {
	content: "";
	display: block;
	width: 2px;
	height: 20px;
	background: #999;
	margin: 0 auto;
}

.sb-px-balloon--pop {
	animation: balloon-pop 0.15s steps(2) forwards;
}

.sb-px-balloon--pop::before {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.sb-px-balloon--pop::after {
	display: none;
}

@keyframes balloon-pop {
	0% { transform: scale(1.2); opacity: 1; }
	100% { transform: scale(2); opacity: 0; }
}

/* --- POP PARTICLES --- */
.sb-px-particle {
	position: fixed;
	width: 4px;
	height: 4px;
	border-radius: 0;
}

/* --- PIXEL BAT --- */
.sb-px-bat {
	position: absolute;
	width: 4px;
	height: 4px;
	background: transparent;
	box-shadow:
		/* body */
		calc(0*4px) calc(0*4px) 0 0 #2a2a2a,
		calc(1*4px) calc(0*4px) 0 0 #1a1a1a,
		/* eyes */
		calc(0*4px) calc(-1*4px) 0 0 #ff4444,
		calc(1*4px) calc(-1*4px) 0 0 #ff4444,
		/* wings spread */
		calc(-1*4px) calc(-1*4px) 0 0 #333,
		calc(-2*4px) calc(-2*4px) 0 0 #333,
		calc(-3*4px) calc(-2*4px) 0 0 #222,
		calc(2*4px) calc(-1*4px) 0 0 #333,
		calc(3*4px) calc(-2*4px) 0 0 #333,
		calc(4*4px) calc(-2*4px) 0 0 #222;
}

.sb-px-bat--flap {
	box-shadow:
		calc(0*4px) calc(0*4px) 0 0 #2a2a2a,
		calc(1*4px) calc(0*4px) 0 0 #1a1a1a,
		calc(0*4px) calc(-1*4px) 0 0 #ff4444,
		calc(1*4px) calc(-1*4px) 0 0 #ff4444,
		/* wings up */
		calc(-1*4px) calc(-1*4px) 0 0 #333,
		calc(-2*4px) calc(-1*4px) 0 0 #333,
		calc(-3*4px) calc(-1*4px) 0 0 #222,
		calc(2*4px) calc(-1*4px) 0 0 #333,
		calc(3*4px) calc(-1*4px) 0 0 #333,
		calc(4*4px) calc(-1*4px) 0 0 #222;
}

/* --- SMASH TEXT --- */
.sb-smash-text {
	position: absolute;
	font-family: 'Press Start 2P', monospace;
	font-size: clamp(18px, 5vw, 40px);
	color: var(--magenta);
	text-shadow: 0 0 20px var(--magenta-glow), 2px 2px 0 var(--dark);
	animation: smash-text 1.2s ease-out forwards;
	pointer-events: none;
	z-index: 55;
}

@keyframes smash-text {
	0% { transform: scale(0.5) rotate(-5deg); opacity: 1; }
	20% { transform: scale(1.5) rotate(3deg); opacity: 1; }
	100% { transform: scale(2) rotate(0deg) translateY(-40px); opacity: 0; }
}

/* --- PIXEL DONUT --- */
.sb-px-donut {
	position: absolute;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: radial-gradient(circle at center, transparent 6px, #d4883a 6px, #d4883a 12px, transparent 12px);
	box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,0.15);
}

.sb-px-donut::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 3px;
	right: 3px;
	height: 12px;
	border-radius: 50%;
	background: #ff69b4;
	box-shadow: -2px 1px 0 #ff4488, 3px 2px 0 #ff88cc;
}

/* --- AKIRA PILLS --- */
.sb-px-pill {
	position: absolute;
	width: 8px;
	height: 14px;
	border-radius: 4px;
}

.sb-px-pill--red { background: linear-gradient(180deg, #ff3333, #cc0000); box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3); }
.sb-px-pill--blue { background: linear-gradient(180deg, #3388ff, #0044cc); box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3); }
.sb-px-pill--white { background: linear-gradient(180deg, #ffffff, #dddddd); box-shadow: inset 1px 1px 0 rgba(255,255,255,0.5); }
.sb-px-pill--green { background: linear-gradient(180deg, #33cc33, #008800); box-shadow: inset 1px 1px 0 rgba(255,255,255,0.3); }

/* --- PIXEL ASTRONAUT --- */
.sb-px-astro {
	position: absolute;
	--px: 4px;
}

.sb-px-astro-body {
	width: var(--px);
	height: var(--px);
	background: transparent;
	box-shadow:
		/* helmet */
		calc(2*var(--px)) calc(0*var(--px)) 0 0 #ddd,
		calc(3*var(--px)) calc(0*var(--px)) 0 0 #ddd,
		calc(1*var(--px)) calc(1*var(--px)) 0 0 #ddd,
		calc(2*var(--px)) calc(1*var(--px)) 0 0 #4488ff,
		calc(3*var(--px)) calc(1*var(--px)) 0 0 #4488ff,
		calc(4*var(--px)) calc(1*var(--px)) 0 0 #ddd,
		calc(1*var(--px)) calc(2*var(--px)) 0 0 #ddd,
		calc(2*var(--px)) calc(2*var(--px)) 0 0 #2266cc,
		calc(3*var(--px)) calc(2*var(--px)) 0 0 #2266cc,
		calc(4*var(--px)) calc(2*var(--px)) 0 0 #ddd,
		calc(2*var(--px)) calc(3*var(--px)) 0 0 #ccc,
		calc(3*var(--px)) calc(3*var(--px)) 0 0 #ccc,
		/* body */
		calc(1*var(--px)) calc(4*var(--px)) 0 0 #eee,
		calc(2*var(--px)) calc(4*var(--px)) 0 0 #fff,
		calc(3*var(--px)) calc(4*var(--px)) 0 0 #fff,
		calc(4*var(--px)) calc(4*var(--px)) 0 0 #eee,
		calc(1*var(--px)) calc(5*var(--px)) 0 0 #ddd,
		calc(2*var(--px)) calc(5*var(--px)) 0 0 #eee,
		calc(3*var(--px)) calc(5*var(--px)) 0 0 #eee,
		calc(4*var(--px)) calc(5*var(--px)) 0 0 #ddd,
		/* arms */
		calc(0*var(--px)) calc(4*var(--px)) 0 0 #eee,
		calc(0*var(--px)) calc(5*var(--px)) 0 0 #ddd,
		calc(5*var(--px)) calc(4*var(--px)) 0 0 #eee,
		calc(5*var(--px)) calc(5*var(--px)) 0 0 #ddd,
		/* legs */
		calc(1*var(--px)) calc(6*var(--px)) 0 0 #eee,
		calc(2*var(--px)) calc(6*var(--px)) 0 0 #ddd,
		calc(3*var(--px)) calc(6*var(--px)) 0 0 #ddd,
		calc(4*var(--px)) calc(6*var(--px)) 0 0 #eee,
		/* backpack */
		calc(5*var(--px)) calc(3*var(--px)) 0 0 #aaa,
		calc(5*var(--px)) calc(2*var(--px)) 0 0 #aaa;
}

/* --- CONFETTI --- */
.sb-px-confetti {
	position: absolute;
	border-radius: 1px;
}

/* --- PIXEL NINJA --- */
.sb-px-ninja {
	position: absolute;
	width: 4px;
	height: 4px;
	background: transparent;
	box-shadow:
		/* head */
		calc(1*4px) calc(0*4px) 0 0 #1a1a1a,
		calc(2*4px) calc(0*4px) 0 0 #1a1a1a,
		calc(0*4px) calc(1*4px) 0 0 #1a1a1a,
		calc(1*4px) calc(1*4px) 0 0 #222,
		calc(2*4px) calc(1*4px) 0 0 #222,
		calc(3*4px) calc(1*4px) 0 0 #1a1a1a,
		/* eyes */
		calc(1*4px) calc(1*4px) 0 0 #ff0000,
		calc(2*4px) calc(1*4px) 0 0 #ff0000,
		/* body */
		calc(1*4px) calc(2*4px) 0 0 #111,
		calc(2*4px) calc(2*4px) 0 0 #1a1a1a,
		calc(0*4px) calc(3*4px) 0 0 #111,
		calc(1*4px) calc(3*4px) 0 0 #1a1a1a,
		calc(2*4px) calc(3*4px) 0 0 #1a1a1a,
		calc(3*4px) calc(3*4px) 0 0 #111,
		/* legs */
		calc(1*4px) calc(4*4px) 0 0 #111,
		calc(2*4px) calc(4*4px) 0 0 #111;
}

/* --- SHURIKEN --- */
.sb-px-shuriken {
	position: absolute;
	width: 4px;
	height: 4px;
	background: transparent;
	box-shadow:
		calc(0*4px) calc(-1*4px) 0 0 #ccc,
		calc(-1*4px) calc(0*4px) 0 0 #ccc,
		calc(0*4px) calc(0*4px) 0 0 #eee,
		calc(1*4px) calc(0*4px) 0 0 #ccc,
		calc(0*4px) calc(1*4px) 0 0 #ccc;
}

/* --- PIXEL SKULL --- */
.sb-px-skull {
	position: absolute;
	width: 4px;
	height: 4px;
	background: transparent;
	box-shadow:
		/* cranium */
		calc(1*4px) calc(0*4px) 0 0 #eee,
		calc(2*4px) calc(0*4px) 0 0 #eee,
		calc(3*4px) calc(0*4px) 0 0 #eee,
		calc(0*4px) calc(1*4px) 0 0 #eee,
		calc(1*4px) calc(1*4px) 0 0 #fff,
		calc(2*4px) calc(1*4px) 0 0 #fff,
		calc(3*4px) calc(1*4px) 0 0 #fff,
		calc(4*4px) calc(1*4px) 0 0 #eee,
		/* eyes */
		calc(1*4px) calc(2*4px) 0 0 #222,
		calc(3*4px) calc(2*4px) 0 0 #222,
		calc(0*4px) calc(2*4px) 0 0 #ddd,
		calc(2*4px) calc(2*4px) 0 0 #fff,
		calc(4*4px) calc(2*4px) 0 0 #ddd,
		/* jaw */
		calc(1*4px) calc(3*4px) 0 0 #ddd,
		calc(2*4px) calc(3*4px) 0 0 #111,
		calc(3*4px) calc(3*4px) 0 0 #ddd,
		/* teeth */
		calc(1*4px) calc(4*4px) 0 0 #fff,
		calc(3*4px) calc(4*4px) 0 0 #fff;
}

/* ==========================================
   CLEARING / SUNSHINE MODE
   Aufklarendes Wetter — shown randomly instead of storm
   ========================================== */

/* Default: hide sunshine elements */
.sunshine, .pixel-sun, .pixel-rainbow { display: none; }

/* When clearing mode is active */
body.weather-clearing .lightning,
body.weather-clearing .bolt-container { display: none !important; }

body.weather-clearing .sunshine {
	display: block;
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
	contain: strict;
}

/* Sunshine particles (generated by JS, replacing rain) */
.sunmote {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,220,80,0.4), rgba(255,188,1,0.05));
	animation: sunmote-float linear infinite;
	will-change: transform;
	pointer-events: none;
}

@keyframes sunmote-float {
	0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { transform: translateY(-30vh) translateX(20px) scale(0.5); opacity: 0; }
}

/* Pixel Sun — box-shadow pixel art, top-right */
body.weather-clearing .pixel-sun {
	display: block;
	position: fixed;
	top: 60px;
	right: 8%;
	z-index: 3;
	pointer-events: none;
	animation: sun-pulse 4s ease-in-out infinite;
}

.pixel-sun-body {
	--spx: 8px;
	width: var(--spx);
	height: var(--spx);
	background: transparent;
	box-shadow:
		/* Core */
		calc(3*var(--spx)) calc(2*var(--spx)) 0 0 #FFD700,
		calc(4*var(--spx)) calc(2*var(--spx)) 0 0 #FFD700,
		calc(5*var(--spx)) calc(2*var(--spx)) 0 0 #FFD700,
		calc(2*var(--spx)) calc(3*var(--spx)) 0 0 #FFD700,
		calc(3*var(--spx)) calc(3*var(--spx)) 0 0 #FFE44D,
		calc(4*var(--spx)) calc(3*var(--spx)) 0 0 #FFF176,
		calc(5*var(--spx)) calc(3*var(--spx)) 0 0 #FFE44D,
		calc(6*var(--spx)) calc(3*var(--spx)) 0 0 #FFD700,
		calc(2*var(--spx)) calc(4*var(--spx)) 0 0 #FFD700,
		calc(3*var(--spx)) calc(4*var(--spx)) 0 0 #FFF176,
		calc(4*var(--spx)) calc(4*var(--spx)) 0 0 #FFFDE7,
		calc(5*var(--spx)) calc(4*var(--spx)) 0 0 #FFF176,
		calc(6*var(--spx)) calc(4*var(--spx)) 0 0 #FFD700,
		calc(2*var(--spx)) calc(5*var(--spx)) 0 0 #FFD700,
		calc(3*var(--spx)) calc(5*var(--spx)) 0 0 #FFE44D,
		calc(4*var(--spx)) calc(5*var(--spx)) 0 0 #FFF176,
		calc(5*var(--spx)) calc(5*var(--spx)) 0 0 #FFE44D,
		calc(6*var(--spx)) calc(5*var(--spx)) 0 0 #FFD700,
		calc(3*var(--spx)) calc(6*var(--spx)) 0 0 #FFD700,
		calc(4*var(--spx)) calc(6*var(--spx)) 0 0 #FFD700,
		calc(5*var(--spx)) calc(6*var(--spx)) 0 0 #FFD700,
		/* Rays */
		calc(4*var(--spx)) calc(0*var(--spx)) 0 0 #FFE082,
		calc(4*var(--spx)) calc(8*var(--spx)) 0 0 #FFE082,
		calc(0*var(--spx)) calc(4*var(--spx)) 0 0 #FFE082,
		calc(8*var(--spx)) calc(4*var(--spx)) 0 0 #FFE082,
		/* Diagonal rays */
		calc(1*var(--spx)) calc(1*var(--spx)) 0 0 #FFE082,
		calc(7*var(--spx)) calc(1*var(--spx)) 0 0 #FFE082,
		calc(1*var(--spx)) calc(7*var(--spx)) 0 0 #FFE082,
		calc(7*var(--spx)) calc(7*var(--spx)) 0 0 #FFE082;
}

@keyframes sun-pulse {
	0%, 100% { opacity: 0.85; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.05); }
}

/* Pixel Rainbow — CSS gradient arc */
body.weather-clearing .pixel-rainbow {
	display: block;
	position: fixed;
	bottom: -120px;
	left: -5%;
	width: 450px;
	height: 450px;
	border-radius: 50%;
	background: conic-gradient(
		from 200deg,
		transparent 0deg,
		transparent 10deg,
		rgba(255,0,0,0.12) 15deg,
		rgba(255,127,0,0.12) 22deg,
		rgba(255,255,0,0.12) 29deg,
		rgba(0,200,0,0.12) 36deg,
		rgba(0,150,255,0.12) 43deg,
		rgba(75,0,130,0.12) 50deg,
		rgba(148,0,211,0.12) 57deg,
		transparent 64deg,
		transparent 360deg
	);
	pointer-events: none;
	z-index: 1;
	opacity: 0.7;
	animation: rainbow-shimmer 8s ease-in-out infinite;
}

@keyframes rainbow-shimmer {
	0%, 100% { opacity: 0.5; }
	50% { opacity: 0.8; }
}

/* Clearing mode: gold background stays, body text adapts */
body.weather-clearing {
	background: #87CEEB !important;
	transition: background-color 0.5s;
}

/* Clearing homepage: blue sky → warm gold transition */
body.weather-clearing.home {
	background: linear-gradient(180deg, #87CEEB 0%, #B0E0FF 40%, #FFE4A0 100%) !important;
	background-attachment: fixed !important;
}

/* Clearing cloud becomes fluffy white */
body.weather-clearing .cloud {
	box-shadow:
		/* Fluffy white cloud body */
		calc(8*var(--cpx)) calc(2*var(--cpx)) 0 0 #e8e8e8,
		calc(9*var(--cpx)) calc(2*var(--cpx)) 0 0 #eee,
		calc(10*var(--cpx)) calc(2*var(--cpx)) 0 0 #eee,
		calc(11*var(--cpx)) calc(1*var(--cpx)) 0 0 #e0e0e0,
		calc(12*var(--cpx)) calc(1*var(--cpx)) 0 0 #f0f0f0,
		calc(13*var(--cpx)) calc(1*var(--cpx)) 0 0 #f5f5f5,
		calc(14*var(--cpx)) calc(1*var(--cpx)) 0 0 #eee,
		calc(15*var(--cpx)) calc(2*var(--cpx)) 0 0 #e8e8e8,
		calc(7*var(--cpx)) calc(3*var(--cpx)) 0 0 #e0e0e0,
		calc(6*var(--cpx)) calc(3*var(--cpx)) 0 0 #eee,
		calc(5*var(--cpx)) calc(3*var(--cpx)) 0 0 #e8e8e8,
		calc(8*var(--cpx)) calc(3*var(--cpx)) 0 0 #f5f5f5,
		calc(9*var(--cpx)) calc(3*var(--cpx)) 0 0 #fff,
		calc(10*var(--cpx)) calc(3*var(--cpx)) 0 0 #fff,
		calc(11*var(--cpx)) calc(2*var(--cpx)) 0 0 #f5f5f5,
		calc(12*var(--cpx)) calc(2*var(--cpx)) 0 0 #fff,
		calc(13*var(--cpx)) calc(2*var(--cpx)) 0 0 #fff,
		calc(14*var(--cpx)) calc(2*var(--cpx)) 0 0 #f5f5f5,
		calc(15*var(--cpx)) calc(3*var(--cpx)) 0 0 #f0f0f0,
		calc(16*var(--cpx)) calc(3*var(--cpx)) 0 0 #eee,
		calc(17*var(--cpx)) calc(3*var(--cpx)) 0 0 #e8e8e8,
		calc(11*var(--cpx)) calc(3*var(--cpx)) 0 0 #fff,
		calc(12*var(--cpx)) calc(3*var(--cpx)) 0 0 #fff,
		calc(13*var(--cpx)) calc(3*var(--cpx)) 0 0 #fff,
		calc(14*var(--cpx)) calc(3*var(--cpx)) 0 0 #f5f5f5,
		/* Middle row */
		calc(4*var(--cpx)) calc(4*var(--cpx)) 0 0 #e0e0e0,
		calc(5*var(--cpx)) calc(4*var(--cpx)) 0 0 #eee,
		calc(6*var(--cpx)) calc(4*var(--cpx)) 0 0 #f5f5f5,
		calc(7*var(--cpx)) calc(4*var(--cpx)) 0 0 #f5f5f5,
		calc(8*var(--cpx)) calc(4*var(--cpx)) 0 0 #fff,
		calc(9*var(--cpx)) calc(4*var(--cpx)) 0 0 #fff,
		calc(10*var(--cpx)) calc(4*var(--cpx)) 0 0 #fff,
		calc(11*var(--cpx)) calc(4*var(--cpx)) 0 0 #fff,
		calc(12*var(--cpx)) calc(4*var(--cpx)) 0 0 #fff,
		calc(13*var(--cpx)) calc(4*var(--cpx)) 0 0 #fff,
		calc(14*var(--cpx)) calc(4*var(--cpx)) 0 0 #f5f5f5,
		calc(15*var(--cpx)) calc(4*var(--cpx)) 0 0 #f5f5f5,
		calc(16*var(--cpx)) calc(4*var(--cpx)) 0 0 #eee,
		calc(17*var(--cpx)) calc(4*var(--cpx)) 0 0 #eee,
		calc(18*var(--cpx)) calc(4*var(--cpx)) 0 0 #e0e0e0,
		/* Bottom — bright underside */
		calc(4*var(--cpx)) calc(5*var(--cpx)) 0 0 #f0f0f0,
		calc(5*var(--cpx)) calc(5*var(--cpx)) 0 0 #f5f5f5,
		calc(6*var(--cpx)) calc(5*var(--cpx)) 0 0 #fff,
		calc(7*var(--cpx)) calc(5*var(--cpx)) 0 0 #fff,
		calc(8*var(--cpx)) calc(5*var(--cpx)) 0 0 #fff,
		calc(9*var(--cpx)) calc(5*var(--cpx)) 0 0 #fff,
		calc(10*var(--cpx)) calc(5*var(--cpx)) 0 0 #fff,
		calc(11*var(--cpx)) calc(5*var(--cpx)) 0 0 #fff,
		calc(12*var(--cpx)) calc(5*var(--cpx)) 0 0 #fff,
		calc(13*var(--cpx)) calc(5*var(--cpx)) 0 0 #fff,
		calc(14*var(--cpx)) calc(5*var(--cpx)) 0 0 #f5f5f5,
		calc(15*var(--cpx)) calc(5*var(--cpx)) 0 0 #f5f5f5,
		calc(16*var(--cpx)) calc(5*var(--cpx)) 0 0 #f0f0f0,
		calc(17*var(--cpx)) calc(5*var(--cpx)) 0 0 #eee,
		calc(18*var(--cpx)) calc(5*var(--cpx)) 0 0 #e8e8e8,
		/* Bottom fringe */
		calc(5*var(--cpx)) calc(6*var(--cpx)) 0 0 #eee,
		calc(6*var(--cpx)) calc(6*var(--cpx)) 0 0 #f0f0f0,
		calc(7*var(--cpx)) calc(6*var(--cpx)) 0 0 #f5f5f5,
		calc(8*var(--cpx)) calc(6*var(--cpx)) 0 0 #f5f5f5,
		calc(9*var(--cpx)) calc(6*var(--cpx)) 0 0 #fff,
		calc(10*var(--cpx)) calc(6*var(--cpx)) 0 0 #fff,
		calc(11*var(--cpx)) calc(6*var(--cpx)) 0 0 #fff,
		calc(12*var(--cpx)) calc(6*var(--cpx)) 0 0 #f5f5f5,
		calc(13*var(--cpx)) calc(6*var(--cpx)) 0 0 #f5f5f5,
		calc(14*var(--cpx)) calc(6*var(--cpx)) 0 0 #f0f0f0,
		calc(15*var(--cpx)) calc(6*var(--cpx)) 0 0 #eee,
		calc(16*var(--cpx)) calc(6*var(--cpx)) 0 0 #e8e8e8;
	animation: cloud-drift 8s ease-in-out infinite;
}

/* Clearing: headline stays dark on the blue sky */
body.weather-clearing .sb-headline {
	color: var(--dark);
	text-shadow: 3px 3px 0 rgba(135,206,235,0.5), 0 0 20px rgba(255,255,255,0.3);
}

/* Clearing: SFX hidden — too dark for blue sky */
body.weather-clearing .sb-sfx { display: none !important; }

/* Clearing: drips are golden */
body.weather-clearing .sb-drip {
	background: var(--gold-dark);
}

/* Clearing: wind streaks become warm breezes */
body.weather-clearing .wind-streak {
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

/* Clearing on subpages (dark bg) — text needs to be light */
body.weather-clearing:not(.home) {
	background: #1a2a3a !important;
}

/* Clearing homepage: rainbow cards on scroll
   Rainbow border + glow applied via JS on .sb-post elements */

/* Clearing homepage: tape strips get rainbow tint (controlled by JS opacity) */
body.weather-clearing.home .sb-post::before {
	background: linear-gradient(90deg, #ff3232, #ffe600, #32c850) !important;
}
body.weather-clearing.home .sb-post::after {
	background: linear-gradient(90deg, #1e90ff, #8c32dc) !important;
}

/* Clearing homepage: "WEITERLESEN" button hover = rainbow */
body.weather-clearing.home .sb-post-read:hover {
	background: linear-gradient(90deg, #ff3232, #ff8c00, #32c850, #1e90ff);
	color: #fff;
	border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.sunmote { animation: none !important; opacity: 0 !important; }
	.pixel-sun { animation: none !important; }
	.pixel-rainbow { animation: none !important; }
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
	.sb-nav-burger { display: block; }
	.sb-nav > .sb-nav-links { display: none; }
	.sb-blog-grid { grid-template-columns: 1fr; gap: 32px; }
	/* Hero burger off on mobile — regular nav burger handles it */
	.sb-hero-burger { display: none !important; }
	/* Kill second bolt — less GPU work on mobile */
	.bolt-container:nth-child(4) { display: none; }
	/* Lighter lightning flash on mobile */
	.lightning { animation-duration: 12s; }
	/* Fewer SFX on mobile */
	.sb-sfx--4, .sb-sfx--5, .sb-sfx--6, .sb-sfx--7, .sb-sfx--8 { display: none; }
	/* Clearing: smaller sun, hide rainbow on mobile */
	.pixel-sun { transform: scale(0.7); top: 40px; right: 2%; }
	.pixel-rainbow { width: 250px; height: 250px; bottom: -80px; }
}

@media (max-width: 520px) {
	.cloud-container { --cpx: 4px; }
	.sb-stencil { font-size: 8px; padding: 10px 14px; }
	.sb-tagline { font-size: 18px; max-width: 320px; }
	.sb-nav-logo { font-size: 8px; letter-spacing: 1px; }
	.sb-nav-links { gap: 16px; }
	.sb-nav-links li a { font-size: 18px; }
	.sb-page-card { padding: 24px 16px; }
	.sb-single { padding: 80px 16px 60px; }
	.sb-blog--archive { padding-top: 80px; }
	.sb-sfx { font-size: 10px !important; }
	.sb-px-dolphin { --px: 3px !important; }
	.sb-px-orc { --px: 3px !important; }
	.sb-px-balloon { width: 20px; height: 24px; }
	.sb-hero-burger { top: 12px; right: 14px; padding: 8px 7px; }
	.sb-hero-burger span { width: 18px; height: 2px; margin: 3px 0; }
	.pixel-sun { transform: scale(0.5); top: 30px; right: 0; }
	.pixel-rainbow { display: none !important; }
}