/* ============================================================================================================
   CLUB — the Telegram Casino design the owner chose: a private club in black and gold.
   The app has its OWN composition (tg-shell.js builds the Home, the lobby switch and the bar); the casino's pages
   (lobby grids, account, payments, bonuses, wheel…) are the website's own modules, dressed here.
   Identity: only the casino's logo and name come from the casino. Dark only. The metal can be changed per casino.
   Another Telegram design = another file like this one (html[data-tg="<name>"]).
   ============================================================================================================ */
html[data-tg]{
  --g:#060606; --s1:#0E0E0E; --s2:#171614; --s3:#201E1A; --tx:#F3ECDC; --mu:#928B7C; --mu2:#5F5A50; --line:rgba(233,207,139,.20); --line2:rgba(255,255,255,.07);
  --m1:#8A6A2E; --m2:#F0DCA0; --m3:#B48A3C; --metal:linear-gradient(118deg,#8A6A2E 0%,#E9CF8B 28%,#B98F3E 52%,#F6E7B2 74%,#9C7631 100%); --metal-solid:#D9BC7A; --on-metal:#1B1404;
  --card:linear-gradient(135deg,#1B1915 0%,#0B0B0B 46%,#15130F 100%); --live:#E5484D; --good:#7FD6A8; --bad:#E77B86;
  --display:'Cormorant Garamond','Cormorant','Georgia',serif; --body:'Jost','Futura','Avenir Next','Segoe UI',sans-serif; --r:18px;
  /* the website's own tokens, pointed at the club palette so every module inherits it */
  --ink:var(--g); --surface:var(--s1); --surface-raised:var(--s2); --border:var(--line2); --text:var(--tx); --muted:var(--mu); --muted-2:var(--mu2); --accent:var(--metal-solid); --win:var(--good); --stake:var(--bad);
  --font-display:var(--display); --font-body:var(--body); --font-mono:var(--body);
  --tgx-top:0px; --tgx-bottom:0px; --tgx-left:0px; --tgx-right:0px; --tgx-vh:100vh; --tgx-bar:68px;
  color-scheme:dark; -webkit-text-size-adjust:100%;
}
html[data-tg][data-metal="platinum"]{ --m1:#6F757C; --m2:#F2F5F7; --m3:#A9B1B9; --metal:linear-gradient(118deg,#6F757C 0%,#E4E9ED 28%,#9AA3AC 52%,#F7F9FA 74%,#7E868E 100%); --metal-solid:#D3DAE0; --on-metal:#0E1114; --line:rgba(211,218,224,.20); }
html[data-tg][data-metal="rose"]{ --m1:#8C5A4B; --m2:#F3CDBF; --m3:#BD8673; --metal:linear-gradient(118deg,#8C5A4B 0%,#EBC0AF 28%,#B98271 52%,#F8DDD2 74%,#9A6656 100%); --metal-solid:#E0B3A2; --on-metal:#1C0E0A; --line:rgba(224,179,162,.20); }
html[data-tg][data-metal="brass"]{ --m1:#6E5A22; --m2:#E6D38C; --m3:#A58B38; --metal:linear-gradient(118deg,#6E5A22 0%,#DCC67A 28%,#A58B38 52%,#EFE1A6 74%,#7F6A2B 100%); --metal-solid:#CDB669; --on-metal:#171202; --line:rgba(205,182,105,.20); }

/* ---------- canvas ---------- */
html[data-tg], html[data-tg] body{ background:var(--g); overscroll-behavior-y:none; height:auto; } /* the website pins html/body to 100% height: content then overflows the box and any bottom padding sits in the MIDDLE of the page */
/* the floating bar must never cover the last thing on a page: the room for it goes after the content itself */
html[data-tg] main{ padding-bottom:calc(var(--tgx-bar) + var(--tgx-bottom) + 56px); } html[data-tg].tgx-immersive main{ padding-bottom:0; }
html[data-tg] body{ font-family:var(--body); font-size:15px; color:var(--tx); -webkit-font-smoothing:antialiased; min-height:var(--tgx-vh); padding-top:calc(var(--tgx-top) + 8px); padding-bottom:0;
  background:radial-gradient(90% 46% at 50% -6%, rgba(217,188,122,.15), transparent 70%) fixed, var(--g); }
html[data-tg] body::selection, html[data-tg] ::selection{ background:rgba(217,188,122,.35); }
html[data-tg] *{ -webkit-tap-highlight-color:transparent; }
html[data-tg] h1, html[data-tg] h2, html[data-tg] h3{ font-family:var(--display); font-weight:600; letter-spacing:-.012em; }
html[data-tg].tgx-desktop body{ max-width:480px; margin-inline:auto; box-shadow:0 0 0 1px var(--line2); }
/* film grain over everything, under the bar and the sheets */
html[data-tg] body::before{ content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.45; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
/* splash until Telegram has told us who this is */
html[data-tg]:not(.tgx-ready) body > *:not(.tgx-gate){ visibility:hidden; }
html[data-tg]:not(.tgx-ready) body::after{ content:''; position:fixed; z-index:901; top:calc(50% - 23px); left:calc(50% - 23px); width:46px; height:46px; border-radius:50%; border:1px solid var(--line); border-top-color:var(--metal-solid); animation:tgx-spin 1.1s linear infinite; }
@keyframes tgx-spin{ to{ transform:rotate(360deg); } } @keyframes tgx-rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } @keyframes tgx-sheet{ from{ transform:translateY(46px); opacity:0; } to{ transform:none; opacity:1; } }

/* ---------- what the app never shows (it has its own) ---------- */
html[data-tg] .site-clock, html[data-tg] .clock-bar, html[data-tg] #demo-bar, html[data-tg] .theme-row, html[data-tg] #home-rails, html[data-tg] header.site, html[data-tg] footer, html[data-tg] .promo-strip, html[data-tg] .tpl-preview, html[data-tg] #view-home > .wrap, html[data-tg] #acc-logout, html[data-tg] .back-link, html[data-tg] .back-to-lobby,
html[data-tg] .section-head span.see-all, html[data-tg] #fullscreen-toggle, html[data-tg] #tg-banner-host, html[data-tg] .game-card .play, html[data-tg] .account-intro, html[data-tg] #type-chips, html[data-tg] #provider-chips, html[data-tg] #lc-provider-chips{ display:none !important; }
html[data-tg].tgx-gated main, html[data-tg].tgx-gated .tgx-tabs{ display:none !important; }

/* ---------- shared atoms ---------- */
.tgx-ic{ width:1em; height:1em; flex:none; display:inline-block; vertical-align:-.14em; fill:currentColor; }
.tgx-eyebrow{ font:600 10.5px/1 var(--body); letter-spacing:.22em; text-transform:uppercase; color:var(--mu); }
.tgx-metal-text{ background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tgx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 18px; border-radius:14px; border:0; font:600 14.5px/1 var(--body); letter-spacing:.02em; text-decoration:none; cursor:pointer; color:var(--on-metal); background:var(--metal); box-shadow:0 12px 26px -14px var(--metal-solid), inset 0 1px 0 rgba(255,255,255,.35); width:100%; }
.tgx-btn .tgx-ic{ font-size:17px; } .tgx-btn:active{ transform:scale(.985); } .tgx-btn:disabled{ opacity:.55; }
.tgx-btn.ghost{ background:rgba(255,255,255,.035); color:var(--tx); border:1px solid var(--line); box-shadow:none; } .tgx-btn.sm{ width:auto; min-height:40px; padding:0 16px; border-radius:999px; font-size:13.5px; }
.tgx-iconbtn{ position:relative; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:20px; color:var(--tx); background:var(--s1); border:1px solid var(--line2); padding:0; }
.tgx-langbtn{ overflow:hidden; } .tgx-flag{ width:24px; height:24px; border-radius:50%; display:block; box-shadow:0 0 0 1px rgba(255,255,255,.18); } .tgx-row-ic.is-flag .tgx-flag{ width:28px; height:28px; }
.tgx-crest{ border-radius:50%; display:grid; place-items:center; overflow:hidden; background:linear-gradient(var(--s1),var(--s1)) padding-box, var(--metal) border-box; border:1px solid transparent; flex:none; }
.tgx-crest b{ font:italic 500 1em/1 var(--display); background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; } .tgx-crest img{ width:68%; height:68%; object-fit:contain; }
.tgx-crest.sm{ width:42px; height:42px; font-size:24px; } .tgx-crest.lg{ width:96px; height:96px; font-size:54px; box-shadow:0 0 0 9px rgba(255,255,255,.025), 0 30px 60px -24px #000; }

/* ---------- the app's own Home ---------- */
.tgx-home{ position:relative; z-index:2; display:flex; flex-direction:column; gap:18px; padding:14px 18px 8px; animation:tgx-rise .4s cubic-bezier(.2,.7,.2,1) backwards; }
.tgx-hello{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; } .tgx-hello > div:first-child{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.tgx-hello h2{ margin:0; font-size:38px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tgx-hello-r{ display:flex; align-items:center; gap:10px; }
html[data-tg] .tgx-hello-r #notif-menu{ position:static; } html[data-tg] .notif-btn{ width:42px; height:42px; border-radius:50%; background:var(--s1); border:1px solid var(--line2); color:var(--tx); display:grid; place-items:center; padding:0; font-size:20px; }
html[data-tg] .notif-btn svg:not(.tgx-ic){ display:none; } html[data-tg] .notif-count{ top:-2px; inset-inline-end:-2px; background:var(--metal); color:var(--on-metal); font:600 10px/1 var(--body); min-width:17px; height:17px; border:2px solid var(--g); }
html[data-tg] .notif-panel{ position:fixed; z-index:120; inset-inline:12px; top:calc(var(--tgx-top) + 70px); width:auto; max-height:min(70vh, 540px); border-radius:22px; background:var(--s2); border:1px solid var(--line); box-shadow:0 30px 60px -20px #000; padding:8px; }
html[data-tg] .notif-item{ border-radius:14px; }
.tgx-member{ position:relative; overflow:hidden; border-radius:22px; padding:15px 18px 16px; display:flex; flex-direction:column; gap:10px; border:1px solid transparent; background:var(--card) padding-box, var(--metal) border-box; box-shadow:0 26px 50px -28px #000; }
.tgx-member::before{ content:''; position:absolute; inset:0; opacity:.5; pointer-events:none; background:repeating-radial-gradient(circle at 112% -20%, transparent 0 9px, rgba(255,255,255,.035) 9px 10px); }
.tgx-member::after{ content:''; position:absolute; top:-40%; left:-30%; width:60%; height:180%; transform:rotate(24deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent); pointer-events:none; }
.tgx-member > *{ position:relative; z-index:1; } .tgx-member-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; } .tgx-member-top .tgx-ic{ font-size:22px; color:var(--metal-solid); }
.tgx-amount{ display:flex; align-items:baseline; gap:10px; min-width:0; } .tgx-cur{ font:600 12px/1 var(--body); letter-spacing:.2em; color:var(--mu); }
.tgx-num{ font:600 clamp(33px, 10.4vw, 42px)/1 var(--display); letter-spacing:-.01em; font-variant-numeric:lining-nums tabular-nums; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; direction:ltr; } .tgx-num small{ font-size:.52em; opacity:.85; }
.tgx-split{ display:flex; flex-wrap:wrap; gap:6px 22px; font:500 14px/1 var(--body); font-variant-numeric:tabular-nums; } .tgx-split i{ font-style:normal; color:var(--mu); font-size:11px; letter-spacing:.14em; text-transform:uppercase; } .tgx-split span{ display:inline-flex; align-items:baseline; gap:8px; }
.tgx-member-act{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:2px; } .tgx-member-act .tgx-btn{ min-height:44px; font-size:14px; }
.tgx-promos-wrap{ display:flex; flex-direction:column; gap:9px; } .tgx-promos-wrap[hidden]{ display:none; }
.tgx-promos{ display:flex; gap:12px; overflow-x:auto; margin-inline:-18px; padding:2px 18px; scroll-padding-inline:18px; scrollbar-width:none; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; } .tgx-promos::-webkit-scrollbar{ display:none; }
.tgx-pslide{ position:relative; isolation:isolate; overflow:hidden; flex:0 0 calc(100% - 26px); min-width:0; min-height:0; scroll-snap-align:center; scroll-snap-stop:always; border-radius:20px; padding:13px 16px 14px; display:flex; flex-direction:column; gap:4px; cursor:pointer; border:1px solid var(--line2);
  background:radial-gradient(120% 90% at 100% 0%, rgba(217,188,122,.20), transparent 58%), linear-gradient(160deg, var(--s2), var(--s1) 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.tgx-promos-wrap.one .tgx-pslide{ flex-basis:100%; } .tgx-pslide.tgx-skel{ cursor:default; }
.tgx-pslide::after{ content:''; position:absolute; inset-inline:16px; top:0; height:1px; background:var(--metal); opacity:.7; }
.tgx-pslide-mark{ position:absolute; z-index:-1; inset-inline-end:-8px; bottom:-14px; font-size:92px; line-height:0; color:var(--metal-solid); opacity:.13; transform:rotate(-10deg); } [dir=rtl] .tgx-pslide-mark{ transform:rotate(10deg); }
.tgx-pslide-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 10px; } .tgx-pslide-top .tgx-eyebrow{ color:var(--metal-solid); white-space:nowrap; }
.tgx-plive{ display:inline-flex; align-items:center; gap:6px; font:600 10px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--tx); white-space:nowrap; } .tgx-plive i{ width:6px; height:6px; border-radius:50%; background:#5fd39a; box-shadow:0 0 0 3px rgba(95,211,154,.18); } .tgx-plive.off{ color:var(--mu); } .tgx-plive.off i{ background:var(--mu); box-shadow:none; } .tgx-plive:empty{ display:none; }
.tgx-pslide h3{ margin:2px 0 0; font-size:clamp(20px, 5.9vw, 24px); line-height:1.08; text-wrap:balance; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.08em; }
.tgx-pslide-row .tgx-btn{ max-width:100%; white-space:normal; text-align:center; }
.tgx-pslide p{ display:none !important; margin:0; font-size:12.5px; line-height:1.35; color:var(--mu); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; max-width:82%; }
.tgx-pslide-row{ display:flex; align-items:center; gap:8px 10px; margin-top:auto; padding-top:8px; min-width:0; } .tgx-pslide-row .tgx-btn{ flex:none; } .tgx-pchips{ flex:1 1 0; height:23px; overflow:hidden; } /* one line: a chip that does not fit drops to the hidden second line — never half a chip */
@media (max-width:359px){ .tgx-plive:not(.off){ font-size:0 !important; gap:0; } .tgx-pchips{ display:none !important; } } .tgx-pslide-row .tgx-btn.sm{ min-height:34px; padding:0 14px; font-size:12.5px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); } .tgx-pchips{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; } .tgx-pchips i{ font:500 10.5px/1 var(--body); font-style:normal; color:var(--mu); border:1px solid var(--line); border-radius:99px; padding:5px 8px; white-space:nowrap; }
.tgx-pslide.later h3{ opacity:.75; }
.tgx-dots{ display:flex; justify-content:center; gap:6px; } .tgx-dots i{ width:6px; height:6px; border-radius:99px; background:var(--line2); transition:width .3s ease, background .3s ease; } .tgx-dots i.on{ width:20px; background:var(--metal-solid); }
.tgx-meta{ font-size:12.5px; color:var(--mu); }
.tgx-railhead{ display:flex; align-items:center; gap:11px; margin-top:6px; min-width:0; } .tgx-railhead h3{ margin:0; font-size:23px; line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tgx-railhead .tgx-more{ margin-inline-start:auto; flex:none; }
.tgx-rh-t{ min-width:0; display:flex; flex-direction:column; gap:5px; } .tgx-rh-t i{ font:500 10px/1 var(--body); font-style:normal; letter-spacing:.16em; text-transform:uppercase; color:var(--mu); font-variant-numeric:tabular-nums; }
.tgx-rh-ic{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:21px; color:var(--metal-solid); background:linear-gradient(145deg, rgba(217,188,122,.13), rgba(217,188,122,.02)); border:1px solid var(--line2); }
.tgx-rh-logo{ flex:none; width:58px; height:38px; border-radius:12px; display:grid; place-items:center; padding:6px 8px; background:var(--s1); border:1px solid var(--line2); } .tgx-rh-logo img{ max-width:100%; max-height:100%; object-fit:contain; filter:grayscale(1) brightness(1.7); opacity:.9; }
#tgx-rails{ display:flex; flex-direction:column; gap:16px; min-width:0; } .tgx-shelf{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.tgx-shelf.k-feature{ margin-inline:-18px; padding:16px 18px 12px; background:linear-gradient(180deg, rgba(217,188,122,.06), transparent 70%); border-top:1px solid var(--line2); }
.tgx-art[data-img]{ background:linear-gradient(110deg, var(--s1) 30%, var(--s2) 50%, var(--s1) 70%); }
.tgx-endmark{ display:flex; align-items:center; gap:14px; margin:14px 0 4px; color:var(--mu); } .tgx-endmark > span{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line2)); } .tgx-endmark > span:last-child{ transform:scaleX(-1); } .tgx-endmark i{ font:italic 500 15px/1 var(--display); white-space:nowrap; } .tgx-endmark .tgx-crest{ flex:none; }
.tgx-sig .mriv-sig{ width:auto; flex:none; border:0; margin:0; padding:4px 0 0; gap:2px; } .tgx-sig .mriv-sig-frog{ width:54px; height:54px; } .tgx-sig .mriv-sig-text{ font:italic 500 14px/1 var(--display); color:var(--mu); letter-spacing:0; } .tgx-sig .mriv-sig-text a{ color:var(--tx); font-weight:600; }
.tgx-theme{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 12px; border-radius:99px; border:1px solid transparent; background:var(--s1) padding-box, var(--metal) border-box; color:var(--tx); font:600 12.5px/1 var(--body); } .tgx-theme[hidden]{ display:none; } .tgx-theme .tgx-ic{ font-size:16px; color:var(--metal-solid); } .tgx-theme .tgx-theme-x{ font-size:10px; color:var(--mu); } .tgx-more{ font:600 10.5px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--metal-solid); background:none; border:0; padding:6px 0; white-space:nowrap; }
.tgx-rail{ display:flex; gap:12px; overflow-x:auto; margin-inline:-18px; padding:2px 18px 6px; scrollbar-width:none; scroll-snap-type:x proximity; scroll-padding-inline:18px; -webkit-overflow-scrolling:touch; } .tgx-rail::-webkit-scrollbar{ display:none; } .tgx-rail > *{ scroll-snap-align:start; flex:none; }
/* a cover of ANY shape: a soft blurred copy fills the tile (::before), the whole image sits on top of it (::after) */
.tgx-art{ position:relative; overflow:hidden; isolation:isolate; background-color:var(--s2); }
.tgx-art::before{ content:''; position:absolute; inset:-18%; z-index:0; background:var(--img) center/cover no-repeat; filter:blur(16px) saturate(1.25) brightness(.8); }
.tgx-art::after{ content:''; position:absolute; inset:0; z-index:1; background:var(--img) center/contain no-repeat; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -30px 40px -30px rgba(0,0,0,.55); }
.tgx-cont{ width:236px; display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:12px; padding:9px 12px 9px 9px; border-radius:var(--r); background:var(--s1); border:1px solid var(--line2); cursor:pointer; text-align:start; color:inherit; font:inherit; }
.tgx-cont .tgx-art{ width:58px; height:58px; border-radius:13px; } .tgx-cont b{ display:block; font:600 14px/1.2 var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tgx-cont i, .tgx-cap i{ font-style:normal; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mu); } .tgx-cont > span:nth-child(2){ min-width:0; display:flex; flex-direction:column; gap:5px; } .tgx-cont > .tgx-ic{ font-size:30px; color:var(--metal-solid); }
.tgx-poster{ width:172px; cursor:pointer; } .tgx-poster .tgx-art{ border-radius:var(--r); aspect-ratio:4/3; border:1px solid var(--line2); box-shadow:0 18px 30px -20px #000; } 
.tgx-cap{ padding:9px 3px 0; display:flex; flex-direction:column; gap:4px; min-width:0; } .tgx-cap b{ font:600 13.5px/1.2 var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tgx-rail.ranked{ padding-bottom:22px; }
.tgx-rank{ position:relative; width:214px; padding-inline-start:42px; cursor:pointer; } .tgx-rank .tgx-poster{ width:auto; } .tgx-rank .tgx-n{ position:absolute; inset-inline-start:-4px; bottom:-16px; z-index:2; font:italic 500 96px/1 var(--display); letter-spacing:-.05em; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 6px 10px rgba(0,0,0,.8)); pointer-events:none; }
.tgx-table{ width:212px; display:flex; flex-direction:column; gap:9px; cursor:pointer; } .tgx-table .tgx-art{ position:relative; aspect-ratio:16/10; border-radius:var(--r); border:1px solid var(--line2); overflow:hidden; } .tgx-table b{ font:600 13.5px/1.2 var(--body); padding-inline:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tgx-livepill{ position:absolute; z-index:2; top:9px; inset-inline-start:9px; display:inline-flex; align-items:center; gap:6px; font:600 9.5px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; padding:5px 8px; border-radius:999px; background:rgba(6,6,6,.7); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .tgx-livepill i{ width:6px; height:6px; border-radius:50%; background:var(--live); box-shadow:0 0 0 3px rgba(229,72,77,.28); }
.tgx-prov{ display:grid; place-items:center; width:104px; height:56px; padding:10px 14px; border-radius:var(--r); background:var(--s1); border:1px solid var(--line2); cursor:pointer; } .tgx-prov img{ max-width:100%; max-height:100%; object-fit:contain; filter:grayscale(1) brightness(1.6); opacity:.85; } .tgx-prov span{ font:600 12px/1.1 var(--body); color:var(--mu); text-align:center; }
.tgx-skel{ border-radius:var(--r); background:linear-gradient(100deg, var(--s1) 30%, var(--s3) 50%, var(--s1) 70%) 0 0/300% 100%; animation:tgx-shim 1.6s linear infinite; } @keyframes tgx-shim{ to{ background-position:-300% 0; } }

/* ---------- page heads, lobby ---------- */
.tgx-pagehead{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 12px; } .tgx-pagehead h2{ margin:0; font-size:38px; line-height:1; }
.tgx-pill{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 14px; border-radius:999px; border:1px solid transparent; background:linear-gradient(var(--s1),var(--s1)) padding-box, var(--metal) border-box; color:var(--tx); font:600 14px/1 var(--body); font-variant-numeric:tabular-nums; direction:ltr; } .tgx-pill .tgx-ic{ color:var(--metal-solid); font-size:16px; }
.tgx-seg{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; margin:0 18px 14px; padding:4px; border-radius:999px; background:var(--s1); border:1px solid var(--line2); } .tgx-seg button{ display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; border-radius:999px; border:0; background:none; font:600 14px/1 var(--body); color:var(--mu); } .tgx-seg button.on{ background:var(--s3); color:var(--tx); box-shadow:inset 0 0 0 1px var(--line); }
.tgx-filters{ position:relative; z-index:2; margin:0 18px 14px; display:flex; flex-direction:column; gap:10px; }
.tgx-sels{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:10px; }
.tgx-sel{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:60px; padding:9px 12px 9px 9px; border-radius:var(--r); background:var(--s1); border:1px solid var(--line2); color:var(--tx); text-align:start; font:inherit; }
.tgx-sel.on{ border-color:transparent; background:linear-gradient(var(--s1),var(--s1)) padding-box, var(--metal) border-box; }
.tgx-sel-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:22px; color:var(--metal-solid); background:var(--s3); } .tgx-sel-c{ font-size:12px; color:var(--mu); }
.tgx-sel-t{ display:flex; flex-direction:column; gap:5px; min-width:0; } .tgx-sel-t i{ font:600 9.5px/1 var(--body); font-style:normal; letter-spacing:.18em; text-transform:uppercase; color:var(--mu); } .tgx-sel-t b{ font:600 14.5px/1.15 var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tgx-filterline{ display:flex; align-items:center; justify-content:space-between; min-height:20px; font-size:12.5px; color:var(--mu); font-variant-numeric:tabular-nums; } .tgx-clear{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:4px 0; color:var(--metal-solid); font:600 12px/1 var(--body); letter-spacing:.06em; } .tgx-clear[hidden]{ display:none; } .tgx-clear .tgx-ic{ font-size:11px; }
.tgx-sheet.list{ align-items:stretch; text-align:start; gap:14px; max-height:calc(var(--tgx-vh) - var(--tgx-top) - 40px); padding-inline:14px; } .tgx-sheet.list h2{ padding-inline:8px; }
.tgx-find{ display:flex; align-items:center; gap:10px; height:50px; padding:0 16px; border-radius:999px; background:var(--s1); border:1px solid var(--line2); color:var(--mu); font-size:18px; } .tgx-find input{ flex:1; min-width:0; background:none !important; border:0 !important; outline:0; min-height:0 !important; padding:0 !important; color:var(--tx); font:500 16px/1 var(--body); box-shadow:none !important; }
.tgx-list{ overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; margin-inline:-4px; padding-inline:4px; -webkit-overflow-scrolling:touch; }
.tgx-row{ display:grid; grid-template-columns:46px minmax(0,1fr) auto auto; align-items:center; gap:14px; min-height:64px; padding:9px 8px; border:0; border-bottom:1px solid var(--line2); background:none; color:var(--tx); font:inherit; text-align:start; border-radius:0; } .tgx-row:last-child{ border-bottom:0; } .tgx-row:active{ background:var(--s1); }
.tgx-row-ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:24px; color:var(--metal-solid); background:var(--s1); border:1px solid var(--line2); overflow:hidden; } .tgx-row-ic img{ max-width:78%; max-height:60%; object-fit:contain; filter:grayscale(1) brightness(1.7); }
.tgx-row-t{ font:500 16px/1.2 var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .tgx-row-n{ font:500 13px/1 var(--body); color:var(--mu); font-variant-numeric:tabular-nums; } .tgx-row-ok{ color:var(--metal-solid); font-size:16px; } .tgx-row.on .tgx-row-t{ font-weight:600; color:var(--m2); } .tgx-row.on .tgx-row-ic{ border-color:var(--line); }
.tgx-browse{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; } @media (max-width:339px){ .tgx-browse{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.tgx-cat{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px 12px 12px; border-radius:var(--r); background:var(--s1); border:1px solid var(--line2); color:var(--tx); font:inherit; text-align:start; min-width:0; } .tgx-cat .tgx-ic{ font-size:28px; color:var(--metal-solid); } .tgx-cat b{ font:600 13.5px/1.15 var(--body); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tgx-cat i{ font:500 11.5px/1 var(--body); font-style:normal; color:var(--mu); font-variant-numeric:tabular-nums; } .tgx-cat:active{ transform:scale(.97); }
html[data-tg] main{ position:relative; z-index:2; } html[data-tg] .wrap{ padding:0 18px 8px; max-width:none; } html[data-tg] .view.active{ animation:tgx-rise .34s cubic-bezier(.2,.7,.2,1) backwards; }
html[data-tg] .section-head{ margin:8px 0 12px; align-items:baseline; } html[data-tg] .section-head h2{ font-size:24px; line-height:1.05; }
html[data-tg] .filter-bar{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
html[data-tg] .search-box{ order:-1; width:100%; height:48px; padding:0 16px; border-radius:999px; background:var(--s1); border:1px solid var(--line2); color:var(--mu); } html[data-tg] .search-box input[type]{ font:500 16px/1 var(--body); background:none !important; border:0 !important; border-radius:0; min-height:0 !important; padding:0 !important; color:var(--tx); box-shadow:none !important; flex:1 1 auto; min-width:0; }
html[data-tg] .chip-row, html[data-tg] .provider-row{ gap:8px; margin-inline:-18px; padding:0 18px 2px; scrollbar-width:none; } html[data-tg] .chip-row::-webkit-scrollbar, html[data-tg] .provider-row::-webkit-scrollbar{ display:none; }
html[data-tg] .chip, html[data-tg] .prov-chip{ min-height:40px; padding:0 15px; border-radius:999px; font:500 13.5px/1 var(--body); color:var(--mu); border:1px solid var(--line2); background:var(--s1); gap:7px; } html[data-tg] .chip .tgx-ic{ font-size:16px; } html[data-tg] .chip svg:not(.tgx-ic){ display:none; } html[data-tg] .chip .n{ opacity:.55; font-size:11px; }
html[data-tg] .chip.active, html[data-tg] .prov-chip.active{ color:var(--on-metal); background:var(--metal); border-color:transparent; font-weight:600; } html[data-tg] .prov-chip img{ height:16px; filter:grayscale(1) brightness(1.7); } html[data-tg] .prov-chip.active img{ filter:grayscale(1) brightness(.2); }
html[data-tg] .game-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 12px; } @media (min-width:430px){ html[data-tg] .game-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
html[data-tg] .game-card{ background:none; border:0; border-radius:0; overflow:visible; box-shadow:none; } html[data-tg] .game-card:hover{ transform:none; box-shadow:none; } html[data-tg] .game-card:active .art{ transform:scale(.97); }
html[data-tg] .game-card .art{ aspect-ratio:4/3; border-radius:var(--r); border:1px solid var(--line2); box-shadow:0 18px 30px -20px #000; transition:transform .14s; background:var(--s2); } html[data-tg] .game-card .art .art-img{ object-fit:contain; } html[data-tg] .game-card .art .art-img.snap{ object-fit:cover; } html[data-tg] .game-card .art .art-bg{ filter:blur(16px) saturate(1.25) brightness(.8); transform:scale(1.35); } html[data-tg] .game-card .art::after{ background:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -30px 40px -30px rgba(0,0,0,.6); }
html[data-tg] .game-info{ padding:9px 3px 0; } html[data-tg] .game-info .name{ font:600 13.5px/1.2 var(--body); margin-bottom:4px; } html[data-tg] .game-info .prov{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mu); }
html[data-tg] .game-card .tags{ top:9px; inset-inline:9px; } html[data-tg] .tag{ font:600 9px/1 var(--body); letter-spacing:.18em; padding:5px 8px; border-radius:999px; color:var(--metal-solid); background:rgba(6,6,6,.72); border:1px solid var(--line); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } html[data-tg] .tag svg{ display:none; }
html[data-tg] .skel-card, html[data-tg] .skeleton{ border-radius:var(--r); aspect-ratio:4/3; background:linear-gradient(100deg, var(--s1) 30%, var(--s3) 50%, var(--s1) 70%) 0 0/300% 100%; animation:tgx-shim 1.6s linear infinite; }

/* ---------- game + sportsbook: the whole screen ---------- */
html[data-tg].tgx-immersive body{ padding:0; } html[data-tg].tgx-immersive body::before, html[data-tg].tgx-immersive .tgx-tabs, html[data-tg].tgx-immersive .tgx-pagehead{ display:none !important; }
html[data-tg].tgx-immersive .game-view-wrap{ padding:0; } html[data-tg].tgx-immersive .game-title, html[data-tg].tgx-immersive #view-game .section-head, html[data-tg].tgx-immersive #related-grid{ display:none; }
/* The game gets exactly the part of the screen the player can SEE: pinned to the real window edges (no measured height that can
   go stale when the phone is turned), inset by what Telegram says is covered — status bar and its own buttons on top, the home
   indicator / gesture bar below, the notch and round corners on the sides when the phone is held sideways. Black fills the rest. */
html[data-tg].tgx-immersive body{ background:#000; }
/* a transform animation (even a finished one that 'fills forwards') makes its element the reference box of every position:fixed child — the game must be pinned to the SCREEN */
html[data-tg] #view-game, html[data-tg] #view-game.active{ animation:none !important; transform:none !important; }
html[data-tg].tgx-immersive .game-frame-wrap{ position:fixed; z-index:80; top:var(--tgx-top); bottom:var(--tgx-bottom); left:var(--tgx-left, 0px); right:var(--tgx-right, 0px); width:auto; height:auto; max-height:none; aspect-ratio:auto; border-radius:0; border:0; margin:0; padding:0; background:#000; } html[data-tg].tgx-immersive .game-frame-wrap iframe{ width:100%; height:100%; border:0; }
.tgx-close{ position:absolute; z-index:5; top:10px; inset-inline-end:10px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:rgba(6,6,6,.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--m2); display:none; place-items:center; padding:0; font-size:18px; } html[data-tg].tgx-immersive .tgx-close{ display:grid; }
html[data-tg] .sport-frame-wrap{ height:calc(var(--tgx-vh) - var(--tgx-top) - 76px - var(--tgx-bar) - var(--tgx-bottom) - 30px); min-height:420px; border-radius:22px 22px 0 0; overflow:hidden; border:1px solid var(--line2); border-bottom:0; margin:0 10px; background:var(--s1); }
html[data-tg] .frame-loading{ color:var(--mu); font-size:13px; } html[data-tg] .spinner{ border-color:var(--line); border-top-color:var(--metal-solid); }

/* ---------- the website's modules in club clothes ---------- */
html[data-tg] .btn{ border-radius:14px; min-height:48px; padding:0 18px; font:600 14.5px/1 var(--body); letter-spacing:.02em; border:1px solid var(--line); background:rgba(255,255,255,.035); color:var(--tx); display:inline-flex; align-items:center; justify-content:center; gap:8px; }
html[data-tg] .btn.primary{ background:var(--metal); border-color:transparent; color:var(--on-metal); box-shadow:0 12px 26px -14px var(--metal-solid), inset 0 1px 0 rgba(255,255,255,.35); } html[data-tg] .btn.danger{ background:rgba(231,123,134,.12); border-color:rgba(231,123,134,.4); color:var(--bad); }
html[data-tg] .btn.tiny{ min-height:34px; padding:0 13px; border-radius:999px; font-size:12px; } html[data-tg] .btn:active{ transform:scale(.985); } html[data-tg] .btn:disabled{ opacity:.5; } html[data-tg] .link-btn{ color:var(--metal-solid); font-weight:600; }
html[data-tg] input:not([type=checkbox]):not([type=radio]):not([type=range]), html[data-tg] select, html[data-tg] textarea{ font:500 16px/1.2 var(--body); border-radius:14px; background:var(--s1); border:1px solid var(--line2); color:var(--tx); min-height:50px; padding:0 14px; }
html[data-tg] textarea{ padding:13px 14px; } html[data-tg] input:focus, html[data-tg] select:focus, html[data-tg] textarea:focus{ outline:none; border-color:var(--metal-solid); box-shadow:0 0 0 3px rgba(217,188,122,.16); } html[data-tg] input[type=checkbox]{ accent-color:var(--metal-solid); }
html[data-tg] .account-card, html[data-tg] .pay-card, html[data-tg] .bonus-card, html[data-tg] .promo-card, html[data-tg] .summary-tile, html[data-tg] .pending-card, html[data-tg] .danger-card, html[data-tg] .complete-card, html[data-tg] .active-bonus, html[data-tg] .wd-box, html[data-tg] .acc-notif, html[data-tg] .tg-settings{ border-radius:var(--r); border:1px solid var(--line2); background:var(--s1); }
html[data-tg] .account-wrap{ padding:0 18px 8px; } html[data-tg] .account-head{ display:none; } /* the shell's member card replaces it */
html[data-tg] .account-nav{ margin:0 -18px 16px; padding:0 18px 2px; } html[data-tg] .card-title{ font-family:var(--display); font-size:22px; }
html[data-tg] .account-actions{ display:none; } /* the member card carries Deposit / Withdraw */
html[data-tg] .summary-grid{ grid-template-columns:1fr 1fr; gap:10px; } html[data-tg] .summary-tile{ padding:15px; } html[data-tg] .summary-title{ font:600 10px/1 var(--body); letter-spacing:.18em; color:var(--mu); } html[data-tg] .summary-tile .mono, html[data-tg] .summary-tile b{ font:600 24px/1.1 var(--display); font-variant-numeric:lining-nums tabular-nums; }
html[data-tg] .mono{ font-family:var(--body); font-variant-numeric:tabular-nums; } html[data-tg] .hist-row, html[data-tg] .sess-row{ border-bottom:1px solid var(--line2); }
html[data-tg] .pay-grid{ grid-template-columns:1fr; gap:10px; } html[data-tg] .pay-card{ padding:14px; } html[data-tg] .pay-card-rate, html[data-tg] .pay-tag{ color:var(--metal-solid); }
html[data-tg] .promo-grid{ grid-template-columns:1fr; } html[data-tg] .promo-hero, html[data-tg] .promo-show{ border-radius:24px; border:1px solid var(--line); }
html[data-tg] .bonus-bar{ height:6px; border-radius:99px; background:var(--s3); } html[data-tg] .bonus-fill{ background:var(--metal); border-radius:99px; }
html[data-tg] .toast{ z-index:600; bottom:calc(var(--tgx-bar) + var(--tgx-bottom) + 34px); border-radius:999px; background:var(--tx); color:var(--g); border:0; font:600 13.5px/1.3 var(--body); padding:13px 20px; max-width:calc(100vw - 36px); box-shadow:0 20px 40px -14px #000; }
html[data-tg] .empty-state{ border-radius:24px; border:1px dashed var(--line); color:var(--mu); } html[data-tg] .tgx-lang{ display:flex; align-items:center; gap:8px; margin:18px 0 4px; padding:12px 14px; border-radius:var(--r); border:1px solid var(--line2); background:var(--s1); }
.tgx-lang span{ flex:1; font:600 13px/1 var(--body); color:var(--mu); } .tgx-lang button{ border-radius:999px; border:1px solid var(--line2); background:none; color:var(--mu); font:600 12px/1 var(--body); padding:9px 12px; } .tgx-lang button.on{ background:var(--metal); color:var(--on-metal); border-color:transparent; }
/* pop-ups become bottom sheets */
html[data-tg] .auth-overlay, html[data-tg] .tg-overlay.open{ z-index:500; align-items:flex-end; background:rgba(0,0,0,.66); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:0; }
html[data-tg] .auth-modal, html[data-tg] .pay-modal, html[data-tg] .confirm-modal, html[data-tg] .legal-modal, html[data-tg] .tg-card{ position:relative; width:100%; max-width:none; max-height:calc(var(--tgx-vh) - var(--tgx-top) - 24px); margin:0; border-radius:28px 28px 0 0; border:1px solid var(--line); border-bottom:0; background:var(--s2); padding:30px 18px calc(var(--tgx-bottom) + 20px); animation:tgx-sheet .36s cubic-bezier(.2,.8,.2,1) both; overflow-y:auto; }
html[data-tg] .auth-modal::before, html[data-tg] .tg-card::before, .tgx-sheet::before, html[data-tg] .wheel-dialog::before{ content:''; position:absolute; top:10px; left:calc(50% - 21px); width:42px; height:4px; border-radius:4px; background:var(--line2); }
html[data-tg].tgx-desktop .auth-modal, html[data-tg].tgx-desktop .tg-card, html[data-tg].tgx-desktop .tgx-tabs{ max-width:452px; margin-inline:auto; }
html[data-tg] .pay-modal-title, html[data-tg] .legal-title{ font-family:var(--display); font-size:28px; } html[data-tg] .pay-phone-box, html[data-tg] .pay-code, html[data-tg] .pay-review, html[data-tg] .pay-file{ border-radius:var(--r); border-color:var(--line2); background:var(--s1); }
html[data-tg] .pay-modal-foot{ position:sticky; bottom:calc(-1 * var(--tgx-bottom) - 20px); background:linear-gradient(180deg, transparent, var(--s2) 32%); padding:18px 0 4px; margin-top:6px; } html[data-tg] .pay-modal-foot .btn{ flex:1; }
/* the lucky wheel as a sheet */
html[data-tg] .wheel-overlay{ padding:0; align-items:flex-end; z-index:520; } html[data-tg] .wheel-backdrop{ background:rgba(0,0,0,.7); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
html[data-tg] .wheel-dialog{ grid-template-columns:1fr; gap:16px; width:100%; max-height:calc(var(--tgx-vh) - var(--tgx-top) - 10px); padding:34px 18px calc(var(--tgx-bottom) + 20px); border-radius:30px 30px 0 0; border:1px solid var(--line); border-bottom:0; background:radial-gradient(90% 46% at 50% 0%, rgba(217,188,122,.16), transparent 70%), var(--s2); animation:tgx-sheet .42s cubic-bezier(.2,.8,.2,1) both; }
html[data-tg] .wheel-stage{ width:min(80vw, 44vh, 330px); margin-inline:auto; padding:10px; border-radius:50%; background:var(--metal); box-shadow:0 30px 60px -26px #000, 0 0 60px -12px rgba(217,188,122,.4); } html[data-tg] .wheel-lights{ display:none; }
html[data-tg] .wheel-panel{ text-align:center; } html[data-tg] .wheel-panel h2, html[data-tg] .wheel-lead{ font-family:var(--display); font-size:34px; line-height:1; } html[data-tg] .wheel-sub, html[data-tg] .wheel-small{ color:var(--mu); }
html[data-tg] .btn.wheel-spin{ min-height:60px; border-radius:18px; font:600 24px/1 var(--display); letter-spacing:.2em; text-transform:uppercase; animation:none; } html[data-tg] .wheel-x{ top:14px; inset-inline-end:14px; width:38px; height:38px; border-radius:50%; background:var(--s1); border:1px solid var(--line2); color:var(--tx); }
html[data-tg] .wheel-more{ text-align:start; border-radius:var(--r); border:1px solid var(--line2); background:var(--s1); padding:12px 14px; } html[data-tg] .wheel-result-card{ border-radius:26px; border:1px solid var(--line); background:var(--s2); } html[data-tg] .wheel-pointer{ filter:drop-shadow(0 4px 6px rgba(0,0,0,.7)); }

/* ---------- the bar: five equal columns, the jewel is the third — centred by construction ---------- */
.tgx-tabs{ position:fixed; z-index:70; inset-inline:14px; bottom:calc(var(--tgx-bottom) + 12px); height:var(--tgx-bar); display:grid; grid-template-columns:repeat(var(--tgx-cols, 5), minmax(0,1fr)); align-items:center; border-radius:26px; background:rgba(14,14,14,.86); -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3); border:1px solid var(--line2); box-shadow:0 24px 40px -18px #000, inset 0 1px 0 rgba(255,255,255,.05); }
.tgx-tab{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:0; border:0; background:none; color:var(--mu2); min-width:0; } .tgx-tab .tgx-ic{ font-size:24px; transition:transform .15s; } .tgx-tab:active .tgx-ic{ transform:scale(.88); }
.tgx-tab span{ font:500 10.5px/1 var(--body); letter-spacing:.04em; color:var(--mu); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tgx-tab .i-on{ display:none; } .tgx-tab.on{ color:var(--metal-solid); } .tgx-tab.on span{ color:var(--tx); font-weight:600; } .tgx-tab.on .i-on{ display:inline-block; } .tgx-tab.on .i-off{ display:none; }
.tgx-jewel-slot{ display:grid; place-items:center; min-width:0; }
html[data-tg] .tgx-jewel-slot .wheel-fab{ position:relative; inset:auto; width:62px; height:62px; margin:-30px 0 0; padding:0; border-radius:50%; display:grid; place-items:center; font-size:0; border:1px solid transparent; background:radial-gradient(circle at 34% 28%, var(--s3), var(--g)) padding-box, var(--metal) border-box; box-shadow:0 0 0 6px var(--g), 0 16px 28px -10px #000; animation:none; transform:none; }
html[data-tg] .tgx-jewel-slot .wheel-fab > *:not(.tgx-emblem){ display:none !important; } html[data-tg] .tgx-jewel-slot .wheel-fab svg.tgx-emblem{ width:46px; height:46px; display:block; overflow:visible; }
html[data-tg] .tgx-jewel-slot .wheel-fab.is-ready::after{ content:''; position:absolute; inset:-7px; border-radius:50%; border:1px solid var(--metal-solid); opacity:.4; animation:tgx-halo 3.6s ease-in-out infinite; } @keyframes tgx-halo{ 50%{ transform:scale(1.1); opacity:0; } }
html[data-tg] body > .wheel-fab{ display:none; }

/* ---------- gates: before somebody is a player ---------- */
.tgx-gate{ position:fixed; inset:0; z-index:500; overflow-y:auto; display:flex; justify-content:center; padding:calc(var(--tgx-top) + 30px) 22px calc(var(--tgx-bottom) + 28px); color:var(--tx); background:radial-gradient(100% 50% at 50% 0%, rgba(217,188,122,.2), transparent 64%), var(--g); }
.tgx-gate-in{ width:100%; max-width:400px; margin:auto 0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; animation:tgx-rise .5s cubic-bezier(.2,.7,.2,1) backwards; }
.tgx-gate h1{ margin:0; font:600 clamp(36px, 11vw, 46px)/1 var(--display); letter-spacing:-.015em; text-wrap:balance; } .tgx-gate h1 em{ font-style:italic; font-weight:500; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tgx-gate p{ margin:0 0 6px; color:var(--mu); font-size:15px; line-height:1.6; max-width:32ch; text-wrap:pretty; }
.tgx-idcard{ width:100%; display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px; border-radius:24px; border:1px solid transparent; background:var(--card) padding-box, var(--metal) border-box; box-shadow:0 26px 50px -28px #000; }
.tgx-idcard b{ font:600 clamp(28px, 9vw, 34px)/1 var(--display); letter-spacing:.04em; font-variant-numeric:lining-nums tabular-nums; direction:ltr; } .tgx-qr{ width:132px; height:132px; padding:10px; border-radius:16px; background:#F3ECDC; } .tgx-qr:empty{ display:none; } .tgx-qr svg{ width:100%; height:100%; display:block; }
.tgx-form{ width:100%; display:flex; flex-direction:column; gap:12px; text-align:start; } .tgx-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media (max-width:339px){ .tgx-2{ grid-template-columns:1fr; } }
.tgx-f{ display:flex; flex-direction:column; gap:7px; min-width:0; } .tgx-f span{ font:600 10.5px/1 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--mu); }
.tgx-f input{ width:100%; min-width:0; min-height:52px; font:500 16px/1.2 var(--body); border-radius:14px; border:1px solid var(--line2); background:var(--s1); color:var(--tx); padding:0 14px; } .tgx-f input:focus{ outline:none; border-color:var(--metal-solid); box-shadow:0 0 0 3px rgba(217,188,122,.16); } .tgx-f input::placeholder{ color:var(--mu2); font-size:13px; }
.tgx-check{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--mu); line-height:1.45; } .tgx-check input{ width:20px; height:20px; flex:none; accent-color:var(--metal-solid); margin:1px 0 0; }
.tgx-err{ border-radius:12px; padding:11px 12px; font:500 13px/1.35 var(--body); color:var(--bad); background:rgba(231,123,134,.10); border:1px solid rgba(231,123,134,.32); } .tgx-err[hidden]{ display:none; }
.tgx-link{ margin-top:6px; background:none; border:0; color:var(--metal-solid); font:600 14px/1.2 var(--body); padding:10px; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:5px; }
.tgx-sheet-ov{ position:fixed; inset:0; z-index:950; display:flex; align-items:flex-end; justify-content:center; background:rgba(0,0,0,0); transition:background .22s; } .tgx-sheet-ov.open{ background:rgba(0,0,0,.68); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.tgx-sheet{ position:relative; width:100%; max-width:480px; border-radius:28px 28px 0 0; border:1px solid var(--line); border-bottom:0; background:var(--s2); color:var(--tx); padding:32px 20px calc(var(--tgx-bottom) + 18px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; transform:translateY(105%); transition:transform .32s cubic-bezier(.2,.8,.2,1); }
.tgx-sheet-ov.open .tgx-sheet{ transform:none; } .tgx-sheet h2{ font:600 30px/1 var(--display); margin:2px 0 0; } .tgx-sheet p{ margin:0 0 6px; color:var(--mu); font-size:14px; line-height:1.55; } .tgx-sheet .tgx-f{ width:100%; text-align:start; }
.tgx-sheet-ic{ width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-size:30px; color:var(--metal-solid); background:linear-gradient(var(--s1),var(--s1)) padding-box, var(--metal) border-box; border:1px solid transparent; }
html[data-tg][dir="rtl"] .tgx-rank .tgx-n{ letter-spacing:0; } @media (prefers-reduced-motion:reduce){ html[data-tg] *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }
@media (max-width:359px){ html[data-tg] .tgx-jewel-slot .wheel-fab{ width:54px; height:54px; margin-top:-24px; } html[data-tg] .tgx-jewel-slot .wheel-fab svg.tgx-emblem{ width:40px; height:40px; } .tgx-tabs{ inset-inline:10px; } }
@media (max-width:339px){ .tgx-home, .tgx-pagehead{ padding-inline:14px; } html[data-tg] .wrap, html[data-tg] .account-wrap{ padding-inline:14px; } .tgx-hello h2, .tgx-pagehead h2{ font-size:32px; } .tgx-tab span{ font-size:9.5px; } }

/* public demo inside the app: a quiet DEMO mark, and the "this is a demo" notice in the app's own materials */
.tgx-demo-pill{ display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:99px; font:600 10px/1 var(--body); letter-spacing:.2em; color:var(--metal-solid); border:1px solid transparent; background:var(--s1) padding-box, var(--metal) border-box; text-decoration:none; }
html[data-tg] .demo-notice{ z-index:900; background:rgba(0,0,0,.72); } html[data-tg] .demo-notice-card{ background:var(--s1); color:var(--tx); border:1px solid var(--line2); border-radius:24px; box-shadow:0 30px 60px -20px #000; font-family:var(--body); }
html[data-tg] .demo-notice-card h3{ font-family:var(--display); font-size:26px; font-weight:500; } html[data-tg] .demo-notice-card p{ color:var(--mu); } html[data-tg] .demo-notice-badge{ background:none; color:var(--metal-solid); border:1px solid var(--line2); letter-spacing:.2em; }
html[data-tg] .demo-notice-actions .btn{ min-height:46px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--tx); font:600 14px/1 var(--body); } html[data-tg] .demo-notice-actions .btn.primary{ background:var(--metal); color:var(--on-metal); border:0; }

/* the house clock, Club: date in small caps, the hour in the display serif and the metal, seconds a breath lighter */
.tgx-clock{ position:relative; z-index:2; display:flex; align-items:baseline; gap:8px; padding:12px 18px 0; color:var(--mu); font:500 10px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }
.tgx-clock .ck-date{ order:0; margin-inline-end:auto; overflow:hidden; text-overflow:ellipsis; } .tgx-clock .ck-date-short{ display:none; }
.tgx-clock .ck-time{ order:2; min-width:0; font:500 19px/1 var(--display); letter-spacing:.03em; text-transform:none; background:var(--metal); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tgx-clock .ck-ss{ color:inherit; opacity:.7; } .tgx-clock .ck-tz{ order:3; font:500 9px/1 var(--body); letter-spacing:.14em; opacity:.8; }
html[data-tg].tgx-immersive .tgx-clock, .tgx-gated .tgx-clock{ display:none; }
@media (max-width:359px){ .tgx-clock .ck-date-long{ display:none; } .tgx-clock .ck-date-short{ display:inline; } }
[dir=rtl] .tgx-clock{ letter-spacing:0; font-size:11.5px; }
@media (max-width:359px){ .tgx-demo-pill{ display:none; } }

/* ---------- referral (the page itself is the shared one: it takes the Club colours through the mapped variables) ---------- */
.tgx-refrow{ display:flex; align-items:center; gap:12px; width:100%; margin:0 0 14px; padding:14px 16px; border-radius:18px; border:1px solid var(--line2); background:linear-gradient(135deg, color-mix(in srgb, var(--metal-solid) 14%, var(--s1)), var(--s1)); color:var(--tx); text-align:start; }
.tgx-refrow-ic{ display:grid; place-items:center; width:42px; height:42px; border-radius:14px; background:color-mix(in srgb, var(--metal-solid) 18%, transparent); color:var(--metal-solid); flex:none; } .tgx-refrow-ic svg{ width:24px; height:24px; }
.tgx-refrow-t{ flex:1; min-width:0; display:grid; } .tgx-refrow-t b{ font-family:var(--font-display); font-size:19px; font-weight:600; line-height:1.1; } .tgx-refrow-t small{ color:var(--mu); font-size:12.5px; } .tgx-refrow>svg{ width:16px; height:16px; color:var(--mu); flex:none; } [dir="rtl"] .tgx-refrow>svg{ transform:scaleX(-1); }
html[data-tg] .rf{ padding:4px 16px calc(96px + env(safe-area-inset-bottom)); gap:14px; } html[data-tg] .rf-hero h1{ font-size:30px; font-weight:600; } html[data-tg] .rf-hero, html[data-tg] .rf-card, html[data-tg] .rf-w{ border-radius:20px; }
html[data-tg] .rf-btn.primary, html[data-tg] .rf-node.me{ background:var(--metal, var(--metal-solid)); color:#17120a; } html[data-tg] .rf-dialog{ align-items:end; padding:0; } html[data-tg] .rf-dialog-box{ width:100%; border-radius:24px 24px 0 0; padding-bottom:calc(22px + env(safe-area-inset-bottom)); }