/* Dinner Rush HUD */
.dr-tickets { position: absolute; top: 66px; left: 12px; right: 190px; display: flex; gap: 8px; align-items: flex-start; pointer-events: none; }
.dr-ticket { position: relative; width: 122px; flex: 0 0 auto; background: #fff8ea; color: #3a2a1c; border-radius: 6px 6px 12px 12px; padding: 6px 8px 9px; text-shadow: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); border-top: 6px solid #e2553d; animation: dr-in .35s cubic-bezier(.2, 1.4, .4, 1); transform-origin: top center; }
.dr-ticket.first { border-top-color: #ffb21f; box-shadow: 0 0 0 2px #ffc94d, 0 8px 22px rgba(0, 0, 0, .45); }
.dr-ticket .nm { font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-ticket .next { position: absolute; top: -15px; right: 6px; background: #ffb21f; color: #3a2400; font-size: 9px; font-weight: 900; padding: 1px 6px; border-radius: 6px; letter-spacing: .08em; display: none; }
.dr-ticket.first .next { display: block; }
.dr-ticket .dish { display: block; width: 62px; height: 62px; margin: 0 auto -2px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
.dr-ticket .parts { display: flex; justify-content: center; gap: 2px; min-height: 28px; }
.dr-ticket .parts img { width: 27px; height: 27px; object-fit: contain; background: rgba(120, 80, 40, .12); border-radius: 7px; }
.dr-ticket .tm { height: 7px; border-radius: 4px; background: rgba(60, 40, 20, .18); margin-top: 6px; overflow: hidden; }
.dr-ticket .tm i { display: block; height: 100%; width: 100%; background: #46c46a; border-radius: 4px; transition: background-color .4s; }
.dr-ticket.mid .tm i { background: #f0b429; }
.dr-ticket.urgent .tm i { background: #e2442f; }
.dr-ticket.urgent { animation: dr-shake .32s linear infinite; background: #ffe9e2; }
.dr-ticket.gone { animation: dr-out .3s ease-in forwards; }
@keyframes dr-in { from { transform: translateY(-40px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dr-out { to { transform: translateY(-30px) scale(.8); opacity: 0; } }
@keyframes dr-shake { 0%, 100% { transform: rotate(-1.6deg) translateX(-1px); } 50% { transform: rotate(1.6deg) translateX(1px); } }

.hud .chip.dr-clock { top: 54px; right: 12px; min-width: 164px; text-align: right; padding: 8px 14px 10px; }
.dr-clock .t { font-size: 30px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.dr-clock.low .t { color: var(--bad); animation: dr-pulse .6s ease-in-out infinite; }
.dr-clock .tips { font-size: 17px; color: var(--accent); margin-top: 4px; }
.dr-clock .combo { font-size: 12px; color: var(--good); min-height: 15px; }
.dr-clock .lay { font-size: 11px; color: var(--muted); font-weight: 600; }
@keyframes dr-pulse { 50% { transform: scale(1.08); } }
.hud .chip.dr-invite { top: 168px; right: 12px; pointer-events: auto; cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; color: var(--text); }
.dr-invite code { color: var(--accent); font-size: 15px; letter-spacing: .12em; margin-left: 4px; }
.dr-invite.off { cursor: default; opacity: .7; }

.dr-prompt { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 10px; white-space: nowrap; }
.dr-prompt span { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 7px 13px; font-size: 15px; text-shadow: none; backdrop-filter: blur(8px); }
.dr-prompt span.no { color: var(--bad); }
.dr-prompt kbd { display: inline-block; background: var(--accent); color: var(--accent-ink); border-radius: 6px; padding: 1px 7px; margin-right: 7px; font: 800 12px var(--font); }
body.dr-touch .dr-prompt { bottom: calc(205px + env(safe-area-inset-bottom, 0px)); } body.dr-touch .dr-prompt kbd { display: none; }

.dr-tag { position: absolute; left: 0; top: 0; font-size: 12px; white-space: nowrap; will-change: transform; padding: 1px 7px; border-radius: 8px; background: rgba(10, 8, 6, .5); }
.dr-prog { position: absolute; left: 0; top: 0; will-change: transform; display: none; }
.dr-prog.bar { width: 58px; height: 10px; margin: -5px 0 0 -29px; background: rgba(20, 14, 10, .78); border-radius: 6px; border: 1.5px solid #fff; overflow: hidden; }
.dr-prog.bar i { display: block; height: 100%; background: #ffd24d; }
.dr-prog.ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: conic-gradient(var(--c, #55d67b) calc(var(--p, 0) * 1turn), rgba(20, 14, 10, .78) 0); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); display: none; place-items: center; font-size: 17px; font-weight: 900; text-shadow: none; }
.dr-prog.ring::after { content: attr(data-t); position: absolute; inset: 5px; border-radius: 50%; background: rgba(28, 20, 14, .92); display: grid; place-items: center; color: #fff; }
.dr-prog.ring.warn { animation: dr-beat .35s ease-in-out infinite; }
@keyframes dr-beat { 50% { scale: 1.15; } }
.dr-float { position: absolute; left: 0; top: 0; font-size: 26px; font-weight: 900; color: var(--accent); text-shadow: 0 2px 0 #5a3200, 0 4px 14px rgba(0, 0, 0, .7); animation: dr-float 1.2s ease-out forwards; white-space: nowrap; }
.dr-float.bad { color: var(--bad); text-shadow: 0 2px 0 #4a0a12, 0 4px 14px rgba(0, 0, 0, .7); }
.dr-float small { display: block; font-size: 13px; color: var(--good); text-align: center; }
@keyframes dr-float { from { margin-top: 0; opacity: 0; } 15% { opacity: 1; } to { margin-top: -90px; opacity: 0; } }

.card .dr-seg { display: flex; gap: 8px; margin-top: 12px; }
.card .dr-seg button { flex: 1; }
.card .dr-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; min-height: 34px; }
.card .dr-link { font: 600 13px ui-monospace, Consolas, monospace; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; margin-top: 10px; word-break: break-all; user-select: all; }
.card .dr-crew { margin-top: 10px; font-weight: 700; color: var(--good); }
.card .dr-stars { font-size: 44px; letter-spacing: 6px; color: var(--accent); margin: 2px 0 6px; text-shadow: 0 0 22px rgba(255, 201, 77, .5); }
.card .dr-stars i { font-style: normal; color: rgba(255, 255, 255, .18); text-shadow: none; }
@media (max-width: 760px) {
  .dr-tickets { right: 8px; top: 146px; gap: 5px; } .dr-ticket { width: 92px; padding: 5px 5px 7px; } .dr-ticket .dish { width: 44px; height: 44px; } .dr-ticket .parts img { width: 19px; height: 19px; } .dr-ticket .parts { min-height: 20px; }
  .hud .chip.dr-clock { top: 92px; min-width: 0; display: flex; gap: 10px; align-items: baseline; padding: 6px 12px; } .dr-clock .t { font-size: 22px; } .dr-clock .lay { display: none; }
  .hud .chip.dr-invite { top: 92px; right: auto; left: 12px; }
}
/* phones held sideways: keep the prompt off the kitchen and the invite chip clear of the Dash button */
@media (max-height: 500px) and (min-width: 761px) {
  .dr-tickets { top: 58px; gap: 5px; } .dr-ticket { width: 92px; padding: 5px 5px 7px; } .dr-ticket .dish { width: 44px; height: 44px; } .dr-ticket .parts img { width: 19px; height: 19px; } .dr-ticket .parts { min-height: 20px; }
  .hud .chip.dr-clock { top: 54px; min-width: 0; display: flex; gap: 10px; align-items: baseline; padding: 6px 12px; } .dr-clock .t { font-size: 22px; } .dr-clock .lay { display: none; }
  .hud .chip.dr-invite { top: 100px; }
  body.dr-touch .dr-prompt { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .dr-prompt span { font-size: 13px; padding: 5px 10px; }
}