*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
:root{
	--team1-color: #FF7F50;
	--team2-color: #0099CC;
	--active-bg-alpha: 0.16;
	--inactive-bg-alpha: 0.04;
	--big-timer-bg-alpha: 0.06;
	--big-timer-color: #b91c1c;
}
body{background:#f5f7fb;color:#111;margin:0;padding:24px;display:flex;min-height:100vh;align-items:center;justify-content:center}
.container{width:820px;max-width:95%}
.card{background:#fff;border-radius:8px;padding:18px;box-shadow:0 6px 18px rgba(20,30,60,0.08);margin-bottom:12px}
.hidden{display:none}
.scoreboard{display:flex;gap:12px;justify-content:space-between;margin-bottom:12px}
.team{flex:1;padding:12px;border-radius:6px;background:#f1f6ff;text-align:center}
.team-name{font-weight:600}
.team-score{font-size:28px;margin-top:6px}
.question-area{padding:12px;border-radius:6px;background:#fff6e6;border:1px solid #fde8c1;margin-bottom:12px}
.question-area.large{min-height:220px;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.question{font-size:22px;line-height:1.3;font-weight:700;color:#072047;max-width:100%}

/* blurred question state before starting the round */
.question.blurred{filter:blur(4px);opacity:0.75}

/* choose-first screen */
.choose-area{display:flex;gap:12px;justify-content:center;align-items:center}
.choose-team{padding:18px 26px;border-radius:8px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #e6eef9;font-weight:800;min-width:160px;text-align:center;transition:transform 220ms ease,box-shadow 220ms ease}
.choose-team.active{transform:translateY(-6px);box-shadow:0 10px 30px rgba(2,6,23,0.12)}
.choose-team.selected{background:linear-gradient(90deg,var(--team1-color),var(--team2-color));color:var(--team1-text,#072047)}

/* Start screen preview styles */
.start-preview{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.start-preview .scoreboard{padding:8px;border-radius:8px}
.start-preview .team{padding:8px;border-radius:6px;background:var(--team1-inactive-bg,#f1f6ff)}
.start-preview .team .team-score{font-size:20px}
.start-actions{margin-top:10px;text-align:center}
.answer{margin-top:12px;color:#0b5;font-size:20px}
.controls{display:flex;align-items:center;justify-content:space-between;gap:12px}
.controls .center{display:flex;gap:8px;justify-content:center}
.controls .left,.controls .right{flex:0 0 auto}
.controls .center{flex:1 1 auto}
.controls button{padding:10px 14px;border-radius:10px;border:1px solid #cdd6e0;background:#fff;cursor:pointer}
.controls button:disabled{opacity:0.45;cursor:not-allowed}
label{display:block;margin-bottom:8px}
input{width:100%;padding:8px;margin-top:6px;border-radius:6px;border:1px solid #e2e8f0}
#round-info{font-size:14px;color:#0b2545}
.round-box{background:linear-gradient(180deg,#f8fafc,#eef2ff);padding:12px;border-radius:10px;margin-bottom:14px;border:1px solid #dbeafe;font-weight:800;text-align:center;transition:background-color 220ms ease,color 220ms ease}
.round-box{font-size:18px}

.round-timer{display:inline-block;margin-left:10px;background:rgba(255,255,255,0.15);padding:4px 8px;border-radius:8px;font-weight:700;font-size:14px}

/* Big timer displayed under scores */
.big-timer{margin-top:12px;text-align:center;font-weight:900;font-size:56px;padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));color:var(--big-timer-color);min-height:72px;display:flex;align-items:center;justify-content:center}

/* Timer progress bar */
.timer-progress{width:100%;height:12px;border-radius:8px;overflow:hidden;background:rgba(2,6,23,0.04);margin-top:10px}
.timer-progress-fill{height:100%;width:100%;background:var(--big-timer-color);transition:width 250ms linear}
.timer-progress.team-0 .timer-progress-fill{background:var(--big-timer-bg-0)}
.timer-progress.team-1 .timer-progress-fill{background:var(--big-timer-bg-1)}
.big-timer.small{font-size:32px;min-height:48px}

/* Animation layer for confetti / emoji */
.animation-layer{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1200}
.confetti{position:absolute;width:10px;height:14px;border-radius:2px;opacity:0.95;transform-origin:center;will-change:transform,top,left;animation:confetti-fall var(--t,2000ms) linear forwards, confetti-rotate var(--r,2000ms) linear forwards}
@keyframes confetti-fall{
	0%{transform:translateY(-10vh) rotate(0deg);opacity:1}
	100%{transform:translateY(110vh) rotate(720deg);opacity:0.9}
}
@keyframes confetti-rotate{
	0%{transform:rotate(0deg)}
	100%{transform:rotate(720deg)}
}

.feedback .emoji-sad{font-size:48px;display:inline-block;margin-right:10px;transform-origin:center;animation:emoji-sad 900ms ease}
@keyframes emoji-sad{
	0%{transform:translateY(-6px) scale(0.8) rotate(-10deg);opacity:0}
	40%{transform:translateY(0) scale(1.1) rotate(6deg);opacity:1}
	70%{transform:translateY(-3px) scale(0.98) rotate(-3deg)}
	100%{transform:translateY(0) scale(1) rotate(0)}
}

.feedback .emoji-happy{font-size:52px;display:inline-block;margin-right:10px;transform-origin:center;animation:emoji-happy 900ms cubic-bezier(.2,.9,.2,1)}
@keyframes emoji-happy{
	0%{transform:translateY(-10px) scale(0.8) rotate(-6deg);opacity:0}
	35%{transform:translateY(2px) scale(1.18) rotate(6deg);opacity:1}
	65%{transform:translateY(-4px) scale(0.98) rotate(-3deg)}
	100%{transform:translateY(0) scale(1) rotate(0)}
}
#end-screen{text-align:center;padding:12px}

/* Feedback overlay shown briefly after marking an answer */
.feedback{position:relative;margin-top:12px;padding:14px;border-radius:8px;text-align:center;font-weight:700;color:#fff;display:block;opacity:0;transform:translateY(6px);transition:opacity 160ms ease,transform 200ms ease}
.feedback.hidden{display:none;opacity:0;transform:translateY(6px)}
.feedback.show{display:block;opacity:1;transform:translateY(0)}
.feedback.correct{background:linear-gradient(90deg,#16a34a,#43c76a)}
.feedback.incorrect{background:linear-gradient(90deg,#dc2626,#ff6b6b)}

/* UI polish */
header h1{margin:0;font-size:28px;color:#0b2545;text-align:center}
.container > header{margin-bottom:20px}
.container > footer{margin-top:0}

.scoreboard{background:linear-gradient(180deg,#fff,#fbfdff);padding:10px;border-radius:8px}
.team{transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease}
.team.active{transform:translateY(-6px);box-shadow:0 10px 30px rgba(2,6,23,0.12);border-color:#cfe9ff;background:#f8fcff}
.team .team-score{font-size:32px;color:#0b2545}

/* Per-team active/inactive backgrounds use CSS variables set by JS */
#team-1-display{background:var(--team1-inactive-bg, #f1f6ff)}
#team-2-display{background:var(--team2-inactive-bg, #f1f6ff)}
#team-1-display.active{background:var(--team1-active-bg, #f8fcff)}
#team-2-display.active{background:var(--team2-active-bg, #f8fcff)}
#team-1-display.active, #team-2-display.active{color:var(--active-text, #072047)}

/* Round box theme by active team */
.round-box.team-0{background:var(--team1-color);color:var(--team1-text, #072047)}
.round-box.team-1{background:var(--team2-color);color:var(--team2-text, #072047)}

/* Big timer themed by active team */
.big-timer.team-0{background:var(--big-timer-bg-0, rgba(0,0,0,0.06));color:var(--team1-text, var(--big-timer-color))}
.big-timer.team-1{background:var(--big-timer-bg-1, rgba(0,0,0,0.06));color:var(--team2-text, var(--big-timer-color))}

.question-area{min-height:120px}

.controls{display:flex;gap:8px;align-items:center}
.controls button{padding:10px 14px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;color:#0f1724;font-weight:600;box-shadow:none;transition:all 160ms ease}
.controls button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,30,60,0.06)}
.controls button:disabled{opacity:0.45;cursor:not-allowed;transform:none}

/* Specific button colours */
#next-btn{background:#0b71ff;border-color:#0b71ff;color:#fff}
#next-btn.primary{background:#0b71ff}
#next-btn:disabled{background:#c6ddff;color:#fff}
#correct-btn{background:linear-gradient(90deg,#10b981,#34d399);border-color:transparent;color:#073b2b}
#incorrect-btn{background:linear-gradient(90deg,#ef4444,#fb7185);border-color:transparent;color:#3b0b0b}
#reveal-btn{background:#fff3cd;border-color:#f7e1a9;color:#6b3f00}
#back-btn{background:#eef2ff;border-color:#dbeafe;color:#1e293b}

/* Improve input and labels spacing */
label{font-weight:600;color:#334155}
input{background:#fbfdff}

/* Small responsive tweaks */
@media (max-width:560px){
	.controls{flex-wrap:wrap}
	.team .team-score{font-size:24px}
}