:root{
  --bg:#0b1220;           /* page background (dark) */
  --panel:#d1d5db;        /* main panel background (slightly darker gray) */
  --card:#e5e7eb;         /* inner card background (light gray for contrast) */
  --text:#e2e8f0;         /* outside text (on dark bg) */
  --panelText:#0f172a;    /* text color within panel */
  --muted:#94a3b8;        /* secondary text (outside) */
  --panelMuted:#475569;   /* secondary text (inside panel) */
  --accent:#2563eb;       /* primary accent */
  --border:#cbd5e1;       /* borders on light */
  --success:#16a34a;      /* green for correct answers */
  --error:#dc2626;        /* red for incorrect answers */
}
*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg); }
.masthead{ padding: 8px 0 0; position: relative; z-index: 1; }
.container{
  max-width: 980px; margin: 18px auto; padding: 14px 18px;
  background: rgba(255,255,255,0.85); /* slightly more transparent */
  border:1px solid #e5e7eb; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  color: var(--panelText);
  backdrop-filter: saturate(120%) blur(1px);
  -webkit-backdrop-filter: saturate(120%) blur(1px);
  background-clip: padding-box;
}
header{ padding:8px 0 12px; border-bottom:none; margin-bottom:12px; }
header h1{ margin:0 0 16px; font-size: 28px; }
/* Site title flair */
.site-title{ display:block; text-align:center; margin:0 0 4px; }
.site-title .subtitle{ font-size: 14px; color: var(--panelMuted); font-weight:500; }
nav{ display:flex; gap:10px; justify-content: space-evenly; align-items:center; flex-wrap: wrap; 
  background: transparent; /* inherit container background */
  border: none; border-radius: 0; padding: 8px 10px;
}
nav a{
  text-decoration:none; color:var(--panelText); font-weight:600;
  background: #ffffff; /* lighter pill than container */
  border:1px solid #eef2f7; border-radius: 999px; padding:6px 12px;
  transition: all .15s ease;
}
nav a:hover{ background: #ffffff; border-color:#e5e7eb; color:var(--panelText); }
nav a.active{ background: rgba(37,99,235,0.18); border-color: #2563eb; color: #0b1220; }
nav a.disabled{ opacity: .5; pointer-events: none; cursor: not-allowed; }
.card{ background:#ffffff; border:1px solid #eef2f7; border-radius:10px; padding:16px; margin-bottom:16px; color: var(--panelText); }
button{ background:var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 12px; cursor:pointer; }
button[disabled]{ opacity:.6; cursor: default; }
input, textarea, select{
  width:100%; padding:10px; border:1px solid var(--border); border-radius:8px;
  background:#f8fafc; color:var(--panelText);
}
input::placeholder, textarea::placeholder{ color:#64748b; }
label{ display:block; font-weight:600; margin:10px 0 6px; }
.row{ display:flex; gap:16px; }
.row > *{ flex:1; }
.muted{ color:var(--panelMuted); }
.pill{ display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--border); font-size:12px; }

/* Trivia-specific styles */
.trivia-container{
  max-width: 700px;
  margin: 0 auto;
}

.score-display{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  padding: 12px;
  background: #f0f9ff;
  border: 2px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
}

.question-card{
  background: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  color: var(--panelText);
}

.question-text{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.5;
}

.answers-container{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.answer-button{
  background: #ffffff;
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--panelText);
  font-weight: 500;
}

.answer-button:hover:not(.answered){
  background: #f0f9ff;
  border-color: var(--accent);
}

.answer-button.answered{
  cursor: not-allowed;
}

.answer-button.correct{
  background: #dcfce7;
  border-color: var(--success);
  color: #166534;
  font-weight: 600;
}

.answer-button.incorrect{
  background: #fee2e2;
  border-color: var(--error);
  color: #991b1b;
  font-weight: 600;
}

.answer-button.disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

.feedback-icon{
  margin-left: 8px;
  font-weight: bold;
}

.next-button{
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 20px;
  transition: all 0.2s ease;
}

.next-button:hover{
  opacity: 0.9;
}

.quiz-complete{
  text-align: center;
  padding: 40px;
}

.final-score{
  font-size: 48px;
  font-weight: bold;
  color: var(--accent);
  margin: 20px 0;
}

.restart-button{
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
}

.restart-button:hover{
  opacity: 0.9;
}

.loading{
  text-align: center;
  padding: 40px;
  color: var(--panelMuted);
}

.spinner{
  width:24px;
  height:24px;
  border:3px solid #d1d5db;
  border-top-color:var(--accent);
  border-radius:50%;
  display:inline-block;
  animation:spin .7s linear infinite;
  vertical-align:middle;
  margin-right: 8px;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

.hidden{
  display:none;
}

/* Utility helpers */
.text-center{
  text-align: center;
}

.text-success{
  color: var(--success);
}

.text-error{
  color: var(--error);
}