:root{
  --bg-dim: 0.45;
  --btn-cyan: #b7f7ff;
  --btn-cyan-hover: #a3f1ff;
  --ink: #0b1116;
  --title-stroke: 6px;
}

*{ box-sizing: border-box; }
[hidden]{ display:none !important; }

html, body{
  margin:0;
  height:100%;
  font-family: Arial, Helvetica, sans-serif;
  color:#fff;
}

body.no-scroll{ overflow:hidden; }

/* ---------------- Background ---------------- */
body{
  background: url("./field.jpg") center/cover no-repeat fixed;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background: rgba(0,0,0,var(--bg-dim));
  pointer-events:none;
  z-index:0;
}

/* ---------------- App Layout ---------------- */
.app{
  position:relative;
  z-index:1;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:16px 16px 20px;
  gap:14px;
}
.hidden{ display:none !important; }

/* ---------------- Header (during quiz) ---------------- */
.header{
  width:min(900px,94vw);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.header.hidden{ display:none !important; }
.progress{ opacity:.92; font-weight:800; }
.timer{
  padding:6px 10px;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  display:inline-block;
  min-width:3.5ch;
  text-align:center;
  font-variant-numeric: tabular-nums;
  font-feature-settings:"tnum" 1, "lnum" 1;
}

/* ---------------- Start Screen ---------------- */
.start-screen{
  width:100%;
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
}
.start-screen h1{
  margin:0 0 8px;
  font-size: clamp(38px, 11vw, 92px);
  font-weight:900;
  color:#fff;
  -webkit-text-stroke: var(--title-stroke) #000;
  paint-order: stroke fill;
  text-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.start-screen p{
  margin:0 0 14px;
  font-size: clamp(14px, 2.6vw, 22px);
  font-weight:800;
  letter-spacing:.08em;
  text-shadow: 0 2px 0 #000, 0 8px 20px rgba(0,0,0,.35);
}
.start-screen .btn{
  background: var(--btn-cyan);
  color: var(--ink);
  font-size: clamp(18px, 4.2vw, 32px);
  font-weight: 900;
  padding: 14px 36px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 -3px 0 rgba(0,0,0,.08);
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.start-screen .btn:hover{ background: var(--btn-cyan-hover); transform:translateY(-1px); }
.start-screen .btn:active{ transform:translateY(1px); box-shadow:0 8px 20px rgba(0,0,0,.28), inset 0 2px 0 rgba(0,0,0,.10); }
.start-screen .byline{
  margin-top:8px;
  font-size: clamp(10px, 2.4vw, 14px);
  opacity:.96;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  letter-spacing:.04em;
}

/* --- College Edition badge overlay fix --- */
.title-wrap {
  position: relative;
  display: inline-block;
  text-align: center;
}

.college-badge {
  position: absolute;
  top: -50px;
  left: -35px;
  transform: rotate(-12deg);
  width: clamp(140px, 35vw, 220px);
  height: auto;
  z-index: 2;
  pointer-events: none;
  margin: 0;
}

.game-title {
  position: relative;
  z-index: 1;
}

@media (max-width: 420px){
  .college-badge {
    top: -20px;
    left: -8px;
    transform: rotate(-10deg);
    width: 180px;
  }
}




/* ---------------- Quiz & Results ---------------- */
.card, .result{
  width:min(900px,94vw);
  background:transparent;
  padding:0;
  margin:0;
}
.question{ font-size:clamp(20px, 2.6vw, 28px); font-weight:900; margin:4px 0 10px; }
.choices{ display:grid; gap:10px; }
.choices button{
  width:100%;
  padding:12px 14px;
  border:0;
  border-radius:10px;
  background: rgba(255,255,255,.94);
  color: var(--ink);
  font-weight:800;
  font-size:1.05rem;
  text-align:left;
  cursor:pointer;
}
.choices button:hover{ filter: brightness(.97); }
.choices button[disabled]{ opacity:.9; cursor: default; }
.correct{ background:#c7f5d8 !important; outline:2px solid #36c46a; }
.wrong  { background:#ffd2d9 !important; outline:2px solid #ff4b6b; }

.review{ display:grid; gap:10px; margin-top:10px; }
.rev{ background: rgba(0,0,0,.22); border-radius:10px; padding:10px; }
.rev .q{ font-weight:900; margin-bottom:4px; }
.rev .ex{ opacity:.85; margin-top:4px; }

#restartBtn{
  background: var(--btn-cyan);
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 800;
  padding: 10px 24px;
  border: 0;
  border-radius: 10px;
  margin-top: 16px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .12s ease, background-color .12s ease;
}
#restartBtn:hover{ background: var(--btn-cyan-hover); transform: translateY(-1px); }
#restartBtn:active{ transform: translateY(1px); box-shadow: 0 3px 10px rgba(0,0,0,.3); }

/* ---------------- Ads (Modal + Results only) ---------------- */
.ad-wrap{
  display:grid;
  place-items:center;
  margin:18px auto;
  padding:8px;
  border-radius:12px;
  background: rgba(0,0,0,0.18);
  border:1px solid rgba(255,255,255,0.18);
  width:100%;
}

/* results square sizes */
.ad-square ins.adsbygoogle{ width:336px !important; height:280px !important; }
@media (max-width:360px){
  .ad-square ins.adsbygoogle{ width:300px !important; height:250px !important; }
}

/* ---------------- Footer ---------------- */
body{ display:flex; flex-direction:column; min-height:100vh; }
.app{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:20px; }

.site-footer{
  margin-top:auto;
  width:100%;
  text-align:center;
  padding:20px 8px 24px;
  color:#fff;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(3px);
  z-index:5;
}
.hide-footer .site-footer{ display:none !important; }
.hide-footer{ padding-bottom:0 !important; }

/* Start page fixes footer to bottom of viewport for nice hero */
.start-page .site-footer{ position:sticky; bottom:0; z-index:5; }
.start-page .app{ padding-bottom:96px; }

/* ---------------- Topbar & How-to ---------------- */
.topbar{
  position: fixed;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 50;
  pointer-events: none;
}
.topbar .icon-btn{
  pointer-events: auto;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.4);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}
.topbar .icon-btn img{ width: 22px; height: 22px; filter: invert(1); }

.howto{
  position: fixed;
  top: 58px;
  left: 8px;
  right: 8px;
  z-index: 40;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  color:#fff;
  padding:10px 12px;
  backdrop-filter: blur(3px);
}
.howto h3{ margin:6px 0; }
.howto ol{ margin:6px 18px; }

/* ---------------- Modal (pop-up ad) ---------------- */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal.open{ display:flex; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.6); }
.modal-card{
  position: relative;
  background: #101418;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 12px;
  width: min(520px, 94vw);
  box-shadow: 0 12px 42px rgba(0,0,0,0.5);
  z-index: 1;
}
.modal-close{
  position:absolute;
  top:8px; right:8px;
  background: rgba(255,255,255,0.9);
  color:#111;
  border:0;
  border-radius:10px;
  width:32px; height:32px;
  cursor:pointer;
  font-weight:900;
}
.visually-hidden{
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px; height:1px;
  overflow:hidden;
}

/* ---------------- Static Pages Frame ---------------- */
/* Works with: <main class="page"> in about.html / privacy.html / contact.html */
.page{
  width:min(900px,94vw);
  margin: 30px auto 120px;
  padding: 24px 22px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  backdrop-filter: blur(3px);
  box-shadow: 0 12px 42px rgba(0,0,0,0.4);
  color:#fff;
}
.page h1{
  margin:0 0 14px;
  font-size: clamp(24px, 4.6vw, 40px);
  font-weight:900;
  
  paint-order: stroke fill;
  text-shadow: 0 4px 18px rgba(0,0,0,.4);
}
.page h2{ margin-top:20px; font-size:1.3rem; }
.page p, .page li{ line-height:1.6; opacity:.96; }
.page a{ color:#fa63ff; text-decoration:underline; }
.page .back-link{
  display:inline-block;
  margin-top:18px;
  padding:8px 12px;
  border-radius:8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
}

@media (max-width: 480px) {
  #result {
    padding-top: 40px;
  }
}

/* Force footer link colors */
.site-footer a,
footer a {
  color: #ffffff !important;      /* always white before being clicked */
  text-decoration: none;
}

.site-footer a:visited,
footer a:visited {
  color: #fa63ff !important;      /* purple after being clicked */
}