/* Feestelijk lettertype voor titels; meegeleverd in public/fonts/ zodat het ook zonder internet werkt */
@font-face { font-family: "Quizfont"; src: url("/fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Quizfont"; src: url("/fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 400 600; font-display: swap; }
* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { background: #0f172a; color: #f8fafc; display: flex; justify-content: center; min-height: 100vh; padding: 16px; }
.card { background: #1e293b; border-radius: 12px; padding: 24px; max-width: 600px; width: 100%; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
h1, h2, h3 { margin-bottom: 16px; text-align: center; }
button { width: 100%; padding: 14px; margin: 8px 0; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.2s; }
button:disabled { opacity: 0.45; filter: grayscale(1); cursor: not-allowed; } /* uitgeschakeld = grijs, dus niet oplichtend */
.btn-primary { background: #3b82f6; color: white; }
.btn-primary:active { background: #2563eb; }
.btn-pause { background: #f59e0b; color: white; }
.btn-option { background: #334155; color: white; text-align: left; }
.btn-option:active { background: #475569; }
.btn-ok { background: #22c55e; color: #052e16; }
input[type="text"], input[type="number"], input[type="search"] { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #475569; background: #0f172a; color: white; margin-bottom: 12px; font-size: 16px; }
.badge { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 12px; font-weight: bold; background: #475569; }
.alert-box { background: #ef4444; color: white; padding: 12px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; animation: shake 0.3s; }
.hidden { display: none !important; }
.media-img { width: 100%; max-height: 250px; object-fit: cover; border-radius: 8px; margin-bottom: 12px; }
ul { list-style: none; margin: 12px 0; }
li { padding: 10px; border-bottom: 1px solid #334155; display: flex; justify-content: space-between; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Meerkeuze (tv en telefoon) */
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.2vw, 20px); }
@media (max-width: 600px) { .qgrid { grid-template-columns: 1fr; } }
.qo { background: #334155; color: #fff; border-radius: 10px; padding: clamp(10px, 1.4vw, 24px); font-size: clamp(16px, 2.2vw, 40px); text-align: left; }
.qo .letter { color: #38bdf8; margin-right: 0.4em; }
.qo.correct { background: #15803d; border: 2px solid #4ade80; font-weight: bold; }

/* Resultaat-iconen */
.ico-ok { color: #4ade80; font-weight: 900; }
.ico-no { color: #f87171; font-weight: 900; }

/* Tabellen voor nakijken en uitslag */
.rtable { width: 100%; border-collapse: collapse; font-size: clamp(13px, 1.5vw, 28px); }
.rtable th { text-align: left; color: #94a3b8; font-weight: 600; padding: 0.4em 0.6em; border-bottom: 2px solid #334155; }
.rtable td { padding: 0.45em 0.6em; border-bottom: 1px solid #1e293b; vertical-align: top; }
.rtable tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
.rtable td.good { color: #86efac; }
.rtable td.bad { color: #fca5a5; }
.rtable td.dim { color: #94a3b8; }
.rtable td.num, .rtable th.num { text-align: right; white-space: nowrap; }

/* Foto blur en logo's */
.blurbox { position: relative; overflow: hidden; border-radius: 14px; background: #0b1220; display: flex; align-items: center; justify-content: center; }
.blurbox img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.9s ease; }
.blurbox .ph { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: bold; color: #cbd5e1; background: linear-gradient(135deg, #334155, #1e293b); text-align: center; padding: 1em; }
/* Het logo onvervormd: het kader neemt de verhouding van het logo over (zoals bij foto blur) */
.logobox canvas { width: 100%; height: 100%; display: block; background: #fff; }

/* Tijdlijn (Hitster) */
.tl { display: flex; flex-direction: column; gap: 0; margin: 10px 0; }
.tlcard { background: linear-gradient(135deg, #7c3aed, #db2777); border-radius: 10px; padding: 10px 14px; text-align: center; }
.tlcard .yr { font-size: 26px; font-weight: 900; }
.tlcard .tt { font-size: 13px; opacity: 0.9; }
.tlslot { background: transparent; border: 2px dashed #475569; color: #94a3b8; border-radius: 8px; padding: 8px; margin: 4px 0; font-size: 14px; text-align: center; font-weight: bold; }
.tlslot.sel { background: #2563eb; border-color: #93c5fd; color: #fff; }

/* Tekenen */
.padwrap { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #fff; border-radius: 10px; touch-action: none; overflow: hidden; }
.padwrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.swatches { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; margin: 0; padding: 0; width: 34px; }
.swatch.sel { border-color: #fff; }

/* Voortgang-chips */
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.tchip { background: #334155; border-radius: 999px; padding: 0.3em 1.1em; }
.tchip.done { background: #15803d; }
.tchip.off { opacity: 0.4; }

/* Past op elk scherm: lange woorden afbreken, niets buiten de rand */
html, body { max-width: 100%; overflow-x: hidden; }
.card, .card * { overflow-wrap: anywhere; }
.card { max-width: min(600px, 100%); }
img, canvas, video { max-width: 100%; }
@media (max-width: 380px) { body { padding: 8px; } .card { padding: 16px; } button { padding: 12px; font-size: 15px; } }
@media (min-width: 900px) and (orientation: landscape) { .card { max-width: 720px; } }

h1, h2, h3, .tv-title, .huge, .pill, .tchip, .bigtxt, .spot-team, .spot-rank, .rank-card, #winner-banner, .btn-primary { font-family: "Quizfont", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* ---------- Naam en logo van de quiz (zie public/media/logo/) ---------- */
.brand { display: flex; align-items: center; justify-content: center; gap: 0.5em; }
.brand-logo { display: block; width: auto; object-fit: contain; }
.brand-text { text-align: left; min-width: 0; }
.brand-name { font-weight: 800; line-height: 1.05; }
.brand-sub { font-weight: 600; color: #fbbf24; margin-top: 0.15em; }
.brand-groot .brand-logo { height: clamp(90px, 24vh, 320px); max-width: 60vw; filter: drop-shadow(0 1vh 2.5vh rgba(0, 0, 0, 0.35)); }
.brand-groot .brand-name { font-size: clamp(38px, 6vw, 110px); }
.brand-lobby { gap: 1.2vw; margin-bottom: 1vh; }
.brand-lobby .brand-logo { height: clamp(54px, 11vh, 150px); filter: drop-shadow(0 0.6vh 1.5vh rgba(0, 0, 0, 0.3)); }
.brand-lobby .brand-name { font-size: clamp(30px, 4.6vw, 86px); }
.brand-lobby .brand-sub { font-size: clamp(14px, 1.6vw, 30px); }
.brand-klein { gap: 0.6vw; }
.brand-klein .brand-logo { height: clamp(28px, 5.5vh, 72px); }
.brand-klein .brand-name { font-size: clamp(14px, 1.6vw, 30px); }
.brand-tel { margin: 0 0 12px; gap: 12px; }
.brand-tel .brand-logo { height: 64px; }
.brand-tel .brand-name { font-size: 26px; }
.brand-tel .brand-sub { font-size: 14px; }
/* Aftelklok vóór de start */
.preshow { text-align: center; }
.preshow .ps-label { font-weight: 700; }
.preshow .ps-time { font-weight: 800; font-variant-numeric: tabular-nums; color: #fbbf24; letter-spacing: 0.02em; }
.preshow.ps-done .ps-label { color: #fbbf24; }
.preshow-tel { background: rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }
.preshow-tel .ps-label { font-size: 15px; }
.preshow-tel .ps-time { font-size: 30px; }