/* Iftar Rush — warm Ramadan café styling (deep teal night + gold lanterns) */
#irStage[data-state="play"], #irStage[data-state="playing"], #irStage[data-state="win"] {
  background-image: none;
  background-color: #fdf6e3;
}
.ir-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ir-chip {
  background: #fffbeb; border: 2px solid #fde68a; color: #92400e;
  font-size: 13px; font-weight: 1000; padding: 7px 12px; border-radius: 999px;
}
.ir-chip.ir-timer { background: #173653; border-color: #173653; color: #fde68a; transition: background .4s; }
.ir-chip.ir-timer.warn { background: #b45309; border-color: #b45309; color: #fff; }
.ir-chip.ir-timer.low { background: #991b1b; border-color: #991b1b; color: #fff; animation: irPulse 1s ease-in-out infinite; }
@keyframes irPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---------- the living sky + visual timer ---------- */
.ir-sky { margin: 10px 12px 0; }
.ir-sky svg {
  display: block; width: 100%; height: 92px;
  border-radius: 16px 16px 0 0; border: 3px solid #134e4a; border-bottom: none;
}
.ir-lantern { transform-box: fill-box; transform-origin: 50% 0; animation: irSway 3.6s ease-in-out infinite alternate; }
.ir-lantern2 { animation-duration: 4.4s; animation-delay: .7s; }
@keyframes irSway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.ir-timebar {
  position: relative; height: 18px; margin-top: -2px;
  background: #292524; border: 3px solid #134e4a; border-top: none;
  border-radius: 0 0 14px 14px; overflow: visible;
}
.ir-timebar-fill {
  height: 100%; width: 100%; border-radius: 0 0 0 11px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  transition: width .25s linear, background .5s;
}
.ir-timebar-fill.warn { background: linear-gradient(90deg, #ea580c, #f59e0b); }
.ir-timebar-fill.low { background: linear-gradient(90deg, #dc2626, #ea580c); }
.ir-timebar-moon {
  position: absolute; top: 50%; left: 100%; transform: translate(-50%, -58%);
  font-size: 21px; line-height: 1; transition: left .25s linear;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}

/* ---------- board, tickets, tray ---------- */
.ir-board {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 12px 12px 4px; align-items: start;
}
@media (max-width: 640px) { .ir-board { grid-template-columns: 1fr; } }
.ir-tickets { display: flex; flex-direction: column; gap: 10px; }
.ir-ticket {
  background: #fff; border: 3px dashed #d97706; border-radius: 16px;
  padding: 12px 14px; box-shadow: 0 3px 0 rgba(180, 83, 9, .18);
}
.ir-ticket.pop { animation: irPop .35s ease; }
@keyframes irPop { 0% { transform: scale(.97); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }
.ir-ticket.served { animation: irServed .6s ease-in both; }
@keyframes irServed { 30% { transform: translateY(-4px) scale(1.02); } 100% { transform: translateY(-16px); opacity: 0; } }
.ir-ticket.ir-next { border-style: dotted; border-color: #94a3b8; opacity: .92; }
.ir-ticket-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.ir-guest-icon { font-size: 34px; line-height: 1; }
.ir-ticket-head .ir-guest-icon.bounce { animation: irBounce .5s ease; display: inline-block; }
@keyframes irBounce { 0% { transform: translateY(0); } 35% { transform: translateY(-7px); } 70% { transform: translateY(2px); } 100% { transform: translateY(0); } }
.ir-ticket-title { margin: 0; font-weight: 1000; color: #173653; font-size: 16px; }
.ir-ticket-sub { margin: 0; font-size: 12.5px; font-weight: 800; color: #78716c; }
.ir-bonus { display: flex; align-items: center; gap: 8px; margin: 2px 0 9px; }
.ir-bonus-label { font-size: 11.5px; font-weight: 1000; color: #b45309; white-space: nowrap; }
.ir-bonus-track { flex: 1; height: 9px; background: #fde68a66; border: 1.5px solid #fcd34d; border-radius: 99px; overflow: hidden; }
.ir-bonus-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width .25s linear; }
.ir-bonus.done .ir-bonus-label { color: #a8a29e; }
.ir-bonus.done .ir-bonus-fill { background: #d6d3d1; }
.ir-order-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ir-item {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fef3c7; border: 2px solid #fcd34d; color: #78350f;
  border-radius: 999px; padding: 3px 11px 3px 5px; font-size: 14px; font-weight: 900;
}
.ir-item .ir-food-art { width: 24px; height: 24px; }
.ir-item.done { background: #dcfce7; border-color: #22c55e; color: #14532d; }
.ir-item.done .ir-food-name { text-decoration: line-through; }

.ir-tray-zone { position: relative; background: #fffbeb; border: 3px solid #f59e0b; border-radius: 16px; padding: 12px 14px; }
.ir-zone-title { margin: 0 0 8px; font-weight: 1000; color: #92400e; font-size: 15px; }
.ir-zone-title small { font-weight: 800; color: #a16207; }
.ir-tray {
  min-height: 62px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  background: repeating-linear-gradient(45deg, #fff7ed, #fff7ed 14px, #ffedd5 14px, #ffedd5 28px);
  border: 2px solid #fdba74; border-radius: 12px; padding: 9px;
}
.ir-tray-empty { margin: 0; font-weight: 800; color: #9a3412; font-size: 14px; }
.ir-tray .ir-tray-item {
  font: inherit; font-size: 14px; font-weight: 900; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 2px solid #d97706; color: #78350f;
  border-radius: 999px; padding: 4px 12px 4px 6px; min-height: 40px;
  animation: irTrayIn .25s ease;
}
@keyframes irTrayIn { from { transform: translateY(7px) scale(.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.ir-tray .ir-tray-item .ir-food-art { width: 26px; height: 26px; }
.ir-tray .ir-tray-item:hover { background: #fee2e2; border-color: #ef4444; }
.ir-serve-row { display: flex; gap: 9px; margin-top: 11px; flex-wrap: wrap; }
#irServe { flex: 1 1 170px; font-size: 19px; }
.ir-serve-row .ir-clear {
  font: inherit; font-weight: 1000; cursor: pointer; min-height: 48px;
  border: 2px solid #cbd5e1; background: #f8fafc; color: #334155; border-radius: 13px; padding: 8px 16px;
}

/* celebration sparkles over the tray */
.ir-sparkle {
  position: absolute; z-index: 5; pointer-events: none; font-size: 19px;
  animation: irSparkle .95s ease-out both;
}
@keyframes irSparkle {
  0% { transform: translate(0, 0) scale(.5) rotate(0deg); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.25) rotate(50deg); opacity: 0; }
}

/* ---------- menu with illustrated foods ---------- */
.ir-menu-title { margin: 10px 14px 0; font-weight: 1000; color: #173653; font-size: 15px; }
.ir-menu {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 9px; padding: 9px 12px 4px;
}
.ir-menu .ir-menu-btn {
  font: inherit; cursor: pointer; min-height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: linear-gradient(180deg, #ffffff, #fff7ed); border: 3px solid #bae6fd; color: #075985;
  border-radius: 16px; font-size: 14.5px; font-weight: 1000; padding: 9px 4px 7px;
  box-shadow: 0 3px 0 rgba(2, 132, 199, .15);
}
.ir-menu .ir-menu-btn:hover, .ir-menu .ir-menu-btn:active { background: #f0f9ff; border-color: #38bdf8; }
.ir-menu .ir-menu-btn:active { transform: translateY(2px); box-shadow: none; }
.ir-menu .ir-menu-btn .ir-food-art {
  width: 56px; height: 56px;
  filter: drop-shadow(0 2px 2px rgba(120, 53, 15, .18));
  transition: transform .18s ease;
}
.ir-menu .ir-menu-btn:hover .ir-food-art { transform: scale(1.1) rotate(-3deg); }
.ir-food-art { display: block; }
.ir-food-art .ir-steam path {
  stroke: #a8a29e; stroke-width: 2.4; fill: none; stroke-linecap: round;
  animation: irSteam 2.1s ease-in-out infinite;
}
.ir-food-art .ir-steam path:nth-child(2) { animation-delay: .7s; }
@keyframes irSteam { 0%, 100% { opacity: .25; transform: translateY(1.5px); } 50% { opacity: .95; transform: translateY(-1.5px); } }