/* SABOTAGE economy UI: buy menu (B), money / buy-phase widget, money toasts, round history.
   Same look as the PawStrike menus: navy panels, rounded cards, orange (Dogs) / blue (Cats) accents. */

/* ---------- buy menu ---------- */
.sab-buy { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
  background: rgba(10, 8, 30, 0.55); backdrop-filter: blur(3px); font-family: 'Rajdhani', 'Bahnschrift', 'Segoe UI', sans-serif; color: #f6f4ff; }
.sab-buy.hidden { display: none; }
.sb-panel { --acc: #ff8a1f; --acc2: #ffb21c; display: grid; grid-template-columns: 170px minmax(0, 1fr) 250px; gap: 14px; width: min(1180px, 100%); max-height: 100%;
  box-sizing: border-box; padding: 18px; border-radius: 20px; background: rgba(15, 20, 45, 0.95); border: 1px solid rgba(130, 140, 255, 0.28);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.sb-panel.team-cats { --acc: #3d8bff; --acc2: #7fd0ff; }
.sb-cats { display: flex; flex-direction: column; gap: 6px; }
.sb-cats button { text-align: left; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(130, 140, 255, 0.22); background: rgba(8, 10, 28, 0.7);
  color: #aeb0d6; font: 700 17px 'Rajdhani', sans-serif; letter-spacing: 1.5px; cursor: pointer; }
.sb-cats button:hover { color: #fff; border-color: rgba(160, 150, 255, 0.5); }
.sb-cats button.on { color: #160c00; background: linear-gradient(180deg, var(--acc2), var(--acc)); border-color: transparent; }
.sb-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.sb-main header { display: flex; align-items: center; gap: 14px; }
.sb-main h2 { margin: 0; font: 400 34px 'Anton', 'Impact', sans-serif; letter-spacing: 3px;
  background: linear-gradient(90deg, #ffb21c, #ff6a3d 50%, #9945ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-phase { font: 700 16px 'Rajdhani', sans-serif; letter-spacing: 1.5px; padding: 4px 12px; border-radius: 999px; }
.sb-phase.open { color: #0b2a17; background: #3be38a; }
.sb-phase.locked { color: #ffd0d6; background: rgba(255, 77, 94, 0.25); border: 1px solid #ff5a6e; }
.sb-x { margin-left: auto; width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(160, 150, 255, 0.35); background: rgba(255, 255, 255, 0.05); color: #fff; font-size: 18px; cursor: pointer; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; overflow: auto; padding: 2px; }
.sb-card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: rgba(8, 10, 28, 0.75); border: 1.5px solid rgba(130, 140, 255, 0.22); }
.sb-card:hover { border-color: var(--acc); }
.sb-card.is-owned { border-color: rgba(59, 227, 138, 0.55); }
.sb-art { height: 92px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.08), transparent 70%); }
.sb-art img { max-width: 100%; max-height: 88px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }
.sb-ico { font-size: 46px; font-style: normal; }
.sb-name { font: 700 18px 'Rajdhani', sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.sb-price { font: 700 20px 'Rajdhani', sans-serif; color: var(--acc2); }
.sb-card.is-poor .sb-price { color: #ff8796; }
.sb-stats { display: grid; grid-template-columns: 72px 1fr; gap: 4px 8px; align-items: center; font: 600 12px 'Inter', sans-serif; color: #9a9cc4; }
.sb-stats i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.sb-stats b { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.sb-desc { margin: 0; flex: 1; font: 500 13px 'Inter', sans-serif; color: #9a9cc4; }
.sb-btn { margin-top: auto; height: 38px; border-radius: 11px; border: none; cursor: pointer; font: 700 16px 'Rajdhani', sans-serif; letter-spacing: 1.5px;
  color: #160c00; background: linear-gradient(180deg, var(--acc2), var(--acc)); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.sb-btn:hover:not(:disabled) { filter: brightness(1.1); }
.sb-btn.poor { color: #ffd0d6; background: rgba(255, 77, 94, 0.22); box-shadow: none; }
.sb-btn.owned { color: #0b2a17; background: #3be38a; box-shadow: none; }
.sb-btn:disabled { cursor: default; opacity: 0.75; }
.sb-btn:disabled:not(.owned) { color: #aeb0d6; background: rgba(255, 255, 255, 0.07); box-shadow: none; }
.sb-feedback { min-height: 22px; text-align: center; font: 600 14px 'Inter', sans-serif; color: #8d90b8; }
.sb-feedback.ok { color: #3be38a; } .sb-feedback.bad { color: #ff8796; }
.sb-side { display: flex; flex-direction: column; gap: 12px; }
.sb-money { padding: 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(59, 227, 138, 0.16), rgba(8, 10, 28, 0.6)); border: 1px solid rgba(59, 227, 138, 0.45); }
.sb-money span { display: block; font: 700 13px 'Rajdhani', sans-serif; letter-spacing: 2px; color: #9fe9c2; }
.sb-money b { font: 700 38px 'Rajdhani', sans-serif; color: #3be38a; }
.sb-loadout { padding: 12px 14px; border-radius: 16px; background: rgba(8, 10, 28, 0.7); border: 1px solid rgba(130, 140, 255, 0.22); display: flex; flex-direction: column; gap: 7px; }
.sb-loadout h3 { margin: 0 0 2px; font: 700 15px 'Rajdhani', sans-serif; letter-spacing: 2px; color: #aeb0d6; }
.sb-loadout div { display: flex; justify-content: space-between; gap: 8px; font: 600 14px 'Inter', sans-serif; }
.sb-loadout span { color: #8d90b8; font: 700 13px 'Rajdhani', sans-serif; letter-spacing: 1.2px; }
.sb-loadout b { text-align: right; }
.sb-note { margin: 0; font: 600 13px 'Inter', sans-serif; color: #8d90b8; }
@media (max-width: 900px) { .sb-panel { grid-template-columns: 1fr; overflow: auto; } .sb-cats { flex-direction: row; flex-wrap: wrap; } }

/* ---------- money / buy phase widget (above the health panel) ---------- */
.sab-money { position: absolute; left: 18px; bottom: 130px; zoom: calc(var(--ui) * var(--ui-k)); display: flex; flex-direction: column; gap: 4px; padding: 8px 14px;
  border-radius: 14px; background: rgba(15, 20, 45, 0.82); border: 1px solid rgba(59, 227, 138, 0.4); font-family: 'Rajdhani', sans-serif; pointer-events: none; }
.sab-money.hidden { display: none; }
.sab-money .sm-money span { font: 700 13px 'Rajdhani', sans-serif; letter-spacing: 2px; color: #9fe9c2; margin-right: 8px; }
.sab-money .sm-money b { font: 700 26px 'Rajdhani', sans-serif; color: #3be38a; }
.sab-money.buying { border-color: #ffb21c; box-shadow: 0 0 24px rgba(255, 178, 28, 0.25); }
.sab-money .sm-phase { font: 700 16px 'Rajdhani', sans-serif; letter-spacing: 2px; color: #ffb21c; }
.sab-money .sm-phase b { color: #fff; margin-left: 6px; }
.sab-money .sm-key { font: 600 13px 'Inter', sans-serif; color: #aeb0d6; }
.sab-money kbd, .sab-toast kbd { font: 700 12px 'Inter', sans-serif; padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); }

/* ---------- money toasts ---------- */
.sab-toasts { position: absolute; left: 18px; bottom: 215px; zoom: calc(var(--ui) * var(--ui-k)); display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.sab-toast { font: 700 17px 'Rajdhani', sans-serif; letter-spacing: 0.5px; padding: 3px 10px; border-radius: 8px; background: rgba(15, 20, 45, 0.82); animation: sabToast 2.6s ease forwards; }
.sab-toast.good { color: #3be38a; } .sab-toast.bad { color: #ff8796; } .sab-toast.buy { color: #ffd25a; }
@keyframes sabToast { 0% { opacity: 0; transform: translateX(-10px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- round history dots under the timer ---------- */
.sb-history { display: flex; justify-content: center; gap: 3px; margin-top: 4px; min-height: 0; }
.sb-history:empty { display: none; }
.sb-history i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.sb-history i.cats { background: #3d8bff; } .sb-history i.dogs { background: #ff8a1f; }
.sb-history b.half { width: 2px; height: 10px; margin: -1px 3px 0; background: rgba(255, 255, 255, 0.55); border-radius: 1px; }

/* ---------- empty weapon slot, scoreboard money, mode tags ---------- */
.hb-slot.empty { opacity: 0.45; }
.scoreboard td.money { color: #3be38a; }
.lb-mode-tags { display: block; margin-top: 2px; font: 700 12px 'Rajdhani', sans-serif; font-style: normal; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }