/* =====================================================================
   TOP·20  —  HAM Edition
   Глубокий violet · золото · мята · pink · глянец · tactile
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;700;800;900&family=Onest:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap&subset=cyrillic,cyrillic-ext,latin');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  --bg-1:        #050207;
  --bg-2:        #0a0517;
  --bg-3:        #150828;
  --surface:     #1d1140;
  --surface-2:   #2a1a55;
  --surface-hi:  #371f6e;

  --border:      rgba(255,255,255,.06);
  --border-2:    rgba(255,255,255,.12);
  --border-3:    rgba(255,255,255,.20);

  --text:        #ffffff;
  --text-2:      rgba(255,255,255,.66);
  --text-3:      rgba(255,255,255,.38);
  --text-4:      rgba(255,255,255,.18);

  --gold:        #ffcd3c;
  --gold-hi:     #ffe88a;
  --gold-deep:   #ff7800;
  --gold-glow:   rgba(255,205,60,.32);

  --mint:        #5fffb6;
  --mint-deep:   #1edc8c;
  --mint-text:   #002a14;
  --mint-glow:   rgba(95,255,182,.32);

  --pink:        #ff5fa2;
  --pink-deep:   #ff1979;
  --pink-glow:   rgba(255,95,162,.28);

  --violet:      #9056ff;
  --violet-deep: #6029dd;
  --violet-glow: rgba(144,86,255,.32);

  --blue:        #5dceff;

  --display:     'Unbounded', system-ui, sans-serif;
  --sans:        'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-card:      20px;
  --r-inner:     16px;
  --r-btn:       14px;
  --r-pill:      999px;

  --ease:        cubic-bezier(.32,.72,0,1);
  --ease-back:   cubic-bezier(.34,1.56,.64,1);
}

html, body {
  height: 100%;
  background: var(--bg-1);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
}

/* Atmosphere */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 600px at 50% -10%, var(--violet-glow), transparent 60%),
    radial-gradient(600px 400px at 100% 100%, var(--gold-glow), transparent 60%),
    radial-gradient(500px 400px at 0% 70%, var(--pink-glow), transparent 60%);
  opacity: .55;
}
/* Star particles */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.5px 1.5px at 78% 12%, var(--gold), transparent),
    radial-gradient(1px 1px at 48% 28%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 22% 78%, var(--pink), transparent),
    radial-gradient(1px 1px at 88% 65%, var(--mint), transparent),
    radial-gradient(2px 2px at 65% 45%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 32% 58%, var(--gold), transparent),
    radial-gradient(1px 1px at 5% 92%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.5px 1.5px at 96% 30%, var(--violet), transparent);
}

button, input, select, textarea {
  font: inherit; color: inherit;
  background: none; border: 0; outline: 0;
  cursor: pointer;
}

#app {
  position: relative;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  z-index: 1;
}

.screen {
  position: absolute;
  inset: 0;
  padding: 12px 14px 96px;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
.screen.active { opacity: 1; pointer-events: auto; }

/* =================================== TOPBAR =================================== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 4px 14px;
  margin-bottom: 12px;
}
.user { display: flex; align-items: center; gap: 12px; }
.user__avatar {
  width: 44px; height: 44px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, #ffe88a, var(--gold-deep) 75%);
  display: grid; place-items: center;
  font-size: 22px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -2px 5px rgba(0,0,0,.25),
    0 8px 20px -4px rgba(255,150,0,.5);
}
.user__info { line-height: 1.2; }
.user__name { font-weight: 700; font-size: 14px; letter-spacing: -.005em; }
.user__level {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--text-3);
  margin-top: 3px;
  font-weight: 500;
  text-transform: uppercase;
}
.user__level #userVipLabel { color: var(--gold); font-weight: 700; }

.topbar__right { display: flex; align-items: center; gap: 8px; }

.iconbtn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  font-size: 14px;
  transition: background .18s, border-color .18s, transform .12s;
}
.iconbtn:hover, .iconbtn:active { background: rgba(255,255,255,.1); transform: scale(.95); }
.iconbtn.muted { opacity: .42; }

.balance {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .12s;
}
.balance:active { transform: scale(.97); }
.balance__amount { color: var(--gold); font-feature-settings: 'tnum'; letter-spacing: -.005em; }
.balance__plus {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--mint), var(--mint-deep));
  color: var(--mint-text);
  display: grid; place-items: center;
  font-weight: 900;
  font-size: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 4px 10px -2px var(--mint-glow);
}

/* =================================== TICKER =================================== */
.ticker {
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-pill);
  padding: 7px 0;
  margin-bottom: 16px;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker__track {
  display: flex; gap: 30px;
  white-space: nowrap;
  animation: tick 32s linear infinite;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  padding-left: 16px;
}
.ticker__track span::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--mint);
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--mint-glow);
}
.ticker__track span:nth-child(odd)::before { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }
@keyframes tick { to { transform: translateX(-50%); } }

/* =================================== TOP WIN TODAY (hero) =================================== */
.topWin {
  margin: 0 2px 18px;
  padding: 20px 20px 16px;
  position: relative;
  border-radius: var(--r-card);
  background:
    radial-gradient(circle 280px at 50% -20%, rgba(255,205,60,.22), transparent 60%),
    linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid rgba(255,205,60,.28);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,205,60,.32),
    0 14px 48px -10px rgba(255,205,60,.22);
}
.topWin__label {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: 6px;
}
.topWin__pulse {
  width: 7px; height: 7px;
  background: var(--pink);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--pink), 0 0 18px rgba(255,95,162,.5);
  animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.85); }
}

.topWin__amountWrap {
  text-align: center;
}
.topWin__amount {
  font-family: var(--display);
  font-weight: 900;
  font-size: 56px;
  letter-spacing: -.045em;
  background: linear-gradient(180deg, #fff7c4 0%, var(--gold) 45%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  filter: drop-shadow(0 4px 18px rgba(255,150,0,.4));
  font-feature-settings: 'tnum';
  display: inline-block;
}
.topWin__amount.empty {
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.15));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 42px;
  filter: none;
  letter-spacing: -.03em;
}

.topWin__winner {
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
  margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
}
.topWin__winner b { color: var(--text); font-weight: 800; }
.topWin__winnerAv {
  width: 22px; height: 22px;
  background: rgba(255,255,255,.08);
  border-radius: 7px;
  display: inline-grid; place-items: center;
  font-size: 13px;
}
.topWin__roomChip {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(255,205,60,.1);
  border: 1px solid rgba(255,205,60,.3);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-weight: 700;
}
.topWin__time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: .04em;
}

.topWin__meta {
  display: flex; justify-content: center; gap: 24px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.topWin__metaItem {
  text-align: center;
}
.topWin__metaItem small {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 3px;
}
.topWin__metaItem b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.015em;
  font-feature-settings: 'tnum';
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =================================== VIP STRIP =================================== */
.vipStrip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background:
    radial-gradient(circle 200px at 0% 50%, rgba(255,205,60,.1), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(255,205,60,.16);
  border-radius: var(--r-inner);
  margin-bottom: 12px;
}
.vipStrip__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.vipStrip__rank {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -.005em;
  line-height: 1.2;
  margin-top: 2px;
}
.vipStrip__bar {
  height: 6px;
  background: rgba(0,0,0,.3);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.vipStrip__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-hi));
  border-radius: var(--r-pill);
  box-shadow: 0 0 8px var(--gold-glow);
  transition: width .4s var(--ease);
}
.vipStrip__right {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  font-feature-settings: 'tnum';
  text-align: right;
  line-height: 1.1;
}
.vipStrip__right small {
  display: block;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--text-3);
  font-weight: 600;
  margin-top: 3px;
  text-transform: uppercase;
}

/* =================================== BONUS =================================== */
.bonus {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background:
    radial-gradient(circle 200px at 100% 50%, rgba(255,205,60,.08), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-inner);
  margin-bottom: 12px;
  transition: background .18s;
}
.bonus__icon {
  width: 40px; height: 40px;
  background:
    radial-gradient(circle at 30% 30%, #ffe690, var(--gold-deep) 70%);
  color: #2a1500;
  display: grid; place-items: center;
  font-size: 18px;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 4px 12px -2px var(--gold-glow);
}
.bonus__body { flex: 1; }
.bonus__title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.005em;
}
.bonus__sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 3px;
  font-weight: 500;
}
.bonus__btn {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-deep));
  color: #2a1500;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 4px 10px -2px var(--gold-glow);
  transition: transform .12s, filter .12s;
}
.bonus__btn:hover { filter: brightness(1.08); }
.bonus__btn:active { transform: scale(.96); }
.bonus__btn:disabled { opacity: .45; pointer-events: none; }

/* =================================== ROOMS CATEGORIES =================================== */
.rooms { display: flex; flex-direction: column; gap: 18px; }

.cat__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}
.cat__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 11px;
  border: 1px solid;
  border-radius: var(--r-pill);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: -.005em;
  font-weight: 700;
}
.cat__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.cat__sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--text-3);
  font-weight: 500;
}
.cat--locked .cat__chip { opacity: .55; }

.cat__rooms { display: flex; flex-direction: column; gap: 8px; }

/* === GLOSSY ROOM CARDS === */
.rcard {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  background:
    radial-gradient(circle 240px at 100% 0%, rgba(255,255,255,.04), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-card);
  padding: 14px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 24px -10px rgba(0,0,0,.5);
  transition: transform .12s var(--ease), filter .15s;
  overflow: hidden;
  isolation: isolate;
}
.rcard:hover { filter: brightness(1.1); }
.rcard:active { transform: scale(.99); }
.rcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--rc-accent, var(--gold));
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px var(--rc-accent, var(--gold));
}
.rcard--accent-gold  { --rc-accent: var(--gold); }
.rcard--accent-mint  { --rc-accent: var(--mint); }
.rcard--accent-red, .rcard--accent-pink { --rc-accent: var(--pink); }
.rcard--accent-plum  { --rc-accent: var(--violet); }

.rcard--locked {
  opacity: .55;
  cursor: not-allowed;
}
.rcard__lock {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.1);
  padding: 4px 9px;
  border-radius: var(--r-pill);
  font-weight: 700;
}

.rcard__promo {
  position: absolute;
  top: 0; right: 0;
  background: linear-gradient(180deg, var(--mint), var(--mint-deep));
  color: var(--mint-text);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  padding: 4px 10px;
  border-bottom-left-radius: 10px;
  z-index: 2;
  text-transform: uppercase;
  box-shadow: 0 4px 12px -2px var(--mint-glow);
}

.rcard__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
}
.rcard__name {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.rcard__badge {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  border: 1px solid;
  font-weight: 700;
  white-space: nowrap;
}
.rcard__badge--open { color: var(--mint); border-color: rgba(95,255,182,.4); background: rgba(95,255,182,.08); }
.rcard__badge--live {
  color: var(--gold);
  border-color: rgba(255,205,60,.4);
  background: rgba(255,205,60,.1);
  font-feature-settings: 'tnum';
}
.rcard__badge--full {
  color: var(--pink);
  border-color: rgba(255,95,162,.4);
  background: rgba(255,95,162,.1);
}

.rcard__mid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  margin-bottom: 10px;
}
.rcard__bankLabel, .rcard__entryLabel {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 3px;
}
.rcard__bankVal {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 800;
  font-feature-settings: 'tnum';
  letter-spacing: -.03em;
  background: linear-gradient(180deg, #fff8d0, var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(255,150,0,.3));
}
.rcard__bankVal small {
  font-size: 14px;
  margin-left: 1px;
}
.rcard__entry { text-align: right; }
.rcard__entryVal {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  font-feature-settings: 'tnum';
  letter-spacing: -.02em;
  line-height: 1;
}
.rcard__entryVal small { font-size: 11px; color: var(--text-3); margin-left: 1px; }

.rcard__bottom {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--text-3);
  font-weight: 600;
}
.rcard__count {
  color: var(--text);
  font-feature-settings: 'tnum';
  font-weight: 700;
}
.rcard__bar {
  height: 4px;
  background: rgba(0,0,0,.4);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.rcard__barFill {
  height: 100%;
  background: linear-gradient(90deg, var(--rc-accent, var(--gold)), color-mix(in srgb, var(--rc-accent, var(--gold)) 70%, white));
  transition: width .35s var(--ease);
  box-shadow: 0 0 8px var(--rc-accent, var(--gold));
}
.rcard__meta {
  font-size: 10px;
  white-space: nowrap;
}

.rcard__payout {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.rcard__payout span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  padding: 3px 9px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-pill);
  color: var(--text-3);
  font-weight: 600;
  font-feature-settings: 'tnum';
}
.rcard__payout span b {
  color: var(--gold);
  font-weight: 800;
  margin-right: 4px;
}

/* =================================== TAB BAR =================================== */
.tabbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(10,5,23,.82);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 8px 8px calc(12px + env(safe-area-inset-bottom));
  z-index: 5;
  transition: transform .3s var(--ease);
}
.tabbar--hidden { transform: translateY(110%); pointer-events: none; }
.tab {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 6px 4px 4px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--text-3);
  font-weight: 700;
  position: relative;
  border-radius: 14px;
  transition: color .18s var(--ease), transform .12s;
}
.tab:hover { color: var(--text-2); }
.tab:active { transform: scale(.95); }

.tab__icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 10px;
  transition: background .2s var(--ease), transform .2s var(--ease-back);
}
.tab__icon svg {
  width: 24px; height: 24px;
  display: block;
  color: var(--text-3);
  transition: color .2s var(--ease);
}

/* hover state */
.tab:hover .tab__icon svg { color: var(--text-2); }

/* active state — glossy golden chip behind icon */
.tab.active {
  color: var(--text);
}
.tab.active .tab__icon {
  background:
    radial-gradient(circle at 30% 25%, #fff5b0, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -1px 4px rgba(0,0,0,.18),
    0 6px 16px -4px var(--gold-glow),
    0 0 22px -6px var(--gold);
  transform: translateY(-2px);
}
.tab.active .tab__icon svg {
  color: #2a1500;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.4));
}
.tab.active::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 3px;
  background: var(--gold);
  border-radius: 999px;
  box-shadow: 0 0 10px var(--gold);
}

/* =================================== WAIT =================================== */
.screen--wait { padding: 32px 18px 32px; }
.wait__head { text-align: center; margin-bottom: 14px; }
.wait__roomTag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  background: rgba(255,205,60,.1);
  border: 1px solid rgba(255,205,60,.4);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  display: inline-block;
  margin-bottom: 12px;
}
.wait__title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 10px;
}
.wait__count {
  font-family: var(--display);
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -.05em;
  font-feature-settings: 'tnum';
  line-height: 1;
}
.wait__count span {
  background: linear-gradient(180deg, var(--mint), var(--mint-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wait__bank {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  margin: 14px 0 32px;
  font-weight: 600;
  letter-spacing: .04em;
}
.wait__bank b {
  font-family: var(--display);
  background: linear-gradient(180deg, #fff8d0, var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 20px;
  font-weight: 800;
  margin-left: 8px;
  font-feature-settings: 'tnum';
  letter-spacing: -.02em;
}

.seats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 0 auto 28px;
  max-width: 340px;
}
.seat {
  aspect-ratio: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 20px;
  position: relative;
  transition: transform .35s var(--ease-back), background .3s, border-color .3s;
  color: var(--text-4);
}
.seat::before {
  content: attr(data-num);
  position: absolute;
  top: 4px; left: 6px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-4);
}
.seat.in {
  background: linear-gradient(135deg, var(--surface-hi), var(--surface-2));
  border-color: rgba(255,255,255,.16);
  color: var(--text);
}
.seat.you {
  background: linear-gradient(135deg, var(--mint), var(--mint-deep));
  color: var(--mint-text);
  border-color: var(--mint);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.4),
    0 6px 24px -4px var(--mint-glow);
}
.seat.you::before { color: rgba(0,29,16,.5); }
.seat.you::after {
  content: 'ТЫ';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  background: var(--mint-text);
  color: var(--mint);
  padding: 2px 8px;
  border-radius: 5px;
}

.wait__bottom { text-align: center; }
.wait__status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 18px;
  min-height: 22px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.wait__status.go {
  font-family: var(--display);
  font-size: 96px;
  font-weight: 900;
  letter-spacing: -.06em;
  background: linear-gradient(180deg, var(--mint), var(--mint-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  animation: countdownPop .9s var(--ease-back);
  text-transform: none;
  filter: drop-shadow(0 6px 30px var(--mint-glow));
}
@keyframes countdownPop {
  0% { transform: scale(.3); opacity: 0; }
  40% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.btn-ghost {
  display: inline-block;
  background: rgba(255,255,255,.04);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 11px 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  transition: background .18s, border-color .18s;
}
.btn-ghost:hover, .btn-ghost:active {
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-color: rgba(255,255,255,.22);
}

/* =================================== WHEEL =================================== */
.screen--wheel {
  padding: 20px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wheel__top {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  margin-bottom: 12px;
}
.wheel__roomTag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(255,205,60,.1);
  border: 1px solid rgba(255,205,60,.4);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-weight: 700;
}
.wheel__bank {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
}
.wheel__bank b {
  font-family: var(--display);
  background: linear-gradient(180deg, #fff8d0, var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 16px;
  font-weight: 800;
  margin-left: 6px;
  font-feature-settings: 'tnum';
  letter-spacing: -.02em;
}

.wheel__container {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  margin: 12px auto 16px;
}
.wheel__svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(255,150,0,.15));
}
#wheelRotor {
  transform-origin: 200px 200px;
}
.wheel__pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  filter: drop-shadow(0 4px 10px var(--gold-glow));
}
.wheel__center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #fff5b0, var(--gold-deep) 70%);
  display: grid; place-items: center;
  flex-direction: column;
  text-align: center;
  pointer-events: none;
  box-shadow:
    inset 0 4px 10px rgba(255,255,255,.5),
    inset 0 -4px 10px rgba(0,0,0,.3),
    0 0 40px var(--gold-glow),
    0 10px 30px -4px rgba(255,150,0,.5);
  z-index: 3;
}
.wheel__centerLabel {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(60,30,0,.7);
  font-weight: 800;
  margin-bottom: -4px;
}
.wheel__centerVal {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -.04em;
  font-feature-settings: 'tnum';
  color: #2a1500;
  line-height: 1;
}

.wheel__phase {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
  margin-top: 8px;
  text-align: center;
}
.wheel__hint {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-2);
  margin-top: 8px;
  font-weight: 600;
  text-align: center;
}

/* =================================== RESULT =================================== */
.screen--result {
  padding: 26px 18px 24px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.result__top {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 4px;
  min-height: 60px;
  animation: floatBounce 2s ease-in-out infinite;
  filter: drop-shadow(0 8px 20px var(--gold-glow));
}
@keyframes floatBounce { 50% { transform: translateY(-6px); } }

.result__place { margin-bottom: 8px; }
.result__placeLabel {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
  margin-bottom: -4px;
}
.result__placeNum {
  font-family: var(--display);
  font-weight: 900;
  font-size: 144px;
  letter-spacing: -.08em;
  line-height: 1;
  font-feature-settings: 'tnum';
}
.screen--result.win .result__placeNum {
  background: linear-gradient(180deg, #fff5d0 0%, var(--gold) 45%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 30px rgba(255,150,0,.5));
}
.screen--result.lose .result__placeNum {
  background: linear-gradient(180deg, #ffadc0, var(--pink-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 24px var(--pink-glow));
}

.result__prize {
  margin: 18px auto 14px;
  padding: 18px;
  width: 80%;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,205,60,.32), transparent 60%),
    linear-gradient(180deg, rgba(255,205,60,.18), rgba(255,205,60,.04));
  border: 1px solid rgba(255,205,60,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,205,60,.5),
    0 0 50px -10px var(--gold-glow);
}
.result__prizeLabel {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 4px;
}
.result__prizeNum {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  font-feature-settings: 'tnum';
  background: linear-gradient(180deg, #fff8d0, var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px rgba(255,150,0,.45));
}

.result__miss {
  text-align: center;
  background: rgba(255,95,162,.06);
  border: 1px solid rgba(255,95,162,.3);
  color: var(--pink);
  padding: 14px;
  border-radius: var(--r-inner);
  margin: 10px 0 14px;
  font-size: 14px;
  font-weight: 700;
}
.result__miss b { font-weight: 800; }
.result__miss small {
  display: block;
  font-family: var(--mono);
  color: var(--text-3);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .04em;
  margin-top: 6px;
  text-transform: none;
}

.result__list {
  flex: 1;
  overflow-y: auto;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-inner);
  margin-bottom: 14px;
  max-height: 200px;
}
.result__list::-webkit-scrollbar { display: none; }
.result__row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 13px;
  text-align: left;
}
.result__row:last-child { border-bottom: 0; }
.result__row .rp {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  color: var(--text-3);
  font-feature-settings: 'tnum';
  text-align: right;
}
.result__row .rprize {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold);
  font-feature-settings: 'tnum';
  font-weight: 700;
}
.result__row.you { background: rgba(255,205,60,.08); }
.result__row.you .rp { color: var(--gold); }
.result__row.lose .rp { color: var(--pink); }
.result__row.lose .rprize { color: var(--text-4); }

.result__verify { display: none; }
.result__actions { display: flex; flex-direction: column; gap: 10px; }
.result__actions .btn-ghost { align-self: center; }

/* === GLOSSY CTA (used on result + everywhere else) === */
.cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: linear-gradient(180deg, var(--mint), var(--mint-deep));
  color: var(--mint-text);
  padding: 16px 18px;
  border: 0;
  border-radius: var(--r-btn);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.005em;
  transition: transform .15s var(--ease), filter .2s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 5px rgba(0,40,20,.18),
    0 10px 28px -6px var(--mint-glow);
  position: relative;
  text-align: left;
}
.cta:hover { filter: brightness(1.06); }
.cta:active { transform: scale(.985); filter: brightness(.95); }
.cta::after {
  content: '→';
  font-size: 22px;
  font-weight: 900;
}
.cta__label { display: block; font-weight: 800; }
.cta__sub {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  opacity: .55;
  margin-top: 2px;
  letter-spacing: .04em;
}
.cta--small { padding: 14px 16px; font-size: 14px; }

/* === PODIUM (top-3 on result screen) === */
.podium {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin: 14px 0;
}
.podium__col {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px 6px 8px;
  text-align: center;
}
.podium__col.gold {
  background: linear-gradient(180deg, rgba(255,205,60,.18), rgba(255,205,60,.04));
  border-color: rgba(255,205,60,.4);
  transform: translateY(-8px);
}
.podium__col.silver {
  background: linear-gradient(180deg, rgba(170,180,200,.14), rgba(170,180,200,.02));
  border-color: rgba(170,180,200,.3);
}
.podium__col.bronze {
  background: linear-gradient(180deg, rgba(200,120,70,.16), rgba(200,120,70,.04));
  border-color: rgba(200,120,70,.4);
}
.podium__num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
.podium__col.gold .podium__num { color: var(--gold); }
.podium__col.silver .podium__num { color: #ccd0dd; }
.podium__col.bronze .podium__num { color: #e08c5a; }
.podium__av {
  width: 32px; height: 32px;
  margin: 0 auto 4px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  display: grid; place-items: center;
  font-size: 16px;
}
.podium__name {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 2px;
}
.podium__prize {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  font-feature-settings: 'tnum';
}
.podium__col.gold .podium__prize { color: var(--gold); }
.podium__col.silver .podium__prize { color: #ccd0dd; }
.podium__col.bronze .podium__prize { color: #e08c5a; }

/* =================================== SUB-PAGES =================================== */
.page__head {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0 16px;
  margin-bottom: 14px;
}
.back {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  display: grid; place-items: center;
  font-size: 18px;
  color: var(--text-2);
  transition: background .15s, transform .12s;
}
.back:hover, .back:active { background: rgba(255,255,255,.1); transform: scale(.95); }
.page__title {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.025em;
}
.section__title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
  display: flex; align-items: center; gap: 12px;
  padding: 18px 0 10px;
}
.section__title::after { content: ''; flex: 1; border-top: 1px solid rgba(255,255,255,.08); }

/* PROFILE — HAM-style premium */
.profCard {
  position: relative;
  margin: 0 2px 18px;
  padding: 24px 22px 22px;
  border-radius: var(--r-card);
  background:
    radial-gradient(circle 280px at 50% -10%, rgba(255,205,60,.18), transparent 60%),
    radial-gradient(circle 240px at 50% 100%, rgba(144,86,255,.18), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(255,205,60,.22);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 16px 48px -12px rgba(255,150,0,.2);
}
.profCard__glow {
  position: absolute;
  inset: -50% -20% auto -20%;
  height: 60%;
  background:
    radial-gradient(closest-side, rgba(255,205,60,.22), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
.profCard > * { position: relative; z-index: 1; }

.profCard__avWrap {
  position: relative;
  width: 88px; height: 88px;
  margin: 0 auto 12px;
}
.profCard__avWrap::before {
  /* outer golden ring with rotating gradient */
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 26px;
  background: conic-gradient(from 0deg, var(--gold), var(--gold-deep), #fff8d0, var(--gold), var(--gold-deep));
  filter: blur(4px);
  opacity: .55;
  animation: ringSpin 8s linear infinite;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
.profCard__avatar {
  position: relative;
  width: 88px; height: 88px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 28%, #fff5b0, var(--gold) 55%, var(--gold-deep) 100%);
  display: grid; place-items: center;
  font-size: 42px;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,.55),
    inset 0 -3px 6px rgba(0,0,0,.25),
    0 10px 30px -4px rgba(255,150,0,.55);
}

.profCard__name {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}

.profCard__vip {
  display: inline-block;
  padding: 6px 16px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(255,205,60,.1);
  border: 1px solid rgba(255,205,60,.4);
  margin-bottom: 20px;
  border-radius: var(--r-pill);
  font-weight: 800;
}

/* Big balance display — the hero element */
.profCard__balance {
  position: relative;
  padding: 14px 16px 14px;
  margin: 0 -4px 18px;
  background:
    radial-gradient(circle 200px at 50% 0%, rgba(255,205,60,.16), transparent 60%),
    rgba(0,0,0,.25);
  border: 1px solid rgba(255,205,60,.18);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,205,60,.18),
    inset 0 -1px 0 rgba(0,0,0,.2);
}
.profCard__balanceLabel {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: 2px;
}
.profCard__balanceVal {
  font-family: var(--display);
  font-weight: 900;
  font-size: 48px;
  letter-spacing: -.04em;
  line-height: 1;
  background: linear-gradient(180deg, #fff7c4 0%, var(--gold) 45%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 16px rgba(255,150,0,.4));
  font-feature-settings: 'tnum';
}
.profCard__balanceVal small {
  font-size: 22px;
  vertical-align: 8px;
  margin-left: 2px;
}

/* Deposit / Withdraw buttons */
.profCard__balanceBtns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.balBtn {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -.01em;
  transition: transform .12s var(--ease), filter .15s;
  position: relative;
}
.balBtn svg { width: 16px; height: 16px; }
.balBtn:active { transform: scale(.96); }

/* Primary — Deposit: glossy mint */
.balBtn--deposit {
  background: linear-gradient(180deg, var(--mint), var(--mint-deep));
  color: var(--mint-text);
  border: 0;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -2px 4px rgba(0,40,20,.18),
    0 6px 18px -4px var(--mint-glow);
}
.balBtn--deposit:hover { filter: brightness(1.06); }

/* Secondary — Withdraw: outline */
.balBtn--withdraw {
  background: rgba(255,255,255,.04);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.balBtn--withdraw:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); }
.balBtn--withdraw svg { color: var(--text-2); }

.profCard__progress {}
.profCard__progressBar {
  height: 6px;
  background: rgba(0,0,0,.4);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: 8px;
}
.profCard__progressFill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-hi));
  border-radius: var(--r-pill);
  box-shadow: 0 0 10px var(--gold-glow);
  transition: width .4s var(--ease);
}
.profCard__progressMeta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: .04em;
  font-weight: 600;
}
.profCard__progressMeta b {
  color: var(--gold);
  font-weight: 800;
  font-feature-settings: 'tnum';
  margin-right: 3px;
}

/* Section title with badge */
.section__title {
  display: flex; align-items: center; gap: 10px;
}
.section__title > span:first-child { flex-shrink: 0; }
.section__badge {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 2px 8px;
  background: rgba(255,205,60,.12);
  color: var(--gold);
  border: 1px solid rgba(255,205,60,.4);
  border-radius: var(--r-pill);
  font-feature-settings: 'tnum';
}

/* History list — chunkier, premium */
.history { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.history__row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background:
    radial-gradient(circle 200px at 0% 50%, var(--rh-glow, rgba(255,255,255,.04)), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-inner);
  position: relative;
  overflow: hidden;
}
.history__row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--rh-accent, rgba(255,255,255,.1));
  box-shadow: 0 0 8px var(--rh-accent, transparent);
}
.history__row.win { --rh-accent: var(--gold); --rh-glow: rgba(255,205,60,.06); }
.history__row.lose { --rh-accent: var(--pink); --rh-glow: rgba(255,95,162,.06); }
.history__left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.history__place {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -.02em;
  position: relative;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 2px rgba(0,0,0,.2);
}
.history__place.win {
  background: radial-gradient(circle at 30% 28%, #fff5b0, var(--gold) 55%, var(--gold-deep) 100%);
  color: #2a1500;
}
.history__place.lose {
  background: radial-gradient(circle at 30% 28%, #ffb0c8, var(--pink) 55%, var(--pink-deep) 100%);
  color: #2a0014;
}
.history__info { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.history__info small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  margin-top: 3px;
  font-weight: 500;
  letter-spacing: .04em;
}
.history__prize {
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 800;
  font-feature-settings: 'tnum';
  font-size: 17px;
  letter-spacing: -.02em;
  text-align: right;
}
.history__prize.win {
  background: linear-gradient(180deg, #fff7c4, var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 6px rgba(255,150,0,.4));
}
.history__prize.lose { color: var(--pink); }
.history__prize small {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-3);
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: .04em;
  -webkit-text-fill-color: var(--text-3);
}
.history__verify { display: none; }

/* VIP list — chunkier with glossy badges */
.vipList { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.vipRow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-inner);
  transition: background .15s;
}
.vipRow.cur {
  background:
    radial-gradient(circle 220px at 100% 50%, rgba(255,205,60,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,205,60,.1), rgba(255,205,60,.02));
  border-color: rgba(255,205,60,.4);
  box-shadow: 0 6px 24px -10px var(--gold-glow);
}
.vipRow__b {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -.02em;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -1px 3px rgba(0,0,0,.25),
    0 4px 14px -2px rgba(0,0,0,.5);
}
.vipRow__b--bronze { background: linear-gradient(135deg, #d9a673, #8b5a2e); color: #fff; }
.vipRow__b--silver { background: linear-gradient(135deg, #e8edf5, #8b96b0); color: #2c3045; }
.vipRow__b--gold   { background: radial-gradient(circle at 30% 28%, #fff5b0, var(--gold) 55%, var(--gold-deep) 100%); color: #2a1500; }
.vipRow__b--plat   { background: linear-gradient(135deg, #b3f0ff, #4dc8e0); color: #002d3a; }
.vipRow__b--dia    { background: linear-gradient(135deg, #ff9be0, #c01a78); color: #fff; }

.vipRow__l {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.vipRow__l small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: .04em;
}
.vipRow__chk {
  font-size: 16px;
  color: var(--text-4);
  transition: color .2s;
}
.vipRow.cur .vipRow__chk {
  color: var(--gold);
  filter: drop-shadow(0 0 6px var(--gold-glow));
}

.history { display: flex; flex-direction: column; gap: 6px; }
.history__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-inner);
}
.history__left { display: flex; align-items: center; gap: 12px; }
.history__place {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 900;
  font-size: 16px;
}
.history__place.win { background: rgba(255,205,60,.18); color: var(--gold); border: 1px solid rgba(255,205,60,.4); }
.history__place.lose { background: rgba(255,95,162,.12); color: var(--pink); border: 1px solid rgba(255,95,162,.3); }
.history__info { font-size: 13px; font-weight: 600; }
.history__info small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
  font-weight: 500;
}
.history__prize {
  font-family: var(--mono);
  font-weight: 800;
  font-feature-settings: 'tnum';
  font-size: 14px;
}
.history__prize.win { color: var(--gold); }
.history__prize.lose { color: var(--pink); }
.history__verify { display: none; }

/* FRIENDS */
.refCard {
  background:
    radial-gradient(circle 240px at 0% 0%, var(--mint-glow), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(95,255,182,.3);
  border-radius: var(--r-card);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 32px -10px var(--mint-glow);
}
.refCard__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.refCard__icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--mint), var(--mint-deep));
  color: var(--mint-text);
  display: grid; place-items: center;
  border-radius: 14px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 900;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.4),
    0 4px 14px -2px var(--mint-glow);
}
.refCard__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.refCard__sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  font-weight: 500;
}
.refCard__earnings {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: .04em;
}
.refCard__earnings b {
  font-family: var(--display);
  color: var(--mint);
  font-size: 26px;
  font-weight: 900;
  font-feature-settings: 'tnum';
  letter-spacing: -.025em;
  filter: drop-shadow(0 2px 8px var(--mint-glow));
}
.refCard__link {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  word-break: break-all;
  color: var(--text-2);
  margin-bottom: 12px;
  font-weight: 500;
}
.refCard__actions { display: flex; gap: 8px; }
.refCard__actions .cta { flex: 1; }
.refCard__actions .btn-ghost { padding: 14px 18px; }

.refList { display: flex; flex-direction: column; gap: 6px; }
.refRow {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-inner);
}
.refRow__a {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 16px;
}
.refRow__info { flex: 1; font-size: 14px; font-weight: 600; }
.refRow__info small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
  font-weight: 500;
}
.refRow__earned {
  font-family: var(--mono);
  color: var(--mint);
  font-weight: 800;
  font-feature-settings: 'tnum';
  font-size: 13px;
}

.empty {
  text-align: center;
  color: var(--text-3);
  padding: 32px 12px;
  font-size: 13px;
  font-weight: 600;
}

/* =================================== TOURNAMENT CARDS =================================== */
.trnCard {
  position: relative;
  margin: 0 2px 16px;
  padding: 22px 20px 18px;
  border-radius: var(--r-card);
  background:
    radial-gradient(circle 320px at 50% -10%, rgba(255,205,60,.20), transparent 60%),
    radial-gradient(circle 240px at 100% 100%, rgba(255,95,162,.10), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(255,205,60,.3);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,205,60,.3),
    0 16px 50px -12px rgba(255,150,0,.22);
  isolation: isolate;
}
.trnCard--mint {
  background:
    radial-gradient(circle 320px at 50% -10%, rgba(95,255,182,.20), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: rgba(95,255,182,.32);
  box-shadow: inset 0 1px 0 rgba(95,255,182,.3), 0 16px 50px -12px rgba(0,200,140,.22);
}
.trnCard--red {
  background:
    radial-gradient(circle 320px at 50% -10%, rgba(255,95,162,.22), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: rgba(255,95,162,.32);
}
.trnCard--plum {
  background:
    radial-gradient(circle 320px at 50% -10%, rgba(144,86,255,.22), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color: rgba(144,86,255,.32);
}

.trnCard__halo {
  position: absolute;
  inset: -50% -20% auto -20%;
  height: 60%;
  background: radial-gradient(closest-side, rgba(255,205,60,.16), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
  z-index: -1;
}

.trnCard__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.trnCard__type {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
  flex: 1;
  line-height: 1.4;
}

.trnLiveBadge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(95,255,182,.14);
  color: var(--mint);
  border: 1px solid rgba(95,255,182,.4);
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
.trnLive__pulse {
  width: 7px; height: 7px;
  background: var(--mint);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--mint);
  animation: pulseDot 1.2s ease-in-out infinite;
}

.trnCountdown {
  text-align: right;
  flex-shrink: 0;
}
.trnCountdown__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.trnCountdown__val {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.02em;
  color: var(--gold);
  font-feature-settings: 'tnum';
  margin-top: 2px;
}

.trnCard__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 4px;
}
.trnCard__desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.45;
  margin-bottom: 14px;
}

.trnPrize {
  background:
    radial-gradient(circle 200px at 50% 0%, rgba(255,205,60,.18), transparent 60%),
    rgba(0,0,0,.25);
  border: 1px solid rgba(255,205,60,.2);
  border-radius: 18px;
  padding: 16px;
  margin: 12px 0;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,205,60,.2);
}
.trnPrize__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: 2px;
}
.trnPrize__val {
  font-family: var(--display);
  font-weight: 900;
  font-size: 44px;
  letter-spacing: -.04em;
  line-height: 1;
  background: linear-gradient(180deg, #fff7c4, var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-feature-settings: 'tnum';
  filter: drop-shadow(0 4px 18px rgba(255,150,0,.4));
}
.trnPrize__val small {
  font-size: 22px;
  vertical-align: 6px;
  margin-left: 2px;
}
.trnPrize__top {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  font-weight: 600;
  margin-top: 8px;
  letter-spacing: .02em;
}
.trnPrize__top b {
  color: var(--gold);
  font-family: var(--sans);
  font-weight: 800;
}

.trnGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}
.trnCell {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
}
.trnCell small {
  display: block;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.trnCell b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.015em;
  font-feature-settings: 'tnum';
}
.trnCell b i {
  font-style: normal;
  font-size: 10px;
  color: var(--text-3);
  margin-left: 1px;
}

.trnPayout {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.trnPayout span {
  font-family: var(--mono);
  font-size: 10px;
  padding: 3px 9px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--r-pill);
  color: var(--text-3);
  font-weight: 600;
  font-feature-settings: 'tnum';
}
.trnPayout span b {
  color: var(--gold);
  font-weight: 800;
  margin-right: 4px;
}

.cta--disabled {
  background: rgba(255,255,255,.06);
  color: var(--text-3);
  box-shadow: none;
  cursor: not-allowed;
}
.cta--disabled::after { color: var(--text-4); }

.trnCard__footer {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;
}
.trnCard__footer b { color: var(--gold); font-weight: 800; }

.bigEmpty { text-align: center; padding: 80px 20px; }
.bigEmpty__icon {
  font-size: 76px;
  color: var(--gold);
  margin-bottom: 16px;
  line-height: 1;
  filter: drop-shadow(0 0 30px var(--gold-glow));
}
.bigEmpty__title {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.025em;
}
.bigEmpty__sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 10px;
  font-weight: 600;
}

/* Confetti canvas */
#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}