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

/* ====== Vars ====== */
:root{
  /* Fixed header height */
  --nav-height: 65px;

  /* Colors */
  --bg:#000; --fg:#fff; --muted:#9ca3af; --accent:#FF8C2F;

  /* Nav & submenu */
  --nav-bg:#0a0a0a; --nav-border:#1f1f1f; --nav-hover:#1b1b1b;
  --submenu-bg:#141414; --submenu-border:#1f1f1f; --submenu-hover:#1f1f1f;

  /* Cards / game */
  --card:#1f2937; --card2:#6B221E; --row-err:#EF4444; --row-dim:#6b7280;
  --shadow:0 10px 20px rgba(0,0,0,.35); --radius:12px; --maxw:900px;

  /* Scoreboard */
  --sb-card:#6B221E; --sb-row:#7C2A24; --sb-sep: rgba(255,255,255,.14);
}

/* ====== Base ====== */
*{ box-sizing:border-box; }
html { scroll-behavior:smooth; }
html,body{ height:auto; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--bg);
  color:var(--fg);
  /* Header is static now, so no push-down is needed */
  padding-top: 0;
}

/* Utilities */
.hidden{ display:none !important; }
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px; }
.stack-sm > * + *{ margin-top:12px; }
.stack-md > * + *{ margin-top:16px; }
.stack-lg > * + *{ margin-top:24px; }

/* ====== Header / Navigation ====== */
/* Static (scrolls with page), fixed 65px tall */
.site-header{
  position: relative; /* non-fixed, but positioned so children can anchor */
  height: var(--nav-height);
  z-index: 1000;
  background:var(--nav-bg);
  border-bottom:1px solid var(--nav-border);
}
.site-header .nav-inner{
  max-width:1100px; margin:0 auto; height:100%; padding:0 16px;
  display:flex; align-items:center; justify-content:center; gap:24px; position:relative;
}
.site-header .brand{
  position:absolute; left:16px; top:0; height:100%;
  display:flex; align-items:center; justify-content:flex-start;
}
.site-header .brand img{ height:36px; width:auto; display:block; }

.site-header .nav{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:16px;
}
.site-header .nav > li{ position:relative; }
.site-header .nav a{
  color:#fff; text-decoration:none; font-weight:700;
  padding:8px 12px; border-radius:8px; line-height:1;
  display:inline-flex; align-items:center; gap:6px;
}
.site-header .nav a:hover{ background:var(--nav-hover); }
.site-header .caret{ opacity:.9; font-size:.85em; }

/* Desktop submenu */
.site-header .dropdown-menu{
  position:absolute; top:100%; left:0;
  background:var(--submenu-bg); border:1px solid var(--submenu-border);
  border-radius:10px; min-width:180px; padding:8px; display:none;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.site-header .dropdown-menu a{
  display:block; padding:8px 10px; border-radius:8px; font-weight:600;
}
.site-header .dropdown-menu a:hover{ background:var(--submenu-hover); }
.site-header .nav li.dropdown:hover > .dropdown-menu,
.site-header .nav li.dropdown:focus-within > .dropdown-menu{
  display:block;
}

/* Mobile */
.site-header .hamburger{
  position:absolute; right:16px; height:38px; width:42px; display:none;
  align-items:center; justify-content:center;
  border:1px solid var(--nav-border); border-radius:8px;
  background:#121212; cursor:pointer;
}
/* Cleaned up duplication: span vs pseudos */
.site-header .hamburger span{
  display:block; width:22px; height:2px; background:#fff;
}
.site-header .hamburger::before,
.site-header .hamburger::after{
  content:''; position:absolute; left:10px;
  width:22px; height:2px; background:#fff;
}
.site-header .hamburger::before{ top:14px; }
.site-header .hamburger::after { bottom:14px; }

/* Mobile drawer: appear just below header, overlaying page content */
.site-header .mobile-wrap{
  position: absolute;
  top: var(--nav-height);
  left: 0; right: 0;
  display: none;
  background:#0d0d0d;
  border-bottom:1px solid var(--nav-border);
  z-index: 999; /* below header, above content */
}
.site-header .mobile-wrap.open{ display:block; }

.site-header .mobile-nav{
  list-style:none; margin:0; padding:8px;
  display:flex; flex-direction:column; gap:8px;
}
.site-header .mobile-nav a{
  display:block; padding:10px 12px; border-radius:8px; font-weight:700;
  text-decoration:none; color:#fff;
}
.site-header .mobile-nav a:hover{ background:var(--nav-hover); }
.site-header .mobile-sub{
  display:none; margin:6px 0 0 10px; padding-left:10px; border-left:2px solid var(--nav-border);
}
.site-header .mobile-dropdown.open .mobile-sub{ display:block; }

/* Collapse desktop menu under 800px */
@media (max-width: 800px){
  .site-header .nav{ display:none; }
  .site-header .hamburger{ display:flex; }
}

/* ====== Hero / Main ====== */
/* Header is in normal flow now; fill the viewport without subtracting it */
.main{
  /* Safe for all browsers/toolchains */
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.hero-image{
  max-width: min(480px, 90vw);
  height:auto; display:block;
}

/* ====== Buttons & Inputs (global, used by game/scoreboard) ====== */
.btn{
  padding:.9rem 1.6rem; border-radius:.6rem; font-weight:700; font-size:18px;
  color:#fff; background-image:linear-gradient(135deg,#FF8C2F 0%, #FEAA54 100%);
  box-shadow:0 4px 15px rgba(0,0,0,.2); border:none; cursor:pointer; transition:transform .2s;
  text-align:center; display:inline-block; min-width:180px; text-decoration:none;
}
.btn:hover{ transform:scale(1.05); }
.btn:active{ transform:scale(.95); }
.btn:disabled{ opacity:.5; cursor:not-allowed; background-image:none; background:#6b7280; }
.button-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; width:100%; }

.input-field{
  width:100%; padding:1rem; border-radius:.6rem; background:var(--card); color:#fff;
  border:1px solid #374151; font-size:16px;
}
.radio-label{ display:flex; align-items:center; padding:.9rem; border-radius:.6rem; background:#374151; color:#fff; cursor:pointer; user-select:none; }
.radio-label:hover{ background:#4b5563; }
.radio-label input{ margin:0; }
.radio-text{ margin-left:.75rem; }

/* ====== Game bits (kept summarized) ====== */
.screen{ width:100%; display:flex; flex-direction:column; align-items:center; }
.menu-panel{ width:100%; max-width:460px; }
.logo{ width:100%; max-width:360px; height:auto; display:block; margin:0 auto 16px; }
.topbar{
  width:100%; max-width:768px; margin:0 auto 8px; padding:8px 8px;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:8px;
}
.topbar-timer{ grid-column:2; text-align:center; font-weight:700; font-size:22px; white-space:nowrap; }
.topbar-reset{ grid-column:3; justify-self:end; }
.grid-container{
  display:grid; gap:.5rem; width:min(92vw, 88vh); height:min(92vw, 88vh);
  touch-action:none; user-select:none; grid-template-columns:repeat(var(--grid-size), 1fr);
}
.grid-item{
  display:flex; align-items:center; justify-content:center; background:var(--card); color:#fff;
  font-weight:700; border-radius:.6rem; cursor:pointer; transition:all .2s; box-shadow:0 4px 6px rgba(0,0,0,.1);
  font-size:clamp(.6rem, 4.5vw, 2.2rem);
}
.grid-item.correct{ opacity:.5; background:var(--row-dim); }
.grid-item.incorrect{ background:var(--row-err); }
.grid-item.correct-scale{ transform:scale(.95); }
#message-box{
  position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-50%); z-index:1000;
  background:var(--card2); padding:24px; border-radius:1rem; box-shadow:var(--shadow); max-width:90%; text-align:center;
}
.msg-title{ font-size:20px; font-weight:700; margin:0 0 8px; }

/* ====== Scoreboard bits (kept summarized) ====== */
.card{ width:100%; background:var(--sb-card); color:#fff; padding:16px; border-radius:var(--radius); box-shadow: var(--shadow); }
h2{ font-size: clamp(24px, 4vw, 32px); margin: 0 0 16px; text-align:center; }
h3{ font-size: clamp(20px, 3.5vw, 24px); margin: 0 0 8px; text-align:center; }
h4{ font-size: clamp(18px, 3vw, 20px); margin: 0 0 8px; }
.muted{ color: var(--muted); }
.small{ font-size: 12px; }
.break-words{ word-break: break-word; overflow-wrap: anywhere; }
.orange-text{ color: var(--accent); }
.actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin: 16px 0; }
.scoreboard-section{ width:100%; }
.score-row{
  display:grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:8px; font-size:14px; padding:10px 8px; border-radius:8px; background: var(--sb-row);
}
.rows > .score-row + .score-row { margin-top: 6px; border-top: 1px solid var(--sb-sep); }
.score-header{
  font-weight:700; color: var(--muted); padding: 0 8px 8px;
  display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:8px; border-bottom: 1px solid var(--sb-sep);
}
#your-time{text-align:center;}
/* Mobile tweaks */
@media (max-width: 520px){
  .logo{ max-width:300px; }
  .button-row{ flex-direction:column; }
  .button-row .btn{ width:100%; min-width:0; }
  .topbar{ padding:8px 6px; grid-template-columns: 1fr auto 1fr; }
  .topbar-timer{ font-size:20px; }
  .grid-container{ width:min(96vw, 84vh); height:min(96vw, 84vh); gap:.4rem; }
  .grid-item{ border-radius:.5rem; }
}