:root {
	--void-black: #050505;
	--neon-pink: #FF00FF;
	--toxic-green: #39FF14;
	--electric-cyan: #00FFFF;
	--laser-yellow: #FFFF00;
	--blood-red: #FF0000;
}

/* GLOBAL RESET & WIGGLE PREVENTION */
* {
    box-sizing: border-box; /* Prevents padding from adding to width */
}

html {
    margin: 0;
    padding: 0;
    width: 100%;
    /* This is the master scroll controller */
    overflow-x: hidden; 
    overflow-y: auto; 
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* We set this to visible so it doesn't create its own scrollbar */
    overflow: visible; 
    
    background-color: var(--void-black);
    background-image: 
    radial-gradient(var(--neon-pink) 1.5px, transparent 1.5px),
    radial-gradient(var(--electric-cyan) 1px, transparent 1px);
    background-size: 35px 35px, 20px 20px;
    background-position: 0 0, 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Arial Black', sans-serif;
    color: white;
    /* Optional: helps with mobile jitter */
    min-height: 100vh; 
}
/* --- THE HEADER --- */

.wacky-marquee {
	width: 90%; 
	max-width: 1400px;
	height: 240px;
	margin-top: 50px;
	margin-bottom: 80px;
	background: linear-gradient(to right, var(--blood-red), var(--void-black), var(--blood-red));
	border: 12px solid var(--laser-yellow);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	transform: rotate(-1.5deg) skewX(-2deg);
	box-shadow: 0 0 40px var(--toxic-green), 25px 25px 0px var(--neon-pink);
    
    /* FIX: Set to visible so SFX can overlap the border */
    overflow: visible; 
}

.nav-container {
	position: absolute;
	top: 20px;
	right: 30px;
	z-index: 300;
}

.about-link {
	background: var(--laser-yellow);
	color: black;
	padding: 12px 25px;
	text-decoration: none;
	font-size: 1.2rem;
	border: 5px solid black;
	box-shadow: 8px 8px 0px var(--electric-cyan);
	display: inline-block;
	transition: 0.1s;
}

.about-link:hover {
	background: var(--toxic-green);
	box-shadow: -8px -8px 0px var(--neon-pink);
	transform: scale(1.1) rotate(-2deg);
}

.wacky-marquee h1 {
	font-size: 2.2rem;
	margin: 0;
	color: white;
	text-transform: uppercase;
	letter-spacing: 20px;
	-webkit-text-stroke: 1.5px var(--toxic-green);
	filter: drop-shadow(0 0 15px var(--neon-pink));
    text-align: center;
}

.vivid-subtitle {
    letter-spacing: 10px;
    font-size: 0.7rem;
    color: var(--electric-cyan);
    margin: 10px 0 0 0;
    text-transform: uppercase;
}

/* --- SFX STYLING --- */

@keyframes sfx-shake {
	0% { transform: translate3d(0,0,0) rotate(-2deg); }
	50% { transform: translate3d(2px,-2px,0) rotate(-1deg); }
	100% { transform: translate3d(0,0,0) rotate(-2deg); }
}

.sfx {
	position: absolute;
	font-size: 3rem;
	-webkit-text-stroke: 2px black;
	animation: sfx-shake 0.15s linear infinite;
	z-index: 200;
	pointer-events: none;
    font-weight: bold;
}

/* Positioned to "break out" and overlap the border */
.sfx-skritch {
    top: -45px;
    left: -35px;
    color: var(--toxic-green);
}

.sfx-plop {
    bottom: -45px;
    right: 40px;
    color: var(--neon-pink);
}

/* --- CONTENT GRID --- */

.news-wall {
	width: 90%;
	max-width: 1200px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	padding: 100px 0;
}

.insane-card {
	background: rgba(255, 255, 255, 0.08);
	border: 4px solid var(--electric-cyan);
	padding: 25px;
	position: relative;
	transition: 0.2s;
	backdrop-filter: blur(8px);
	cursor: pointer;
}

.insane-card:hover {
	transform: translate3d(0, -10px, 0) rotate(2deg);
	background: var(--neon-pink);
	color: black;
	box-shadow: 0 0 60px var(--laser-yellow);
	z-index: 100;
}

/* --- THE AD REPAIR (FIXES availableWidth=0) --- */
.insane-ghost-ad {
	background: rgba(0, 0, 0, 0.9);
	border: 4px solid var(--electric-cyan);
	padding: 15px;
	position: relative;
	min-height: 280px;
	box-shadow: 0 0 20px var(--neon-pink);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
    /* ENSURE WIDTH IS ALWAYS CALCULABLE */
    width: 100% !important;
}

.adsbygoogle {
    display: block !important;
    width: 100% !important;
    min-width: 250px !important; /* Force Google to see a real size */
}

.insane-ghost-ad::before {
	content: "[ SPONSORED VORTEX ]";
	position: absolute;
	top: 5px;
	right: 10px;
	font-size: 0.6rem;
	color: var(--toxic-green);
	font-family: monospace;
}

.featured-article {
	grid-column: span 3;
	border: 8px solid var(--toxic-green);
	background: rgba(0, 255, 255, 0.1);
}

.hidden-madness {
    /* Bot sees the text, user sees nothing. */
    visibility: hidden;
    height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: none;
    pointer-events: none;
}

.shape-jagged { clip-path: polygon(0% 15%, 10% 0%, 90% 0%, 100% 15%, 100% 85%, 90% 100%, 10% 100%, 0% 85%); }
.shape-blob { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
.shape-oblong { border-radius: 100px / 50px; transform: skewX(-5deg); }

.insane-card h3 {
	font-size: 0.8rem;
	background: var(--laser-yellow);
	color: black;
	margin: -25px -25px 15px -25px;
	padding: 10px;
	text-align: center;
	border-bottom: 4px solid black;
}

/* --- RESPONSIVE REPAIR SHOP --- */

@media screen and (max-width: 1024px) {
	.news-wall {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
		width: 95%;
	}
	.featured-article {
		grid-column: span 2;
	}
}

@media screen and (max-width: 650px) {
	.wacky-marquee {
		height: auto;
		padding: 65px 15px 45px; 
		transform: rotate(-1deg); 
		width: 88%; /* Leaves room for the neon box-shadow */
		margin-top: 20px;
	}

	.wacky-marquee h1 {
		font-size: 1.1rem;
		letter-spacing: 4px;
		-webkit-text-stroke: 1px var(--toxic-green);
	}

    .vivid-subtitle {
        letter-spacing: 2px;
        font-size: 0.55rem;
    }

    .nav-container { top: 10px; right: 10px; }
    .about-link { padding: 6px 12px; font-size: 0.75rem; box-shadow: 4px 4px 0px var(--electric-cyan); border-width: 3px; }

    .sfx { font-size: 1.8rem; }
    /* Mobile SFX Nudge */
    .sfx-skritch { top: -25px; left: -10px; }
    .sfx-plop { bottom: -25px; right: 15px; }

	.news-wall { grid-template-columns: 1fr; padding: 30px 0; width: 92%; }
	.featured-article { grid-column: span 1; }
	.insane-card p { font-size: 1rem; line-height: 1.4; }
	.insane-card h3 { font-size: 1rem; }
	.shape-jagged, .shape-blob, .shape-oblong { clip-path: none; border-radius: 10px; transform: none !important; }
}