/* Readability + "lively" feedback layer. Loaded after the main stylesheet; remove the
   <link> in index.html to go back to the original look. */

/* ---- 1. Customer patience: thick, readable, warns before it is too late ---- */
.patience-track{height:7px;margin-top:5px;border-radius:6px;box-shadow:inset 0 1px 2px #5a3b1e44}
.patience-track>div{border-radius:6px;transition:width .4s linear,background-color .4s;
  background:linear-gradient(#a6cf84,#6f9c55)}
.ticket-urgent .patience-track>div{background:linear-gradient(#ff8a5c,#e0452b)}
@media (max-height:480px){.patience-track{height:5px;margin-top:3px}}

/* ---- 2. Orders: larger text, and a table about to leave shakes + glows ---- */
.ticket{transition:transform .15s,box-shadow .15s}
.ticket>span{gap:8px}
.ticket i{font-size:10px;font-weight:700}
.ticket:active{transform:scale(.96)}
.ticket.chosen-ticket,.ticket.selected{border-color:#6a9562;box-shadow:0 3px #4f7a47,0 0 0 3px #a8d58c88}
.ticket-urgent{border-color:#e0452b;animation:mk-urgent .9s ease-in-out infinite}
.ticket-urgent>span i{color:#d6361d;font-weight:800}
@keyframes mk-urgent{
  0%,100%{transform:translateX(0) rotate(0);box-shadow:0 3px #a28151,0 0 0 0 #ff6a4a00}
  20%{transform:translateX(-2px) rotate(-1deg)}
  40%{transform:translateX(2px) rotate(1deg);box-shadow:0 3px #a28151,0 0 12px 3px #ff6a4acc}
  60%{transform:translateX(-1px) rotate(-.5deg)}
}

/* ---- 3. Holding slots: obvious "ready" (bouncy glow) vs "burnt" (red, trembling) ---- */
.direct-slot{transition:transform .15s,box-shadow .2s}
/* Status as a symbol instead of a long text line: saves height on small screens. */
.direct-slot>small{font-size:0!important;line-height:1;min-height:14px}
.direct-slot>small::after{font-size:13px;line-height:1}
.direct-slot.ready>small::after{content:"✅"}
.direct-slot.raw>small::after{content:"⏳"}
.direct-slot.burnt>small::after{content:"🔥"}
.direct-slot.ready{border-color:#78a85f;background:#f4fbe6;animation:mk-ready 1.1s ease-in-out infinite}
.direct-slot.burnt,.direct-slot.raw{border-color:#d4553a;background:#fff0ea}
.direct-slot.burnt{animation:mk-burnt .5s linear infinite}
.direct-slot.selected{animation:none;box-shadow:inset 0 0 0 2px #6a9562,0 0 0 2px #bfe39c}
@keyframes mk-ready{0%,100%{box-shadow:0 0 0 0 #9ad46f00}50%{box-shadow:0 0 10px 3px #9ad46fcc}}
@keyframes mk-burnt{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.5px)}75%{transform:translateX(1.5px)}}

/* ---- 4. Ingredients the chosen table needs: bounce so you can find them instantly ---- */
.shelf-grid>button{transition:transform .12s}
.shelf-grid>button:active{transform:scale(.92)}
.needed-ingredient{animation:mk-need 1s ease-in-out infinite;background:#f2ffe0!important}
.needed-badge{white-space:nowrap;font-size:9px!important;padding:1px 4px!important;font-weight:800!important;background:#6aa24f!important;color:#fff!important}
@keyframes mk-need{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---- 5. Big satisfying send button; pulses once everything is ready to serve ---- */
.direct-send .direct-serve{transition:transform .12s}
.direct-send .direct-serve:not(:disabled):not([disabled]){animation:mk-send 1s ease-in-out infinite}
.direct-send .direct-serve:active{filter:brightness(.95)}
@keyframes mk-send{0%,100%{filter:brightness(1);box-shadow:0 3px #a36334}50%{filter:brightness(1.15);box-shadow:0 3px #a36334,inset 0 0 0 2px #ffe3a8}}

/* ---- 6. Excitement: combo, score, feedback pop ---- */
.combo b{display:inline-block;animation:mk-pop .6s ease-out}
.combo{text-shadow:0 0 10px #ffb94a99}
.kitchen-toast,.serve-toast{animation:mk-toast .35s cubic-bezier(.2,1.4,.4,1)}
.hud .time b{transition:color .3s}
@keyframes mk-pop{0%{transform:scale(.4)}60%{transform:scale(1.4)}100%{transform:scale(1)}}
@keyframes mk-toast{0%{transform:translateY(14px) scale(.9);opacity:0}100%{transform:none;opacity:1}}

/* ---- Respect users who ask for less motion ---- */
@media (prefers-reduced-motion:reduce){
  .ticket-urgent,.direct-slot.ready,.direct-slot.burnt,.needed-ingredient,
  .direct-send .direct-serve,.combo b,.kitchen-toast,.serve-toast{animation:none!important}
}

/* Save backup buttons */
.player-settings>button.secondary{margin-top:8px;display:block}