/* UI refresh, mobile first. Loaded last, so it only overrides.
   - lighter, warmer glass so the shop shows through every panel
   - phones: one slim top bar (money | clock | buttons), tips folded to one line, at most two toasts, nothing in the middle of the view
   - focus view (eye button, html.hud-min): only money, clock, the action prompt and the controls stay on screen
   - styles for the Business tab and the shelf type picker */

:root {
  --glass: rgba(14, 18, 16, .56);
  --glass-strong: rgba(12, 16, 14, .8);
  --glass-line: rgba(255, 255, 255, .12);
  --blur: blur(12px) saturate(1.5);
  --sh-glass: 0 6px 18px -6px rgba(0, 0, 0, .45);
}
.glass { border-radius: 18px; }
.hud-chip, .coach-pill, .rating-box, .power-ind { background: var(--glass); }
.money-box { background: linear-gradient(135deg, rgba(20, 60, 40, .62), rgba(14, 18, 16, .56)); box-shadow: inset 0 0 0 1px rgba(114, 226, 173, .18), var(--sh-glass); }
.hud-btns .manage-btn { box-shadow: 0 6px 18px -6px rgba(20, 173, 110, .55); }
.toast { border-radius: 14px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.hud-btns .focus-btn .ico-svg { opacity: .85; }
html.hud-min .hud-btns .focus-btn { box-shadow: inset 0 0 0 1.5px var(--accent-300), var(--sh-glass); color: var(--accent-200); }

/* ---- focus view: hide the extras everywhere */
html.hud-min .hud-ml, html.hud-min .chip-row, html.hud-min .ev-pill, html.hud-min .ev-list, html.hud-min .rating-box, html.hud-min .power-ind,
html.hud-min .coach:not(.tut), html.hud-min .coach-pill, html.hud-min .money-box .delta, html.hud-min .lvl-box .store { display: none !important; }
html.hud-min #toasts .toast:not(.alert):not(.bad) { opacity: .9; }
html.hud-min #toasts .toast:nth-last-child(n+2) { display: none; }

/* ---- phones in portrait: a single slim top bar */
@media (max-width: 760px) {
  #hud { --edge: 6px; }
  .money-box { flex-direction: row; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border-radius: 999px; }
  .money-box .money-row { gap: 6px; }
  .money-box .coin { width: 22px; height: 22px; font-size: 11px; }
  .money-box .amt { font-size: 1rem; }
  .lvl-box { gap: 6px; padding-left: 0; }
  .xp { flex-basis: 34px; }
  .hud-tl { max-width: calc(100vw - var(--sa-l) - var(--sa-r) - 190px); }
  .money-box { max-width: 100%; }
  .money-box .amt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .money-box .money-row { min-width: 0; }
  .xp, .money-box .lvl-box { display: none; }
  .hud-tr .acc-chip { display: none; }   /* account: Pause menu */
  .hud-btns { gap: 4px; }
  .hud-btns .btn, .hud-btns .btn.icon { min-height: 38px; height: 38px; }
  .hud-btns .btn.icon, .hud-btns .manage-btn { width: 38px; }
  .hud-tc { top: calc(var(--sa-t) + 52px); }
  .clock-row { gap: 4px; flex-wrap: nowrap; }
  .clock-box { height: 34px; padding: 0 4px 0 10px; gap: 8px; }
  .clock-box .day { display: none; }
  .clock-box .time { font-size: .95rem; min-width: 4.4em; }
  .speed-btns { height: 34px; padding: 2px; }
  .speed-btns button:not(.on) { display: none; }   /* tap the shown speed to change it */
  .hud-tc .open-btn { min-height: 34px; padding: 0 12px; }
  .open-btn .ob-long { display: none; } .open-btn .ob-short { display: inline; }
  .phase-badge.prep { display: none; }
  .coach:not(.tut) { min-height: 0; padding: 3px 4px 3px 10px; font-size: var(--fs-12); }
  .coach:not(.tut) .coach-text { -webkit-line-clamp: 1; }
  .coach.tut { padding: 8px 10px 10px; gap: 6px; }
  .coach.tut .coach-text { font-size: var(--fs-13); -webkit-line-clamp: 3; }
  #toasts, html.is-touch.is-phone #toasts { top: calc(var(--sa-t) + 160px); bottom: auto; right: 50%; transform: translateX(50%); width: min(300px, calc(100vw - 32px)); align-items: center; gap: 4px; }
  .toast { padding: 6px 10px; font-size: var(--fs-12); }
  #toasts .toast:nth-last-child(n+3) { display: none; }   /* never a wall of messages */
}
html.is-touch .hud-btns .btn.icon { min-width: 38px; }
@media (max-width: 760px) { html.is-touch .hud-bl { top: calc(var(--sa-t) + 128px); } }
@media (max-width: 760px) { html.is-touch #checkout { top: calc(var(--sa-t) + 100px); max-height: calc(58% - 104px); } }

/* ---- phones on their side: toasts tucked at the top-left, two at most */
@media (max-height: 520px) {
  #toasts { top: calc(var(--sa-t) + 56px); right: auto; left: calc(var(--sa-l) + 8px); align-items: flex-start; width: min(260px, 34vw); gap: 4px; }
  .toast { padding: 5px 9px; font-size: var(--fs-12); }
  #toasts .toast:nth-last-child(n+3) { display: none; }
  .hud-btns .btn, .hud-btns .btn.icon { min-height: 38px; height: 38px; }
  .hud-btns .btn.icon, .hud-btns .manage-btn { width: 38px; }
}

/* ---- Manage -> Business */
.biz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.biz-stat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.biz-stat > .ico-svg { color: var(--accent-300); flex: none; }
.biz-stat small { display: block; color: var(--text-3); font-size: var(--fs-11); }
.biz-stat b { font-size: var(--fs-15); font-variant-numeric: tabular-nums; }
.up-card .seg { display: flex; gap: 4px; margin: 6px 0; flex-wrap: wrap; }
@media (max-width: 640px) { .biz-stats { grid-template-columns: 1fr 1fr; } }

/* ---- shelf type picker (buy dialog + refit) */
.variant-pick { display: grid; gap: 8px; margin-top: 10px; }
.variant { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'n p' 'd p'; align-items: center; gap: 2px 10px; text-align: left; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px;
  background: var(--surface-2); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; min-height: 52px; }
.variant b { grid-area: n; font-size: var(--fs-14); }
.variant small { grid-area: d; color: var(--text-3); font-size: var(--fs-12); }
.variant .vp { grid-area: p; font-size: var(--fs-12); font-weight: 650; color: var(--gold-300); white-space: nowrap; }
.variant.on { box-shadow: inset 0 0 0 2px var(--accent-300); background: var(--accent-soft); }
.variant.locked, .variant:disabled { opacity: .5; cursor: default; }
.variant:not(:disabled):hover { background: var(--surface-3); }

/* co-op mic button (core/coop.js) */
.hud-btns .mic-btn { color: var(--accent-200); box-shadow: inset 0 0 0 1.5px var(--accent-300), var(--sh-glass); }
.hud-btns .mic-btn.muted { color: var(--red-300); box-shadow: inset 0 0 0 1.5px var(--red-400), var(--sh-glass); opacity: .85; }

/* delivery countdown under the clock (ui/hud.js) */
.deliv-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-12); font-weight: 600; font-variant-numeric: tabular-nums; }
.deliv-pill .ico-svg { color: var(--gold-300); }
.deliv-pill[hidden] { display: none; }
@media (max-width: 760px) { .deliv-pill { min-height: 24px; font-size: var(--fs-11); padding: 0 10px; } }

/* mall staff + stock (Manage -> Business) */
.mall-staff-list { display: grid; gap: 8px; margin-top: 8px; }
.mall-staff { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.mall-staff > div { flex: 1; min-width: 0; } .mall-staff small { display: block; color: var(--text-3); font-size: var(--fs-11); }
.mall-staff > .ico-svg { color: var(--accent-300); flex: none; }
.stock-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; } .stock-row small { white-space: nowrap; color: var(--text-3); }
.stock-bar { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; } .stock-bar i { display: block; height: 100%; border-radius: 6px; }