/* ============================================================
   HET GEHEIM VAN ROSENDAEL — filmisch design system
   Zomers · mysterieus · magisch  (glas, goud, schemergroen)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --ink: #05100b;
  --night0: #061510; --night1: #0a1f17; --night2: #112c22;
  --deep: #081912; --pine: #0f2c23; --moss: #173c30;
  --panel: rgba(16, 44, 34, .58); --panel-solid: #10281f;
  --line: rgba(216, 180, 90, .22); --line-strong: rgba(216, 180, 90, .45);
  --gold: #d8b45a; --gold-lt: #eed89a; --gold-xd: #a9822f;
  --cream: #ede6d2; --paper: #ecdfb9; --paper-d: #d3bf8d; --paper-xd: #a08a5c;
  --sage: #8fb09c; --sage-lt: #cfe0d4;
  --red: #b05543; --green-ok: #8fd39b;
  --font-head: 'Cinzel', 'Trajan Pro', serif;
  --font-body: 'EB Garamond', Georgia, serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;
  --ease-soft: cubic-bezier(.22, .8, .3, 1);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5), 0 4px 16px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--deep) radial-gradient(130% 100% at 50% 0%, var(--moss), var(--pine) 45%, var(--deep) 100%) fixed;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  animation: bodyIn 1.2s var(--ease-soft);
}
@keyframes bodyIn { from { opacity: 0; } to { opacity: 1; } }

h1, h2, h3, .pxfont { font-family: var(--font-head); font-weight: 600; line-height: 1.25; }
h1 {
  font-size: clamp(30px, 6vw, 54px);
  letter-spacing: .08em;
  background: linear-gradient(100deg, #f6e7bd 0%, var(--gold) 28%, #fff6d8 46%, #b98f3e 62%, var(--gold) 78%, #eed89a 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
  filter: drop-shadow(0 2px 14px rgba(216, 180, 90, .35)) drop-shadow(0 1px 2px rgba(0,0,0,.6));
  animation: titleShine 8s ease-in-out infinite;
}
@keyframes titleShine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
h2 { font-size: clamp(21px, 3.4vw, 30px); color: var(--gold-lt); letter-spacing: .05em; margin-bottom: 14px; text-shadow: 0 2px 18px rgba(216,180,90,.22); }
h3 { font-size: clamp(15px, 2.2vw, 18px); color: var(--sage-lt); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; font-weight: 500; }
a { color: var(--gold-lt); text-decoration-color: rgba(216,180,90,.4); transition: color .3s; }
a:hover { color: #fff2cf; }
p { margin-bottom: 12px; }
::selection { background: rgba(216, 180, 90, .3); }

/* ---------- glaspanelen ---------- */
.panel {
  position: relative;
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 240, 200, .07);
  padding: 26px 28px;
  transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft), border-color .5s;
}
.panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, transparent 4%, rgba(238, 216, 154, .55) 50%, transparent 96%);
}
.panel::after { content: none; }
.panel:hover { border-color: var(--line-strong); }
.panel.gold { border-color: var(--line-strong); box-shadow: var(--shadow-lg), 0 0 40px rgba(216, 180, 90, .1), inset 0 1px 0 rgba(255,240,200,.1); }

/* ---------- knoppen ---------- */
.btn {
  position: relative; overflow: hidden;
  font-family: var(--font-head); font-weight: 600;
  font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
  color: #241a08;
  background: linear-gradient(180deg, #f0dca0 0%, var(--gold) 55%, #c1953f 100%);
  border: none; border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(216, 180, 90, .25), 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft), filter .3s;
  display: inline-block; text-decoration: none; text-align: center;
}
.btn::after {
  content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); transition: left .6s var(--ease-soft);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(216,180,90,.35), 0 3px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5); }
.btn:hover::after { left: 120%; }
.btn:active { transform: translateY(0) scale(.97); }
.btn.ghost {
  background: rgba(16, 44, 34, .55); color: var(--gold-lt);
  border: 1px solid var(--line-strong);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn.ghost:hover { background: rgba(23, 60, 48, .7); }
.btn.small { font-size: 11.5px; padding: 9px 18px; letter-spacing: .14em; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }

/* ---------- formuliervelden ---------- */
input[type=text], input[type=password], textarea, select {
  font-family: var(--font-body);
  font-size: 19px;
  background: rgba(6, 21, 16, .6);
  color: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  width: 100%;
  outline: none;
  transition: border-color .35s, box-shadow .35s, background .35s;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 4px rgba(216, 180, 90, .12), 0 0 24px rgba(216, 180, 90, .12);
  background: rgba(8, 25, 18, .75);
}
::placeholder { color: rgba(207, 224, 212, .35); font-style: italic; }
select { appearance: none; }

/* focus-visible voor toetsenbord-navigatie */
.btn:focus-visible, .tabbar button:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; }
.opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bingo-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.arch:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ---------- badges/punten ---------- */
.pts {
  font-family: var(--font-head); font-size: 12px; letter-spacing: .1em;
  background: rgba(216, 180, 90, .12); color: var(--gold-lt);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 4px 12px; white-space: nowrap; display: inline-block;
}
.tag { font-family: var(--font-head); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--sage); }
.ok { color: var(--green-ok); }
.err { color: #f0a293; }

/* ---------- perkament ---------- */
.parchment-wrap { position: relative; margin: 30px 0; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .45)); }
.parchment {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(120, 90, 40, .12), transparent 60%),
    radial-gradient(120% 60% at 50% 100%, rgba(120, 90, 40, .16), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, #e2d2a4 50%, var(--paper) 100%);
  color: #3a2c18;
  border-left: 1px solid rgba(120, 90, 40, .35);
  border-right: 1px solid rgba(120, 90, 40, .35);
  overflow: hidden;
  max-height: 0;
  transition: max-height 2s var(--ease-soft);
}
.parchment.open { max-height: 3200px; }
.parchment-inner { padding: 34px 34px 28px; }
.parchment h2, .parchment h3 { color: #6b4a1e; text-shadow: none; -webkit-text-fill-color: currentColor; background: none; filter: none; }
.parchment .rol {
  height: 30px; position: relative; z-index: 2;
  background: linear-gradient(180deg, #8a6f3e, #6d5630 45%, #4c3b1e);
  border-radius: 15px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 240, 200, .25);
  transition: transform .4s var(--ease-soft);
}
.parchment-wrap:hover .rol:first-child { transform: translateY(-1px); }
.parchment .rol::before, .parchment .rol::after {
  content: ''; position: absolute; top: 2px; width: 20px; height: 26px; border-radius: 8px;
  background: radial-gradient(circle at 35% 35%, #a0803f, #5d4826 70%);
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
.parchment .rol::before { left: -12px; } .parchment .rol::after { right: -12px; }
.prog-row { display: flex; gap: 18px; padding: 13px 0; border-bottom: 1px solid rgba(107, 74, 30, .22); }
.prog-row:last-child { border-bottom: none; }
.prog-tijd { font-family: var(--font-head); font-size: 13px; letter-spacing: .06em; color: #8e3b2f; min-width: 68px; padding-top: 5px; }
.prog-titel { font-weight: 600; font-size: 21px; font-family: var(--font-accent); }
.prog-waar { color: #6b4a1e; font-size: 16px; font-style: italic; }
.prog-info { font-size: 16.5px; color: #4a3a20; }

/* ---------- demo-banner ---------- */
#demo-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
  background: linear-gradient(90deg, rgba(120, 50, 35, .92), rgba(150, 70, 45, .92));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #ffe9d6;
  font-family: var(--font-head); font-size: 11px; letter-spacing: .12em;
  text-align: center; padding: 9px 12px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .4);
}

/* ---------- filmisch vignet + zachte korrel ---------- */
.crt::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 900;
  background:
    radial-gradient(130% 110% at 50% 42%, transparent 58%, rgba(3, 8, 6, .55) 100%),
    linear-gradient(180deg, rgba(3, 8, 6, .25), transparent 12% 88%, rgba(3, 8, 6, .3));
}
.crt::before {
  content: ''; position: fixed; inset: -50%; pointer-events: none; z-index: 901; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); }
  40% { transform: translate(3%,-4%); } 60% { transform: translate(-3%,-2%); } 80% { transform: translate(2%,4%); }
}

/* ---------- grid-hulpjes ---------- */
.grid { display: grid; gap: 18px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.center { text-align: center; }
.muted { color: rgba(207, 224, 212, .62); }
.spacer { height: 26px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------- verteller-cursor ---------- */
.type-cursor::after { content: '❘'; animation: blink 1.1s ease-in-out infinite; color: var(--gold); margin-left: 2px; }
@keyframes blink { 0%,100% { opacity: 0; } 50% { opacity: 1; } }

@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)} }
.shake { animation: shake .5s var(--ease-soft); }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- zwevende tabbalk (app) ---------- */
.tabbar {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: min(720px, calc(100% - 20px));
  z-index: 100;
  display: flex; justify-content: space-around; align-items: stretch;
  background: rgba(8, 25, 18, .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom) / 2);
}
.tabbar button {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-head); font-size: 10px; letter-spacing: .14em;
  color: rgba(207, 224, 212, .55);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: 16px;
  transition: color .4s, background .4s, transform .4s var(--ease-soft), box-shadow .4s;
}
.tabbar button .ticon { font-size: 21px; line-height: 1; transition: transform .4s var(--ease-soft); filter: grayscale(.4) brightness(.9); }
.tabbar button:hover .ticon { transform: translateY(-2px); }
.tabbar button.active {
  color: var(--gold-lt);
  background: linear-gradient(180deg, rgba(216, 180, 90, .18), rgba(216, 180, 90, .06));
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 4px 18px rgba(216, 180, 90, .15);
}
.tabbar button.active .ticon { filter: none; transform: translateY(-2px) scale(1.12); }

.view { display: none; padding: 20px 16px 130px; max-width: 780px; margin: 0 auto; }
.view.active { display: block; animation: viewIn .7s var(--ease-soft); }
@keyframes viewIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- kaarten in de app ---------- */
.card { margin-bottom: 18px; }
.view.active .card { animation: viewIn .7s var(--ease-soft) backwards; }
.view.active .card:nth-child(2) { animation-delay: .08s; }
.view.active .card:nth-child(3) { animation-delay: .16s; }
.view.active .card:nth-child(4) { animation-delay: .24s; }
.view.active .card:nth-child(5) { animation-delay: .3s; }
.card .done-band {
  font-family: var(--font-head); font-size: 11px; letter-spacing: .14em;
  color: #0d2418; background: linear-gradient(180deg, #b8e2c0, #8fd39b);
  border-radius: 999px; display: inline-block; padding: 4px 14px; margin-bottom: 10px;
  box-shadow: 0 3px 12px rgba(143, 211, 155, .3);
}
.opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 18px; color: var(--cream);
  background: rgba(6, 21, 16, .5);
  border: 1px solid rgba(216, 180, 90, .14); border-radius: 12px;
  padding: 12px 16px; margin: 8px 0;
  transition: border-color .35s, background .35s, transform .35s var(--ease-soft), box-shadow .35s;
}
.opt:hover { border-color: var(--line-strong); background: rgba(16, 44, 34, .6); transform: translateX(4px); }
.opt.sel { border-color: var(--gold); background: rgba(216, 180, 90, .1); }
.opt.goed { border-color: var(--green-ok); background: rgba(143, 211, 155, .1); box-shadow: 0 0 20px rgba(143, 211, 155, .12); }
.opt.fout { border-color: var(--red); background: rgba(176, 85, 67, .12); }

.letterbox {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 62px; margin: 4px;
  font-family: var(--font-head); font-size: 26px; font-weight: 600; color: var(--gold-lt);
  background: linear-gradient(180deg, rgba(216, 180, 90, .14), rgba(216, 180, 90, .04));
  border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 240, 200, .12);
  text-shadow: 0 0 18px rgba(238, 216, 154, .5);
  transition: transform .5s var(--ease-soft), box-shadow .5s;
}
.letterbox:not(.empty) { animation: letterPop .7s var(--ease-soft); }
.letterbox:not(.empty):hover { transform: translateY(-4px) rotate(-2deg); }
@keyframes letterPop { 0% { transform: scale(.4) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.12) rotate(2deg); } 100% { transform: scale(1); opacity: 1; } }
.letterbox.empty { color: rgba(207, 224, 212, .25); border-color: var(--line); background: rgba(6, 21, 16, .4); text-shadow: none; }

/* bingo */
.bingo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 100%; overflow: hidden; }
.bingo-cell {
  aspect-ratio: 1; padding: 5px; cursor: pointer; position: relative; min-width: 0;
  background: rgba(6, 21, 16, .5);
  border: 1px solid rgba(216, 180, 90, .14); border-radius: 10px;
  font-size: 11.5px; line-height: 1.15; color: var(--sage-lt);
  display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
  font-family: var(--font-body); word-break: break-word; hyphens: auto;
  transition: all .4s var(--ease-soft);
}
.bingo-cell:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.bingo-cell.checked {
  background: radial-gradient(80% 80% at 50% 40%, rgba(216, 180, 90, .22), rgba(216, 180, 90, .06));
  border-color: var(--gold); color: var(--gold-lt);
  box-shadow: 0 0 22px rgba(216, 180, 90, .18);
}
.bingo-cell.checked::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; color: rgba(238, 216, 154, .28); font-family: var(--font-accent);
}

/* foto-kaarten */
.foto-thumb {
  width: 100%; border-radius: 12px; border: 1px solid var(--line-strong);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  transition: transform .5s var(--ease-soft), box-shadow .5s;
}
.foto-thumb:hover { transform: scale(1.02); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }

/* scorebord */
.score-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 10px;
  border-bottom: 1px solid rgba(216, 180, 90, .1);
  border-radius: 10px;
  transition: background .35s;
}
.score-row:hover { background: rgba(216, 180, 90, .06); }
.score-rank { font-family: var(--font-head); font-size: 15px; width: 38px; color: var(--gold-xd); }
.score-name { flex: 1; font-size: 20px; }
.score-pts { font-family: var(--font-head); font-size: 17px; color: var(--gold-lt); text-shadow: 0 0 14px rgba(238, 216, 154, .35); }

/* admin-tabellen */
table.adm { width: 100%; border-collapse: collapse; font-size: 16.5px; table-layout: fixed; }
table.adm th { font-family: var(--font-head); font-size: 11px; letter-spacing: .18em; color: var(--sage); text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--line-strong); word-break: break-word; }
table.adm td { padding: 9px 6px; border-bottom: 1px solid rgba(216, 180, 90, .08); vertical-align: top; word-break: break-word; overflow-wrap: break-word; }
table.adm tr { transition: background .3s; }
table.adm tbody tr:hover, table.adm tr:hover { background: rgba(216, 180, 90, .04); }
table.adm img { max-width: 90px; border-radius: 8px; border: 1px solid var(--line); }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 104px; transform: translateX(-50%) translateY(20px);
  z-index: 950; opacity: 0; pointer-events: none;
  font-family: var(--font-head); font-size: 13px; letter-spacing: .08em;
  background: rgba(8, 25, 18, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--gold-lt);
  border: 1px solid var(--line-strong); border-radius: 999px;
  box-shadow: var(--shadow-lg), 0 0 30px rgba(216, 180, 90, .15);
  padding: 14px 26px; max-width: 90vw; text-align: center;
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 520px) {
  body { font-size: 17.5px; }
  .panel { padding: 20px 18px; border-radius: 14px; }
  .bingo-cell { font-size: 10px; padding: 4px; }
  .bingo-cell.checked::after { font-size: 30px; }
  .bingo-grid { gap: 5px; }
  .letterbox { width: 44px; height: 54px; font-size: 21px; }
  .tabbar button { padding: 6px 7px; font-size: 8.5px; }
  .view { padding: 16px 12px 130px; }
  .row { gap: 8px; }
  .row > input { min-width: 0 !important; flex: 1 1 auto; }
  .row > .btn { flex-shrink: 0; }
  .halte-kop { flex-wrap: wrap; }
  .nivo { flex-wrap: wrap; }
  .nivo .em { font-size: 22px; }
  table.adm { font-size: 14px; }
  table.adm img { max-width: 70px; }
  .foto-jury { grid-template-columns: 1fr !important; }
  .adm-tabs { gap: 6px; }
  .adm-tabs .btn { font-size: 10px; padding: 7px 10px; }
  .score-row { gap: 8px; }
  .score-name { font-size: 17px; }
  .crypto-row input { letter-spacing: 2px !important; }
}
@media (max-width: 380px) {
  .bingo-cell { font-size: 9px; padding: 3px; }
  .bingo-cell.checked::after { font-size: 24px; }
  .tabbar button { padding: 5px 5px; font-size: 7.5px; }
  .letterbox { width: 38px; height: 46px; font-size: 18px; margin: 2px; }
  .view { padding: 14px 10px 130px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
}

/* ---------- badges ---------- */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.badge {
  text-align: center; padding: 14px 8px 12px; border-radius: 14px;
  background: rgba(6, 21, 16, .5);
  border: 1px solid rgba(216, 180, 90, .12);
  filter: grayscale(1) brightness(.65);
  transition: all .6s var(--ease-soft);
}
.badge .bicon { font-size: 30px; line-height: 1.2; }
.badge .bnaam { font-family: var(--font-head); font-size: 11px; letter-spacing: .06em; color: var(--gold-lt); margin-top: 6px; }
.badge .bhoe { font-size: 13.5px; color: rgba(207,224,212,.55); margin-top: 3px; line-height: 1.25; }
.badge.earned {
  filter: none;
  border-color: var(--line-strong);
  background: radial-gradient(90% 90% at 50% 20%, rgba(216,180,90,.2), rgba(216,180,90,.05));
  box-shadow: 0 0 26px rgba(216,180,90,.16), inset 0 1px 0 rgba(255,240,200,.14);
  animation: letterPop .8s var(--ease-soft);
}
.badge.earned .bhoe { color: var(--green-ok); }

/* ---------- voortgangsbalk ---------- */
#voortgang { margin-top: 14px; }
.vg-label { display: flex; justify-content: space-between; font-family: var(--font-head); font-size: 11px; letter-spacing: .12em; color: var(--sage); margin-bottom: 7px; text-transform: uppercase; }
.vg-bar { height: 10px; border-radius: 999px; background: rgba(6,21,16,.7); border: 1px solid var(--line); overflow: hidden; }
.vg-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #b98f3e, var(--gold) 55%, #fff3cf);
  box-shadow: 0 0 14px rgba(216,180,90,.55);
  transition: width 1.2s var(--ease-soft);
}

/* jury-advies-lint */
.foto-jury .item { position: relative; border-radius: 12px; overflow: hidden; }
.adv-lint {
  position: absolute; top: 8px; left: -34px; z-index: 2;
  transform: rotate(-35deg);
  font-family: var(--font-head); font-size: 9px; letter-spacing: .1em;
  background: linear-gradient(180deg, #f0dca0, var(--gold));
  color: #241a08; padding: 4px 38px;
  box-shadow: 0 3px 10px rgba(0,0,0,.4);
}

/* ---------- het archief ---------- */
.arch {
  border: 1px solid rgba(216,180,90,.14); border-radius: 12px;
  background: rgba(6,21,16,.5);
  margin: 10px 0; padding: 13px 16px; cursor: pointer;
  transition: border-color .4s, background .4s;
}
.arch:not(.locked):hover { border-color: var(--line-strong); background: rgba(16,44,34,.6); }
.arch.locked { cursor: default; opacity: .55; }
.arch-kop { display: flex; align-items: baseline; gap: 10px; }
.arch-nr { font-size: 17px; }
.arch-titel { font-family: var(--font-head); font-size: 14px; letter-spacing: .06em; color: var(--gold-lt); flex: 1; }
.arch-jaar { font-family: var(--font-head); font-size: 11px; color: var(--sage); letter-spacing: .1em; }
.arch-hint { font-size: 15px; font-style: italic; color: rgba(207,224,212,.5); margin-top: 4px; padding-left: 27px; }
.arch-body {
  max-height: 0; overflow: hidden;
  transition: max-height .9s var(--ease-soft), margin .5s;
  font-family: var(--font-accent); font-size: 18.5px; line-height: 1.55;
}
.arch.open .arch-body { max-height: 900px; margin-top: 12px; }
.arch-body p { margin-bottom: 10px; }
.arch-body p:first-child::first-letter {
  font-family: var(--font-head); font-size: 2.1em; float: left;
  line-height: .85; padding: 2px 7px 0 0; color: var(--gold);
}