/* =========================================================================
   SHARED COMPONENTS  (SHELL area) — used by every view.
   Builders live in js/core/components.js. Don't restyle these from view CSS;
   add a modifier class in your own file instead (e.g. .crash .btn--bet).
   ========================================================================= */

/* ---------- icons ---------- */
.ic {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: var(--ic-stroke, 1.75);
  stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}

/* ---------- press feedback (motion.enablePressFeedback adds .is-pressed) ---------- */
.btn, .tap, .icon-btn, [data-press], .seg__item, .tabbar__item {
  transition: transform var(--dur-press) var(--ease-standard), filter var(--dur-press) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.is-pressed:not(:disabled) { transform: scale(0.97); filter: brightness(1.08); }
.btn.is-pressed:not(:disabled) { filter: brightness(0.94); }

/* ---------- surfaces ---------- */
.card {
  position: relative;
  background: var(--surface-1);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  border-top-color: var(--line-top);
  box-shadow: var(--shadow-1);
}
.card--raised { background: var(--surface-2); box-shadow: var(--shadow-2); }
.card--pad { padding: var(--s-4); }
.well { background: var(--bg-0); border-radius: var(--r-md); border: 1px solid var(--line); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.divider { height: 1px; background: var(--line); border: 0; margin: var(--s-3) 0; }

/* ---------- buttons ---------- */
.btn {
  --btn-h: 48px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--btn-h); padding: 0 var(--s-5);
  border-radius: var(--r-md);
  font-family: var(--font-text); font-weight: 750; font-size: var(--fs-md); letter-spacing: -0.005em;
  line-height: 1.1; white-space: nowrap;
  color: var(--text);
  isolation: isolate;
  overflow: hidden;
}
.btn .ic { width: 20px; height: 20px; }
.btn__label { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.btn__sub { font-size: var(--fs-xs); font-weight: 650; opacity: 0.78; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.btn--sm { --btn-h: 36px; padding: 0 var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-sm); gap: 6px; }
.btn--sm .ic { width: 17px; height: 17px; }
.btn--lg { --btn-h: 56px; border-radius: var(--r-lg); font-size: var(--fs-lg); }
.btn--xl { --btn-h: 64px; border-radius: var(--r-xl); font-size: var(--fs-lg); }
.btn--block { display: flex; width: 100%; }

.btn--primary {
  color: var(--text-on-accent);
  background: linear-gradient(180deg, #957dff 0%, var(--violet-500) 48%, var(--violet-600) 100%);
  box-shadow: var(--shadow-primary);
}
.btn--primary::before, .btn--success::before, .btn--ton::before, .btn--gold::before {
  /* soft specular band across the top half */
  content: ''; position: absolute; inset: 0 0 50% 0; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  border-radius: inherit;
}
.btn--secondary {
  background: var(--surface-3);
  border: 1px solid var(--line); border-top-color: var(--line-top);
  box-shadow: var(--shadow-1);
}
.btn--ghost { background: transparent; color: var(--text-2); }
.btn--ghost:hover { color: var(--text); }
.btn--success {
  color: #04140b;
  background: linear-gradient(180deg, #5cf0a7 0%, var(--green-500) 55%, #17a863 100%);
  box-shadow: var(--shadow-green);
}
.btn--danger {
  color: #fff;
  background: linear-gradient(180deg, #ff6b78, var(--red-500) 55%, #e2303f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 18px -6px rgba(255, 71, 87, 0.55);
}
.btn--ton {
  color: #fff;
  background: linear-gradient(180deg, #46aaff, var(--blue-500) 55%, var(--blue-600));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 18px -6px rgba(29, 143, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.btn--gold {
  color: #2a1700;
  background: linear-gradient(180deg, var(--gold-300), var(--gold-400) 50%, var(--gold-500));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 18px -6px rgba(245, 166, 35, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.btn:disabled, .btn[aria-disabled='true'] {
  cursor: default;
  background: var(--surface-3);
  color: var(--text-3);
  box-shadow: none;
}
.btn:disabled::before { display: none; }

/* loading */
.btn__spinner {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  opacity: 0; pointer-events: none;
}
.btn.is-loading { color: var(--text); }
.btn.is-loading:disabled { background: var(--surface-3); }
.btn.is-loading > :not(.btn__spinner) { opacity: 0; }
.btn.is-loading .btn__spinner { opacity: 0.9; animation: spin 0.7s linear infinite; }

/* icon buttons */
.icon-btn {
  --ib: 44px;
  display: inline-grid; place-items: center; flex: none;
  width: var(--ib); height: var(--ib);
  border-radius: var(--r-md);
  color: var(--text);
}
.icon-btn .ic { width: 22px; height: 22px; }
.icon-btn--surface {
  background: var(--surface-2);
  border: 1px solid var(--line); border-top-color: var(--line-top);
  box-shadow: var(--shadow-1);
}
.icon-btn--ghost { color: var(--text-2); }
.icon-btn--sm { --ib: 36px; border-radius: var(--r-sm); }
.icon-btn--sm .ic { width: 18px; height: 18px; }

/* ---------- badge / chip ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.01em; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.badge .ic { width: 13px; height: 13px; --ic-stroke: 2; }
.badge--violet { background: var(--primary-tint); color: var(--violet-300); }
.badge--green { background: var(--green-tint); color: var(--green-400); }
.badge--red { background: var(--red-tint); color: var(--red-400); }
.badge--gold { background: rgba(255, 203, 71, 0.14); color: var(--gold-400); }
.badge--blue { background: var(--blue-tint); color: var(--blue-400); }
.badge--solid { background: #fff; color: #17171a; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }

.live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--green-500);
  box-shadow: 0 0 0 3px rgba(34, 197, 120, 0.18), 0 0 10px rgba(34, 197, 120, 0.7);
  animation: pulse-dot 1.8s ease-in-out infinite;
}

/* ---------- avatar ---------- */
.avatar {
  --av: 40px;
  position: relative; flex: none;
  width: var(--av); height: var(--av);
  border-radius: 32%;
  overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--av-a), var(--av-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 6px rgba(0, 0, 0, 0.25);
}
.avatar__letter {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(var(--av) * 0.42); line-height: 1; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar--round { border-radius: 50%; }
.avatar--ring { overflow: visible; border-radius: 50%; }
.avatar--ring::after {
  /* 1.5px gradient ring with a 2px gap: lit from the top-left like every surface */
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  padding: 1.5px;
  background: linear-gradient(150deg, var(--violet-300), var(--violet-500) 45%, var(--violet-700));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(132, 104, 246, 0.35));
  pointer-events: none;
}
.avatar--ring img, .avatar--ring .avatar__letter { border-radius: 50%; }
.avatar--ring > .avatar__letter { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; overflow: hidden; }

/* ---------- money ---------- */
.coin {
  --coin: 1em;
  display: inline-block; flex: none;
  width: var(--coin); height: var(--coin);
  background: url('../img/gram.svg') center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(180, 110, 10, 0.45));
  vertical-align: -0.14em;
}
.amt {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
.amt--xs { font-size: var(--fs-xs); }
.amt--sm { font-size: var(--fs-sm); }
.amt--md { font-size: var(--fs-md); }
.amt--lg { font-size: var(--fs-xl); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.amt--xl { font-size: var(--fs-3xl); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
.amt--pos { color: var(--green-400); }
.amt--neg { color: var(--red-400); }
.amt--gold { color: var(--gold-400); }
.num.is-counting-up { color: var(--green-400); transition: color var(--dur-fast); }

/* ---------- headers ---------- */
.pagehead { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 var(--s-5); min-height: 44px; }
.pagehead__text { flex: 1; min-width: 0; }
.pagehead__sub { color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--s-1); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: var(--s-6) 0 var(--s-3); }
.section-head__title {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.01em;
}

/* ---------- list row ---------- */
.lrow {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 64px; padding: var(--s-3) var(--s-4);
  background: var(--surface-1);
  border: 1px solid var(--line); border-top-color: var(--line-top);
  border-radius: var(--r-lg);
}
.lrow + .lrow { margin-top: var(--s-2); }
.lrow__lead { flex: none; display: grid; place-items: center; }
.lrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lrow__title { font-weight: 700; font-size: var(--fs-md); }
.lrow__sub { color: var(--text-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.lrow__trail { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/* ---------- medallion (layered icon disc) ---------- */
.medallion {
  --md: 72px;
  --md-a: #a08bff; --md-b: #4b30c4; --md-ink: #efeaff; --md-glow: rgba(132, 104, 246, 0.35);
  position: relative; display: grid; place-items: center;
  width: var(--md); height: var(--md); border-radius: 50%;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, var(--md-a), var(--md-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 8px rgba(0, 0, 0, 0.35),
    0 10px 30px -8px var(--md-glow),
    0 2px 4px rgba(0, 0, 0, 0.4);
}
.medallion::before {
  /* outer hairline ring offset from the disc */
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(closest-side, transparent 86%, rgba(255, 255, 255, 0.03));
}
.medallion::after {
  /* inner bevel */
  content: ''; position: absolute; inset: 14%; border-radius: 50%;
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.18), rgba(255, 255, 255, 0.06));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.18);
}
.medallion__core { position: relative; z-index: 1; color: var(--md-ink); display: grid; place-items: center; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.medallion__core .ic { width: calc(var(--md) * 0.44); height: calc(var(--md) * 0.44); --ic-stroke: 1.9; --ic-fill: 0.22; }
.medallion--gold { --md-a: #ffe08a; --md-b: #d17d0c; --md-ink: #6a3a03; --md-glow: rgba(245, 166, 35, 0.35); }
.medallion--green { --md-a: #6ff0b0; --md-b: #0f8a52; --md-ink: #effff6; --md-glow: rgba(34, 197, 120, 0.35); }
.medallion--blue { --md-a: #7cc6ff; --md-b: #1458c0; --md-ink: #eef7ff; --md-glow: rgba(29, 143, 255, 0.35); }
.medallion--red { --md-a: #ff8f99; --md-b: #b3202f; --md-ink: #fff0f1; --md-glow: rgba(255, 71, 87, 0.3); }
.medallion--neutral { --md-a: #4a4a52; --md-b: #222226; --md-ink: #d9d8e0; --md-glow: rgba(0, 0, 0, 0.4); }

/* ---------- empty state ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--s-8) var(--s-6) var(--s-6);
  background: var(--surface-1);
  border: 1px solid var(--line); border-top-color: var(--line-top);
  border-radius: var(--r-2xl);
}
.empty__art { margin-bottom: var(--s-5); display: grid; place-items: center; }
.empty__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.01em; }
.empty__text { color: var(--text-2); font-size: var(--fs-sm); margin-top: var(--s-2); max-width: 30ch; }
.empty__action { margin-top: var(--s-5); width: 100%; display: flex; justify-content: center; }

/* ---------- skeleton ---------- */
.sk {
  position: relative; display: block; overflow: hidden;
  background: var(--surface-3);
}
.sk::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: shimmer 1.4s var(--ease-inout) infinite;
}
.sk--sub { margin-top: 6px; opacity: 0.7; }
.lrow--sk { animation: fade var(--dur-ui) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* ---------- segmented control ---------- */
.seg {
  --n: 2;
  position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr);
  padding: 4px; border-radius: var(--r-lg);
  background: var(--bg-0);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.seg__thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--n));
  border-radius: calc(var(--r-lg) - 4px);
  background: linear-gradient(180deg, #8f77ff, var(--violet-600));
  box-shadow: var(--shadow-primary);
  transition: transform var(--dur-ui) var(--ease-spring);
}
.seg__item {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 var(--s-2);
  border-radius: calc(var(--r-lg) - 4px);
  font-weight: 700; font-size: var(--fs-sm); color: var(--text-2);
}
.seg__item .ic { width: 18px; height: 18px; }
.seg__item.is-active { color: #fff; }
.seg__item.is-active .ic { --ic-fill: 0.25; }
.seg--lg .seg__item { flex-direction: column; gap: 4px; height: 64px; }
.seg--lg .seg__item .ic { width: 22px; height: 22px; }
.seg__badge {
  position: absolute; top: -8px; right: 6px; font-style: normal;
  padding: 1px 6px; border-radius: var(--r-pill); font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffb347, var(--orange-500)); color: #2a1200;
}

/* ---------- stepper ---------- */
.stepper { display: flex; flex-direction: column; gap: var(--s-2); }
.stepper__label { color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.stepper__row {
  display: flex; align-items: center; gap: 4px;
  height: 48px; padding: 4px;
  background: var(--bg-0); border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.stepper__btn {
  flex: none; width: 40px; height: 100%;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--line); border-top-color: var(--line-top);
  font-weight: 800; font-size: var(--fs-sm);
}
.stepper__btn .ic { width: 18px; height: 18px; --ic-stroke: 2.2; }
.stepper__field { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 100%; color: var(--text-2); }
.stepper__field .ic { width: 16px; height: 16px; }
.stepper__input {
  width: 100%; min-width: 0; height: 100%; border: 0; background: none; outline: none;
  text-align: center; font-weight: 800; font-size: var(--fs-lg); color: var(--text);
}
.stepper__suffix { color: var(--text-3); font-weight: 800; }
.stepper.is-disabled { opacity: 0.5; }

/* ---------- inputs ---------- */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field + .field { margin-top: var(--s-4); }
.field__label { color: var(--text-2); font-size: var(--fs-sm); font-weight: 600; }
.input {
  width: 100%; height: 50px; padding: 0 var(--s-4);
  background: var(--bg-0); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  font-weight: 650; outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder { color: var(--text-3); }
.input:focus { border-color: var(--violet-500); box-shadow: 0 0 0 3px var(--primary-tint), inset 0 1px 2px rgba(0, 0, 0, 0.35); }

/* ---------- switch ---------- */
.switch {
  position: relative; flex: none;
  width: 46px; height: 28px; border-radius: var(--r-pill);
  background: var(--surface-4);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: background-color var(--dur-ui) var(--ease-standard);
}
.switch__knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #dcdce4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  transition: transform var(--dur-ui) var(--ease-spring);
}
.switch.is-on { background: var(--violet-500); }
.switch.is-on .switch__knob { transform: translateX(18px); }
.switch:disabled { opacity: 0.5; }

/* ---------- bottom sheet ---------- */
#sheet-root { position: fixed; inset: 0; z-index: var(--z-sheet); pointer-events: none; }
.sheet { position: fixed; inset: 0; pointer-events: auto; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(5, 5, 7, 0.66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sheet__panel {
  position: relative; width: 100%; max-width: var(--app-max); margin: 0 auto;
  max-height: calc(100% - var(--tg-top) - 24px); overflow-y: auto;
  padding: 0 var(--s-5) calc(var(--s-5) + var(--safe-bottom));
  background: linear-gradient(180deg, #202024, var(--surface-1) 140px);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  border-top: 1px solid var(--line-top);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
  touch-action: pan-y;
}
.sheet__grabber { display: grid; place-items: center; height: 24px; cursor: grab; touch-action: none; }
.sheet__grabber i { width: 40px; height: 5px; border-radius: var(--r-pill); background: var(--surface-4); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) 0 var(--s-4); touch-action: none; }
.sheet__actions { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-5); }

/* ---------- toast ---------- */
#toast-root {
  /* sits just under the topbar (never over the balance / CTA); on views
     without a topbar it clears the floating HUD row instead */
  position: fixed; left: 0; right: 0; top: calc(var(--tg-top) + var(--topbar-h) + var(--s-2)); z-index: var(--z-toast);
  max-width: var(--app-max); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  pointer-events: none; padding: 0 var(--gutter);
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-3);
  max-width: min(100%, 440px); min-height: 48px; padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(46, 46, 52, 0.97), rgba(36, 36, 41, 0.97));
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line-strong); border-top-color: rgba(255, 255, 255, 0.16);
  box-shadow: var(--hl-top), 0 2px 6px rgba(0, 0, 0, 0.35), 0 16px 40px -8px rgba(0, 0, 0, 0.6);
  font-weight: 650; font-size: var(--fs-sm); line-height: var(--lh-snug);
}
.toast__icon {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--surface-4); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.toast__icon .ic { width: 18px; height: 18px; --ic-stroke: 2; --ic-fill: 0.18; }
body.no-topbar #toast-root { top: calc(var(--tg-top) + var(--s-16) + var(--s-1)); }
.toast--success .toast__icon { background: var(--green-tint); color: var(--green-400); }
.toast--error .toast__icon { background: var(--red-tint); color: var(--red-400); }
.toast--warning .toast__icon { background: rgba(255, 203, 71, 0.14); color: var(--gold-400); }
.toast--info .toast__icon { background: var(--primary-tint); color: var(--violet-300); }