:root{--bg:#09090b;--panel:#121216;--panel2:#18181d;--muted:#a8a29e;--text:#fafaf9;--line:rgba(255,255,255,.09);--accent:#dc2626;--gold:#f59e0b;--green:#22c55e;--blue:#38bdf8;--shadow:0 20px 60px rgba(0,0,0,.45);--r:24px}*{box-sizing:border-box}html{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Arial,sans-serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,rgba(185,28,28,.22),transparent 38%),radial-gradient(circle at bottom right,rgba(245,158,11,.08),transparent 35%),var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}.app{max-width:1120px;margin:0 auto;padding:18px 16px 96px}.topbar{position:sticky;top:0;z-index:20;margin:0 -16px 18px;padding:12px 16px;background:rgba(9,9,11,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.toprow{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.brandmark{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#fafaf9,#a8a29e);color:#09090b;box-shadow:0 8px 30px rgba(255,255,255,.08)}.nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.nav button,.ghost{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);padding:10px 12px;border-radius:999px}.nav button.active{background:#fafaf9;color:#09090b}.hero{padding:34px 0 20px;display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:stretch}.heroCard,.card{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}.eyebrow{color:var(--gold);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px}.h1{font-size:clamp(42px,8vw,82px);line-height:.92;margin:12px 0 14px;font-weight:1000;letter-spacing:-.06em}.lead{font-size:18px;color:#d6d3d1;line-height:1.55}.ctaRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.primary{border:0;background:#fafaf9;color:#09090b;border-radius:18px;padding:14px 18px;font-weight:900}.danger{border:0;background:var(--accent);color:white;border-radius:18px;padding:14px 18px;font-weight:900}.miniStats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:20px;padding:16px}.stat b{font-size:28px;display:block}.stat span{color:var(--muted);font-size:13px}.sectionTitle{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:26px 0 14px}.sectionTitle h2{margin:0;font-size:30px;letter-spacing:-.04em}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.caseCard{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:22px;padding:18px;min-height:190px;display:flex;flex-direction:column;gap:12px;transition:.18s transform,.18s border-color}.caseCard:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.22)}.caseCard h3{margin:0;font-size:21px;letter-spacing:-.03em}.meta{display:flex;gap:7px;flex-wrap:wrap}.pill{font-size:12px;color:#e7e5e4;border:1px solid var(--line);background:rgba(255,255,255,.05);padding:6px 9px;border-radius:999px}.pill.easy{border-color:rgba(34,197,94,.35);color:#86efac}.pill.normal{border-color:rgba(245,158,11,.38);color:#fbbf24}.pill.hard{border-color:rgba(239,68,68,.38);color:#fca5a5}.pill.legend{border-color:rgba(255,255,255,.5);color:white;background:rgba(255,255,255,.12)}.muted{color:var(--muted)}.grow{flex:1}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.tools{display:grid;grid-template-columns:1fr 170px 150px;gap:10px;margin-bottom:14px}.input,.select{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);padding:13px 14px;border-radius:16px}.select option{color:#09090b}.play{max-width:820px;margin:0 auto}.bigStory{font-size:22px;line-height:1.55;color:#f5f5f4;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:26px;padding:22px}.hint{padding:14px 16px;border-radius:18px;background:rgba(245,158,11,.11);border:1px solid rgba(245,158,11,.25);margin:10px 0}.solution{padding:18px;border-radius:22px;background:rgba(220,38,38,.14);border:1px solid rgba(220,38,38,.35);line-height:1.55}.bottomNav{position:fixed;left:0;right:0;bottom:0;background:rgba(9,9,11,.86);backdrop-filter:blur(18px);border-top:1px solid var(--line);display:none;z-index:30}.bottomNavInner{display:grid;grid-template-columns:repeat(4,1fr);max-width:620px;margin:0 auto}.bottomNav button{background:transparent;border:0;color:var(--muted);padding:10px 8px 12px;font-size:12px}.bottomNav button.active{color:white}.seasonHero{display:grid;grid-template-columns:1fr .7fr;gap:14px}.progress{height:10px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:999px}.chapters{display:grid;gap:12px}.chapter{display:flex;align-items:center;justify-content:space-between;gap:14px;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:20px;padding:15px}.lock{opacity:.48}.ach{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);background:#fafaf9;color:#09090b;padding:12px 16px;border-radius:999px;font-weight:900;box-shadow:var(--shadow);z-index:50}.hide{display:none!important}@media(max-width:860px){.hero,.seasonHero{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.tools{grid-template-columns:1fr 1fr}.tools input{grid-column:1/-1}}@media(max-width:620px){.app{padding:12px 12px 92px}.nav{display:none}.bottomNav{display:block}.topbar{margin:0 -12px 10px;padding:10px 12px}.heroCard,.card{padding:18px;border-radius:22px}.h1{font-size:48px}.lead{font-size:16px}.grid{grid-template-columns:1fr}.miniStats{grid-template-columns:repeat(2,1fr)}.tools{grid-template-columns:1fr}.bigStory{font-size:19px}.sectionTitle h2{font-size:25px}.brand span{font-size:13px}.caseCard{min-height:auto}}

.infoGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.infoCard,.hostCard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:16px}
.infoCard h3,.hostCard h3{margin-top:0}
.quote{padding:10px;border-left:3px solid #f59e0b;margin:8px 0;background:rgba(255,255,255,.03)}
.miniItem{margin:8px 0}
.hostRow{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);padding:8px 0}
@media(max-width:800px){.infoGrid{grid-template-columns:1fr}}

.steps{
  display:grid;
  gap:14px;
}

.step{
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:16px;
}

.step span{
  min-width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#dc2626,#f59e0b);
  color:white;
  font-weight:900;
}

.step h3{
  margin:0 0 6px;
}

.step p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.nav a.active{
  color:white;
  background:rgba(255,255,255,.08);
}

/* iOS install popup - voeg toe aan style.css */
.iosPopupOverlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999;
}
.iosPopupBox {
  position: fixed;
  bottom: 2rem; left: 50%; transform: translateX(-50%);
  width: min(90vw, 380px);
  background: #1c1c1e;
  border: 1px solid #333;
  border-radius: 1rem;
  padding: 1.5rem;
  z-index: 1000;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.iosPopupTitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}
.iosPopupSteps {
  color: #ccc;
  padding-left: 1.2rem;
  line-height: 2;
  margin-bottom: 1rem;
}
.iosPopupNote {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════
   Schaduwdossier — nieuwe features CSS
   Toevoegen aan style.css
═══════════════════════════════════ */

/* ── Timer ── */
.timerBlock {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  margin: .75rem 0;
}
.timerLabel {
  font-size: .75rem;
  color: var(--muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.timerRow {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.timerDisplay {
  font-family: 'Space Mono', monospace;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold);
  min-width: 80px;
}

/* ── Vote ── */
.voteBlock {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  margin: .75rem 0;
}
.voteLabel {
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .75rem;
}
.voteRow {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ── Share popup ── */
.shareOverlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
}
.shareBox {
  position: fixed;
  bottom: 2rem; left: 50%; transform: translateX(-50%);
  width: min(90vw, 340px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  z-index: 1000;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.shareTitle {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}
.shareRow {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.shareRow a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: .5rem 1rem;
  border-radius: .5rem;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}

/* ── Speak button ── */
.speakRow {
  margin-top: .75rem;
}

/* ── Leaderboard ── */
.leaderboard { display: flex; flex-direction: column; gap: .75rem; }
.lbInput { display: flex; gap: .5rem; }
.lbTable {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.lbTable th {
  text-align: left;
  padding: .5rem .75rem;
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.lbTable td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.lbFirst td { color: var(--gold); font-weight: 700; }

/* ── iOS popup ── */
.iosPopupOverlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 999;
}
.iosPopupBox {
  position: fixed;
  bottom: 2rem; left: 50%; transform: translateX(-50%);
  width: min(90vw, 380px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.5rem;
  z-index: 1000;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.iosPopupTitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}
.iosPopupSteps {
  color: var(--muted);
  padding-left: 1.2rem;
  line-height: 2;
  margin-bottom: 1rem;
}
.iosPopupNote {
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

/* ── Daily case highlight ── */
.caseCard.daily {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold)33;
}

/* ── Scorebriefje ── */
.scoreOverlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 999;
  backdrop-filter: blur(4px);
}
.scoreBox {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(96vw, 480px);
  background: #0f0f11;
  border: 1px solid #c9a84c44;
  border-bottom: none;
  border-radius: 1.25rem 1.25rem 0 0;
  padding: 2rem 1.75rem 2.5rem;
  z-index: 1000;
  box-shadow: 0 -20px 60px rgba(0,0,0,.6);
  animation: slideUp .25s ease;
}
@keyframes slideUp {
  from { transform: translateX(-50%) translateY(100%); }
  to   { transform: translateX(-50%) translateY(0); }
}
.scoreHeader {
  text-align: center;
  margin-bottom: 1.5rem;
}
.scoreIcon { font-size: 2.5rem; margin-bottom: .5rem; }
.scoreTitle {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: #f0ece2;
  margin-bottom: .25rem;
}
.scoreCaseTitle {
  font-size: .85rem;
  color: #c9a84c;
  font-family: monospace;
  letter-spacing: .1em;
}
.scoreStats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
}
.scoreStat { text-align: center; }
.scoreStatVal {
  font-size: 1.4rem;
  font-weight: 700;
  color: #c9a84c;
  display: block;
}
.scoreStatLabel {
  font-size: .7rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: monospace;
}
.scorePreview {
  background: #090909;
  border: 1px solid #1a1a1a;
  border-radius: .75rem;
  padding: 1rem;
  font-size: .85rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  font-style: italic;
}
.scoreActions {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.scoreActions a, .scoreActions button {
  flex: 1;
  min-width: 120px;
  text-align: center;
  text-decoration: none;
}
.scoreClose {
  width: 100%;
  color: #333;
  font-size: .8rem;
}
/* ── Onderhoudsmodus ── */
.maintenanceWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 2rem;
}
.maintenanceBox {
  text-align: center;
  max-width: 400px;
}
.maintenanceBox h2 {
  font-size: 1.75rem;
  margin-bottom: .75rem;
}

/* ── Aankondigingsbanner ── */
.announceBanner {
  background: #c9a84c22;
  border-bottom: 1px solid #c9a84c44;
  color: #c9a84c;
  text-align: center;
  padding: .6rem 1rem;
  font-size: .875rem;
  font-weight: 500;
}
/* ── AI Solo Mode ── */
.aiCard {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.aiCard h3 {
  margin: 0 0 .4rem;
  font-size: 1rem;
}

.aiChatBox {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.aiChatIntro p {
  font-size: .85rem;
}

.aiMsgList {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-height: 400px;
  overflow-y: auto;
  padding-right: .25rem;
}

.aiChatEmpty {
  text-align: center;
  padding: 1rem 0;
  font-size: .9rem;
}

.aiMsg {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.aiMsg--user {
  align-items: flex-end;
}

.aiMsg--assistant {
  align-items: flex-start;
}

.aiMsgLabel {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .03em;
}

.aiMsg--user p {
  background: var(--primary, #c9a84c);
  color: #000;
  border-radius: 1rem 1rem 0 1rem;
  padding: .6rem .9rem;
  font-size: .95rem;
  max-width: 85%;
}

.aiMsg--assistant p {
  background: var(--surface2, #1e1e1e);
  color: var(--text);
  border-radius: 1rem 1rem 1rem 0;
  padding: .6rem .9rem;
  font-size: .95rem;
  max-width: 85%;
}

.aiInputRow {
  display: flex;
  gap: .5rem;
}

.aiInputRow .input {
  flex: 1;
}

.aiLoading {
  font-size: .85rem;
  color: var(--muted);
  text-align: center;
  padding: .5rem;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}