.ct-level{max-width:900px;margin:0 auto;padding:1rem}
.ct-puzzles{list-style:none;padding:0;display:grid;gap:1rem}
.ct-puzzle{border:1px solid #ddd;border-radius:12px;padding:1rem}
.ct-puzzle.ct-solved{border-color:#8bc34a;background:#f3fff0}
.ct-assets img{max-width:100%;height:auto;border-radius:8px;display:block}
.ct-answer{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center}
.ct-badge{display:inline-block;padding:.25rem .5rem;border-radius:999px;background:#8bc34a;color:#fff;font-weight:600}
.ct-feedback{grid-column:1/-1}
/* Burnt Pages look */
.burnt-container{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0;justify-content:center}
.burnt-fragment{
  background:linear-gradient(145deg,#4b3621 0%,#2e1d10 100%);
  color:#f9e7c6;border:1px solid #5a3e24;
  font-family:'Times New Roman',serif;font-size:1.1rem;letter-spacing:.03em;
  padding:.6rem 1rem;border-radius:8px;cursor:grab;user-select:none;
  box-shadow:0 0 4px rgba(0,0,0,.35);transition:transform .12s
}
.burnt-fragment:hover{transform:scale(1.05)}
.burnt-fragment.dragging{opacity:.55}
.burnt-feedback{width:100%;margin-top:.5rem;font-style:italic;color:#666;text-align:center}
.ct-solved-bar{display:flex; align-items:center; gap:.5rem; margin-top:.25rem}
.ct-reset{
  border:1px solid #999; background:#fff; padding:.35rem .7rem;
  border-radius:8px; cursor:pointer;
}
.ct-reset:hover{background:#f5f5f5}
/* ===== Broken Map (jigsaw) ===== */
.bm-wrap{
  --bm-gap: 10px;
  --bm-bg: #f3efe6;
  --bm-ring: rgba(210,167,106,.35);
  position: relative;
  margin: .75rem 0 1rem;
  padding: .75rem;
  border-radius: 16px;
  background: radial-gradient(140% 140% at 10% 0%, #fffaf1 0%, #f6f1e6 55%, #f0eadf 100%);
  border: 1px solid #E6E2DA;
  box-shadow: 0 8px 26px rgba(0,0,0,.07);
}
.bm-stage{
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 3 / 2;   /* past bij cols=3, rows=2 */
  margin: 0 auto;
  background: var(--bm-bg);
  border-radius: 12px;
  overflow: hidden;
  outline: 1px dashed rgba(0,0,0,.08);
}
.bm-grid{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns: repeat(var(--bm-cols), 1fr);
  grid-template-rows: repeat(var(--bm-rows), 1fr);
  gap: var(--bm-gap);
  padding: var(--bm-gap);
}
.bm-cell{
  border: 1px dashed rgba(0,0,0,.12);
  border-radius: 8px;
  position: relative;
  background: transparent;
}
.bm-pieces{
  position:absolute; inset:0;
  pointer-events:none;  /* pieces zelf hebben weer pointer-events */
}
.bm-piece{
  position:absolute;
  width: calc((100% - (var(--bm-cols) + 1)*var(--bm-gap)) / var(--bm-cols));
  height: calc((100% - (var(--bm-rows) + 1)*var(--bm-gap)) / var(--bm-rows));
  border-radius:10px;
  background-repeat:no-repeat;
  background-size: cover;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transform-origin: center center;
  cursor: grab;
  pointer-events:auto;
  transition: box-shadow .15s ease, transform .08s ease;
}
.bm-piece:hover{ box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.bm-piece.dragging{ opacity:.9; cursor:grabbing; z-index: 5; }
.bm-piece .bm-rot{
  position:absolute; right:6px; bottom:6px;
  background: rgba(255,255,255,.9);
  border:1px solid #dad5c9; border-radius:8px;
  font-size:12px; padding:.2rem .4rem; cursor:pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.bm-piece.snapped{
  box-shadow: 0 0 0 4px var(--bm-ring), 0 6px 16px rgba(0,0,0,.14);
}
.bm-win{
  position:absolute; inset:0;
  display:none; align-items:center; justify-content:center;
  background: radial-gradient(80% 80% at 50% 50%, rgba(255,255,255,.65), rgba(255,255,255,.0));
}
.bm-win.show{ display:flex; }
.bm-win .bm-win-card{
  background:#ffffffd9; backdrop-filter: blur(4px);
  border:1px solid #E6E2DA; border-radius:14px; padding:1rem 1.25rem; text-align:center;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
/* === Cinematic atmosphere for The Broken Map === */
.bm-wrap {
  position: relative;
  isolation: isolate; /* maakt pseudo-elementen onafhankelijk */
  overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(140% 140% at 10% 0%, #fffaf1 0%, #f6f1e6 55%, #f0eadf 100%);
  border: 1px solid #E6E2DA;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

/* houten tafeltextuur onder de kaart */
.bm-wrap::before {
  content: "";
  position: absolute;
  inset: -50px;
  background: url("https://mystery-miles.com/wp-content/uploads/wood-texture.jpg") center/cover;
  filter: brightness(0.55) saturate(0.7);
  z-index: -2;
}

/* subtiel licht dat lijkt op een kaars bovenaan */
.bm-wrap::after {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle at 50% 20%, rgba(255,233,176,.25), rgba(0,0,0,.0) 70%);
  mix-blend-mode: overlay;
  z-index: -1;
  animation: flicker 6s ease-in-out infinite alternate;
}

@keyframes flicker {
  0%   { opacity: .65; transform: translateY(0) scale(1); }
  50%  { opacity: .85; transform: translateY(-2px) scale(1.02); }
  100% { opacity: .7;  transform: translateY(1px)  scale(1.01); }
}

/* Schaduw rondom puzzel */
.bm-stage {
  box-shadow: inset 0 0 60px rgba(0,0,0,.25), 0 12px 35px rgba(0,0,0,.35);
  border-radius: 16px;
  background-color: #e8dec9;
  border: 1px solid rgba(0,0,0,.1);
}

/* Fragmenten krijgen warmere tinten */
.bm-piece {
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  filter: brightness(0.98) contrast(1.05) sepia(.2);
  transition: filter .2s ease, box-shadow .2s ease;
}
.bm-piece:hover {
  filter: brightness(1.05) contrast(1.1) sepia(.15);
}
.bm-audio-toggle{
  position:absolute; top:10px; right:10px;
  background:#ffffffde; backdrop-filter: blur(3px);
  border:1px solid #E6E2DA; border-radius:10px;
  padding:.3rem .5rem; cursor:pointer; font-size:14px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
}
.bm-audio-toggle:hover{ background:#fff; }
body {
  background-color: #0e0d0b;
  transition: background-image 1.2s ease-in-out;
}

#content, .site-content, .entry-content, .ct-level {
  background: transparent !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.6));
  pointer-events: none;
  z-index: 0;
}
body {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}