@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

:root{
  --navy:#12245a;
  --navy-2:#1c3475;
  --yellow:#ffbd24;
  --yellow-2:#ffd85a;
  --orange:#ff8f1f;
  --red:#ef3157;
  --green:#24b36b;
  --purple:#7a63d7;
  --bg:#f5f8ff;
  --card:#ffffff;
  --text:#18244d;
  --muted:#65708f;
  --shadow:0 12px 30px rgba(18,36,90,.14);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Fredoka',system-ui,sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,189,36,.16), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(122,99,215,.12), transparent 30%),
    var(--bg);
  color:var(--text);
}
a{color:inherit}
button,input{font:inherit}

/* =========================================================
   HEADER
   Logo is intentionally on the LEFT, outside the nav.
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);
  border-bottom:3px solid rgba(18,36,90,.08);
}

.header-inner{
  width:100%;
  max-width:1400px;
  min-height:96px;
  margin:0 auto;
  padding:10px 28px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:34px;
  position:relative;
}

/* TOP-LEFT LOGO */
.brand{
  flex:0 0 72px;
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  margin:0;
  padding:0;
}

.brand img{
  display:block;
  width:72px;
  height:72px;
  object-fit:contain;
  margin:0;
  padding:0;
}

/* NAV */
.nav{
  flex:1 1 auto;
  min-width:0;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:28px;
  margin:0;
  padding:0;
  position:static;
}

.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  line-height:1.2;
  padding:10px 0;
  border-radius:10px;
  white-space:nowrap;
  color:var(--navy);
  transition:color .2s ease, transform .2s ease;
}

.nav a:hover{
  color:var(--orange);
  transform:translateY(-1px);
}

.nav a.active{
  color:var(--orange);
}

.menu-toggle{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border:0;
  border-radius:14px;
  background:var(--navy);
  color:#fff;
  cursor:pointer;
  font-size:22px;
  display:none;
}

/* =========================================================
   PAGE CONTENT
   ========================================================= */
.hero{
  max-width:1000px;
  margin:0 auto;
  padding:54px 18px 28px;
  text-align:center;
}
.hero h1{
  margin:0 0 12px;
  color:var(--navy);
  font-size:clamp(38px,6vw,62px);
  line-height:1.05;
}
.hero p{
  margin:0 auto;
  max-width:820px;
  font-size:20px;
  line-height:1.55;
  color:#53628a;
}

.game-shell{
  max-width:1000px;
  margin:18px auto 42px;
  padding:0 18px;
}
.game-card{
  background:var(--card);
  border-radius:28px;
  box-shadow:var(--shadow);
  overflow:hidden;
  border:2px solid rgba(18,36,90,.07);
}
.game-top{
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:white;
  padding:18px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.game-title{font-size:23px;font-weight:700}
.stats{display:flex;gap:8px;flex-wrap:wrap}
.stat{
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
  padding:8px 12px;
  border-radius:14px;
  font-weight:600;
}
.game-body{padding:22px}
.controls{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-bottom:18px;
}
.control-group{background:#f3f6ff;border-radius:18px;padding:12px}
.control-group label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:7px;
}
.select{
  width:100%;
  border:2px solid #dce3fa;
  background:white;
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.mode-row{display:flex;gap:8px;flex-wrap:wrap}
.mode-btn,.action-btn{
  border:0;
  cursor:pointer;
  border-radius:13px;
  padding:10px 13px;
  font-weight:700;
  background:white;
  color:var(--navy);
  box-shadow:0 3px 0 #dbe2f7;
}
.mode-btn.active{background:var(--yellow);box-shadow:0 3px 0 #e2a000}
.action-btn.primary{background:var(--yellow);box-shadow:0 4px 0 #db9e00}
.action-btn.danger{background:#ffe7ed;color:#a51e42;box-shadow:0 3px 0 #f6c3cf}
.action-btn.dark{background:var(--navy);color:white;box-shadow:0 3px 0 #09183f}
.action-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.question-area{
  min-height:330px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,189,36,.18), transparent 20%),
    radial-gradient(circle at 80% 80%, rgba(122,99,215,.14), transparent 25%),
    #fbfcff;
  border:2px dashed #d9e1f8;
  border-radius:24px;
  padding:24px;
}
.question-label{color:var(--muted);font-size:15px;font-weight:600}
.question{
  font-size:clamp(44px,8vw,76px);
  font-weight:700;
  color:var(--navy);
  margin:6px 0 20px;
  text-align:center;
  line-height:1.05;
}
.answers{
  display:grid;
  grid-template-columns:repeat(2,minmax(120px,210px));
  gap:12px;
  width:min(100%,440px);
}
.answer-btn{
  border:0;
  min-height:68px;
  border-radius:18px;
  background:white;
  color:var(--navy);
  font-size:26px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 5px 0 #d8e0f5;
  border:2px solid #e0e7f8;
  transition:transform .08s, box-shadow .08s;
}
.answer-btn:hover{transform:translateY(-2px)}
.answer-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #d8e0f5}
.answer-btn.correct{background:#dff8ea;border-color:#8cdbb3}
.answer-btn.wrong{background:#ffe4eb;border-color:#f1a9bc}
.message{min-height:28px;margin-top:12px;font-weight:700;text-align:center}

.seo-section{
  max-width:1000px;
  margin:0 auto 42px;
  padding:0 18px;
}
.content-card{
  background:white;
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:28px;
}
.content-card h2{font-size:30px;margin:0 0 12px;color:var(--navy)}
.content-card h3{font-size:22px;margin:24px 0 8px;color:var(--navy)}
.content-card p,.content-card li{font-size:17px;line-height:1.65;color:#4f5a79}
.content-card ul,.content-card ol{padding-left:24px}
.topic-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-top:20px
}
.topic-card{
  text-decoration:none;
  background:#f7f8ff;
  border:2px solid #e3e8fa;
  border-radius:18px;
  padding:16px;
  text-align:center;
  font-weight:700;
}
.topic-card:hover{background:#eef2ff;border-color:#cdd6f6}

.contact-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:20px;
}
.contact-option{
  background:#f7f8ff;
  border:2px solid #e3e8fa;
  border-radius:18px;
  padding:20px;
}
.contact-option h3{margin-top:0}
.email-link{
  color:var(--navy);
  font-weight:700;
  word-break:break-word;
}
.email-link:hover{color:var(--orange)}

.site-footer{
  background:var(--navy);
  color:#fff;
  margin-top:40px;
  padding:28px 18px;
}
.footer-inner{max-width:1000px;margin:auto;text-align:center}
.footer-links{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.footer-links a{color:#fff;text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.small{font-size:14px;color:#cbd4f2;line-height:1.5}

.breadcrumbs{
  max-width:1000px;
  margin:0 auto;
  padding:10px 18px 0;
  font-size:14px;
  color:var(--muted);
}
.breadcrumbs a{color:var(--navy);font-weight:600;text-decoration:none}
.notice{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  background:#fff8df;
  border:1px solid #f2df91;
  color:#6f5700;
  font-size:14px
}

/* =========================================================
   TABLET / MOBILE
   ========================================================= */
@media(max-width:1100px){
  .header-inner{
    max-width:100%;
    padding-left:22px;
    padding-right:22px;
    gap:26px;
  }
  .nav{gap:20px}
  .nav a{font-size:15px}
}

@media(max-width:900px){
  .header-inner{
    min-height:82px;
    padding:8px 18px;
  }

  .brand,
  .brand img{
    width:62px;
    height:62px;
  }

  .nav{
    display:none;
    position:absolute;
    left:12px;
    right:12px;
    top:82px;
    height:auto;
    background:white;
    border:2px solid #e6ebf7;
    border-top:0;
    border-radius:0 0 18px 18px;
    box-shadow:var(--shadow);
    padding:10px;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
  }

  .nav.open{display:flex}

  .nav a{
    width:100%;
    text-align:center;
    padding:12px 10px;
  }

  .menu-toggle{display:block;margin-left:auto}

  .controls{grid-template-columns:1fr}
  .topic-grid{grid-template-columns:repeat(2,1fr)}
  .contact-box{grid-template-columns:1fr}
}

@media(max-width:480px){
  .header-inner{min-height:76px;padding:7px 14px}
  .brand,.brand img{width:56px;height:56px}
  .menu-toggle{width:42px;height:42px}
  .game-body{padding:14px}
  .question-area{min-height:300px;padding:14px}
  .answers{grid-template-columns:1fr 1fr}
  .answer-btn{min-height:62px;font-size:22px}
  .topic-grid{grid-template-columns:1fr}
  .hero{padding-top:40px}
  .hero p{font-size:18px}
}


/* =========================================================
   FINAL HEADER OVERRIDE
   Forces the logo to the LEFT and keeps navigation centered.
   This is intentionally last so it overrides older CSS.
   ========================================================= */

.site-header .header-inner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1400px !important;
  min-height: 96px !important;
  margin: 0 auto !important;
  padding: 10px 120px 10px 120px !important;
}

.site-header .brand {
  position: absolute !important;
  left: 28px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 72px !important;
  height: 72px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  z-index: 20 !important;
}

.site-header .brand img {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  max-width: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-header .nav {
  position: static !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: calc(100% - 170px) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 auto !important;
  padding: 0 !important;

  gap: 28px !important;
}

/* If the logo is accidentally nested inside nav by an older HTML file,
   pull it out visually and keep it at the far left. */
.site-header .nav .brand {
  position: absolute !important;
  left: 28px !important;
  top: 50% !important;
}

@media (max-width: 900px) {
  .site-header .header-inner {
    min-height: 82px !important;
    padding: 8px 70px 8px 82px !important;
    justify-content: flex-end !important;
  }

  .site-header .brand,
  .site-header .nav .brand {
    left: 16px !important;
    width: 58px !important;
    height: 58px !important;
  }

  .site-header .brand img,
  .site-header .nav .brand img {
    width: 58px !important;
    height: 58px !important;
  }

  .site-header .nav {
    max-width: none !important;
  }
}