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

:root{
  --turquoise:#00BCD4;
  --turquoise-d:#0097A7;
  --gold:#FFD84D;
  --gold-h:#F5C93F;
  --black:#000;
  --white:#fff;
  --bg:#F7F9FC;
  --border:#E5E5E5;
  --green:#2e7d32;
  --green-bg:#e8f5e9;
  --red:#c62828;
  --red-bg:#ffebee;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Verdana,Arial,sans-serif;
}

body{font-family:var(--font);background:var(--white);color:var(--black);font-size:16px}

/* HIDDEN */
.hidden{display:none!important}

/* COOKIE BANNER */
#cookie-banner{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  background:#111;color:#fff;
  padding:14px 20px;z-index:9999;
  flex-wrap:wrap;align-items:center;gap:12px;
  font-size:14px;line-height:1.5;
}
#cookie-banner.visible{display:flex!important}
#cookie-banner p{flex:1;min-width:200px}
#cookie-banner a{color:var(--gold)}
.cookie-btns{display:flex;gap:10px;flex-shrink:0}
.btn-accept{background:var(--gold);color:var(--black);border:none;padding:10px 22px;font-family:var(--font);font-size:14px;font-weight:bold;border-radius:6px;cursor:pointer}
.btn-accept:hover{background:var(--gold-h)}
.btn-decline{background:transparent;color:#ccc;border:1px solid #666;padding:10px 22px;font-family:var(--font);font-size:14px;border-radius:6px;cursor:pointer}
.btn-decline:hover{border-color:#aaa;color:#fff}

/* HERO HEADER */
.hero-header{background:linear-gradient(135deg,#000 0%,#0d1b4b 25%,#1565c0 55%,#00acc1 80%,#FFD84D 100%);padding:0 0 48px;min-height:320px;display:flex;flex-direction:column}
.top-nav{display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:64px;flex-shrink:0}
.logo{font-size:22px;font-weight:900;color:#fff;text-decoration:none;letter-spacing:2px}
.nav-links{display:flex;gap:28px}
.nav-links a{font-size:16px;color:rgba(255,255,255,.9);text-decoration:none;font-weight:500}
.nav-links a:hover{color:var(--gold)}
.hero-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 24px 0}
.hero-content h1{font-size:42px;font-weight:900;color:#fff;margin-bottom:14px;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.hero-sub{font-size:17px;color:rgba(255,255,255,.88);margin-bottom:32px;line-height:1.6}
.btn-play{background:var(--gold);color:var(--black);border:none;border-radius:12px;padding:20px 56px;font-family:var(--font);font-size:22px;font-weight:900;cursor:pointer;box-shadow:0 0 24px rgba(255,216,77,.5);transition:background .15s,transform .1s}
.btn-play:hover{background:var(--gold-h);transform:scale(1.03)}

/* FIXED HEADER */
#site-header{position:fixed;top:0;left:0;right:0;height:64px;background:linear-gradient(135deg,#000 0%,#0d1b4b 40%,#1565c0 70%,#00acc1 100%);z-index:1000}
.header-inner{max-width:1100px;margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;justify-content:space-between}
.header-inner .logo{font-size:20px;font-weight:900;color:#fff;text-decoration:none;letter-spacing:2px}
.header-inner nav{display:flex;gap:24px}
.header-inner nav a{font-size:15px;color:rgba(255,255,255,.9);text-decoration:none;font-weight:500}
.header-inner nav a:hover{color:var(--gold)}
.page-body{padding-top:64px}

/* AD SLOTS */
.ad-slot{background:#f9f9f9;border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;min-height:70px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#bbb;letter-spacing:1px}

/* SECTIONS */
.section-inner{max-width:1100px;margin:0 auto;padding:0 24px}
.section-title{font-size:28px;font-weight:900;color:var(--black);text-align:center;margin-bottom:32px}

/* CATEGORY CARDS */
.section-categories{padding:48px 0 56px;background:var(--white)}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cat-card{background:var(--turquoise);border-radius:18px;padding:28px 20px 24px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:8px;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 12px rgba(0,188,212,.2);min-height:180px}
.cat-card:hover{transform:scale(1.03);box-shadow:0 8px 24px rgba(0,188,212,.35)}
.cat-icon{font-size:36px;margin-bottom:4px}
.cat-name{font-size:20px;font-weight:900;color:var(--black)}
.cat-desc{font-size:14px;color:#111;line-height:1.5}

/* HOW IT WORKS */
.how-it-works{background:var(--bg);padding:48px 0 56px;border-top:1px solid var(--border)}
.steps{display:flex;gap:32px;justify-content:center;flex-wrap:wrap}
.step{flex:1;min-width:200px;max-width:280px;text-align:center;padding:0 16px}
.step-icon{font-size:40px;margin-bottom:12px}
.step-title{font-size:18px;font-weight:700;color:var(--black);margin-bottom:8px}
.step-text{font-size:15px;color:#333;line-height:1.5}

/* FOOTER */
footer{background:var(--bg);padding:24px;text-align:center;border-top:1px solid var(--border)}
.footer-inner{max-width:600px;margin:0 auto}
.footer-links{font-size:14px;margin-bottom:8px}
.footer-links a{color:rgba(0,0,0,.5);text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.footer-links .sep{color:rgba(0,0,0,.2);margin:0 8px}
.footer-free{font-size:13px;color:rgba(0,0,0,.45);font-weight:500}

/* QUIZ PAGE - PROFESSIONAL DESIGN */
.quiz-wrap{max-width:800px;margin:0 auto;padding:40px 24px 80px}

#scorebar{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;background:var(--white);border-radius:12px;padding:16px 24px;margin-bottom:32px;font-size:16px;font-weight:700;color:var(--black);border:2px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,0.05)}
#score-pct{color:var(--turquoise-d);font-size:18px}

#start-screen{text-align:center;padding:60px 20px;background:var(--white);border-radius:16px;border:2px solid var(--border);box-shadow:0 4px 12px rgba(0,0,0,0.08)}
#start-screen h2{font-size:32px;font-weight:900;margin-bottom:16px;color:var(--black)}
#start-screen p{font-size:18px;color:#555;margin-bottom:32px;line-height:1.6}
#category-label{font-size:14px;font-weight:900;letter-spacing:3px;color:var(--turquoise-d);text-transform:uppercase;margin-bottom:20px;display:block}

.question-text{font-size:32px;font-weight:900;line-height:1.3;color:var(--black);margin-bottom:40px;text-align:center;padding:0 8px;min-height:100px;display:flex;align-items:center;justify-content:center}

.answer-btn{display:block;width:100%;background:var(--white);border:3px solid var(--turquoise);color:var(--black);font-family:var(--font);font-size:20px;font-weight:700;padding:28px 24px;border-radius:14px;cursor:pointer;text-align:left;margin-bottom:16px;transition:all 0.2s ease;box-shadow:0 2px 8px rgba(0,0,0,0.05);line-height:1.4}
.answer-btn:hover:not(:disabled){border-color:var(--turquoise-d);background:#e0f7fa;transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,188,212,0.25)}
.answer-btn:active:not(:disabled){transform:translateY(0)}
.answer-btn.correct{background:var(--green-bg);border-color:var(--green);color:var(--green);box-shadow:0 4px 12px rgba(46,125,50,0.2)}
.answer-btn.wrong{background:var(--red-bg);border-color:var(--red);color:var(--red);box-shadow:0 4px 12px rgba(198,40,40,0.2)}
.answer-btn:disabled{cursor:not-allowed;opacity:0.8}

.result-box{border-radius:14px;padding:24px 28px;margin-top:24px;border:3px solid;text-align:center;animation:slideIn 0.3s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.result-box.correct{background:var(--green-bg);border-color:var(--green)}
.result-box.wrong{background:var(--red-bg);border-color:var(--red)}
#result-label{font-size:26px;font-weight:900;margin-bottom:12px}
.result-box.correct #result-label{color:var(--green)}
.result-box.wrong #result-label{color:var(--red)}
#explanation-text{font-size:16px;color:#333;line-height:1.7;text-align:left;background:rgba(255,255,255,0.8);padding:16px;border-radius:8px}

#game-screen{text-align:center}
#end-screen{text-align:center;padding:60px 20px;background:var(--white);border-radius:16px;border:2px solid var(--border);box-shadow:0 4px 12px rgba(0,0,0,0.08)}
#end-screen h2{font-size:32px;font-weight:900;margin-bottom:20px}
#end-score-text{font-size:20px;margin:24px 0 40px;line-height:1.8;color:#333}
#end-score-text strong{color:var(--turquoise-d);font-size:24px}

.btn-restart{background:var(--gold);color:var(--black);font-family:var(--font);font-size:20px;font-weight:800;padding:20px 48px;border:none;border-radius:14px;cursor:pointer;transition:all 0.2s;display:inline-block;margin-bottom:16px;box-shadow:0 4px 16px rgba(255,216,77,0.4)}
.btn-restart:hover{background:var(--gold-h);transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,216,77,0.5)}
.btn-home{display:inline-block;margin-top:12px;font-size:16px;color:var(--turquoise-d);text-decoration:none;cursor:pointer;background:none;border:none;font-family:var(--font);font-weight:600;padding:8px 16px;border-radius:8px;transition:background 0.2s}
.btn-home:hover{background:var(--bg);text-decoration:underline}

#btn-next{margin-top:24px}