/* ==========================================================================
   Layout and metrics are taken verbatim from the live Parimatch predictions
   lobby (logged-in capture, 2026-08-18). The palette is B9's, sampled from
   b9myr9.com: navy surfaces #0c1832 / #18264b with #74c0fc and #419bcb accents.
   ========================================================================== */
:root {
  /* The detail overlay hangs off the header, so the height has to be a single
     source of truth — a hard-coded offset leaves a strip of lobby showing
     through on whichever breakpoint it does not match. */
  --header-h: 68px;

  /* Surfaces — B9 navy */
  --background-secondary: #0a1329;   /* page */
  --background-main: #12203f;        /* card */
  --background-tertiary: #18264b;    /* chip / elevated */
  --background-header: #0c1832;
  --field-background: #16234a;

  /* Text */
  --text-title: #eceff1;
  --text-body: #90a4ae;
  --text-primary: #74c0fc;           /* percentages — B9 light blue */
  --field-placeholder: rgba(236, 239, 241, .55);

  /* Outcome buttons */
  --text-outcome-up: #2ecc71;        /* Yes — B9 green */
  --text-outcome-down: #74c0fc;      /* No  — B9 blue  */
  --control-disabled: #24325a;
  --text-disable: #ffffff33;

  /* Chips */
  --chips-background-default: #18264b;
  --chips-background-selected: #74c0fc33;
  --chips-text-default: #cfd8dc;
  --chips-text-selected: #74c0fc;
  --radius-chips: 16px;

  /* Brand */
  --background-badge: #419bcb;
  --text-inversion: #ffffff;
  --success: #2ecc71;
  --danger: #e5484d;

  /* Metrics */
  --size-4: 4px; --size-6: 6px; --size-8: 8px; --size-12: 12px; --size-14: 14px;
  --radius-field: 28px;   /* --radius-advanced-field-regular-default on the original */

  --font: Inter, -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",
          "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Typography scale (site's own classes) */
.title-1-semibold   { font-weight: 500; font-size: 24px; line-height: 30px; }
.body-semibold      { font-weight: 700; font-size: 16px; line-height: 18px; letter-spacing: -.16px; }
.caption-1-regular  { font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: -.24px; }
.caption-1-semibold { font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: -.24px; }
.caption-1-medium   { font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: .4px; }
.chips-text         { font-weight: 400; font-size: 14px; line-height: 18px; }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Elements below set their own display, which would otherwise beat [hidden]. */
[hidden] { display: none !important; }
html, body {
  background: var(--background-secondary);
  color: var(--text-title);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input { font-family: inherit; }

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  background: var(--background-header);
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
}
.header__inner {
  max-width: 1920px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; gap: 24px; padding: 0 24px;
}
.burger {
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; flex-direction: column; gap: 4px;
}
.burger span { width: 18px; height: 2px; background: #fff; border-radius: 2px; }

.logo {
  display: flex; align-items: center; text-decoration: none;
  min-width: 0; flex-shrink: 0;
}
/* Served at 2x so it stays sharp on retina; width follows from the aspect. */
.logo__img { display: block; height: 32px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__item {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  color: var(--text-title); font-size: 15px; font-weight: 500;
  padding: 8px 14px; border-radius: 8px; white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav__item:hover { background: #ffffff0f; }
.nav__item.is-active { color: var(--text-primary); }
.nav__item svg { width: 18px; height: 18px; flex-shrink: 0; }

.header__spacer { flex: 1; }
.header__tools { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.icon-btn {
  position: relative; background: none; border: none; cursor: pointer;
  color: #fff; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; transition: background .15s;
}
.icon-btn:hover { background: #ffffff14; }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn__badge {
  position: absolute; top: -3px; right: -6px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 5px; border-radius: 8px; min-width: 18px; text-align: center;
}
.lang { display: flex; align-items: center; gap: 6px; color: var(--text-title); font-size: 14px; font-weight: 500; }
.lang__flag { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; }

.balance {
  display: flex; align-items: center; gap: 8px;
  background: var(--background-tertiary); border-radius: 999px;
  padding: 7px 12px 7px 8px; cursor: pointer;
  color: #fff; font-size: 15px; font-weight: 600; border: none;
}
.balance__coin {
  width: 20px; height: 20px; border-radius: 50%;
  background: #26a17b; color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.balance__caret { color: var(--text-body); font-size: 10px; }

.deposit {
  display: flex; align-items: center; gap: 7px;
  background: var(--success); color: #04170f; border: none;
  border-radius: 999px; padding: 10px 18px;
  font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: filter .15s;
}
.deposit:hover { filter: brightness(1.1); }

/* ==========================================================================
   Page
   ========================================================================== */
.page { max-width: 1500px; margin: 0 auto; padding: 24px 24px 96px; }
.page__title { margin-bottom: 16px; color: var(--text-title); }

.section { width: 100%; display: flex; flex-direction: column; gap: var(--size-12); }

/* Category chips */
.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  width: max-content; flex-shrink: 0;
  background: var(--chips-background-default);
  border: none; border-radius: var(--radius-chips); cursor: pointer;
  height: 32px; padding: 0 var(--size-12);
  display: flex; align-items: center; justify-content: center;
  color: var(--chips-text-default);
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
  white-space: nowrap;
}
.chip:hover { background: #ffffff1f; }
.chip.is-active { background: var(--chips-background-selected); color: var(--chips-text-selected); }

/* Search field */
.field { position: relative; width: 100%; }
.field__icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; color: #9e9ea0; pointer-events: none;
}
.field__input {
  width: 100%; height: 56px;
  background: var(--field-background); border: none; outline: none;
  border-radius: var(--radius-field); color: #fff;
  padding: 0 48px 0 52px; font-size: 15px;
}
.field__input::placeholder { color: var(--field-placeholder); }
.field__clear {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #9e9ea0; cursor: pointer;
  width: 22px; height: 22px; display: none; place-items: center; font-size: 18px;
}
.field__input:not(:placeholder-shown) ~ .field__clear { display: grid; }

/* Status dropdown + live indicator row */
.subhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dropdown {
  display: flex; align-items: center; gap: 8px;
  background: var(--background-tertiary); border: none; cursor: pointer;
  border-radius: var(--radius-chips); height: 32px; padding: 0 12px;
  color: var(--text-title);
}
.dropdown__caret { color: #9e9ea0; font-size: 9px; }
.subhead__spacer { flex: 1; }

.feed { display: flex; align-items: center; gap: 6px; color: var(--text-body); white-space: nowrap; }
.feed__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-disable); flex-shrink: 0; }
.feed[data-state="live"]    { color: var(--text-outcome-up); }
.feed[data-state="live"] .feed__dot    { background: var(--text-outcome-up); animation: pulse 1.6s infinite; }
.feed[data-state="loading"] .feed__dot { background: #e8a44a; animation: pulse .8s infinite; }
.feed[data-state="error"]   { color: var(--danger); }
.feed[data-state="error"] .feed__dot   { background: var(--danger); }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

.ghost-btn {
  background: #ffffff26; border: none; color: #fff; cursor: pointer;
  border-radius: var(--radius-chips); height: 32px; padding: 0 14px;
  font-size: 12px; font-weight: 600; transition: background .15s;
}
.ghost-btn:hover { background: #ffffff40; }
.ghost-btn--lg {
  height: 40px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: .3px;
}

/* ==========================================================================
   Market grid — exact geometry from the original
   ========================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: stretch;
  gap: 12px;
}

.card {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--size-8); padding: var(--size-12);
  border-radius: var(--size-8); background: var(--background-main);
  height: 200px; cursor: pointer;
  min-width: 0;   /* grid items default to min-width:auto and refuse to shrink */
}
.card:hover { background: #16274d; }

.card__head { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.card__img { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.card__title-wrap { display: flex; align-items: center; min-width: 0; }
.card__title {
  color: var(--text-title);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__vol { color: var(--text-body); }

/* Options list — scrolls inside the fixed-height card */
.options {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 160px; overflow-y: scroll;
}
.options::-webkit-scrollbar { width: 4px; }
.options::-webkit-scrollbar-track { background: transparent; }
.options::-webkit-scrollbar-thumb { background: var(--text-body); border-radius: 2px; }

.opt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.opt__name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-title);
}
.opt__pct { color: var(--text-primary); flex-shrink: 0; border-radius: 3px; }
/* Flash an outcome whose price moved on the last refresh */
.opt__pct.is-up   { animation: flash-up 1.4s ease-out; }
.opt__pct.is-down { animation: flash-down 1.4s ease-out; }
@keyframes flash-up {
  0%   { background: color-mix(in srgb, var(--text-outcome-up) 45%, transparent); color: var(--text-outcome-up); }
  100% { background: transparent; color: var(--text-primary); }
}
@keyframes flash-down {
  0%   { background: color-mix(in srgb, var(--danger) 45%, transparent); color: #ffb3a1; }
  100% { background: transparent; color: var(--text-primary); }
}

.opt__btns { display: flex; gap: 4px; flex-shrink: 0; }
.opt-btn {
  flex: 1; width: 64px; border: none; border-radius: var(--size-8);
  padding: var(--size-14) var(--size-6); cursor: pointer;
  transition: filter .15s;
}
/* First child = Yes (up), second = No (down) — the original keys off position */
.opt-btn:nth-child(1) { background-color: color-mix(in srgb, var(--text-outcome-up) 25%, transparent); color: var(--text-outcome-up); }
.opt-btn:nth-child(2) { background-color: color-mix(in srgb, var(--text-outcome-down) 25%, transparent); color: var(--text-outcome-down); }
.opt-btn:not(:disabled):hover { filter: brightness(1.35); }
.opt-btn:disabled { background-color: var(--control-disabled); color: var(--text-disable); cursor: not-allowed; }

/* Binary market card (gauge + Buy Yes/No) */
.card--binary .card__head { align-items: center; }
.gauge { margin-left: auto; text-align: center; flex-shrink: 0; }
.gauge__value { color: var(--text-title); margin-top: -20px; font-weight: 600; font-size: 13px; }
.gauge__label { color: var(--text-body); font-size: 10px; line-height: 14px; }
.card__buy { display: flex; gap: 8px; margin-top: auto; }
.buy-btn {
  flex: 1; border: none; border-radius: var(--size-8);
  padding: var(--size-14) var(--size-6); cursor: pointer;
  font-weight: 700; font-size: 16px; line-height: 18px; letter-spacing: -.16px;
  transition: filter .15s;
}
.buy-btn:nth-child(1) { background-color: color-mix(in srgb, var(--text-outcome-up) 25%, transparent); color: var(--text-outcome-up); }
.buy-btn:nth-child(2) { background-color: color-mix(in srgb, var(--text-outcome-down) 25%, transparent); color: var(--text-outcome-down); }
.buy-btn:not(:disabled):hover { filter: brightness(1.35); }
/* Without this a blocked binary market looks perfectly clickable and simply
   does nothing when tapped. */
.buy-btn:disabled {
  background-color: var(--control-disabled);
  color: var(--text-disable);
  cursor: not-allowed;
}

/* Infinite-scroll sentinel */
.load-more { height: 40px; }

/* ==========================================================================
   Event detail — opened by clicking a card
   ========================================================================== */
.detail[hidden] { display: none; }
.detail {
  position: fixed; inset: var(--header-h) 0 0; z-index: 45;
  background: var(--background-secondary);
  overflow-y: auto;
}
.detail__inner { max-width: 1100px; margin: 0 auto; padding: 20px 24px 96px; }

.detail__back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--text-primary); font-size: 14px; font-weight: 600;
  padding: 8px 0; margin-bottom: 16px;
}
.detail__back:hover { text-decoration: underline; }

.detail__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.detail__img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.detail__headtext { flex: 1; min-width: 0; }
.detail__title { font-size: 26px; line-height: 32px; font-weight: 700; color: var(--text-title); }
.detail__gauge { text-align: center; flex-shrink: 0; }
.detail__gauge .gauge__value { font-size: 16px; }

/* Stat blocks — TOTAL VOL. / 24H VOL. / START DATE / END DATE */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.stat { background: var(--background-main); border-radius: var(--size-8); padding: 14px 16px; }
.stat__label {
  color: var(--text-body); font-size: 11px; font-weight: 500;
  letter-spacing: .6px; text-transform: uppercase;
}
.stat__value { color: var(--text-title); font-size: 18px; font-weight: 700; margin-top: 4px; }

.detail__body { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.detail__main, .detail__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.panel { background: var(--background-main); border-radius: var(--size-8); padding: 16px; }
.panel__title { font-size: 14px; font-weight: 700; color: var(--text-title); margin-bottom: 10px; }
.panel__text { color: var(--text-body); font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.panel__text--scroll { max-height: 300px; overflow-y: auto; }

/* Price chart */
.chart-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.chart-panel__title { font-size: 14px; font-weight: 700; color: var(--text-title); }
.ranges { display: flex; gap: 4px; }
.range {
  background: var(--background-tertiary); border: none; cursor: pointer;
  color: var(--text-body); border-radius: 8px;
  padding: 5px 10px; font-size: 11px; font-weight: 600;
}
.range:hover { color: var(--text-title); }
.range.is-active { background: var(--chips-background-selected); color: var(--chips-text-selected); }
.chart { position: relative; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart__empty, .chart__loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-body); font-size: 13px;
}
.chart__grid line { stroke: #ffffff10; stroke-width: 1; }
.chart__axis { fill: var(--text-body); font-size: 10px; }
.chart__line { fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-linejoin: round; }
.chart__area { fill: url(#chartFill); }
.chart__last { fill: var(--text-primary); }

/* FAQ */
.faq__item { border-bottom: 1px solid #ffffff0d; }
.faq__item:last-child { border-bottom: none; }
.faq__q {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  color: var(--text-title); font-size: 14px; font-weight: 600;
  padding: 14px 28px 14px 0; position: relative;
}
.faq__q::after {
  content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--text-primary); font-size: 18px; font-weight: 400;
}
.faq__item.is-open .faq__q::after { content: '−'; }
.faq__a { color: var(--text-body); font-size: 13px; line-height: 1.65; padding: 0 0 14px; }
.faq__item:not(.is-open) .faq__a { display: none; }

.detail__outcomes { padding: 4px 16px 12px; }
.detail__outcomes-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0 10px; border-bottom: 1px solid #ffffff12;
  color: var(--text-body); font-size: 12px;
}
.detail__outcomes-head span:first-child { flex: 1; }
.detail__col-chance { width: 56px; text-align: right; }
.detail__col-actions { width: 132px; }

.detail-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #ffffff0d;
}
.detail-opt:last-child { border-bottom: none; }
.detail-opt__name { flex: 1; min-width: 0; color: var(--text-title); font-size: 14px; }
.detail-opt__pct {
  width: 56px; text-align: right; flex-shrink: 0;
  color: var(--text-primary); font-size: 15px; font-weight: 600; border-radius: 3px;
}
.detail-opt__pct.is-up   { animation: flash-up 1.4s ease-out; }
.detail-opt__pct.is-down { animation: flash-down 1.4s ease-out; }
.detail-opt__btns { display: flex; gap: 6px; width: 132px; flex-shrink: 0; }
.detail-opt__btns .opt-btn { width: 63px; }

.detail__rules { background: var(--background-main); border-radius: var(--size-8); padding: 16px; }
.detail__rules-title { font-size: 14px; font-weight: 700; color: var(--text-title); margin-bottom: 8px; }
.detail__rules-text {
  color: var(--text-body); font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; max-height: 420px; overflow-y: auto;
}

@media (max-width: 900px) {
  .detail { inset: 56px 0 0; }
  .detail__inner { padding: 14px 12px 90px; }
  .detail__title { font-size: 20px; line-height: 26px; }
  .detail__img { width: 48px; height: 48px; }
  .detail__body { grid-template-columns: 1fr; }
  .detail__gauge { display: none; }
}

/* ==========================================================================
   Empty state
   ========================================================================== */
.empty { text-align: center; padding: 90px 0; }
.empty__icon { font-size: 38px; margin-bottom: 12px; opacity: .7; }
.empty__title { color: var(--text-title); font-size: 16px; font-weight: 600; }
.empty__hint { color: var(--text-body); font-size: 13px; margin-top: 6px; }

/* ==========================================================================
   Bet slip
   ========================================================================== */
/* `hidden` must beat the layout display values below */
/* [hidden] must beat the layout display values these elements set. */
.slip[hidden], .slip-overlay[hidden], .toast[hidden], .empty[hidden],
.feed[hidden], .chart__legend[hidden] { display: none; }

.slip-overlay { position: fixed; inset: 0; background: #000000a6; z-index: 90; }
.slip {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 92vw;
  background: var(--background-main); z-index: 100;
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: -8px 0 40px #000000a0;
}
.slip__head { display: flex; align-items: center; justify-content: space-between; }
.slip__title { font-size: 18px; font-weight: 700; color: #fff; }
.slip__close {
  border: none; background: #ffffff1a; color: #fff; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; font-size: 17px;
}
.slip__market { color: var(--text-body); font-size: 13px; line-height: 1.4; }
.slip__pick {
  background: var(--background-tertiary); border-radius: var(--size-8); padding: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  color: var(--text-title); font-size: 14px;
}
.slip__side { font-weight: 700; white-space: nowrap; }
.slip__side--yes { color: var(--text-outcome-up); }
.slip__side--no  { color: var(--text-outcome-down); }
.slip__label { color: var(--text-body); font-size: 12px; }
.slip__stake {
  width: 100%; background: var(--field-background); border: 1px solid #ffffff1a;
  border-radius: var(--radius-field); color: #fff; padding: 13px 14px; font-size: 16px; outline: none;
}
.slip__stake:focus { border-color: var(--text-primary); }
.slip__chips { display: flex; gap: 6px; }
.slip__chip {
  flex: 1; background: #ffffff14; border: none; color: var(--text-title);
  border-radius: 8px; padding: 8px 0; font-size: 12px; font-weight: 600; cursor: pointer;
}
.slip__chip:hover { background: #ffffff26; }
.slip__row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-body); }
.slip__row strong { color: var(--text-primary); font-size: 16px; }
.slip__confirm {
  display: block; width: 100%; border: none; border-radius: var(--size-8);
  cursor: pointer; text-align: center; text-decoration: none;
  background: var(--background-badge); color: var(--text-inversion);
  padding: 15px; font-size: 15px; font-weight: 700; margin-top: auto;
  transition: filter .15s;
}
.slip__confirm:hover { filter: brightness(1.12); }
.slip__login {
  display: block; text-align: center; color: var(--text-primary);
  font-size: 13px; text-decoration: none; padding: 2px 0;
}
.slip__login:hover { text-decoration: underline; }
.slip__note { color: var(--text-disable); font-size: 11px; line-height: 1.5; }
.slip__note code { color: var(--text-body); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  background: var(--background-tertiary); color: var(--text-title); border-left: 3px solid var(--text-outcome-up);
  border-radius: var(--size-8); padding: 13px 20px; font-size: 14px;
  z-index: 200; box-shadow: 0 8px 28px #000000a0;
}

/* ==========================================================================
   Mobile — matches the captured 390px layout
   ========================================================================== */

@media (max-width: 900px) {
  :root { --header-h: 56px; }
  /* Must stay off <body>: overflow on the body box makes it the scroll
     container and silently kills position:sticky on the header. */
  html { overflow-x: hidden; }

  .header__inner { padding: 0 10px; gap: 8px; }
  .nav, .burger, .lang, .icon-btn--search, .icon-btn--chat { display: none; }
  .logo__img { height: 24px; }
  .header__spacer { flex: 1; }
  .header__tools { gap: 8px; }

  /* Chips and the status row must scroll, never widen the page */
  .subhead { flex-wrap: wrap; row-gap: 8px; }
  .subhead__spacer { display: none; }
  .feed { font-size: 11px; }

  /* Card, options list and outcome buttons keep their desktop geometry —
     the original has no mobile overrides for them, the grid just folds to
     one column. Only the percentage gets a fixed gutter so long candidate
     names cannot push the buttons around. */
  .opt__pct { min-width: 30px; text-align: right; }
  .deposit { padding: 8px 14px; font-size: 12px; }
  .ghost-btn--lg { height: 34px; padding: 0 14px; font-size: 12px; }
  .deposit span { display: inline; }
  .balance { padding: 6px 10px 6px 6px; font-size: 14px; }

  /* 24 at the foot, not 90. The larger figure was clearance for a fixed bottom
     bar that has been removed; left behind it is a band of empty page under the
     last card on every phone. */
  .page { padding: 16px 12px 24px; }
  .page__title { font-size: 22px; line-height: 28px; }
  .field__input { height: 52px; }
  .grid { grid-template-columns: 1fr; }   /* card keeps its 200px height */

  .slip { width: 100%; max-width: 100%; top: auto; height: 88vh; border-radius: 16px 16px 0 0; }
}

/* --- Detail top bar: back arrow + category, matching the original --- */
.detail__bar {
  display: flex; align-items: center; gap: 8px;
  height: 48px; margin: -20px -24px 12px; padding: 0 12px;
  border-bottom: 1px solid #ffffff12; position: relative;
}
.detail__back {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-title); width: 34px; height: 34px; border-radius: 8px;
  padding: 0; margin: 0;
}
.detail__back:hover { background: #ffffff14; text-decoration: none; }
.detail__bartitle {
  position: absolute; left: 50%; transform: translateX(-50%);
  color: var(--text-title); font-size: 15px; font-weight: 600;
}

/* --- Chart: right-hand 0-100 axis, dotted grid, multi-series legend --- */
/* Plot box has the fixed height; the legend flows beneath it, inside the panel. */
.chart__plot { position: relative; height: 250px; }
.chart__grid line { stroke: #ffffff1f; stroke-width: 1; stroke-dasharray: 3 5; }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  margin-top: 10px;
}
.legend__item {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-body); font-size: 12px;
}
.legend__item i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Range pills sit alone on their row now that the chart has no title */
.chart-panel__head { justify-content: flex-start; }
.range { padding: 6px 12px; border-radius: 999px; font-size: 12px; }

@media (max-width: 900px) {
  .detail__bar { margin: -14px -12px 10px; }
  .chart__plot { height: 220px; }
  .ranges { flex-wrap: wrap; }
}

/* --- Chart hover: crosshair, per-series dots, readout panel --- */
.chart__plot { cursor: crosshair; }
.chart__crosshair { stroke: #ffffff59; stroke-width: 1; stroke-dasharray: 4 4; }
.chart__dot { stroke: var(--background-main); stroke-width: 2; }
.chart__tip {
  position: absolute; z-index: 3; pointer-events: none;
  background: var(--background-tertiary);
  border: 1px solid #ffffff1f; border-radius: 10px;
  padding: 10px 12px; min-width: 160px;
  box-shadow: 0 8px 24px #00000073;
}
.chart__tip-date {
  color: var(--text-title); font-size: 12px; font-weight: 700; margin-bottom: 7px;
}
.chart__tip-row {
  display: flex; align-items: center; gap: 7px;
  color: var(--text-body); font-size: 12px; line-height: 1.7; white-space: nowrap;
}
.chart__tip-row i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

@media (max-width: 900px) {
  .chart__plot { cursor: default; }
  .chart__tip { min-width: 140px; padding: 8px 10px; }
}

/* --- Settled markets: result label in place of the outcome buttons --- */
.result {
  display: inline-flex; align-items: center; justify-content: center;
  width: 132px; border-radius: var(--size-8);
  padding: var(--size-14) var(--size-6);
  font-weight: 600; white-space: nowrap;
}
.opt__btns .result { width: 132px; }
.result--won {
  background-color: color-mix(in srgb, var(--text-outcome-up) 25%, transparent);
  color: var(--text-outcome-up);
}
.result--lost { background: var(--control-disabled); color: var(--text-disable); }
.result--wide { width: 100%; flex: 1; font-size: 15px; }

@media (max-width: 900px) {
  .result, .opt__btns .result { width: 108px; }
}

/* --- Odds format switch: Malay / HK / Indo / Decimal / % --- */
.odds-picker {
  display: flex; gap: 2px; flex-shrink: 0;
  background: var(--background-tertiary);
  border-radius: var(--radius-chips); padding: 3px;
}
.odds-opt {
  background: none; border: none; cursor: pointer;
  color: var(--text-body); border-radius: 13px;
  padding: 0 10px; height: 26px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  transition: background .15s, color .15s;
}
.odds-opt:hover { color: var(--text-title); }
.odds-opt.is-active { background: var(--chips-background-selected); color: var(--chips-text-selected); }

@media (max-width: 900px) {
  .odds-picker { padding: 2px; }
  .odds-opt { padding: 0 8px; height: 24px; font-size: 11px; }
}

/* --- Sandbox login --- */
.login[hidden], .login-overlay[hidden] { display: none; }
.login {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 340px; max-width: 92vw; z-index: 110;
  background: var(--background-main); border-radius: 12px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 50px #000000a6;
}
.login__head { display: flex; align-items: center; justify-content: space-between; }
.login__title { font-size: 17px; font-weight: 700; color: #fff; }
.login__hint { color: var(--text-body); font-size: 12px; }
.login__err { color: var(--danger); font-size: 12.5px; }
.login__err[hidden] { display: none; }

/* --- My bets drawer --- */
.slip--wide { width: 400px; }
.pipcount {
  display: inline-grid; place-items: center; margin-left: 7px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--text-primary); color: var(--background-secondary);
  border-radius: 999px; font-size: 11px; font-weight: 700;
}
.mb__summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mb__stat {
  background: var(--background-tertiary); border-radius: var(--size-8);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
}
.mb__stat span { color: var(--text-body); font-size: 11px; }
.mb__stat b { font-size: 15px; font-weight: 700; }
.is-up { color: var(--text-outcome-up); }
.is-down { color: var(--danger); }

.mb__tabs { display: flex; gap: 4px; background: var(--background-tertiary); border-radius: 999px; padding: 4px; }
.mb__tab {
  flex: 1; background: none; border: none; cursor: pointer;
  color: var(--text-body); border-radius: 999px; padding: 7px 0;
  font-size: 13px; font-weight: 600;
}
.mb__tab.is-active { background: var(--chips-background-selected); color: var(--chips-text-selected); }

.mb__list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.mb__empty { color: var(--text-body); font-size: 13px; text-align: center; padding: 30px 10px; line-height: 1.6; }

.mb__bet {
  background: var(--background-tertiary); border-radius: var(--size-8);
  padding: 12px; display: flex; flex-direction: column; gap: 7px;
}
.mb__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mb__market {
  color: var(--text-title); font-size: 13px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mb__status {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; letter-spacing: .4px;
}
.mb__status--open { background: #ffffff1a; color: var(--text-body); }
.mb__status--won { background: color-mix(in srgb, var(--text-outcome-up) 25%, transparent); color: var(--text-outcome-up); }
.mb__status--lost { background: color-mix(in srgb, var(--danger) 22%, transparent); color: #ffb3a1; }
.mb__status--void { background: #ffffff14; color: var(--text-disable); }

.mb__pick { display: flex; align-items: center; gap: 8px; color: var(--text-title); font-size: 12.5px; }
.mb__pick > span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb__odds { color: var(--text-primary); font-weight: 700; font-size: 13px; }
.mb__foot { display: flex; align-items: center; gap: 14px; color: var(--text-body); font-size: 12px; }
.mb__foot b { color: var(--text-title); font-weight: 600; }
.mb__pl { margin-left: auto; font-weight: 700; font-size: 13px; }
.mb__when { color: var(--text-disable); font-size: 11px; }

.mb__logout { display: none; }

@media (max-width: 900px) {
  .slip--wide { width: 100%; }
  .mb__summary { grid-template-columns: repeat(3, 1fr); }
}

/* --- Cash out --- */
.mb__cash {
  align-self: flex-start; border: none; cursor: pointer;
  background: #ffffff1a; color: var(--text-title);
  border-radius: 7px; padding: 7px 13px;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  transition: background .15s, color .15s;
}
.mb__cash:hover:not(:disabled) { background: #ffffff2e; }
.mb__cash:disabled { opacity: .6; cursor: default; }
.mb__cash.is-quoted {
  background: color-mix(in srgb, var(--text-outcome-up) 25%, transparent);
  color: var(--text-outcome-up);
}
.mb__quote { color: var(--text-body); font-size: 11.5px; }
.mb__status--cashedout { background: #ffffff1f; color: var(--text-title); }

/* Stake limits, stated before the bet rather than after it is refused. */
.slip__limit {
  margin: 8px 0 0; font-size: 12px; line-height: 1.45;
  color: var(--text-secondary, #8b93a7);
}
.slip__limit.is-warn { color: var(--danger, #ff4d4f); }
.slip__confirm.is-off { opacity: .45; pointer-events: none; }
.slip--void #slipPayout, .slip--void #slipReturn { opacity: .35; }

@media (max-width: 420px) { .logo__img { height: 20px; } }

/* Scroll lock while the detail overlay is up. The lock has to sit on <html>:
   overflow on <body> alone still leaves the document scrolling underneath. */
html.is-locked, html.is-locked body { overflow: hidden; }

/* Logged in, the mobile header ran to 459px against a 390px screen and the page
   scrolled sideways — which also drags a sticky header out of view. Log out
   moves into the My bets panel, where it is still one tap away. */
@media (max-width: 560px) {
  .header__tools { gap: 8px; }
  #logoutBtn { display: none; }
  .mb__logout { display: block; width: 100%; margin-top: 12px; }
}

/* Small phones: 360px and 320px still pushed the logged-in header past the
   viewport. Trimming the padding and the logo buys back the ~50px needed. */
@media (max-width: 400px) {
  .header__inner { padding: 0 8px; gap: 6px; }
  .header__tools { gap: 6px; }
  .logo__img { height: 18px; }
  .ghost-btn--lg { padding: 0 10px; font-size: 11px; }
  .balance { padding: 6px 9px 6px 6px; font-size: 13px; gap: 5px; }
  .balance img, .balance svg { width: 18px; height: 18px; }
}

@media (max-width: 340px) {
  .logo__img { height: 15px; }
  .ghost-btn--lg { padding: 0 8px; }
  .balance { font-size: 12px; padding: 6px 7px 6px 5px; }
}

/* Live position value on an open bet — the decision the cash-out button asks
   for cannot be made without it. */
.mb__now {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: #ffffff0a; font-size: 12px; color: var(--text-body);
}
.mb__now-label { font-weight: 700; letter-spacing: .3px; text-transform: uppercase; font-size: 11px; }
.mb__now b { font-size: 15px; font-weight: 700; }
.mb__now-sub { margin-left: auto; color: var(--text-disable); font-size: 11px; }
.mb__now.is-up { background: #12b88614; }
.mb__now.is-up .mb__now-label, .mb__now.is-up b { color: var(--success, #12b886); }
.mb__now.is-down { background: #ff4d4f14; }
.mb__now.is-down .mb__now-label, .mb__now.is-down b { color: var(--danger, #ff4d4f); }

/* House-market stat blocks carry sentences, not figures — let them wrap. */
.stat__value { overflow-wrap: anywhere; }

/* ---------- Loading placeholders ----------
   Drawn in place of cards while a category is still being fetched. An empty
   grid reads as "nothing here", which is the wrong thing to say about a tab
   that is simply still loading. */
.card--skel { cursor: default; pointer-events: none; }
.skel {
  display: block;
  border-radius: 4px;
  background: linear-gradient(90deg, #1a2b52 0%, #223668 50%, #1a2b52 100%);
  background-size: 200% 100%;
  animation: skel-sweep 1.4s ease-in-out infinite;
}
.skel--img { width: 40px; height: 40px; flex-shrink: 0; }
.skel--line { height: 12px; width: 100%; margin: 4px 0; }
.skel--short { width: 55%; }
.card--skel .card__title-wrap { display: block; flex: 1; min-width: 0; }
.card--skel .opt { padding: 6px 0; }

@keyframes skel-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; background: #1d2f5c; }
}

/* The quiet second action in the login box: a member who has never had a
   password here says so, rather than guessing at one and being told no. Reads
   as a link, not a rival to the main button. */
.slip__link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 6px 0;
  background: none;
  border: 0;
  color: inherit;
  opacity: .72;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.slip__link:hover { opacity: 1; }

/* The only line under the Log in button now, so it stands on its own rather
   than as the quieter of a pair. Still set off by a rule - it is the way out
   when the password does not work, not another way to log in. */
.login__chat {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #ffffff14;
  opacity: .72;
}
.login__chat:hover { opacity: 1; }

/* ---------- Wallet ----------
   The member's own statement, in the same drawer shape as My bets so the two
   read as one place rather than two features. */
.wrow {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle, #ffffff14);
}
.wrow__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.wrow__what { font-size: 14px; color: #fff; }
.wrow__ref { font-size: 11px; opacity: .5; }
.wrow__sub {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 3px; font-size: 12px; opacity: .62;
}
.wrow__note { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrow__status { font-weight: 600; opacity: .9; }
.wrow__why {
  margin-top: 5px; font-size: 12px; line-height: 1.4;
  padding: 6px 8px; border-radius: 6px;
  background: #ffffff0d; opacity: .85;
}
.wform { padding: 14px; }
.wform__hint { margin: 6px 0 14px; font-size: 12px; line-height: 1.45; opacity: .6; }
.wform__err { margin: 8px 0 0; font-size: 13px; color: #ff6b6b; }
.wform__stop {
  margin: 0 0 14px; padding: 12px; border-radius: 8px;
  background: #ffffff0d; font-size: 13px; line-height: 1.5;
}