:root {
  --bg: #070a14;
  --bg-soft: #0b1020;
  --panel: rgba(15, 21, 38, .94);
  --line: rgba(255, 255, 255, .1);
  --text: #f5f7ff;
  --muted: #8e98b1;
  --cyan: #69e6ff;
  --blue: #438cff;
  --violet: #9d78ff;
  --gold: #f1bd60;
  --green: #53dfa6;
  --rose: #ff7d9e;
  --shell: min(1280px, calc(100% - 32px));
  --shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: "Anuphan", "Noto Sans Thai", "Leelawadee UI", sans-serif; line-height: 1.55; overflow-x: hidden; font-optical-sizing: auto; }
body.modal-open, body.drawer-open { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
[hidden] { display: none !important; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 3000; top: -70px; left: 20px; padding: 10px 15px; border-radius: 10px; color: #05111a; background: var(--cyan); font-weight: 800; }
.skip-link:focus { top: 15px; }

.site-header { position: sticky; z-index: 1000; top: 0; height: 84px; border-bottom: 1px solid var(--line); background: rgba(5, 8, 17, .9); backdrop-filter: blur(20px); }
.header-grid { height: 100%; display: grid; grid-template-columns: 1fr minmax(360px, 1.2fr) 1fr; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; }
.brand-logo { height: 42px; max-width: 190px; object-fit: contain; display: block; }
.brand-mark { width: 41px; height: 41px; filter: drop-shadow(0 0 16px rgba(105, 230, 255, .32)); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-mark path:first-child { fill: rgba(105, 230, 255, .08); stroke: var(--cyan); stroke-width: 1.5; }
.brand-mark path:last-child { fill: var(--cyan); }
.brand-copy { display: grid; font-family: "Manrope", "Anuphan", sans-serif; line-height: .9; letter-spacing: .16em; }
.brand-copy strong { font-size: 1rem; font-weight: 900; }
.brand-copy small { margin-top: 7px; color: var(--cyan); font-size: .55rem; letter-spacing: .45em; }
.header-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.member-summary { min-width: 0; display: grid; grid-template-columns: minmax(135px,1fr) minmax(155px,1fr) 105px; gap: 8px; }
.member-identity, .wallet-chip { min-width: 0; min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 13px; color: white; background: rgba(255,255,255,.035); }
.member-identity { cursor: pointer; text-align: left; }.member-identity > span:last-child { min-width: 0; display: grid; }.member-identity small,.wallet-chip small { color: var(--muted); font-size: .52rem; }.member-identity strong { overflow: hidden; text-overflow: ellipsis; font-size: .7rem; white-space: nowrap; }
.member-avatar { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(105,230,255,.32); border-radius: 10px; color: #05121b; background: linear-gradient(145deg,var(--cyan),var(--blue)); font-size: .6rem; font-weight: 900; box-shadow: 0 0 18px rgba(105,230,255,.18); }
.wallet-chip > span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #251505; background: linear-gradient(145deg,#ffdc7c,#d79835); font-weight: 900; }.wallet-chip div { min-width: 0; display: grid; line-height: 1.25; }.wallet-chip strong { font-size: .76rem; }.wallet-chip > button { width: 29px; height: 29px; margin-left: auto; padding: 0; border: 0; border-radius: 9px; color: #03131c; background: var(--cyan); cursor: pointer; font-weight: 900; }.wallet-point > span { color: #080d1c; background: linear-gradient(145deg,#b99bff,#6b78ff); }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px; font-weight: 800; font-size: .85rem; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.button-primary { color: #04111b; background: linear-gradient(135deg, #83edff, #4698ff); box-shadow: 0 10px 30px rgba(58, 159, 255, .24), inset 0 1px rgba(255,255,255,.6); }
.button-ghost { border-color: var(--line); background: rgba(255,255,255,.04); }
.button-wide { width: 100%; }
.utility-nav { display: flex; justify-content: flex-end; gap: 19px; }
.utility-nav a, .utility-nav button { display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; color: var(--muted); background: none; font-size: .66rem; font-weight: 700; cursor: pointer; }
.utility-nav span { color: #d7e0f1; font-size: 1.15rem; line-height: 1; }
.utility-nav .active, .utility-nav a:hover, .utility-nav button:hover { color: var(--cyan); }

.home-stage { padding-bottom: 42px; background: radial-gradient(circle at 55% 0, rgba(55, 95, 190, .14), transparent 45%); }
.announcement { height: 38px; border-bottom: 1px solid rgba(255,255,255,.055); background: rgba(4,7,14,.78); }
.announcement-inner { height: 100%; display: flex; align-items: center; gap: 16px; overflow: hidden; }.announcement .announcement-inner.shell { width: auto; margin: 0 0 0 calc((100% - var(--shell)) / 2); }
.announcement strong { flex: 0 0 auto; color: var(--gold); font-size: .7rem; }
.announcement strong span { width: 6px; height: 6px; display: inline-block; margin-right: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 9px var(--gold); }
.marquee { flex: 1; min-width: 0; overflow: hidden; color: #a6afc3; font-size: .7rem; white-space: nowrap; }
.marquee p { width: max-content; margin: 0; padding-left: 100%; animation: marquee 22s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

.hero-banner { --slide-duration: 6s; min-height: 410px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 0 0 28px 28px; background: #08101f; box-shadow: var(--shadow); isolation: isolate; touch-action: pan-y; }
.hero-slide { position: absolute; z-index: 0; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.025); transition: opacity .75s ease,transform 1.15s cubic-bezier(.2,.75,.25,1),visibility .75s; }
.hero-slide.active { z-index: 1; opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); }
.banner-art { position: absolute; inset: -3%; background-image: var(--banner-image, url('/images/hero-portal.png')); background-position: 63% 51%; background-size: cover; transform: scale(1.03); transition: transform 7s ease-out,filter .8s ease; will-change: transform; }
.hero-slide.active .banner-art { transform: scale(1.1); }
.hero-slide-violet .banner-art { background-position: 72% 46%; filter: hue-rotate(37deg) saturate(1.16); transform: scale(1.08) translateX(-1.5%); }.hero-slide-violet.active .banner-art { transform: scale(1.15) translateX(0); }
.hero-slide-gold .banner-art { background-position: 58% 63%; filter: sepia(.28) saturate(1.35) hue-rotate(338deg); transform: scale(1.06) translateY(1.5%); }.hero-slide-gold.active .banner-art { transform: scale(1.14) translateY(0); }
.banner-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(4,7,15,.97) 4%,rgba(4,7,15,.73) 48%,rgba(4,7,15,.12) 77%),linear-gradient(0deg,rgba(4,7,15,.62),transparent 48%); }
.hero-slide-violet .banner-shade { background: linear-gradient(90deg,rgba(8,5,20,.98) 4%,rgba(24,11,51,.76) 50%,rgba(17,8,37,.08) 78%),linear-gradient(0deg,rgba(8,4,20,.65),transparent 48%); }.hero-slide-gold .banner-shade { background: linear-gradient(90deg,rgba(17,10,4,.98) 4%,rgba(39,22,7,.73) 48%,rgba(28,15,4,.09) 77%),linear-gradient(0deg,rgba(18,9,3,.66),transparent 48%); }
.banner-copy { position: absolute; z-index: 2; left: clamp(26px,6vw,78px); top: 50%; width: min(510px,52%); transform: translateY(calc(-50% + 18px)); opacity: 0; transition: transform .72s cubic-bezier(.2,.75,.25,1) .18s,opacity .55s ease .18s; }
.hero-slide.active .banner-copy { transform: translateY(-50%); opacity: 1; }
.banner-copy > span { color: var(--banner-accent,var(--cyan)); font-size: .65rem; font-weight: 900; letter-spacing: .25em; }
.banner-copy h1 { margin: 12px 0 11px; font-size: clamp(2.5rem, 4.5vw, 4.4rem); line-height: 1.04; letter-spacing: -.045em; }
.banner-copy h1 b { color: transparent; background: linear-gradient(110deg,#fff,var(--banner-accent,var(--cyan)) 55%,var(--violet)); -webkit-background-clip: text; background-clip: text; }
.banner-copy p { margin: 0 0 24px; color: #a5afc5; }
.banner-status { position: absolute; z-index: 4; right: 28px; bottom: 25px; min-width: 210px; display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; background: rgba(7,13,27,.68); backdrop-filter: blur(16px); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px var(--green); }
.banner-status div { display: grid; }
.banner-status small { color: var(--muted); font-size: .6rem; }
.banner-status strong { font-size: .95rem; }
.banner-status > b { color: var(--green); font-size: .55rem; letter-spacing: .1em; }
.hero-arrow { position: absolute; z-index: 5; top: 50%; width: 39px; height: 50px; display: grid; place-items: center; padding: 0; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; color: rgba(255,255,255,.75); background: rgba(5,9,18,.38); backdrop-filter: blur(10px); cursor: pointer; font-size: 1.6rem; opacity: 0; transition: opacity .2s,background .2s,transform .2s; }.hero-prev { left: 13px; }.hero-next { right: 13px; }.hero-banner:hover .hero-arrow,.hero-arrow:focus-visible { opacity: 1; }.hero-arrow:hover { color: white; background: rgba(19,30,52,.78); transform: translateY(-50%) scale(1.04); }
.hero-progress { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.04); }.hero-progress i { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg,var(--cyan),var(--violet),var(--gold)); }.hero-banner.is-playing .hero-progress i { animation: hero-progress var(--slide-duration) linear forwards; }.hero-banner:hover .hero-progress i { animation-play-state: paused; }
@keyframes hero-progress { to { transform: scaleX(1); } }
.banner-dots { display: flex; justify-content: center; gap: 7px; padding-top: 12px; }
.banner-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #30394e; cursor: pointer; transition: width .28s,background .28s,box-shadow .28s; }
.banner-dots .active { width: 27px; border-radius: 10px; background: linear-gradient(90deg,var(--cyan),var(--blue)); box-shadow: 0 0 12px rgba(105,230,255,.32); }

.lobby-section { padding: 0 0 95px; }
.lobby-panel { position: relative; z-index: 2; margin-bottom: 36px; padding: 16px; border: 1px solid var(--line); border-radius: var(--theme-radius,24px); background: linear-gradient(155deg,color-mix(in srgb,var(--panel) 96%,#182238),color-mix(in srgb,var(--panel) 96%,#080d18)); box-shadow: var(--shadow); }
.lobby-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.lobby-tab { min-height: 86px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; text-align: left; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.025); cursor: pointer; transition: .2s; }
.lobby-tab > span { width: 49px; height: 49px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(105,230,255,.2); border-radius: 14px; color: var(--cyan); background: rgba(105,230,255,.07); font-size: 1.3rem; }
.lobby-tab div { display: grid; }
.lobby-tab strong { font-size: .92rem; }
.lobby-tab small { color: var(--muted); font-size: .65rem; }
.lobby-tab:hover, .lobby-tab.active { border-color: rgba(105,230,255,.38); background: linear-gradient(135deg, rgba(105,230,255,.12), rgba(76,106,255,.06)); }
.lobby-tab.active { box-shadow: inset 0 -2px var(--cyan); }
.category-bar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); }
.category-button { --accent: var(--cyan); min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); cursor: pointer; transition: .2s; }
.category-button span { color: var(--accent); font-size: 1.1rem; }
.category-button strong { font-size: .75rem; }
.category-button:hover, .category-button.active { color: white; border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
.category-violet { --accent: var(--violet); } .category-gold { --accent: var(--gold); } .category-blue { --accent: var(--blue); } .category-green { --accent: var(--green); } .category-rose { --accent: var(--rose); }

.game-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 38px; }
/* Grid items default to min-width:auto, letting a long game track stretch the whole page sideways. */
.game-shelf, .game-track { min-width: 0; }
.theme-compact .game-cover { height: 142px; }.theme-compact .game-info { padding: 9px 11px; }.theme-compact .game-card { border-radius: calc(var(--theme-radius,18px) * .8); }
.game-shelf[hidden] { display: none; }
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 15px; }
.shelf-head > div:first-child { display: flex; align-items: center; gap: 12px; }
.shelf-accent { width: 5px; height: 40px; border-radius: 5px; background: linear-gradient(var(--cyan), var(--blue)); box-shadow: 0 0 15px rgba(105,230,255,.35); }
.shelf-head h2 { margin: 0; font-size: 1.13rem; }
.shelf-head h2 small { color: var(--gold); font-size: .72rem; }
.shelf-head p { margin: 2px 0 0; color: var(--muted); font-size: .68rem; }
.shelf-controls { display: flex; gap: 7px; }
.shelf-controls button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.035); cursor: pointer; font-size: 1.2rem; }
.shelf-controls button:hover { color: var(--cyan); border-color: rgba(105,230,255,.35); }
.game-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(145px, 1fr); grid-template-rows: 1fr; gap: 13px; overflow-x: auto; padding: 3px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.game-track::-webkit-scrollbar { display: none; }
.game-card { min-width: 0; padding: 0; overflow: hidden; text-align: left; border: 1px solid var(--line); border-radius: 17px; background: #101627; box-shadow: 0 12px 35px rgba(0,0,0,.2); cursor: pointer; scroll-snap-align: start; transition: transform .22s, border-color .22s; }
.game-card:hover { transform: translateY(-5px); border-color: rgba(105,230,255,.36); }
.game-card[hidden] { display: none; }
.game-cover { --c1: #303d80; --c2: #12182d; position: relative; height: 178px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 65% 25%, color-mix(in srgb, var(--c1) 85%, white), transparent 7%), radial-gradient(circle at 50% 42%, var(--c1), transparent 43%), linear-gradient(145deg, var(--c2), #090c16); }
.game-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-cover > .game-score, .game-cover > .hot-badge, .game-cover > .new-badge, .game-cover > .play-badge { z-index: 2; }
.game-cover:before, .game-cover:after { content: ""; position: absolute; border: 1px solid color-mix(in srgb, var(--c1) 55%, transparent); border-radius: 50%; transform: rotate(-20deg); }
.game-cover:before { width: 150px; height: 52px; }.game-cover:after { width: 190px; height: 75px; }
.cover-orbit { position: absolute; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle at 35% 27%, rgba(255,255,255,.9), var(--c1) 9%, color-mix(in srgb, var(--c1) 45%, #070a13) 55%, #060810 72%); box-shadow: 0 0 40px color-mix(in srgb, var(--c1) 33%, transparent); }
.game-symbol { position: relative; z-index: 2; color: #fff5d5; font-family: Georgia, serif; font-size: 2.35rem; font-weight: 900; text-shadow: 0 2px 5px #000, 0 0 18px var(--c1); }
.game-score { position: absolute; z-index: 4; top: 9px; right: 9px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: var(--green); background: rgba(5,9,18,.7); font-size: .58rem; font-weight: 900; }
.hot-badge, .new-badge { position: absolute; z-index: 4; left: 8px; top: 9px; padding: 4px 6px; border-radius: 7px; color: #210a04; background: linear-gradient(#ffc36a,#ff7348); font-size: .5rem; font-weight: 900; }
.new-badge { color: #04141a; background: var(--cyan); }
.hot-badge + .new-badge { top: 34px; }
.play-badge { position: absolute; z-index: 4; right: 10px; bottom: 9px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: white; background: rgba(5,9,18,.62); font-size: .65rem; opacity: 0; transform: scale(.8); transition: .2s; }
.game-card:hover .play-badge { opacity: 1; transform: scale(1); }
.game-info { display: grid; padding: 11px 12px 12px; }
.game-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.game-info small { color: var(--muted); font-size: .57rem; letter-spacing: .08em; }
.game-dragon { --c1:#dc5f37;--c2:#351119 }.game-nebula { --c1:#7a5cff;--c2:#161039 }.game-tiger { --c1:#eaa637;--c2:#35200e }.game-queen { --c1:#c75adf;--c2:#28102f }
.game-ocean { --c1:#21a5c8;--c2:#072b3d }.game-sport { --c1:#3ecb82;--c2:#0a3023 }.game-royal { --c1:#c94759;--c2:#330c17 }.game-moon { --c1:#5686ff;--c2:#101d47 }
.game-mahjong { --c1:#dd5050;--c2:#3c1111 }.game-cat { --c1:#f0b94d;--c2:#3b2609 }.game-pirate { --c1:#8e61c5;--c2:#221139 }.game-phoenix { --c1:#f16b32;--c2:#3d1208 }
.game-roulette { --c1:#d0498c;--c2:#350e29 }.game-fish { --c1:#34b8da;--c2:#063042 }.game-field { --c1:#48b970;--c2:#0b3320 }.game-poker { --c1:#cc4053;--c2:#330a13 }
.empty-state { min-height: 250px; place-items: center; align-content: center; text-align: center; border: 1px dashed var(--line); border-radius: 20px; color: var(--muted); }
.empty-state:not([hidden]) { display: grid; }
.empty-state > span { color: var(--cyan); font-size: 2rem; }.empty-state strong { margin-top: 5px; color: white; }.empty-state p { margin: 4px 0 0; font-size: .75rem; }
.site-footer { position: relative; padding: 54px 0 28px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.1); background: radial-gradient(circle at 50% -15%,rgba(130,29,48,.22),transparent 38%), linear-gradient(180deg,#080913,#05060c); }
.site-footer:before { content: ""; position: absolute; top: 0; left: 50%; width: min(850px,80%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg,transparent,var(--gold),transparent); opacity: .65; }
.footer-content { display: grid; justify-items: center; gap: 40px; }
.footer-intro { width: min(900px,100%); display: grid; justify-items: center; gap: 17px; text-align: center; }.footer-intro p { margin: 0; color: #d5d9e4; font-size: .76rem; line-height: 1.8; }.footer-intro p:last-child { margin-top: 10px; }.footer-intro strong { color: white; font-size: .82rem; }
.provider-strip { width: min(940px,100%); display: grid; grid-template-columns: repeat(11,minmax(0,1fr)); gap: 9px; }
.provider-strip span:last-child { grid-column: 6; }
.provider-strip span { min-height: 60px; display: grid; place-items: center; padding: 10px 7px; border: 1px solid rgba(255,255,255,.075); border-radius: 13px; background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); }
.provider-strip img { width: 100%; max-width: 65px; height: 34px; object-fit: contain; filter: saturate(.88); transition: .2s; }.provider-strip span:hover img { filter: saturate(1.2); transform: scale(1.06); }
.footer-section { width: 100%; display: grid; justify-items: center; gap: 18px; }.footer-section h2 { margin: 0; color: var(--gold); font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }.footer-section h2:after { content: ""; display: block; width: 28px; height: 2px; margin: 8px auto 0; border-radius: 3px; background: linear-gradient(90deg,var(--gold),#fff0a7); }
.bank-grid { width: min(940px,100%); display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 10px; }
.bank-grid span { aspect-ratio: 1; display: grid; place-items: center; padding: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: #f7f8fb; box-shadow: 0 10px 24px rgba(0,0,0,.18); }.bank-grid img { width: 100%; height: 100%; object-fit: contain; }
.tag-section { gap: 15px; }.footer-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }.footer-tags span { min-width: 110px; padding: 7px 18px; border: 1px solid rgba(255,255,255,.52); border-radius: 999px; color: white; text-align: center; font-size: .7rem; font-weight: 700; background: rgba(255,255,255,.025); }
.license-section h2 { color: white; }.license-section h2 i { width: 19px; height: 19px; display: inline-grid; place-items: center; margin-left: 4px; border-radius: 50%; color: #032113; background: var(--green); font-size: .7rem; font-style: normal; vertical-align: 2px; box-shadow: 0 0 14px rgba(83,223,166,.32); }
.license-grid { width: min(820px,100%); display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.license-grid span { min-height: 108px; display: grid; place-items: center; padding: 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); }.license-grid img { width: 100%; max-width: 235px; max-height: 70px; object-fit: contain; }
.copyright { width: 100%; margin: -16px 0 0; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.07); color: #596276; text-align: center; font-family: "Manrope",sans-serif; font-size: .58rem; }
.mobile-dock { display: none; }
.contact-rail { position: fixed; z-index: 800; right: 18px; top: 58%; display: grid; gap: 8px; }
.contact-rail button { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; color: white; background: #1b9c57; box-shadow: 0 12px 30px rgba(0,0,0,.35); cursor: pointer; font-size: .58rem; font-weight: 900; }
.contact-rail img { width: 30px; height: 30px; display: block; margin: auto; }
.contact-rail .contact-telegram { color: white; background: linear-gradient(145deg,#37b9f1,#2487d8); font-size: .7rem; letter-spacing: .04em; }
.contact-rail .contact-facebook { color: white; background: linear-gradient(145deg,#2684ff,#1455b8); }

.member-drawer { position: fixed; z-index: 1900; inset: 0; }
.drawer-backdrop { position: absolute; inset: 0; border: 0; background: rgba(2,4,10,.68); backdrop-filter: blur(6px); }
.drawer-panel { position: absolute; top: 0; right: 0; width: min(390px,100%); height: 100%; display: flex; flex-direction: column; padding: 22px; border-left: 1px solid rgba(255,255,255,.13); background: linear-gradient(160deg,#151c30,#080d18 62%); box-shadow: -24px 0 70px rgba(0,0,0,.48); overflow-y: auto; animation: drawer-in .22s ease-out; }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding-bottom: 18px; }.drawer-head > div:nth-child(2) { display: grid; }.drawer-head small { color: var(--muted); font-size: .62rem; }.drawer-head strong { font-size: .85rem; }.drawer-head > button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.035); cursor: pointer; font-size: 1.2rem; }
.member-avatar-large { width: 45px; height: 45px; border-radius: 14px; font-size: .72rem; }
.balance-card { padding: 17px; border: 1px solid rgba(105,230,255,.18); border-radius: 17px; background: linear-gradient(135deg,rgba(105,230,255,.09),rgba(125,106,255,.05)); }.balance-row,.rank-row { display: flex; justify-content: space-between; align-items: center; }.balance-row span { color: var(--muted); font-size: .67rem; }.balance-row strong { font-size: 1.3rem; }.rank-row { margin-top: 14px; color: #b9c2d5; font-size: .58rem; }.rank-row b { color: var(--gold); }.rank-progress { height: 4px; margin-top: 7px; border-radius: 5px; background: rgba(255,255,255,.1); }.rank-progress i { display: block; width: 6%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),var(--violet)); }
.money-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0 19px; }.money-actions button { min-height: 45px; border: 0; border-radius: 12px; cursor: pointer; font-weight: 900; }.money-actions .deposit { color: #04180f; background: linear-gradient(135deg,#63e5a7,#30b879); }.money-actions .withdraw { color: white; border: 1px solid rgba(255,125,158,.28); background: rgba(255,125,158,.09); }
.member-nav { display: grid; border-top: 1px solid var(--line); }.member-nav a,.member-nav button,.drawer-foot button { min-height: 52px; display: flex; align-items: center; gap: 13px; padding: 0 9px; border: 0; border-bottom: 1px solid rgba(255,255,255,.065); color: #c2cada; background: none; cursor: pointer; text-align: left; font-size: .76rem; font-weight: 700; }.member-nav span,.drawer-foot span { width: 28px; color: var(--cyan); text-align: center; font-size: 1.05rem; }.member-nav a:hover,.member-nav button:hover { color: white; background: rgba(255,255,255,.035); }
.drawer-foot { margin-top: auto; padding-top: 18px; }.drawer-foot button { width: 100%; color: var(--rose); }.drawer-foot small { display: block; padding: 12px 9px 0; color: #535d71; text-align: center; font-size: .57rem; }

.member-modal { position: fixed; z-index: 2100; inset: 0; display: grid; place-items: center; padding: max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }.member-modal-card { position: relative; width: min(680px,100%); max-height: min(760px,calc(100dvh - 36px)); padding: 31px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(105,230,255,.35) transparent; border: 1px solid rgba(255,255,255,.15); border-radius: 24px; background: linear-gradient(155deg,#171d2c,#090e18); box-shadow: var(--shadow); }.member-modal-card h2 { margin: 0 0 19px; font-size: 1.55rem; }.member-modal-card .modal-close { z-index: 2; }
.profile-summary { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); }.profile-summary > div { display: grid; }.profile-summary small,.profile-summary em { color: var(--muted); font-size: .61rem; font-style: normal; }.profile-summary strong { font-size: .9rem; }.profile-summary em { color: var(--gold); }
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 15px; }.stat-grid > div { display: grid; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }.stat-grid small { color: var(--muted); font-size: .58rem; }.stat-grid strong { margin-top: 3px; font-size: .88rem; }
.bank-card { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }.bank-card div { display: grid; }.bank-card small { color: var(--muted); font-size: .6rem; }.bank-card strong { font-size: .78rem; }.bank-card button { min-height: 38px; padding: 0 13px; border: 1px solid rgba(105,230,255,.28); border-radius: 10px; color: var(--cyan); background: rgba(105,230,255,.06); cursor: pointer; font-size: .66rem; font-weight: 800; }
.panel-tabs { display: flex; gap: 7px; margin-bottom: 12px; }.panel-tabs button { flex: 1; min-height: 40px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: none; cursor: pointer; font-size: .7rem; font-weight: 800; }.panel-tabs .active { color: var(--cyan); border-color: var(--cyan); }
.history-filter { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; margin-bottom: 14px; }.history-filter button { min-height: 42px; border: 1px solid var(--line); border-radius: 11px; color: #bac3d6; background: rgba(255,255,255,.025); font-size: .67rem; }.history-filter span { color: var(--muted); }
.history-list { display: grid; gap: 9px; }.history-list article { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }.history-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; color: #06151d; background: var(--cyan); font-weight: 900; }.history-icon-violet { background: var(--violet); }.history-list article div { display: grid; }.history-list strong { font-size: .72rem; }.history-list small,.history-list time { color: var(--muted); font-size: .55rem; }.history-list button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px; color: #06131a; background: var(--cyan); cursor: pointer; font-size: .6rem; font-weight: 900; }
.history-empty { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 24px; border: 1px dashed rgba(105,230,255,.2); border-radius: 15px; color: var(--muted); text-align: center; background: rgba(255,255,255,.018); }.history-empty span { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 13px; color: var(--cyan); background: rgba(105,230,255,.08); font-size: 1.2rem; }.history-empty strong { color: white; font-size: .77rem; }.history-empty small { font-size: .6rem; }
.panel-lead { margin: -12px 0 18px; color: var(--muted); font-size: .7rem; }.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 16px; }.method-grid button { min-height: 60px; display: grid; place-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: rgba(255,255,255,.025); font-size: .67rem; }.method-grid span { color: var(--cyan); font-size: 1.1rem; }.method-grid .active { color: white; border-color: rgba(105,230,255,.38); background: rgba(105,230,255,.07); }
.member-form { display: grid; gap: 13px; }.member-form label { display: grid; gap: 6px; color: #c1cadb; font-size: .68rem; font-weight: 700; }.member-form input { min-height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: white; background: rgba(255,255,255,.035); }.member-form input:focus { border-color: rgba(105,230,255,.45); }.amount-presets { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }.amount-presets button { min-height: 37px; border: 1px solid var(--line); border-radius: 9px; color: var(--cyan); background: rgba(105,230,255,.05); cursor: pointer; font-size: .66rem; font-weight: 800; }
.member-modal[data-panel="deposit"] .member-modal-card { width: min(690px,100%); padding: 25px 17px 27px; border: 4px solid #777d80; border-radius: 24px; background: linear-gradient(180deg,#353636,#101611 82%); box-shadow: 0 0 0 1px #252728,0 20px 70px rgba(0,0,0,.7); }
.member-modal[data-panel="deposit"] .modal-close { top: 15px; right: 16px; border: 0; color: #fff; background: transparent; font-size: 1.5rem; }
.deposit-title { margin: 0 48px 19px 0!important; padding-left: 0; font-size: 1.18rem!important; }
.deposit-method-list { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 18px; }
.deposit-method-card { grid-column: span 2; min-height: 95px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 7px; border: 1px solid #c7cdd0; border-radius: 11px; color: #fff; background: linear-gradient(160deg,#690000,#b40000); box-shadow: inset 0 -15px 26px rgba(94,0,0,.3),0 5px 13px rgba(0,0,0,.25); cursor: pointer; transition: transform .18s ease,filter .18s ease,border-color .18s ease; }
.deposit-method-card.deposit-method-wide { grid-column: span 3; }
.deposit-method-card:hover,.deposit-method-card:focus-visible { transform: translateY(-3px); filter: brightness(1.14); border-color: #fff; outline: 0; }
.deposit-method-card img { width: 80px; height: 52px; object-fit: contain; margin-top: -12px; }
.deposit-method-card strong { margin-top: -4px; font-size: .76rem; font-weight: 900; }
.member-modal[data-panel="deposit-detail"] .member-modal-card { width: min(540px,100%); border: 3px solid #707678; border-radius: 22px; background: linear-gradient(180deg,#343636,#111713); }
.deposit-detail-head { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; margin: -5px 45px 18px 0; }.deposit-detail-head > button { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; background: rgba(255,255,255,.06); cursor: pointer; font-size: 1.55rem; }.deposit-detail-head h2 { margin: 0; font-size: 1.1rem; }
.deposit-selected-method { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; background: linear-gradient(145deg,rgba(149,0,0,.72),rgba(72,0,0,.7)); }.deposit-selected-method img { width: 58px; height: 48px; object-fit: contain; }.deposit-selected-method div { display: grid; }.deposit-selected-method small { color: #d9b7b7; font-size: .58rem; }.deposit-selected-method strong { color: #fff; font-size: .8rem; }
.deposit-amount-input { display: flex; align-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; background: rgba(0,0,0,.22); }.deposit-amount-input span { padding: 0 14px; color: #e7bb55; font-size: 1rem; font-weight: 900; }.deposit-amount-input input { flex: 1; min-width: 0; border: 0; border-left: 1px solid rgba(255,255,255,.12); border-radius: 0; background: transparent; }
.deposit-form .amount-presets button { border-color: rgba(255,255,255,.2); color: #fff; background: rgba(126,0,0,.52); }.deposit-submit { min-height: 47px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(180deg,#d51111,#930000); cursor: pointer; font-weight: 900; }
.member-modal[data-panel="deposit-detail"] .member-modal-card { width: min(690px,100%); padding: 16px 14px 17px; border: 4px solid #747a7c; border-radius: 23px; background: linear-gradient(180deg,#3b3c3c 0 23%,#212421 23% 100%); box-shadow: 0 0 0 1px #242626,0 22px 70px rgba(0,0,0,.68); }
.member-modal[data-panel="deposit-detail"] .modal-close { top: 13px; right: 16px; border: 0; color: #fff; background: transparent; font-size: 1.5rem; }
.deposit-detail-title { margin: 0 50px 17px 0!important; font-size: 1.18rem!important; }
.deposit-detail-tabs { display: flex; gap: 12px; padding: 0 0 12px; overflow-x: auto; border-bottom: 10px solid #191c1a; scrollbar-width: none; }.deposit-detail-tabs::-webkit-scrollbar { display: none; }
.deposit-detail-tabs button { width: 102px; min-width: 102px; height: 102px; display: grid; place-items: center; align-content: center; gap: 1px; padding: 5px 3px; border: 1px solid #5d1515; border-radius: 8px; color: #fff; background: linear-gradient(160deg,#700000,#b60000); box-shadow: 0 5px 10px rgba(0,0,0,.35); cursor: pointer; }.deposit-detail-tabs button.active { border: 2px solid #fff0da; background: linear-gradient(160deg,#b60000,#ef1717); box-shadow: 0 0 12px rgba(255,238,187,.25); }.deposit-detail-tabs img { width: 70px; height: 65px; object-fit: contain; }.deposit-detail-tabs strong { margin-top: -8px; white-space: nowrap; font-size: .65rem; font-weight: 900; }
.deposit-promotion { width: 100%; min-height: 50px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 20px 0 30px; padding: 0 15px; border: 1px solid #e5e5e5; border-radius: 12px; color: #fff; background: #030403; cursor: pointer; text-align: left; }.deposit-promotion > span { width: 35px; height: 35px; display: grid; place-items: center; color: #050505; border-radius: 50%; background: #fff; font-size: 1.1rem; }.deposit-promotion strong { font-size: .77rem; }.deposit-promotion b { font-size: 1rem; font-weight: 400; }
.deposit-detail-body { padding-bottom: 2px; }.deposit-section-heading { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }.deposit-section-heading > strong { font-size: .8rem; }.deposit-section-heading button { min-height: 42px; padding: 0 14px; border: 0; border-radius: 6px; color: #fff; background: linear-gradient(145deg,#29271f,#161612); cursor: pointer; font-size: .68rem; font-weight: 900; }.deposit-limit { margin: 0 0 10px; color: #fff; font-size: .67rem; font-weight: 700; }
.deposit-original-form { display: grid; gap: 14px; }.deposit-original-form > input { min-height: 52px; padding: 0 14px; border: 0; border-radius: 10px; outline: 0; color: #fff; background: #0b100c; font: inherit; font-size: .75rem; }.deposit-original-form > input:focus { box-shadow: 0 0 0 2px rgba(237,237,237,.18); }
.deposit-quick-amounts { display: grid; grid-template-columns: repeat(4,1fr); gap: 19px; margin-top: 34px; }.deposit-quick-amounts button { min-height: 57px; border: 1px solid #b9bec0; border-radius: 5px; color: #fff; background: linear-gradient(160deg,#3d3d3d,#111); cursor: pointer; font-size: .92rem; font-weight: 900; }.deposit-quick-amounts button:hover { border-color: #fff; filter: brightness(1.15); }
.deposit-confirm { width: 100%; min-height: 43px; margin-top: 5px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(180deg,#c50c0c,#7d0000); cursor: pointer; font-weight: 900; }.deposit-confirm:disabled { color: #777; background: linear-gradient(180deg,#8a0808,#650000); cursor: not-allowed; }
.deposit-auto-note { margin: 24px 0 20px; color: #fff; text-align: center; font-size: .64rem; font-weight: 700; }.deposit-field-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 5px 0 8px; font-size: .7rem; }.deposit-field-title b { font-size: .66rem; }.deposit-field-label { margin: 15px 0 9px; color: #fff; font-size: .7rem; font-weight: 800; }
.deposit-account-select { width: 100%; min-height: 51px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid #ececec; border-radius: 12px; color: #fff; background: #050605; cursor: pointer; text-align: left; }.deposit-account-select img { width: 40px; height: 40px; object-fit: contain; }.deposit-account-select strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }.deposit-account-select > span:last-child { color: #bbb; }
.mini-bank-logo,.deposit-bank-logo { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 5px solid #ed0d76; border-radius: 50%; color: #7a4106; background: #efb331; font-family: serif; font-size: .85rem; font-weight: 900; }
.deposit-account-card { position: relative; min-height: 158px; display: grid; grid-template-columns: auto 1fr auto; align-content: center; align-items: center; gap: 4px 12px; margin: 11px 2px 26px; padding: 24px 30px; overflow: hidden; border-radius: 17px; color: #3f4246; background: linear-gradient(165deg,#fff 0 47%,#eee 48% 62%,#f8f8f8 63% 100%); }.deposit-account-card:after { content: ""; position: absolute; left: -5%; right: -5%; bottom: 30%; height: 25px; transform: rotate(-3deg); background: rgba(210,210,210,.35); }.deposit-account-card img,.deposit-account-card .deposit-bank-logo { z-index: 1; grid-row: span 2; width: 62px; height: 62px; object-fit: contain; }.deposit-account-card > div { z-index: 1; display: grid; }.deposit-account-card strong { font-size: .82rem; }.deposit-account-card small { font-size: .68rem; }.deposit-account-card > b { z-index: 1; grid-column: 1 / 3; margin-top: 14px; font-family: "Manrope",sans-serif; font-size: 1.08rem; }.deposit-account-card > button { z-index: 1; grid-column: 3; grid-row: 3; border: 0; color: #050505; background: transparent; cursor: pointer; font-size: 1.1rem; }.deposit-account-card.wallet { margin-top: 11px; }
.deposit-info,.deposit-alert { min-height: 49px; display: flex; align-items: center; justify-content: center; gap: 9px; margin: 14px 0 18px; padding: 10px 14px; border: 1px solid rgba(44,138,255,.2); border-radius: 8px; color: #338cff; text-align: center; background: rgba(30,104,177,.11); font-size: .67rem; }.deposit-alert { color: #ff3131; border-color: rgba(255,49,49,.24); background: rgba(120,21,21,.18); }.deposit-info span,.deposit-alert span { font-size: 1rem; }
.deposit-upload { min-height: 175px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 20px; border: 1px dashed #7e8485; border-radius: 8px; color: #fff; text-align: center; background: rgba(255,255,255,.025); cursor: pointer; }.deposit-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }.deposit-upload > span { font-size: 2.5rem; line-height: 1; }.deposit-upload strong { font-size: .75rem; }.deposit-upload small { font-size: .62rem; }
.deposit-user-bank { width: 210px; min-height: 157px; display: grid; justify-items: start; align-content: center; gap: 3px; padding: 13px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(145deg,#aa0000,#710000); cursor: pointer; text-align: left; }.deposit-user-bank .mini-bank-logo { margin-bottom: 6px; }.deposit-user-bank small { font-size: .58rem; }.deposit-user-bank strong { font-size: .65rem; }.deposit-user-bank b { margin-top: 6px; font-family: "Manrope",sans-serif; font-size: .68rem; }
.deposit-line { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 8px; color: #fff; background: linear-gradient(180deg,#45da25,#0b9c19); cursor: pointer; font-size: .82rem; font-weight: 900; }.deposit-line img { width: 23px; height: 23px; }.deposit-terms { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 5px auto 0; border: 0; color: #fff; background: transparent; cursor: pointer; font-size: .67rem; font-weight: 800; text-decoration: underline; }.deposit-terms span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: #090909; background: #fff; font-size: .8rem; text-decoration: none; }
.notice-box { display: grid; gap: 4px; margin-bottom: 15px; padding: 15px; border: 1px solid rgba(241,189,96,.25); border-radius: 14px; color: var(--gold); background: rgba(241,189,96,.06); }.notice-box strong { font-size: .77rem; }.notice-box span { color: #b1a58d; font-size: .65rem; }
.deposit-qr-shell { display: grid; justify-items: center; text-align: center; gap: 10px; }.deposit-qr-shell h2 { margin: 0; font-size: 1.15rem; }.deposit-qr-amount { margin: 0; color: var(--muted); font-size: .8rem; }.deposit-qr-amount b { color: var(--cyan); font-family: "Manrope",sans-serif; font-size: 1.15rem; }.deposit-qr-image { width: 232px; height: 232px; display: grid; place-items: center; padding: 12px; border-radius: 16px; background: #fff; }.deposit-qr-image img { width: 100%; height: 100%; object-fit: contain; }.deposit-qr-hint { margin: 0; max-width: 320px; color: #8fa0bb; font-size: .68rem; line-height: 1.7; }.deposit-qr-status { display: flex; align-items: center; gap: 9px; margin-top: 4px; padding: 11px 18px; border: 1px solid rgba(105,230,255,.24); border-radius: 12px; color: #bfeeff; background: rgba(105,230,255,.07); font-size: .76rem; font-weight: 700; }.deposit-qr-status.done { border-color: rgba(78,216,160,.35); color: #9ff0cd; background: rgba(78,216,160,.1); }.deposit-qr-status.failed { border-color: rgba(255,109,126,.3); color: #ffb0ba; background: rgba(255,109,126,.08); }.qr-spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(105,230,255,.3); border-top-color: var(--cyan); animation: qr-spin .8s linear infinite; }@keyframes qr-spin { to { transform: rotate(360deg); } }
.member-modal[data-panel="download"] .member-modal-card,.member-modal[data-panel="download-guide"] .member-modal-card { width: min(600px,100%); }.download-title { padding-right: 42px; }.download-heading { margin: 25px 0 16px; text-align: center; font-size: 1.05rem; font-weight: 800; }.download-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.download-options button { min-width: 0; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; background: white; cursor: pointer; transition: transform .2s,border-color .2s; }.download-options button:hover { transform: translateY(-3px); border-color: var(--cyan); }.download-options button:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .58; }.download-options button:disabled:hover { transform: none; border-color: rgba(255,255,255,.18); }.download-options img { width: 100%; height: auto; display: block; }.download-guide { overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: #f6dbe6; }.download-guide img { width: 100%; height: auto; display: block; }
.android-guide { padding: 18px; border: 1px solid rgba(82,220,139,.22); border-radius: 18px; background: radial-gradient(circle at 50% 0,rgba(82,220,139,.13),transparent 40%),#0c1414; }.android-guide-head { display: flex; align-items: center; gap: 13px; margin-bottom: 17px; }.android-guide-head > span { width: 45px; height: 45px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: #07150d; background: linear-gradient(145deg,#75e49e,#34c36b); font-size: 1rem; }.android-guide-head div { display: grid; }.android-guide-head strong { font-size: .82rem; }.android-guide-head small { color: #8fa69a; font-size: .6rem; }.android-guide-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }.android-guide-grid article { position: relative; min-height: 170px; display: grid; justify-items: center; align-content: center; gap: 5px; padding: 18px 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; text-align: center; background: rgba(255,255,255,.035); }.android-guide-grid article > b { position: absolute; left: 10px; top: 10px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #07150d; background: #64db91; font-family: "Manrope",sans-serif; font-size: .65rem; }.guide-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 5px; border-radius: 14px; color: #70e99e; background: rgba(82,220,139,.1); font-size: 1.45rem; font-weight: 900; }.android-guide-grid strong { font-size: .7rem; }.android-guide-grid small { color: #84978d; font-size: .57rem; line-height: 1.6; }
.setting-list { display: grid; }.setting-list label { min-height: 67px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }.setting-list span { display: grid; }.setting-list b { font-size: .76rem; }.setting-list small { color: var(--muted); font-size: .6rem; }.setting-list input { width: 42px; height: 22px; accent-color: var(--cyan); }

.modal { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(2,4,10,.78); backdrop-filter: blur(10px); }
.modal-card { position: relative; width: min(420px,100%); max-height: calc(100dvh - 36px); padding: 36px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(105,230,255,.35) transparent; border: 1px solid rgba(255,255,255,.14); border-radius: 25px; background: linear-gradient(155deg,#171e32,#0a0f1d); box-shadow: var(--shadow); }
.modal-close { position: absolute; right: 14px; top: 13px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.04); cursor: pointer; font-size: 1.2rem; }
.modal-mark { display: block; width: 50px; height: 50px; margin-bottom: 18px; }.eyebrow { margin: 0 0 7px; color: var(--cyan); font-size: .6rem; font-weight: 900; letter-spacing: .2em; }
.modal-card h2 { margin: 0; font-size: 1.75rem; }.modal-description { margin: 5px 0 22px; color: var(--muted); font-size: .75rem; }
.account-form { display: grid; gap: 14px; }.account-form label { display: grid; gap: 6px; color: #bec5d6; font-size: .7rem; font-weight: 700; }
.account-form input { min-width: 0; min-height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: white; background: rgba(255,255,255,.04); }
.account-form input:focus { border-color: rgba(105,230,255,.45); box-shadow: 0 0 0 3px rgba(105,230,255,.07); }
.phone-input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.04); overflow: hidden; }.phone-input b { padding: 0 12px; color: var(--cyan); }.phone-input input { flex: 1; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; }
.terms-row { grid-template-columns: 18px 1fr !important; align-items: start; }.terms-row input { min-height: 0; height: 16px; accent-color: var(--cyan); }
.account-feedback { padding: 10px 12px; border: 1px solid rgba(255,103,125,.35); border-radius: 10px; color: #ff9cac; background: rgba(255,75,105,.08); font-size: .68rem; line-height: 1.55; }
.account-feedback.success { border-color: rgba(105,230,255,.35); color: var(--cyan); background: rgba(105,230,255,.07); }
.account-form.is-loading { opacity: .72; pointer-events: none; }
.account-form > div[data-reg-pane] { display: grid; gap: 14px; }
.reg-steps { display: flex; align-items: flex-start; justify-content: center; gap: 4px; margin: 2px 0 4px; }
.reg-step { display: grid; justify-items: center; gap: 6px; width: 74px; text-align: center; }
.reg-step i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: #7a8399; background: rgba(255,255,255,.03); font: 800 .8rem "Manrope",sans-serif; font-style: normal; transition: .2s; }
.reg-step b { color: #6b7488; font-size: .56rem; font-weight: 700; line-height: 1.3; }
.reg-step.current i { border-color: var(--cyan); color: #071019; background: linear-gradient(145deg,var(--cyan),#4da4ff); box-shadow: 0 0 16px rgba(105,230,255,.3); }
.reg-step.current b { color: var(--cyan); }
.reg-step.done i { border-color: rgba(78,216,160,.5); color: #071019; background: linear-gradient(145deg,#5be0a4,#37c680); }
.reg-step.done i { font-size: 0; }
.reg-step.done i::after { content: "✓"; font-size: .85rem; }
.reg-step.done b { color: #8fe9c0; }
.reg-step-line { flex: 1; max-width: 40px; height: 1px; margin-top: 17px; background: var(--line); }
.bank-pick-label { margin: 0; color: #bec5d6; font-size: .7rem; font-weight: 700; }
.reg-bank-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.reg-bank-tile { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 3px; padding: 6px 4px; border: 0; border-radius: 12px; background: var(--bank); color: var(--bank-text); cursor: pointer; transition: transform .15s,box-shadow .15s; }
/* Bank logos (omise/banks-logo) are drawn for the bank's brand-color background. */
.reg-bank-tile img { width: 52%; aspect-ratio: 1; object-fit: contain; }
.reg-bank-tile span { display: block; background: transparent; box-shadow: none; color: var(--bank-text); font: 800 .55rem "Manrope",sans-serif; letter-spacing: .02em; text-align: center; line-height: 1.1; }
.reg-bank-tile:hover { transform: translateY(-2px); }
.reg-bank-tile.selected { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--cyan); transform: translateY(-2px); }
.bank-warn { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(241,189,96,.32); border-radius: 10px; color: var(--gold); background: rgba(241,189,96,.07); font-size: .64rem; line-height: 1.5; }
.bank-warn span { width: 18px; height: 18px; display: grid; place-items: center; flex: none; border-radius: 50%; color: #201700; background: var(--gold); font-weight: 800; }
.account-form select.known-select { min-height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; outline: 0; color: white; background: rgba(255,255,255,.04); }
/* Native dropdown popups follow the OS light theme by default — force dark so white text stays readable. */
select { color-scheme: dark; }
select option { background: #101827; color: #f5f7ff; }
.account-form select.known-select:focus { border-color: rgba(105,230,255,.45); }
.account-form input[readonly] { color: #cfe; background: rgba(105,230,255,.05); }
.bonus-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bonus-opt { display: flex !important; flex-direction: row; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.bonus-opt input { min-height: 0; width: 18px; height: 18px; accent-color: var(--cyan); }
.bonus-opt:has(input:checked) { border-color: rgba(105,230,255,.5); background: rgba(105,230,255,.06); }
.account-actions { display: flex; gap: 10px; }
.account-actions .account-back { flex: 0 0 auto; padding: 0 18px; }
.modal-card > small { display: block; margin-top: 13px; color: #5e687d; text-align: center; font-size: .6rem; }
.toast { position: fixed; z-index: 3000; left: 50%; bottom: 25px; min-width: 280px; padding: 13px 18px; transform: translateX(-50%); border: 1px solid rgba(105,230,255,.3); border-radius: 12px; background: rgba(11,20,35,.95); box-shadow: var(--shadow); text-align: center; font-size: .75rem; }

@media (min-width: 1100px) { .game-track { grid-auto-columns: calc((100% - 91px) / 8); } }
@media (max-width: 900px) {
  .header-grid { grid-template-columns: auto 1fr auto; }.header-actions { min-width: 330px; }.member-summary { grid-template-columns: 145px 150px; }.wallet-point { display: none; }.utility-nav { gap: 12px; }
  .hero-banner { min-height: 360px; }.banner-copy { width: 58%; }.lobby-tabs { gap: 8px; }.category-bar { grid-template-columns: repeat(3,1fr); }
  .game-track { grid-auto-columns: calc((100% - 52px) / 5); }.footer-row { display: grid; }.footer-meta { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  :root { --shell: calc(100% - 20px); }
  body { padding-bottom: 72px; }.site-header { height: 72px; }.header-grid { grid-template-columns: auto 1fr; gap: 10px; }.brand-mark { width: 35px; height: 35px; }.brand-copy strong { font-size: .84rem; }.brand-copy small { font-size: .48rem; }
  .utility-nav { display: none; }.header-actions { min-width: 0; grid-template-columns: 1fr 1fr; gap: 6px; }.header-actions .button { min-height: 38px; padding: 0 10px; font-size: .68rem; }
  .member-summary { justify-self: end; grid-template-columns: minmax(0,145px) minmax(0,130px); }.member-identity { min-height: 40px; padding: 4px 7px; }.member-avatar { width: 28px; height: 28px; }.wallet-chip { min-height: 40px; padding: 4px 7px; }.wallet-chip > span { display: none; }.wallet-chip > button { width: 27px; height: 27px; }.member-identity small,.wallet-chip small { display: none; }
  .announcement { height: 32px; }.announcement strong,.marquee { font-size: .61rem; }
  .hero-banner { min-height: 265px; border-radius: 0 0 20px 20px; }.banner-art { background-position: 65% center; }.banner-shade { background: linear-gradient(90deg,rgba(4,7,15,.95),rgba(4,7,15,.55) 65%,rgba(4,7,15,.15)); }
  .banner-copy { left: 20px; width: 70%; }.banner-copy > span { font-size: .52rem; }.banner-copy h1 { margin: 8px 0; font-size: clamp(1.8rem,9vw,2.6rem); }.banner-copy p { margin-bottom: 14px; font-size: .72rem; }.banner-copy .button { min-height: 39px; font-size: .68rem; }
  .banner-status { right: 10px; bottom: 9px; min-width: 155px; padding: 8px 10px; }.banner-status small { display: none; }.banner-status strong { font-size: .75rem; }
  .hero-arrow { display: none; }
  .home-stage { padding-bottom: 22px; }.lobby-panel { padding: 10px; border-radius: 18px; margin-bottom: 28px; }.lobby-tabs { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }.lobby-tab { min-height: 68px; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; text-align: center; }.lobby-tab > span { width: 31px; height: 31px; border-radius: 10px; font-size: .85rem; }.lobby-tab strong { font-size: .65rem; }.lobby-tab small { display: none; }
  .category-bar { display: flex; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }.category-button { min-width: 88px; min-height: 52px; }.category-button strong { font-size: .68rem; }
  .game-results { gap: 30px; }.shelf-head h2 { font-size: .95rem; }.shelf-head p { display: none; }.shelf-controls [data-scroll-track] { display: none; }.game-track { grid-auto-columns: calc((100% - 20px) / 3); gap: 10px; }.game-cover { height: 142px; }.game-info { padding: 9px; }.game-info strong { font-size: .67rem; }.game-symbol { font-size: 1.85rem; }.play-badge { display: none; }
  .site-footer { padding: 35px 0 22px; }.footer-content { gap: 32px; }.footer-intro { gap: 13px; }.footer-intro p { font-size: .68rem; line-height: 1.75; }.footer-intro strong { font-size: .74rem; }.provider-strip { grid-template-columns: repeat(6,1fr); gap: 6px; }.provider-strip span:last-child { grid-column: auto; }.provider-strip span { min-height: 49px; padding: 7px 4px; border-radius: 10px; }.provider-strip img { height: 27px; }.bank-grid { grid-template-columns: repeat(6,1fr); gap: 7px; }.bank-grid span { padding: 5px; border-radius: 10px; }.license-grid { gap: 8px; }.license-grid span { min-height: 85px; padding: 12px 9px; border-radius: 13px; }.copyright { margin-top: -12px; }
  .mobile-dock { position: fixed; z-index: 1200; left: 0; right: 0; bottom: 0; height: 70px; display: grid; grid-template-columns: repeat(5,1fr); align-items: center; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(7,11,20,.96); backdrop-filter: blur(18px); }.mobile-dock a,.mobile-dock button { display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; color: var(--muted); background: none; font-size: .56rem; cursor: pointer; }.mobile-dock span { color: #c5cee0; font-size: 1.08rem; }.mobile-dock .active { color: var(--cyan); }.mobile-dock .dock-play span { width: 49px; height: 49px; display: grid; place-items: center; margin-top: -27px; border: 4px solid #09101e; border-radius: 50%; color: #041019; background: linear-gradient(145deg,#7beaff,#438eff); box-shadow: 0 8px 25px rgba(69,159,255,.4); }
  .contact-rail { top: auto; right: 10px; bottom: calc(82px + env(safe-area-inset-bottom)); display: grid; gap: 6px; }.contact-rail button { width: 40px; height: 40px; border-radius: 13px; font-size: .5rem; }.contact-rail .contact-telegram { font-size: .62rem; }.modal,.member-modal { padding: max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom)); }.modal-card { max-height: calc(100dvh - 20px); padding: 30px 22px; }.member-modal-card { max-height: calc(100dvh - 20px); padding: 27px 18px; border-radius: 20px; }.toast { bottom: 90px; width: calc(100% - 32px); min-width: 0; }
}
@media (max-width: 430px) { .header-grid { grid-template-columns: auto 1fr; }.member-summary { grid-template-columns: 1fr auto; }.member-identity { max-width: 115px; }.wallet-chip { min-width: 88px; }.game-track { grid-auto-columns: calc((100% - 10px) / 2); }.game-cover { height: 178px; }.banner-copy { width: 76%; }.banner-status { display: none; }.drawer-panel { padding: 18px; }.stat-grid { grid-template-columns: repeat(2,1fr); }.stat-grid > div:last-child { grid-column: 1 / -1; }.history-list article { grid-template-columns: auto 1fr auto; }.history-list time { display: none; }.history-list button { grid-column: 2 / -1; justify-self: start; }.amount-presets { grid-template-columns: repeat(2,1fr); }.deposit-method-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.deposit-method-card,.deposit-method-card.deposit-method-wide { grid-column: span 1; min-height: 104px; }.deposit-method-card img { width: 68px; height: 52px; }.member-modal[data-panel="deposit"] .member-modal-card { padding: 21px 12px 15px; }.download-heading { margin-top: 22px; font-size: .9rem; }.download-options { grid-template-columns: 1fr; gap: 10px; }.android-guide { padding: 12px; }.android-guide-grid { grid-template-columns: 1fr; }.android-guide-grid article { min-height: 135px; }.footer-tags { gap: 8px; }.footer-tags span { min-width: 104px; padding: 6px 14px; }.license-grid { grid-template-columns: repeat(2,1fr); }.license-grid span:last-child { grid-column: 1 / -1; width: calc(50% - 4px); justify-self: center; } }
@media (max-width: 430px) {
  .member-modal[data-panel="deposit-detail"] { padding: 8px; }
  .member-modal[data-panel="deposit-detail"] .member-modal-card { max-height: calc(100dvh - 16px); padding: 14px 9px 12px; border-width: 3px; border-radius: 18px; }
  .deposit-detail-title { margin-bottom: 13px!important; font-size: 1rem!important; }
  .deposit-detail-tabs { gap: 6px; padding-bottom: 9px; border-bottom-width: 7px; }
  .deposit-detail-tabs button { width: 77px; min-width: 77px; height: 83px; padding: 2px; }
  .deposit-detail-tabs img { width: 54px; height: 53px; }
  .deposit-detail-tabs strong { margin-top: -7px; font-size: .53rem; }
  .deposit-promotion { min-height: 45px; margin: 13px 0 18px; padding: 0 10px; }
  .deposit-section-heading { min-height: 40px; }.deposit-section-heading button { min-height: 36px; padding: 0 10px; }
  .deposit-quick-amounts { gap: 8px; margin-top: 17px; }.deposit-quick-amounts button { min-height: 46px; font-size: .74rem; }
  .deposit-account-card { min-height: 145px; margin-bottom: 17px; padding: 19px 20px; }.deposit-account-card img,.deposit-account-card .deposit-bank-logo { width: 51px; height: 51px; }.deposit-account-card > b { font-size: .88rem; }
  .deposit-info,.deposit-alert { margin: 11px 0 14px; font-size: .59rem; }
  .deposit-upload { min-height: 145px; padding: 15px 9px; }.deposit-upload small { font-size: .54rem; }
  .deposit-user-bank { width: 100%; min-height: 130px; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }.deposit-user-bank .mini-bank-logo { grid-row: span 3; }.deposit-user-bank b { margin-top: 0; }
}

/* Deposit controls inherit the colors selected in Admin > Theme & Colors. */
.member-modal[data-panel="deposit"] .member-modal-card,
.member-modal[data-panel="deposit-detail"] .member-modal-card {
  border-color: color-mix(in srgb, var(--cyan) 58%, var(--violet));
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--panel) 92%, var(--cyan)),
    color-mix(in srgb, var(--bg) 86%, var(--violet)) 100%);
}
.deposit-method-card {
  border-color: color-mix(in srgb, var(--cyan) 64%, var(--violet));
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--cyan) 34%, var(--panel)),
    color-mix(in srgb, var(--violet) 38%, var(--bg)));
  box-shadow: inset 0 -18px 28px color-mix(in srgb, var(--bg) 52%, transparent), 0 7px 18px rgba(0,0,0,.28);
}
.deposit-method-card:hover,
.deposit-method-card:focus-visible {
  border-color: var(--text);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--cyan) 55%, var(--panel)),
    color-mix(in srgb, var(--violet) 48%, var(--bg)));
}
.deposit-detail-tabs button {
  border-color: color-mix(in srgb, var(--cyan) 55%, var(--violet));
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--cyan) 30%, var(--panel)),
    color-mix(in srgb, var(--violet) 34%, var(--bg)));
}
.deposit-detail-tabs button.active {
  border-color: var(--text);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--cyan) 64%, var(--panel)),
    color-mix(in srgb, var(--violet) 58%, var(--bg)));
  box-shadow: 0 0 16px color-mix(in srgb, var(--cyan) 24%, transparent);
}
.deposit-promotion,
.deposit-account-select {
  border-color: color-mix(in srgb, var(--cyan) 46%, var(--line));
}
.deposit-quick-amounts button {
  border-color: color-mix(in srgb, var(--cyan) 48%, var(--line));
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--panel) 82%, var(--cyan)),
    color-mix(in srgb, var(--bg) 78%, var(--violet)));
}
.deposit-quick-amounts button:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 12px color-mix(in srgb, var(--cyan) 22%, transparent);
}
.deposit-confirm,
.deposit-user-bank {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cyan) 70%, var(--violet)),
    color-mix(in srgb, var(--violet) 65%, var(--bg)));
}
.deposit-confirm:disabled { background: color-mix(in srgb, var(--panel) 78%, var(--bg)); }
.deposit-user-bank { border: 1px solid color-mix(in srgb, var(--cyan) 46%, transparent); }
.deposit-info { border-color: color-mix(in srgb, var(--cyan) 35%, transparent); color: var(--cyan); background: color-mix(in srgb, var(--cyan) 9%, var(--bg)); }
.deposit-alert { border-color: color-mix(in srgb, var(--violet) 42%, transparent); color: color-mix(in srgb, var(--text) 78%, var(--violet)); background: color-mix(in srgb, var(--violet) 12%, var(--bg)); }

/* Keep all four deposit choices identical in size. */
.member-modal[data-panel="deposit"] .deposit-method-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.member-modal[data-panel="deposit"] .deposit-method-card,
.member-modal[data-panel="deposit"] .deposit-method-card.deposit-method-wide {
  grid-column: span 1;
  min-height: 112px;
}
.member-modal[data-panel="deposit"] .deposit-method-card img {
  width: 78px;
  height: 61px;
}
@media (max-width: 430px) {
  .member-modal[data-panel="deposit"] .deposit-method-list { gap: 10px; }
  .member-modal[data-panel="deposit"] .deposit-method-card,
  .member-modal[data-panel="deposit"] .deposit-method-card.deposit-method-wide { min-height: 104px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*:before,*:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Favorite heart on game cards */
.fav-toggle{position:absolute;top:6px;left:6px;z-index:3;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(7,10,20,.55);backdrop-filter:blur(4px);font-size:15px;line-height:1;color:#fff;opacity:.85;cursor:pointer;transition:transform .15s,color .15s,opacity .15s}
.fav-toggle:hover{transform:scale(1.15);opacity:1}
.fav-toggle.active{color:#ff5f8f;opacity:1}

/* Lobby game search */
.lobby-search{display:flex;align-items:center;gap:10px;margin:14px 0 4px;padding:11px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.lobby-search span{opacity:.6;font-size:1.05rem}
.lobby-search input{flex:1;background:none;border:none;outline:none;color:var(--text,#f5f7ff);font:inherit;font-size:.95rem}
.lobby-search input::placeholder{color:rgba(245,247,255,.4)}
.lobby-search:focus-within{border-color:rgba(105,230,255,.5)}

/* View-all mode */
.view-all-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 15px;border:0;border-radius:999px;background:linear-gradient(135deg,rgba(105,230,255,.18),rgba(157,120,255,.18));box-shadow:inset 0 0 0 1px rgba(105,230,255,.4);color:#aeecff;font:700 .68rem "Anuphan",sans-serif;letter-spacing:.02em;cursor:pointer;transition:box-shadow .15s,transform .15s,background .15s}
.view-all-btn::after{content:"\203A";font-size:.9rem;line-height:1;transform:translateY(-1px)}
.view-all-btn:hover{background:linear-gradient(135deg,rgba(105,230,255,.32),rgba(157,120,255,.32));box-shadow:inset 0 0 0 1px rgba(105,230,255,.7);transform:translateY(-1px)}
.search-track.grid-mode{display:grid;grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));overflow:visible;scroll-snap-type:none}
.load-more-row{display:flex;justify-content:center;margin-top:16px}
.load-more-row button{min-height:44px;padding:0 34px;border:0;border-radius:999px;background:linear-gradient(135deg,#69e6ff,#9d78ff);color:#0a1020;font:800 .8rem "Anuphan",sans-serif;cursor:pointer;box-shadow:0 8px 22px rgba(105,190,255,.28);transition:transform .15s,box-shadow .15s}
.load-more-row button:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(105,190,255,.4)}
@media (max-width:700px){.search-track.grid-mode{grid-template-columns:repeat(auto-fill,minmax(105px,1fr))}}
.shelf-controls button.view-all-btn{width:auto;height:32px;padding:0 15px;white-space:nowrap;border:0;font-size:.68rem;color:#aeecff;background:linear-gradient(135deg,rgba(105,230,255,.18),rgba(157,120,255,.18));box-shadow:inset 0 0 0 1px rgba(105,230,255,.4);border-radius:999px}
.shelf-controls button.view-all-btn:hover{color:#dffaff;background:linear-gradient(135deg,rgba(105,230,255,.32),rgba(157,120,255,.32));box-shadow:inset 0 0 0 1px rgba(105,230,255,.7)}

/* Honest static bits replacing former demo controls */
.deposit-promotion-static{display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);color:var(--muted);font-size:.8rem}
.deposit-promotion-static strong{color:var(--text);font-weight:600}
.setting-note{margin:12px 4px 0;color:var(--muted);font-size:.72rem}
.balance-row-sub{opacity:.75;font-size:.82rem}
body.no-animation *,body.no-animation *::before,body.no-animation *::after{animation-duration:0s!important;transition-duration:0s!important}

/* Password visibility eye toggle */
.password-wrap{position:relative;display:block}
.password-wrap input{width:100%;padding-right:44px}
.password-eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:inherit;font-size:1rem;opacity:.45;cursor:pointer}
.password-eye:hover{opacity:.8;background:rgba(255,255,255,.06)}
.password-eye.is-visible{opacity:1;color:var(--primary,#69e6ff)}

/* Loyalty points panel */
.points-balance-card{display:grid;gap:2px;margin:12px 0;padding:16px;border:1px solid rgba(241,189,96,.25);border-radius:14px;background:linear-gradient(135deg,rgba(241,189,96,.12),rgba(241,189,96,.03))}
.points-balance-card small{color:#a6afc3;font-size:.68rem}
.points-balance-card strong{color:var(--gold,#f1bd60);font-size:1.5rem}
.points-balance-card em{font-style:normal;color:#8190aa;font-size:.66rem}
.checkin-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:8px 0 12px}
.checkin-day{display:grid;gap:3px;justify-items:center;padding:9px 2px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03)}
.checkin-day b{font-size:.66rem;color:#a6afc3}
.checkin-day small{font-size:.56rem;color:#8190aa}
.checkin-day.done{border-color:rgba(241,189,96,.4);background:rgba(241,189,96,.1)}
.checkin-day.done b{color:var(--gold,#f1bd60)}
.checkin-day.today{border-color:rgba(105,230,255,.5);box-shadow:0 0 0 2px rgba(105,230,255,.12)}
.points-earn-list{display:grid;gap:8px;margin:8px 0 4px}
.points-earn-list>div{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.03)}
.points-earn-list span{font-size:1.1rem}
.points-earn-list strong{display:block;font-size:.76rem}
.points-earn-list small{color:#8190aa;font-size:.64rem}
.referral-box{display:flex;align-items:center;gap:8px;margin:8px 0;padding:9px 11px;border:1px dashed rgba(105,230,255,.3);border-radius:11px;background:rgba(105,230,255,.04)}
.referral-box code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9fd9ff;font-size:.68rem}
.referral-box button{flex:none;padding:7px 13px;border:1px solid rgba(105,230,255,.35);border-radius:9px;color:#dffaff;background:rgba(105,230,255,.1);font-size:.68rem;font-weight:700}
.redeem-row{display:flex;gap:8px;margin:8px 0 4px}
.redeem-row input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:11px;outline:0;color:white;background:rgba(255,255,255,.04)}
.redeem-row .button{flex:none}
.points-history{display:grid;gap:6px;margin-top:6px;max-height:250px;overflow-y:auto}
.points-history-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.points-history-row strong{font-size:.72rem}
.points-history-row small{display:block;color:#8190aa;font-size:.6rem}
.points-history-row b.gain{color:#59e3a7}
.points-history-row b.spend{color:#ff9ba6}



/* Plinko minigame — dedicated panel (gold theme) */
.plinko-top{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.plinko-chip{display:grid;gap:2px;padding:10px 12px;border:1px solid rgba(241,189,96,.18);border-radius:12px;background:linear-gradient(180deg,rgba(241,189,96,.06),rgba(255,255,255,.02))}
.plinko-chip small{color:#9a8f78;font-size:.6rem}
.plinko-chip strong{font-size:.86rem;color:#fff}
.plinko-chip.win strong{color:#ffd98a;text-shadow:0 0 12px rgba(241,189,96,.5)}
.plinko-board{position:relative;height:clamp(430px,58vh,540px);margin:6px 0 12px;border:1.5px solid rgba(241,189,96,.35);border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,#2a1f14 0%,#160f08 45%,#0d0906 100%);box-shadow:inset 0 0 60px rgba(0,0,0,.55),0 6px 24px rgba(0,0,0,.4)}
.plinko-board::before{content:"";position:absolute;inset:-40% -20%;background:repeating-conic-gradient(from -90deg at 50% 18%,rgba(241,189,96,.07) 0deg 7deg,transparent 7deg 16deg);pointer-events:none}
.plinko-glow{position:absolute;inset:0;pointer-events:none}
.plinko-glow::before{content:"";position:absolute;inset:0 0 48px 0;clip-path:polygon(50% -2%,105% 100%,-5% 100%);background:linear-gradient(180deg,#1c1309 0%,#120c05 100%);box-shadow:inset 0 0 46px rgba(0,0,0,.75)}
.plinko-glow::after{content:"";position:absolute;inset:0 0 48px 0;clip-path:polygon(50% -2%,105% 100%,-5% 100%);background:radial-gradient(ellipse at 50% 92%,rgba(241,189,96,.16),transparent 58%),radial-gradient(circle at 50% 4%,rgba(255,233,184,.2),transparent 14%)}
.plinko-peg{position:absolute;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff8e8,#e8c887 45%,#7a5a28);box-shadow:0 0 7px rgba(241,189,96,.55),0 1px 2px rgba(0,0,0,.6)}
.plinko-ball{position:absolute;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 30% 26%,#fff8e0,#ffd98a 40%,#e0a33e 70%,#8d6420);box-shadow:0 0 16px rgba(255,217,138,.9),0 3px 6px rgba(0,0,0,.55);z-index:3;will-change:left,top,transform}
.plinko-win-pop{position:absolute;bottom:64px;transform:translateX(-50%);z-index:4;padding:6px 14px;border-radius:999px;font-weight:800;font-size:.86rem;animation:plinkoPop .5s cubic-bezier(.2,1.4,.4,1);pointer-events:none;white-space:nowrap}
.plinko-win-pop.win{color:#1a1206;background:linear-gradient(135deg,#fff3d1,#ffd98a 40%,#e0a33e);box-shadow:0 0 28px rgba(241,189,96,.85)}
.plinko-win-pop.lose{color:#cbbfa6;background:rgba(26,18,8,.94);border:1px solid rgba(241,189,96,.2)}
@keyframes plinkoPop{from{transform:translateX(-50%) translateY(16px) scale(.4);opacity:0}to{transform:translateX(-50%) translateY(0) scale(1);opacity:1}}
.plinko-slots{position:absolute;left:6px;right:6px;bottom:6px;display:flex;gap:3px;height:44px;z-index:2}
.plinko-slots span{flex:1;min-width:0;display:grid;place-items:center;border-radius:9px 9px 5px 5px;text-align:center;font-size:.62rem;font-weight:800;overflow:hidden;white-space:nowrap;transition:transform .16s,filter .16s;box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -3px 6px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.4)}
.plinko-slots .tier-zero{background:linear-gradient(180deg,#241c12,#171108);color:#7d7258}
.plinko-slots .tier-small{background:linear-gradient(180deg,#5a4dbb,#38307c);color:#e4defc}
.plinko-slots .tier-big{background:linear-gradient(180deg,#c98a2c,#7d5312);color:#ffe9b8}
.plinko-slots .tier-jackpot{background:linear-gradient(180deg,#ffe9b8,#f1bd60 45%,#b07f24);color:#241503;text-shadow:0 1px 0 rgba(255,255,255,.4);animation:jackpotShine 2.4s ease-in-out infinite}
@keyframes jackpotShine{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}
.plinko-slots span.hit{transform:translateY(-6px);filter:brightness(1.45);box-shadow:0 0 22px rgba(241,189,96,.95),inset 0 2px 0 rgba(255,255,255,.3)}
.plinko-play-btn{display:grid;gap:1px;justify-items:center;border:0;background:linear-gradient(135deg,#fff3d1 0%,#ffd98a 30%,#e8b04a 70%,#c98a2c 100%) !important;color:#241503 !important;font-weight:800;box-shadow:0 4px 18px rgba(241,189,96,.4),inset 0 1px 0 rgba(255,255,255,.5)}
.plinko-play-btn:hover{filter:brightness(1.08)}
.plinko-play-btn small{font-weight:600;font-size:.62rem;opacity:.7}
.plinko-promo{display:flex;align-items:center;gap:12px;width:100%;margin:10px 0;padding:13px 15px;border:1px solid rgba(241,189,96,.3);border-radius:14px;background:linear-gradient(120deg,rgba(241,189,96,.14),rgba(157,120,255,.08));color:inherit;text-align:left;cursor:pointer}
.plinko-promo:hover{background:linear-gradient(120deg,rgba(241,189,96,.22),rgba(157,120,255,.12))}
.plinko-promo-icon{font-size:1.5rem}
.plinko-promo-text{flex:1;display:grid;gap:1px}
.plinko-promo-text strong{font-size:.8rem}
.plinko-promo-text small{color:#8190aa;font-size:.64rem}
.plinko-promo>b{color:var(--gold,#f1bd60);font-size:.74rem}

.plinko-canvas{position:absolute;inset:0;z-index:2;pointer-events:none}

.wallet-point strong[data-points-badge]{white-space:nowrap;font-variant-numeric:tabular-nums}