/* SLOP CENTER — HUD. Owner: Menus UI.
   Quiet glass pills that live in the outer ~165 px on each side so they never sit on the
   monitor (centre view spans ~x 180–660 at 844 px). Clock top-left; a vertical stack hugging
   the right edge (pause · money · write-ups) inside the top ~40% — the look chevrons own the
   left edge at 29% / 50%, the right edge at 50% and the bottom-right corner. On wide screens
   the right stack becomes one horizontal pill. Left-handed mode mirrors the two sides.
   Phone banners slide in top-right and may overlap the stack briefly. */
.hud-root {
  --hud-glass: rgba(16, 14, 22, .5);
  --hud-line: rgba(255, 255, 255, .09);
  --hud-text: #f6f1e7;
  --hud-dim: rgba(246, 241, 231, .62);
  --hud-round: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --hud-t: max(8px, env(safe-area-inset-top));
  --hud-l: max(10px, env(safe-area-inset-left));
  --hud-r: max(10px, env(safe-area-inset-right));
  position: absolute; inset: 0; pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; color: var(--hud-text);
  opacity: 0; visibility: hidden;
  transition: opacity .3s cubic-bezier(.22,1,.36,1), visibility 0s linear .3s;
}
.hud-root.on { opacity: 1; visibility: visible; transition: opacity .3s cubic-bezier(.22,1,.36,1), visibility 0s; }
.hud-root.on.paused { opacity: 0; }

.hud-glass {
  background: var(--hud-glass);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 0 0 1px var(--hud-line), 0 6px 18px -8px rgba(0,0,0,.5);
}

/* ---- clock (top-left; top-right when left-handed) ---- */
.hud-clock {
  position: absolute; top: var(--hud-t); left: var(--hud-l);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  height: 44px; padding: 0 13px; border-radius: 14px;
}
.hud-time {
  font: 700 calc(17px * var(--ts, 1))/1 var(--hud-round); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; transition: color .6s; white-space: nowrap;
}
.hud-time.late { color: #f6c35b; }
.hud-day {
  font-size: calc(11px * var(--ts, 1)); line-height: 1; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--hud-dim); white-space: nowrap;
}

/* ---- right stack (phone default): pause on top, then money, then write-ups ---- */
.hud-cluster {
  position: absolute; top: var(--hud-t); right: var(--hud-r);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 150px;
}
.hud-pause {
  order: 0; pointer-events: auto; cursor: pointer; border: 0; margin: 0; padding: 0;
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--hud-text);
  transition: background-color .13s, transform .13s cubic-bezier(.34,1.56,.64,1);
}
.hud-pause svg { width: 18px; height: 18px; fill: currentColor; }
.hud-pause:hover { background: rgba(40, 36, 52, .7); }
.hud-pause:active { transform: scale(.9); transition-duration: 70ms; }
.hud-pause:focus-visible { outline: 2px solid #f0b23a; outline-offset: 2px; }

.hud-money {
  order: 1; position: relative; display: flex; align-items: center; height: 32px; padding: 0 11px; border-radius: 11px;
  font: 700 calc(15px * var(--ts, 1))/1 var(--hud-round); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap;
}
.hud-money.neg .hud-mv { color: #ff8b7a; }
.hud-money.up .hud-mv { animation: hudUp .7s cubic-bezier(.22,1,.36,1); }
.hud-money.down .hud-mv { animation: hudDown .7s cubic-bezier(.22,1,.36,1); }
.hud-mv { display: inline-block; }
@keyframes hudUp { 0% { color: #7ef0c4; transform: translateY(-1px); } 100% { color: inherit; transform: none; } }
@keyframes hudDown { 0% { color: #ff8b7a; transform: translateY(1px); } 100% { color: inherit; transform: none; } }
/* +/− chip floats beside the money pill, toward the screen centre */
.hud-delta {
  position: absolute; right: calc(100% + 6px); top: 50%; white-space: nowrap;
  font: 700 12px/1 var(--hud-round); padding: 5px 7px; border-radius: 8px;
  background: rgba(16,14,22,.78); pointer-events: none;
  animation: hudDelta 1.4s cubic-bezier(.22,1,.36,1) forwards;
}
.hud-delta.up { color: #7ef0c4; } .hud-delta.down { color: #ff8b7a; }
@keyframes hudDelta { 0% { opacity: 0; transform: translate(6px, -50%); } 15% { opacity: 1; transform: translate(0, -50%); } 75% { opacity: 1; transform: translate(0, -50%); } 100% { opacity: 0; transform: translate(-6px, -50%); } }

.hud-strikes {
  order: 2; display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: 10px;
}
.hud-strikes[hidden] { display: none; }
.hud-pip { width: 17px; height: 15px; display: block; }
.hud-pip svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hud-pip .tri { fill: none; stroke: rgba(246,241,231,.38); stroke-width: 1.6; stroke-linejoin: round; transition: fill .2s, stroke .2s; }
.hud-pip .bang { stroke: transparent; stroke-width: 2.1; stroke-linecap: round; transition: stroke .2s; }
.hud-pip.on .tri { fill: #ff4f45; stroke: #ff4f45; }
.hud-pip.on .bang { stroke: #1a0d10; }
.hud-pip.pop { animation: hudPop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes hudPop { 0% { transform: scale(.4); } 55% { transform: scale(1.5); } 100% { transform: scale(1); } }
.hud-strikes.danger .hud-pip.on .tri { filter: drop-shadow(0 0 5px rgba(255,79,69,.8)); }

.hud-cluster.shake .hud-strikes { animation: hudShake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes hudShake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ---- left-handed: mirror the two sides (look-up/look-down chevrons move right) ---- */
.hud-root.lefty .hud-clock { left: auto; right: var(--hud-r); align-items: flex-end; }
.hud-root.lefty .hud-cluster { right: auto; left: var(--hud-l); align-items: flex-start; }
.hud-root.lefty .hud-delta { right: auto; left: calc(100% + 6px); }

/* ---- boss approaching: on <body>, above #phone (z20), below #talk/#menus; never takes taps ---- */
.hud-bossfx { position: fixed; inset: 0; z-index: 25; pointer-events: none; visibility: hidden; transition: visibility 0s linear .8s; }
.hud-bossfx.on { visibility: visible; transition: none; }
.hud-bossfx.paused { visibility: hidden; }
.hud-boss {
  position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease;
  background: radial-gradient(ellipse farthest-corner at 50% 46%, rgba(120, 8, 30, 0) 48%, rgba(140, 10, 34, .34) 74%, rgba(96, 0, 22, .74) 100%);
}
.hud-bossfx.on .hud-boss { opacity: .42; }
.hud-bossfx.on.near .hud-boss { opacity: 1; animation: hudBoss 1.15s ease-in-out infinite; }
@keyframes hudBoss { 0%, 100% { opacity: .55; } 18% { opacity: 1; } 34% { opacity: .7; } 48% { opacity: .95; } }
.hud-bossfx.rm.on.near .hud-boss { animation: none; opacity: .8; }
.hud-bp {
  position: absolute; left: 50%; top: max(8px, env(safe-area-inset-top));
  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 9px; border-radius: 999px;
  background: rgba(30, 8, 14, .86); color: #ffe3dc;
  box-shadow: inset 0 0 0 1.5px rgba(255, 92, 92, .55), 0 8px 22px -8px rgba(0,0,0,.6);
  font: 700 calc(13.5px * var(--ts, 1))/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  white-space: nowrap; -webkit-font-smoothing: antialiased;
  opacity: 0; transform: translate(-50%, -12px); transition: opacity .2s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.34,1.56,.64,1);
}
.hud-bp-i { font-size: 16px; line-height: 1; }
.hud-bossfx.on .hud-bp { opacity: 1; transform: translate(-50%, 0); }
.hud-bossfx.on.near .hud-bp { background: rgba(150, 14, 34, .94); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 160, 160, .7), 0 8px 22px -8px rgba(0,0,0,.6); }
.hud-bossfx.on.near .hud-bp-i { animation: hudPeek 1.15s ease-in-out infinite; }
@keyframes hudPeek { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-2px); } 65% { transform: translateX(2px); } }
.hud-bossfx.rm .hud-bp, .hud-bossfx.rm.on .hud-bp { transform: translate(-50%, 0); transition: opacity .2s linear; }
.hud-bossfx.rm .hud-bp-i { animation: none !important; }
@media (min-width: 1000px) { .hud-bp { top: max(18px, env(safe-area-inset-top)); height: 38px; font-size: calc(15px * var(--ts, 1)); padding: 0 16px 0 12px; } }

.hud-flash { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 0 4px #ff4f45, inset 0 0 120px 30px rgba(255, 40, 40, .55); }
.hud-flash.go { animation: hudFlash .75s ease-out; }
@keyframes hudFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.hud-root.rm .hud-flash.go { animation-duration: 1.1s; }

/* ---- toasts (in #toast): bottom-centre over the keyboard strip (newest at the bottom, max 2),
   clear of the ticket's username/prompt and the TV; hud.js lifts them above Dee's box when it's up ---- */
.hud-toasts {
  position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%); width: min(380px, calc(100% - 200px));
  display: flex; flex-direction: column-reverse; align-items: center; gap: 5px; pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hud-toast {
  pointer-events: none; max-width: 100%; flex: none;
  display: flex; align-items: center; gap: 9px; padding: 7px 13px 7px 7px; min-height: 36px;
  border-radius: 13px; background: rgba(20, 18, 26, .9); color: #f6f1e7;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 26px -10px rgba(0,0,0,.6);
  font-size: calc(13.5px * var(--ts, 1)); font-weight: 600; line-height: 1.25;
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .2s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.34,1.4,.64,1);
}
.hud-toast.in { opacity: 1; transform: none; }
.hud-toast.out { opacity: 0; transform: translateY(6px) scale(.98); transition-duration: .2s; }
.hud-ti {
  flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  font: 800 12px/1 ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  background: rgba(255,255,255,.12); color: #fff;
}
.hud-toast.good .hud-ti { background: #18a58f; }
.hud-toast.bad  .hud-ti { background: #ff4f45; color: #1a0d10; }
.hud-toast.bad  { box-shadow: inset 0 0 0 1px rgba(255,79,69,.55), 0 10px 26px -10px rgba(0,0,0,.6); }
.hud-toast.pip  .hud-ti { background: #2aa7e8; }
.hud-toast.info .hud-ti { background: #7c6cf0; }

/* ---- wide screens: the right side has room for one horizontal pill ---- */
@media (min-width: 1000px) {
  .hud-root { --hud-t: max(14px, env(safe-area-inset-top)); --hud-l: max(16px, env(safe-area-inset-left)); --hud-r: max(16px, env(safe-area-inset-right)); }
  .hud-clock { height: 50px; padding: 0 17px 0 16px; border-radius: 16px; }
  .hud-time { font-size: calc(19px * var(--ts, 1)); }
  .hud-day { font-size: calc(11.5px * var(--ts, 1)); }
  .hud-cluster {
    flex-direction: row; align-items: stretch; gap: 0; max-width: none; height: 50px; border-radius: 16px;
    background: var(--hud-glass);
    -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: inset 0 0 0 1px var(--hud-line), 0 6px 18px -8px rgba(0,0,0,.5);
  }
  .hud-cluster > .hud-glass { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; }
  .hud-money { order: 0; height: auto; padding: 0 14px; font-size: calc(17px * var(--ts, 1)); }
  .hud-strikes { order: 1; height: auto; padding: 0 12px; border-left: 1px solid var(--hud-line); }
  .hud-pause { order: 2; width: 50px; height: 50px; border-left: 1px solid var(--hud-line); border-radius: 0 16px 16px 0 !important; }
  .hud-pause:hover { background: rgba(255,255,255,.08); }
  .hud-delta { right: auto; left: 50%; top: calc(100% + 8px); }
  @keyframes hudDelta { 0% { opacity: 0; transform: translate(-50%, -6px); } 15% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 6px); } }
  .hud-root.lefty .hud-delta { left: 50%; }
  .hud-toasts { width: min(440px, calc(100% - 320px)); bottom: max(18px, env(safe-area-inset-bottom)); }
  .hud-toast { font-size: calc(14px * var(--ts, 1)); }
}