/* Initial visibility controlled by JS */
#question,.option-container,#result,#timer{
	display: none;
}

/* Theme */
:root{
	--bg-1:#f6f7fb;
	--bg-2:#ffffff;
	--card:#ffffff;
	--text:#1f2937;
	--muted:#6b7280;
	--primary:#5b8cfa;
	--primary-2:#ff86c8;
	--success:#16a34a;
	--danger:#ef4444;
	--shadow:0 8px 24px rgba(30, 64, 175, .12);
}

html,body{
	height:100%;
}

body{
	margin:0;
	font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color:var(--text);
	background:
		radial-gradient(1200px 1200px at 10% 10%, rgba(91,140,250,.18), transparent 60%),
		radial-gradient(1000px 1000px at 90% 30%, rgba(255,134,200,.18), transparent 60%),
		linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 60%);
	min-height:100vh;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

.gradient-bg{
	position:fixed;
	inset:0;
	background:
		radial-gradient(800px 800px at 10% 20%, rgba(91,140,250,.28), transparent 60%),
		radial-gradient(900px 900px at 80% 10%, rgba(255,134,200,.26), transparent 60%);
	z-index:-2;
	filter:saturate(110%);
	animation:floatHue 18s ease-in-out infinite alternate;
}

.noise-overlay{
	position:fixed;
	inset:0;
	background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.04"/></svg>');
	pointer-events:none;
	z-index:-1;
}

.quiz-wrapper{
	min-height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:24px;
}

.app-header{
	width:100%;
	max-width:960px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:8px auto 16px;
}

.brand{
	font-family:"Space Grotesk", sans-serif;
	font-weight:700;
	letter-spacing:.5px;
	margin:0;
	font-size: clamp(28px, 3.5vw, 40px);
	text-shadow:0 8px 30px rgba(108,140,255,.25);
}
.brand-accent{
	background:linear-gradient(90deg, var(--primary), var(--primary-2));
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

.quiz-container{
	width:100%;
	max-width:960px;
	background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
	border:1px solid rgba(31,41,55,.06);
	box-shadow:var(--shadow);
	backdrop-filter: blur(2px);
	border-radius:18px;
	padding:24px;
	display:flex;
	flex-direction:column;
	gap:18px;
}

.welcome{
	margin:0 0 4px;
	font-weight:600;
	text-align:center;
	color:var(--text);
}

.primary-btn{
	appearance:none;
	border:none;
	background:linear-gradient(90deg, var(--primary), var(--primary-2));
	color:white;
	font-weight:700;
	letter-spacing:.4px;
	padding:14px 22px;
	border-radius:14px;
	box-shadow: 0 12px 24px rgba(91,140,250,.25);
	cursor:pointer;
	transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
	align-self:center;
}
.primary-btn:hover{
	transform: translateY(-2px);
	box-shadow: 0 18px 36px rgba(108,140,255,.35);
	filter: saturate(110%);
}
.primary-btn:active{
	transform: translateY(0);
	box-shadow: 0 10px 20px rgba(108,140,255,.25);
}

.qt-container{
	display:flex;
	flex-direction:column;
	gap:12px;
	padding:12px 0 0;
}

.question-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}

#question{
	margin:0;
	font-size: clamp(18px, 2.4vw, 24px);
	font-weight:600;
	color:var(--text);
}

#timer{
	min-width:72px;
	min-height:72px;
	border-radius:50%;
	background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,1), rgba(249,250,251,.9));
	border:2px solid rgba(31,41,55,.08);
	display:grid;
	place-items:center;
	font-weight:800;
	font-size:14px;
	line-height:1;
	color:#111827;
	text-align:center;
	padding:8px;
	box-shadow: inset 0 10px 18px rgba(0,0,0,.06), 0 8px 22px rgba(30,64,175,.10);
	position:relative;
}
#timer::after{
	content:"";
	position:absolute;
	inset:6px;
	border-radius:50%;
	border:3px solid transparent;
	border-top-color: var(--primary);
	border-right-color: var(--primary-2);
	filter: drop-shadow(0 0 6px rgba(91,140,250,.35));
	animation: spin 1.2s linear infinite;
}

.option-container{
	list-style:none;
	margin:8px 0 0;
	padding:0;
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:12px;
}
.option-container li{margin:0;padding:0; display:contents}

.option-btn{
	width:100%;
	text-align:left;
	padding:14px 16px;
	border-radius:14px;
	border:1px solid rgba(31,41,55,.08);
	background:linear-gradient(180deg, rgba(255,255,255,1), rgba(249,250,251,0.9));
	color:var(--text);
	font-weight:600;
	cursor:pointer;
	transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
	box-shadow: var(--shadow);
}
.option-btn:hover{
	transform: translateY(-1px);
	border-color: rgba(108,140,255,.45);
	box-shadow: 0 12px 24px rgba(108,140,255,.25);
}
.option-btn:focus{outline:2px solid rgba(108,140,255,.6); outline-offset:2px}
.option-btn:disabled{opacity:.7; cursor:not-allowed}

.option-btn.is-correct{
	background: linear-gradient(180deg, rgba(209,250,229,1), rgba(187,247,208,1));
	border-color: rgba(16,185,129,.6);
	color:#065f46;
}
.option-btn.is-wrong{
	background: linear-gradient(180deg, rgba(254,226,226,1), rgba(254,202,202,1));
	border-color: rgba(239,68,68,.6);
	color:#7f1d1d;
}

/* Result styles */
#result{
	text-align:center;
	font-weight:700;
	letter-spacing:.3px;
	color:var(--muted);
}

.app-footer{margin-top:8px;text-align:center;color:var(--muted)}

/* Animations */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes floatHue{from{filter:hue-rotate(0deg)} to{filter:hue-rotate(10deg)}}

/* Responsive */
/* Keep two columns even on small screens */
@media (min-width: 960px){
	.quiz-container{padding:28px 32px}
}