/* 67BET player screens (miniapp/sports.js): clean, flat and phone-first; full screen on PC/iPad in Telegram.
   One dark ground, cards one step lighter, one blue for buttons and picks. Green only means money won,
   red only means live, amber means paused. */
:root {
  --ps-bg: #0A0C10;
  --ps-panel: #12151B;      /* cards */
  --ps-panel-2: #1A1E26;    /* odds and buttons inside cards */
  --ps-field: #0E1116;      /* inputs and boxes inside sheets */
  --ps-line: #222733;       /* borders of buttons and inputs */
  --ps-edge: #1C2029;       /* borders of cards, dividers */
  --ps-text: #F3F5F9;
  --ps-soft: #C9CFDB;
  --ps-label: #9AA2B4;
  --ps-dim: #8A93A6;
  --ps-blue: #2F6FEB;
  --ps-blue-text: #5B9DFF;
  --ps-blue-soft: #8AB8FF;
  --ps-blue-bg: #13203A;
  --ps-green: #3DD68C;
  --ps-green-bg: #0F2A1F;
  --ps-red: #FF5A5F;
  --ps-red-text: #FF7A7E;
  --ps-red-bg: #2A1416;
  --ps-gold: #F5B83D;
  --ps-amber: #F5C76A;
  --ps-amber-bg: #1C1810;
  --ps-amber-line: #3A2F16;
  --ps-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Telegram full screen: keep clear of Telegram's own buttons at the top */
  --ps-safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --ps-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
}

/* Which layout is on: the new one for players, the old one for /admin */
#ps-shell { display: none; }
body.ps-mode #ps-shell { display: block; }
body.ps-mode #app,
body.ps-mode .mobile-bottom-nav,
body.ps-mode #mobile-floating-slip { display: none !important; }
body.ps-mode { background: var(--ps-bg); padding: 0; font-family: var(--ps-font); -webkit-font-smoothing: antialiased; }
body.ps-mode button, body.ps-mode input, body.ps-mode select, body.ps-mode textarea { font-family: inherit; }
body.ps-sheet-open { overflow: hidden; }

#ps-shell { color: var(--ps-text); min-height: 100vh; font-size: 14px; font-family: var(--ps-font); }
#ps-shell * { box-sizing: border-box; }
#ps-shell button { font-family: inherit; }
.ps-view.hidden, #ps-shell .hidden { display: none !important; }
.ps-ico { display: block; flex: 0 0 auto; }
.ps-inline { display: inline-flex; align-items: center; gap: 6px; }
.ps-muted { color: var(--ps-dim) !important; }

/* ---------- top bar ---------- */
.ps-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 12, 16, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.tg-fullscreen .ps-top { padding-top: var(--ps-safe-top); }
.ps-top__in {
  max-width: 1280px;
  margin: 0 auto;
  height: 60px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.ps-logo {
  background: none;
  border: 0;
  padding: 0;
  font-size: 23px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.04em;
  color: var(--ps-text);
  cursor: pointer;
}
.ps-logo span { color: var(--ps-blue-text); }
.ps-tabs-top { display: none; gap: 4px; flex: 1; }
.ps-ttab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  color: var(--ps-dim);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.ps-ttab:hover { color: var(--ps-text); background: var(--ps-panel); }
.ps-ttab.active { color: var(--ps-text); background: var(--ps-panel-2); }
.ps-ttab.active .ps-ttab__icon { color: var(--ps-blue-text); }
.ps-ttab__icon, .ps-btab__icon { display: inline-flex; }
.ps-top__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ps-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--ps-line);
  background: var(--ps-panel);
  color: var(--ps-soft);
  cursor: pointer;
}
.ps-icon-btn:hover { color: var(--ps-text); border-color: #333A48; }
.ps-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ps-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--ps-bg);
}
/* Balance with the deposit "+" right next to it */
.ps-wallet-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 4px 0 12px;
  border-radius: 12px;
  border: 1px solid var(--ps-line);
  background: var(--ps-panel);
}
.ps-balance {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ps-text);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}
.ps-deposit {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--ps-blue);
  color: #fff;
  cursor: pointer;
}
.ps-deposit:active { transform: scale(0.94); }
.ps-signin { height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--ps-blue); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }

.ps-announce {
  margin: 4px max(16px, calc((100% - 1248px) / 2)) 0;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  background: var(--ps-blue-bg);
  border: 1px solid #1F3360;
  border-radius: 12px;
  font-size: 13px;
  color: #C7DAFF;
}
.ps-announce__txt { display: inline-flex; align-items: flex-start; gap: 8px; }
.ps-announce__txt .ps-ico { margin-top: 1px; color: var(--ps-blue-soft); }
.ps-announce button { display: inline-flex; padding: 4px; background: none; border: 0; color: var(--ps-dim); cursor: pointer; }
/* Maintenance (MT) notice: same place as the announcement, amber so it stands out */
.ps-announce.is-mt { background: var(--ps-amber-bg); border-color: var(--ps-amber-line); color: var(--ps-amber); }
.ps-announce.is-mt .ps-ico { color: var(--ps-amber); }

/* ---------- layout ---------- */
.ps-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px calc(150px + var(--ps-safe-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.ps-side { display: none; }
.ps-page-title { margin: 8px 0 14px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--ps-text); }

/* ---------- tabs ---------- */
/* Underlined text tabs: All / Live / MLBB on the match list, Active / Won / Lost on My Bets, Wallet history */
.ps-tabs {
  display: flex;
  gap: 22px;
  margin: 0 -16px;
  padding: 0 16px;
  border-bottom: 1px solid #1A1E26;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.ps-tabs::-webkit-scrollbar { display: none; }
#ps-mybets .ps-tabs, #ps-wallet .ps-tabs { margin: 0; padding: 0; }
#ps-wallet .ps-tabs { margin-top: 18px; }
.ps-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ps-dim);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ps-tab:hover { color: var(--ps-soft); }
.ps-tab.active { color: var(--ps-text); border-bottom-color: var(--ps-blue-text); }
.ps-tab b {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ps-blue-bg);
  color: var(--ps-blue-soft);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ps-tab b.is-live { background: var(--ps-red-bg); color: var(--ps-red-text); }
/* Main | Map 1 | Map 2 on the match page: one bar, the open one highlighted */
.ps-seg {
  display: flex;
  gap: 2px;
  margin: 4px 0 12px;
  padding: 4px;
  border-radius: 14px;
  background: var(--ps-panel);
  border: 1px solid var(--ps-edge);
  overflow-x: auto;
  scrollbar-width: none;
}
.ps-seg::-webkit-scrollbar { display: none; }
.ps-seg__btn {
  flex: 1 0 auto;
  height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ps-label);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  cursor: pointer;
}
.ps-seg__btn:hover { color: var(--ps-text); }
.ps-seg__btn.active { background: #272C38; color: var(--ps-text); }
.ps-live-dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ps-red);
  box-shadow: 0 0 0 0 rgba(255, 90, 95, 0.55);
  animation: ps-pulse 1.8s infinite;
}
@keyframes ps-pulse { 70% { box-shadow: 0 0 0 6px rgba(255, 90, 95, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 95, 0); } }
.ps-seg__btn .ps-live-dot { width: 6px; height: 6px; }

/* ---------- league tiles (All, MPL PH, MPL MY...) ---------- */
.ps-leagues {
  display: flex;
  gap: 10px;
  margin: 0 -16px;
  padding: 16px 16px 4px;
  overflow-x: auto;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}
.ps-leagues::-webkit-scrollbar { display: none; }
.ps-league {
  flex: none;
  width: 68px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--ps-label);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ps-league__tile {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  border: 1px solid var(--ps-edge);
  background: var(--ps-panel);
  color: var(--ps-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.ps-league__tile .ps-logo-img { width: 36px; height: 36px; }
.ps-league:hover .ps-league__tile { border-color: #333A48; }
.ps-league:active .ps-league__tile { transform: scale(0.95); }
.ps-league.active { color: var(--ps-text); }
.ps-league.active .ps-league__tile { border: 2px solid var(--ps-blue); background: var(--ps-blue-bg); color: var(--ps-blue-soft); }
.ps-league__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Red dot: this league has a match live right now */
.ps-league__live { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--ps-red); box-shadow: 0 0 0 3px var(--ps-bg); }

/* ---------- match list ---------- */
.ps-group { margin-top: 20px; }
.ps-group__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ps-text); }
.ps-group__title .ps-logo-img { width: 24px; height: 24px; }
.ps-group__title .ps-live-dot { width: 8px; height: 8px; margin: 0 2px; }
.ps-group__title small { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ps-dim); white-space: nowrap; }
.ps-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* Results: one date line per day ("Sun, Oct 18"), with the day's matches under it */
.ps-day { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; font-size: 12px; font-weight: 600; color: var(--ps-dim); }
.ps-day::after { content: ''; flex: 1; height: 1px; background: var(--ps-edge); }
.ps-group__title + .ps-day { margin-top: 4px; }

.ps-match {
  background: var(--ps-panel);
  border: 1px solid var(--ps-edge);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.ps-match:hover { border-color: #2A3040; }
.ps-match:focus-visible { outline: 2px solid var(--ps-blue-text); outline-offset: 2px; }
.ps-match__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; font-size: 12px; font-weight: 500; color: var(--ps-dim); }
.ps-when { display: inline-flex; align-items: center; gap: 6px; color: var(--ps-soft); font-weight: 600; white-space: nowrap; }
.ps-match__stage { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.ps-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.ps-pill--live { background: var(--ps-red-bg); color: var(--ps-red-text); }
.ps-pill--live .ps-live-dot { width: 6px; height: 6px; }
/* Team 1 on the left, Team 2 on the right, the start time or the score big in the middle */
.ps-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 14px 0; }
.ps-vs__team { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.ps-vs__name { max-width: 100%; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ps-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ps-vs.is-final .ps-vs__team:not(.is-lead) .ps-vs__name { color: var(--ps-dim); }
.ps-vs__team .ps-rtag { margin: 0; }
.ps-vs__mid { min-width: 80px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.ps-vs__score { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--ps-text); font-variant-numeric: tabular-nums; }
.ps-vs__score i, .ps-hero__score i { font-style: normal; color: #4A5163; margin: 0 7px; }
.ps-vs__score .is-dim, .ps-hero__score .is-dim { color: var(--ps-dim); }
.ps-vs__time { font-size: 22px; font-weight: 800; color: var(--ps-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-ampm { margin-left: 3px; font-size: 0.5em; font-weight: 700; letter-spacing: 0.04em; color: var(--ps-soft); }
.ps-vs__mid small { font-size: 11px; font-weight: 500; color: var(--ps-dim); }

.ps-logo-img { width: 28px; height: 28px; flex: 0 0 auto; object-fit: contain; border-radius: 6px; background: transparent; }
.ps-logo-img.is-sm { width: 22px; height: 22px; }
.ps-logo-img.is-md { width: 44px; height: 44px; }
.ps-logo-img.is-lg { width: 56px; height: 56px; }
/* No logo: the team's short name on a plain tile */
.ps-logo-txt { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--ps-panel-2); color: var(--ps-soft); font-size: 11px; font-weight: 800; }
.ps-logo-img.is-sm.ps-logo-txt { border-radius: 6px; font-size: 8px; }
.ps-logo-img.is-lg.ps-logo-txt { border-radius: 16px; font-size: 16px; }

.ps-odds { display: grid; gap: 8px; }
.ps-odds--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-odds--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-odd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: var(--ps-panel-2);
  color: var(--ps-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}
.ps-odd:hover:not(:disabled) { background: #222733; }
.ps-odd:active:not(:disabled) { transform: scale(0.97); }
.ps-odd__label { min-width: 0; font-size: 13px; font-weight: 600; color: var(--ps-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-odd__val { flex: 0 0 auto; font-size: 15px; font-weight: 700; color: var(--ps-text); font-variant-numeric: tabular-nums; }
.ps-odd__val .ps-ico { color: var(--ps-dim); }
.ps-odd.is-picked { background: var(--ps-blue); }
.ps-odd.is-picked:hover { background: #3B7BF0; }
.ps-odd.is-picked .ps-odd__label { color: #DCE7FF; }
.ps-odd.is-picked .ps-odd__val { color: #fff; }
.ps-odd.is-locked { cursor: not-allowed; opacity: 0.55; }
.ps-odd.is-won { background: var(--ps-green-bg); box-shadow: inset 0 0 0 1px rgba(61, 214, 140, 0.5); opacity: 1; }
.ps-odd.is-won .ps-odd__val { color: var(--ps-green); }
.ps-odds--3 .ps-odd { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px; text-align: center; }
.ps-odds--3 .ps-odd__label { max-width: 100%; font-size: 12px; }
.ps-closed { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px; border-radius: 11px; background: var(--ps-panel-2); color: var(--ps-dim); font-size: 13px; font-weight: 600; }
.ps-match__foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ps-edge); font-size: 13px; font-weight: 600; }
.ps-match__watch { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ps-blue-soft); font: inherit; cursor: pointer; }
.ps-more { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: var(--ps-dim); }

/* ---------- match page ---------- */
.ps-mp-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.ps-back {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--ps-line);
  background: var(--ps-panel);
  color: var(--ps-text);
  cursor: pointer;
}
.ps-back:hover { border-color: #333A48; }
.ps-mp-head .ps-logo-img { width: 26px; height: 26px; }
.ps-mp-head__txt { min-width: 0; display: flex; flex-direction: column; }
.ps-mp-head__txt b { font-size: 14px; font-weight: 700; color: var(--ps-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-mp-head__txt span { font-size: 12px; color: var(--ps-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-hero { margin-bottom: 12px; padding: 16px; border-radius: 18px; background: var(--ps-panel); border: 1px solid var(--ps-edge); }
.ps-hero__badge { display: flex; justify-content: center; margin-bottom: 14px; }
.ps-hero__badge .ps-pill { height: 24px; padding: 0 10px; }
.ps-hero__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.ps-hero__team { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--ps-text); }
.ps-hero__team span { line-height: 1.25; overflow-wrap: anywhere; }
.ps-hero__team .ps-rtag { margin: 0; }
.ps-hero__mid { min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ps-hero__score { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; color: var(--ps-text); font-variant-numeric: tabular-nums; }
.ps-hero__score i { margin: 0 8px; }
.ps-hero__time { font-size: 26px; font-weight: 800; color: var(--ps-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-hero__sub { font-size: 12px; color: var(--ps-dim); }
.ps-hero__info { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: 12.5px; color: var(--ps-dim); }
.ps-watch {
  width: 100%;
  height: 44px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: var(--ps-panel-2);
  color: var(--ps-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ps-watch:hover { background: #222733; }
.ps-watch .ps-ico { color: var(--ps-blue-text); }
.ps-notice { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--ps-amber-bg); border: 1px solid var(--ps-amber-line); color: var(--ps-amber); font-size: 13px; font-weight: 500; }
.ps-market { margin-bottom: 10px; padding: 14px; border-radius: 16px; background: var(--ps-panel); border: 1px solid var(--ps-edge); }
.ps-market h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--ps-text); }
.ps-market__grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 8px; }
/* Long bet names wrap instead of being cut off on the match page */
.ps-market__grid .ps-odd__label { white-space: normal; line-height: 1.25; overflow: visible; }
.ps-market__grid[style*="--cols:3"] .ps-odd { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 4px; text-align: center; }
.ps-tag { margin-left: auto; padding: 3px 8px; border-radius: 6px; background: var(--ps-amber-bg); color: var(--ps-amber); font-size: 11px; font-weight: 700; }
.ps-settled { margin-bottom: 10px; border-radius: 16px; background: var(--ps-panel); border: 1px solid var(--ps-edge); overflow: hidden; }
.ps-settled summary { display: flex; align-items: center; justify-content: space-between; padding: 14px; font-size: 14px; font-weight: 700; color: var(--ps-text); list-style: none; cursor: pointer; }
.ps-settled summary::-webkit-details-marker { display: none; }
.ps-settled summary::after { content: ''; width: 7px; height: 7px; margin: -4px 4px 0; border-right: 2px solid var(--ps-dim); border-bottom: 2px solid var(--ps-dim); transform: rotate(45deg); transition: transform 0.15s ease; }
.ps-settled[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.ps-settled__row { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--ps-edge); font-size: 13px; color: var(--ps-label); }
.ps-settled__row b { color: var(--ps-green); text-align: right; font-weight: 700; }

/* Live stream: watch only (a cover takes every tap), our own sound and full screen buttons */
.ps-stream { position: relative; padding-top: 56.25%; margin-bottom: 12px; border-radius: 16px; overflow: hidden; background: #000; }
.ps-stream iframe { position: absolute; left: 0; top: -60px; width: 100%; height: calc(100% + 120px); border: 0; pointer-events: none; }
/* Takes every tap so nobody can pause, seek or open YouTube from the stream */
.ps-stream__cover { position: absolute; inset: 0; z-index: 1; background: transparent; }
.ps-stream__live { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 7px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; pointer-events: none; }
.ps-stream__sound, .ps-stream__full { position: absolute; bottom: 10px; z-index: 2; padding: 7px 12px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ps-stream__sound { right: 10px; }
.ps-stream__full { left: 10px; }
.ps-stream__sound:active, .ps-stream__full:active { transform: scale(0.97); }
/* Full screen: the box covers the whole screen; upright phones see the video turned sideways */
.ps-stream.is-full { position: fixed; inset: 0; z-index: 10000; margin: 0; padding-top: 0; border-radius: 0; width: 100vw; height: 100vh; height: 100dvh; }
.ps-stream.is-full.is-rotate { inset: auto; top: 50%; left: 50%; width: 100vh; width: 100dvh; height: 100vw; transform: translate(-50%, -50%) rotate(90deg); }
.ps-stream.is-full { container-type: size; }
/* The 16:9 picture as big as the screen allows; YouTube's bars (60 px above and below it) stay outside */
.ps-stream.is-full iframe { left: 50%; top: 50%; width: min(100cqw, 100cqh * 16 / 9); height: calc(min(100cqh, 100cqw * 9 / 16) + 120px); transform: translate(-50%, -50%); }
.ps-stream.is-full .ps-stream__sound, .ps-stream.is-full .ps-stream__full { bottom: max(14px, env(safe-area-inset-bottom)); }
.ps-stream.is-full .ps-stream__live { top: max(14px, env(safe-area-inset-top)); }
body.ps-stream-open { overflow: hidden; }

/* Win / Lost / Draw tags on finished matches */
.ps-rtag { flex: none; margin-left: 6px; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; line-height: 1.4; }
.ps-rtag--win { background: var(--ps-green-bg); color: var(--ps-green); }
.ps-rtag--lost { background: var(--ps-red-bg); color: var(--ps-red-text); }
.ps-rtag--draw { background: var(--ps-panel-2); color: var(--ps-soft); }

/* ---------- bet slip ---------- */
.ps-slip { display: flex; flex-direction: column; gap: 12px; }
.ps-slip__head { display: flex; justify-content: space-between; align-items: center; min-height: 40px; }
.ps-slip__head strong { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; color: var(--ps-text); }
.ps-slip__head > span { display: flex; align-items: center; gap: 8px; }
.ps-slip__head .ps-icon-btn { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--ps-panel-2); }
.ps-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--ps-blue); color: #fff; font-style: normal; font-size: 12px; font-weight: 800; }
.ps-link { padding: 6px 4px; border: 0; background: none; color: var(--ps-label); font-size: 14px; font-weight: 600; cursor: pointer; }
.ps-link:hover { color: var(--ps-text); }
.ps-slip__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 10px 8px; text-align: center; color: var(--ps-dim); }
.ps-slip__empty-icon { width: 56px; height: 56px; margin-bottom: 4px; border-radius: 16px; background: var(--ps-panel-2); color: var(--ps-dim); display: flex; align-items: center; justify-content: center; }
.ps-slip__empty strong { color: var(--ps-text); font-size: 16px; }
.ps-slip__empty p { margin: 0; font-size: 13.5px; }
.ps-slip__combo { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px; border-radius: 10px; background: var(--ps-blue-bg); color: var(--ps-blue-soft); font-size: 13px; }
.ps-slip__combo b { font-weight: 700; }
.ps-slip__picks { display: flex; flex-direction: column; gap: 8px; }
.ps-pick { position: relative; padding: 12px 44px 12px 14px; border-radius: 12px; background: var(--ps-panel-2); }
.ps-pick__main { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15px; color: var(--ps-text); }
.ps-pick__main b { font-weight: 700; }
.ps-pick__odd { font-weight: 700; color: var(--ps-text); font-variant-numeric: tabular-nums; }
.ps-pick__sub { margin-top: 3px; font-size: 12px; color: var(--ps-dim); }
.ps-pick__x { position: absolute; top: 50%; right: 6px; width: 32px; height: 32px; margin-top: -16px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #6F7890; cursor: pointer; }
.ps-pick__x:hover { background: rgba(255, 255, 255, 0.06); color: var(--ps-text); }
.ps-stake { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ps-label); }
.ps-stake__box { display: flex; align-items: center; gap: 6px; height: 54px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--ps-line); background: var(--ps-field); }
.ps-stake__box:focus-within { border-color: var(--ps-blue); }
.ps-stake__box i { font-style: normal; font-size: 20px; font-weight: 700; color: var(--ps-dim); }
.ps-stake__box input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: var(--ps-text); font-family: inherit; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ps-quick button { height: 40px; border-radius: 10px; border: 1px solid var(--ps-line); background: var(--ps-panel-2); color: #D5DAE4; font-size: 14px; font-weight: 600; cursor: pointer; }
.ps-quick button.is-on { border-color: var(--ps-blue); background: var(--ps-blue-bg); color: var(--ps-blue-soft); }
.ps-quick button:active { transform: scale(0.96); }
.ps-sum { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--ps-field); }
.ps-sum div { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--ps-label); }
.ps-sum b { color: var(--ps-text); font-variant-numeric: tabular-nums; }
.ps-win { color: var(--ps-green) !important; }
.ps-sum .ps-win { font-size: 20px; font-weight: 800; }
.ps-place { width: 100%; min-height: 54px; border: 0; border-radius: 14px; background: var(--ps-blue); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.ps-place:hover:not(:disabled) { background: #3B7BF0; }
.ps-place:active:not(:disabled) { transform: scale(0.99); }
.ps-place:disabled { background: #262B36; color: var(--ps-dim); cursor: not-allowed; }
.ps-place.is-deposit { background: var(--ps-gold); color: #2B1D00; }
.ps-slip__hint { margin-top: -2px; text-align: center; font-size: 12px; color: var(--ps-dim); }
.ps-slip__foot { display: flex; justify-content: center; gap: 24px; padding-top: 6px; border-top: 1px solid var(--ps-edge); }
.ps-slip__foot .ps-link { height: 40px; display: inline-flex; align-items: center; gap: 7px; color: var(--ps-soft); font-size: 13px; }

/* Tip code box */
.ps-tipform { display: flex; flex-direction: column; gap: 8px; }
.ps-tipform--card { padding: 14px; border-radius: 14px; border: 1px dashed #333A48; }
.ps-tipform__title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ps-text); }
.ps-tipform small { margin-top: -4px; font-size: 12.5px; color: var(--ps-dim); }
.ps-tipform__row { display: flex; gap: 8px; }
.ps-tipform__row input { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--ps-line); background: var(--ps-field); color: var(--ps-text); font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; outline: none; }
.ps-tipform__row input:focus { border-color: var(--ps-blue); }
.ps-tipform__row input::placeholder { text-transform: none; letter-spacing: 0; color: #6F7890; font-weight: 500; }
.ps-tipform__row .ps-btn { height: 46px; }

/* Floating "Bet slip" bar above the bottom bar once there are picks */
.ps-slipbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(76px + var(--ps-safe-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: var(--ps-blue);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  animation: ps-rise 0.25s ease;
}
@keyframes ps-rise { from { transform: translateY(16px); opacity: 0; } }
.ps-slipbar__count { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #fff; color: var(--ps-blue); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ps-slipbar__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.ps-slipbar__txt b { font-size: 14px; font-weight: 700; }
.ps-slipbar__txt small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; color: #DCE7FF; }
.ps-slipbar__go { font-size: 14px; font-weight: 700; }

/* Bottom sheet */
.ps-sheet { position: fixed; inset: 0; z-index: 900; }
.ps-sheet__bg { position: absolute; inset: 0; background: rgba(4, 5, 8, 0.72); animation: ps-fade 0.2s ease; }
.ps-sheet__card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--ps-panel);
  border-top: 1px solid var(--ps-line);
  border-radius: 24px 24px 0 0;
  padding: 8px 16px calc(18px + var(--ps-safe-bottom));
  animation: ps-sheet-up 0.28s cubic-bezier(.2, .8, .2, 1);
}
.ps-sheet__card::before { content: ''; display: block; width: 38px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: #333A48; }
@keyframes ps-sheet-up { from { transform: translateY(100%); } }
@keyframes ps-fade { from { opacity: 0; } }

/* Bottom bar on phones: Sports · Casino · [Bet slip] · My Bets · Wallet */
.ps-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  padding: 0 6px var(--ps-safe-bottom);
  background: rgba(13, 16, 21, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid #1A1E26;
}
.ps-btab {
  position: relative;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ps-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.ps-btab.active { color: var(--ps-text); }
.ps-btab.active .ps-btab__icon { color: var(--ps-blue-text); }
.ps-btab .ps-badge { position: absolute; top: 6px; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; background: var(--ps-red); box-shadow: 0 0 0 2px #0D1015; }
.ps-ttab .ps-badge { position: absolute; top: 0; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10.5px; background: var(--ps-red); }
.ps-btab--slip { gap: 3px; }
.ps-slipfab { position: relative; width: 46px; height: 34px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ps-blue); color: #fff; transition: transform 0.15s ease; }
.ps-btab--slip:active .ps-slipfab { transform: scale(0.92); }
.ps-btab--slip.active .ps-slipfab { background: #272C38; }
.ps-slipfab__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #fff;
  color: var(--ps-blue);
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #0D1015;
  animation: ps-pop-in 0.25s cubic-bezier(.2, .8, .2, 1.5);
}
@keyframes ps-pop-in { from { transform: scale(0.4); } }

/* ---------- my bets ---------- */
#ps-mybets .ps-grid { margin-top: 16px; }
.ps-ticket { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--ps-panel); border: 1px solid var(--ps-edge); }
.ps-ticket.is-link { cursor: pointer; }
.ps-ticket.is-link:hover { border-color: #2A3040; }
.ps-ticket__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 14px 4px; }
.ps-ticket__type { display: flex; align-items: baseline; gap: 8px; }
.ps-ticket__type b { font-size: 14px; font-weight: 700; color: var(--ps-text); }
.ps-ticket__meta { font-size: 12px; color: var(--ps-dim); }
.ps-status { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ps-status.is-active { background: var(--ps-blue-bg); color: var(--ps-blue-soft); }
.ps-status.is-won { background: var(--ps-green-bg); color: var(--ps-green); }
.ps-status.is-lost { background: var(--ps-red-bg); color: var(--ps-red-text); }
.ps-status.is-void { background: var(--ps-panel-2); color: var(--ps-label); }
.ps-legs { list-style: none; margin: 0; padding: 4px 14px 2px; }
.ps-leg { position: relative; display: flex; gap: 12px; padding: 10px 0; }
/* the line joining the picks of a combo */
.ps-legs.is-combo .ps-leg::before { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: var(--ps-line); }
.ps-legs.is-combo .ps-leg:first-child::before { top: 21px; }
.ps-legs.is-combo .ps-leg:last-child::before { bottom: calc(100% - 21px); }
.ps-leg__mark {
  position: relative;
  z-index: 1;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ps-panel);
  border: 2px solid #3A4150;
  color: var(--ps-bg);
}
.ps-leg.is-active .ps-leg__mark { border-color: var(--ps-blue-text); }
.ps-leg.is-active .ps-leg__mark::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ps-blue-text); }
.ps-leg.is-won .ps-leg__mark { background: var(--ps-green); border-color: var(--ps-green); }
.ps-leg.is-lost .ps-leg__mark { background: var(--ps-red); border-color: var(--ps-red); }
.ps-leg.is-void .ps-leg__mark { background: #3A4150; border-color: #3A4150; color: var(--ps-text); }
.ps-leg__mark .ps-ico { stroke-width: 3.5; }
.ps-leg__body { flex: 1; min-width: 0; }
.ps-leg__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ps-leg__top b { font-size: 14px; font-weight: 600; color: var(--ps-text); }
.ps-leg__odd { font-size: 14px; font-weight: 700; color: var(--ps-text); font-variant-numeric: tabular-nums; }
.ps-leg.is-lost .ps-leg__top b, .ps-leg.is-lost .ps-leg__odd { color: var(--ps-dim); text-decoration: line-through; text-decoration-color: rgba(255, 90, 95, 0.6); }
.ps-leg small { display: block; margin-top: 3px; font-size: 12px; color: var(--ps-dim); }
.ps-ticket__foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 14px; padding: 12px 0; border-top: 1px solid var(--ps-edge); }
.ps-ticket__foot div { display: flex; flex-direction: column; gap: 3px; }
.ps-ticket__foot div:nth-child(2) { align-items: center; }
.ps-ticket__foot div:last-child { align-items: flex-end; }
.ps-ticket__foot small { font-size: 12px; color: var(--ps-dim); }
.ps-ticket__foot b { font-size: 15px; font-weight: 700; color: var(--ps-text); font-variant-numeric: tabular-nums; }
.ps-ticket__ref { display: flex; justify-content: space-between; padding: 10px 14px; background: #0F1217; font-size: 12px; color: var(--ps-dim); }

/* ---------- wallet ---------- */
.ps-balance-card { margin-bottom: 12px; padding: 18px; border-radius: 18px; background: var(--ps-panel); border: 1px solid var(--ps-edge); }
.ps-balance-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ps-balance-card__top small { font-size: 13px; font-weight: 500; color: var(--ps-label); }
.ps-hide-bal { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 0; background: var(--ps-panel-2); color: var(--ps-soft); font-size: 12px; font-weight: 600; cursor: pointer; }
.ps-hide-bal:hover { color: var(--ps-text); }
.ps-balance-card__amount { margin-top: 6px; font-size: 38px; font-weight: 800; letter-spacing: -0.02em; color: var(--ps-text); font-variant-numeric: tabular-nums; }
.ps-id { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px dashed #333A48; background: none; color: var(--ps-label); font-size: 12px; font-weight: 600; cursor: pointer; }
.ps-id:hover { color: var(--ps-text); }
.ps-balance-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.ps-balance-card__actions .ps-btn { height: 48px; }
.ps-admin-link { margin-top: 12px; }
.ps-list { display: flex; flex-direction: column; }
.ps-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #161A21; }
.ps-row__icon { flex: none; width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--ps-panel-2); color: var(--ps-label); }
.ps-row__icon.is-in { background: var(--ps-green-bg); color: var(--ps-green); }
.ps-row__main { flex: 1; min-width: 0; }
.ps-row b { display: block; font-size: 14px; font-weight: 600; color: var(--ps-text); }
.ps-row small { display: block; margin-top: 3px; font-size: 12px; color: var(--ps-dim); overflow-wrap: anywhere; }
.ps-row__end { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ps-row__end b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-row__end .ps-status { height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11px; }
.ps-pos { color: var(--ps-green) !important; }
.ps-neg { color: var(--ps-text) !important; }

/* VIP rank card */
.ps-vip {
  --vip: #D99A62;
  margin: 0 0 12px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--ps-edge);
  background: var(--ps-panel);
}
.ps-vip--silver { --vip: #B9C3D1; }
.ps-vip--gold { --vip: #F5B41E; }
.ps-vip--platinum { --vip: #62C7DD; }
.ps-vip--diamond { --vip: #5B9DFF; }
.ps-vip--obsidian { --vip: #A855F7; }
.ps-vip--unranked { --vip: #7D8597; }
.ps-vip--admin { --vip: #FF3B5C; }
.ps-vip__head { display: flex; align-items: center; gap: 14px; }
.ps-vip__icon { flex: 0 0 auto; }
.ps-vip__icon .rk-icon { display: block; }
.ps-vip__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-vip__who small { font-size: 12px; font-weight: 500; color: var(--ps-label); }
.ps-vip__who strong { font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--ps-text); }
.ps-vip__who span { font-size: 13px; color: var(--ps-label); }
.ps-vip__who span b { color: var(--ps-text); font-weight: 600; }
.ps-vip__bar { height: 8px; margin: 16px 0 8px; border-radius: 4px; background: #1F242E; overflow: hidden; }
.ps-vip__bar i { display: block; height: 100%; min-width: 6px; border-radius: 4px; background: var(--vip); transition: width 0.4s ease; }
.ps-vip__next { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--ps-label); }
.ps-vip__next span:last-child { display: inline-flex; align-items: center; gap: 4px; }
.ps-vip__next b { color: var(--ps-text); font-weight: 600; }
.ps-vip__top { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ps-text); }
.ps-vip__toggle { margin-top: 12px; width: 100%; height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; background: var(--ps-panel-2); color: var(--ps-soft); font-size: 13px; font-weight: 600; cursor: pointer; }
.ps-vip__toggle:hover { color: var(--ps-text); }
.ps-vip__list { margin-top: 10px; display: grid; gap: 6px; }
.ps-vip__rank { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: var(--ps-panel-2); border: 1px solid transparent; }
.ps-vip__rank div { flex: 1; display: flex; flex-direction: column; }
.ps-vip__rank b { font-size: 14px; font-weight: 600; color: var(--ps-text); }
.ps-vip__rank small { font-size: 12px; color: var(--ps-dim); }
.ps-vip__rank > span { font-size: 12px; font-weight: 700; color: var(--ps-dim); }
.ps-vip__rank.is-current { border-color: color-mix(in srgb, var(--vip) 60%, transparent); }
.ps-vip__rank.is-current > span { color: var(--ps-text); }
.ps-vip__rank.is-done > span { color: var(--ps-green); }
.ps-vip__rank.is-locked .rk-icon { filter: grayscale(0.85) brightness(0.75); opacity: 0.75; }

/* Promoter accounts: the notice shown instead of Deposit / Withdraw */
.ps-promo-notice { text-align: center; padding: 8px 4px 0; }
.ps-promo-notice__icon { font-size: 42px; line-height: 1; margin-bottom: 8px; }
.ps-promo-notice strong { display: block; margin-bottom: 6px; font-size: 16px; color: var(--ps-text); }
.ps-promo-notice p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ps-dim); }

/* ---------- shared bits ---------- */
.ps-btn {
  height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  background: var(--ps-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.ps-btn:hover { background: #3B7BF0; }
.ps-btn:active { transform: scale(0.98); }
.ps-btn--ghost { background: var(--ps-panel-2); color: var(--ps-text); }
.ps-btn--ghost:hover { background: #222733; }
.ps-btn--sm { height: 36px; padding: 0 12px; font-size: 13px; }
.ps-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--ps-dim); }
.ps-empty--sm { padding: 20px; }
.ps-empty strong { margin-top: 6px; font-size: 16px; color: var(--ps-text); }
.ps-empty p { margin: 0 0 6px; font-size: 14px; }
.ps-empty__icon { width: 56px; height: 56px; border-radius: 16px; background: var(--ps-panel); border: 1px solid var(--ps-edge); color: var(--ps-dim); display: flex; align-items: center; justify-content: center; }
.ps-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--ps-line); border-top-color: var(--ps-blue-text); animation: ps-spin 0.8s linear infinite; }
@keyframes ps-spin { to { transform: rotate(360deg); } }

/* The casino screen sits inside the new layout */
body.ps-mode #view-casino { padding-top: 0; }

/* ---------- pop-up windows (deposit, withdraw, tips, notifications) ---------- */
body.ps-mode .x1-modal-overlay { background: rgba(4, 5, 8, 0.72); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.ps-mode .x1-modal-box { padding: 18px 16px; border-radius: 20px; border: 1px solid var(--ps-line); background: var(--ps-panel); color: var(--ps-text); font-family: var(--ps-font); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
/* (.x1-modal-overlay in front: admin.css loads later and styles the admin's own pop-ups) */
body.ps-mode .x1-modal-overlay .x1-modal-box .modal-header { margin-bottom: 14px; padding-bottom: 0; border-bottom: 0; }
body.ps-mode .x1-modal-box .modal-header h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--ps-text); }
body.ps-mode .x1-modal-box .modal-close { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ps-panel-2); color: var(--ps-soft); font-size: 15px; }
body.ps-mode .x1-modal-box .modal-close:hover { color: var(--ps-text); }
body.ps-mode .x1-modal-box .x1-field-label,
body.ps-mode .x1-modal-box .form-group label { font-size: 13px; font-weight: 600; color: var(--ps-label); }
body.ps-mode .x1-modal-box input:not([type="checkbox"]):not([type="radio"]),
body.ps-mode .x1-modal-box select,
body.ps-mode .x1-modal-box textarea { min-height: 48px; padding: 0 14px; border: 1.5px solid var(--ps-line); border-radius: 12px; background: var(--ps-field); color: var(--ps-text); font-family: var(--ps-font) !important; font-size: 16px; }
body.ps-mode .x1-modal-box textarea { padding: 12px 14px; }
body.ps-mode .x1-modal-box input:focus,
body.ps-mode .x1-modal-box select:focus,
body.ps-mode .x1-modal-box textarea:focus { border-color: var(--ps-blue); box-shadow: none; outline: none; }
body.ps-mode .x1-modal-box .form-hint { font-size: 12px; line-height: 1.5; color: var(--ps-dim); }
/* The full-width main button of a player pop-up (Continue to payment QR, Request withdrawal...) */
body.ps-mode .x1-modal-overlay .x1-modal-box .x1-btn-accent[style*="width:100%"] { display: flex; align-items: center; justify-content: center; height: auto; min-height: 52px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--ps-blue); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; box-shadow: none; filter: none; }
body.ps-mode .x1-modal-overlay .x1-modal-box .x1-btn-accent[style*="width:100%"]:hover { background: #3B7BF0; }
body.ps-mode .x1-modal-overlay .x1-modal-box .x1-btn-accent[style*="width:100%"]:disabled { background: #262B36; color: var(--ps-dim); }
body.ps-mode .x1-modal-box .x1-btn-blue { min-height: 44px; border: 0; border-radius: 12px; background: var(--ps-panel-2); color: var(--ps-text); }
body.ps-mode .x1-modal-notice { border-radius: 12px; border: 1px solid #1F3360; background: var(--ps-blue-bg); color: #C7DAFF; }
body.ps-mode .x1-pay-status { border: 0; border-radius: 12px; background: var(--ps-field); }
/* Deposit: steps, account strip and amount buttons */
body.ps-mode .x1-steps { margin: 0 0 16px; padding: 0; gap: 6px; }
body.ps-mode .x1-steps li { padding-top: 8px; border-top: 4px solid #262B36; font-size: 12px; font-weight: 600; color: var(--ps-dim); }
body.ps-mode .x1-steps li.is-current { color: var(--ps-text); border-top-color: var(--ps-blue-text); }
body.ps-mode .x1-steps li.is-done { color: var(--ps-green); border-top-color: var(--ps-green); }
body.ps-mode .x1-account-strip { margin-bottom: 16px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--ps-field); }
body.ps-mode .x1-account-strip__label { font-size: 12px; color: var(--ps-dim); }
body.ps-mode .x1-account-strip__val { font-family: var(--ps-font); font-size: 15px; font-weight: 700; color: var(--ps-text) !important; font-variant-numeric: tabular-nums; }
body.ps-mode .preset-amounts-grid { gap: 8px; margin: 8px 0 4px; }
body.ps-mode .preset-amt-btn { height: 46px; border-radius: 11px; border: 1px solid var(--ps-line); background: var(--ps-panel-2); color: #D5DAE4; font-size: 15px; font-weight: 600; }
body.ps-mode .preset-amt-btn:hover { background: #222733; border-color: #333A48; }
body.ps-mode .preset-amt-btn.active { border-color: var(--ps-blue); background: var(--ps-blue-bg); color: var(--ps-blue-soft); font-weight: 700; }
body.ps-mode .x1-notif-panel { border-radius: 16px; border-color: var(--ps-line); background: var(--ps-panel); }
body.ps-mode .x1-toast-container { bottom: calc(150px + var(--ps-safe-bottom)); }

/* ---------- phones ---------- */
@media (max-width: 767px) {
  /* Pop-ups slide up from the bottom like the bet slip */
  body.ps-mode .x1-modal-overlay { align-items: flex-end; padding: 0; }
  body.ps-mode .x1-modal-box { max-width: none; max-height: 92vh; padding: 8px 16px calc(20px + var(--ps-safe-bottom)); border-width: 1px 0 0; border-radius: 24px 24px 0 0; animation: ps-sheet-up 0.28s cubic-bezier(.2, .8, .2, 1); }
  body.ps-mode .x1-modal-box::before { content: ''; display: block; width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: #333A48; }
  /* The bottom bar stays on top of the open sheet, so the middle button can also close it */
  body.ps-sheet-open .ps-tabbar { z-index: 950; }
  .ps-sheet__card { padding-bottom: calc(92px + var(--ps-safe-bottom)); max-height: calc(100vh - 40px); }
  /* Pop-up messages at the top, so they never cover the bet slip or its button */
  body.ps-mode .x1-toast-container { top: calc(64px + var(--ps-safe-top)); bottom: auto; left: 12px; right: 12px; }
}

/* ---------- tablet & PC ---------- */
@media (min-width: 768px) {
  .ps-tabs-top { display: flex; }
  .ps-tabbar { display: none; }
  .ps-slipbar { left: auto; right: 24px; width: 360px; bottom: calc(24px + var(--ps-safe-bottom)); }
  .ps-main { padding-bottom: 60px; }
  .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-tabs, .ps-leagues { margin: 0; padding-left: 0; padding-right: 0; }
  .ps-leagues { flex-wrap: wrap; overflow: visible; }
  .ps-sheet__card { left: 50%; right: auto; bottom: 24px; width: 440px; border: 1px solid var(--ps-line); border-radius: 20px; transform: translateX(-50%); animation: ps-fade 0.2s ease; }
  .ps-sheet__card::before { display: none; }
  body.ps-mode .x1-toast-container { bottom: 24px; }
  body.ps-mode .x1-notif-panel { top: calc(64px + var(--ps-safe-top)); }
}
@media (min-width: 1024px) {
  .ps-main { grid-template-columns: minmax(0, 1fr) 360px; }
  .ps-side {
    display: block;
    position: sticky;
    top: calc(76px + var(--ps-safe-top));
    max-height: calc(100vh - 96px - var(--ps-safe-top));
    overflow-y: auto;
    padding: 16px;
    border-radius: 18px;
    background: var(--ps-panel);
    border: 1px solid var(--ps-edge);
  }
  .ps-side.hidden { display: none !important; }
  body[data-ps-view]:not([data-ps-view="SPORTSBOOK"]) .ps-main { grid-template-columns: minmax(0, 1fr); }
  .ps-slipbar { display: none !important; }
}
@media (max-width: 380px) {
  .ps-logo { font-size: 20px; }
  .ps-top__in { gap: 10px; }
  .ps-top__right { gap: 6px; }
  .ps-icon-btn { width: 38px; height: 38px; }
  .ps-balance { font-size: 14px; }
}