/* Custom Styles for Chef Burger Game */

body {
  font-family: 'Tajawal', system-ui, -apple-system, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* Diner Checkerboard Background Pattern */
.diner-tile-bg {
  background-image: 
    linear-gradient(45deg, #231915 25%, transparent 25%), 
    linear-gradient(-45deg, #231915 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #231915 75%), 
    linear-gradient(-45deg, transparent 75%, #231915 75%);
  background-size: 28px 28px;
  background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
}

/* Sizzle Steam FX */
.grill-steam {
  width: 4px;
  height: 14px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  animation: steamFloat 2s infinite ease-out;
}

@keyframes steamFloat {
  0% { transform: translateY(0) scaleX(1); opacity: 0; }
  50% { opacity: 0.8; }
  100% { transform: translateY(-16px) scaleX(2.5); opacity: 0; }
}

/* Customer Patience Bar Styling */
.patience-fill {
  transition: width 0.3s linear, background-color 0.4s ease;
}

/* Burger Stacking Component Renderings */
.layer-item {
  position: relative;
  width: 100%;
  max-width: 150px;
  margin-top: -14px; /* Natural layered overlap */
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.35));
}

.layer-item:first-child {
  margin-top: 0;
}

/* Ingredient Button Styling */
.ing-btn {
  transition: all 0.12s ease;
  position: relative;
}
.ing-btn:active {
  transform: scale(0.92);
}

/* Speech Bubble Pointer */
.speech-bubble {
  position: relative;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}
.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 7px 0 7px;
  border-style: solid;
  border-color: #1c1917 transparent transparent transparent;
}

/* Star glowing */
.star-gold {
  color: #fbbf24 !important;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
}