/* ==========================================
   Mayani's Snoepwinkel - Stylesheet
   Pastel Kawaii Candy Shop Theme
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');

:root {
  --primary-pink: #ff6b9d;
  --secondary-pink: #ff85a2;
  --pastel-pink: #fdf2f8;
  --bubblegum: #f472b6;
  --soft-yellow: #fef08a;
  --candy-yellow: #facc15;
  --mint-green: #6ee7b7;
  --lavender: #c084fc;
  --cotton-blue: #7dd3fc;
  --cream-white: #fffdfa;
  --chocolate: #78350f;
  
  --dark-text: #4a2835;
  --light-text: #ffffff;
  
  --card-bg: rgba(255, 255, 255, 0.92);
  --card-glass: rgba(255, 255, 255, 0.75);
  --shadow-candy: 0 10px 25px -5px rgba(236, 72, 153, 0.25), 0 8px 10px -6px rgba(236, 72, 153, 0.15);
  --shadow-bubble: 0 8px 0 rgba(219, 39, 119, 0.35);
  
  --radius-bubble: 28px;
  --radius-pill: 9999px;
  --radius-card: 22px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Fredoka', 'Quicksand', sans-serif;
  color: var(--dark-text);
  background: #fce7f3;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Background floating candy animations */
.bg-candies {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.floating-item {
  position: absolute;
  font-size: 2rem;
  opacity: 0.18;
  animation: floatUp 14s infinite linear;
}

@keyframes floatUp {
  0% {
    transform: translateY(105vh) rotate(0deg);
  }
  100% {
    transform: translateY(-10vh) rotate(360deg);
  }
}

.treat-thumb-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  display: inline-block;
  vertical-align: middle;
}

.customer-avatar-img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(236, 72, 153, 0.25);
  border: 4px solid white;
  animation: characterIdle 2.5s infinite ease-in-out;
  display: block;
}

.modal-customer-img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #f472b6;
  box-shadow: 0 10px 25px rgba(236, 72, 153, 0.3);
  animation: bounce 2s infinite ease-in-out;
  display: block;
  margin: 0 auto;
}

.jar-img {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  border: 2px solid white;
}

.fresh-candy-img {
  width: 85px;
  height: 85px;
  object-fit: contain;
  border-radius: 12px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
  transition: transform 0.2s ease;
}

.fresh-candy-img:hover {
  transform: scale(1.1) rotate(4deg);
}

.fresh-candy-img-large {
  width: 140px;
  height: 140px;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.3));
}

.treat-showcase-img {
  max-width: 170px;
  max-height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.3));
  border-radius: 16px;
  animation: gentleFloat 3s infinite ease-in-out;
}

.svg-icon-inline {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}

.svg-icon-large {
  width: 36px;
  height: 36px;
  display: inline-block;
  vertical-align: middle;
}

.cavity-silhouette svg {
  width: 38px;
  height: 38px;
  opacity: 0.6;
}

.btn-icon svg {
  width: 24px;
  height: 24px;
}

/* Header & Top Bar */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  padding: 12px 24px;
  border-radius: var(--radius-bubble);
  box-shadow: var(--shadow-candy);
  border: 3px solid #fbcfe8;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.brand-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-title h1 {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ec4899, #f43f5e, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.5px;
}

.brand-icon {
  font-size: 2.2rem;
  animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.08); }
}

.stats-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-badge {
  background: linear-gradient(135deg, #fff, #fef9c3);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #854d0e;
  border: 2px solid #fef08a;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06);
}

.stat-badge.stars {
  background: linear-gradient(135deg, #fff, #ede9fe);
  border-color: #ddd6fe;
  color: #6b21a8;
}

.controls-group {
  display: flex;
  gap: 8px;
}

.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #fbcfe8;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 3px 0 #f472b6;
  transition: all 0.15s ease;
}

.btn-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #f472b6;
}

.btn-icon:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #f472b6;
}

/* Navigation Tabs */
.view-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}

.tab-btn {
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-size: 1.15rem;
  font-weight: 700;
  font-family: inherit;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
  color: #db2777;
  border: 2px solid #fbcfe8;
  box-shadow: 0 4px 0 #f472b6;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tab-btn.active {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  color: white;
  border-color: #be185d;
  box-shadow: 0 4px 0 #9d174d;
  transform: translateY(-2px);
}

.tab-btn:hover:not(.active) {
  background: white;
  transform: translateY(-1px);
}

/* View Containers */
.view-container {
  display: none;
  flex: 1;
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-bubble);
  border: 4px solid #fbcfe8;
  box-shadow: var(--shadow-candy);
  overflow: hidden;
  position: relative;
  min-height: 600px;
}

.view-container.active {
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------------------
   VIEW 1: DE SNOEPWINKEL (SHOP FRONT)
   ---------------------------------------------------- */
.shop-view {
  background: url('assets/candy_shop_bg.jpg') center/cover no-repeat;
  position: relative;
}

.shop-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.7) 70%, rgba(255,255,255,0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
}

.shop-shelves-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shelves-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  border: 2px solid #fbcfe8;
}

.shelves-header h2 {
  font-size: 1.25rem;
  color: #db2777;
}

.shelf-jars-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 12px 6px;
}

.candy-jar-card {
  flex: 0 0 100px;
  height: 120px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 3px solid #fbcfe8;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
  position: relative;
}

.candy-jar-card:hover {
  transform: translateY(-4px) scale(1.05);
  border-color: #f472b6;
}

.jar-icon {
  font-size: 2.2rem;
}

.jar-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #db2777;
  text-align: center;
  padding: 0 4px;
}

.jar-tag {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #facc15;
  color: #854d0e;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid #eab308;
}

/* Customer Counter Stage */
.counter-stage {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding-bottom: 20px;
  gap: 20px;
}

.customer-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.customer-bubble {
  background: white;
  padding: 14px 20px;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  border: 3px solid #fbcfe8;
  max-width: 320px;
  position: relative;
  margin-bottom: 16px;
  animation: floatBubble 3s ease-in-out infinite;
}

@keyframes floatBubble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.customer-bubble::after {
  content: '';
  position: absolute;
  bottom: -14px;
  left: 45%;
  border-width: 14px 12px 0;
  border-style: solid;
  border-color: white transparent;
  display: block;
  width: 0;
}

.customer-bubble h3 {
  font-size: 1.15rem;
  color: #ec4899;
  margin-bottom: 4px;
}

.customer-bubble p {
  font-size: 0.98rem;
  line-height: 1.4;
  color: #4a2835;
}

.order-badges {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.order-tag {
  background: #fdf2f8;
  color: #be185d;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid #fbcfe8;
}

.customer-character {
  width: 140px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7rem;
  filter: drop-shadow(0 12px 10px rgba(0,0,0,0.15));
  animation: characterIdle 2.5s infinite ease-in-out;
}

@keyframes characterIdle {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.02, 0.98) translateY(2px); }
}

.shop-action-box {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  padding: 24px;
  border-radius: 24px;
  border: 3px solid #fbcfe8;
  box-shadow: var(--shadow-candy);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 360px;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  color: white;
  border: none;
  padding: 14px 28px;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 6px 0 #be185d, 0 10px 20px rgba(236, 72, 153, 0.35);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #be185d, 0 14px 24px rgba(236, 72, 153, 0.4);
}

.btn-primary:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #be185d;
}

.btn-secondary {
  background: linear-gradient(135deg, #a855f7, #9333ea);
  color: white;
  border: none;
  padding: 12px 20px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 4px 0 #7e22ce;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #7e22ce;
}

.btn-secondary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #7e22ce;
}

/* ----------------------------------------------------
   VIEW 2: DE SNOEP KEUKEN (CANDY KITCHEN)
   ---------------------------------------------------- */
.kitchen-view {
  background: url('assets/candy_kitchen_bg.jpg') center/cover no-repeat;
  display: flex;
  flex-direction: column;
}

.kitchen-overlay {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
}

/* Kitchen Steps Breadcrumb */
.kitchen-steps-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid #fbcfe8;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  margin-bottom: 14px;
  gap: 6px;
  flex-wrap: wrap;
}

.step-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 700;
  color: #9ca3af;
  background: #f3f4f6;
  transition: all 0.25s ease;
}

.step-indicator.active {
  background: linear-gradient(135deg, #f472b6, #ec4899);
  color: white;
  box-shadow: 0 3px 0 #be185d;
}

.step-indicator.completed {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.step-divider {
  color: #cbd5e1;
  font-weight: 800;
}

/* Stage Area within Kitchen */
.stage-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 480px;
}

.kitchen-stage {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  animation: fadeIn 0.3s ease;
}

.kitchen-stage.active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.stage-instruction-card {
  background: white;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  border: 2px solid #fbcfe8;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.15);
  font-size: 1.15rem;
  font-weight: 700;
  color: #be185d;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* STAGE 1: INGREDIENTS */
.ingredients-stage-content {
  display: flex;
  flex: 1;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  gap: 20px;
}

.shelf-panel {
  background: rgba(255, 255, 255, 0.95);
  padding: 16px;
  border-radius: 20px;
  border: 3px solid #fbcfe8;
  box-shadow: var(--shadow-candy);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 250px;
}

.shelf-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #db2777;
  border-bottom: 2px dashed #fbcfe8;
  padding-bottom: 6px;
  text-align: center;
}

.ingredients-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.ingredient-item {
  background: white;
  border: 2px solid #fed7aa;
  border-radius: 14px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: grab;
  box-shadow: 0 3px 0 #fdba74;
  transition: all 0.2s ease;
  position: relative;
}

.ingredient-item:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 6px 0 #fdba74;
}

.ingredient-item:active {
  cursor: grabbing;
}

.ingredient-item.added {
  opacity: 0.5;
  filter: grayscale(0.5);
  pointer-events: none;
}

.ingredient-item .icon {
  font-size: 2.2rem;
}

.ingredient-item .name {
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  color: #7c2d12;
}

/* Mixing Bowl Visual */
.bowl-workstation {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.mixing-bowl-wrapper {
  position: relative;
  width: 320px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mixing-bowl {
  position: relative;
  width: 280px;
  height: 220px;
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, #f1f5f9 60%, #cbd5e1 100%);
  border-radius: 20px 20px 140px 140px;
  border: 8px solid #94a3b8;
  box-shadow: inset 0 15px 30px rgba(0,0,0,0.1), 0 20px 30px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mixing-bowl-rim {
  position: absolute;
  top: -12px;
  width: 290px;
  height: 36px;
  background: #e2e8f0;
  border: 6px solid #94a3b8;
  border-radius: 50%;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  z-index: 3;
}

/* Inside Bowl Canvas */
#bowl-canvas {
  position: absolute;
  top: 15px;
  left: 10px;
  width: 260px;
  height: 195px;
  border-radius: 10px 10px 130px 130px;
  z-index: 2;
  cursor: grab;
}

.recipe-checklist-card {
  background: rgba(255, 255, 255, 0.95);
  padding: 16px;
  border-radius: 20px;
  border: 3px solid #fbcfe8;
  box-shadow: var(--shadow-candy);
  max-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recipe-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #db2777;
  border-bottom: 2px dashed #fbcfe8;
  padding-bottom: 6px;
  text-align: center;
}

.checklist-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
}

.check-item.done {
  color: #16a34a;
  text-decoration: none;
}

.check-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.check-item.done .check-icon {
  background: #22c55e;
  border-color: #16a34a;
  color: white;
}

/* STAGE 2: REAL STIRRING IN THE BOWL! */
.stir-stage-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 16px;
  position: relative;
}

.stir-instructions {
  background: #fef08a;
  border: 2px solid #facc15;
  color: #854d0e;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  font-size: 1.15rem;
  font-weight: 700;
  animation: pulseHighlight 2s infinite;
}

@keyframes pulseHighlight {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.stir-zone {
  position: relative;
  width: 380px;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.stir-spoon {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 160px;
  pointer-events: none;
  z-index: 10;
  transform-origin: 18px 138px;
  filter: drop-shadow(4px 10px 8px rgba(0,0,0,0.25));
  transition: transform 0.04s ease-out;
}

.stir-hint-arrows {
  position: absolute;
  width: 240px;
  height: 240px;
  border: 4px dashed rgba(236, 72, 153, 0.45);
  border-radius: 50%;
  pointer-events: none;
  animation: rotateHint 6s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes rotateHint {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.stir-progress-container {
  width: 360px;
  background: white;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 3px solid #fbcfe8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stir-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  font-weight: 700;
  color: #db2777;
}

.stir-progress-bar-outer {
  width: 100%;
  height: 20px;
  background: #f1f5f9;
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 2px solid #fbcfe8;
}

.stir-progress-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #f472b6, #ec4899, #f59e0b);
  border-radius: var(--radius-pill);
  transition: width 0.15s ease-out;
}

/* STAGE 3: POURING INTO MOLDS */
.pour-stage-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.mold-selector-bar {
  display: flex;
  gap: 12px;
  background: white;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid #fbcfe8;
}

.mold-btn {
  background: #fdf2f8;
  border: 2px solid #fbcfe8;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #db2777;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mold-btn.active {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  color: white;
  border-color: #be185d;
}

.pour-station-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.pour-jug-drag {
  width: 120px;
  height: 140px;
  background: rgba(255, 255, 255, 0.9);
  border: 4px solid #f472b6;
  border-radius: 20px 20px 40px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: grab;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.15s ease;
  position: relative;
  touch-action: none;
}

.pour-jug-drag:hover {
  transform: scale(1.06);
}

.pour-jug-drag.pouring {
  transform: rotate(-35deg) translateY(-10px);
}

.jug-liquid-preview {
  width: 80px;
  height: 50px;
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: inset 0 -4px 10px rgba(0,0,0,0.15);
}

.mold-tray {
  background: #f43f5e;
  border: 8px solid #e11d48;
  border-radius: 28px;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  box-shadow: inset 0 6px 14px rgba(0,0,0,0.25), 0 12px 24px rgba(0,0,0,0.15);
}

.mold-cavity {
  width: 80px;
  height: 80px;
  background: #be185d;
  border-radius: 20px;
  box-shadow: inset 0 6px 10px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.mold-cavity-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #ec4899;
  transition: height 0.2s ease-out;
  border-radius: 14px;
}

.cavity-silhouette {
  position: relative;
  z-index: 2;
  font-size: 2.8rem;
  opacity: 0.35;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}

.mold-cavity.full .cavity-silhouette {
  opacity: 0.95;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

/* ====================================================
   COOKIE DOUGH ROLLING WORKSTATION (STAGE 3 FOR COOKIES)
   ==================================================== */
.cookie-roll-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.cookie-station-layout {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  max-width: 900px;
  flex-wrap: wrap;
}

/* 1. Dough Supply Bowl */
.dough-supply-card {
  background: white;
  border: 3px solid #fde047;
  border-radius: 24px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  width: 180px;
}

.dough-supply-header {
  font-size: 1.05rem;
  font-weight: 700;
  color: #854d0e;
  text-align: center;
}

.dough-bowl-visual {
  width: 120px;
  height: 90px;
  background: linear-gradient(180deg, #d97706, #92400e);
  border-radius: 0 0 60px 60px;
  position: relative;
  box-shadow: inset 0 -8px 14px rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.12);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.dough-bowl-rim {
  position: absolute;
  top: -10px;
  width: 130px;
  height: 24px;
  background: linear-gradient(90deg, #b45309, #d97706, #b45309);
  border-radius: 50%;
  border: 2px solid #78350f;
}

.dough-mass-texture {
  position: absolute;
  top: -4px;
  width: 110px;
  height: 55px;
  background: radial-gradient(circle at 35% 35%, #fef08a, #facc15 60%, #ca8a04);
  border-radius: 50% 50% 45% 45%;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.8), 0 4px 8px rgba(0,0,0,0.15);
  overflow: hidden;
}

.dough-chip {
  position: absolute;
  width: 8px;
  height: 7px;
  background: #451a03;
  border-radius: 40% 60% 60% 40%;
}
.dough-chip.c1 { top: 12px; left: 24px; }
.dough-chip.c2 { top: 22px; left: 65px; }
.dough-chip.c3 { top: 32px; left: 40px; }

/* 2. Active Rolling Mat */
.rolling-mat-card {
  background: white;
  border: 3px solid #fbcfe8;
  border-radius: 24px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  flex: 1;
  min-width: 280px;
  max-width: 360px;
}

.rolling-mat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-weight: 700;
  color: #db2777;
  font-size: 1.05rem;
}

.roll-badge {
  background: #fdf2f8;
  color: #be185d;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  border: 1px solid #fbcfe8;
}

.cookie-rolling-mat {
  width: 240px;
  height: 200px;
  background: radial-gradient(circle, #fce7f3 40%, #fbcfe8 100%);
  border: 4px dashed #f472b6;
  border-radius: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  overflow: hidden;
}

.cookie-rolling-mat:active {
  cursor: grabbing;
}

.mat-concentric-ring {
  position: absolute;
  border: 1px solid rgba(219, 39, 119, 0.2);
  border-radius: 50%;
  pointer-events: none;
}
.mat-concentric-ring.r1 { width: 90px; height: 90px; }
.mat-concentric-ring.r2 { width: 150px; height: 150px; }
.mat-concentric-ring.r3 { width: 210px; height: 210px; }

.roll-guide-arrows {
  position: absolute;
  top: 15px;
  right: 15px;
  opacity: 0.5;
  animation: spinSlow 6s linear infinite;
  pointer-events: none;
}

@keyframes spinSlow {
  100% { transform: rotate(360deg); }
}

.active-rolling-ball {
  width: 75px;
  height: 75px;
  position: relative;
  transition: transform 0.05s ease-out;
  cursor: grab;
  z-index: 10;
}

.dough-ball-core {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 35% 30%, #fffbeb, #fde047 50%, #ca8a04 95%);
  border-radius: 50% 45% 55% 50%;
  box-shadow: 0 10px 18px rgba(0,0,0,0.2), inset -4px -4px 10px rgba(113, 63, 18, 0.4);
  position: relative;
  transition: border-radius 0.3s ease, transform 0.1s ease;
}

.dough-ball-core.smooth-sphere {
  border-radius: 50% !important;
  box-shadow: 0 12px 22px rgba(217, 119, 6, 0.35), inset -3px -3px 8px rgba(113, 63, 18, 0.35);
  animation: readyPulse 1.2s infinite ease-in-out;
}

@keyframes readyPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px #facc15); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 12px #f59e0b); }
}

.ball-chip {
  position: absolute;
  width: 9px;
  height: 8px;
  background: #451a03;
  border-radius: 35% 65% 55% 45%;
}
.ball-chip.bc1 { top: 18px; left: 18px; }
.ball-chip.bc2 { top: 42px; left: 45px; }
.ball-chip.bc3 { top: 46px; left: 16px; }

/* 3. Metallic Baking Sheet */
.baking-sheet-card {
  background: white;
  border: 3px solid #cbd5e1;
  border-radius: 24px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  width: 270px;
}

.baking-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-weight: 700;
  color: #475569;
  font-size: 1.05rem;
}

.sheet-count-tag {
  background: #f1f5f9;
  color: #0f172a;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 800;
}

.metallic-baking-sheet {
  width: 230px;
  height: 200px;
  background: linear-gradient(135deg, #94a3b8, #64748b);
  border-radius: 14px;
  padding: 10px;
  box-shadow: inset 0 3px 6px rgba(255,255,255,0.4), 0 8px 16px rgba(0,0,0,0.25);
  border: 3px solid #475569;
}

.parchment-paper {
  width: 100%;
  height: 100%;
  background: #fef3c7;
  border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(217, 119, 6, 0.15);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  padding: 8px;
}

.sheet-spot {
  background: rgba(217, 119, 6, 0.12);
  border: 2px dashed rgba(180, 83, 9, 0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sheet-spot.highlight-target {
  background: rgba(245, 158, 11, 0.3);
  border-color: #d97706;
  transform: scale(1.08);
}

.sheet-spot.filled {
  border-style: solid;
  border-color: transparent;
  background: transparent;
}

.sheet-spot .spot-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #b45309;
  opacity: 0.6;
}

.placed-cookie-ball {
  display: none;
  width: 44px;
  height: 42px;
  background: radial-gradient(circle at 35% 30%, #fffbeb, #fde047 60%, #ca8a04);
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  position: relative;
}

.sheet-spot.filled .placed-cookie-ball {
  display: block;
  animation: doughPlof 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sheet-spot.filled .spot-label {
  display: none;
}

@keyframes doughPlof {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* ====================================================
   STAGE 4: VISIBLE BAKING OVEN WITH CLEAR WINDOW
   ==================================================== */
.oven-unit {
  background: linear-gradient(180deg, #fdf2f8, #fce7f3);
  border: 8px solid #f472b6;
  border-radius: 36px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.18), inset 0 2px 6px rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 520px;
}

.oven-control-panel {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #475569;
  border-radius: 18px;
  padding: 10px 18px;
  border: 3px solid #334155;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}

.oven-brand-badge {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fbcfe8;
}

.oven-digital-display {
  background: #0f172a;
  color: #38bdf8;
  font-family: 'Courier New', monospace;
  font-size: 1.4rem;
  font-weight: 900;
  padding: 4px 14px;
  border-radius: 8px;
  border: 2px solid #1e293b;
  letter-spacing: 1px;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.oven-digital-display.glow-heat {
  color: #fb923c;
  box-shadow: 0 0 14px rgba(251, 146, 60, 0.6);
}

.oven-dials-group {
  display: flex;
  gap: 10px;
}

.oven-dial {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  border-radius: 50%;
  border: 2px solid #64748b;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  position: relative;
}

.oven-dial::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 11px;
  width: 3px;
  height: 8px;
  background: #334155;
  border-radius: 2px;
}

/* Oven Door & Viewing Glass */
.oven-door-assembly {
  width: 100%;
  background: linear-gradient(180deg, #ec4899, #db2777);
  border-radius: 24px;
  padding: 16px;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.4), 0 10px 20px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 4px solid #be185d;
}

.oven-door-handle {
  width: 180px;
  height: 14px;
  background: linear-gradient(180deg, #f8fafc, #cbd5e1, #94a3b8);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.25);
  border: 1px solid #64748b;
}

.oven-glass-window {
  width: 100%;
  height: 230px;
  background: #1e1b18;
  border-radius: 18px;
  border: 5px solid #0f172a;
  box-shadow: inset 0 0 25px rgba(0,0,0,0.9);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Glass reflection gloss */
.oven-glass-window::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 45%, transparent 60%);
  pointer-events: none;
  z-index: 15;
}

/* Heating Elements (Calrod Coils) */
.oven-heating-coils {
  position: absolute;
  left: 30px;
  right: 30px;
  height: 6px;
  background: #44403c;
  border-radius: 4px;
  z-index: 5;
  transition: all 0.5s ease;
}
.oven-heating-coils.top { top: 12px; }
.oven-heating-coils.bottom { bottom: 12px; }

.oven-heating-coils.glow {
  background: #ea580c !important;
  box-shadow: 0 0 16px #f97316, 0 0 30px #ea580c !important;
}

/* Interior Oven Chamber */
.oven-chamber-interior {
  width: 90%;
  height: 80%;
  background: radial-gradient(circle at 50% 50%, #292524, #1c1917 80%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.8s ease;
}

.oven-chamber-interior.baking-lit {
  background: radial-gradient(circle at 50% 50%, rgba(254, 215, 170, 0.85), rgba(194, 65, 12, 0.65) 75%, #1c1917) !important;
}

.oven-rack {
  width: 95%;
  height: 80%;
  border-top: 3px solid #78716c;
  border-bottom: 3px solid #78716c;
  background-image: repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(168, 162, 158, 0.4) 18px, rgba(168, 162, 158, 0.4) 20px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.oven-baking-sheet {
  width: 90%;
  height: 82%;
  background: #fef3c7;
  border: 3px solid #78350f;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  padding: 8px;
  align-items: center;
  justify-items: center;
}

/* 6 Cookies in the Oven */
.baking-cookie-item {
  width: 44px;
  height: 40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cookie-dough-body {
  width: 36px;
  height: 36px;
  background: radial-gradient(circle at 35% 30%, #fffbeb, #fde047 60%, #ca8a04);
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0,0,0,0.25);
  position: relative;
  transition: all 0.8s ease;
}

.cookie-dough-body::before, .cookie-dough-body::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 5px;
  background: #451a03;
  border-radius: 40% 60% 60% 40%;
}
.cookie-dough-body::before { top: 8px; left: 8px; }
.cookie-dough-body::after { bottom: 8px; right: 8px; }

/* TAART: één grote taartvorm die rijst */
.oven-baking-sheet.oven-mode-cake {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background: #d1d5db;
  border-color: #475569;
}
.oven-mode-cake .baking-cookie-item { width: 100%; height: 100%; }
.oven-mode-cake .baking-cookie-item:not(:first-child) { display: none; }
.oven-mode-cake .cookie-dough-body {
  width: 80%;
  height: 46%;
  border-radius: 10px 10px 30px 30px;
  background: linear-gradient(180deg, #fef3c7, #fde68a 70%, #e5e7eb);
  border: 3px solid #64748b;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.oven-mode-cake .cookie-dough-body::before,
.oven-mode-cake .cookie-dough-body::after { display: none; }
.oven-mode-cake .cookie-dough-body.baked-done {
  width: 86%;
  height: 78%;
  border-radius: 40px 40px 24px 24px / 60px 60px 24px 24px;
  background: radial-gradient(circle at 40% 25%, #f59e0b, #b45309 65%, #78350f);
}

/* CUPCAKES: bakjes met beslag dat uitrijst tot een koepeltje */
.oven-mode-cupcake .cookie-dough-body {
  width: 34px;
  height: 22px;
  margin-top: 14px;
  border-radius: 4px 4px 10px 10px;
  background: repeating-linear-gradient(90deg, #f9a8d4 0 5px, #fbcfe8 5px 10px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.25);
}
.oven-mode-cupcake .cookie-dough-body::before {
  content: '';
  top: -6px; left: 2px;
  width: 30px; height: 10px;
  border-radius: 50%;
  background: #fde68a;
}
.oven-mode-cupcake .cookie-dough-body::after { display: none; }
.oven-mode-cupcake .cookie-dough-body.baked-done {
  width: 38px;
  height: 22px;
  border-radius: 4px 4px 10px 10px;
  background: repeating-linear-gradient(90deg, #f9a8d4 0 5px, #fbcfe8 5px 10px);
}
.oven-mode-cupcake .cookie-dough-body.baked-done::before {
  top: -20px; left: -2px;
  width: 42px; height: 28px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #fcd34d, #d97706 70%, #92400e);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* BAKED STATE: golden toasted brown, expanded size, cracked delicious top! */
.cookie-dough-body.baked-done {
  width: 46px;
  height: 42px;
  background: radial-gradient(circle at 35% 30%, #d97706, #b45309 60%, #78350f);
  border-radius: 48% 52% 51% 49%;
  box-shadow: 0 5px 10px rgba(0,0,0,0.4), inset 0 2px 4px rgba(254, 215, 170, 0.4);
}

.oven-status-footer {
  font-size: 1.05rem;
  font-weight: 700;
  color: #9d174d;
  text-align: center;
}

/* ====================================================
   STAGE 4: VISIBLE CHILLER WITH FROST GLASS WINDOW
   ==================================================== */
.chiller-unit {
  background: linear-gradient(180deg, #f0f9ff, #e0f2fe);
  border: 8px solid #38bdf8;
  border-radius: 36px;
  padding: 24px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.18), inset 0 2px 6px rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 520px;
}

.chiller-control-panel {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0284c7;
  border-radius: 18px;
  padding: 10px 18px;
  border: 3px solid #0369a1;
}

.chiller-brand-badge {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #e0f2fe;
}

.chiller-digital-display {
  background: #082f49;
  color: #38bdf8;
  font-family: 'Courier New', monospace;
  font-size: 1.4rem;
  font-weight: 900;
  padding: 4px 14px;
  border-radius: 8px;
  border: 2px solid #0369a1;
  letter-spacing: 1px;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.chiller-door-assembly {
  width: 100%;
  background: linear-gradient(180deg, #0284c7, #0369a1);
  border-radius: 24px;
  padding: 16px;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.4), 0 10px 20px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 4px solid #075985;
}

.chiller-glass-window {
  width: 100%;
  height: 230px;
  background: radial-gradient(circle at 50% 50%, #0c4a6e, #082f49 90%);
  border-radius: 18px;
  border: 5px solid #0369a1;
  box-shadow: inset 0 0 25px rgba(0,0,0,0.8);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chiller-chamber-interior {
  width: 90%;
  height: 85%;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}

.chiller-tray-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 320px;
}

.chiller-item-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
  transition: all 0.5s ease;
}

.chiller-item-icon.chilled-solid {
  box-shadow: 0 0 14px #38bdf8, 0 4px 10px rgba(0,0,0,0.3);
  background: rgba(255, 255, 255, 0.35);
}

.chiller-status-footer {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0369a1;
  text-align: center;
}

.chill-stage-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.pop-out-instructions {
  background: white;
  border: 2px solid #f472b6;
  color: #be185d;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.unmold-cavity {
  cursor: pointer;
  transition: transform 0.15s ease;
}

.unmold-cavity:hover:not(.popped) {
  transform: scale(1.08);
}

.unmold-cavity.popped {
  opacity: 0.3;
  cursor: default;
}

/* STAGE 5: DECORATING */
.decorate-stage-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.topping-shakers-bar {
  display: flex;
  gap: 14px;
  background: white;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 2px solid #fbcfe8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.shaker-btn {
  background: #fdf2f8;
  border: 2px solid #fbcfe8;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: #be185d;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.shaker-btn.active {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  color: white;
  border-color: #be185d;
  transform: translateY(-2px);
}

.candies-cutting-board {
  position: relative;
  width: 520px;
  height: 280px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 8px solid #fed7aa;
  border-radius: 28px;
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.08), 0 12px 24px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: crosshair;
}

#decor-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.popped-candies-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 40px;
}

.fresh-candy-item {
  font-size: 3.5rem;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.2));
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fresh-candy-item:hover {
  transform: scale(1.15) rotate(5deg);
}

/* STAGE 6: PACKAGING & SELLING */
.package-stage-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex: 1;
  width: 100%;
  flex-wrap: wrap;
}

.package-preview-box {
  background: white;
  border: 4px solid #fbcfe8;
  border-radius: 32px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-candy);
  min-width: 300px;
  min-height: 380px;
  position: relative;
  overflow: visible;
}

/* Packaging Outer Container */
.packaging-display-wrapper {
  position: relative;
  width: 250px;
  height: 310px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
}

/* 1. Glass Jar */
.packaging-container.pack-pot {
  position: relative;
  width: 230px;
  height: 270px;
  border-radius: 20px 20px 55px 55px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.45) 100%);
  border: 4px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 12px 25px rgba(255, 255, 255, 0.7), inset 0 -12px 25px rgba(0, 0, 0, 0.05), 0 16px 32px rgba(236, 72, 153, 0.2);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pot-lid {
  position: absolute;
  top: -14px;
  width: 140px;
  height: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
  border: 3px solid #cbd5e1;
  border-radius: 14px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
  z-index: 10;
}

.pot-lid-knob {
  position: absolute;
  top: -24px;
  width: 32px;
  height: 18px;
  background: #f8fafc;
  border: 3px solid #cbd5e1;
  border-radius: 12px 12px 4px 4px;
  z-index: 11;
}

/* 2. Cellophane Pouch */
.packaging-container.pack-zakje {
  position: relative;
  width: 220px;
  height: 280px;
  border-radius: 8px 8px 36px 36px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 35%, rgba(255, 255, 255, 0.45) 100%);
  border: 3px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 8px 16px rgba(255, 255, 255, 0.8), 0 14px 28px rgba(236, 72, 153, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pouch-crimp-top {
  position: absolute;
  top: -12px;
  width: 90px;
  height: 20px;
  background: repeating-linear-gradient(90deg, #fbcfe8, #fbcfe8 4px, #f472b6 4px, #f472b6 8px);
  border-radius: 4px;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* 3. Window Gift Box */
.packaging-container.pack-doosje {
  position: relative;
  width: 240px;
  height: 260px;
  border-radius: 28px;
  background: linear-gradient(135deg, #fdf2f8, #fce7f3);
  border: 6px solid #f472b6;
  box-shadow: 0 16px 32px rgba(236, 72, 153, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.box-clear-window {
  width: 175px;
  height: 185px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.45);
  border: 3px dashed #ec4899;
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* REAL CRAFTED TREATS INSIDE THE PACKAGING */
.packaged-treats-inside {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.22));
  transform-style: preserve-3d;
  animation: gentleFloat 3s infinite ease-in-out;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.treat-display-item-main {
  font-size: 5.5rem;
  line-height: 1;
}

.treat-sub-decorations {
  display: flex;
  gap: 6px;
  font-size: 1.6rem;
  margin-top: -6px;
}

/* Glass Reflection Highlight Streak across the package */
.packaging-glass-shine {
  position: absolute;
  top: 0;
  left: 12px;
  width: 35px;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.1) 100%);
  transform: skewX(-15deg);
  pointer-events: none;
  z-index: 8;
}

/* REAL SATIN RIBBON & BOW */
.package-ribbon-assembly {
  position: absolute;
  top: 25px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
  pointer-events: none;
}

.ribbon-strap {
  width: 100%;
  height: 14px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.18);
  position: relative;
}

.satin-bow-svg {
  width: 80px;
  height: 64px;
  margin-top: -24px;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.25));
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* HANGING GIFT TAG / LABEL */
.hanging-label-card {
  position: absolute;
  top: 75px;
  right: 15px;
  background: linear-gradient(135deg, #fef9c3, #fef08a);
  border: 2px dashed #ca8a04;
  border-radius: 12px;
  padding: 6px 14px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #713f12;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transform: rotate(8deg);
  transform-origin: top left;
  z-index: 22;
  animation: tagSwing 4s infinite ease-in-out;
  display: flex;
  align-items: center;
  gap: 6px;
}

@keyframes tagSwing {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: rotate(14deg); }
}

.hanging-label-card::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a16207;
  border: 1px solid #713f12;
}

.package-customizer {
  background: rgba(255, 255, 255, 0.95);
  border: 3px solid #fbcfe8;
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 340px;
}

.customizer-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.customizer-row label {
  font-size: 1rem;
  font-weight: 700;
  color: #be185d;
}

.customizer-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.option-btn {
  background: #fdf2f8;
  border: 2px solid #fbcfe8;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: #db2777;
  cursor: pointer;
}

.option-btn.active {
  background: #ec4899;
  color: white;
  border-color: #be185d;
}

/* Modals & Celebrations */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.active {
  display: flex;
}

.celebration-card {
  background: white;
  border: 6px solid #f472b6;
  border-radius: 32px;
  padding: 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.celebration-card h2 {
  font-size: 1.8rem;
  color: #db2777;
}

.reward-badges {
  display: flex;
  gap: 14px;
}

/* Pouring Stream Animation Canvas/SVG */
.pour-stream {
  position: absolute;
  pointer-events: none;
  z-index: 20;
}

/* Floating Hearts / Crunch Text */
.floaty-text {
  position: fixed;
  pointer-events: none;
  font-size: 1.5rem;
  font-weight: 800;
  color: #ec4899;
  text-shadow: 0 2px 4px rgba(255,255,255,0.8);
  animation: floatText 1s ease-out forwards;
  z-index: 200;
}

@keyframes floatText {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-50px) scale(1.3); opacity: 0; }
}

/* Treat Category Selector */
.treat-category-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  width: 100%;
}

.treat-category-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #db2777;
  display: flex;
  align-items: center;
  gap: 8px;
}

.treat-pills-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid #fbcfe8;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.treat-pill {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  border: 2px solid #fbcfe8;
  background: #fdf2f8;
  color: #be185d;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.treat-pill:hover {
  transform: translateY(-2px);
  background: white;
  border-color: #f472b6;
}

.treat-pill.active {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  color: white;
  border-color: #be185d;
  box-shadow: 0 4px 0 #9d174d;
  transform: translateY(-2px);
}

/* Oven unit styling for cookies */
.oven-unit {
  background: linear-gradient(135deg, #fed7aa, #ffedd5);
  border: 6px solid #f97316;
  border-radius: 28px;
  padding: 24px 36px;
  box-shadow: inset 0 6px 15px rgba(255,255,255,0.7), 0 14px 28px rgba(249, 115, 22, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.oven-glow {
  animation: ovenPulse 1.5s infinite alternate;
}

@keyframes ovenPulse {
  from { filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.4)); }
  to { filter: drop-shadow(0 0 20px rgba(234, 88, 12, 0.8)); }
}

/* Rock candy crystal glow */
.crystal-shimmer {
  animation: crystalSparkle 2s infinite ease-in-out;
}

@keyframes crystalSparkle {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6)); }
  50% { filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.9)); }
}

/* ====================================================
   SOFTSERVE ICE CREAM MACHINE WITH LEVER
   ==================================================== */
.icecream-machine-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.icecream-vessel-selector {
  display: flex;
  gap: 12px;
  background: white;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid #fbcfe8;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.vessel-btn {
  background: #fdf2f8;
  border: 2px solid #fbcfe8;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: #db2777;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.vessel-btn:hover {
  transform: translateY(-2px);
  background: white;
  border-color: #f472b6;
}

.vessel-btn.active {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  color: white;
  border-color: #be185d;
  box-shadow: 0 3px 0 #9d174d;
}

/* Machine Main Cabinet */
.machine-cabinet {
  position: relative;
  width: 380px;
  background: linear-gradient(180deg, #fdf2f8 0%, #fce7f3 45%, #f472b6 100%);
  border: 8px solid #ec4899;
  border-radius: 40px 40px 24px 24px;
  box-shadow: inset 0 6px 14px rgba(255,255,255,0.8), 0 16px 32px rgba(236, 72, 153, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 20px 20px;
}

.machine-header-sign {
  background: white;
  border: 3px solid #f472b6;
  border-radius: var(--radius-pill);
  padding: 6px 20px;
  font-size: 1.15rem;
  font-weight: 800;
  color: #db2777;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.machine-working-bay {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  position: relative;
  gap: 12px;
}

/* Dispenser Nozzle & Canvas Area */
.machine-dispense-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.machine-nozzle {
  width: 70px;
  height: 38px;
  background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 50%, #64748b 100%);
  border: 3px solid #475569;
  border-radius: 8px 8px 24px 24px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  z-index: 10;
}

.nozzle-spout {
  width: 24px;
  height: 12px;
  background: #334155;
  border-radius: 0 0 10px 10px;
}

/* Canvas for Soft-Serve Swirl */
.softserve-stage-canvas {
  position: relative;
  width: 220px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#softserve-canvas {
  width: 220px;
  height: 250px;
}

/* The Mechanical Lever */
.machine-lever-assembly {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 90px;
  user-select: none;
}

.lever-pivot-base {
  width: 48px;
  height: 48px;
  background: radial-gradient(circle at 35% 35%, #f8fafc, #94a3b8, #475569);
  border: 4px solid #334155;
  border-radius: 50%;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.lever-arm-track {
  position: relative;
  height: 160px;
  width: 70px;
  display: flex;
  justify-content: center;
}

.machine-lever {
  position: absolute;
  top: 10px;
  width: 22px;
  height: 140px;
  transform-origin: top center;
  transform: rotate(0deg);
  transition: transform 0.15s ease-out;
  cursor: grab;
  touch-action: none;
  z-index: 6;
}

.machine-lever:active,
.machine-lever.pulled {
  transform: rotate(42deg) translateY(6px);
  cursor: grabbing;
}

.lever-shaft {
  position: absolute;
  top: 0;
  left: 7px;
  width: 8px;
  height: 100px;
  background: linear-gradient(90deg, #f8fafc, #cbd5e1, #64748b);
  border: 2px solid #475569;
  border-radius: 4px;
}

.lever-knob {
  position: absolute;
  bottom: 0;
  left: -9px;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 35% 35%, #ff85a2, #f43f5e, #be185d);
  border: 3px solid #9d174d;
  border-radius: 50%;
  box-shadow: 0 6px 12px rgba(157, 23, 77, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  animation: leverHintGlow 2s infinite ease-in-out;
}

@keyframes leverHintGlow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px #ec4899); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 12px #f43f5e); }
}

.lever-instruction-tag {
  font-size: 0.82rem;
  font-weight: 800;
  color: #831843;
  background: white;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 2px solid #fbcfe8;
  margin-top: 6px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.machine-drip-tray {
  width: 100%;
  height: 24px;
  background: linear-gradient(180deg, #94a3b8, #64748b);
  border: 2px solid #334155;
  border-radius: 6px;
  margin-top: 10px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10px;
}

.drip-grate-slot {
  width: 8px;
  height: 10px;
  background: #1e293b;
  border-radius: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .top-bar {
    padding: 10px 16px;
  }
  .brand-title h1 {
    font-size: 1.35rem;
  }
  .counter-stage {
    flex-direction: column;
    align-items: center;
  }
  .ingredients-stage-content {
    flex-direction: column;
  }
  .candies-cutting-board {
    width: 90vw;
    height: 240px;
  }
  .mixing-bowl-wrapper {
    width: 260px;
    height: 240px;
  }
  .mixing-bowl {
    width: 230px;
    height: 180px;
  }
  .treat-pills-bar {
    gap: 6px;
  }
  .treat-pill {
    padding: 6px 12px;
    font-size: 0.9rem;
  }
}

/* ==================================================
   SUIKER OP EEN STOKJE KRISTALSTATION (GEEN VORMEN)
   ================================================== */
.sugarstick-station {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sugarstick-layout {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 860px;
}

.sugar-pot-card, .sugar-stand-card {
  background: white;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.1);
  border: 2px solid #fbcfe8;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sugar-pot-header, .sugar-stand-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: #831843;
  margin-bottom: 12px;
}

.sugar-pot-cauldron {
  position: relative;
  width: 250px;
  height: 200px;
  background: radial-gradient(circle at 50% 25%, #f472b6, #db2777 65%, #9d174d 100%);
  border-radius: 50% 50% 46% 46% / 25% 25% 65% 65%;
  border: 4px solid #be185d;
  box-shadow: 0 10px 25px rgba(219, 39, 119, 0.35), inset 0 6px 12px rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}

.cauldron-rim {
  position: absolute;
  top: 0;
  left: 5%;
  width: 90%;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fbcfe8, #f472b6);
  border: 3px solid #be185d;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.25);
  z-index: 2;
}

.sugar-syrup-surface {
  position: absolute;
  top: 14px;
  left: 12%;
  width: 76%;
  height: 125px;
  background: radial-gradient(circle at 45% 45%, #f43f5e, #be123c 70%, #881337);
  border-radius: 50%;
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.3);
  z-index: 3;
  overflow: hidden;
  transition: background-color 0.4s ease;
}

.syrup-bubble {
  position: absolute;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  animation: floatBubble 2.5s infinite ease-in-out;
}
.syrup-bubble.b1 { width: 14px; height: 14px; top: 40%; left: 30%; animation-delay: 0s; }
.syrup-bubble.b2 { width: 10px; height: 10px; top: 60%; left: 65%; animation-delay: 0.8s; }
.syrup-bubble.b3 { width: 18px; height: 18px; top: 25%; left: 55%; animation-delay: 1.4s; }

.crystal-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: white;
  transform: rotate(45deg);
  opacity: 0.85;
  box-shadow: 0 0 8px #fff;
  animation: sparkleTwinkle 1.8s infinite alternate ease-in-out;
}
.crystal-particle.cp1 { top: 35%; left: 45%; }
.crystal-particle.cp2 { top: 70%; left: 35%; animation-delay: 0.5s; }
.crystal-particle.cp3 { top: 50%; left: 75%; animation-delay: 1.1s; }

@keyframes floatBubble {
  0% { transform: translateY(10px) scale(0.6); opacity: 0; }
  50% { opacity: 0.8; }
  100% { transform: translateY(-20px) scale(1.1); opacity: 0; }
}
@keyframes sparkleTwinkle {
  0% { transform: rotate(45deg) scale(0.7); opacity: 0.3; }
  100% { transform: rotate(45deg) scale(1.3); opacity: 1; }
}

.active-dipping-stick-wrapper {
  position: absolute;
  top: 15px;
  left: calc(50% - 9px);
  width: 18px;
  height: 140px;
  z-index: 10;
  pointer-events: none;
  transform-origin: top center;
  transition: transform 0.12s ease;
}

.dipping-wood-stick {
  width: 8px;
  height: 120px;
  margin: 0 auto;
  background: linear-gradient(90deg, #d97706, #fbbf24, #b45309);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.dipping-crystal-layer {
  position: absolute;
  top: 30px;
  left: -9px;
  width: 36px;
  height: 70px;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,0.9), rgba(244, 63, 94, 0.8) 60%, rgba(190, 18, 60, 0.95));
  border-radius: 16px 16px 12px 12px;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.7);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.25s ease;
}

.syrup-swirl-arrows {
  position: absolute;
  bottom: 12px;
  right: 12px;
  opacity: 0.75;
  pointer-events: none;
  animation: rotateGuide 4s linear infinite;
  z-index: 4;
}

/* Wooden Drying Rack (Stokjes Rek) */
.wooden-drying-rack {
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 3px solid #d97706;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 14px 10px;
  box-shadow: inset 0 4px 8px rgba(180, 83, 9, 0.2);
}

.rack-slot {
  position: relative;
  width: 65px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.rack-slot:hover {
  background: rgba(217, 119, 6, 0.12);
}

.stand-hole {
  width: 22px;
  height: 12px;
  background: #78350f;
  border-radius: 50%;
  border: 2px solid #451a03;
  box-shadow: inset 0 3px 5px rgba(0,0,0,0.6);
  margin-bottom: 8px;
}

.placed-sugar-stick {
  position: absolute;
  bottom: 24px;
  width: 36px;
  height: 140px;
  display: none;
  flex-direction: column;
  align-items: center;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.rack-slot.filled .placed-sugar-stick {
  display: flex;
}

.stick-wood-shaft {
  position: absolute;
  bottom: 0;
  width: 7px;
  height: 70px;
  background: linear-gradient(90deg, #d97706, #fbbf24, #b45309);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.stick-crystal-head {
  position: absolute;
  top: 0;
  width: 34px;
  height: 75px;
  background: radial-gradient(circle at 35% 35%, #fff, #fb7185 45%, #e11d48 85%);
  border-radius: 14px 14px 10px 10px;
  border: 2px solid #be123c;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.4), inset 0 2px 4px rgba(255,255,255,0.7);
}

/* ==================================================
   CHOCOLADEREEP GIETSTATION (GEEN VORMEN)
   ================================================== */
.chocolate-pour-station {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chocolate-station-layout {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 860px;
}

.chocolate-pitcher-card, .chocolate-slab-card {
  background: white;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(120, 53, 15, 0.12);
  border: 2px solid #fed7aa;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chocolate-pitcher-header, .chocolate-slab-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: #78350f;
  margin-bottom: 12px;
}

.chocolate-pitcher-visual {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.chocolate-pitcher-visual.pouring {
  transform: rotate(-30deg) translate(-10px, -10px);
}

.pitcher-body {
  width: 110px;
  height: 135px;
  background: linear-gradient(135deg, #b45309, #d97706, #92400e);
  border-radius: 20px 20px 30px 30px;
  border: 4px solid #78350f;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.3);
}

.pitcher-liquid {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(180deg, #6b3618, #3b1d0e);
  border-radius: 0 0 25px 25px;
  transition: background-color 0.3s ease, height 0.4s ease;
}

.pitcher-spout {
  position: absolute;
  top: 25px;
  left: 14px;
  width: 32px;
  height: 25px;
  background: #92400e;
  border-left: 4px solid #78350f;
  border-top: 4px solid #78350f;
  transform: skewX(-35deg);
  border-radius: 4px;
}

.pitcher-handle {
  position: absolute;
  right: 12px;
  top: 45px;
  width: 35px;
  height: 70px;
  border: 6px solid #78350f;
  border-left: none;
  border-radius: 0 20px 20px 0;
}

/* Marble Slab & Poured Chocolate Bar */
.chocolate-marble-slab {
  position: relative;
  width: 100%;
  height: 230px;
  background: radial-gradient(circle at 30% 30%, #f1f5f9, #cbd5e1 75%, #94a3b8);
  border: 4px solid #64748b;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.7), 0 6px 16px rgba(0,0,0,0.15);
  overflow: hidden;
}

.parchment-chocolate-surface {
  width: 88%;
  height: 84%;
  background: #fefce8;
  border: 2px dashed #d97706;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.poured-chocolate-bar {
  position: relative;
  width: 220px;
  height: 130px;
  background: #fef9c3;
  border: 3px solid #b45309;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.choc-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: linear-gradient(135deg, #78350f, #53250b 60%, #3e1b07);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.25);
  transition: width 0.1s linear, background-color 0.3s ease;
}

.choc-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  padding: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.choc-grid-overlay.stamped {
  opacity: 1;
}

.choc-snap-cell {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(60, 27, 7, 0.7);
  border-radius: 4px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), inset 0 -2px 4px rgba(0, 0, 0, 0.4);
}

.chocolate-pour-stream {
  position: absolute;
  top: 0;
  left: calc(50% - 6px);
  width: 12px;
  height: 0;
  background: linear-gradient(180deg, #6b3618, #451a03);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: height 0.2s ease, opacity 0.2s ease;
  z-index: 10;
}
.chocolate-pour-stream.active {
  opacity: 0.95;
  height: 160px;
}

/* ==================================================
   LOLLIES OPROL & SWIRL STATION (GEEN VORMEN)
   ================================================== */
.lollipop-roll-station {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lollipop-station-layout {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 860px;
}

.lollipop-workbench-card, .lollipop-tray-card {
  background: white;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.12);
  border: 2px solid #fbcfe8;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lollipop-workbench-header, .lollipop-tray-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 1.05rem;
  color: #be185d;
  margin-bottom: 10px;
}

/* 3-Step Process Pills */
.lollipop-substep-bar {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-bottom: 12px;
}

.substep-pill {
  flex: 1;
  padding: 6px 4px;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  background: #fdf2f8;
  color: #9d174d;
  border-radius: 8px;
  border: 1.5px solid #fbcfe8;
  transition: all 0.25s ease;
}

.substep-pill.active {
  background: #ec4899;
  color: white;
  border-color: #db2777;
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.35);
}

.substep-pill.done {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

/* Confectioner's Craft Mat */
.lollipop-craft-board {
  position: relative;
  width: 100%;
  height: 220px;
  background: radial-gradient(circle at 50% 50%, #fff1f2, #ffe4e6 70%, #fecdd3);
  border: 3px solid #f43f5e;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

/* Phase 1: Candy Rope (Lange Rol) */
.lollipop-rope-wrapper {
  position: relative;
  width: 90%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.lollipop-candy-rope {
  width: 70px;
  height: 38px;
  background: repeating-linear-gradient(
    45deg,
    #ff2e75,
    #ff2e75 14px,
    #ffffff 14px,
    #ffffff 24px,
    #facc15 24px,
    #facc15 34px
  );
  border-radius: 20px;
  border: 2.5px solid #be185d;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4), inset 0 3px 6px rgba(255, 255, 255, 0.6);
  transition: width 0.15s ease, height 0.15s ease, border-radius 0.2s ease;
}

.lollipop-stretch-arrows {
  position: absolute;
  top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  opacity: 0.75;
  pointer-events: none;
  animation: pulseStretch 1.8s infinite alternate ease-in-out;
}

@keyframes pulseStretch {
  0% { transform: scaleX(0.85); opacity: 0.5; }
  100% { transform: scaleX(1.05); opacity: 0.9; }
}

/* Phase 2: Swirl Disc (In Cirkels Oprollen) */
.lollipop-swirl-disc {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ff2e75 0deg 45deg,
    #ffffff 45deg 90deg,
    #facc15 90deg 135deg,
    #3b82f6 135deg 180deg,
    #ff2e75 180deg 225deg,
    #ffffff 225deg 270deg,
    #facc15 270deg 315deg,
    #3b82f6 315deg 360deg
  );
  border: 3.5px solid #db2777;
  box-shadow: 0 6px 18px rgba(219, 39, 119, 0.4), inset 0 2px 8px rgba(255, 255, 255, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  animation: rotateSwirl 8s linear infinite;
  transition: transform 0.25s ease;
}

.lollipop-swirl-center {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff, #f43f5e);
  border: 2px solid #be123c;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

@keyframes rotateSwirl {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Phase 3: Inserting the Stick */
.lollipop-stick-slot {
  position: relative;
  width: 120px;
  height: 180px;
  display: none;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.stick-insert-shaft {
  width: 8px;
  height: 65px;
  background: linear-gradient(90deg, #f8fafc, #e2e8f0, #cbd5e1);
  border-radius: 4px;
  border: 1.5px solid #94a3b8;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  margin-top: -6px;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stick-insert-shaft.inserted {
  transform: translateY(-16px);
}

/* Cooling Tray for 3 Finished Lollipops */
.lollipop-cooling-tray {
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  border: 3px solid #ec4899;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 14px 10px;
  box-shadow: inset 0 4px 8px rgba(219, 39, 119, 0.15);
}

.lollipop-tray-spot {
  position: relative;
  width: 75px;
  height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.tray-spot-outline {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px dashed #db2777;
  opacity: 0.5;
  margin-bottom: 50px;
}

.placed-swirl-lollipop {
  position: absolute;
  top: 15px;
  display: none;
  flex-direction: column;
  align-items: center;
  animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lollipop-tray-spot.filled .placed-swirl-lollipop {
  display: flex;
}
.lollipop-tray-spot.filled .tray-spot-outline {
  display: none;
}

.placed-swirl-candy {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ff2e75 0deg 45deg,
    #ffffff 45deg 90deg,
    #facc15 90deg 135deg,
    #3b82f6 135deg 180deg,
    #ff2e75 180deg 225deg,
    #ffffff 225deg 270deg,
    #facc15 270deg 315deg,
    #3b82f6 315deg 360deg
  );
  border: 2.5px solid #db2777;
  box-shadow: 0 4px 10px rgba(219, 39, 119, 0.35);
}

.placed-swirl-stick {
  width: 6px;
  height: 65px;
  background: linear-gradient(90deg, #f8fafc, #e2e8f0, #cbd5e1);
  border-radius: 3px;
  border: 1px solid #94a3b8;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  margin-top: -6px;
}



/* ===== Mochi-station ===== */
/* TAART STATION */
.cake-hint { text-align: center; font-weight: 700; margin: 8px 0; }
.cake-progress { height: 14px; background: #e5e7eb; border-radius: 8px; overflow: hidden; margin: 6px auto 10px; width: 320px; max-width: 90%; }
.cake-progress-fill { height: 100%; width: 0%; background: #f9a8d4; transition: width 0.3s; }
.cake-pan { position: relative; width: 240px; height: 240px; margin: 12px auto; border-radius: 50%; background: #cbd5e1; border: 10px solid #94a3b8; box-shadow: inset 0 4px 10px rgba(0,0,0,0.25); overflow: hidden; cursor: pointer; }
.cake-pan-batter { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: #fde68a; transition: height 0.35s ease-out; }
.cake-pan.glug { animation: cake-glug 0.3s; }
@keyframes cake-glug { 50% { transform: scale(1.04); } }
.mochi-hint { text-align: center; font-weight: 700; margin: 8px 0; }
.mochi-progress { height: 14px; background: #e5e7eb; border-radius: 8px; overflow: hidden; margin: 6px auto 10px; max-width: 320px; }
.mochi-progress-fill { height: 100%; width: 0%; background: #86efac; transition: width 0.2s; }
.mochi-grid { display: grid; grid-template-columns: repeat(3, 90px); gap: 12px; justify-content: center; margin: 12px 0; }
.mochi-disc { width: 90px; height: 90px; border-radius: 50%; border: 3px solid rgba(0,0,0,0.12); cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #475569; transform: scale(0.35); opacity: 0.4; transition: transform 0.3s, opacity 0.3s, border-radius 0.3s; box-shadow: inset 0 -6px 10px rgba(0,0,0,0.08); }
.mochi-disc.rolled { transform: scale(1); opacity: 1; }
.mochi-disc.filled::after { content: ''; width: 30px; height: 30px; border-radius: 50%; background: var(--filling, #be123c); box-shadow: 0 0 0 3px rgba(255,255,255,0.7); }
.mochi-disc.folded { border-radius: 46% 46% 50% 50%; transform: scale(0.85); }
.mochi-disc.folded::after { display: none; }
.mochi-disc.folded::before { content: '\25E1  \25E1'; letter-spacing: 6px; font-size: 14px; color: #1f2937; }

/* CUPCAKE STATION: muffinblik met papieren bakjes */
.cupcake-hint { text-align: center; font-weight: 700; margin: 8px 0; }
.cupcake-progress { height: 14px; background: #e5e7eb; border-radius: 8px; overflow: hidden; margin: 6px auto 10px; width: 320px; max-width: 90%; }
.cupcake-progress-fill { height: 100%; width: 0%; background: #f9a8d4; transition: width 0.3s; }
.cupcake-spoon { text-align: center; font-size: 2.2rem; animation: cupcake-spoon-bob 1.4s ease-in-out infinite; }
.muffin-tin { display: grid; grid-template-columns: repeat(3, 90px); gap: 14px; justify-content: center; padding: 18px; margin: 10px auto; background: #94a3b8; border-radius: 16px; box-shadow: inset 0 3px 8px rgba(0,0,0,0.3); }
.muffin-cup { position: relative; width: 90px; height: 90px; border-radius: 10px 10px 40% 40%; background: repeating-linear-gradient(90deg, #fbcfe8 0 8px, #f9a8d4 8px 16px); border: 3px solid #db2777; overflow: hidden; cursor: pointer; transition: transform 0.15s; }
.muffin-cup:hover { transform: scale(1.05); }
.muffin-cup-batter { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 0; border-radius: 6px 6px 30% 30%; transition: height 0.35s ease-out; }
.muffin-cup.filled { cursor: default; animation: cupcake-glug 0.3s; }
.muffin-cup.filled .muffin-cup-batter { height: 65%; }
@keyframes cupcake-glug { 50% { transform: scale(1.1); } }
@keyframes cupcake-spoon-bob { 50% { transform: translateY(-6px) rotate(-8deg); } }

/* Wens van de klant: snoepknop licht op */
.treat-pill.wish-pill {
  box-shadow: 0 0 0 3px #ffd54a, 0 0 14px 4px rgba(255, 213, 74, 0.8);
  animation: wishPulse 1.4s ease-in-out infinite;
}
@keyframes wishPulse {
  50% { box-shadow: 0 0 0 3px #ffd54a, 0 0 22px 8px rgba(255, 213, 74, 0.5); }
}

/* REWARD STARS & CONFETTI */
.reward-stars-row { display: flex; justify-content: center; gap: 8px; margin: 8px 0; font-size: 3rem; line-height: 1; }
.reward-star.earned { color: #facc15; text-shadow: 0 2px 0 #ca8a04; animation: star-pop 0.6s both cubic-bezier(.3,1.6,.5,1); }
.reward-star.empty { color: #e5d5da; opacity: 0.7; }
@keyframes star-pop { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1) rotate(0); } }
.confetti-piece { position: fixed; top: -20px; width: 10px; height: 16px; z-index: 10000; pointer-events: none; border-radius: 2px; animation: confetti-fall 2.5s linear forwards; }
@keyframes confetti-fall { to { transform: translate(var(--drift, 0), 110vh) rotate(720deg); } }

/* WINKELPLANK */
.deco-shelf-section { background: #fff1f7; border: 2px dashed #f9a8d4; border-radius: 16px; padding: 10px 14px; margin: 10px 0; }
.deco-title { color: #db2777; font-size: 1.1rem; margin-bottom: 6px; }
.deco-shop { display: flex; gap: 8px; flex-wrap: wrap; }
.deco-buy-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; border: 2px solid #f472b6; border-radius: 12px; background: #fff; color: #9d174d; font-weight: 700; cursor: pointer; }
.deco-buy-btn small { font-weight: 600; color: #be185d; }
.deco-buy-btn .deco-icon { font-size: 1.6rem; }
.deco-buy-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.deco-buy-btn.owned { background: #dcfce7; border-color: #4ade80; opacity: 1; }
.deco-scene { display: flex; gap: 16px; justify-content: center; font-size: 2.2rem; min-height: 0; margin-top: 6px; }
.deco-placed.deco-lights { letter-spacing: 6px; animation: decoTwinkle 1.5s infinite alternate; }
@keyframes decoTwinkle { from { opacity: 0.6; } to { opacity: 1; } }

/* DAGDOEL */
.goal-badge { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 150px; }
.goal-bar { display: block; height: 6px; border-radius: 3px; background: rgba(0,0,0,0.15); overflow: hidden; }
.goal-fill { display: block; height: 100%; width: 0; background: #4ade80; transition: width 0.4s; }