/* ==========================================================================
   Bonaire Flavor Festival — tokens
   ========================================================================== */
:root{
  --cream: #f3e8c9;
  --cream-light: #faf3e0;
  --navy: #16233F;
  --navy-rgb: 22,35,63;
  --navy-2: #1F3358;
  --terracotta: #A6372E;
  --gold: #C99A3E;
  --gold-rgb: 201,154,62;
  --forest: #35563B;
  --forest-rgb: 53,86,59;
  --wine: #5C1F1A;
  --wood: #7A4B26;
  --ink: #2a1f14;
  --hero-grad-a: #f7ecc9;
  --hero-grad-b: #f0dfae;
  --map-bg: #eee5cc;

  --font-display: "Bitter", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
  --font-script: "Caveat", cursive;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(var(--navy-rgb),0.18);
}

/* Caribisch kleurthema — echte, verzadigde kleuren zoals de gevels aan de
   waterkant van Kralendijk: koraalrood/oranje, mosterdgeel, magenta, paars
   en turquoise. De achtergrond blijft licht/neutraal (zoals de lucht erachter)
   zodat de kleuren zelf de show stelen in plaats van een gekleurde waas over
   alles heen — geen filter, echte kleurblokken. */
:root[data-theme="caribbean"]{
  --cream: #FFF7EC;
  --cream-light: #FFFFFF;
  --navy: #0B8A9C;
  --navy-rgb: 11,138,156;
  --navy-2: #8E2FC9;
  --terracotta: #E8471C;
  --gold: #F2A400;
  --gold-rgb: 242,164,0;
  --forest: #1CAE7A;
  --forest-rgb: 28,174,122;
  --wine: #E0217E;
  --wood: #8E2FC9;
  --ink: #241934;
  --hero-grad-a: #FFFFFF;
  --hero-grad-b: #FFF3D9;
  --map-bg: #FFF4E0;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--cream-light);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Bedankt / "Uitverkocht" openingsscherm — na afloop van het evenement
   ========================================================================== */
.thankYouScreen{
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--hero-grad-a) 0%, var(--hero-grad-b) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(28px, calc(env(safe-area-inset-top) + 20px))
    18px
    max(28px, env(safe-area-inset-bottom))
    18px;
}
.thankYouScreen[hidden]{ display: none; }
.thankYouScreen__inner{
  position: relative;
  max-width: 440px;
  margin: auto;
  text-align: center;
}
.thankYouScreen__mark{ width: min(190px, 55vw); height: auto; margin-bottom: 18px; }
.thankYouScreen__badge{
  display: inline-block;
  margin: 0 0 14px;
  padding: 7px 20px;
  border-radius: 999px;
  background: var(--terracotta);
  color: var(--cream-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(var(--navy-rgb),0.25);
}
.thankYouScreen__title{
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  line-height: 1.08;
  color: var(--navy);
}
.thankYouScreen__script{
  margin: 4px 0 18px;
  font-family: var(--font-script);
  font-size: 28px;
  color: var(--wood);
}
.thankYouScreen__body{
  margin: 0 0 14px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
}
.thankYouScreen__body2{
  margin: 0 0 26px;
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--navy);
  font-weight: 600;
}
.thankYouScreen__cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border: none;
  border-radius: 999px;
  background: var(--navy);
  color: var(--cream-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18.5px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--navy-rgb),0.35);
  transition: transform 0.15s ease, opacity 0.4s ease;
}
.thankYouScreen__cta:active{ transform: scale(0.97); }
.thankYouScreen.is-leaving{ opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }

.thankYouScreen__signup{
  margin: 4px 0 22px;
  padding: 20px 18px 22px;
  border: 3px solid var(--gold);
  border-radius: 20px;
  background: rgba(255,255,255,0.4);
}
.thankYouScreen__signupBadge{
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
}
.thankYouScreen__signupTitle{
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--navy);
}
.thankYouScreen__signupBody{
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}
.thankYouScreen__signupCta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #25D366;
  color: #05330f;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17.5px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  transition: transform 0.15s ease;
}
.thankYouScreen__signupCta:active{ transform: scale(0.97); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  background: linear-gradient(180deg, var(--hero-grad-a) 0%, var(--hero-grad-b) 100%);
  padding: max(40px, calc(env(safe-area-inset-top) + 24px)) 16px 32px;
  text-align: center;
  overflow: hidden;
  border-bottom: 3px solid var(--navy);
  transition: box-shadow 1.2s ease;
}
.hero--sunset{
  box-shadow: inset 0 0 0 2000px rgba(242, 148, 63, 0.22);
  cursor: pointer;
}
.hero--sunset::after{
  content: "🥂 tik voor een toost";
  position: absolute;
  left: 50%; bottom: 10px; transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 700; font-size: 13px;
  color: var(--navy);
  opacity: 0.55;
  pointer-events: none;
}
.hero__inner{ position: relative; z-index: 2; max-width: 520px; margin: 0 auto; }

.hero .mark{ width: min(260px, 68vw); height: auto; margin-bottom: 16px; }

.langToggle{
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}
.langBtn{
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid rgba(var(--navy-rgb),0.35);
  background: rgba(255,255,255,0.5);
  border-radius: 999px;
  padding: 5px 11px 5px 8px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
}
.langBtn__flag{ font-size: 18.5px; line-height: 1; }
 .langBtn.is-active{ background: var(--navy); border-color: var(--navy); color: var(--cream-light); }
.langSecretPalm{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1.5px solid rgba(var(--navy-rgb),0.35);
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  opacity: 1;
  font-size: 16.5px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.langSecretPalm:active{ background: var(--navy); border-color: var(--navy); }

.themeToggle{
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}
.themeBtn{
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid rgba(var(--navy-rgb),0.35);
  background: rgba(255,255,255,0.5);
  border-radius: 999px;
  padding: 5px 12px 5px 9px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.themeBtn__icon{ font-size: 17px; line-height: 1; }
.themeBtn.is-active{ background: var(--navy); border-color: var(--navy); color: var(--cream-light); }

.eyebrow{
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.13em;
  color: var(--navy);
}

.hero h1{
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 60px;
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.hero h1 span{ color: var(--terracotta); }

.tagline{
  margin: 6px 0 0;
  font-family: var(--font-script);
  font-size: 31px;
  color: var(--wood);
}

.eventMeta{
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19.5px;
  letter-spacing: 0.02em;
  color: var(--navy);
  line-height: 1.8;
}
.eventMeta span{ display: inline-block; }
.eventMeta .dividerDot{ color: var(--terracotta); margin: 0 7px; }

.installBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  background: var(--navy);
  color: var(--cream-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18.5px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--navy-rgb),0.35);
  transition: transform 0.15s ease;
}
.installBtn:active{ transform: scale(0.97); }
.installBtn[hidden]{ display: none; }
.installBtn--whatsapp{ background: #25D366; color: #05330f; margin-top: 10px; }
.installBtn--whatsapp:active{ transform: scale(0.97); }

.rouletteBtnWrap{ text-align: center; margin: 4px 0 4px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.rouletteBtn{
  border: 2px solid var(--gold);
  background: var(--cream-light);
  color: var(--navy);
  border-radius: 999px;
  padding: 11px 22px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(var(--gold-rgb),0.28);
}
.rouletteBtn:active{ transform: scale(0.97); }

.shellEgg{
  position: absolute;
  bottom: 8px; left: 10px;
  background: none; border: none;
  font-size: 15px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 2;
  padding: 8px;
}
.shellEgg:hover, .shellEgg:focus-visible{ opacity: 0.6; }
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  animation: flamingoBob 1.6s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
@keyframes flamingoBob{
  0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); }
  50% { transform: translate(-50%, -58%) rotate(4deg); }
}

/* Fullscreen Flavor Roulette */
.rouletteOverlay{
  position: fixed; inset: 0; z-index: 1200;
  background: radial-gradient(circle at 50% 20%, #1c2f52 0%, #0c1526 78%);
  display: flex; align-items: center; justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  overflow-y: auto;
}
.rouletteCard{
  width: 100%;
  max-width: 480px;
  min-height: min(88vh, 720px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  position: relative;
}
.rouletteCard .nesClose{ position: absolute; top: -6px; right: 4px; }
.rouletteCard__title{ font-family: var(--font-display); font-weight: 900; font-size: 29px; color: var(--cream-light); margin: 0 0 6px; }
.rouletteCard__intro{ font-size: 17.5px; color: var(--cream); opacity: 0.85; margin: 0 0 22px; max-width: 320px; }
.rouletteWheelWrap{ position: relative; width: min(78vw, 300px); height: min(78vw, 300px); margin-bottom: 26px; }
.rouletteWheelPointer{ position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 30px; z-index: 2; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.rouletteWheel{
  width: 100%; height: 100%; border-radius: 50%;
  border: 6px solid var(--cream-light);
  box-shadow: 0 10px 34px rgba(0,0,0,0.45);
  position: relative;
  transition: transform 3.2s cubic-bezier(0.12,0.67,0.1,1);
}
.rouletteWheel__label{
  position: absolute; top: 50%; left: 50%;
  transform-origin: 0 0;
  font-family: var(--font-display); font-weight: 800; font-size: 12px; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  white-space: nowrap;
}
.rouletteHub{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 54px; height: 54px; border-radius: 50%; background: var(--cream-light); display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 3px 10px rgba(0,0,0,0.3); }
.rouletteSpinBtn{
  border: none; border-radius: 999px;
  background: var(--gold); color: #1c1200;
  font-family: var(--font-display); font-weight: 900; font-size: 21px;
  padding: 15px 40px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(var(--gold-rgb),0.4);
}
.rouletteSpinBtn:active{ transform: scale(0.97); }
.rouletteSpinBtn:disabled{ opacity: 0.55; cursor: default; }
.rouletteResult{ margin-top: 22px; }
.rouletteResult__prefix{ font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; }
.rouletteResult__name{ font-family: var(--font-display); font-weight: 900; font-size: 27px; color: var(--cream-light); margin: 0 0 20px; }
.rouletteResult__actions{ display: flex; flex-direction: column; gap: 10px; align-items: center; }
.rouletteGoBtn{ border: none; border-radius: 999px; background: var(--gold); color: #1c1200; font-family: var(--font-display); font-weight: 800; font-size: 18px; padding: 13px 30px; cursor: pointer; }
.rouletteAgainBtn{ border: 1.5px solid var(--cream-light); background: none; color: var(--cream-light); border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 15.5px; padding: 10px 22px; cursor: pointer; opacity: 0.85; }
@media (min-width: 640px){ .rouletteWheel__label{ font-size: 14px; } }

.hero__ornament{
  position: absolute;
  top: 0;
  width: 70px;
  height: 150px;
  overflow: visible;
  color: var(--forest);
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}
.hero__ornament--left{ left: 0; }
.hero__ornament--right{ right: 0; transform: scaleX(-1); }
.hero__ornament svg{ width: 90px; height: auto; display: block; pointer-events: auto; touch-action: manipulation; }
.hero__inner{ z-index: 4; }
.langToggle, .themeToggle{ position: relative; z-index: 6; }

/* ==========================================================================
   Coins strip
   ========================================================================== */
.coins{
  background: var(--navy);
  color: var(--cream-light);
  padding: 14px 16px;
  font-size: 19.5px;
  text-align: center;
  line-height: 1.55;
}
.coins strong{ color: var(--gold); font-weight: 600; }

/* ==========================================================================
   View toggle
   ========================================================================== */
.viewToggle{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 18px 14px 4px;
}
.viewToggle__btn{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--navy);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.viewToggle__btn.is-active{
  background: var(--navy);
  color: var(--cream-light);
}

/* ==========================================================================
   Map view
   ========================================================================== */
.mapView__hint{
  text-align: center;
  font-size: 19.5px;
  color: var(--wood);
  margin: 10px 0 4px;
  font-style: italic;
  padding: 0 10px;
}

.mapWrap{
  padding: 8px 6px 4px;
  max-width: 760px;
  margin: 0 auto;
}

.mapImgWrap{
  position: relative;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 3px solid var(--navy);
  overflow: hidden;
  background: var(--map-bg);
}

.floorplanImg{
  width: 100%;
  height: auto;
  display: block;
}

.pinsLayer{
  position: absolute;
  inset: 0;
}

.mapPin{
  position: absolute;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--cream-light);
  color: var(--cream-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 0 3px rgba(255,255,255,0.25);
  transition: transform 0.15s ease;
}
.mapPin::before{
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.4;
}
.mapPin:hover, .mapPin:focus-visible{ transform: translate(-50%, -50%) scale(1.18); z-index: 2; }
.mapPin--amenity{
  width: 26px; height: 26px; font-size: 14px;
  background: rgba(255,255,255,0.92); color: #1a1a1a;
  border: 1.5px solid rgba(0,0,0,0.3); cursor: default;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
}
.mapPin--amenity::before{ display: none; }
.mapPin--amenity:hover, .mapPin--amenity:focus-visible{ transform: translate(-50%, -50%); }

@media (min-width: 640px){
  .mapPin{ width: 44px; height: 44px; font-size: 21px; }
}

.legend{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 20px;
  margin: 16px 0 6px;
  padding: 0 14px;
  font-size: 19px;
  color: var(--ink);
}
.legend li{ display: flex; align-items: center; gap: 6px; }
.dot{ width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1.5px solid var(--cream-light); box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
.dot--food{ background: var(--terracotta); }
.dot--bar{ background: var(--wood); }
.dot--lounge{ background: var(--wine); }
.dot--experience{ background: var(--navy); }

/* ==========================================================================
   List view
   ========================================================================== */
.listView{ max-width: 680px; margin: 0 auto; padding: 16px 10px 8px; }
.stageList{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.stageCard{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--cream-light);
  border: 1.5px solid rgba(var(--navy-rgb),0.18);
  border-left: 6px solid var(--navy);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  font-family: var(--font-body);
}
.stageCard__num{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20.5px;
  color: var(--cream-light);
  background: var(--navy);
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.stageCard__thumb{
  width: 66px; height: 66px;
  border-radius: 8px;
  overflow: hidden;
  flex: none;
  border: 1px solid rgba(var(--navy-rgb),0.2);
}
.stageCard__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.stageCard__miniNum{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream-light);
  font-size: 14.5px;
  margin-right: 3px;
  transform: translateY(-1px);
}
.stageCard__body{ flex: 1; min-width: 0; }
.stageCard__name{ font-family: var(--font-display); font-weight: 700; font-size: 22.5px; color: var(--navy); margin: 0 0 3px; }
.stageCard__meta{ font-size: 18px; color: var(--wood); text-transform: uppercase; letter-spacing: 0.04em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.siteFooter{
  text-align: center;
  padding: 34px 20px calc(100px + env(safe-area-inset-bottom));
  color: var(--wood);
}
.siteFooter p{ margin: 2px 0; font-family: var(--font-display); font-weight: 700; font-size: 19.5px; color: var(--navy); }
.siteFooter__sub{ font-family: var(--font-script) !important; font-weight: 600 !important; font-size: 24px !important; color: var(--wood) !important; }

.quizTrigger{
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  color: var(--wood);
  opacity: 0.35;
  cursor: pointer;
}
.quizTrigger:hover, .quizTrigger:focus-visible{ opacity: 0.7; }

.siteFooter__credit{
  margin: 18px 0 8px !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  font-style: italic;
  font-size: 12.5px !important;
  color: var(--wood) !important;
  opacity: 0.45;
}
.siteFooter__creditLogo{
  display: inline-block;
  opacity: 0.55;
}
.siteFooter__creditLogo img{
  display: block;
  width: 118px;
  height: auto;
}
.siteFooter__creditLogo:hover, .siteFooter__creditLogo:focus-visible{ opacity: 0.85; }
.siteFooter__flamingo{
  display: inline-block;
  margin-top: 10px;
  font-size: 22px;
  cursor: pointer;
  animation: flamingoPop .4s ease;
}
.siteFooter__flamingo[hidden]{ display: none; }
@keyframes flamingoPop{
  0%{ transform: scale(0) rotate(-15deg); opacity: 0; }
  60%{ transform: scale(1.25) rotate(8deg); opacity: 1; }
  100%{ transform: scale(1) rotate(0); opacity: 1; }
}

/* Foody Quiz overlay */
.quizCard{
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--cream-light);
  border: 3px solid var(--gold);
  border-radius: 20px;
  padding: 30px 22px 26px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.quizCard__progress{ font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--wood); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px; }
.quizCard__title{ font-family: var(--font-display); font-weight: 900; font-size: 27px; color: var(--navy); margin: 0 0 14px; }
.quizCard__question{ font-size: 19px; color: var(--ink); margin: 0 0 18px; line-height: 1.45; font-weight: 700; }
.quizCard__intro{ font-size: 18px; color: var(--ink); margin: 0 0 20px; line-height: 1.5; }
.quizOptions{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.quizOption{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17.5px;
  color: var(--navy);
  background: var(--cream);
  border: 1.5px solid var(--navy);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
}
.quizOption:disabled{ cursor: default; }
.quizOption.is-correct{ background: #DDF2E4; border-color: #2E7D4F; color: #1D5734; }
.quizOption.is-wrong{ background: #F8DEDA; border-color: var(--terracotta); color: var(--terracotta); }
.quizCard__next{ margin-top: 12px; }
.quizScore__title{ font-family: var(--font-display); font-weight: 900; font-size: 31px; color: var(--navy); margin: 0 0 10px; }
.quizScore__body{ font-size: 19px; color: var(--ink); margin: 0 0 6px; line-height: 1.5; }
.quizScore__perfect{ font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--gold); margin: 6px 0 16px; }

.whatsappBtn{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19.5px;
  padding: 11px 22px;
  border-radius: 999px;
  margin-bottom: 22px;
  box-shadow: 0 4px 14px rgba(37,211,102,0.35);
}

/* ==========================================================================
   Partners view
   ========================================================================== */
.partnersView{ max-width: 640px; margin: 0 auto; padding: 18px 16px 8px; }
.partnersView__title{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 31px;
  color: var(--navy);
  text-align: center;
  margin: 0 0 6px;
}
.partnersView__intro{
  text-align: center;
  font-size: 19.5px;
  color: var(--wood);
  font-style: italic;
  margin: 0 0 20px;
  padding: 0 8px;
}
.partnersList{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.partnerCard{
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cream-light);
  border: 1.5px solid rgba(var(--navy-rgb),0.18);
  border-radius: 12px;
  padding: 16px;
}
.partnerCard__logo{
  width: 78px; height: 78px;
  flex: none;
  border-radius: 10px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(var(--navy-rgb),0.12);
}
.partnerCard__logo img{ width: 88%; height: 88%; object-fit: contain; }
.partnerCard__name{ font-family: var(--font-display); font-weight: 700; font-size: 21.5px; color: var(--navy); margin: 0 0 4px; }
.partnerCard__blurb{ font-size: 18.5px; color: #4a3d2c; margin: 0; line-height: 1.5; }

/* ==========================================================================
   Full-screen stage panel
   ========================================================================== */
.sheetOverlay{
  position: fixed; inset: 0;
  background: rgba(var(--navy-rgb),0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 40;
}
.sheetOverlay.is-open{ opacity: 1; pointer-events: auto; }

.sheet{
  position: fixed;
  inset: 0;
  margin: 0 auto;
  max-width: 720px;
  background: var(--cream-light);
  border: none;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.35);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(.32,.72,0,1);
  z-index: 50;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
.sheet.is-open{ transform: translateY(0); }

.sheet__handle{ display: none; }

.sheet__close{
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--navy);
  color: var(--cream-light);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  z-index: 51;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.sheet__content{
  padding: 0 0 48px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.sheetPhoto{
  width: 100%;
  height: 240px;
  overflow: hidden;
  flex: none;
}
.sheetPhoto img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.sheetBody{ padding: 20px 18px 8px; }
.sheetBody--noPhoto{ padding-top: 64px; }

body.noScroll{ overflow: hidden; height: 100%; }

/* sheet content typography (rendered by JS) */
.sheetStageNum{
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  color: var(--cream-light);
  background: var(--navy);
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.sheetTitle{
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38px;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.08;
}
.sheetSubtitle{
  font-size: 21.5px;
  font-style: italic;
  color: var(--wood);
  margin: 0 0 16px;
  line-height: 1.45;
}
.sheetDivider{
  border: none;
  border-top: 1.5px dashed rgba(var(--navy-rgb),0.3);
  margin: 16px 0;
}
.menuItem{ margin-bottom: 16px; }
.menuItem:last-child{ margin-bottom: 0; }
.menuItem__row{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.menuItem__name{ font-family: var(--font-display); font-weight: 700; font-size: 23px; color: var(--navy); }
.menuItem__price{
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--navy);
  background: rgba(var(--gold-rgb),0.28);
  border: 1px solid var(--gold);
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.menuItem__time{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--terracotta);
  display: block;
  margin-bottom: 3px;
}
.menuItem__detail{ font-size: 19.5px; color: #4a3d2c; margin: 3px 0 0; line-height: 1.45; }
.menuItem__chef{ font-size: 18.5px; color: var(--wood); font-style: italic; margin: 4px 0 0; }

.vegBox{
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(var(--forest-rgb),0.1);
  border: 1px solid rgba(var(--forest-rgb),0.35);
  border-radius: 10px;
}
.vegBox__title{ font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--forest); margin: 0 0 7px; text-transform: uppercase; letter-spacing: 0.03em; }
.vegBox ul{ margin: 0; padding-left: 18px; font-size: 19.5px; }
.vegBox li{ margin-bottom: 3px; }

.sheetStory{
  margin: 0 0 4px;
  padding: 12px 15px;
  border-left: 3px solid var(--gold);
  background: rgba(var(--gold-rgb),0.12);
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
  color: #4a3d2c;
}

.chefsBox{ margin-top: 20px; }
.chefsBox__title{ font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy); margin: 0 0 9px; text-transform: uppercase; letter-spacing: 0.03em; }
.chefBio{ margin-bottom: 12px; }
.chefBio__name{ font-family: var(--font-display); font-weight: 700; font-size: 20.5px; color: var(--navy); margin: 0; }
.chefBio__text{ font-size: 19px; color: #4a3d2c; margin: 3px 0 0; line-height: 1.5; }
.chefBio--withPhoto{ display: flex; gap: 12px; align-items: flex-start; }
.chefBio__photo{ width: 84px; height: 84px; border-radius: 12px; object-fit: cover; flex: none; border: 2px solid var(--gold); }
.chefBio__textWrap{ flex: 1; min-width: 0; }

/* ==========================================================================
   Programme timeline
   ========================================================================== */
.programme{
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 16px 4px;
}
.programme__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21.5px;
  color: var(--navy);
  margin: 0 0 12px;
  text-align: center;
}
.progList{ list-style: none; margin: 0; padding: 0; }
.progItem{
  display: flex;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px dashed rgba(var(--navy-rgb),0.2);
}
.progItem:first-child{ border-top: none; }
.progItem__time{
  flex: none;
  width: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--terracotta);
}
.progItem__body{ display: flex; flex-direction: column; }
.progItem__label{ font-family: var(--font-display); font-weight: 700; font-size: 19.5px; color: var(--navy); }
.progItem__detail{ font-size: 18.5px; color: var(--wood); margin-top: 2px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 640px){
  .hero h1{ font-size: 76px; }
  .tagline{ font-size: 34.5px; }
}

@media (max-width: 360px){
  body{ font-size: 20.5px; }
  .hero h1{ font-size: 53px; }
  .sheetTitle{ font-size: 33.5px; }
}

/* ==========================================================================
   Easter eggs
   ========================================================================== */
.hero .mark{ cursor: pointer; }

.confettiLayer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999;
}
.confettiBit{
  position: absolute;
  top: -10vh;
  animation-name: confettiFall;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}
@keyframes confettiFall{
  0%{ transform: translateY(0) rotate(0deg); opacity: 1; }
  100%{ transform: translateY(115vh) rotate(340deg); opacity: 0.85; }
}

.eggToast{
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 16px);
  max-width: 88vw;
  background: var(--navy);
  color: var(--cream-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18.5px;
  text-align: center;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  pointer-events: none;
}
.eggToast.is-visible{ opacity: 1; transform: translate(-50%, 0); }

.mapPin--secret{
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 0 4px rgba(232,169,62,0.55);
  animation: secretPulse 1.6s ease-in-out infinite;
}
@keyframes secretPulse{
  0%, 100%{ box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 0 4px rgba(232,169,62,0.55); }
  50%{ box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 0 9px rgba(232,169,62,0.15); }
}

/* "Bonaire Foodie"-badge: verschijnt nadat alle 12 stages bezocht zijn */
.foodieCard{
  position: relative;
  width: 100%;
  max-width: 360px;
  background: var(--cream-light);
  border: 3px solid var(--gold);
  border-radius: 20px;
  padding: 36px 24px 28px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.foodieCard__title{ font-family: var(--font-display); font-weight: 900; font-size: 31px; color: var(--navy); margin: 0 0 10px; }
.foodieCard__body{ font-size: 19px; color: var(--ink); margin: 0; line-height: 1.5; }

/* Disco-modus: geheime looks vrijgespeeld via 5x op het logo tikken */
body.discoMode{
  animation: discoBg 6s linear infinite;
}
@keyframes discoBg{
  0%{ filter: hue-rotate(0deg) saturate(1); }
  50%{ filter: hue-rotate(180deg) saturate(1.6); }
  100%{ filter: hue-rotate(360deg) saturate(1); }
}
body.discoMode::after{
  content: "🪩";
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  font-size: 30px;
  animation: discoSpin 2.2s linear infinite;
  z-index: 998;
  pointer-events: none;
}
@keyframes discoSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* ==========================================================================
   Mini-game — "Vang de Chill Beer"
   ========================================================================== */
.miniGameIntro{ font-size: 19px; color: var(--ink); margin: 0 0 8px; line-height: 1.5; }
.miniGameGoal{ font-family: var(--font-display); font-weight: 700; font-size: 18.5px; color: var(--terracotta); margin: 0 0 16px; }

.miniGameWrap{ display: flex; flex-direction: column; align-items: center; gap: 12px; }

.miniGameBtn{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19.5px;
  color: var(--cream-light);
  background: var(--terracotta);
  border: none;
  padding: 13px 26px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(var(--navy-rgb),0.25);
}
.miniGameBtn--ghost{
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  box-shadow: none;
  margin-top: 10px;
}

.miniGameHud{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  padding: 0 2px;
}

.miniGameStage{
  position: relative;
  width: 100%;
  height: 300px;
  background: linear-gradient(180deg, rgba(var(--navy-rgb),0.06) 0%, rgba(var(--navy-rgb),0.14) 100%);
  border: 2px dashed rgba(var(--navy-rgb),0.3);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: manipulation;
}

.miniGameItem{
  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  font-size: 30px;
  line-height: 40px;
  text-align: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transform: translateY(0);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.miniGameItem.is-caught{ transform: scale(1.6) !important; opacity: 0; }
.miniGameItem.is-hit{ transform: scale(0.6) rotate(20deg) !important; opacity: 0; }

.miniGameEnd{
  padding: 16px 18px;
  border-radius: 12px;
  text-align: center;
}
.miniGameEnd--win{ background: rgba(var(--gold-rgb),0.16); border: 1px solid var(--gold); }
.miniGameEnd--lose{ background: rgba(var(--navy-rgb),0.08); border: 1px solid rgba(var(--navy-rgb),0.3); }
.miniGameEnd__title{ font-family: var(--font-display); font-weight: 900; font-size: 23px; color: var(--navy); margin: 0 0 8px; }
.miniGameEnd__body{ font-size: 19px; color: var(--ink); margin: 0; line-height: 1.5; }
.miniGameEnd__body strong{ color: var(--terracotta); }
.miniGameEnd__record{ font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--gold); margin: 10px 0 0; }

/* ==========================================================================
   NES-controller overlay — Konami-code invoer op mobiel (touch)
   ========================================================================== */
.nesOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1100;
}

.nesController{
  position: relative;
  width: 100%;
  max-width: 340px;
  background: linear-gradient(180deg, #6b6f76 0%, #4d5157 100%);
  border-radius: 22px;
  padding: 20px 18px 22px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.15);
  border: 2px solid #33363b;
}
.nesController.is-wrong{ animation: nesShake 0.26s ease; }
@keyframes nesShake{
  0%, 100%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  75%{ transform: translateX(6px); }
}

.nesClose{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.nesHint{
  text-align: center;
  color: #f2f2f2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.06em;
  margin: 4px 0 10px;
}

.nesProgress{
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 18px;
}
.nesDot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: 1px solid rgba(255,255,255,0.4);
}
.nesDot.is-filled{ background: var(--gold); border-color: var(--gold); }

.nesBody{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.nesDpad{
  position: relative;
  width: 120px;
  height: 120px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.nesDpad__center{ grid-column: 2; grid-row: 2; background: #26282c; }
.nesDpad__btn{
  border: none;
  background: #26282c;
  color: #e6e6e6;
  font-size: 18.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nesDpad__btn:active{ background: #17181a; }
.nesDpad__btn--up{ grid-column: 2; grid-row: 1; border-radius: 6px 6px 0 0; }
.nesDpad__btn--left{ grid-column: 1; grid-row: 2; border-radius: 6px 0 0 6px; }
.nesDpad__btn--right{ grid-column: 3; grid-row: 2; border-radius: 0 6px 6px 0; }
.nesDpad__btn--down{ grid-column: 2; grid-row: 3; border-radius: 0 0 6px 6px; }

.nesActions{
  display: flex;
  align-items: center;
  gap: 14px;
  transform: rotate(-18deg);
}
.nesActionBtn{
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 35% 30%, #d1445a, #8f1f30);
  color: #fdf1ee;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20.5px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35);
}
.nesActionBtn:active{ transform: translateY(2px); box-shadow: none; }
.nesActionBtn--a{ margin-top: -10px; }

.nesMeta{
  display: flex;
  justify-content: center;
  gap: 10px;
}
.nesMetaBtn{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #e6e6e6;
  background: #26282c;
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transform: rotate(-18deg);
}
.nesMetaBtn:active{ background: #17181a; }

/* ==========================================================================
   Bonaire Flavor Festival — Hero (verborgen platformgame)
   ========================================================================== */
.platformerOverlay{
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(4,9,18,0.94);
  display: flex; align-items: center; justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
}
.platformerShell{
  position: relative;
  width: min(96vw, 720px);
  background: #0d2b3b;
  border: 2px solid var(--gold);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.6);
  color: #fff;
  padding: 12px;
}
.platformerTop{ display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.platformerTop small{ color: #f6c96a; font-weight: 800; letter-spacing: 0.1em; font-size: 11px; }
.platformerTop h2{ margin: 3px 0 0; font-size: clamp(19px, 4.5vw, 25px); font-family: var(--font-display); }
.platformerTop button{ border: none; background: #fff; color: #102331; border-radius: 50%; width: 38px; height: 38px; font-size: 18px; flex-shrink: 0; cursor: pointer; }
.platformerHud{ display: flex; justify-content: space-between; gap: 6px; padding: 8px 2px; font-weight: 800; font-size: 13px; flex-wrap: wrap; }
.platformerHud span{ white-space: nowrap; }
#pfCanvas{ width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: #071d2b; touch-action: none; }
.pfController{
  position: relative;
  background: linear-gradient(180deg, #dcdcdc, #b4b4b4);
  border: 3px solid #3a3a3a; border-radius: 16px;
  padding: 14px 18px 10px;
  margin: 10px auto 2px; max-width: 380px;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,0.14), inset 0 2px 0 rgba(255,255,255,0.4), 0 8px 16px rgba(0,0,0,0.4);
}
.pfBrand{
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: 800; letter-spacing: 0.14em;
  color: #6f6f6f; text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.pfControllerTop{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pfDpad{
  position: relative; width: 84px; height: 84px; flex-shrink: 0; touch-action: none;
  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
}
.pfDpadHub{ grid-column: 2; grid-row: 2; background: #2a2a2a; box-shadow: inset 0 1px 2px rgba(255,255,255,0.15); }
.pfDpadBtn{
  border: none; background: #232323; color: #eee; font-size: 14px;
  touch-action: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pfDpadBtn:active{ background: #050505; }
.pfDpadBtn--up{ grid-column: 2; grid-row: 1; border-radius: 6px 6px 0 0; }
.pfDpadBtn--left{ grid-column: 1; grid-row: 2; border-radius: 6px 0 0 6px; }
.pfDpadBtn--right{ grid-column: 3; grid-row: 2; border-radius: 0 6px 6px 0; }
.pfDpadBtn--down{ grid-column: 2; grid-row: 3; border-radius: 0 0 6px 6px; }
.pfMidRow{ display: flex; flex-direction: column; align-items: center; gap: 8px; transform: rotate(-14deg); }
.pfMidBtn{ background: none; border: none; padding: 0; cursor: pointer; touch-action: none; }
.pfMidBtn__pill{
  display: block; background: #333; color: #ddd; font-size: 8.5px; font-weight: 800;
  letter-spacing: 0.08em; padding: 4px 12px; border-radius: 8px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
}
.pfMidBtn:active .pfMidBtn__pill{ transform: translateY(1px); box-shadow: none; }
.pfMidBtn.is-muted .pfMidBtn__pill{ background: #7a2f2f; color: #ffd7d7; }
.pfFaceBtns{ display: flex; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.pfFaceBtn{
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: radial-gradient(circle at 35% 30%, #d1425c, #97112f);
  color: #fff8e6; font-weight: 900; font-size: 14px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.45);
  cursor: pointer; touch-action: none;
}
.pfFaceBtn--b{ margin-bottom: 15px; }
.pfFaceBtn:active{ transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); }
.platformerHint{ text-align: center; font-size: 12.5px; opacity: 0.75; padding: 2px 6px 4px; line-height: 1.4; }
.platformerPanel{
  position: absolute; inset: 12px;
  background: rgba(7,20,32,0.97);
  border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 26px 20px; gap: 6px;
}
.platformerPanel__title{ font-family: var(--font-display); font-weight: 900; font-size: 26px; color: #fff; margin: 0 0 4px; }
.platformerPanel__body{ font-size: 16.5px; color: #e8e8e8; opacity: 0.9; margin: 0 0 16px; max-width: 380px; line-height: 1.5; }
.platformerPanel__best{ font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--gold); margin: 0 0 14px; }

/* ==========================================================================
   "De Legende van de Verstopte Vork" — verstopt mini-Zelda avontuur
   ========================================================================== */
.zeldaOverlay{
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(4,9,18,0.94);
  display: flex; align-items: center; justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
}
.zeldaShell{
  position: relative;
  width: min(96vw, 720px);
  background: linear-gradient(165deg,#1c3327,#0e1c15);
  border: 3px solid #d9b45a;
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.65), inset 0 0 0 2px rgba(0,0,0,0.4), inset 0 0 30px rgba(0,0,0,0.35);
  color: #fff;
  padding: 12px;
}
.zeldaShell::before{
  content:""; position:absolute; inset:6px; border:1px solid rgba(217,180,90,0.35);
  border-radius: 12px; pointer-events:none;
}
.zdIntro{
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 18px 14px 22px; gap: 10px;
  background: radial-gradient(120% 90% at 50% 0%, #2a4a38, #0e1c15 70%);
  border-radius: 12px;
}
.zdIntroArt{ font-size: 52px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); animation: zdIntroFloat 2.6s ease-in-out infinite; }
@keyframes zdIntroFloat{ 0%,100%{ transform: translateY(0) rotate(-3deg);} 50%{ transform: translateY(-8px) rotate(3deg);} }
.zdIntroTitle{
  font-family: var(--font-display); font-weight: 900; font-size: 26px; line-height: 1.2;
  margin: 4px 0 2px; color: #fff2cf;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 18px rgba(217,180,90,0.45);
}
.zdIntroText{ font-size: 14px; line-height: 1.55; opacity: 0.88; max-width: 420px; margin: 0; }
.zdIntroBtn{
  margin-top: 10px; border: 2px solid #fff2cf; border-radius: 12px;
  background: linear-gradient(180deg,#e7b52d,#a9750f); color: #2a1a00;
  font-family: var(--font-display); font-weight: 900; font-size: 16px;
  padding: 12px 26px; cursor: pointer; box-shadow: 0 4px 0 #6b4a06, 0 10px 22px rgba(0,0,0,0.4);
}
.zdIntroBtn:active{ transform: translateY(3px); box-shadow: 0 1px 0 #6b4a06; }
.zdIntroHint{ font-size: 11.5px; opacity: 0.6; margin-top: 2px; }
.zdGameWrap[hidden]{ display: none; }
.zdClose{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  border: none; background: #fff; color: #14261f; border-radius: 50%;
  width: 34px; height: 34px; font-size: 16px; cursor: pointer;
}
.zdHud{
  display: flex; align-items: center; gap: 14px; padding: 4px 42px 8px 2px;
  font-weight: 800; font-size: 15px; flex-wrap: wrap;
}
.zdHudHearts{ letter-spacing: 2px; }
.zdHudCoins, .zdHudKey{ white-space: nowrap; }
#zdCanvas{ width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: #e8dcc0; touch-action: none; }
.zdRoomBanner{
  position: absolute; left: 50%; top: 54px; transform: translate(-50%, -8px);
  background: rgba(4,18,14,0.88); color: #d8f2c6; font-weight: 800; font-size: 13px;
  padding: 6px 16px; border-radius: 999px; opacity: 0; transition: opacity 0.25s, transform 0.25s;
  pointer-events: none; white-space: nowrap;
}
.zdRoomBanner.is-visible{ opacity: 1; transform: translate(-50%, 0); }
.zdHint{ text-align: center; font-size: 12.5px; opacity: 0.75; padding: 2px 6px 4px; line-height: 1.4; }

.zdController{
  position: relative;
  background: linear-gradient(180deg, #dcdcdc, #b4b4b4);
  border: 3px solid #3a3a3a; border-radius: 16px;
  padding: 14px 18px 10px;
  margin: 10px auto 2px; max-width: 380px;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,0.14), inset 0 2px 0 rgba(255,255,255,0.4), 0 8px 16px rgba(0,0,0,0.4);
}
.zdBrand{
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: 800; letter-spacing: 0.12em;
  color: #4f6f4a; text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.zdControllerTop{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zdDpad{
  position: relative; width: 84px; height: 84px; flex-shrink: 0; touch-action: none;
  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
}
.zdDpadHub{ grid-column: 2; grid-row: 2; background: #2a2a2a; box-shadow: inset 0 1px 2px rgba(255,255,255,0.15); }
.zdDpadBtn{
  border: none; background: #232323; color: #eee; font-size: 14px;
  touch-action: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.zdDpadBtn:active{ background: #050505; }
.zdDpadBtn--up{ grid-column: 2; grid-row: 1; border-radius: 6px 6px 0 0; }
.zdDpadBtn--left{ grid-column: 1; grid-row: 2; border-radius: 6px 0 0 6px; }
.zdDpadBtn--right{ grid-column: 3; grid-row: 2; border-radius: 0 6px 6px 0; }
.zdDpadBtn--down{ grid-column: 2; grid-row: 3; border-radius: 0 0 6px 6px; }
.zdMidRow{ display: flex; flex-direction: column; align-items: center; gap: 8px; transform: rotate(-14deg); }
.zdMidBtn{ background: none; border: none; padding: 0; cursor: pointer; touch-action: none; }
.zdMidBtn__pill{
  display: block; background: #333; color: #ddd; font-size: 8.5px; font-weight: 800;
  letter-spacing: 0.08em; padding: 4px 12px; border-radius: 8px;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
}
.zdMidBtn:active .zdMidBtn__pill{ transform: translateY(1px); box-shadow: none; }
.zdMidBtn.is-muted .zdMidBtn__pill{ background: #7a2f2f; color: #ffd7d7; }
.zdFaceBtns{ display: flex; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.zdFaceBtn{
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: radial-gradient(circle at 35% 30%, #5aa062, #2c6b34);
  color: #fff8e6; font-weight: 900; font-size: 14px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.45);
  cursor: pointer; touch-action: none;
}
.zdFaceBtn--b{ margin-bottom: 15px; }
.zdFaceBtn:active{ transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.3); }

.zdPanel{
  position: absolute; inset: 12px;
  background: rgba(8,20,14,0.97);
  border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 26px 20px; gap: 6px; z-index: 3;
}
.zdPanel__card h3{ font-family: var(--font-display); font-weight: 900; font-size: 25px; color: #fff; margin: 0 0 8px; }
.zdPanel__card p{ font-size: 15.5px; color: #e8e8e8; opacity: 0.9; margin: 0 0 16px; max-width: 380px; line-height: 1.5; }
.zdPanel__btns{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   Verstopte plattegrond-minigames — "Vangen" en "Flipperbak"
   ========================================================================== */
.mgOverlay{
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(4,9,18,0.94);
  display: flex; align-items: center; justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
}
.mgShell{
  position: relative;
  width: min(96vw, 640px);
  background: #1c1a14;
  border: 2px solid #d8b26a;
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.6);
  color: #fff;
  padding: 14px;
  text-align: center;
}
.mgShell--chooser{ padding: 30px 20px 34px; }
.mgClose{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  border: none; background: #fff; color: #1c1a14; border-radius: 50%;
  width: 34px; height: 34px; font-size: 16px; cursor: pointer;
}
.mgTitle{ font-family: var(--font-display); font-weight: 900; font-size: 21px; margin: 4px 0 10px; }
.mgChooser__eyebrow{ font-size: 13px; opacity: 0.75; margin: 0 0 4px; }
.mgChooser__opts{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.mgChooser__opt{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #2a2620; border: 2px solid #d8b26a; border-radius: 14px;
  padding: 18px 26px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  cursor: pointer; min-width: 120px; transition: transform 0.15s ease;
}
.mgChooser__opt:active{ transform: scale(0.96); }
.mgChooser__icon{ font-size: 32px; }
.mgHud{
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-weight: 800; font-size: 14px; padding: 2px 42px 8px 2px; flex-wrap: wrap;
}
#mgCanvas{ width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: #e8dcc0; touch-action: none; }
.mgControls{ margin-top: 10px; min-height: 34px; }
.mgHint{ font-size: 12.5px; opacity: 0.75; margin: 0; }

/* Brickout touch controls — large arrow buttons in the lower corners. */
.mgBrickControls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:0 2px;
}
.mgBrickArrow{
  width:86px;
  height:52px;
  border:2px solid #d8b26a;
  border-radius:14px;
  background:linear-gradient(180deg,#2f9bd6,#1f6fa0);
  color:#fff;
  font-size:30px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 0 rgba(0,0,0,.35);
}
.mgBrickArrow:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 rgba(0,0,0,.35);
}
@media(max-width:520px){
  .mgBrickArrow{width:92px;height:56px;font-size:32px;}
}

.mgToast{
  position: absolute; left: 50%; top: 96px; transform: translate(-50%, -8px);
  background: rgba(4,18,14,0.9); color: #ffe9b3; font-weight: 800; font-size: 12.5px;
  padding: 5px 14px; border-radius: 999px; opacity: 0; transition: opacity 0.2s, transform 0.2s;
  pointer-events: none; white-space: nowrap;
}
.mgToast.is-visible{ opacity: 1; transform: translate(-50%, 0); }
.mgFlippers{ display: flex; justify-content: space-between; padding: 0 6px; }
.mgFlipperBtn{
  width: 84px; height: 46px; border-radius: 12px; border: 2px solid #8a2f2f;
  background: linear-gradient(180deg, #c0392b, #8a2f2f); color: #fff;
  font-size: 20px; cursor: pointer; touch-action: none;
}
.mgFlipperBtn:active{ transform: translateY(2px); }
.mgEnd{ display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mgEnd__title{ font-family: var(--font-display); font-weight: 900; font-size: 19px; margin: 0; }
.mgEnd__body{ font-size: 14.5px; opacity: 0.9; margin: 0; }
.mgEnd__btns{ display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   Mijn Voortgang — trofee-knop + overzichtsscherm
   ========================================================================== */
.progressFab{
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  width: 52px; height: 52px; border-radius: 50%;
  border: none; background: var(--gold); color: #1c1200;
  font-size: 24px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.progressFab:active{ transform: scale(0.94); }
.progressCard{
  position: relative;
  width: min(94vw, 460px);
  max-height: 86vh; overflow-y: auto;
  background: var(--navy); color: var(--cream-light);
  border-radius: 20px; padding: 26px 22px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.progressCard__title{ font-family: var(--font-display); font-weight: 900; font-size: 22px; margin: 0 0 16px; text-align: center; }
.progressBlock{ margin-bottom: 18px; }
.progressBlock__label{ font-weight: 700; font-size: 14.5px; margin: 0 0 8px; }
.progressBar{ height: 10px; border-radius: 999px; background: rgba(255,255,255,0.15); overflow: hidden; }
.progressBar__fill{ height: 100%; background: var(--gold); border-radius: 999px; transition: width 0.3s ease; }
.progressGrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.progressSlot{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgba(255,255,255,0.06); border-radius: 10px; padding: 8px 4px;
  min-height: 62px; text-align: center;
}
.progressSlot.is-found{ background: rgba(242,201,76,0.16); }
.progressSlot__icon{ font-size: 20px; }
.progressSlot__name{ font-size: 9px; font-weight: 700; line-height: 1.2; opacity: 0.9; }
.progressHint{
  margin-top: 4px; font-size: 13px; line-height: 1.5;
  background: rgba(255,255,255,0.08); border-radius: 12px; padding: 12px 14px;
}
.progressHint--done{ background: rgba(242,201,76,0.18); font-weight: 700; text-align: center; }

/* Real pinball controls */
.mgPinballControls{display:grid;grid-template-columns:1fr 92px 1fr;gap:8px;align-items:center;padding:0 2px}
.mgLaunchBtn{height:46px;border-radius:12px;border:2px solid #9b741e;background:#e7b52d;color:#201600;font-weight:900;font-size:13px;cursor:pointer;touch-action:none;box-shadow:0 3px 0 #795815}
.mgLaunchBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #795815}
.mgPinballControls .mgFlipperBtn{width:100%;font-size:12px;font-weight:900}

/* Sound Menu in Mijn Voortgang */
.progressSoundBlock{margin-bottom:18px}
.progressSoundBtn{width:100%;border:2px solid var(--gold);background:rgba(242,201,76,.14);color:var(--cream-light);border-radius:14px;padding:12px 14px;font:inherit;font-weight:900;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px}
.progressSoundBtn span{font-size:11px;font-weight:700;opacity:.72;text-align:right}
.progressSoundBtn:active{transform:translateY(1px)}
.soundMenuOverlay{position:fixed;inset:0;z-index:2200;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:16px}
.soundMenuCard{position:relative;width:min(96vw,520px);max-height:90vh;overflow:auto;background:var(--navy);color:var(--cream-light);border-radius:20px;padding:24px 18px 20px;box-shadow:0 25px 80px rgba(0,0,0,.65)}
.soundMenu__title{font-family:var(--font-display);font-weight:900;font-size:24px;text-align:center;margin-bottom:6px}
.soundMenu__intro{font-size:13px;line-height:1.45;opacity:.82;text-align:center;margin:0 22px 14px}
.soundMenuCard h3{font-family:var(--font-display);font-size:16px;margin:18px 0 8px;color:var(--gold)}
.soundMenu__toolbar{display:flex;justify-content:center;margin-bottom:4px}
.soundMenu__stop{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:var(--cream-light);border-radius:10px;padding:8px 12px;font-weight:800;cursor:pointer}
.soundMenu__list{display:grid;gap:7px}
.soundMenu__row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;background:rgba(255,255,255,.055);border-radius:12px;padding:8px 9px}
.soundMenu__icon{font-size:21px;text-align:center}
.soundMenu__meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.soundMenu__meta strong{font-size:13px}
.soundMenu__meta span{font-size:10px;line-height:1.25;opacity:.68}
.soundMenu__play{border:1px solid var(--gold);background:rgba(242,201,76,.12);color:var(--cream-light);border-radius:9px;padding:7px 9px;font-weight:900;font-size:11px;cursor:pointer;white-space:nowrap}
.soundMenu__play.is-playing{background:var(--gold);color:#1c1200}
.soundMenu__close{position:absolute;right:10px;top:10px;z-index:2}
@media(max-width:430px){.progressSoundBtn{display:block}.progressSoundBtn span{display:block;text-align:left;margin-top:3px}.soundMenu__row{grid-template-columns:30px 1fr}.soundMenu__play{grid-column:2;justify-self:start}.soundMenu__meta span{font-size:9px}}

/* Fullscreen festival pinball — portrait arcade cabinet */
.mgOverlay:has(.mgShell--pinballPro){padding:0;background:#02060b;}
.mgShell--pinballPro{width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;padding:6px;display:flex;flex-direction:column;box-sizing:border-box;background:#030b12;color:#fff;overflow:hidden;}
.mgShell--pinballPro .mgTitle{display:none}
.mgShell--pinballPro .mgHud{order:2;background:#0a2431;border:1px solid #d7ae50;border-radius:7px;padding:5px 42px 5px 8px;margin:4px 0;font-size:11px;flex:0 0 auto;}
.mgShell--pinballPro #mgCanvas{order:3;display:block;flex:1 1 auto;width:auto;height:auto;max-width:100%;min-height:0;object-fit:contain;object-position:center top;border:2px solid #d7ae50;border-radius:8px;background:#071522;touch-action:none;}
.mgShell--pinballPro .mgControls{order:4;flex:0 0 auto;margin-top:5px;}
.pinballProTop{order:1;display:grid;grid-template-columns:1fr minmax(240px,430px) 1fr;gap:8px;align-items:center;background:linear-gradient(#123243,#07141d);border:2px solid #d7ae50;border-radius:8px;padding:6px 9px;color:#f5e9bc;text-align:center;box-shadow:inset 0 0 18px rgba(0,0,0,.65);flex:0 0 auto;}
.pinballProBrand{text-align:left;font-family:var(--font-display);line-height:1.02}.pinballProBrand strong{display:block;color:#f5b62d;font-size:14px}.pinballProBrand b{display:block;color:#28b9d7;font-size:19px}.pinballProBrand small{display:block;font-size:8px;opacity:.75;margin-top:3px}
.pinballProLCD{background:#142d20;border:4px inset #9c9c79;border-radius:5px;padding:5px;font-family:monospace;font-weight:900;color:#baf5a0;box-shadow:inset 0 0 14px rgba(0,0,0,.85)}.pinballProLCD>div:first-child{font-size:24px;letter-spacing:3px}.pinballProLCD .ppLine{display:flex;justify-content:space-around;gap:5px;font-size:8px;margin-top:3px}.pinballProLCD small{display:block;font-size:8px;margin-top:3px;letter-spacing:1px}.pinballProInfo{display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-size:8px;line-height:1.35}.pinballProInfo b{font-size:10px;color:#f5c957}.pinballProInfo span{opacity:.78}
.mgShell--pinballPro .mgPinballControls{display:grid;grid-template-columns:1fr 110px 1fr;gap:6px}.mgShell--pinballPro .mgFlipperBtn,.mgShell--pinballPro .mgLaunchBtn{height:48px;font-weight:900}.mgShell--pinballPro .mgFlipperBtn{font-size:11px}.mgShell--pinballPro .mgLaunchBtn{font-size:12px}
.mgShell--pinballPro .mgHint{margin:3px 0 0;font-size:9px;opacity:.75}
@media(max-width:600px){.mgShell--pinballPro{padding:4px}.pinballProTop{grid-template-columns:.9fr 1.8fr .9fr;gap:3px;padding:4px}.pinballProBrand strong{font-size:8px}.pinballProBrand b{font-size:11px}.pinballProBrand small{font-size:6px}.pinballProInfo{font-size:6px}.pinballProInfo b{font-size:7px}.pinballProLCD{border-width:3px;padding:3px}.pinballProLCD>div:first-child{font-size:15px;letter-spacing:2px}.pinballProLCD .ppLine{font-size:6px}.pinballProLCD small{font-size:6px}.mgShell--pinballPro .mgHud{font-size:9px;padding:4px 35px 4px 5px}.mgShell--pinballPro .mgPinballControls{grid-template-columns:1fr 76px 1fr;gap:4px}.mgShell--pinballPro .mgFlipperBtn,.mgShell--pinballPro .mgLaunchBtn{height:44px;font-size:9px}.mgShell--pinballPro .mgHint{font-size:7px}}
.ccOverlay{position:fixed;inset:0;z-index:2400;background:radial-gradient(120% 90% at 50% -10%,#4a2a86,#1c0f3d 55%,#0b0620 100%);display:flex;align-items:center;justify-content:center;padding:12px}
.ccCard{width:min(94vw,560px);max-height:94dvh;overflow:auto;background:linear-gradient(165deg,#4b2c8f,#2a1259 55%,#1a0a3c);border:2px solid rgba(255,214,120,.55);border-radius:24px;padding:14px;color:#fff;box-shadow:0 25px 90px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.06);position:relative}
.ccClose{position:absolute;top:10px;right:10px;z-index:3;float:none;border:2px solid rgba(255,255,255,.5);border-radius:50%;width:32px;height:32px;background:rgba(10,5,25,.55);color:#fff;font-weight:900;line-height:1;backdrop-filter:blur(2px)}
.ccTopRow{display:flex;align-items:center;gap:10px;margin:2px 44px 10px 2px}
.ccLevelBadge{position:relative;flex:none;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#f0b429 55%,#b9781a 100%);border:3px solid #fff4d6;box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 -3px 6px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:20px;color:#5a3400}
.ccLevelBadge span{position:absolute;bottom:-5px;font-size:11px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.ccMovesPill{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(180deg,#6a3fc4,#4423a0);border:2px solid rgba(255,255,255,.35);border-radius:16px;padding:8px 14px;box-shadow:inset 0 2px 4px rgba(255,255,255,.18),inset 0 -3px 6px rgba(0,0,0,.3)}
.ccMovesPill b{font-family:var(--font-display);font-size:20px;color:#fff}
.ccMovesPill small{font-size:10px;letter-spacing:1px;opacity:.85;font-weight:700}
.ccEyebrow{position:absolute;top:12px;left:14px;font-size:9px;letter-spacing:2px;opacity:.7;text-transform:uppercase}
.ccScoreRow{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:7px 12px;margin-bottom:10px}
.ccScoreRow .ccScoreLabel{font-size:10px;letter-spacing:1px;opacity:.8;font-weight:700}
.ccScoreRow b{font-family:var(--font-display);font-size:17px;color:var(--gold,#f0c145)}
.ccStars{display:flex;gap:3px;margin-left:auto}
.ccStars span{font-size:13px;opacity:.3;filter:grayscale(1)}
.ccStars span.is-lit{opacity:1;filter:none;text-shadow:0 0 6px rgba(255,214,120,.9)}
.ccProgressTrack{height:8px;border-radius:6px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);overflow:hidden;margin-bottom:12px}
.ccProgressFill{height:100%;border-radius:6px;background:linear-gradient(90deg,#ffe9a8,#f0b429);transition:width .3s ease}
.ccBoard{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;background:linear-gradient(165deg,#2c1560,#1a0c3e);padding:8px;border-radius:16px;border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 3px 14px rgba(0,0,0,.5)}
.ccTile{aspect-ratio:1;border:0;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .14s ease;position:relative;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.9),rgba(255,255,255,0) 45%),var(--cc-bg,#7a5ad6);box-shadow:0 3px 0 rgba(0,0,0,.28),inset 0 -4px 6px rgba(0,0,0,.22),inset 0 3px 4px rgba(255,255,255,.35)}
.ccTile img{max-width:64%;max-height:64%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));pointer-events:none}
.ccTile.is-selected{outline:3px solid #ff6fd8;outline-offset:2px;transform:scale(.9);box-shadow:0 0 14px rgba(255,111,216,.85),inset 0 -4px 6px rgba(0,0,0,.22)}
.ccTile.is-match{animation:ccPop .32s ease forwards}
@keyframes ccPop{0%{transform:scale(1)}55%{transform:scale(1.28);filter:brightness(1.6)}100%{transform:scale(0);opacity:0}}
.ccTile.is-empty{background:transparent;box-shadow:none}
.ccTile--c0{--cc-bg:linear-gradient(160deg,#ff7a9c,#c22a52)}
.ccTile--c1{--cc-bg:linear-gradient(160deg,#5ec8ff,#1f6fb8)}
.ccTile--c2{--cc-bg:linear-gradient(160deg,#5be0c9,#12967d)}
.ccTile--c3{--cc-bg:linear-gradient(160deg,#c9f0ff,#6fa9d9)}
.ccTile--c4{--cc-bg:linear-gradient(160deg,#ffb95e,#e0762a)}
.ccTile--c5{--cc-bg:linear-gradient(160deg,#ffe27a,#e0a415)}
.ccHint{text-align:center;font-size:11px;opacity:.75;margin:10px 0 0}
@media(max-width:420px){.ccLevelBadge{width:44px;height:44px;font-size:17px}.ccMovesPill b{font-size:17px}.ccBoard{gap:3px;padding:6px}}

/* Pinball mobile cabinet — the playfield itself contains the complete backbox,
   so the phone gets the same tall arcade composition as the supplied mockup. */
.mgOverlay:has(.mgShell--pinballPro){padding:0!important;background:#000;overscroll-behavior:none;}
.mgShell--pinballPro{position:relative!important;width:100vw!important;height:100svh!important;max-width:none!important;max-height:none!important;padding:0!important;border:0!important;border-radius:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#02070c!important;overflow:hidden!important;overscroll-behavior:none!important;}
.mgShell--pinballPro .pinballProTop{display:none!important;}
.mgShell--pinballPro .mgHud{display:none!important;}
.mgShell--pinballPro #mgCanvas{order:1!important;flex:0 1 auto!important;width:auto!important;height:100svh!important;max-width:100vw!important;max-height:100svh!important;aspect-ratio:700/980!important;object-fit:contain!important;border:0!important;border-radius:0!important;background:#02070c!important;touch-action:none!important;}
.mgShell--pinballPro .mgControls{position:absolute!important;z-index:20!important;left:0!important;right:0!important;bottom:max(8px,env(safe-area-inset-bottom))!important;margin:0!important;padding:0 10px!important;pointer-events:none!important;}
.mgShell--pinballPro .pinballProControls{pointer-events:auto!important;display:grid!important;grid-template-columns:minmax(0,1fr) 86px minmax(0,1fr)!important;gap:7px!important;max-width:620px!important;margin:0 auto!important;}
.mgShell--pinballPro .mgFlipperBtn,.mgShell--pinballPro .mgLaunchBtn{border:2px solid #e5b63e!important;box-shadow:0 4px 0 #57380f,0 0 16px rgba(245,181,40,.18)!important;border-radius:12px!important;background:linear-gradient(#173c50,#09202e)!important;color:#fff5d5!important;font-weight:900!important;height:54px!important;min-height:54px!important;touch-action:none!important;-webkit-user-select:none!important;user-select:none!important;-webkit-tap-highlight-color:transparent!important;}
.mgShell--pinballPro .mgFlipperBtn:active,.mgShell--pinballPro .mgLaunchBtn:active{transform:translateY(3px)!important;box-shadow:0 1px 0 #57380f,0 0 12px rgba(245,181,40,.25)!important;}
.mgShell--pinballPro .mgLaunchBtn{background:linear-gradient(#f7bf35,#a9610f)!important;color:#07131a!important;font-size:11px!important;}
.mgShell--pinballPro .mgFlipperBtn{font-size:10px!important;}
.mgShell--pinballPro .mgHint{display:none!important;}
.mgShell--pinballPro .mgClose{z-index:30!important;top:max(10px,env(safe-area-inset-top))!important;right:10px!important;width:34px!important;height:34px!important;border-radius:50%!important;background:rgba(2,10,16,.78)!important;border:1px solid #e0ae3f!important;color:#fff!important;font-size:17px!important;}
@media (max-width:520px){
  .mgShell--pinballPro #mgCanvas{width:100vw!important;height:auto!important;max-height:100svh!important;}
  .mgShell--pinballPro .mgControls{bottom:max(7px,env(safe-area-inset-bottom))!important;padding:0 7px!important;}
  .mgShell--pinballPro .pinballProControls{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr)!important;gap:5px!important;}
  .mgShell--pinballPro .mgFlipperBtn,.mgShell--pinballPro .mgLaunchBtn{height:50px!important;min-height:50px!important;border-radius:10px!important;font-size:9px!important;}
}
@media (max-height:680px){
  .mgShell--pinballPro .mgFlipperBtn,.mgShell--pinballPro .mgLaunchBtn{height:44px!important;min-height:44px!important;}
}

/* FINAL MOBILE PINBALL SKIN — mockup artwork fills the entire game surface */
.mgShell--pinballPro{background:#02070c!important;}
.mgShell--pinballPro #mgCanvas{display:block!important;width:100vw!important;height:100svh!important;max-width:100vw!important;max-height:100svh!important;object-fit:contain!important;object-position:center center!important;background:#02070c!important;border:0!important;}
.mgShell--pinballPro .pinballProTop,.mgShell--pinballPro .mgHud{display:none!important;}
.mgShell--pinballPro .mgControls{position:absolute!important;left:0!important;right:0!important;bottom:max(8px,env(safe-area-inset-bottom))!important;z-index:50!important;padding:0 8px!important;pointer-events:none!important;}
.mgShell--pinballPro .pinballProControls{display:grid!important;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr)!important;gap:7px!important;max-width:720px!important;margin:0 auto!important;pointer-events:auto!important;}
.mgShell--pinballPro .mgFlipperBtn,.mgShell--pinballPro .mgLaunchBtn{height:54px!important;min-height:54px!important;border:2px solid #e6b83e!important;border-radius:14px!important;font-weight:900!important;box-shadow:0 4px 0 #4e310e,0 0 20px rgba(245,181,40,.25)!important;-webkit-user-select:none!important;user-select:none!important;touch-action:none!important;}
.mgShell--pinballPro .mgFlipperBtn{background:linear-gradient(#c9342b,#7f1616)!important;color:#fff5d8!important;font-size:10px!important;}
.mgShell--pinballPro .mgLaunchBtn{background:linear-gradient(#ffd34f,#e09214)!important;color:#07131a!important;font-size:12px!important;}
.mgShell--pinballPro .mgHint{display:none!important;}
@media(max-width:600px){.mgShell--pinballPro .pinballProControls{grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr)!important;gap:5px!important}.mgShell--pinballPro .mgFlipperBtn,.mgShell--pinballPro .mgLaunchBtn{height:50px!important;min-height:50px!important;border-radius:11px!important;font-size:9px!important}}

/* FINAL PINBALL MOBILE SKIN */
.mgShell--pinballPro{background:#02070c!important;}
.mgShell--pinballPro #mgCanvas{display:block!important;width:100vw!important;height:100svh!important;max-width:100vw!important;max-height:100svh!important;object-fit:contain!important;object-position:center center!important;background:#02070c!important;border:0!important;}
.mgShell--pinballPro .pinballProTop,.mgShell--pinballPro .mgHud{display:none!important;}
.mgShell--pinballPro .mgControls{position:absolute!important;left:0!important;right:0!important;bottom:max(8px,env(safe-area-inset-bottom))!important;z-index:50!important;padding:0 8px!important;pointer-events:none!important;}
.mgShell--pinballPro .pinballProControls{display:grid!important;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr)!important;gap:7px!important;max-width:720px!important;margin:0 auto!important;pointer-events:auto!important;}
.mgShell--pinballPro .mgFlipperBtn,.mgShell--pinballPro .mgLaunchBtn{height:54px!important;min-height:54px!important;border:2px solid #e6b83e!important;border-radius:14px!important;font-weight:900!important;box-shadow:0 4px 0 #4e310e,0 0 20px rgba(245,181,40,.25)!important;-webkit-user-select:none!important;user-select:none!important;touch-action:none!important;}
.mgShell--pinballPro .mgFlipperBtn{background:linear-gradient(#c9342b,#7f1616)!important;color:#fff5d8!important;font-size:10px!important;}
.mgShell--pinballPro .mgLaunchBtn{background:linear-gradient(#ffd34f,#e09214)!important;color:#07131a!important;font-size:12px!important;}
.mgShell--pinballPro .mgHint{display:none!important;}
@media(max-width:600px){.mgShell--pinballPro .pinballProControls{grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr)!important;gap:5px!important}.mgShell--pinballPro .mgFlipperBtn,.mgShell--pinballPro .mgLaunchBtn{height:50px!important;min-height:50px!important;border-radius:11px!important;font-size:9px!important}}

/* FINAL PINBALL MOBILE SKIN */
.mgShell--pinballPro{background:#02070c!important;}
.mgShell--pinballPro #mgCanvas{display:block!important;width:100vw!important;height:100svh!important;max-width:100vw!important;max-height:100svh!important;object-fit:contain!important;object-position:center center!important;background:#02070c!important;border:0!important;}
.mgShell--pinballPro .pinballProTop,.mgShell--pinballPro .mgHud{display:none!important;}
.mgShell--pinballPro .mgControls{position:absolute!important;left:0!important;right:0!important;bottom:max(8px,env(safe-area-inset-bottom))!important;z-index:50!important;padding:0 8px!important;pointer-events:none!important;}
.mgShell--pinballPro .pinballProControls{display:grid!important;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr)!important;gap:7px!important;max-width:720px!important;margin:0 auto!important;pointer-events:auto!important;}
.mgShell--pinballPro .mgFlipperBtn,.mgShell--pinballPro .mgLaunchBtn{height:54px!important;min-height:54px!important;border:2px solid #e6b83e!important;border-radius:14px!important;font-weight:900!important;box-shadow:0 4px 0 #4e310e,0 0 20px rgba(245,181,40,.25)!important;-webkit-user-select:none!important;user-select:none!important;touch-action:none!important;}
.mgShell--pinballPro .mgFlipperBtn{background:linear-gradient(#c9342b,#7f1616)!important;color:#fff5d8!important;font-size:10px!important;}
.mgShell--pinballPro .mgLaunchBtn{background:linear-gradient(#ffd34f,#e09214)!important;color:#07131a!important;font-size:12px!important;}
.mgShell--pinballPro .mgHint{display:none!important;}
@media(max-width:600px){.mgShell--pinballPro .pinballProControls{grid-template-columns:minmax(0,1fr) 78px minmax(0,1fr)!important;gap:5px!important}.mgShell--pinballPro .mgFlipperBtn,.mgShell--pinballPro .mgLaunchBtn{height:50px!important;min-height:50px!important;border-radius:11px!important;font-size:9px!important}}


/* Pinball v35 — final mobile cabinet sizing */
.mgShell--pinballPro #mgCanvas{
  width:min(100vw, 75vh)!important;
  height:min(100vh, 133.333vw)!important;
  aspect-ratio:3/4!important;
  max-width:100vw!important;
  max-height:100vh!important;
  object-fit:contain!important;
  object-position:center!important;
}
.mgShell--pinballPro .mgControls{
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  padding:0 9px!important;
}
.mgShell--pinballPro .pinballProControls{
  grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr)!important;
}
@media(max-width:600px){
  .mgShell--pinballPro #mgCanvas{width:min(100vw,75vh)!important;height:min(100vh,133.333vw)!important;}
  .mgShell--pinballPro .pinballProControls{grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr)!important;}
  .mgShell--pinballPro .mgFlipperBtn,.mgShell--pinballPro .mgLaunchBtn{height:52px!important;min-height:52px!important;}
}
@media(max-height:700px){
  .mgShell--pinballPro .pinballProControls{grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr)!important;}
  .mgShell--pinballPro .mgFlipperBtn,.mgShell--pinballPro .mgLaunchBtn{height:44px!important;min-height:44px!important;}
}

/* ==========================================================================
   DeliNova Tetris — verstopte minigame (5x tikken op DeliNova-logo)
   ========================================================================== */
.ttOverlay{
  position: fixed; inset: 0; z-index: 1300;
  background: radial-gradient(120% 100% at 50% 0%, #12243a 0%, #060d17 70%);
  display: flex; align-items: center; justify-content: center;
  overscroll-behavior: none;
}
.ttShell{
  position: relative; width: 100%; height: 100%;
  max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
  box-sizing: border-box; color: #f3ecd8; font-family: var(--font-display);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 34px);
}
.ttClose, .ttMuteBtn{
  position: absolute; top: max(12px, env(safe-area-inset-top)); width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid rgba(201,154,62,0.55);
  background: rgba(6,13,23,0.75); color: #f3ecd8; font-size: 15px; cursor: pointer; z-index: 5;
}
.ttClose{ right: 12px; }
.ttMuteBtn{ left: 12px; }
.ttMuteBtn.is-muted{ opacity: 0.55; }

.ttHud{
  width: 100%; max-width: 300px; display: flex; align-items: center; justify-content: space-between;
  margin: 40px 0 8px; padding: 8px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(201,154,62,0.3);
}
.ttHud__col{ display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.ttHud__label{ font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; }
.ttHud__value{ font-size: 20px; font-weight: 900; color: var(--gold); }
.ttHud__col--center{ min-width: 100px; }
.ttHud__score{ font-size: 24px; font-weight: 900; line-height: 1.1; }
.ttHud__best{ font-size: 10px; opacity: 0.65; }

.ttPanels{ display: flex; align-items: flex-start; justify-content: center; gap: 10px; width: 100%; flex: 1 1 auto; min-height: 0; }
.ttPanel{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(201,154,62,0.3);
  border-radius: 10px; padding: 8px; margin-top: 4px;
}
.ttPanel--hold{ cursor: pointer; border: 0; font-family: inherit; color: inherit; }
.ttPanel__label{ font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; }
.ttMini{ display: block; background: rgba(0,0,0,0.25); border-radius: 6px; }
.ttMini--sm{ opacity: 0.75; }
.ttPanel--next{ gap: 5px; }

.ttBoardWrap{ position: relative; flex: 0 1 auto; height: 100%; max-height: 100%; display: flex; align-items: center; }
#ttBoard{
  display: block; height: 100%; max-height: 46vh; width: auto; max-width: 100%;
  aspect-ratio: 240 / 480; object-fit: contain;
  border: 2px solid rgba(201,154,62,0.55); border-radius: 8px; background: #071018;
  box-shadow: 0 0 24px rgba(0,0,0,0.5);
  touch-action: none;
}
.ttGameOver, .ttPause{
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; background: rgba(6,13,23,0.88); border-radius: 8px; text-align: center; padding: 16px;
}
.ttGameOver[hidden], .ttPause[hidden]{ display: none; }
.ttGameOver__title{ font-size: 20px; font-weight: 900; margin: 0; }
.ttGameOver__score{ font-size: 13px; opacity: 0.85; margin: 0; }
.ttGameOver__new{ color: var(--gold); font-weight: 700; margin: 0; }
.ttRetryBtn{
  margin-top: 6px; padding: 9px 20px; border-radius: 999px; border: 1.5px solid var(--gold);
  background: var(--gold); color: #1a1206; font-weight: 900; cursor: pointer;
}
.ttPause p{ font-size: 16px; font-weight: 700; margin: 0; }

.ttControls{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; max-width: 340px; margin-top: 12px; }
#ttNes{ margin-top: 10px; }
#ttNes .nesActions{ transform: rotate(-14deg); }
#ttNes .nesMeta{ margin-top: 14px; }
@media (max-width: 380px){
  #ttNes{ max-width: 300px; padding: 14px 14px 16px; }
  #ttNes .nesDpad{ width: 104px; height: 104px; }
  #ttNes .nesActionBtn{ width: 46px; height: 46px; font-size: 18px; }
  #ttBoard{ max-height: 40vh; }
  .ttPanel{ padding: 5px; }
  .ttHud{ margin-top: 46px; }
}
@media (min-width: 700px){
  .ttShell{ max-width: 640px; }
  #ttBoard{ max-height: 74vh; }
  .ttHud{ max-width: 380px; }
  .ttHud__value{ font-size: 24px; }
  .ttHud__score{ font-size: 30px; }
  .ttPanels{ gap: 22px; }
  #ttNes{ transform: scale(1.18); transform-origin: top center; margin-top: 22px; margin-bottom: 14px; }
}


/* Ultimate DOOM easter egg */
.mapPin--amenity { cursor: pointer; border: 0; padding: 0; font: inherit; }
.doomOverlay { position: fixed; inset: 0; z-index: 99999; background: #050505; display: flex; align-items: center; justify-content: center; }
.doomWindow { width: 100%; height: 100%; max-width: 1200px; max-height: 100dvh; background: #111; display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(0,0,0,.75); }
.doomTopbar { height: 46px; flex: 0 0 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: #160000; color: #fff; font-family: Impact, Haettenschweiler, sans-serif; letter-spacing: 2px; }
.doomClose { border: 0; background: transparent; color: #fff; font-size: 24px; padding: 6px 10px; cursor: pointer; }
.doomFrame { flex: 1 1 auto; width: 100%; height: calc(100% - 70px); border: 0; background: #000; }
.doomHint { flex: 0 0 24px; height: 24px; line-height: 24px; text-align: center; color: #aaa; background: #090909; font: 11px/24px sans-serif; }
@media (orientation: landscape) and (max-height: 600px) { .doomTopbar { height: 34px; flex-basis: 34px; } .doomHint { display:none; } }