/* ===================================================================
   TonPlay — design tokens
=================================================================== */
:root{
  --bg:            #0b0c0d;
  --bg-soft:       #0d1117;
  --panel:         #151920;
  --panel-2:       #1b212a;
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --text:          #f4f5f7;
  --text-dim:      #99a1ad;
  --text-faint:    #858f9f;

  --blue:          #0098ea;
  --blue-soft:     #4fc9ff;
  --blue-deep:     #0468ac;
  --blue-glow:     rgba(0,152,234,.38);

  --yellow:        #ffd23f;
  --yellow-soft:   #ffe27a;
  --purple:        #8a5cff;
  --orange:        #ff9a3d;
  --green:         #5fd66c;

  --radius-lg:      24px;
  --radius-md:      16px;
  --radius-sm:      10px;

  --shadow-card:    0 10px 30px rgba(0,0,0,.4);
  --shadow-pop:     0 20px 50px rgba(0,0,0,.5);
  --shadow-glow:    0 0 0 1px rgba(0,152,234,.3), 0 12px 30px rgba(0,152,234,.18);

  --font-display:  'Baloo 2', 'Inter', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;

  --header-h:      68px;
  --sidebar-w:     258px;

  --ease:          cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(120% 70% at 15% 0%, rgba(0,90,160,.16), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(0,60,120,.10), transparent 55%),
    linear-gradient(180deg, #0a0e14 0%, #0b0c0d 45%, #08090b 100%);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
input{ font:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .5em; line-height:1.15; }
p{ margin:0 0 1em; color:var(--text-dim); line-height:1.65; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--blue); color:#04121c; }
:focus-visible{ outline:2px solid var(--blue-soft); outline-offset:2px; border-radius:4px; }

.tp-page{ position:relative; min-height:100vh; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ===================================================================
   Scroll-reveal (premium, restrained motion)
=================================================================== */
.tp-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.tp-reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ===================================================================
   Buttons
=================================================================== */
.tp-btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 20px; border-radius:999px;
  font-weight:700; font-size:14px; white-space:nowrap;
  border:1px solid transparent; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s;
}
.tp-btn--sm{ height:36px; padding:0 16px; font-size:13px; }
.tp-btn--block{ width:100%; }
.tp-btn--primary{
  background:linear-gradient(135deg,var(--blue-soft),var(--blue));
  color:#04121c; box-shadow:0 6px 20px rgba(0,152,234,.4);
}
.tp-btn--primary::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform:translateX(-120%); transition:transform .6s var(--ease);
}
.tp-btn--primary:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,152,234,.5); }
.tp-btn--primary:hover::after{ transform:translateX(120%); }
.tp-btn--ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.tp-btn--ghost:hover{ background:var(--panel); border-color:var(--border-strong); }

/* ===================================================================
   Logo
=================================================================== */
.tp-logo{ display:flex; align-items:center; }
.tp-logo__img{ height:24px; width:auto; display:block; }

/* ===================================================================
   Sidebar (persistent left nav — replaces top nav bar)
=================================================================== */
.tp-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); z-index:90;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(0,152,234,.10), transparent 60%),
    linear-gradient(180deg, #0d1218, var(--bg) 55%);
  border-right:1px solid var(--border);
  transition:transform .28s var(--ease);
}
.tp-sidebar__scroll{ height:100%; overflow-y:auto; display:flex; flex-direction:column; padding:18px 12px 20px; }
.tp-sidebar__scroll::-webkit-scrollbar{ width:6px; }
.tp-sidebar__scroll::-webkit-scrollbar-thumb{ background:var(--panel-2); border-radius:99px; }

.tp-sidebar__head{ display:flex; align-items:center; justify-content:space-between; padding:6px 10px 22px; animation:tp-sidebar-item-in .5s var(--ease) both; }
.tp-sidebar__close{ display:none; width:34px; height:34px; border-radius:10px; background:var(--panel); border:1px solid var(--border); color:var(--text-dim); align-items:center; justify-content:center; }
.tp-sidebar__close svg{ width:16px; height:16px; }

.tp-sidebar__nav{ display:flex; flex-direction:column; gap:2px; }

@keyframes tp-sidebar-item-in{
  from{ opacity:0; transform:translateX(-12px); }
  to{ opacity:1; transform:translateX(0); }
}
.tp-sidebar__nav > .tp-sidebar__link,
.tp-sidebar__nav > .tp-sidebar__group-toggle{
  animation:tp-sidebar-item-in .45s var(--ease) both;
}
.tp-sidebar__nav > *:nth-child(1){ animation-delay:.02s; }
.tp-sidebar__nav > *:nth-child(2){ animation-delay:.05s; }
.tp-sidebar__nav > *:nth-child(3){ animation-delay:.08s; }
.tp-sidebar__nav > *:nth-child(4){ animation-delay:.11s; }
.tp-sidebar__nav > *:nth-child(6){ animation-delay:.14s; }
.tp-sidebar__nav > *:nth-child(9){ animation-delay:.17s; }
.tp-sidebar__nav > *:nth-child(10){ animation-delay:.20s; }
.tp-sidebar__nav > *:nth-child(11){ animation-delay:.23s; }
.tp-sidebar__nav > *:nth-child(12){ animation-delay:.26s; }
.tp-sidebar__nav > *:nth-child(13){ animation-delay:.29s; }
.tp-sidebar__nav > *:nth-child(14){ animation-delay:.32s; }

.tp-sidebar__link{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; margin:0 2px; border-radius:12px;
  border-left:3px solid transparent;
  font-weight:600; font-size:14.5px; color:var(--text-dim);
  transition:background .15s, color .15s, border-color .2s, box-shadow .25s;
  width:calc(100% - 4px); background:none; text-align:left; cursor:pointer;
}
.tp-sidebar__link:hover{ background:var(--panel); color:var(--text); }
.tp-sidebar__link:hover .tp-sidebar__icon{ transform:scale(1.16) rotate(-4deg); color:var(--blue-soft); }
.tp-sidebar__link.is-active{
  background:linear-gradient(90deg, rgba(0,152,234,.16), rgba(0,152,234,.02));
  color:var(--text); border-left-color:var(--blue);
  box-shadow:0 0 24px -10px rgba(0,152,234,.6);
}
.tp-sidebar__link.is-active .tp-sidebar__icon{ color:var(--blue-soft); filter:drop-shadow(0 0 5px rgba(0,152,234,.55)); }
.tp-sidebar__icon{ width:19px; height:19px; flex:none; display:flex; transition:transform .25s var(--ease), color .2s, filter .2s; }
.tp-sidebar__icon svg{ width:100%; height:100%; }
.tp-sidebar__icon--sm{ width:15px; height:15px; }
.tp-sidebar__label{ flex:1; }
.tp-sidebar__caret{ width:15px; height:15px; flex:none; color:var(--text-faint); transition:transform .3s var(--ease); }
.tp-sidebar__group-toggle.is-open .tp-sidebar__caret{ transform:rotate(180deg); color:var(--blue-soft); }
.tp-sidebar__group-toggle:hover .tp-sidebar__icon{ transform:scale(1.16) rotate(-4deg); color:var(--blue-soft); }

.tp-sidebar__divider{ height:1px; background:var(--border); margin:10px 10px; }

.tp-sidebar__submenu{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); display:flex; flex-direction:column; gap:1px; padding-left:10px; }
.tp-sidebar__submenu.is-open{ max-height:420px; }
.tp-sidebar__sublink{
  display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px;
  font-size:13.5px; font-weight:600; color:var(--text-dim);
  transition:background .15s, color .15s, transform .15s;
  opacity:0; transform:translateX(-8px);
}
.tp-sidebar__submenu.is-open .tp-sidebar__sublink{
  animation:tp-sidebar-item-in .35s var(--ease) forwards;
}
.tp-sidebar__submenu.is-open .tp-sidebar__sublink:nth-child(1){ animation-delay:.02s; }
.tp-sidebar__submenu.is-open .tp-sidebar__sublink:nth-child(2){ animation-delay:.05s; }
.tp-sidebar__submenu.is-open .tp-sidebar__sublink:nth-child(3){ animation-delay:.08s; }
.tp-sidebar__submenu.is-open .tp-sidebar__sublink:nth-child(4){ animation-delay:.11s; }
.tp-sidebar__submenu.is-open .tp-sidebar__sublink:nth-child(5){ animation-delay:.14s; }
.tp-sidebar__submenu.is-open .tp-sidebar__sublink:nth-child(6){ animation-delay:.17s; }
.tp-sidebar__submenu.is-open .tp-sidebar__sublink:nth-child(7){ animation-delay:.20s; }
.tp-sidebar__sublink:hover{ background:var(--panel); color:var(--text); transform:translateX(2px); }
.tp-sidebar__sublink.is-active{ color:var(--blue-soft); }

.tp-sidebar__foot{ margin-top:auto; padding-top:16px; display:flex; flex-direction:column; gap:8px; animation:tp-sidebar-item-in .5s var(--ease) .3s both; }

.tp-sidebar__backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:85;
  opacity:0; visibility:hidden; transition:opacity .25s;
}
.tp-sidebar__backdrop.is-open{ opacity:1; visibility:visible; }

.tp-shell{ margin-left:var(--sidebar-w); min-height:100vh; display:flex; flex-direction:column; }

@media (max-width:1180px){
  .tp-sidebar{ transform:translateX(-100%); box-shadow:var(--shadow-pop); }
  .tp-sidebar.is-open{ transform:translateX(0); }
  .tp-sidebar__close{ display:flex; }
  .tp-shell{ margin-left:0; }
}

/* ===================================================================
   Topbar (slim — search + auth actions; burger only on mobile)
=================================================================== */
.tp-topbar{
  position:sticky; top:0; z-index:60; height:var(--header-h);
  background:rgba(11,12,13,.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.tp-topbar__inner{ height:100%; padding:0 28px; display:flex; align-items:center; gap:16px; }
.tp-burger{
  display:none; width:38px; height:38px; border-radius:10px; flex:none;
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  align-items:center; justify-content:center;
}
.tp-burger svg{ width:19px; height:19px; }
.tp-logo--mobile{ display:none; }
@media (max-width:1180px){
  .tp-burger{ display:flex; }
  .tp-logo--mobile{ display:flex; }
}

.tp-topbar__promo{
  display:flex; align-items:center; justify-content:center; gap:8px;
  flex:1; max-width:220px;
  background:linear-gradient(135deg, var(--orange), #ffc36b); border-radius:999px;
  padding:0 18px; height:42px; color:#1a1006; font-family:var(--font-display); font-weight:700; font-size:14px;
  transition:transform .15s, box-shadow .15s;
}
.tp-topbar__promo:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(255,154,61,.35); }
.tp-topbar__promo svg{ width:18px; height:18px; flex:none; color:#1a1006; }

.tp-topbar__actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.tp-icon-btn{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--border); color:var(--text-dim); flex:none;
}
.tp-icon-btn svg{ width:18px; height:18px; }
.tp-icon-btn:hover{ color:var(--text); background:var(--panel); }
.tp-topbar__mobile-login{ display:none; }

@media (max-width:640px){
  .tp-topbar__inner{ padding:0 14px; gap:10px; }
  .tp-topbar__promo{ display:none; }
  .tp-icon-btn{ display:none; }
  .tp-topbar__mobile-login{ display:inline-flex; }
  .tp-topbar__login{ display:none; }
}

/* ===================================================================
   Shared page shell
=================================================================== */
.tp-container{ max-width:1440px; margin:0 auto; padding:0 24px; }
main{ flex:1; }

/* ===================================================================
   Hero showcase — full-width carousel banner with a floating card
   dock overlapping its lower edge (bento/spotlight composition)
=================================================================== */
.tp-hero-showcase{
  position:relative; margin:20px 24px 0; padding:0;
}
.tp-hero-showcase::before{
  content:''; position:absolute; inset:-40px 0 auto 0; height:280px; z-index:-1;
  background:radial-gradient(60% 100% at 30% 0%, rgba(0,152,234,.20), transparent 70%);
  filter:blur(10px); animation:tp-glow-pulse 6s ease-in-out infinite;
}
@keyframes tp-glow-pulse{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

.tp-hero-carousel-wrap{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-card); background:radial-gradient(120% 140% at 30% 20%, #1b2230, #0a0c10);
  width:100%; max-width:1680px; height:600px;
  transition:box-shadow .25s, transform .25s;
}
.tp-hero-carousel-wrap:hover{ box-shadow:var(--shadow-glow); }
.tp-hero-carousel{ position:absolute; inset:0; }
.tp-hero-carousel__slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease);
}
.tp-hero-carousel__slide.is-active{ opacity:1; visibility:visible; }
.tp-hero-carousel__fg{ position:absolute; inset:0; width:100%; height:100%; object-fit:inherit; object-position:center 42%; display:block; }
.tp-hero-carousel__fg--drops{ object-position:center 46%; }
.tp-hero-carousel__fg--spino{ object-position:center 32%; }
.tp-hero-carousel__fg--welcome{ object-position:center 32%; }
.tp-hero-carousel__fg--million{ object-position:center 42%; }
/* На узких экранах блок временами становится УЖЕ картинки (не шире) — тогда cover
   обрезает по бокам, а не сверху/снизу. Сдвигаем фокус влево (там текст), но Y по
   каждой картинке оставляем прежним — если в моменте всё же обрезается по высоте,
   старое значение Y продолжит работать правильно (X в этом случае просто не участвует). */
@media (max-width:640px){
  .tp-hero-carousel__fg--drops{ object-position:10% 46%; }
  .tp-hero-carousel__fg--spino{ object-position:10% 32%; }
  .tp-hero-carousel__fg--welcome{ object-position:10% 32%; }
  .tp-hero-carousel__fg--million{ object-position:10% 42%; }
}
.tp-hero-carousel__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:36px; height:36px; border-radius:999px;
  background:rgba(11,12,13,.55); border:1px solid rgba(255,255,255,.2); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.tp-hero-carousel__nav:hover{ background:rgba(0,152,234,.7); }
.tp-hero-carousel__nav svg{ width:16px; height:16px; }
.tp-hero-carousel__nav--prev{ left:16px; }
.tp-hero-carousel__nav--next{ right:16px; }
.tp-hero-carousel__dots{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; gap:6px;
}
.tp-hero-carousel__dots button{
  width:7px; height:7px; padding:0; border:none; border-radius:999px;
  background:rgba(255,255,255,.4); transition:width .2s, background .2s;
}
.tp-hero-carousel__dots button.is-active{ width:20px; background:var(--blue-soft); }

.tp-promo-dock{
  position:relative; z-index:3;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin:20px 0 0;
}
@media (max-width:1080px){
  .tp-hero-carousel-wrap{ height:440px; }
  .tp-promo-dock{ margin-top:18px; }
}
@media (max-width:760px){
  .tp-promo-dock{ grid-template-columns:1fr 1fr; margin-top:16px; gap:10px; }
}
@media (max-width:640px){
  .tp-hero-showcase{ margin:20px 14px 0; }
  .tp-hero-carousel-wrap{ height:280px; border-radius:var(--radius-md); }
}

.tp-promo-card--photo{
  padding:0; display:block; overflow:hidden; border-radius:var(--radius-md);
  aspect-ratio:295/168;
  box-shadow:var(--shadow-card);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tp-promo-card--photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.tp-promo-card--photo:hover{ transform:translateY(-5px); box-shadow:var(--shadow-glow); }
.tp-promo-card--photo:hover img{ transform:scale(1.04); }

/* ===================================================================
   Game filters + grid
=================================================================== */
.tp-filters{
  max-width:1440px; margin:28px auto 0; padding:0 24px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  border-bottom:1px solid var(--border); padding-bottom:14px;
}
.tp-filters__tab{
  padding:9px 16px; border-radius:999px; font-weight:700; font-size:14px;
  color:var(--text-dim); display:flex; align-items:center; gap:6px; transition:background .15s, color .15s;
  background:none; border:none;
}
.tp-filters__tab.is-active{ background:var(--panel-2); color:var(--blue-soft); }
.tp-filters__tab:hover:not(.is-active){ color:var(--text); }
.tp-filters__search{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--border); border-radius:999px;
  padding:0 14px; height:38px; color:var(--text-faint); min-width:220px;
}
.tp-filters__search svg{ width:15px; height:15px; flex:none; }
.tp-filters__search input{ background:none; border:none; outline:none; color:var(--text); width:100%; font-size:13px; }

.tp-section{ max-width:1440px; margin:0 auto; padding:26px 24px 0; scroll-margin-top:calc(var(--header-h) + 16px); }
.tp-section__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.tp-section__head h2{ font-size:20px; }
.tp-section__head .tp-section__title{
  font-family:var(--font-display); font-weight:700; line-height:1.15; margin:0 0 .5em; font-size:20px;
}
.tp-section__all{ font-size:13px; font-weight:700; color:var(--blue-soft); transition:opacity .15s; }
.tp-section__all:hover{ opacity:.75; }

.tp-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:14px; }
.tp-game-card{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  aspect-ratio:3/4; background:var(--panel); box-shadow:var(--shadow-card);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.tp-game-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-glow); }
.tp-game-card img{ width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ease); }
.tp-game-card:hover img{ transform:scale(1.05); }
.tp-game-card--photo{ display:block; }
.tp-game-card__tag{
  position:absolute; top:8px; left:8px; z-index:2;
  background:rgba(11,12,13,.75); backdrop-filter:blur(4px); border-radius:6px; padding:3px 7px;
  font-size:10px; font-weight:800; color:var(--blue-soft);
}

/* ===================================================================
   Marquee — infinite auto-scrolling game row (homepage)
=================================================================== */
.tp-marquee{ position:relative; overflow:hidden; margin:0 -24px; padding:0 24px; }
.tp-marquee::before,.tp-marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:70px; z-index:3; pointer-events:none;
}
.tp-marquee::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.tp-marquee::after{ right:0; background:linear-gradient(270deg, var(--bg), transparent); }
.tp-marquee__track{
  display:flex; gap:14px; width:max-content;
  animation-name:tp-marquee-scroll; animation-timing-function:linear; animation-iteration-count:infinite;
}
.tp-marquee:hover .tp-marquee__track{ animation-play-state:paused; }
@keyframes tp-marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.tp-marquee .tp-game-card{ flex:0 0 168px; aspect-ratio:3/4; }
@media (max-width:640px){
  .tp-marquee{ margin:0 -14px; padding:0 14px; }
  .tp-marquee .tp-game-card{ flex-basis:132px; }
}

/* Режим активного поиска: карусели останавливаются и разворачиваются в обычную сетку */
body.is-searching .tp-marquee{ overflow:visible; }
body.is-searching .tp-marquee::before,
body.is-searching .tp-marquee::after{ display:none; }
body.is-searching .tp-marquee__track{
  animation-play-state:paused !important; flex-wrap:wrap; width:100%;
}
body.is-searching .tp-marquee__dup{ display:none; }
.tp-game-card.is-search-hidden{ display:none !important; }
.tp-search-empty{
  display:none; text-align:center; padding:40px 20px; color:var(--text-faint); font-size:14px;
}
.tp-search-empty.is-visible{ display:block; }

/* ===================================================================
   Provider directory grid
=================================================================== */
.tp-provider-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.tp-provider-logo{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px; display:flex; align-items:center; justify-content:center;
  aspect-ratio:338/134; transition:border-color .18s, transform .18s, box-shadow .18s;
}
.tp-provider-logo:hover{ border-color:var(--blue); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,152,234,.15); }
.tp-provider-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
@media (max-width:1080px){ .tp-provider-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:640px){ .tp-provider-grid{ grid-template-columns:repeat(3,1fr); gap:8px; } .tp-provider-logo{ padding:10px; } }

/* ===================================================================
   Providers strip — static row, scrolled via arrow buttons (not auto)
=================================================================== */
.tp-scroll-nav{
  width:34px; height:34px; border-radius:999px; flex:none;
  background:var(--panel); border:1px solid var(--border); color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s, border-color .15s;
}
.tp-scroll-nav svg{ width:16px; height:16px; }
.tp-scroll-nav:hover{ background:var(--panel-2); color:var(--blue-soft); border-color:rgba(0,152,234,.35); }

.tp-provider-strip{
  display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px;
}
.tp-provider-strip::-webkit-scrollbar{ display:none; }
.tp-provider-strip__card{
  flex:0 0 176px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:20px 16px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  transition:border-color .18s, transform .18s;
}
.tp-provider-strip__card:hover{ border-color:var(--blue); transform:translateY(-3px); }
.tp-provider-strip__card img{ height:34px; width:auto; max-width:100%; object-fit:contain; }
.tp-provider-strip__card span{ font-size:13px; font-weight:700; color:var(--text-dim); }

/* ===================================================================
   Bets table (live wins ticker) — demo/placeholder feed
=================================================================== */
.tp-bets-tabs{ display:flex; gap:4px; background:var(--panel); border-radius:999px; padding:4px; flex-wrap:wrap; }
.tp-bets-tabs button{
  padding:8px 14px; border-radius:999px; font-size:13px; font-weight:700; color:var(--text-dim);
  background:none; border:none; transition:background .15s, color .15s; white-space:nowrap;
}
.tp-bets-tabs button.is-active{ background:var(--panel-2); color:var(--text); }

.tp-bets-table{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden;
}
.tp-bets-row, .tp-bets-table__head{
  display:grid; grid-template-columns:2.1fr 1.2fr 1fr 0.8fr 1fr;
  align-items:center; gap:12px; padding:12px 20px;
}
.tp-bets-table__head{
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint);
  border-bottom:1px solid var(--border);
}
.tp-bets-row{
  position:relative; border-bottom:1px solid var(--border); transition:background .15s;
}
.tp-bets-row::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0;
  background:var(--row-accent, var(--blue));
}
.tp-bets-row:last-child{ border-bottom:none; }
.tp-bets-row:hover{ background:var(--panel-2); }
.tp-bets-row__game{ display:flex; align-items:center; gap:12px; min-width:0; }
.tp-bets-row__game img{ width:38px; height:38px; border-radius:9px; object-fit:cover; flex:none; }
.tp-bets-row__game-meta{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.tp-bets-row__provider{ font-size:11px; color:var(--blue-soft); font-weight:700; }
.tp-bets-row__name{ font-size:13.5px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tp-bets-row__user{ font-size:13px; color:var(--text-dim); font-family:monospace; }
.tp-bets-row__amount, .tp-bets-row__payout{ font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:5px; }
.tp-bets-row__amount{ color:var(--text-dim); }
.tp-bets-row__mult{ font-size:13.5px; font-weight:800; color:var(--text-faint); }
.tp-bets-row__mult.is-win{ color:var(--green); }
.tp-bets-row__payout.is-win{ color:var(--green); }
.tp-bets-row__payout.is-loss{ color:var(--text-faint); }
.tp-bets-row__coin{
  width:16px; height:16px; border-radius:999px; background:var(--green); color:#042010;
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; flex:none;
}
.tp-bets-row__payout.is-loss .tp-bets-row__coin{ background:var(--panel-2); color:var(--text-faint); }

@keyframes tp-bet-row-in{
  from{ opacity:0; transform:translateY(-10px); background:rgba(0,152,234,.14); }
  to{ opacity:1; transform:translateY(0); }
}
.tp-bets-row--enter{ animation:tp-bet-row-in .45s ease; }

@media (max-width:900px){
  .tp-bets-row, .tp-bets-table__head{ grid-template-columns:2fr 1fr 1fr; }
  .tp-bets-table__head span:nth-child(2), .tp-bets-table__head span:nth-child(4),
  .tp-bets-row__user, .tp-bets-row__mult{ display:none; }
}
@media (max-width:640px){
  .tp-bets-row, .tp-bets-table__head{ padding:10px 14px; gap:8px; }
  .tp-bets-row__game img{ width:30px; height:30px; }
}


.tp-footer{ margin-top:56px; border-top:1px solid var(--border); background:var(--bg-soft); }
.tp-footer__inner{ max-width:1440px; margin:0 auto; padding:36px 24px 24px; }
.tp-footer__top{ display:flex; flex-wrap:wrap; gap:40px; padding-bottom:28px; border-bottom:1px solid var(--border); }
.tp-logo--footer{ align-self:flex-start; }
.tp-footer__cols{ display:flex; gap:44px; flex:1; flex-wrap:wrap; }
.tp-footer__col{ display:flex; flex-direction:column; gap:10px; min-width:160px; }
.tp-footer__col-title{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); margin-bottom:2px; }
.tp-footer__col a{ font-size:14px; font-weight:600; color:var(--text-dim); transition:color .15s; }
.tp-footer__col a:hover{ color:var(--blue-soft); }
.tp-footer__support{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px 20px; min-width:240px;
}
.tp-footer__support h2{ font-size:15px; margin-bottom:2px; }
.tp-footer__support p{ font-size:13px; margin-bottom:14px; }

.tp-footer__strip{ display:flex; flex-wrap:wrap; gap:32px; padding:24px 0; border-bottom:1px solid var(--border); }
.tp-footer__stat{ display:flex; align-items:center; gap:12px; }
.tp-footer__stat strong{ font-family:var(--font-display); font-size:24px; color:var(--blue-soft); }
.tp-footer__stat span{ font-size:12px; color:var(--text-faint); line-height:1.4; }
.tp-footer__social{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.tp-footer__social span{ font-size:12px; color:var(--text-faint); line-height:1.4; }
.tp-footer__social-icons{ display:flex; gap:8px; }
.tp-footer__social-icons a{
  width:34px; height:34px; border-radius:999px; background:var(--panel); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--text-dim);
  transition:border-color .15s, color .15s;
}
.tp-footer__social-icons a:hover{ border-color:var(--blue); color:var(--blue-soft); }

.tp-footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:18px; }
.tp-footer__bottom p{ margin:0; font-size:13px; color:var(--text-faint); }
.tp-footer__age{ font-weight:800; color:var(--text-dim) !important; }
.tp-footer__disclaimer{ font-size:12px; color:var(--text-faint); margin-top:12px; max-width:820px; }

.tp-to-top{
  position:fixed; right:22px; bottom:22px; z-index:50;
  width:44px; height:44px; border-radius:999px;
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s, transform .2s, visibility .2s, border-color .2s;
}
.tp-to-top svg{ width:16px; height:16px; }
.tp-to-top:hover{ border-color:var(--blue); }
.tp-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* ===================================================================
   Inner / content pages — premium page-hero + upgraded content blocks
=================================================================== */
.tp-page-hero{
  position:relative; max-width:1440px; margin:0 auto; padding:44px 24px 30px;
  border-bottom:1px solid var(--border); overflow:hidden;
}
.tp-page-hero__glow{
  position:absolute; top:-60px; left:24px; width:340px; height:220px; z-index:-1;
  background:radial-gradient(closest-side, rgba(0,152,234,.22), transparent 75%);
  filter:blur(6px); animation:tp-glow-pulse 6s ease-in-out infinite;
}
.tp-page-hero__icon{
  width:52px; height:52px; border-radius:16px; margin-bottom:16px;
  background:linear-gradient(150deg, rgba(0,152,234,.22), rgba(0,152,234,.05));
  border:1px solid rgba(0,152,234,.35);
  display:flex; align-items:center; justify-content:center; color:var(--blue-soft);
}
.tp-page-hero__icon svg{ width:26px; height:26px; }
.tp-page-hero__eyebrow{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:var(--blue-soft); margin-bottom:10px;
}
.tp-page-hero h1{ font-size:clamp(26px,4vw,40px); max-width:760px; }
.tp-page-hero p{ max-width:640px; font-size:15px; }

.tp-content{ max-width:820px; margin:0 auto; padding:36px 24px 64px; }
.tp-content h2{ font-size:22px; margin-top:1.6em; position:relative; padding-left:16px; }
.tp-content h2::before{
  content:''; position:absolute; left:0; top:.15em; bottom:.15em; width:4px; border-radius:4px;
  background:linear-gradient(180deg, var(--blue-soft), var(--blue));
}
/* Визуально идентично .tp-content h2, но не является заголовком (не влияет на outline страницы) */
.tp-heading-plain{
  font-family:var(--font-display); font-weight:700; line-height:1.15; color:var(--text);
  font-size:22px; margin:1.6em 0 .5em; position:relative; padding-left:16px;
}
.tp-heading-plain::before{
  content:''; position:absolute; left:0; top:.15em; bottom:.15em; width:4px; border-radius:4px;
  background:linear-gradient(180deg, var(--blue-soft), var(--blue));
}
.tp-content h3{ font-size:17px; margin-top:1.4em; color:var(--text); }
.tp-content p, .tp-content li{ font-size:15px; color:var(--text-dim); }
.tp-content ul, .tp-content ol{ padding-left:1.2em; margin-bottom:1em; list-style:disc; }
.tp-content ol{ list-style:none; padding-left:0; counter-reset:tp-step; display:flex; flex-direction:column; gap:10px; }
.tp-content ol li{
  counter-increment:tp-step; position:relative; padding:12px 16px 12px 52px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-sm);
}
.tp-content ol li::before{
  content:counter(tp-step); position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:999px; background:linear-gradient(135deg,var(--blue-soft),var(--blue));
  color:#04121c; font-family:var(--font-display); font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.tp-content a{ color:var(--blue-soft); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.tp-content .tp-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.4em 0; }
.tp-content table{ width:100%; border-collapse:collapse; margin:0; font-size:14px; }
.tp-content th,.tp-content td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); }
.tp-content th{ color:var(--text); font-family:var(--font-display); }
.tp-content tr:hover td{ background:var(--panel); }
@media (max-width:640px){
  .tp-content table{ min-width:460px; } /* даёт таблице проскроллиться, а не сплющиться в кашу */
  .tp-content th,.tp-content td{ white-space:nowrap; }
}
.tp-content .tp-callout{
  position:relative; background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--blue);
  border-radius:var(--radius-sm); padding:16px 18px 16px 46px; margin:1.4em 0;
}
.tp-content .tp-callout::before{
  content:'i'; position:absolute; left:16px; top:16px; width:20px; height:20px; border-radius:999px;
  background:rgba(0,152,234,.18); color:var(--blue-soft); font-family:var(--font-display); font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.tp-content .tp-callout p:last-child{ margin-bottom:0; }

.tp-faq{ display:flex; flex-direction:column; gap:10px; }
.tp-faq__item{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; transition:border-color .15s; }
.tp-faq__item.is-open{ border-color:rgba(0,152,234,.35); }
.tp-faq__q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; font-weight:700; font-size:15px; background:none; border:none; color:var(--text); text-align:left;
}
.tp-faq__q::after{ content:'+'; font-size:20px; color:var(--text-faint); transition:transform .2s, color .2s; }
.tp-faq__item.is-open .tp-faq__q::after{ transform:rotate(45deg); color:var(--blue-soft); }
.tp-faq__a{ max-height:0; overflow:hidden; transition:max-height .25s var(--ease); }
.tp-faq__item.is-open .tp-faq__a{ max-height:400px; }
.tp-faq__a p{ padding:0 18px 16px; margin:0; font-size:14px; }

.tp-stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin:1.6em 0; }
.tp-stat-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; text-align:center;
  transition:border-color .18s, transform .18s;
}
.tp-stat-card:hover{ border-color:rgba(0,152,234,.35); transform:translateY(-2px); }
.tp-stat-card strong{ display:block; font-family:var(--font-display); font-size:24px; color:var(--blue-soft); }
.tp-stat-card span{ font-size:12px; color:var(--text-faint); }

/* ===================================================================
   Responsive
=================================================================== */
@media (max-width:1080px){
  .tp-promos{ grid-template-columns:1fr 1fr; }
  .tp-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:640px){
  .tp-filters{ padding:0 14px 12px; margin-top:20px; }
  .tp-filters__search{ display:none; }
  .tp-section{ padding:18px 14px 0; }
  .tp-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .tp-footer__inner{ padding:28px 14px 18px; }
  .tp-footer__cols{ gap:28px; }
  .tp-footer__social{ margin-left:0; width:100%; justify-content:space-between; }
  .tp-footer__bottom{ flex-direction:column; align-items:flex-start; gap:6px; }
  .tp-page-hero{ padding:32px 14px 22px; }
  .tp-content{ padding:28px 14px 48px; }
}

/* ===================================================================
   Homepage SEO-text block — plain flowing list, no accordion
=================================================================== */
.tp-seo-text h1{
  font-family:var(--font-display); font-weight:700; color:var(--text);
  font-size:clamp(24px,3vw,34px); line-height:1.25; margin:0 0 18px;
}
.tp-seo-text__list{
  list-style:disc; padding-left:1.3em; margin:0; display:flex; flex-direction:column; gap:12px;
}
.tp-seo-text__list li{ font-size:15px; color:var(--text-dim); line-height:1.5; }

/* ===================================================================
   Mobile/PageSpeed optimizations — visual layout unchanged
=================================================================== */
@supports (content-visibility:auto){
  .tp-section, .tp-content{
    content-visibility:auto;
    contain-intrinsic-size:auto 620px;
  }
  .tp-footer{
    content-visibility:auto;
    contain-intrinsic-size:auto 520px;
  }
}

@media (max-width:640px){
  body{ background-attachment:scroll; }
  .tp-topbar{
    background:rgba(11,12,13,.97);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .tp-hero-showcase::before, .tp-page-hero__glow{
    filter:none;
    animation:none;
  }
}