:root {
  color-scheme: light;
  --bg: #fbf4ea;
  --card: #fffdf9;
  --ink: #2b2118;
  --ink-2: #6d5a49;
  --ink-3: #9a8571;
  --line: #eadccb;
  --accent: #b5651d;
  --accent-soft: rgba(181, 101, 29, 0.18);
  --match: #1f77a8;
  --crust: #c47f3a;
  --stamp: #c0392b;
  --exact: #2e7d4f;
  --close: #a8641a;
  --invent: #7b3fa0;
  --invent-soft: #f4ecf8;
  --radius: 14px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Courier Prime", "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0%, #fff6e6 0, transparent 45%),
    radial-gradient(circle at 90% 30%, #f8ead6 0, transparent 40%),
    var(--bg);
  line-height: 1.5;
}

.page { max-width: 1040px; margin: 0 auto; padding: 2.5rem 16px 3rem; }

/* Kop */
.eyebrow { margin: 0; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.05; margin: 0.3rem 0 0.6rem; letter-spacing: -0.01em; }
.brand { display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.1rem); margin: 0.4rem 0 0.6rem; }
.brand h1 { margin: 0; }
.logo { width: clamp(3.4rem, 9vw, 5.4rem); height: auto; flex: none; }
.lead { margin: 0; max-width: 40rem; font-size: 1.1rem; color: var(--ink-2); }

h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 0; }

/* Hoofdraster */
.lab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem; margin-top: 2rem; align-items: start; }
@media (max-width: 800px) { .lab { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; box-shadow: 0 1px 0 rgba(43, 33, 24, 0.04), 0 10px 30px -18px rgba(43, 33, 24, 0.25); }

/* Gebak DNA */
.dna-hint { margin: 0.25rem 0 0; font-size: 0.88rem; color: var(--ink-2); }
.dna-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.85rem; color: var(--ink-2); margin: 0.8rem 0 0.2rem; }
.dna-legend span::before { content: ""; display: inline-block; width: 18px; height: 0; vertical-align: middle; margin-right: 6px; border-top: 2px solid; }
.dna-legend .key-user::before { border-color: var(--accent); }
.dna-legend .key-match::before { border-color: var(--match); border-top-style: dashed; }

#dna { position: relative; }
.dna-svg { width: 100%; height: auto; display: block; overflow: visible; user-select: none; -webkit-user-select: none; }
.dna-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.dna-axis { stroke: var(--line); stroke-width: 1; }
.dna-tick { fill: #d9c3a8; }
.dna-user { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.dna-match { fill: none; stroke: var(--match); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.dna-handle { cursor: grab; touch-action: none; outline: none; }
.dna-handle:active { cursor: grabbing; }
.dna-hit { stroke: transparent; stroke-width: 28; stroke-linecap: round; }
.dna-knob { fill: var(--accent); stroke: var(--card); stroke-width: 2; transition: r 0.1s; }
.dna-handle:hover .dna-knob, .dna-handle:focus-visible .dna-knob { r: 8; }
.dna-handle:focus-visible .dna-knob { stroke: var(--ink); }
.dna-label { font-size: 12px; }
.dna-label-axis { font-weight: 600; fill: var(--ink); }
.dna-label-value { fill: var(--ink-2); }

.dna-help { cursor: help; outline: none; }
.dna-help circle { fill: var(--card); stroke: #c9a27a; stroke-width: 1.5; }
.dna-help text { font-size: 10px; font-weight: 700; fill: #8a5a2b; pointer-events: none; }
.dna-help:hover circle, .dna-help:focus-visible circle { fill: #8a5a2b; stroke: #8a5a2b; }
.dna-help:hover text, .dna-help:focus-visible text { fill: var(--card); }
.dna-tooltip { position: absolute; z-index: 10; width: 260px; max-width: 100%; padding: 0.6rem 0.8rem; background: var(--ink); color: var(--card); border-radius: 8px; font-size: 0.8rem; line-height: 1.35; box-shadow: 0 4px 14px rgba(43, 33, 24, 0.25); pointer-events: none; }
.dna-tooltip-title { font-weight: 700; margin-bottom: 0.3rem; }
.dna-tooltip ul { margin: 0; padding: 0; list-style: none; }
.dna-tooltip li { padding: 2px 0 2px 0.6rem; border-left: 2px solid transparent; color: #d9c3a8; }
.dna-tooltip li strong { color: var(--card); }
.dna-tooltip li.is-current { border-left-color: #e0954f; color: var(--card); }

@media (max-width: 480px) {
  .card { padding: 1rem 0.8rem; }
  .dna-label { font-size: 19px; }
  .dna-knob { r: 9; }
  .dna-handle:hover .dna-knob, .dna-handle:focus-visible .dna-knob { r: 11; }
  .dna-help circle { r: 10; }
  .dna-help text { font-size: 13px; }
}

/* Kassabon */
.receipt {
  position: relative;
  background: var(--card);
  padding: 1.2rem 1.3rem 1.5rem;
  font-family: var(--font-mono);
  box-shadow: 0 10px 30px -18px rgba(43, 33, 24, 0.35);
  /* gekartelde onderrand, zoals afgescheurd papier */
  --tooth: 10px;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--tooth) 100%;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--tooth) 100%;
  padding-bottom: calc(1.5rem + var(--tooth));
}
.pastry { margin: -0.4rem -0.4rem 0.4rem; }
.pastry-svg { width: 100%; height: auto; display: block; }
.pastry.is-new .pastry-svg { animation: pop 0.35s ease-out; }
/* Foto's: allemaal 4:3, met afgeronde hoeken */
.pastry-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 10px; }
.pastry.is-new .pastry-photo { animation: pop 0.35s ease-out; }
.pastry { border-radius: 10px; overflow: hidden; }
.pastry-photo { transition: filter 0.4s ease; }
/* "bijna": de foto van het dichtste gebakje, maar onherkenbaar wazig */
.pastry.is-obscured .pastry-photo { filter: blur(16px) saturate(0.85) brightness(1.04); }
@keyframes pop { from { transform: scale(0.94); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }

.receipt-head { text-align: center; font-size: 0.8rem; color: var(--ink-2); letter-spacing: 0.08em; text-transform: uppercase; }
.receipt-head strong { display: block; font-size: 1rem; color: var(--ink); letter-spacing: 0.12em; }
.receipt hr { border: 0; border-top: 1px dashed var(--ink-3); margin: 0.7rem 0; }
.receipt-lines { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
.receipt-lines li { display: flex; justify-content: space-between; gap: 1rem; }
.receipt-lines li span:last-child { color: var(--ink-3); }
.verdict { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v-color, var(--accent)); }
.verdict-icon { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--v-color, var(--accent)); color: #fff; font-size: 0.85rem; letter-spacing: 0; }
.receipt[data-verdict="exact"] { --v-color: var(--exact); }
.receipt[data-verdict="close"] { --v-color: var(--close); }
.receipt[data-verdict="unknown"] { --v-color: var(--invent); background: linear-gradient(var(--invent-soft), var(--card) 55%); }
.receipt[data-verdict="unknown"] .receipt-name { color: var(--invent); font-style: italic; }
.receipt[data-verdict="unknown"] .receipt-name::after { content: "™"; font-size: 0.55em; vertical-align: super; font-style: normal; margin-left: 0.1em; }
.invent-note { margin: 0 0 0.35rem; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--invent); }
.dna[data-verdict="unknown"] .dna-match { opacity: 0.45; }
.receipt-name { overflow-wrap: anywhere; hyphens: auto; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.15; margin: 0.15rem 0 0.4rem; }
.receipt-desc { margin: 0; font-family: var(--font-body); font-size: 0.98rem; }
.runner-up { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--ink-2); }

.stamp {
  position: absolute; top: 1.2rem; left: 1rem;
  padding: 0.25rem 0.6rem; border: 3px solid var(--stamp); border-radius: 6px;
  color: var(--stamp); font-family: var(--font-body); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  transform: rotate(-12deg); opacity: 0; pointer-events: none;
  background: rgba(255, 253, 249, 0.9); box-shadow: 0 2px 8px rgba(43, 33, 24, 0.25); z-index: 1; /* leesbaar op een foto */
}
.stamp.is-visible { animation: stamp 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
.stamp.is-static { opacity: 0.95; }
.stamp.is-invention { color: var(--invent); border-color: var(--invent); }
@keyframes stamp { from { opacity: 0; transform: rotate(-12deg) scale(1.8); } to { opacity: 0.95; transform: rotate(-12deg) scale(1); } }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; font-family: var(--font-body); }
.btn { appearance: none; border: 1px solid var(--accent); background: var(--accent); color: #fff; padding: 0.55rem 1rem; border-radius: 999px; font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn:focus-visible { outline: 3px solid var(--match); outline-offset: 2px; }

details.debug { margin-top: 1rem; font-family: var(--font-body); font-size: 0.8rem; color: var(--ink-2); }
details.debug table { border-collapse: collapse; width: 100%; }
details.debug td { padding: 2px 6px; border-bottom: 1px solid var(--line); }
details.debug td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* Vitrine */
.vitrine { margin-top: 2.5rem; }
.vitrine-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; }
.vitrine-count { color: var(--ink-2); font-size: 0.95rem; }
.progress { height: 6px; background: var(--line); border-radius: 999px; margin: 0.7rem 0 1.2rem; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width 0.4s ease-out; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.8rem; list-style: none; margin: 0; padding: 0; }
.tile { appearance: none; width: 100%; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem 0.5rem 0.7rem; cursor: pointer; font: inherit; color: inherit; transition: transform 0.15s, box-shadow 0.15s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -14px rgba(43, 33, 24, 0.5); }
.tile:focus-visible { outline: 3px solid var(--match); outline-offset: 2px; }
.tile-name { display: block; font-weight: 600; font-size: 0.9rem; }
.tile.is-locked { background: transparent; border-style: dashed; }
.tile.is-locked .pastry-svg { filter: grayscale(1) brightness(0) opacity(0.12); }
/* een foto als silhouet wordt een zwart vlak; daarom wazig en vaag: je ziet dat er iets staat, niet wat */
.tile.is-locked .pastry-photo { filter: blur(6px) grayscale(1) opacity(0.35); }
.tile .pastry-photo { border-radius: 8px; margin-bottom: 0.4rem; }
.tile.is-locked .tile-name { color: var(--ink-3); }
.tile.is-current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tile.just-found { animation: found 0.9s ease-out; }
@keyframes found { 0% { box-shadow: 0 0 0 0 rgba(181, 101, 29, 0.6); } 100% { box-shadow: 0 0 0 14px rgba(181, 101, 29, 0); } }
/* hint bij een nog niet ontdekt gebakje: een kaartje over de tegel bij hover of focus */
.tiles > li { position: relative; }
.tile-hint {
  position: absolute; top: 0.35rem; left: 0.35rem; right: 0.35rem; z-index: 2;
  padding: 0.55rem 0.65rem; border-radius: 8px; background: var(--ink); color: #fffaf0;
  font-size: 0.8rem; line-height: 1.35; text-align: left; box-shadow: 0 8px 22px -10px rgba(43, 33, 24, 0.6);
  opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; pointer-events: none;
}
.tile-hint::before { content: "Hint"; display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #f0c98a; margin-bottom: 0.15rem; }
.tile.is-locked:hover .tile-hint, .tile.is-locked:focus .tile-hint { opacity: 1; transform: none; }

footer { margin-top: 3rem; font-size: 0.8rem; color: var(--ink-3); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .stamp.is-visible { opacity: 0.85; }
}
.tile.is-locked:hover, .tile.is-locked:focus { position: relative; z-index: 3; } /* kaartje boven de volgende rij */