/* MiniApp — clean registration UI (no external deps) */

/* make the HTML 'hidden' attribute always win */
[hidden] { 
  display: none !important;
}

:root{
  /* Telegram layout vars (set via JS, fallback to env()) */
  --safe-top: 0px;
  --safe-bottom: 0px;
  --tg-vh: 100vh;
  --tg-vh-stable: 100vh;

  /* Base */
  --bg: #000000;
  --text: rgba(255,255,255,0.96);
  --muted: rgba(255,255,255,0.60);
  --fine: rgba(255,255,255,0.42);

  /* Cards & borders */
  --card: #0a0a0a;
  --card2: #0d0d0f;
  --panel-bg-subtle: rgba(255,255,255,0.06);
  --panel-bg-soft: rgba(255,255,255,0.08);
  --panel-bg: rgba(255,255,255,0.10);
  --panel-bg-strong: rgba(255,255,255,0.125);
  --panel-press: rgba(255,255,255,0.09);
  --panel-divider: rgba(255,255,255,0.095);
  --surface-1: var(--panel-bg-soft);
  --surface-2: var(--panel-bg);
  --surface-3: var(--panel-bg-strong);
  --border: transparent;
  --border-struct: transparent;
  --border-active: rgba(79,124,255,0.56);
  --shadow: 0 14px 34px rgba(0,0,0,0.62);

  /* Accents */
  --accent: rgba(255,255,255,0.95);
  --ok: #1dd1a1;
  --bad: #ff4d6d;

  --radius: 18px;

  /* Unified UI tokens (feed/coupon/admin cards) */
  --panel-radius: 13px;
  --panel-border: transparent;
  --panel-pad-y: 10px;
  --panel-pad-x: 12px;
  --panel-gap: 10px;
  --panel-title-size: 14px;
  --panel-meta-size: 12px;
  --list-item-py: 13px;
  --list-item-px: 14px;
  --list-item-divider: var(--panel-divider);
  --overlay-top-offset: 24px;
  --back-link-drop: 38px;
  --screen-transition-ms: 440ms;
  --screen-transition-ease: cubic-bezier(0.22, 0.9, 0.2, 1);
  --screen-underlay-shift: 12px;
  --coupon-transition-ms: 440ms;
  --coupon-transition-ease: cubic-bezier(0.22, 0.9, 0.2, 1);

  --feed-card-py: 2px;
  --feed-card-px: 8px;
  --feed-card-gap: 3px;
  --feed-title-min-h: calc(1.08em * 2);
  --feed-team-size: 16px;
  --feed-team-line: 1.12;
  --feed-meta-size: 10px;
  --feed-meta-line: 1.05;
  --feed-meta-gap: 4px;
  --feed-meta-offset: 0px;
  --feed-odds-col: 50px;
  --feed-odds-gap: 3px;
  --feed-odds-min-h: 33px;
  --feed-odds-radius: 8px;
  --feed-odds-shift: -1px;
  --feed-odds-wrap-shift: -5px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font: 16px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: #000000;
}

/* Phone-like viewport (even on desktop) */
.viewport{
  width: 100%;
  max-width: 430px;
  height: var(--tg-vh-stable, 100vh);
  margin: 0 auto;
  position: relative;

  padding-top: calc(var(--safe-top, env(safe-area-inset-top)) + 28px);
  padding-bottom: 0; /* ← ВАЖНО */

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Desktop preview frame (disabled for Telegram Mini App runtime) */
@media (min-width: 900px){
  body:not(.tg){
    background:
      radial-gradient(900px 600px at 50% 20%, rgba(255,255,255,0.06), transparent 60%),
      radial-gradient(700px 500px at 50% 80%, rgba(255,255,255,0.04), transparent 65%),
      #050505;
    display: grid;
    place-items: center;
  }

  body:not(.tg) .viewport{
    height: min(880px, calc(100vh - 40px));
    margin: 20px auto;
    border-radius: 28px;
    background: #000000;
    border: 1px solid var(--border-struct);
    box-shadow:
      0 40px 120px rgba(0,0,0,0.75),
      0 0 0 6px rgba(255,255,255,0.02);
    overflow: hidden;
  }

  body:not(.tg) .bottom{
    position: absolute;
  }

  /* Telegram runtime desktop rules are applied via body.tg-desktop (see app.js). */
}

/* Telegram Desktop: keep phone-like width stable, independent from transient window width */
body.tg-desktop .viewport{
  width: min(430px, calc(100vw - 24px)) !important;
  max-width: min(430px, calc(100vw - 24px)) !important;
  margin: 0 auto !important;
}

body.tg-desktop .bottom{
  position: absolute;
}

.shell{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:22px 14px;
}

.card{
  width: 100%;
  padding: 20px 18px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border-struct);
  box-shadow: var(--shadow);
}

/* === Auth screen (Telegram Native+) === */
#authRoot{
  display: block;
  min-height: 100%;
  padding: 0;
}

#authRoot .auth-panel{
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: calc(var(--safe-top, env(safe-area-inset-top)) + 56px) 16px 20px;
}

#authRoot .auth-head{
  margin: 0 0 18px;
  text-align: center;
}

#authRoot .auth-logo-wrap{
  position: relative;
  width: min(150px, 46vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  transform: translateY(-2cm);
}

#authRoot .auth-logo-wrap::before{
  content: none;
}

#authRoot .auth-logo{
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  filter: none;
  animation: authLogoBreathe 3.8s ease-in-out infinite;
}

#authRoot .auth-title{
  margin: -2.5cm 0 0;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.25px;
  font-weight: 720;
}

#authRoot .auth-subtitle{
  margin-top: 10px;
  color: rgba(255,255,255,0.96);
  font-size: 14px;
  line-height: 1.33;
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}

#authRoot .auth-form{
  margin-top: 0;
  gap: 14px;
}

#authRoot .auth-field{
  gap: 8px;
}

#authRoot .auth-label{
  font-size: 16px;
  font-weight: 640;
  letter-spacing: 0.04px;
}

#authRoot .auth-field .field__control{
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.20);
  border-radius: 0;
  background: transparent;
  min-height: 50px;
}

#authRoot .auth-input{
  height: 48px;
  padding: 0 44px 0 2px;
  border-radius: 0;
  border: 0;
  background: transparent;
}

#authRoot .auth-input::placeholder{
  color: rgba(255,255,255,0.38);
}

#authRoot .auth-input:focus{
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#authRoot .auth-field:focus-within .field__control{
  border-top-color: rgba(255,255,255,0.18);
  border-bottom-color: rgba(255,255,255,0.28);
}

#authRoot #nickHelp{
  color: rgba(255,255,255,0.44);
  font-size: 13px;
}

#authRoot .auth-submit{
  margin-top: 10px;
  height: 60px;
  padding: 0 18px;
  border-radius: 22px;
  border: 0;
  background: #171717;
  color: rgba(255,255,255,0.90);
  font-size: 16px;
  font-weight: 680;
  letter-spacing: 0.04px;
}

#authRoot .auth-submit:active{
  background: #1d1d1d;
}

#authRoot .auth-submit:disabled{
  border: 0;
  background: #141414;
  color: rgba(255,255,255,0.52);
}

#authRoot .auth-submit:focus,
#authRoot .auth-submit:focus-visible{
  outline: none;
  box-shadow: none;
}

#authRoot .auth-fineprint{
  margin: 8px auto 0;
  color: rgba(255,255,255,0.38);
  font-size: 12px;
  line-height: 1.35;
  width: min(100%, 42ch);
  justify-self: center;
  display: block;
  text-align: center !important;
}

@keyframes authLogoBreathe{
  0%, 100%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce){
  #authRoot .auth-logo,
  .boot-loader__logo,
  .boot-loader__spinner{
    animation: none !important;
  }
}

/* === Main app layout (after registration) === */
.app{
  /* Full-height column layout: header + scrollable content + bottom nav */
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  --stack-progress: 1;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-struct);
  transition: transform var(--screen-transition-ms) var(--screen-transition-ease);
  will-change: transform;
}

.topbar__left{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

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

.top-inplay-wrap{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.top-inplay{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: fit-content;
  min-width: 0;
  padding: 6px 7px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid transparent;
}

.top-inplay--button{
  cursor: pointer;
  color: inherit;
  text-align: left;
  font: inherit;
  transition: border-color .18s ease, background .18s ease;
}

.top-inplay--button:focus-visible{
  outline: none;
  border-color: var(--border-active);
}

.top-inplay--button[aria-expanded="true"]{
  border-color: var(--border);
}

.top-inplay__compact{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.top-inplay__dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(173, 178, 188, 0.85);
  box-shadow: 0 0 0 0 rgba(173, 178, 188, 0);
}

.top-inplay__value{
  display: block;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: rgba(255,255,255,0.95);
  line-height: 1.1;
}

.top-inplay--active .top-inplay__dot{
  background: rgba(94, 224, 160, 0.98);
  animation: inplayDotPulse 1.8s ease-out infinite;
}

.top-inplay--active .top-inplay__value{
  color: rgba(235, 255, 245, 0.98);
}

@keyframes inplayDotPulse{
  0%{
    box-shadow: 0 0 0 0 rgba(94, 224, 160, 0.36);
  }
  70%{
    box-shadow: 0 0 0 8px rgba(94, 224, 160, 0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(94, 224, 160, 0);
  }
}

.top-inplay-panel{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 176px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(18,19,22,0.98);
  border: 1px solid var(--border);
  box-shadow: 0 10px 22px rgba(0,0,0,0.4);
  display: grid;
  gap: 8px;
  z-index: 12;
}

.top-inplay-panel[hidden]{
  display: none;
}

.top-inplay-panel__title{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 2px;
}

.top-inplay-panel__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.top-inplay-panel__name{
  font-size: 12px;
  color: var(--muted);
}

.top-inplay-panel__value{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
}

.top-inplay-panel__row--total{
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.top-inplay-panel__row--total .top-inplay-panel__name,
.top-inplay-panel__row--total .top-inplay-panel__value{
  color: rgba(255,255,255,0.98);
  font-weight: 800;
}

.coins{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: none;
  color: rgba(255,255,255,0.95);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
}

.coins__icon{
  width: 18px;
  height: 18px;
  display: block;
  opacity: .9;
}

.coins__value{
  min-width: 44px;
  text-align: right;
}

.avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: none;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
}

.avatar__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar__txt{
  font-weight: 800;
  letter-spacing: .4px;
  color: rgba(255,255,255,0.9);
  font-size: 12px;
}

.content{
  padding: 14px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--screen-transition-ms) var(--screen-transition-ease);
  will-change: transform;
}

.app.app--stacked > .topbar,
.app.app--stacked > .content{
  transform: none;
}

.app.app--swiping > .topbar,
.app.app--swiping > .content{
  transition: none;
}

.app.app--stacked.app--swiping > .topbar,
.app.app--stacked.app--swiping > .content{
  transform: translate3d(calc(-1 * var(--screen-underlay-shift) * var(--stack-progress, 1)), 0, 0);
}

#feedPanel{
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

#bankPanel{
  display: grid;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

#eventsList{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding-bottom: calc(110px + var(--safe-bottom, env(safe-area-inset-bottom)));
}

/* Hide scroll indicators in app panels, keep scrolling itself */
#eventsList,
#bankPanel,
.rating-list,
.bets-screen,
.profile-stats-screen,
.profile-stats-body,
.rating-player-screen,
.inventory-screen,
.event-screen,
.admin-screen,
.coupon-scroll{
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#eventsList::-webkit-scrollbar,
#bankPanel::-webkit-scrollbar,
.rating-list::-webkit-scrollbar,
.bets-screen::-webkit-scrollbar,
.profile-stats-screen::-webkit-scrollbar,
.profile-stats-body::-webkit-scrollbar,
.rating-player-screen::-webkit-scrollbar,
.inventory-screen::-webkit-scrollbar,
.event-screen::-webkit-scrollbar,
.admin-screen::-webkit-scrollbar,
.coupon-scroll::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

.sport-tabs{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 0 12px;
  margin: 0 0 12px;
  flex: 0 0 auto;
  contain: layout paint;
  transform: translateZ(0);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.sport-tabs::-webkit-scrollbar{
  display: none;
}

.sport-tab{
  border: 0;
  outline: 0;
  background: var(--panel-bg-subtle);
  color: var(--muted);
  border-radius: 14px;
  padding: 8px 12px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.sport-tab:active{
  transform: scale(0.98);
}

.sport-tab__icon{
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

.sport-tab__icon img{
  width: 18px;
  height: 18px;
  display: block;
  opacity: 0.8;
  filter: brightness(0) invert(1);
}

.sport-tab__txt{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1;
}


.sport-tab--active{
  color: var(--accent);
  background: var(--panel-bg-strong);
}

.sport-tab--active .sport-tab__icon img{
  opacity: 1;
}

.events{
  display: grid;
  gap: 7px;
  align-content: start;
}

.event-card{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: var(--feed-card-gap);
  align-items: start;
  padding: var(--feed-card-py) var(--feed-card-px);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: none;
}

.event-card--poly{
  position: relative;
  isolation: isolate;
}

.event-card--poly .event-card__title{
  min-height: 40px;
}

.event-card__info{
  min-width: 0;
  display: grid;
  gap: 0;
  align-self: start;
  margin-top: -2px;
}

.event-card__title{
  margin: 0;
  min-height: var(--feed-title-min-h);
  display: grid;
  gap: 0;
}

.event-card__team{
  font-weight: 700;
  font-size: var(--feed-team-size);
  line-height: var(--feed-team-line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-card__meta{
  color: var(--muted);
  font-size: var(--feed-meta-size);
  line-height: var(--feed-meta-line);
  margin-top: var(--feed-meta-offset);
  display: block;
  min-height: 0;
}

.event-card__meta-row{
  display: flex;
  align-items: center;
  gap: var(--feed-meta-gap);
}

.event-card__game-badge{
  margin-right: 1px;
}

.event-card__poly-head{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
}

.event-card__poly-avatar{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.event-card__poly-avatar img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.event-card__poly-question{
  font-weight: 700;
  font-size: 16px;
  line-height: 1.26;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.event-card__meta-text{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-card__meta-icon{
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.75;
}

.event-card__meta-icon img{
  width: 11px;
  height: 11px;
  display: block;
  filter: brightness(0) invert(1);
}

.event-card__odds{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--feed-odds-col)));
  gap: var(--feed-odds-gap);
  justify-content: end;
  align-items: stretch;
  align-self: start;
  margin-top: var(--feed-odds-wrap-shift);
}

.poly-feed-visual{
  width: 108px;
  justify-self: end;
  align-self: center;
  display: grid;
  gap: 6px;
}

.poly-feed-visual--single{
  justify-items: end;
}

.poly-single-gauge{
  position: relative;
  display: grid;
  justify-items: center;
  --poly-gauge-track: rgba(255,255,255,0.18);
}

.poly-single-gauge__svg{
  width: 100%;
  height: auto;
  display: block;
}

.poly-single-gauge__track,
.poly-single-gauge__fill{
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}

.poly-single-gauge__track{
  stroke: var(--poly-gauge-track);
}

.poly-single-gauge__fill{
  stroke: var(--poly-accent, rgba(155,165,183,0.9));
}

.poly-single-gauge__text{
  margin-top: -18px;
  display: grid;
  justify-items: center;
  line-height: 1;
}

.poly-single-gauge__percent{
  font-weight: 760;
  color: rgba(255,255,255,0.95);
}

.poly-single-gauge__label{
  color: rgba(255,255,255,0.66);
}

.poly-feed-gauge{
  width: 82px;
}

.poly-feed-gauge .poly-single-gauge__track,
.poly-feed-gauge .poly-single-gauge__fill{
  stroke-width: 4;
}

.poly-feed-gauge .poly-single-gauge__text{
  margin-top: -24px;
}

.poly-feed-gauge .poly-single-gauge__percent{
  font-size: 12px;
}

.poly-feed-gauge .poly-single-gauge__label{
  font-size: 10px;
  margin-top: 0;
}

.sectionTitle{
  margin: 4px 0 12px;
  font-size: 18px;
}

.card--flat{
  box-shadow: none;
}


.bottom{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(30px + var(--safe-bottom, env(safe-area-inset-bottom)));

  height: 60px;
  padding: 1px 12px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;

  border-radius: 28px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    rgba(20,20,22,0.72);

  border: 1px solid transparent;
  box-shadow: 0 14px 35px rgba(0,0,0,0.55);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  z-index: 1000;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  transition: opacity 140ms ease;
}

@media (min-width: 900px){
  .bottom{
    position: absolute;
  }
}

.tab{
  position: relative;
  border: 0;
  outline: 0;
  background: transparent;

  color: rgba(255,255,255,0.60);

  border-radius: 28px;
  padding: 10px 6px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  transition:
    background .18s ease,
    color .18s ease,
    transform .08s ease;
}

.tab:active{
  transform: scale(0.98);
}

.tab__icon{
  font-size: 15px;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}

.tab__txt{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
}

.tab--active{
  color: var(--accent);
  background: var(--panel-bg-soft);
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

.tab--active::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.10); /* ← ровная линия */
  pointer-events:none;
}

.tab__svg{
  width: 20px;
  height: 20px;
  display: block;
  opacity: .72;          /* сделает видимее */
}

/* чуть увеличенная иконка у активной вкладки */
.tab--active .tab__svg{
  opacity: 1;
  transform: scale(1.08);
}

.card + .card{ margin-top: 14px; }

.card__head{ margin-bottom: 16px; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: rgba(255,255,255,.8);
  font-weight: 600;
  letter-spacing: .2px;
  background: var(--surface-2);
}

.game-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 10px;
  padding: 0 6px;
  border-radius: 999px;
  border: 0;
  font-size: 9px;
  line-height: 10px;
  font-weight: 800;
  letter-spacing: 0.35px;
  color: rgba(255,255,255,0.98);
  white-space: nowrap;
  will-change: box-shadow, background-color;
}

.game-badge--dota2{
  background: rgba(211,58,58,0.18);
  box-shadow: 0 0 8px rgba(226,66,66,0.20);
}

.game-badge--cs2{
  background: rgba(233,138,33,0.18);
  box-shadow: 0 0 8px rgba(232,153,54,0.20);
}

.h1{
  margin:10px 0 6px;
  font-size: 28px;
  line-height: 1.15;
}

.muted{ margin:0; color: var(--muted); }

.form{ display:grid; gap:14px; margin-top: 12px; }

.field{ display:grid; gap:6px; }

.field__label{
  font-weight: 650;
  letter-spacing: .15px;
}

.field__control{
  position:relative;
  display:flex;
  align-items:center;
}

.input{
  width:100%;
  padding:14px 44px 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text);
  outline:none;
  transition: border-color .15s ease, transform .05s ease;
}

.input::placeholder{ color: rgba(255,255,255,.45); }

.input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(79,124,255,0.35);
}

.status{
  position:absolute;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(8,12,19,0.84);
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(1px) scale(.9);
  transition: opacity .16s ease, transform .16s ease, background-color .16s ease;
}

.status::before{
  content: '';
  display: block;
  line-height: 1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  color: rgba(255,255,255,0.92);
}

.status--ok{
  opacity: 1;
  transform: translateY(0) scale(1);
  background: rgba(18,43,34,0.95);
}

.status--ok::before{
  content: '✓';
  color: rgba(106,245,188,0.98);
}

.status--bad{
  opacity: 1;
  transform: translateY(0) scale(1);
  background: rgba(55,21,31,0.95);
}

.status--bad::before{
  content: '×';
  color: rgba(255,138,166,0.98);
}

.status--spin{
  opacity: 1;
  transform: translateY(0) scale(1);
  background: rgba(10,14,23,0.94);
}

.status--spin::before{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.28);
  border-top-color: rgba(164,189,255,0.98);
  animation: spin 1s linear infinite;
}

.hint{ color: var(--fine); font-size: 13px; }

.error{
  min-height: 18px;
  color: rgba(255, 90, 122, .95);
  font-size: 13px;
}

#authRoot .error{
  color: rgba(255,255,255,0.92);
}

.btn{
  margin-top: 4px;
  width: 100%;
  padding: var(--list-item-py) var(--list-item-px);
  border-radius: var(--panel-radius);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text);
  font-size: var(--panel-title-size);
  font-weight: 600;
  letter-spacing: .1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn--ghost{
  background: var(--panel-bg-subtle);
  border-color: var(--panel-border);
  color: rgba(255,255,255,0.88);
}
.btn:active{
  background: var(--panel-press);
}
.btn:disabled{
  opacity: 0.48;
  cursor: default;
}
.btn__text{ display:inline-block; }

.panel-list{
  border-radius: var(--panel-radius);
  border: 1px solid var(--panel-border);
  background: linear-gradient(180deg, var(--panel-bg-strong), var(--panel-bg));
  overflow: hidden;
}

.list-item{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--list-item-py) var(--list-item-px);
  font-size: var(--panel-title-size);
  font-weight: 600;
  letter-spacing: .1px;
  text-align: left;
  cursor: pointer;
}

.list-item:active{
  background: var(--panel-press);
}

.list-item--readonly{
  cursor: default;
  user-select: none;
}

.list-item--readonly:active{
  background: transparent;
}

.list-item[hidden]{
  display: none !important;
}

.list-item:not([hidden]) + .list-item:not([hidden]){
  border-top: 1px solid var(--list-item-divider);
}

.list-item__label{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item__icon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}

.list-item__value{
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  text-align: right;
  margin-left: auto;
}

.list-item__chev{
  font-size: 15px;
  line-height: 1;
  opacity: 0.45;
}

.admin-actions{
  margin-top: 6px;
}

.list-item--action{
  margin-top: 0;
  border-radius: 0;
}

.list-item--action .list-item__label{
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.list-item--action .spinner{
  margin-left: auto;
}

#luckOpenBtn{
  justify-content: center;
  text-align: center;
}

#luckOpenBtn .list-item__label{
  width: 100%;
  text-align: center;
}

.list-item--ghost{
  color: rgba(255,255,255,0.88);
}

.list-item--action:disabled{
  opacity: 0.46;
  cursor: default;
}

.list-item--action:disabled:active{
  background: transparent;
}

.spinner{
  width: 16px; height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.95);
  display:none;
  animation: spin .9s linear infinite;
}
.btn--loading .spinner{ display:inline-block; }
.btn--loading .btn__text{ opacity: .92; }

.fineprint{
  margin: 6px 0 0;
  color: var(--fine);
  font-size: 13px;
}

@keyframes spin { to { transform: rotate(360deg); } }


/* === Mobile / Telegram Mini App tweaks === */
/* Better mobile sizing (phone-first) */
@media (max-width: 560px){
  :root{
    /* Phone values: edit these for predictable vertical compactness */
    --panel-pad-y: 9px;
    --panel-pad-x: 11px;
    --panel-gap: 8px;
    --panel-title-size: 14px;
    --panel-meta-size: 12px;
    --list-item-py: 12px;
    --list-item-px: 12px;
    --overlay-top-offset: 24px;
    --back-link-drop: 38px;

    --feed-card-py: 8px;
    --feed-card-px: 8px;
    --feed-card-gap: 3px;
    --feed-title-min-h: calc(1.08em * 2);
    --feed-team-size: 16px;
    --feed-team-line: 1.12;
    --feed-meta-size: 10px;
    --feed-meta-line: 1.05;
    --feed-meta-gap: 4px;
    --feed-meta-offset: 4px;
    --feed-odds-col: 50px;
    --feed-odds-gap: 3px;
    --feed-odds-min-h: 33px;
    --feed-odds-radius: 8px;
    --feed-odds-shift: -1px;
    --feed-odds-wrap-shift: -5px;
  }

  .shell{
    padding: 18px 12px;
    place-items: stretch;
  }

  .h1{
    font-size: 22px;
  }

  #authRoot .auth-panel{
    padding: calc(var(--safe-top, env(safe-area-inset-top)) + 40px) 10px 18px;
  }

  #authRoot .auth-logo-wrap{
    width: min(124px, 50vw);
    margin-bottom: 14px;
  }

  #authRoot .auth-title{
    font-size: 30px;
    line-height: 1.08;
  }

  #authRoot .auth-subtitle{
    font-size: 13px;
  }

  #authRoot .auth-input{
    height: 48px;
  }

  #authRoot .auth-submit{
    height: 58px;
    font-size: 16px;
  }

  .input{
    padding: 14px 42px 14px 14px;
    font-size: 16px; /* prevent iOS zoom */
  }

  .hint, .error, .fineprint{
    font-size: 12px;
  }
}

/* Small heights (Telegram WebView on phones) */
@media (max-height: 720px){
  .shell{
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .card__head{ margin-bottom: 12px; }
  .form{ gap: 12px; }
}

/* Safe-area padding for iOS WebView (Telegram) */
.tg .shell{
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  padding-top: calc(22px + var(--safe-top, env(safe-area-inset-top)));
  padding-bottom: calc(22px + var(--safe-bottom, env(safe-area-inset-bottom)));
}
@media (max-width: 560px){
  .tg .shell{
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
}

/* Скрываем UI пока приложение не готово */
body.tg:not(.booted) .shell,
body.tg:not(.booted) .app{
  display: none !important;
}

/* Фирменный boot-экран до готовности приложения */
.boot-loader{
  position: fixed;
  inset: 0;
  display: none;
  background: #000;
  z-index: 4000;
  pointer-events: none;
  overflow: hidden;
}

.boot-loader__inner{
  position: absolute;
  left: 50%;
  top: calc(var(--boot-vh-lock, 100svh) / 2);
  transform: translate(-50%, -50%);
  width: min(100%, 320px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 0 24px;
}

.boot-loader__logo{
  width: min(176px, 54vw);
  height: auto;
  display: block;
  filter: none;
  animation: authLogoBreathe 3.8s ease-in-out infinite;
}

.boot-loader__spinner{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.24);
  border-top-color: rgba(255,255,255,0.90);
  animation: spin .9s linear infinite;
}

body.tg:not(.booted) .boot-loader{
  display: block;
}

/* Убираем "резинку" страницы */
html, body{
  height: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: none;
}

body.app-open,
body.auth-open{
  overflow: hidden;
}

body.app-open,
body.app-open *,
body.auth-open,
body.auth-open *{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body.app-open input,
body.app-open textarea,
body.app-open select,
body.app-open [contenteditable="true"],
body.app-open [contenteditable=""],
body.app-open [data-allow-select="true"],
body.app-open [data-allow-select="true"] *,
body.auth-open input,
body.auth-open textarea,
body.auth-open select,
body.auth-open [contenteditable="true"],
body.auth-open [contenteditable=""],
body.auth-open [data-allow-select="true"],
body.auth-open [data-allow-select="true"] *{
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

body.event-open{
  overflow: hidden;
}

body.bets-open{
  overflow: hidden;
}

body.profile-stats-open{
  overflow: hidden;
}

body.profile-settings-open{
  overflow: hidden;
}

body.profile-username-visibility-open{
  overflow: hidden;
}

body.rating-player-open{
  overflow: hidden;
}

body.coupon-expanded{
  overflow: hidden;
}

body.coupon-expanded.keyboard-open{
  overscroll-behavior-y: none;
}

body.keyboard-open .bottom,
body.event-open .bottom,
body.bets-open .bottom,
body.profile-stats-open .bottom,
body.coupon-open .bottom,
body.admin-open .bottom,
body.passive-income-bottom-hidden .bottom,
body.luck-bottom-hidden .bottom,
body.invest-bottom-hidden .bottom,
body.credit-bottom-hidden .bottom,
body.inventory-bottom-hidden .bottom,
body.profile-stats-bottom-hidden .bottom,
body.profile-settings-bottom-hidden .bottom,
body.profile-username-visibility-bottom-hidden .bottom{
  opacity: 0;
  pointer-events: none;
}

body.passive-income-open{
  overflow: hidden;
}

body.luck-open{
  overflow: hidden;
}

body.invest-open{
  overflow: hidden;
}

body.credit-open{
  overflow: hidden;
}

body.inventory-open{
  overflow: hidden;
}

.overlay-screen{
  transform: translate3d(100%, 0, 0);
  transition: transform var(--screen-transition-ms) var(--screen-transition-ease);
  pointer-events: none;
  will-change: transform;
}

.overlay-screen.is-enter-left{
  transform: translate3d(-34%, 0, 0);
}

.overlay-screen.is-enter-right{
  transform: translate3d(100%, 0, 0);
}

.overlay-screen.is-leaving-right{
  transform: translate3d(100%, 0, 0);
}

.overlay-screen.is-leaving-left{
  transform: translate3d(-34%, 0, 0);
}

.overlay-screen.is-visible{
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.overlay-screen.is-dragging{
  transition: none !important;
}

.bank-modal-close{
  position: absolute;
  top: 0;
  right: 14px;
  z-index: 6;
  width: auto;
  height: auto;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,0.92);
  font-size: 34px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, opacity 120ms ease;
}

.bank-modal-close:active{
  transform: scale(0.96);
  opacity: 0.75;
}

#luckCloseBtn{
  top: 2px;
  right: 10px;
  z-index: 24;
}

.passive-income-overlay{
  position: fixed;
  inset: 0;
  z-index: 1140;
  background: rgba(0,0,0,0.8);
  opacity: 0;
  pointer-events: none;
  touch-action: manipulation;
  transition: none;
}

.passive-income-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.passive-income-screen{
  position: fixed;
  z-index: 1145;
  left: 50%;
  top: 50%;
  width: min(390px, calc(100% - 26px));
  max-height: min(78vh, calc(var(--tg-vh-stable, 100vh) - 56px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 44px 16px 16px;
  border-radius: 18px;
  border: 1px solid transparent;
  background: #0a0a0c;
  box-shadow: 0 22px 56px rgba(0,0,0,0.62);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition: none;
}

.passive-income-screen{
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.passive-income-screen::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

.passive-income-screen.is-visible{
  transform: translate3d(-50%, -50%, 0);
  opacity: 1;
  pointer-events: auto;
}

body.poly-image-crop-open{
  overflow: hidden;
}

.poly-image-crop-overlay{
  position: fixed;
  inset: 0;
  z-index: 1160;
  background: rgba(0,0,0,0.84);
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.poly-image-crop-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.poly-image-crop-modal{
  position: fixed;
  z-index: 1165;
  left: 50%;
  top: 50%;
  width: min(390px, calc(100% - 26px));
  padding: 12px 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #101217;
  box-shadow: 0 22px 56px rgba(0,0,0,0.62);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.poly-image-crop-modal.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.poly-image-crop-modal__head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.poly-image-crop-modal__title{
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: rgba(255,255,255,0.92);
}

.poly-image-crop-modal__action{
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  font-size: 13px;
  padding: 4px 2px;
}

.poly-image-crop-modal__action--apply{
  color: #73b2ff;
}

.poly-image-crop-modal__action:disabled{
  opacity: 0.5;
}

.poly-image-crop-modal__stage-wrap{
  display: grid;
  place-items: center;
}

.poly-image-crop-stage{
  width: min(82vw, 320px);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: #0b0d12;
  touch-action: none;
  user-select: none;
}

.poly-image-crop-stage__img{
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  max-height: none;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
}

.poly-image-crop-stage__frame{
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35);
  pointer-events: none;
}

.poly-image-crop-modal__zoom{
  margin-top: 12px;
}

.poly-image-crop-modal__zoom .input{
  padding: 0;
  height: 34px;
}

.passive-help{
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 7;
}

.passive-help__toggle{
  list-style: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 140ms ease, transform 140ms ease;
}

.passive-help__toggle::-webkit-details-marker{
  display: none;
}

.passive-help__toggle::marker{
  content: "";
}

.passive-help__toggle:active{
  transform: scale(0.96);
  opacity: 0.86;
}

.passive-help__icon{
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) saturate(100%) invert(100%);
  opacity: 0.96;
}

.passive-help__card{
  position: absolute;
  top: 44px;
  left: 0;
  width: min(318px, calc(100vw - 84px));
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(16,16,20,0.96);
  box-shadow: 0 12px 28px rgba(0,0,0,0.44);
}

.passive-help__line{
  margin: 0;
  font-size: 12px;
  line-height: 1.36;
  color: rgba(255,255,255,0.84);
}

.passive-help__line + .passive-help__line{
  margin-top: 8px;
}

.passive-boost-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 132px;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(48, 108, 156, 0.19);
  box-shadow: none;
  line-height: 1.05;
  margin-top: 2px;
}

.passive-income-screen > .passive-boost-badge{
  position: absolute;
  top: 12px;
  left: 48px;
  z-index: 7;
  margin-top: 0;
  max-width: 156px;
}

.passive-boost-badge__icon{
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background: center / 12px 12px no-repeat url("/static/icons/boost.svg");
  filter: brightness(0) saturate(100%) invert(74%) sepia(17%) saturate(1598%) hue-rotate(172deg) brightness(95%) contrast(92%);
  opacity: 0.9;
}

.passive-boost-badge__value{
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.1px;
  color: rgba(172, 215, 241, 0.95);
  white-space: nowrap;
}

.passive-boost-badge__timer{
  display: inline-block;
  min-width: 7ch;
  font-size: 9px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: rgba(147, 196, 224, 0.92);
  white-space: nowrap;
}

.passive-ring{
  width: 184px;
  height: 184px;
  margin: 4px auto 8px;
  position: relative;
  --passive-ring-progress: 0;
  --passive-ring-marker-opacity: 0;
  --passive-ring-marker-distance: 79.5px;
  --passive-ring-marker-color: rgba(245,248,255,0.96);
  --passive-ring-marker-glow: rgba(245,248,255,0.48);
}

.passive-ring::before{
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(224,230,243,0.08) 0%, rgba(224,230,243,0) 72%);
  z-index: 0;
  pointer-events: none;
}

.passive-ring::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--passive-ring-marker-color);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08), 0 0 12px var(--passive-ring-marker-glow);
  opacity: var(--passive-ring-marker-opacity);
  transform: translate(-50%, -50%) rotate(calc((var(--passive-ring-progress) * 360deg) - 90deg)) translateX(var(--passive-ring-marker-distance));
  transition: transform 260ms ease, opacity 180ms ease, background-color 220ms ease, box-shadow 220ms ease;
  z-index: 2;
  pointer-events: none;
}

.passive-ring__svg{
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-90deg);
  position: relative;
  z-index: 1;
}

.passive-ring__track{
  fill: none;
  stroke: rgba(255,255,255,0.14);
  stroke-width: 8;
}

.passive-ring__progress{
  fill: none;
  stroke: rgba(243,247,255,0.95);
  stroke-width: 8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(247,250,255,0.28));
  transition: stroke-dashoffset 260ms ease, stroke 220ms ease, filter 220ms ease;
}

.passive-income-screen--boosted .passive-ring__progress{
  stroke: rgba(112, 209, 255, 0.98);
  filter: drop-shadow(0 0 7px rgba(112,209,255,0.50));
}

.passive-income-screen--boosted .passive-ring{
  --passive-ring-marker-color: rgba(130,216,255,0.99);
  --passive-ring-marker-glow: rgba(112,209,255,0.62);
}

.passive-ring__center{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 3px;
  z-index: 3;
}

.passive-ring__center::before{
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(220,228,242,0.09) 0%, rgba(220,228,242,0) 76%);
  pointer-events: none;
  z-index: -1;
}

.passive-income-screen--boosted .passive-ring__center::before{
  background: radial-gradient(circle, rgba(112,209,255,0.16) 0%, rgba(112,209,255,0) 76%);
}

.passive-ring__value{
  font-size: 31px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.passive-ring__hint{
  font-size: 12px;
  color: rgba(255,255,255,0.62);
  text-transform: lowercase;
}

.passive-income-subline{
  margin: 0 0 12px;
  display: block;
  font-size: 13px;
  color: rgba(214,222,235,0.78);
  text-align: center;
}

.passive-income-subline span{
  color: rgba(239,244,252,0.96);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.passive-income-meta{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 0;
}

.passive-income-meta::before,
.passive-income-meta::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(196,208,228,0.54) 18%,
    rgba(196,208,228,0.54) 82%,
    rgba(255,255,255,0)
  );
}

.passive-income-meta::before{
  top: 0;
}

.passive-income-meta::after{
  bottom: 0;
}

.passive-income-meta__card{
  min-height: 62px;
  padding: 11px 12px 12px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(160deg, rgba(26,34,49,0.58), rgba(12,19,30,0.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}

.passive-income-meta__card:first-child{
  background: linear-gradient(155deg, rgba(96,108,126,0.46), rgba(40,48,62,0.9) 62%, rgba(16,20,28,0.96));
}

.passive-income-meta__card:last-child{
  background: linear-gradient(155deg, rgba(96,108,126,0.46), rgba(40,48,62,0.9) 62%, rgba(16,20,28,0.96));
}

.passive-income-meta__label{
  font-size: 11px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(222,236,253,0.74);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.passive-income-meta__value{
  font-size: 19px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.1px;
  color: rgba(244,249,255,0.98);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.passive-income-actions{
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 0;
  background: linear-gradient(180deg, rgba(20,25,34,0.88), rgba(11,15,22,0.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.passive-income-actions .list-item{
  justify-content: center;
}

.passive-income-actions .list-item + .list-item{
  border-top: 0;
  margin-top: 10px;
}

.passive-income-actions .list-item--action{
  position: relative;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(180deg, rgba(47,135,104,0.95), rgba(34,109,83,0.95));
  color: rgba(235,244,241,0.98);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
  transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.passive-income-actions .list-item--action:active{
  transform: scale(0.985);
  filter: brightness(0.95);
}

.passive-income-actions .list-item--action .list-item__label{
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.passive-income-actions .list-item--action .spinner{
  position: absolute;
  right: 14px;
  margin-left: 0;
}

.passive-income-actions #bankUpgradeBtn{
  background: linear-gradient(180deg, rgba(57,68,86,0.95), rgba(39,48,63,0.95));
  color: rgba(229,236,247,0.95);
}

.passive-income-actions #bankUpgradeBtn:disabled,
.passive-income-actions #bankUpgradeBtn:disabled:active{
  transform: none;
  filter: none;
  opacity: 1;
  background: linear-gradient(180deg, rgba(65,72,83,0.92), rgba(44,50,60,0.92));
  color: rgba(209,216,227,0.56);
  box-shadow: none;
}

.passive-income-actions .list-item--action:disabled,
.passive-income-actions .list-item--action:disabled:active{
  transform: none;
  filter: none;
  opacity: 1;
  background: linear-gradient(180deg, rgba(106,114,123,0.95), rgba(80,88,97,0.95));
  color: rgba(227,233,240,0.9);
  box-shadow: none;
}

.luck-overlay{
  position: fixed;
  inset: 0;
  z-index: 1140;
  background: rgba(0,0,0,0.8);
  opacity: 0;
  pointer-events: none;
  touch-action: manipulation;
  transition: none;
}

.luck-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.luck-screen{
  position: fixed;
  z-index: 1145;
  left: 50%;
  top: 50%;
  width: min(404px, calc(100% - 22px));
  max-height: min(78vh, calc(var(--tg-vh-stable, 100vh) - 56px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 42px 14px 14px;
  border-radius: 24px;
  border: 0;
  background:
    radial-gradient(120% 90% at 50% -12%, rgba(255,255,255,0.08), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(17,20,27,0.98) 0%, rgba(13,16,22,0.99) 60%, rgba(11,13,18,1) 100%);
  box-shadow: 0 24px 50px rgba(0,0,0,0.62);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition: none;
}

.luck-screen{
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.luck-screen::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

.luck-screen.is-visible{
  transform: translate3d(-50%, -50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.luck-screen.luck-screen--history-open{
  overflow: hidden;
  overscroll-behavior-y: none;
}

.luck-history{
  position: absolute;
  top: 9px;
  left: 12px;
  z-index: 14;
}

.luck-history__toggle{
  list-style: none;
  min-width: 94px;
  height: 34px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.08);
  color: rgba(234,238,246,0.94);
  font-size: 13px;
  font-weight: 620;
  letter-spacing: 0.08px;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease, color 120ms ease;
}

.luck-history__toggle::-webkit-details-marker{
  display: none;
}

.luck-history__toggle::marker{
  content: "";
}

.luck-history__toggle:active{
  transform: scale(0.96);
  opacity: 0.86;
}

.luck-history[open] .luck-history__toggle{
  background: rgba(255,255,255,0.15);
  color: rgba(252,252,253,0.98);
}

.luck-history__card{
  position: absolute;
  top: 39px;
  left: 0;
  width: min(296px, calc(100vw - 84px));
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(38,44,58,0.56), rgba(28,33,45,0.58)),
    rgba(16,20,28,0.74);
  box-shadow: 0 14px 28px rgba(0,0,0,0.38);
  isolation: isolate;
  overflow: hidden;
}

.luck-history__card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10,12,18,0.30);
  pointer-events: none;
}

.luck-history__empty{
  position: relative;
  z-index: 1;
  font-size: 12px;
  line-height: 1.34;
  color: rgba(193,200,212,0.82);
  text-align: left;
  padding: 3px 2px;
}

.luck-history__list{
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 184px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

.luck-history__item{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.11);
  color: rgba(232,236,243,0.95);
  padding: 8px 10px;
  min-height: 32px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 620;
  display: flex;
  align-items: center;
}

.luck-history__item--boost{
  color: rgba(234,237,244,0.95);
}

.luck-history__item--free-spin{
  color: rgba(234,237,244,0.95);
}

.luck-history__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.luck-history__reward{
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}

.luck-history__time{
  color: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  margin-left: auto;
  min-width: 116px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.luck-jackpot{
  margin: 4px 2px 4px;
  min-height: 84px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  overflow: hidden;
}

.luck-jackpot__img{
  display: block;
  width: min(100%, 388px);
  height: auto;
  object-fit: contain;
  object-position: center;
  transform: translateZ(0);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
  filter: none;
  animation: luck-jackpot-breathe 3.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .luck-jackpot__img{
    filter: none;
    animation: none;
  }
}

@keyframes luck-jackpot-breathe{
  0%, 100%{
    transform: translateZ(0) scale(1);
  }
  50%{
    transform: translateZ(0) scale(1.028);
  }
}

.luck-case{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 12px;
  border: 0;
  background: rgba(255,255,255,0.04);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 12px 26px rgba(0,0,0,0.30);
}

.luck-case::before{
  display: none;
}

.luck-case::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(65% 46% at 50% 43%, rgba(255,255,255,0.12), rgba(255,255,255,0) 72%);
}

.luck-screen--impact .luck-case::after{
  animation: luck-impact-flash 340ms ease-out;
}

@keyframes luck-impact-flash{
  0%{
    opacity: 0;
  }
  22%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

.luck-screen--good .luck-case{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 14px 28px rgba(0,0,0,0.34);
}

.luck-screen--jackpot .luck-case{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.10),
    0 14px 30px rgba(0,0,0,0.36);
}

.luck-screen--spinning .luck-reel::before{
  opacity: 0.82;
}

.invest-overlay{
  position: fixed;
  inset: 0;
  z-index: 1140;
  background: rgba(0,0,0,0.8);
  opacity: 0;
  pointer-events: none;
  touch-action: manipulation;
  transition: none;
}

.invest-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.invest-screen{
  position: fixed;
  z-index: 1145;
  left: 50%;
  top: 50%;
  width: min(390px, calc(100% - 26px));
  max-height: min(78vh, calc(var(--tg-vh-stable, 100vh) - 56px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 44px 16px 16px;
  border-radius: 18px;
  border: 1px solid transparent;
  background: #0a0a0c;
  box-shadow: 0 22px 56px rgba(0,0,0,0.62);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.invest-screen::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

.invest-screen.is-visible{
  transform: translate3d(-50%, -50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.invest-open-box{
  display: grid;
  gap: 8px;
  margin-bottom: 6px;
}

.invest-plan-stage{
  display: grid;
  gap: 8px;
  overflow: hidden;
}

.invest-plan-carousel,
#investPlanTabs{
  --invest-card-width: clamp(318px, calc(100% - 22px), 362px);
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 4px max(4px, calc((100% - var(--invest-card-width)) / 2 + 2px)) 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.invest-plan-carousel::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

.invest-plan-card{
  flex: 0 0 var(--invest-card-width);
  width: var(--invest-card-width);
  min-width: 304px;
  min-height: 392px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 22px;
  padding: 18px 16px;
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.045) 64%);
  color: rgba(255,255,255,0.96);
  font: inherit;
  box-shadow: 0 18px 34px rgba(0,0,0,0.36);
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  opacity: 0.56;
  transform: none;
  transition: opacity 140ms ease, box-shadow 160ms ease, background 160ms ease, filter 160ms ease;
  filter: saturate(0.8);
}

.invest-plan-card > :not(.invest-plan-card__chart){
  position: relative;
  z-index: 2;
}

.invest-plan-card:focus-visible{
  outline: none;
}

.invest-plan-card--active{
  opacity: 1;
  transform: none;
  box-shadow: 0 22px 42px rgba(0,0,0,0.44);
  filter: saturate(1);
}

.invest-plan-card--tone-fast{
  --invest-chart-line: rgba(136,232,255,0.84);
  --invest-chart-trace: rgba(188,255,255,0.98);
  --invest-chart-area: rgba(86,181,255,0.2);
  background: linear-gradient(165deg, rgba(69,153,255,0.36), rgba(29,54,122,0.34) 58%, rgba(255,255,255,0.04));
}

.invest-plan-card--tone-balance{
  --invest-chart-line: rgba(127,246,193,0.84);
  --invest-chart-trace: rgba(186,255,225,0.98);
  --invest-chart-area: rgba(90,209,140,0.2);
  background: linear-gradient(165deg, rgba(103,198,145,0.34), rgba(34,110,73,0.33) 58%, rgba(255,255,255,0.04));
}

.invest-plan-card--tone-max{
  --invest-chart-line: rgba(255,211,128,0.84);
  --invest-chart-trace: rgba(255,233,176,0.98);
  --invest-chart-area: rgba(229,164,58,0.21);
  background: linear-gradient(165deg, rgba(229,172,67,0.36), rgba(115,68,22,0.35) 58%, rgba(255,255,255,0.04));
}

.invest-plan-card__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.invest-plan-card__chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.24);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.9);
}

.invest-plan-card__percent{
  font-size: 42px;
  line-height: 1;
  font-weight: 800;
  color: rgba(255,255,255,0.98);
  font-variant-numeric: tabular-nums;
}

.invest-plan-card__term{
  display: none;
}

.invest-plan-card__term-sub{
  display: none;
}

.invest-plan-card__chart{
  order: 3;
  position: absolute;
  left: 16px;
  right: 16px;
  top: 136px;
  bottom: 168px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  opacity: 0.68;
}

.invest-plan-card__chart-svg{
  display: block;
  width: 100%;
  height: 100%;
}

.invest-plan-card__chart-area{
  fill: var(--invest-chart-area, rgba(255,255,255,0.1));
  opacity: 0.46;
}

.invest-plan-card__chart-line{
  fill: none;
  stroke: var(--invest-chart-line, rgba(255,255,255,0.82));
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.84;
}

.invest-plan-card__chart-trace{
  fill: none;
  stroke: var(--invest-chart-trace, rgba(255,255,255,0.98));
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18 220;
  stroke-dashoffset: 0;
  opacity: 0.78;
  filter: drop-shadow(0 0 3px var(--invest-chart-trace, rgba(255,255,255,0.8)));
  animation: invest-chart-trace 2.8s linear infinite;
}

@keyframes invest-chart-trace{
  to{
    stroke-dashoffset: -238;
  }
}

@media (prefers-reduced-motion: reduce){
  .invest-plan-card__chart-trace{
    animation: none;
  }
}

.invest-plan-card__amount-box{
  order: 2;
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin-top: 4px;
  padding: 2px 4px;
  border-radius: 12px;
  background: rgba(0,0,0,0.28);
}

.invest-step-btn{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  width: 100%;
  height: 34px;
  border-radius: 10px;
  background: transparent;
  color: rgba(255,255,255,0.82);
  font-size: 30px;
  line-height: 0.9;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: opacity 120ms ease, color 120ms ease;
}

.invest-step-btn:active{
  opacity: 0.62;
}

.invest-step-btn:disabled{
  opacity: 0.4;
  cursor: default;
}

.invest-plan-card__amount-value{
  text-align: center;
  font-size: 30px;
  line-height: 1.02;
  font-weight: 800;
  color: rgba(255,255,255,0.98);
  font-variant-numeric: tabular-nums;
}

.invest-plan-card__active-stats{
  order: 4;
  display: grid;
  gap: 5px;
  margin-top: auto;
  padding-top: 8px;
}

.invest-plan-card__active-stats[hidden]{
  display: grid !important;
  visibility: hidden;
}

.invest-plan-card__active-line{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.invest-plan-card__active-label{
  font-size: 15px;
  line-height: 1.2;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
}

.invest-plan-card__active-value{
  font-size: 20px;
  line-height: 1.08;
  font-weight: 780;
  color: rgba(255,255,255,0.96);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invest-plan-card__active-line--total .invest-plan-card__active-label{
  color: rgba(255,255,255,0.88);
  font-weight: 600;
}

.invest-plan-card__active-line--total .invest-plan-card__active-value{
  font-size: 22px;
  font-weight: 820;
  color: rgba(255,255,255,0.99);
}

.invest-plan-card--deposit-active .invest-plan-card__amount-box{
  display: none;
}

.invest-plan-card__open-btn{
  order: 6;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  min-height: 52px;
  margin-top: 4px;
  border-radius: 14px;
  background: rgba(18, 127, 76, 0.85);
  color: rgba(223,255,236,0.97);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease, background-color 120ms ease;
}

.invest-plan-card__open-btn:active{
  transform: scale(0.98);
}

.invest-plan-card__open-btn:disabled{
  opacity: 0.5;
  cursor: default;
}

.invest-plan-card__open-btn--timer:disabled{
  opacity: 1;
}

.invest-plan-card__open-timer{
  font-size: 20px;
  font-weight: 700;
  color: rgba(231,255,243,0.92);
  font-variant-numeric: tabular-nums;
}

.invest-plan-dots{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 8px;
}

.invest-plan-dots__dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  transition: width 150ms ease, background-color 150ms ease, opacity 150ms ease;
}

.invest-plan-dots__dot--active{
  width: 18px;
  background: rgba(255,255,255,0.92);
}

.credit-overlay{
  position: fixed;
  inset: 0;
  z-index: 1140;
  background: rgba(0,0,0,0.8);
  opacity: 0;
  pointer-events: none;
  touch-action: manipulation;
  transition: none;
}

.credit-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.credit-screen{
  position: fixed;
  z-index: 1145;
  left: 50%;
  top: 50%;
  width: min(390px, calc(100% - 26px));
  max-height: min(82vh, calc(var(--tg-vh-stable, 100vh) - 50px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 44px 14px 16px;
  border-radius: 20px;
  border: 0;
  background: linear-gradient(180deg, rgb(9,9,11), rgb(5,5,6));
  box-shadow: 0 22px 58px rgba(0,0,0,0.7);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  pointer-events: none;
  backface-visibility: hidden;
  will-change: transform, opacity;
  transition: none;
}

.credit-screen{
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.credit-screen::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

.credit-screen.is-visible{
  transform: translate3d(-50%, -50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.credit-cards{
  --credit-card-width: clamp(318px, calc(100% - 20px), 362px);
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin-top: 12px;
  padding: 2px max(4px, calc((100% - var(--credit-card-width)) / 2 + 2px)) 8px;
}

.credit-cards--single{
  overflow-x: hidden;
  scroll-snap-type: none;
  justify-content: center;
}

.credit-cards--single .credit-card{
  scroll-snap-align: none;
}

.credit-cards::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

.credit-cards__empty{
  border-radius: 14px;
  border: 0;
  padding: 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.04);
}

.credit-card{
  --credit-terms-line: rgba(153,220,192,0.82);
  flex: 0 0 var(--credit-card-width);
  width: var(--credit-card-width);
  scroll-snap-align: center;
  border-radius: 22px;
  border: 0;
  min-height: 352px;
  background: linear-gradient(160deg, rgba(44,49,58,0.68), rgba(20,22,27,0.9));
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.36);
}

.credit-card--tone-base{
  --credit-terms-line: rgba(211,220,238,0.86);
  background: linear-gradient(160deg, rgba(122,133,155,0.3), rgba(41,47,60,0.88) 58%, rgba(12,14,18,0.96));
}

.credit-card--tone-standard{
  --credit-terms-line: rgba(247,204,126,0.88);
  background: linear-gradient(160deg, rgba(196,142,49,0.44), rgba(54,35,14,0.88) 58%, rgba(9,8,7,0.96));
}

.credit-card--tone-max{
  --credit-terms-line: rgba(245,149,167,0.86);
  background: linear-gradient(160deg, rgba(196,83,104,0.45), rgba(52,20,29,0.9) 58%, rgba(10,7,8,0.96));
}

.credit-card--active{
  box-shadow: 0 18px 38px rgba(0,0,0,0.44);
}

.credit-card__hero{
  display: grid;
  gap: 4px;
  margin-top: 2px;
}

.credit-card__hero-amount{
  font-size: 54px;
  font-weight: 800;
  line-height: 0.96;
  color: rgba(238,247,255,0.98);
  font-variant-numeric: tabular-nums;
}

.credit-card__hero-subtitle{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(230,239,252,0.72);
  margin-top: 2px;
}

.credit-card__terms{
  position: relative;
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 10px 0;
}

.credit-card__terms::before,
.credit-card__terms::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    var(--credit-terms-line) 18%,
    var(--credit-terms-line) 82%,
    rgba(255,255,255,0)
  );
}

.credit-card__terms::before{
  top: 0;
}

.credit-card__terms::after{
  bottom: 0;
}

.credit-card__term{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(238,243,252,0.88);
  line-height: 1.3;
  white-space: nowrap;
}

.credit-card__term strong{
  color: rgba(246,250,255,0.98);
  font-weight: 700;
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.credit-card__policy{
  margin-top: 2px;
  padding: 8px 10px;
  border-radius: 11px;
  background: rgba(0,0,0,0.22);
  font-size: 12px;
  line-height: 1.32;
  color: rgba(233,239,250,0.78);
}

.credit-card__reason{
  font-size: 12px;
  color: rgba(255,225,188,0.96);
  margin-top: 3px;
  line-height: 1.32;
}

.credit-card__requirements{
  margin-top: 3px;
  padding: 9px 10px;
  min-height: 88px;
  border-radius: 11px;
  background: rgba(0,0,0,0.2);
  display: grid;
  align-content: start;
  gap: 6px;
}

.credit-card__requirements-title{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(232,240,252,0.7);
}

.credit-card__requirement{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(231,238,250,0.82);
  line-height: 1.3;
  white-space: nowrap;
}

.credit-card__requirement-mark{
  width: 14px;
  flex: 0 0 14px;
  text-align: center;
  color: rgba(219,227,239,0.62);
  font-weight: 700;
}

.credit-card__requirement.is-done .credit-card__requirement-mark{
  color: rgba(130,238,196,0.98);
}

.credit-card__requirement--spacer{
  visibility: hidden;
  pointer-events: none;
}

.credit-card__btn{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  min-height: 50px;
  margin-top: 4px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(36,142,94,0.95), rgba(28,118,79,0.95));
  color: rgba(232,255,241,0.98);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
}

.credit-card__btn:active{
  transform: scale(0.98);
}

.credit-card__btn:disabled{
  opacity: 0.54;
  cursor: default;
}

.credit-card__btn--unavailable,
.credit-card__btn--unavailable:disabled{
  background: linear-gradient(180deg, rgba(102,110,122,0.92), rgba(78,86,98,0.92));
  color: rgba(232,237,244,0.92);
  opacity: 1;
}

.credit-card__repay{
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: grid;
  gap: 8px;
}

.credit-card__progress{
  display: grid;
  gap: 6px;
}

.credit-card__progress-head{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.credit-card__deadline{
  font-size: 11px;
  font-weight: 700;
  padding: 0;
  color: rgba(221,240,230,0.98);
  white-space: nowrap;
}

.credit-card__deadline--soon{
  color: rgba(255,229,184,0.98);
}

.credit-card__deadline--overdue{
  color: rgba(255,196,196,0.98);
}

.credit-card__progress-bar{
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.09);
  display: flex;
}

.credit-card__progress-fill{
  display: block;
  height: 100%;
}

.credit-card__progress-fill--paid{
  background: linear-gradient(90deg, rgba(90,221,151,0.95), rgba(55,188,127,0.95));
}

.credit-card__progress-fill--base{
  background: rgba(239,245,255,0.34);
}

.credit-card__progress-fill--penalty{
  background: linear-gradient(90deg, rgba(255,122,122,0.9), rgba(210,84,84,0.95));
}

.credit-card__progress-legend{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.credit-card__progress-note{
  font-size: 11px;
  color: rgba(233,240,252,0.78);
}

.credit-card__progress-note--penalty{
  color: rgba(255,211,211,0.95);
}

.credit-card__repay-slider{
  width: 100%;
  margin: 0;
  accent-color: rgba(93,191,142,0.94);
  touch-action: pan-x;
}

.credit-card__repay-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.credit-card__repay-value{
  font-size: 13px;
  font-weight: 700;
  color: rgba(250,253,255,0.95);
}

.credit-card__repay-hint{
  font-size: 11px;
  color: rgba(234,241,252,0.76);
  text-align: right;
}

.credit-card__repay-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.credit-card__action{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  min-height: 44px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(34,138,91,0.95), rgba(26,112,75,0.95));
  color: rgba(232,255,241,0.98);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
}

.credit-card__action:active{
  transform: scale(0.98);
}

.credit-card__action:disabled{
  opacity: 0.52;
  cursor: default;
}

.credit-card__action--ghost{
  background: rgba(255,255,255,0.1);
  color: rgba(239,245,255,0.96);
}

.credit-history-open-btn{
  margin-top: 11px;
  min-height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  justify-content: center;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.credit-history-open-btn:active{
  background: rgba(255,255,255,0.08);
}

.credit-history-overlay{
  position: fixed;
  inset: 0;
  z-index: 1150;
  background: rgba(0,0,0,0.8);
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.credit-history-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.credit-history-screen{
  position: fixed;
  z-index: 1155;
  left: 50%;
  top: 50%;
  width: min(390px, calc(100% - 26px));
  max-height: min(72vh, calc(var(--tg-vh-stable, 100vh) - 84px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 44px 12px 12px;
  border-radius: 20px;
  border: 0;
  background: linear-gradient(180deg, rgb(11,12,15), rgb(7,8,10));
  box-shadow: 0 22px 58px rgba(0,0,0,0.7);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.credit-history-screen.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.credit-history-screen__title{
  font-size: 18px;
  font-weight: 800;
  color: rgba(245,248,255,0.98);
  margin-bottom: 12px;
}

.credit-history__list{
  display: grid;
  gap: 7px;
}

.credit-history__empty{
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}

.credit-history__item{
  border-radius: 12px;
  border: 0;
  background: rgba(255,255,255,0.05);
  padding: 10px 10px 8px;
  display: grid;
  gap: 5px;
}

.credit-history__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.credit-history__event{
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.credit-history__amount{
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.credit-history__amount--plus{
  color: rgba(161,245,194,0.98);
}

.credit-history__amount--minus{
  color: rgba(255,202,202,0.98);
}

.credit-history__details{
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}

.credit-history__meta{
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}

.inventory-screen{
  position: fixed;
  z-index: 1060;
  inset: 0;
  padding: calc(var(--safe-top, env(safe-area-inset-top)) + var(--overlay-top-offset)) 14px calc(var(--safe-bottom, env(safe-area-inset-bottom)) + 16px);
  background: #000000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.inventory-screen__head{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 50px;
}

.inventory-screen__head .sectionTitle{
  margin: 0;
  text-align: center;
}

.inventory-screen__head .back-link{
  justify-self: start;
  position: relative;
  top: var(--back-link-drop);
}

.inventory-list{
  display: grid;
  gap: 10px;
  padding-bottom: calc(110px + var(--safe-bottom, env(safe-area-inset-bottom)));
}

.inventory-error{
  display: block;
  margin-top: 8px;
}

.inventory-section{
  border: 0;
  border-radius: 18px;
  background: var(--panel-bg);
  padding: 12px 10px 10px;
  display: grid;
  gap: 10px;
}

.inventory-section__head{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px;
}

.inventory-section__title{
  font-size: 17px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.inventory-section__meta{
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
}

.inventory-section__icon{
  width: 18px;
  height: 18px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: center / 18px 18px no-repeat url("/static/icons/boost.svg");
  filter: brightness(0) invert(1);
  opacity: 0.78;
  pointer-events: none;
}

.inventory-section__icon--loading{
  opacity: 0.46;
}

.inventory-rows{
  display: grid;
  gap: 9px;
}

.inventory-empty{
  padding: 12px 12px 10px;
  text-align: left;
  border-radius: 12px;
  border: 0;
  background: var(--panel-bg-subtle);
}

.inventory-row{
  border-radius: 14px;
  border: 0;
  background: var(--panel-bg-soft);
  padding: 11px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.inventory-row__name{
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-row__side{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.inventory-row__count{
  min-width: 40px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: var(--panel-bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
}

.inventory-row__activate{
  min-width: 98px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 0;
  background: var(--panel-bg);
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
}

.inventory-row__activate--ready{
  background: rgba(70, 186, 102, 0.34);
  color: rgba(216, 255, 226, 0.98);
}

.inventory-row__activate:disabled{
  opacity: 0.56;
  cursor: default;
}

.inventory-row__activate:active{
  background: var(--panel-bg-strong);
}

.inventory-row__state{
  min-width: 82px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 0;
  background: var(--panel-bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1px;
  color: rgba(255,255,255,0.78);
}

.inventory-row__state--busy{
  background: rgba(202, 166, 57, 0.28);
  color: rgba(255, 242, 196, 0.96);
}

.inventory-row__state--active{
  background: rgba(199, 71, 71, 0.3);
  color: rgba(255, 220, 220, 0.97);
}

.inventory-section--loading .inventory-section__meta{
  opacity: 0.58;
}

.inventory-row--loading{
  pointer-events: none;
  grid-template-columns: 1fr;
}

.inventory-skeleton__head-title{
  width: 86px;
  height: 18px;
}

.inventory-skeleton__head-meta{
  width: 38px;
  height: 14px;
}

.inventory-skeleton__head-center{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--panel-bg-soft);
  overflow: hidden;
}

.inventory-skeleton__head-center::after{
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

.inventory-row__loading-block{
  display: grid;
  gap: 8px;
}

.inventory-skeleton__line{
  width: 74%;
  height: 11px;
}

.inventory-skeleton__line--wide{
  width: 82%;
}

.inventory-skeleton__line--short{
  width: 56%;
}

.luck-reel{
  position: relative;
  z-index: 5;
  border-radius: 16px;
  background: rgba(10,12,16,0.72);
  border: 0;
  padding: 10px 8px;
  margin: 2px 0 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.luck-reel::before{
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 108px;
  transform: translateX(-50%);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
  pointer-events: none;
  z-index: 2;
  opacity: 0.72;
}

.luck-reel__viewport{
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 100%;
}

.luck-reel__track{
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.luck-reel__item{
  flex: 0 0 106px;
  height: 98px;
  border-radius: 14px;
  border: 0;
  position: relative;
  overflow: hidden;
  perspective: 620px;
  background: rgba(255,255,255,0.045);
  --luck-icon-box: 94px;
  --luck-icon-offset-y: -1px;
  --luck-icon-zoom: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
}

.luck-reel__item.luck-reel__item--boost::before{
  --luck-icon-box: 92px;
  --luck-icon-offset-y: 0px;
  --luck-icon-zoom: 1;
  background-image: url("/static/icons/shar.png");
  filter: drop-shadow(0 0 8px rgba(108,177,255,0.28));
}

.luck-reel__item.luck-reel__item--free-spin::before{
  --luck-icon-box: 88px;
  --luck-icon-offset-y: -1px;
  --luck-icon-zoom: 1;
  background-image: url("/static/icons/bilet.png");
  filter: drop-shadow(0 0 8px rgba(120,186,255,0.24));
}

.luck-reel__item::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--luck-icon-box);
  height: var(--luck-icon-box);
  background-image: url("/static/icons/moneta.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(var(--luck-icon-box) * var(--luck-icon-zoom)) auto;
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255,216,74,0.2));
  transform-origin: right center;
  transform: translate(-50%, -50%) translateY(var(--luck-icon-offset-y)) rotateY(0deg);
  backface-visibility: hidden;
  transition:
    transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 260ms ease 180ms;
  pointer-events: none;
}

.luck-reel__amount{
  position: relative;
  z-index: 1;
  font-size: 26px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: 0.04px;
  font-variant-numeric: tabular-nums;
  color: rgba(240,244,250,0.96);
  opacity: 0;
  transform-origin: right center;
  transform: rotateY(88deg);
  backface-visibility: hidden;
  transition:
    transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 240ms ease 240ms;
}

.luck-reel__amount.luck-reel__amount--boost{
  width: 94px;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: 0.04px;
  text-align: center;
  white-space: normal;
  color: rgba(238,243,250,0.94);
}

.luck-reel__amount.luck-reel__amount--free-spin{
  width: 96px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.04px;
  text-align: center;
  white-space: normal;
  color: rgba(235,241,250,0.92);
}

.luck-reel__item.is-winning{
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}

.luck-reel__item.is-winning::before{
  opacity: 1;
}

.luck-reel__item.is-revealed .luck-reel__amount{
  opacity: 1;
  transform: rotateY(0deg);
}

.luck-reel__item.is-revealed::before{
  opacity: 0;
  transform: translate(-50%, -50%) translateY(var(--luck-icon-offset-y)) rotateY(-88deg);
}

.luck-reel__pointer{
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  background: transparent;
  pointer-events: none;
  z-index: 3;
}

.luck-reel__pointer::before,
.luck-reel__pointer::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 12px;
  border-radius: 999px;
  background: rgba(244,246,250,0.86);
  box-shadow: none;
}

.luck-reel__pointer::before{
  top: -7px;
}

.luck-reel__pointer::after{
  bottom: -7px;
}

.luck-result{
  position: relative;
  z-index: 5;
  min-height: 22px;
  margin: 2px 0 6px;
  text-align: center;
  font-size: 16px;
  font-weight: 620;
  color: rgba(226,232,241,0.92);
  transform: translateY(0);
}

.luck-result--pulse{
  animation: luck-result-pop 240ms cubic-bezier(0.2, 0.85, 0.24, 1);
}

@keyframes luck-result-pop{
  0%{
    opacity: 0.72;
  }
  100%{
    opacity: 1;
  }
}

.luck-result--neutral{
  color: rgba(222,228,238,0.8);
}

.luck-result--good{
  color: rgba(163, 234, 190, 0.96);
}

.luck-result--coin{
  color: rgba(247, 218, 108, 0.97);
}

.luck-result--composed .luck-result__label{
  color: rgba(236,240,247,0.95);
}

.luck-result--composed .luck-result__value{
  font-variant-numeric: tabular-nums;
}

.luck-result--coin.luck-result--composed .luck-result__value{
  color: rgba(255, 227, 96, 0.98);
}

.luck-result--boost-composed{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.luck-result--boost-composed.luck-result--good{
  color: rgba(164, 227, 255, 0.98);
}

.luck-result--boost-composed .luck-result__main{
  font-weight: 700;
  color: rgba(175, 232, 255, 0.99);
}

.luck-result--boost-composed .luck-result__hint{
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  color: rgba(193, 226, 244, 0.94);
}

.luck-result--bad{
  color: rgba(255, 183, 183, 0.92);
}

#luckError{
  position: relative;
  z-index: 5;
  display: block;
  min-height: 18px;
  margin: 0 0 8px;
  text-align: center;
}

.luck-case__open-btn{
  position: relative;
  z-index: 5;
  margin-top: 0;
  min-height: 54px;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(24,142,91,0.92) 0%, rgba(19,118,76,0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 16px rgba(0,0,0,0.24);
  color: rgba(240,251,245,0.99);
}

.luck-case__open-btn .list-item__label{
  font-size: 17px;
  line-height: 1.1;
  font-weight: 730;
  letter-spacing: 0.06px;
}

.luck-case__open-btn:active{
  filter: brightness(0.97);
}

.luck-case__open-btn:disabled{
  background: linear-gradient(180deg, rgba(31,103,76,0.7) 0%, rgba(24,88,64,0.78) 100%);
  color: rgba(215,231,223,0.88);
  box-shadow: none;
}

.bets-screen{
  position: fixed;
  inset: 0;
  z-index: 1060;
  padding: calc(var(--safe-top, env(safe-area-inset-top)) + var(--overlay-top-offset)) 14px calc(var(--safe-bottom, env(safe-area-inset-bottom)) + 16px);
  background: #000000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.bets-screen__head{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 50px;
}

.profile-stats-screen{
  position: fixed;
  inset: 0;
  z-index: 1060;
  padding: calc(var(--safe-top, env(safe-area-inset-top)) + var(--overlay-top-offset)) 14px calc(var(--safe-bottom, env(safe-area-inset-bottom)) + 16px);
  background: #000000;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.profile-settings-screen{
  position: fixed;
  inset: 0;
  z-index: 1060;
  padding: calc(var(--safe-top, env(safe-area-inset-top)) + var(--overlay-top-offset)) 14px calc(var(--safe-bottom, env(safe-area-inset-bottom)) + 16px);
  background: #000000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.profile-username-visibility-screen{
  position: fixed;
  inset: 0;
  z-index: 1060;
  padding: calc(var(--safe-top, env(safe-area-inset-top)) + var(--overlay-top-offset)) 14px calc(var(--safe-bottom, env(safe-area-inset-bottom)) + 16px);
  background: #000000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.rating-player-screen{
  position: fixed;
  inset: 0;
  z-index: 1060;
  padding: calc(var(--safe-top, env(safe-area-inset-top)) + 22px) 14px calc(var(--safe-bottom, env(safe-area-inset-bottom)) + 22px);
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.rating-player-screen.overlay-screen{
  transform: none;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
  will-change: opacity;
}

.rating-player-screen.overlay-screen.is-enter-left,
.rating-player-screen.overlay-screen.is-enter-right,
.rating-player-screen.overlay-screen.is-leaving-right,
.rating-player-screen.overlay-screen.is-leaving-left{
  transform: none;
}

.rating-player-screen.overlay-screen.is-visible{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.rating-player-modal{
  position: relative;
  width: min(100%, 404px);
  margin: 0 auto;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.rating-player-body{
  display: grid;
  gap: 10px;
  align-content: start;
}

.rating-player-card{
  border-radius: 18px;
  background: #0a0a0c;
  box-shadow: none;
  padding: 16px 16px 14px;
  display: grid;
  gap: 11px;
}

.rating-player-hero{
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  padding-top: 2px;
}

.rating-player-card__avatar{
  width: 66px;
  height: 66px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--panel-bg-soft);
  display: grid;
  place-items: center;
}

.rating-player-card__avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rating-player-card__avatar-txt{
  font-size: 17px;
  font-weight: 760;
  color: rgba(255,255,255,0.94);
}

.rating-player-card__nick{
  margin-top: 3px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 780;
  color: rgba(255,255,255,0.96);
  max-width: 100%;
  word-break: break-word;
}

.rating-player-card__username{
  font-size: 14px;
  line-height: 1.2;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.rating-player-balance-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.rating-player-balance-row__label{
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: 0.16px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  font-weight: 700;
}

.rating-player-balance-row__value{
  font-size: 16px;
  line-height: 1;
  font-weight: 760;
  color: rgba(255,255,255,0.98);
  font-variant-numeric: tabular-nums;
}

.rating-player-card__caption{
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: 0.18px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  font-weight: 700;
}

.rating-player-card__caption--center{
  text-align: center;
}

.rating-player-divider{
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(190,201,219,0.5) 20%,
    rgba(190,201,219,0.5) 80%,
    rgba(255,255,255,0)
  );
}

.rating-player-period-tabs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 3px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--panel-bg-strong), var(--panel-bg));
}

.rating-player-period-tab{
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255,255,255,0.74);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  padding: 8px 6px;
  cursor: pointer;
}

.rating-player-period-tab--active{
  background: var(--panel-bg-strong);
  color: rgba(255,255,255,0.98);
}

.rating-player-period-tab:disabled{
  opacity: 0.62;
  cursor: default;
}

.rating-player-summary{
  border-radius: 13px;
  background: linear-gradient(180deg, var(--panel-bg-strong), var(--panel-bg));
  padding: 3px 10px;
}

.rating-player-summary__row{
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--panel-divider);
}

.rating-player-summary__row:last-child{
  border-bottom: 0;
}

.rating-player-summary__label{
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}

.rating-player-summary__value{
  font-size: 17px;
  color: rgba(255,255,255,0.98);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rating-player-summary-note{
  margin: 2px 2px 0;
  font-size: 11px;
  line-height: 1.32;
  color: rgba(255,255,255,0.58);
}

.rating-player-summary__row--loading{
  align-items: center;
}

.rating-player-hero--loading{
  gap: 10px;
}

.rating-player-balance-row--loading{
  align-items: center;
}

.rating-player-period-tabs--loading{
  pointer-events: none;
}

.rating-player-period-tab--loading{
  display: flex;
  align-items: center;
  justify-content: center;
}

.rating-player-summary--loading{
  min-height: 120px;
}

.rating-player-skeleton__avatar{
  width: 66px;
  height: 66px;
  border-radius: 999px;
}

.rating-player-skeleton__nick{
  width: 126px;
  height: 20px;
}

.rating-player-skeleton__username{
  width: 106px;
  height: 13px;
}

.rating-player-skeleton__caption{
  width: 96px;
  height: 13px;
}

.rating-player-skeleton__coins-header{
  width: 84px;
  height: 14px;
}

.rating-player-skeleton__balance-label{
  width: 66px;
  height: 11px;
}

.rating-player-skeleton__tab{
  width: 72%;
  height: 12px;
}

.rating-player-skeleton__label{
  width: 62px;
  height: 10px;
}

.rating-player-skeleton__value{
  width: 78px;
  height: 12px;
}

.profile-stats-screen__head{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.profile-settings-screen__head{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-stats-screen__head .sectionTitle{
  margin: 0;
  text-align: center;
}

.profile-settings-screen__head .sectionTitle{
  margin: 0;
  text-align: center;
}

.profile-stats-screen__head .back-link{
  justify-self: start;
  position: relative;
  top: var(--back-link-drop);
}

.profile-settings-screen__head .back-link{
  justify-self: start;
  position: relative;
  top: var(--back-link-drop);
}

.profile-settings-card{
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  padding: 12px;
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.profile-settings-list{
  margin-bottom: 10px;
}

.profile-settings-list .list-item{
  justify-content: flex-start;
}

.profile-settings-list .list-item__label{
  margin-right: auto;
}

.profile-settings-line{
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}

.profile-settings-line__label{
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.64);
  font-weight: 700;
}

.profile-settings-line__value{
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
}

.profile-settings-switch-row{
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.profile-settings-switch-row.is-disabled{
  opacity: 0.56;
  cursor: default;
}

.profile-settings-switch-row__text{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,0.9);
}

.profile-settings-switch{
  position: relative;
  width: 44px;
  height: 26px;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}

.profile-settings-switch__input{
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.profile-settings-switch__track{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  transition: background-color 180ms ease;
}

.profile-settings-switch__thumb{
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 4px 10px rgba(0,0,0,0.28);
  transition: transform 180ms ease;
}

.profile-settings-switch__input:checked + .profile-settings-switch__track{
  background: rgba(58,179,129,0.9);
}

.profile-settings-switch__input:checked + .profile-settings-switch__track .profile-settings-switch__thumb{
  transform: translateX(18px);
}

.profile-settings-switch__input:disabled{
  cursor: default;
}

.profile-settings-hint{
  margin: 0 2px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,0.62);
}

.profile-stats-periods{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0;
  margin-bottom: 12px;
}

.profile-stats-period{
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.76);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.12px;
  text-align: center;
}

.profile-stats-period.is-active{
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.97);
}

.profile-stats-body{
  display: grid;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding-bottom: calc(108px + var(--safe-bottom, env(safe-area-inset-bottom)));
}

.profile-stats-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-stats-kpi{
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  padding: 10px 12px;
  display: grid;
  gap: 5px;
}

.profile-stats-kpi__label{
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.66);
  font-weight: 700;
}

.profile-stats-kpi__value{
  font-size: 24px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: 0.1px;
  color: rgba(255,255,255,0.97);
}

.profile-stats-chart{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(45,89,182,0.30) 0%, rgba(18,28,54,0.72) 100%);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.profile-stats-chart__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.74);
}

.profile-stats-chart__svg{
  width: 100%;
  height: 132px;
  display: block;
}

.profile-stats-chart__baseline{
  stroke: rgba(255,255,255,0.26);
  stroke-width: 0.45;
}

.profile-stats-chart__bar{
  transition: opacity .16s ease;
}

.profile-stats-chart__bar--up{
  fill: rgba(140,238,200,0.96);
}

.profile-stats-chart__bar--down{
  fill: rgba(255,151,171,0.94);
}

.profile-stats-chart__bar--flat{
  fill: rgba(255,255,255,0.48);
}

.profile-stats-chart__bar--selected{
  stroke: rgba(255,255,255,0.62);
  stroke-width: 0.7;
}

.profile-stats-chart__hit{
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}

.profile-stats-chart__bar-label{
  font-size: 4.3px;
  font-weight: 650;
  dominant-baseline: middle;
}

.profile-stats-chart__bar-label--up{
  fill: rgba(178,244,213,0.98);
}

.profile-stats-chart__bar-label--down{
  fill: rgba(255,182,196,0.96);
}

.profile-stats-chart__bar-label--flat{
  fill: rgba(255,255,255,0.72);
}

.profile-stats-chart__x-label{
  fill: rgba(255,255,255,0.54);
  font-size: 4.2px;
  font-weight: 560;
}

.profile-stats-chart__empty{
  min-height: 78px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.profile-stats-chart__summary{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-stats-chart__summary-item{
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 4px;
  min-width: 0;
}

.profile-stats-chart__summary-label{
  font-size: 11px;
  line-height: 1.2;
  color: rgba(255,255,255,0.74);
}

.profile-stats-chart__summary-value{
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.1px;
  color: rgba(255,255,255,0.96);
}

.profile-stats-types{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-stats-type{
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  padding: 10px 12px;
  display: grid;
  gap: 7px;
}

.profile-stats-type__name{
  font-size: 13px;
  line-height: 1.2;
  font-weight: 760;
  color: rgba(255,255,255,0.94);
}

.profile-stats-type__row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}

.profile-stats-type__row strong{
  font-size: 14px;
  line-height: 1.1;
  color: rgba(255,255,255,0.95);
  font-weight: 760;
}

.profile-stats-tone--up{
  color: rgba(164,247,216,0.97) !important;
}

.profile-stats-tone--down{
  color: rgba(255,164,180,0.97) !important;
}

@media (max-width: 380px){
  .profile-stats-kpi__value{
    font-size: 21px;
  }
  .profile-stats-types{
    grid-template-columns: 1fr;
  }
}

.event-screen{
  position: fixed;
  inset: 0;
  z-index: 1050;
  padding: 0;
  background: #000000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.event-hero{
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  gap: 10px;
  padding: calc(var(--safe-top, env(safe-area-inset-top)) + 36px) 14px 18px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border-struct);
  box-shadow: none;
}

.event-hero__content{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.event-screen--poly .event-hero__content{
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.event-screen--poly .event-hero__main{
  min-width: 0;
}

.event-hero__title{
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  min-height: 0;
}

.event-hero__title--poly{
  text-align: left;
  font-size: 18px;
  line-height: 1.2;
}

.event-hero__poly-head{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
}

.event-hero__poly-title-block{
  min-width: 0;
  line-height: 1.2;
}

.event-hero__poly-avatar{
  width: 38px;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
}

.event-hero__poly-avatar img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.event-hero__poly-title-text{
  display: block;
  word-break: break-word;
}

.event-hero__main{
  display: grid;
  gap: 4px;
}

.event-hero__game-badge{
  display: flex;
  justify-content: center;
  min-height: 0;
}

.event-hero__game-pill{
  font-size: 11px;
  padding: 2px 10px;
}


.event-hero__meta{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  display: grid;
  gap: 2px;
  min-height: 0;
}

.event-hero__poly-visual{
  width: 116px;
  justify-self: end;
  align-self: center;
}

.poly-hero-visual{
  width: 100%;
  display: grid;
}

.poly-hero-visual--single{
  justify-items: end;
}

.poly-hero-gauge{
  width: 102px;
}

.poly-hero-gauge .poly-single-gauge__track,
.poly-hero-gauge .poly-single-gauge__fill{
  stroke-width: 4.5;
}

.poly-hero-gauge .poly-single-gauge__text{
  margin-top: -30px;
}

.poly-hero-gauge .poly-single-gauge__percent{
  font-size: 14px;
}

.poly-hero-gauge .poly-single-gauge__label{
  font-size: 10px;
  margin-top: 0;
}

.event-hero__start-day{
  font-size: 13px;
  line-height: 1.2;
  color: rgba(255,255,255,0.78);
}

.event-hero__start-time{
  font-size: 25px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.25px;
  color: rgba(255,255,255,0.97);
}

.event-hero__close{
  font-size: 12px;
  margin-top: 2px;
  color: rgba(255,255,255,0.70);
}


.event-hero__backrow{
  margin: 6px 14px 0;
}

.event-hero__backrow,
.back-link{
  padding: 6px 0;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  text-align: left;
}

.back-link{
  margin: 0;
  width: auto;
  justify-self: start;
  cursor: pointer;
}

.back-link:active{
  opacity: 0.82;
}

body.tg-system-back-enabled #betsScreenBack,
body.tg-system-back-enabled #profileStatsBack,
body.tg-system-back-enabled #profileSettingsBack,
body.tg-system-back-enabled #profileUsernameVisibilityBack,
body.tg-system-back-enabled #inventoryCloseBtn,
body.tg-system-back-enabled #adminPanelBack{
  visibility: hidden;
  pointer-events: none;
}

body.tg-system-back-enabled #eventScreenBackRow,
body.tg-system-back-enabled #adminEventsBack,
body.tg-system-back-enabled #polyRootBack,
body.tg-system-back-enabled #polyEventsBack{
  display: none;
}

.bets-screen__head .sectionTitle{
  margin: 0;
  text-align: center;
}

.bets-screen__head .back-link,
.admin-screen__head .back-link{
  justify-self: start;
  position: relative;
  top: var(--back-link-drop);
}

.event-markets{
  display: grid;
  gap: 12px;
  padding: 14px;
  padding-bottom: calc(110px + var(--safe-bottom, env(safe-area-inset-bottom)));
}

.screen-loading{
  display: grid;
  gap: var(--panel-gap);
}

.screen-loading__card{
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  padding: var(--panel-pad-y) var(--panel-pad-x);
  display: grid;
  gap: 8px;
}

.screen-loading__card--market{
  gap: 10px;
}

.screen-loading__odds{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.screen-loading__odd{
  height: 34px;
  border-radius: 10px;
  background: var(--panel-bg-soft);
  position: relative;
  overflow: hidden;
}

.skeleton-line{
  display: block;
  height: 10px;
  border-radius: 7px;
  background: var(--panel-bg-soft);
  position: relative;
  overflow: hidden;
}

.skeleton-line--title{
  height: 14px;
  width: 64%;
}

.skeleton-line--title-short{
  height: 14px;
  width: 44%;
}

.skeleton-line--meta{
  width: 78%;
}

.skeleton-line--meta-short{
  width: 52%;
}

.skeleton-line::after,
.screen-loading__odd::after{
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

@keyframes skeleton-shimmer{
  100%{
    transform: translateX(100%);
  }
}

.odds-row{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  margin-top: 10px;
}

.odds-btn{
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: none;
  color: rgba(255,255,255,0.96);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .1s ease;
}

.odds-btn--active{
  border-color: rgba(86,192,144,0.78);
  box-shadow:
    0 0 0 1px rgba(52,166,116,0.56),
    0 10px 20px rgba(0,0,0,0.38),
    0 0 18px rgba(52,166,116,0.28);
  background: linear-gradient(180deg, rgba(56,165,120,0.30), rgba(36,121,89,0.16));
  transform: translateY(-1px);
}

.odds-name{
  font-size: 12px;
  color: rgba(255,255,255,0.85);
}

.odds-value{
  font-weight: 700;
  font-size: 14px;
}

.odds-btn--active .odds-name{
  color: rgba(230,248,239,0.96);
}

.odds-btn--active .odds-value{
  color: rgba(255,255,255,0.99);
  font-weight: 800;
  letter-spacing: .15px;
}

.odds-trend-indicator{
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  border-radius: 9999px;
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0.96);
}

.odds-btn--trend-up .odds-trend-indicator{
  top: 2px;
  background: rgba(64, 224, 176, 0.95);
  box-shadow: 0 0 6px rgba(64, 224, 176, 0.38);
  animation: odds-trend-breathe 2s cubic-bezier(0.22, 0.9, 0.2, 1) 3;
}

.odds-btn--trend-down .odds-trend-indicator{
  bottom: 2px;
  background: rgba(255, 77, 141, 0.95);
  box-shadow: 0 0 6px rgba(255, 77, 141, 0.38);
  animation: odds-trend-breathe 2s cubic-bezier(0.22, 0.9, 0.2, 1) 3;
}

@keyframes odds-trend-breathe{
  0% { opacity: 0; transform: scaleX(0.96); }
  26% { opacity: 0.95; transform: scaleX(1); }
  58% { opacity: 0.9; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(0.98); }
}

.odds-btn--locked{
  opacity: 0.48;
  border-color: transparent;
  background: var(--panel-bg-subtle);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.odds-btn--locked .odds-name,
.odds-btn--locked .odds-value{
  color: rgba(255,255,255,0.56);
}

.odds-btn--locked.odds-btn--active{
  border-color: transparent;
  background: var(--panel-bg-subtle);
  box-shadow: none;
  transform: none;
}

.odds-btn--line{
  flex-direction: row;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
}

.odds-btn--mini{
  width: 100%;
  min-width: 0;
  min-height: var(--feed-odds-min-h);
  padding: 1px;
  border-radius: var(--feed-odds-radius);
}

.odds-btn--mini .odds-name{
  display: none;
}

.odds-btn--mini .odds-value{
  font-size: 13px;
  transform: translateY(var(--feed-odds-shift));
}

.odds-btn--stub{
  opacity: 0;
  pointer-events: none;
}

.market-card--event{
  background: var(--panel-bg);
  border-color: var(--panel-border);
  padding: var(--panel-pad-y) var(--panel-pad-x);
}

.market-card__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.market-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: rgba(255,255,255,0.85);
  font-size: 11px;
}

.poly-market-inline{
  min-width: 92px;
  display: grid;
  gap: 4px;
  justify-items: end;
  flex: 0 0 auto;
}

.poly-market-inline__bar{
  width: 92px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}

.poly-market-inline__fill{
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width .22s ease, background-color .22s ease;
}

.poly-market-inline__label{
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

.market-body{
  display: grid;
  gap: var(--panel-gap);
}

.market-line-row{
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(90px, 1fr);
  gap: 10px;
  align-items: center;
}

.market-line-value{
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.result-score{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.result-score__row{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}

.result-score__label{
  font-size: 13px;
  color: var(--muted);
}

.result-score__inputs{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.result-score__input{
  text-align: center;
  padding: 8px 10px;
  min-width: 44px;
}

.result-score__sep{
  text-align: center;
  color: var(--muted);
}

.result-score__btn{
  margin-top: 0;
  padding: var(--list-item-py) var(--list-item-px);
  justify-self: start;
}

.coupon{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  background:
    linear-gradient(180deg, rgba(18,18,18,0.98), rgba(8,8,8,0.98));
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  border: 1px solid var(--border-struct);
  box-shadow: 0 -20px 50px rgba(0,0,0,0.65);
  padding-bottom: calc(12px + var(--coupon-safe-bottom, var(--safe-bottom, env(safe-area-inset-bottom))));
  transition: box-shadow var(--coupon-transition-ms) var(--coupon-transition-ease);
  overscroll-behavior-y: contain;
}

body.keyboard-open .coupon{
  transition: none !important;
}

body.keyboard-open .coupon-body{
  transition: none !important;
}

.coupon-overlay{
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--coupon-transition-ms) var(--coupon-transition-ease);
}

.coupon-overlay.is-visible{
  opacity: 1;
  pointer-events: auto;
}

.app-toast{
  position: fixed;
  left: 50%;
  bottom: calc(86px + var(--safe-bottom, env(safe-area-inset-bottom)));
  z-index: 1210;
  width: min(410px, calc(100vw - 18px));
  padding: 11px 18px;
  border-radius: 12px;
  border: none;
  background: rgba(13,13,16,0.94);
  color: rgba(255,255,255,0.96);
  box-shadow: 0 12px 28px rgba(0,0,0,0.5);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.28;
  transform: translate3d(-50%, 10px, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.app-toast.is-visible{
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

@media (prefers-reduced-motion: reduce){
  .overlay-screen{
    transition: none;
  }
  .coupon{
    transition: none;
  }
  .odds-trend-indicator{
    animation: none;
    opacity: 1;
  }
  .app-toast{
    transition: none;
    transform: translate3d(-50%, 0, 0);
  }
}

 .coupon-toggle{
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-content: initial;
  gap: 0;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: default;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.coupon--collapsed .coupon-toggle{
  cursor: pointer;
}

.coupon--expanded .coupon-toggle,
.coupon--opening .coupon-toggle{
  pointer-events: none;
}

.coupon-toggle:active,
.coupon-toggle:focus,
.coupon-toggle:focus-visible{
  background: transparent;
  box-shadow: none;
  outline: none;
  transform: none;
}

.coupon-toggle__left,
.coupon-toggle__center,
.coupon-toggle__right{
  min-width: 0;
}

.coupon-toggle__left{
  justify-self: start;
}

.coupon-toggle__center{
  justify-self: center;
}

.coupon-toggle__right{
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.coupon-toggle__mode{
  display: inline;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.96);
}

.coupon-toggle__count{
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
}

.coupon-toggle__odds,
.coupon-odds,
.coupon-leg__odds{
  font-weight: 800;
  letter-spacing: 0.15px;
}

.coupon-toggle__odds{
  min-width: 42px;
  text-align: right;
}

.coupon--expanded .coupon-toggle__odds,
.coupon--expanded #couponToggleTrend,
.coupon--opening .coupon-toggle__odds,
.coupon--opening #couponToggleTrend{
  display: none;
}

.coupon-body{
  position: relative;
  padding: 0 16px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  max-height: 0;
  overflow: hidden;
  min-height: 0;
  touch-action: pan-y;
  display: grid;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  will-change: transform, opacity, max-height;
  pointer-events: none;
  transition:
    max-height var(--coupon-transition-ms) var(--coupon-transition-ease),
    opacity 260ms ease,
    transform var(--coupon-transition-ms) var(--coupon-transition-ease),
    padding var(--coupon-transition-ms) var(--coupon-transition-ease),
    gap var(--coupon-transition-ms) var(--coupon-transition-ease);
}

.coupon--expanded .coupon-body,
.coupon--opening .coupon-body{
  padding: 4px 16px 16px;
  gap: 12px;
  max-height: min(72vh, calc(var(--tg-vh-stable, 100vh) - 190px));
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.coupon-scroll{
  min-height: 0;
  display: grid;
  gap: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  overflow-anchor: none;
  padding-bottom: 6px;
}

.coupon-footer{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid transparent;
  background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,0.95) 22%);
  touch-action: manipulation;
}

.coupon-footer__stats{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 22px;
}

.coupon-stat{
  display: grid;
  gap: 2px;
}

.coupon-stat__label{
  font-size: 12px;
  color: var(--muted);
}

.coupon-stat__value,
.coupon-stat__odds{
  font-size: 19px;
  line-height: 1;
  font-weight: 800;
  color: var(--text);
}

.coupon-stat--odds .coupon-stat__odds{
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 17px;
  font-weight: 800;
  justify-content: flex-end;
  color: inherit;
}

.coupon-stat--odds{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

.coupon-stat--odds .coupon-stat__label{
  font-size: 17px;
  line-height: 1;
  font-weight: 800;
  color: inherit;
  letter-spacing: 0.15px;
}

.coupon-odds{
  font-size: inherit;
}

.coupon--settling .coupon-scroll{
  transform: translateZ(0);
  will-change: transform;
}

.coupon-legs{
  display: grid;
  gap: var(--panel-gap);
}

.coupon-leg{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--panel-gap);
  padding: var(--panel-pad-y) var(--panel-pad-x);
  border-radius: var(--panel-radius);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
}

.coupon-leg--locked .coupon-leg__info,
.coupon-leg--locked .coupon-leg__odds-row{
  opacity: 0.48;
}

.coupon-leg__info{
  min-width: 0;
  display: grid;
  gap: 4px;
}

.coupon-leg__outcome{
  font-weight: 800;
  font-size: 15px;
}

.coupon-leg__market-row,
.coupon-leg__event-row{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.coupon-leg__market{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.coupon-leg__period{
  font-size: 13px;
  color: var(--muted);
}

.coupon-leg__sport-icon{
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  flex: 0 0 auto;
}

.coupon-leg__sport-icon img{
  width: 14px;
  height: 14px;
  display: block;
  filter: brightness(0) invert(1);
}

.coupon-leg__event{
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coupon-leg__game-badge{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.coupon-leg__game-pill{
  font-size: 9px;
  padding: 1px 6px;
}

.coupon-leg__start{
  font-size: 12px;
  color: var(--muted);
}

.coupon-leg__side{
  display: grid;
  justify-items: end;
  gap: calc(var(--panel-gap) - 4px);
}

.coupon-leg__odds-row{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.coupon-leg__odds{
  font-size: 16px;
  line-height: 1;
}

.coupon-leg__remove{
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,0.88);
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.coupon-place-btn--locked{
  opacity: 0.48;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.coupon-actions{
  margin-top: 4px;
}

.coupon-actions .list-item{
  margin-top: 0;
}

.btn--tiny{
  margin-top: 0;
  width: auto;
  height: 40px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 12px;
}

.bet-entry{
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.bet-entry__payout{
  min-width: 84px;
  display: grid;
  gap: 1px;
  align-content: center;
}

.bet-entry__payout .coupon-stat__value{
  font-size: 20px;
}

.bet-input{
  width: min(100%, 150px);
  justify-self: end;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  font-size: 17px;
  text-align: center;
}

.bet-input::placeholder{
  text-align: center;
  font-size: 15px;
}

.bet-input:focus{
  border-color: var(--border-active);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}

.coupon-trend-arrow{
  min-width: 10px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
}

.coupon-trend-arrow--up{
  color: rgba(64, 224, 176, 0.95);
  text-shadow: 0 0 6px rgba(64, 224, 176, 0.38);
  animation: coupon-trend-breathe 2s cubic-bezier(0.22, 0.9, 0.2, 1) 3;
}

.coupon-trend-arrow--down{
  color: rgba(255, 77, 141, 0.95);
  text-shadow: 0 0 6px rgba(255, 77, 141, 0.38);
  animation: coupon-trend-breathe 2s cubic-bezier(0.22, 0.9, 0.2, 1) 3;
}

.coupon-odds--up,
.coupon-leg__odds.coupon-odds--up,
.coupon-toggle__odds.coupon-odds--up{
  color: rgba(64, 224, 176, 0.96);
}

.coupon-stat--odds.coupon-odds--up{
  color: rgba(64, 224, 176, 0.96);
}

.coupon-odds--down,
.coupon-leg__odds.coupon-odds--down,
.coupon-toggle__odds.coupon-odds--down{
  color: rgba(255, 77, 141, 0.96);
}

.coupon-stat--odds.coupon-odds--down{
  color: rgba(255, 77, 141, 0.96);
}

@keyframes coupon-trend-breathe{
  0% { opacity: 0; transform: translateY(0); }
  26% { opacity: 1; transform: translateY(-1px); }
  58% { opacity: 0.9; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

.bets-list{
  display: grid;
  gap: 12px;
}

.bet-card{
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
}

.bet-card__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bet-card__kind{
  min-width: 0;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
}

.bet-status{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 0;
  white-space: nowrap;
}

.bet-status--pending{
  color: rgba(184, 210, 255, 0.98);
  background: rgba(65, 128, 255, 0.18);
}

.bet-status--won{
  color: rgba(126, 255, 205, 0.98);
  background: rgba(28, 156, 115, 0.2);
}

.bet-status--lost{
  color: rgba(255, 165, 192, 0.98);
  background: rgba(176, 42, 90, 0.22);
}

.bet-status--void{
  color: rgba(255, 211, 138, 0.98);
  background: rgba(168, 113, 0, 0.24);
}

.bet-status--tiny{
  padding: 2px 8px;
  font-size: 11px;
}

.bet-card__sub{
  font-size: 12px;
  color: var(--muted);
}

.bet-card__pick{
  font-size: 18px;
  line-height: 1.1;
  font-weight: 800;
  color: rgba(255,255,255,0.98);
}

.bet-card__event{
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}

.bet-card__event-row{
  display: flex;
  align-items: center;
  gap: 6px;
}

.bet-card__game-pill{
  font-size: 9px;
  padding: 1px 6px;
  line-height: 1.35;
}

.bet-card__event-icon{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.98;
  filter: brightness(0) invert(1);
}

.bet-card__market{
  font-size: 13px;
  color: var(--muted);
}

.bet-card__stats{
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid transparent;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.bet-card__stat{
  min-width: 0;
}

.bet-card__stat-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  color: var(--muted);
}

.bet-card__stat-value{
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 800;
  color: rgba(255,255,255,0.98);
}

.bet-legs{
  display: grid;
  gap: 8px;
}

.bet-leg{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 11px;
  border-radius: var(--panel-radius);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg-subtle);
}

.bet-leg__main{
  min-width: 0;
  display: grid;
  gap: 3px;
}

.bet-leg__pick{
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
}

.bet-leg__event{
  font-size: 13px;
  color: rgba(255,255,255,0.86);
}

.bet-leg__event-row{
  display: flex;
  align-items: center;
  gap: 6px;
}

.bet-leg__event-icon{
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: 0.98;
  filter: brightness(0) invert(1);
}

.bet-leg__market{
  font-size: 13px;
  color: var(--muted);
}

.bet-leg__side{
  display: grid;
  justify-items: end;
  gap: 6px;
}

.bet-leg__odds{
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  color: rgba(255,255,255,0.98);
}

body.admin-open{
  overflow: hidden;
}

.admin-screen{
  position: fixed;
  inset: 0;
  z-index: 1100;
  padding: calc(var(--safe-top, env(safe-area-inset-top)) + var(--overlay-top-offset)) 14px calc(var(--safe-bottom, env(safe-area-inset-bottom)) + 16px);
  background: #000000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.admin-screen__head{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 50px;
}

.admin-screen__head .sectionTitle{
  margin: 0;
  text-align: center;
}

.admin-quick{
  padding: 0;
  margin-bottom: 10px;
}

.admin-screen .card.card--flat{
  opacity: 0;
  transform: translate3d(14px, 0, 0);
  transition: transform 220ms cubic-bezier(0.22, 0.9, 0.2, 1), opacity 180ms ease;
  pointer-events: none;
}

.admin-screen .card.card--flat.is-open{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.admin-grant-target{
  border-radius: 12px;
  background: var(--panel-bg-subtle);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.admin-grant-target__line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-grant-target__label{
  font-size: 12px;
  color: rgba(255,255,255,0.62);
}

.admin-grant-target__value{
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.94);
  text-align: right;
}

.admin-event-card{
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  padding: var(--panel-pad-y) var(--panel-pad-x);
  display: grid;
  gap: calc(var(--panel-gap) - 4px);
  cursor: pointer;
  background: var(--panel-bg);
}

.admin-event-title{
  font-weight: 700;
}

.admin-event-meta{
  color: var(--muted);
  font-size: var(--panel-meta-size);
}

.event-editor__head{
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.event-editor__list{
  display: grid;
  gap: var(--panel-gap);
  margin-bottom: 10px;
}

.market-card{
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  padding: var(--panel-pad-y) var(--panel-pad-x);
  background: var(--panel-bg);
}

.market-title{
  font-weight: 700;
  margin-bottom: 6px;
}

.market-title--poly{
  letter-spacing: 0.1px;
}

.market-outcomes{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.event-editor__actions{
  display: grid;
  gap: 10px;
}

.event-results{
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.event-results__title{
  margin: 0;
  font-size: 15px;
}

.event-results__list{
  display: grid;
  gap: 10px;
}

.result-row{
  display: grid;
  gap: 6px;
}

.result-title{
  font-weight: 600;
  font-size: 13px;
}

.result-select{
  padding-right: 14px;
}

#profilePanel{
  background: transparent;
  border: 0;
  padding: 0;
}

#profilePanel,
#bankPanel{
  --panel-title-size: 14.5px;
}

.profile-settings-list{
  --panel-title-size: 15px;
}

.profile-panel-groups{
  display: grid;
  gap: 10px;
}

.rating-panel{
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.rating-metric-card{
  position: relative;
  margin: 0 0 10px;
  padding: 0 0 9px;
}

.rating-metric-card::after{
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(190,201,219,0.5) 20%,
    rgba(190,201,219,0.5) 80%,
    rgba(255,255,255,0)
  );
}

.rating-metric-tabs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
}

.rating-metric-tab{
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: var(--panel-bg-soft);
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.12px;
  cursor: pointer;
}

.rating-metric-tab--active{
  background: var(--panel-bg-strong);
  color: rgba(255,255,255,0.96);
}

.rating-tabs{
  display: flex;
  gap: 6px;
  margin: 0 0 8px;
}

.rating-tab{
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: var(--panel-bg-soft);
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1px;
  cursor: pointer;
}

.rating-tab--active{
  background: var(--panel-bg-strong);
  color: rgba(255,255,255,0.96);
}

.rating-note{
  margin: 0 2px 10px;
  display: grid;
  gap: 2px;
  font-size: 12px;
  color: rgba(255,255,255,0.54);
}

.rating-note > span{
  display: block;
}

.rating-note__metric{
  color: rgba(255,255,255,0.62);
  font-weight: 400;
  letter-spacing: 0;
  margin-right: 0;
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
}

.rating-me{
  border-radius: 14px;
  border: 0;
  background: var(--panel-bg);
  padding: 10px 12px;
  margin-bottom: 9px;
  box-shadow: none;
}

.rating-me--top1{
  background: rgba(212,175,55,0.13);
  box-shadow: inset 2px 0 0 rgba(212,175,55,0.58);
}

.rating-me--top2{
  background: rgba(174,183,194,0.13);
  box-shadow: inset 2px 0 0 rgba(174,183,194,0.54);
}

.rating-me--top3{
  background: rgba(169,113,66,0.14);
  box-shadow: inset 2px 0 0 rgba(169,113,66,0.56);
}

.rating-me__head{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.rating-me__avatar{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--panel-bg-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.rating-me__avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rating-me__avatar-txt{
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.2px;
}

.rating-me__body{
  min-width: 0;
}

.rating-me__right{
  min-width: 92px;
  text-align: right;
}

.rating-me__label{
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.56);
}

.rating-me__main{
  font-size: 16px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rating-me__meta{
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255,255,255,0.56);
  min-height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rating-me__score{
  font-size: 16px;
  font-weight: 800;
  color: rgba(255,255,255,0.96);
}

.rating-me__balance{
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255,255,255,0.54);
}

.rating-me__main::before{
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: brightness(1.14) saturate(1.16);
  transform: scale(1);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.rating-me--top1 .rating-me__main{
  color: #f4d57a;
}

.rating-me--top2 .rating-me__main{
  color: #d7e0ea;
}

.rating-me--top3 .rating-me__main{
  color: #d9a17d;
}

.rating-me--top1 .rating-me__main::before{
  display: block;
  background-image: url("/static/icons/one.svg");
  filter: brightness(1.16) saturate(1.2);
  animation: medalBreatheInline 3.6s ease-in-out infinite;
}

.rating-me--top2 .rating-me__main::before{
  display: block;
  background-image: url("/static/icons/two.svg");
  filter: brightness(1.15) saturate(1.18);
  animation: medalBreatheInline 3.6s ease-in-out infinite;
}

.rating-me--top3 .rating-me__main::before{
  display: block;
  background-image: url("/static/icons/three.svg");
  filter: brightness(1.15) saturate(1.18);
  animation: medalBreatheInline 3.6s ease-in-out infinite;
}

.rating-list{
  display: grid;
  gap: 7px;
  align-content: start;
  grid-auto-rows: max-content;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding-bottom: calc(110px + var(--safe-bottom, env(safe-area-inset-bottom)));
}

.rating-empty{
  border-radius: 14px;
  background: var(--panel-bg);
  padding: 14px 12px;
}

.rating-row{
  border-radius: 14px;
  border: 0;
  background: var(--panel-bg);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 28px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.rating-row--me{
  background: var(--panel-bg-strong);
}

.rating-row__rank{
  min-width: 28px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.74);
}

.rating-row__rank--top1,
.rating-row__rank--top2,
.rating-row__rank--top3{
  width: 28px;
  min-width: 28px;
  height: 22px;
  display: block;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  filter: brightness(1.14) saturate(1.16);
  transform: scale(1);
  transform-origin: 11px 50%;
  animation: medalBreatheInline 3.6s ease-in-out infinite;
  will-change: transform, opacity;
}

.rating-row__rank--top1{
  background-image: url("/static/icons/one.svg");
  filter: brightness(1.16) saturate(1.2);
}

.rating-row__rank--top2{
  background-image: url("/static/icons/two.svg");
  filter: brightness(1.15) saturate(1.18);
}

.rating-row__rank--top3{
  background-image: url("/static/icons/three.svg");
  filter: brightness(1.15) saturate(1.18);
}

@keyframes medalBreatheInline{
  0%, 100%{
    opacity: 0.76;
    transform: scale(0.96);
  }
  50%{
    opacity: 1;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce){
  .rating-me--top1 .rating-me__main::before,
  .rating-me--top2 .rating-me__main::before,
  .rating-me--top3 .rating-me__main::before,
  .rating-row__rank--top1,
  .rating-row__rank--top2,
  .rating-row__rank--top3{
    animation: none;
  }
}

.rating-row--top1{
  background: rgba(212,175,55,0.13);
  box-shadow:
    inset 0 0 0 1px rgba(212,175,55,0.38),
    inset 0 0 18px rgba(212,175,55,0.12),
    0 10px 24px -18px rgba(212,175,55,0.55);
}

.rating-row--top2{
  background: rgba(174,183,194,0.13);
  box-shadow:
    inset 0 0 0 1px rgba(174,183,194,0.34),
    inset 0 0 18px rgba(174,183,194,0.12),
    0 10px 24px -18px rgba(174,183,194,0.5);
}

.rating-row--top3{
  background: rgba(169,113,66,0.14);
  box-shadow:
    inset 0 0 0 1px rgba(169,113,66,0.38),
    inset 0 0 18px rgba(169,113,66,0.12),
    0 10px 24px -18px rgba(169,113,66,0.5);
}

.rating-row--top1,
.rating-row--top2,
.rating-row--top3{
  padding: 12px 12px;
}

.rating-row--top1 .rating-row__name,
.rating-row--top2 .rating-row__name,
.rating-row--top3 .rating-row__name{
  font-weight: 700;
}

.rating-row__avatar{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--panel-bg-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.rating-avatar-tap-target{
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rating-avatar-tap-target:focus-visible{
  outline: 2px solid rgba(190,205,230,0.62);
  outline-offset: 2px;
}

.rating-row__avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rating-row__avatar-txt{
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.2px;
}

.rating-row__center{
  min-width: 0;
}

.rating-row__name{
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rating-row__meta{
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
  min-height: 1.2em;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rating-row__right{
  text-align: right;
}

.rating-row__score{
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.96);
}

.rating-score--pos{
  color: var(--ok);
}

.rating-score--neg{
  color: var(--bad);
}

.rating-score--zero{
  color: rgba(255,255,255,0.74);
}

.rating-row--top1 .rating-row__score,
.rating-row--top2 .rating-row__score,
.rating-row--top3 .rating-row__score{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.rating-panel--period-total .rating-row--top1 .rating-row__score{
  color: #f4d57a;
}

.rating-panel--period-total .rating-row--top2 .rating-row__score{
  color: #d7e0ea;
}

.rating-panel--period-total .rating-row--top3 .rating-row__score{
  color: #d9a17d;
}

.rating-panel--period-total .rating-me--top1 .rating-me__score{
  color: #f4d57a;
}

.rating-panel--period-total .rating-me--top2 .rating-me__score{
  color: #d7e0ea;
}

.rating-panel--period-total .rating-me--top3 .rating-me__score{
  color: #d9a17d;
}

.rating-row__coins{
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255,255,255,0.54);
}

.rating-row--loading{
  pointer-events: none;
}

.rating-skeleton__rank{
  width: 36px;
  height: 10px;
}

.rating-skeleton__avatar{
  width: 32px;
  height: 32px;
  border-radius: 999px;
}

.rating-skeleton__name{
  width: 120px;
  height: 11px;
}

.rating-skeleton__meta{
  width: 78px;
  height: 9px;
  margin-top: 4px;
}

.rating-skeleton__score{
  width: 58px;
  height: 11px;
}

.profile-hero{
  padding: 10px 0 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.profile-hero__avatar{
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}

.profile-hero__avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-hero__avatar-txt{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .8px;
  color: rgba(255,255,255,0.92);
}

.profile-hero__nick{
  margin-top: 10px;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .1px;
  color: rgba(255,255,255,0.96);
}

.profile-hero__handle{
  margin-top: 6px;
  font-size: 16px;
  color: rgba(255,255,255,0.54);
  line-height: 1.2;
}

.profile-hero__username-status{
  margin-top: 8px;
  max-width: 320px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255,255,255,0.5);
  text-align: center;
}

#profilePanel .list-item{
  justify-content: flex-start;
  gap: 12px;
}

#profilePanel .list-item__label{
  margin-right: auto;
}

#bankPanel .list-item{
  justify-content: flex-start;
  gap: 12px;
}

#bankPanel .list-item__label{
  margin-right: auto;
}

#profilePanel .list-item__icon-chip,
#bankPanel .list-item__icon-chip,
.profile-settings-list .list-item__icon-chip{
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(165deg, var(--icon-chip-from, rgba(86,98,116,0.92)), var(--icon-chip-to, rgba(56,66,80,0.92)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}

#profilePanel .list-item__icon,
#bankPanel .list-item__icon,
.profile-settings-list .list-item__icon{
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  filter: brightness(0) invert(1);
  opacity: 1;
}

#profileInventoryBtn{
  --icon-chip-from: rgba(58,142,240,0.94);
  --icon-chip-to: rgba(37,102,192,0.94);
}

#myBetsBtn{
  --icon-chip-from: rgba(214,161,64,0.94);
  --icon-chip-to: rgba(166,114,39,0.94);
}

#profileStatsBtn{
  --icon-chip-from: rgba(106,121,224,0.94);
  --icon-chip-to: rgba(74,88,174,0.94);
}

#profileSettingsBtn{
  --icon-chip-from: rgba(104,113,126,0.94);
  --icon-chip-to: rgba(74,82,95,0.94);
}

#bankPassiveIncomeOpenBtn{
  --icon-chip-from: rgba(56,165,120,0.95);
  --icon-chip-to: rgba(35,122,89,0.95);
}

#bankInvestmentsOpenBtn{
  --icon-chip-from: rgba(67,176,158,0.95);
  --icon-chip-to: rgba(45,130,116,0.95);
}

#bankCreditsOpenBtn{
  --icon-chip-from: rgba(202,148,62,0.95);
  --icon-chip-to: rgba(158,104,38,0.95);
}

#bankLuckOpenBtn{
  --icon-chip-from: rgba(109,132,238,0.95);
  --icon-chip-to: rgba(74,95,186,0.95);
}

#profileSettingsUsernameBtn{
  --icon-chip-from: rgba(97,117,170,0.94);
  --icon-chip-to: rgba(70,86,134,0.94);
}

@media (min-width: 900px){
  .event-screen,
  .bets-screen,
  .profile-stats-screen,
  .rating-player-screen,
  .profile-settings-screen,
  .profile-username-visibility-screen,
  .admin-screen,
  .passive-income-screen,
  .luck-screen,
  .invest-screen,
  .credit-screen,
  .credit-history-screen,
  .inventory-screen,
  .coupon,
  .coupon-overlay,
  .poly-image-crop-modal,
  .poly-image-crop-overlay,
  .passive-income-overlay,
  .luck-overlay,
  .invest-overlay,
  .credit-overlay{
    position: absolute;
  }
  .credit-history-overlay{
    position: absolute;
  }
}

/* Telegram Desktop: keep overlay layers in the same containing block as feed,
   so "back" transition does not show split frames. */
body.tg-desktop .event-screen,
body.tg-desktop .bets-screen,
body.tg-desktop .profile-stats-screen,
body.tg-desktop .rating-player-screen,
body.tg-desktop .profile-settings-screen,
body.tg-desktop .profile-username-visibility-screen,
body.tg-desktop .admin-screen,
body.tg-desktop .passive-income-screen,
body.tg-desktop .luck-screen,
body.tg-desktop .invest-screen,
body.tg-desktop .credit-screen,
body.tg-desktop .credit-history-screen,
body.tg-desktop .inventory-screen,
body.tg-desktop .coupon,
body.tg-desktop .coupon-overlay,
body.tg-desktop .poly-image-crop-modal,
body.tg-desktop .poly-image-crop-overlay,
body.tg-desktop .passive-income-overlay,
body.tg-desktop .luck-overlay,
body.tg-desktop .invest-overlay,
body.tg-desktop .credit-overlay{
  position: absolute;
}
body.tg-desktop .credit-history-overlay{
  position: absolute;
}