: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: max(84px, calc(var(--logo-h, 42px) + 16px)); border-bottom: 1px solid var(--line); background: var(--header-bg, 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; }
/* Logo height comes from the admin (ข้อมูลเว็บไซต์ → ขนาดโลโก้): --logo-h desktop, --logo-h-m phones. */
.brand-logo { height: var(--logo-h, 42px); max-height: 120px; max-width: min(320px, 40vw); width: auto; object-fit: contain; object-position: left center; 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; }
/* Profile: withdrawal account with the bank's logo on its brand colour, plus the pending change request. */
.bank-card .bank-logo-img { width: 46px; height: 46px; flex: 0 0 auto; }
.bank-card-live { justify-content: flex-start; }
.bank-card-live > div { flex: 1; min-width: 0; }
.bank-card em { color: var(--muted); font-size: .62rem; font-style: normal; overflow-wrap: anywhere; }
.bank-card-live button { white-space: nowrap; }
.bank-pending { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 16px; border: 1px dashed rgba(241,189,96,.45); border-radius: 15px; background: rgba(241,189,96,.06); }
.bank-pending .bank-logo-img { width: 40px; height: 40px; flex: 0 0 auto; }
.bank-pending > div { flex: 1; min-width: 0; display: grid; }
.bank-pending small { color: #f1bd60; font-size: .6rem; font-weight: 700; }
.bank-pending strong { font-size: .78rem; }
.bank-pending em { color: var(--muted); font-size: .62rem; font-style: normal; overflow-wrap: anywhere; }
.bank-pending button { min-height: 36px; padding: 0 12px; border: 1px solid rgba(255,109,126,.35); border-radius: 10px; color: #ff9ba6; background: rgba(255,109,126,.08); cursor: pointer; font-size: .64rem; font-weight: 800; white-space: nowrap; }
@media (max-width: 430px) { .bank-card-live, .bank-pending { flex-wrap: wrap; } .bank-card-live button, .bank-pending button { width: 100%; } }
.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; }
/* Deposit / withdraw outcome: green when approved, red when rejected, neutral while pending. */
.history-list .history-status { font-weight: 800; }
.history-list .history-approved { border-color: rgba(83,223,166,.38); background: rgba(83,223,166,.06); }
.history-list .history-approved .history-icon { color: #06151d; background: #53dfa6; }
.history-list .history-approved .history-status { color: #59e3a7; }
.history-list .history-rejected { border-color: rgba(255,109,126,.38); background: rgba(255,109,126,.06); }
.history-list .history-rejected .history-icon { color: #1d0609; background: #ff6d7e; }
.history-list .history-rejected .history-status { color: #ff9ba6; }
.history-list .history-pending .history-status { color: #f1bd60; }
.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; }
.bank-logo-img { flex: 0 0 auto; border-radius: 12px; padding: 7px; object-fit: contain; }
.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; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 8px; color: #050505; background: rgba(0,0,0,.06); cursor: pointer; }.deposit-account-card > button:hover { background: rgba(0,0,0,.12); }.deposit-account-card > button svg { display: block; }.deposit-section-heading button { display: inline-flex; align-items: center; gap: 6px; }.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: "\2713"; 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: max(72px, calc(var(--logo-h-m, 42px) + 14px)); }.header-grid { grid-template-columns: auto 1fr; gap: 10px; }.brand-logo { height: var(--logo-h-m, 42px); max-height: 100px; max-width: 52vw; }.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: flex; 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 { flex: 1; min-width: 0; 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 { display: grid; place-items: center; border-radius: 50%; }
  /* Center dock button: raised 3D coin + label. Guest = "สมัครสมาชิก" (--dock-guest), member = "ฝาก - ถอน" (--dock-money).
     Base colour comes from admin Theme (--dock-money); highlight / shade / glow are mixed from it. */
  .mobile-dock .dock-play { gap: 0; overflow: visible; --dm: var(--dock-guest, #438eff); --dm-light: color-mix(in srgb, var(--dm) 60%, white); --dm-lighter: color-mix(in srgb, var(--dm) 25%, white); --dm-dark: color-mix(in srgb, var(--dm) 70%, black); --dm-shade: color-mix(in srgb, var(--dm) 55%, black); --dm-glow: color-mix(in srgb, var(--dm) 45%, transparent); }
  .mobile-dock .dock-play.dock-money { --dm: var(--dock-money, #f0a91f); }
  .mobile-dock .dock-play span { --s: var(--dock-money-size, 62); width: calc(var(--s) * 1px); height: calc(var(--s) * 1px); margin-top: calc(var(--s) * -0.55px); border: 4px solid #0b1424; font-size: calc(var(--s) * .0274rem); font-weight: 900; color: color-mix(in srgb, var(--dm) 30%, black); background: radial-gradient(circle at 32% 26%, var(--dm-lighter) 0, var(--dm-light) 30%, var(--dm) 62%, var(--dm-dark) 100%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dm-light) 50%, transparent), inset 0 3px 6px rgba(255,255,255,.65), inset 0 -6px 10px rgba(0,0,0,.35), 0 6px 0 var(--dm-shade), 0 12px 22px rgba(0,0,0,.6), 0 0 26px var(--dm-glow); text-shadow: 0 1px 0 rgba(255,255,255,.55); transition: transform .12s, box-shadow .12s; }
  .mobile-dock .dock-play span img { width: 64%; height: 64%; object-fit: contain; pointer-events: none; }
  .mobile-dock .dock-play:active span { transform: translateY(4px); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dm-light) 50%, transparent), inset 0 3px 6px rgba(255,255,255,.55), inset 0 -4px 8px rgba(0,0,0,.35), 0 2px 0 var(--dm-shade), 0 6px 14px rgba(0,0,0,.55), 0 0 20px var(--dm-glow); }
  .mobile-dock .dock-play b { margin-top: 3px; color: var(--dm-light); font-size: clamp(.54rem, calc(var(--dock-money-size, 62) * .01rem), .8rem); font-weight: 900; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
  .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}

/* Mobile member dashboard — opens as a modal from the dock "หน้าหลัก" */
.mhome-modal { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: flex-end; justify-content: center; padding: max(10px,env(safe-area-inset-top)) 0 0; }
.mhome-modal[hidden] { display: none; }
.mhome-modal .modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(4,7,14,.72); backdrop-filter: blur(4px); cursor: pointer; }
.mhome-modal-card { position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: calc(100dvh - 20px); overflow-y: auto; padding: 34px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; border: 1px solid var(--line); background: var(--bg); animation: mhomeUp .28s cubic-bezier(.2,.9,.3,1); }
@keyframes mhomeUp { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.mhome-modal .modal-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.04); font-size: 1.1rem; cursor: pointer; }
.mobile-home { display: grid; gap: 12px; }
.mhome-rank { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid rgba(241,189,96,.28); border-radius: 16px; background: linear-gradient(120deg, rgba(241,189,96,.12), rgba(157,120,255,.08)); }
.mhome-avatar { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 1.4rem; background: radial-gradient(circle at 30% 30%, #ffe9b8, #f1bd60 60%, #8d6420); color: #241503; }
/* Uploaded rank emblem replaces the coin: bigger, no disc behind it (emblems carry their own shape). */
.mhome-avatar.has-rank-image { width: 60px; height: 60px; border-radius: 0; background: none; }
.mhome-avatar img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.mhome-rank-body { flex: 1; min-width: 0; display: grid; gap: 5px; }
.mhome-rank-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mhome-rank-top strong { font-size: .86rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mhome-rank-badge { flex: none; padding: 3px 11px; border-radius: 999px; font-size: .64rem; font-weight: 800; color: #241503; background: var(--rank-color, #f1bd60); }
.mhome-rank-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.mhome-rank-bar i { display: block; height: 100%; border-radius: 999px; background: var(--rank-color, #f1bd60); transition: width .5s; }
.mhome-rank-body small { color: #a6afc3; font-size: .6rem; }
.mhome-wallet { display: grid; gap: 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.mhome-wallet-row { display: flex; align-items: center; gap: 10px; }
.mhome-play { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 12px; background: linear-gradient(135deg,#7fd7ff,#3d8bff); color: #041019; font-size: .8rem; font-weight: 900; cursor: pointer; }
.mhome-play span { font-size: .7rem; }
.mhome-play:active { transform: scale(.98); }
.mhome-balance { flex: 1; display: grid; gap: 1px; }
.mhome-balance small { color: #a6afc3; font-size: .62rem; }
.mhome-balance strong { font-size: 1.05rem; color: #fff; }
.mhome-wallet-actions { display: flex; gap: 8px; }
.mhome-wallet-actions button { min-height: 40px; padding: 0 15px; border: 0; border-radius: 11px; font-size: .74rem; font-weight: 800; color: #041019; cursor: pointer; }
.mhome-deposit { background: linear-gradient(145deg,#5be0a4,#37c680); }
.mhome-withdraw { background: linear-gradient(145deg,#ff7d9e,#e2445f); color: #fff; }
.mhome-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mhome-tile { display: grid; justify-items: center; gap: 6px; min-height: 82px; padding: 12px 4px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); color: var(--text); font-size: .64rem; font-weight: 700; cursor: pointer; }
.mhome-tile span { font-size: 1.5rem; line-height: 1; }
.mhome-tile:active { transform: scale(.96); }

/* Deposit / withdraw chooser (dock "ฝาก - ถอน") */
.member-modal[data-panel="money"] .member-modal-card { width: min(460px,100%); }
.money-choice-note { margin: -8px 0 18px; color: var(--muted); font-size: .74rem; }
.money-choice-note b { color: #fff; font-size: .9rem; }
.money-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Each button takes its base colour (--mc) from admin Theme; gradient / lip / glow are mixed from it. */
.money-choice button { display: grid; justify-items: center; gap: 6px; min-height: 150px; padding: 18px 10px 16px; border: 0; border-radius: 20px; color: #fff; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,.35); background: linear-gradient(160deg, color-mix(in srgb, var(--mc) 65%, white), var(--mc)); box-shadow: 0 6px 0 color-mix(in srgb, var(--mc) 55%, black), 0 12px 24px color-mix(in srgb, var(--mc) 35%, transparent); transition: transform .12s, box-shadow .12s; }
.money-choice button span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.28); font-size: 1.6rem; font-weight: 900; box-shadow: inset 0 2px 4px rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.18); }
.money-choice button strong { font-size: 1.05rem; font-weight: 900; }
.money-choice button small { font-size: .64rem; opacity: .9; }
.money-choice-deposit { --mc: var(--money-dep, #37c680); }
.money-choice-withdraw { --mc: var(--money-wd, #e2445f); }
.money-choice button:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--mc) 55%, black), 0 6px 14px rgba(0,0,0,.3); }
@media (max-width: 360px) { .money-choice { gap: 10px; } .money-choice button { min-height: 132px; padding: 14px 8px 12px; } .money-choice button span { width: 46px; height: 46px; font-size: 1.35rem; } .money-choice button strong { font-size: .95rem; } }

/* Panel head (wheel + gacha member panels) */
.panel-head{display:flex;align-items:center;gap:12px}
.panel-head-mark{display:grid;place-items:center;width:44px;height:44px;flex:0 0 auto;border:1px solid rgba(241,189,96,.34);border-radius:14px;background:linear-gradient(150deg,rgba(241,189,96,.24),rgba(241,189,96,.06))}
.panel-head > div{min-width:0;display:grid;gap:1px}
.panel-head .eyebrow{margin:0}
.panel-head h2{font-size:1.4rem;font-weight:800;letter-spacing:-.01em}

/* Gacha box + shop (member panels) */
.gacha-balance{display:flex;align-items:center;gap:12px;margin:16px 0 0;padding:14px 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))}
.gacha-balance small{color:#a6afc3;font-size:.62rem}
.gacha-balance-lead{min-width:0;display:grid;gap:1px;flex:1}
.gacha-balance-lead strong{color:var(--gold);font-size:1.4rem}
.gacha-balance-side{display:grid;gap:1px;justify-items:end;flex:0 0 auto}
.gacha-balance-side strong{color:#fff;font-family:"Manrope","Anuphan",sans-serif;font-size:.9rem}
.gacha-stage{position:relative;height:214px;margin:12px 0 4px;border:1px solid rgba(241,189,96,.26);border-radius:20px;overflow:hidden;background:radial-gradient(circle at 50% 62%,rgba(241,189,96,.18),transparent 62%),linear-gradient(180deg,#0d1425,#080d19)}
.gacha-ray{position:absolute;left:50%;top:-8%;width:168px;height:74%;transform:translateX(-50%);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(241,189,96,.22),transparent 82%)}
.gacha-floor{position:absolute;left:50%;bottom:30px;width:190px;height:26px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(241,189,96,.34),transparent 68%);filter:blur(3px)}
.gacha-sparks i{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffe9b8;box-shadow:0 0 10px rgba(241,189,96,.9);animation:gachaFloat 2.6s ease-in-out infinite}
@keyframes gachaFloat{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(-14px);opacity:.95}}
.gacha-art{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.gacha-art.shake{animation:gachaShake .11s linear 8}
@keyframes gachaShake{0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-52%,-51%) rotate(-5deg)}75%{transform:translate(-48%,-49%) rotate(5deg)}}
.gacha-lid{transform-origin:74px 50px;transition:transform .5s cubic-bezier(.2,1.3,.4,1)}
.gacha-art.open .gacha-lid{transform:rotate(-16deg) translateY(-26px)}
.gacha-reveal{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:4px;background:radial-gradient(circle at 50% 44%,rgba(241,189,96,.3),rgba(8,13,25,.9) 58%),#080d19;animation:gachaPop .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes gachaPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
.gacha-reveal small{color:#b1a58d;font-size:.66rem}
.gacha-reveal strong{color:#ffd98a;font-family:"Manrope","Anuphan",sans-serif;font-size:1.9rem;text-shadow:0 0 24px rgba(241,189,96,.6)}
.gacha-reveal em{font-style:normal;color:#8190aa;font-size:.62rem}
.gacha-prizes{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
.gacha-prizes span{padding:5px 11px;border:1px solid rgba(241,189,96,.24);border-radius:999px;font-family:"Manrope","Anuphan",sans-serif;font-size:.66rem;font-weight:700;color:#ffd98a;background:rgba(241,189,96,.07)}
.shop-list{display:grid;gap:8px;margin-top:8px}
.shop-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.shop-card strong{display:block;font-size:.8rem}.shop-card small{color:#8190aa;font-size:.66rem}
.shop-card .button{flex:none;min-height:38px;padding:0 16px}

/* Rank strip inside the member drawer */
.drawer-rank{display:grid;gap:5px;margin:12px 0;padding:11px 13px;border:1px solid rgba(241,189,96,.28);border-radius:14px;background:linear-gradient(120deg,rgba(241,189,96,.1),rgba(157,120,255,.06))}
.drawer-rank-top{display:flex;align-items:center;justify-content:space-between}
.drawer-rank-top small{color:#a6afc3;font-size:.64rem}
.drawer-rank-emblem{width:40px;height:40px;flex:none;margin-right:8px;object-fit:contain}
.drawer-rank-top .drawer-rank-emblem+small{margin-right:auto}
.drawer-rank-badge{padding:3px 11px;border-radius:999px;font-size:.64rem;font-weight:800;color:#241503;background:var(--rank-color,#f1bd60)}
.drawer-rank small{color:#a6afc3;font-size:.6rem}

/* Promotions (home section + member panel) */
.promo-section { padding: 0 0 34px; }
.promo-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.promo-head h2 { margin: 2px 0 0; font-size: 1.3rem; }
.promo-head small { color: var(--muted); font-size: .66rem; }
.promo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .promo-grid { grid-template-columns: 1fr; } }
.promo-card { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--theme-radius, 18px); background: linear-gradient(155deg, color-mix(in srgb, var(--panel) 92%, #1c2742), color-mix(in srgb, var(--panel) 96%, #070b14)); box-shadow: var(--shadow); }
.promo-card.claimed { opacity: .82; }
.promo-badge { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 999px; background: linear-gradient(135deg, #ff7d9e, #e2445f); color: #fff; font-size: .56rem; font-weight: 800; letter-spacing: .08em; }
.promo-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.06); font-size: 1.6rem; }
.promo-body h3 { margin: 0 0 4px; padding-right: 48px; font-size: .92rem; }
.promo-body p { margin: 0 0 8px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.promo-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.promo-meta b { color: #5be0a4; font-size: .95rem; }
.promo-meta small { color: #a6afc3; font-size: .62rem; }
.promo-card .promo-claim { grid-column: 1 / -1; min-height: 42px; }
.promo-claim:disabled { opacity: .55; cursor: default; filter: grayscale(.3); }
.promo-list { display: grid; gap: 10px; margin: 12px 0; }
.promo-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.promo-item .promo-icon { width: 44px; height: 44px; font-size: 1.3rem; }
.promo-item strong { display: block; font-size: .8rem; }
.promo-item small { display: block; color: var(--muted); font-size: .62rem; }
.promo-item .promo-badge { position: static; margin-left: 6px; vertical-align: middle; font-style: normal; }
.promo-item .promo-state { margin-top: 3px; color: #f1bd60; }
.promo-item-side { display: grid; justify-items: end; gap: 6px; }
.promo-item-side b { color: #5be0a4; font-size: .85rem; }
.promo-item-side .promo-claim { min-height: 34px; padding: 0 12px; font-size: .66rem; }
@media (max-width: 720px) { .promo-head { align-items: start; flex-direction: column; gap: 4px; } }

/* Deposit promotion picker */
.deposit-promo-pick { margin: 6px 0 12px; }
.promo-choice-list { display: grid; gap: 8px; }
.promo-choice { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; }
.promo-choice input { position: absolute; opacity: 0; pointer-events: none; }
.promo-choice.selected { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.promo-choice.disabled { opacity: .5; cursor: not-allowed; }
.promo-choice-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: 1.15rem; }
.promo-choice strong { display: block; font-size: .76rem; }
.promo-choice small { display: block; color: var(--muted); font-size: .6rem; line-height: 1.4; }
.notice-box.bonus-lock { border-color: rgba(241,189,96,.4); background: rgba(241,189,96,.08); }
.notice-box.bonus-lock b { color: #f1bd60; }
.promo-choice .promo-badge { position: static; margin-left: 6px; font-style: normal; vertical-align: middle; }

/* Wheel + point events — gold rim, lit pegs, SPIN button in the hub */
.wheel-shell { margin: 4px 0 0; }
.wheel-shell.has-bg { padding: 16px 14px 14px; border-radius: 18px; background-size: cover; background-position: center; }
.wheel-stage { position: relative; width: min(296px, 100%); margin: 20px auto 0; aspect-ratio: 1; }
.wheel-glow { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(241,189,96,.26), rgba(241,189,96,.05) 46%, transparent 72%); pointer-events: none; }
.wheel-pointer { position: absolute; left: 50%; top: -16px; z-index: 4; transform: translateX(-50%); filter: drop-shadow(0 5px 11px rgba(0,0,0,.7)); }
.wheel-rim { position: absolute; inset: 0; padding: 3.7%; border-radius: 50%; background: conic-gradient(from 200deg, #6b4715, #f7dfa5 12%, #c9962f 26%, #8a5f1f 40%, #f7dfa5 56%, #b98526 70%, #f2d69b 86%, #6b4715); box-shadow: 0 20px 48px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.16); }
.wheel { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; transform: rotate(0deg); box-shadow: inset 0 0 0 4px #0b1120; }
.wheel-sep { position: absolute; inset: 0; background: repeating-conic-gradient(rgba(9,14,28,.9) 0deg .8deg, transparent .8deg var(--wheel-seg, 45deg)); }
.wheel-label { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding-top: 5.7%; transform-origin: 50% 50%; }
.wheel-label b { display: inline-block; font-family: "Manrope", "Anuphan", sans-serif; font-size: .86rem; font-weight: 800; }
.wheel-label b.miss { font-family: "Anuphan", sans-serif; font-size: .66rem; font-weight: 700; }
.wheel-gloss { position: absolute; inset: 3.7%; border-radius: 50%; background: radial-gradient(circle at 50% 12%, rgba(255,255,255,.22), rgba(255,255,255,.04) 34%, transparent 58%); pointer-events: none; }
.wheel-pegs { position: absolute; inset: 3.7%; border-radius: 50%; pointer-events: none; }
.wheel-peg { position: absolute; inset: 0; }
.wheel-peg i { position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff8e4, #f1bd60 55%, #8a5f1f); box-shadow: 0 0 9px rgba(241,189,96,.8); }
/* The hub is the spin control; an optional centre logo (Settings → WheelLogoUrl) fills it. */
.wheel-hub { position: absolute; left: 50%; top: 50%; z-index: 3; width: 35%; height: 35%; min-width: 88px; min-height: 88px; padding: 0; display: grid; place-items: center; align-content: center; border: 0; border-radius: 50%; color: #2a1a04; cursor: pointer; transform: translate(-50%,-50%); background: radial-gradient(circle at 50% 26%, #fff8e4, #f3cd83 42%, #d9a445 72%, #a97a26); box-shadow: 0 0 0 6px #0b1120, 0 0 0 8px rgba(241,189,96,.5), 0 12px 28px rgba(0,0,0,.58), inset 0 2px 0 rgba(255,255,255,.65); transition: transform .18s, filter .18s; }
.wheel-hub:hover { transform: translate(-50%,-50%) scale(1.04); }
.wheel-hub:disabled { filter: grayscale(.4) brightness(.82); cursor: default; transform: translate(-50%,-50%); }
.wheel-hub > span { font-family: "Manrope", sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: .16em; text-indent: .16em; }
.wheel-hub small { font-size: .56rem; font-weight: 700; opacity: .68; }
.wheel-hub.has-logo { overflow: hidden; }
.wheel-hub.has-logo > span { width: 100%; height: 100%; text-indent: 0; }
.wheel-hub.has-logo small { display: none; }
.wheel-hub img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.wheel-result { display: flex; align-items: center; gap: 12px; margin: 20px 0 0; padding: 13px 15px; border: 1px solid rgba(241,189,96,.42); border-radius: 16px; background: linear-gradient(120deg, rgba(241,189,96,.18), rgba(157,120,255,.07)); }
.wheel-result > span { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; background: linear-gradient(145deg, #ffe9b8, #d79835); }
.wheel-result div { min-width: 0; display: grid; gap: 1px; flex: 1; }
.wheel-result small { color: #b1a58d; font-size: .62rem; }
.wheel-result strong { color: #ffd98a; font-family: "Manrope", "Anuphan", sans-serif; font-size: 1.1rem; }
.event-claim-list { display: grid; gap: 8px; margin: 6px 0 12px; }
.event-claim { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.event-claim strong { display: block; font-size: .76rem; }
.event-claim small { display: block; color: var(--muted); font-size: .6rem; }
.event-claim .button { min-height: 34px; padding: 0 12px; font-size: .66rem; white-space: nowrap; }
.event-claim .button:disabled { opacity: .55; }
.cash-wallet { margin: 10px 0 14px; padding: 14px; border: 1px solid rgba(91,224,164,.35); border-radius: 14px; background: rgba(91,224,164,.06); }
.cash-wallet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cash-wallet-head small { display: block; color: var(--muted); font-size: .62rem; }
.cash-wallet-head strong { font-size: 1.2rem; color: #5be0a4; }
.cash-wallet .button { margin-top: 8px; }
.otp-row { margin-top: 8px; }
.otp-send { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: linear-gradient(135deg, #7beaff, #438eff); color: #041019; font-size: .66rem; font-weight: 800; cursor: pointer; }
.otp-send:disabled { opacity: .6; cursor: default; }
.rank-card { margin: 8px 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.rank-banner { width: 100%; border-radius: 10px; margin-bottom: 10px; }
.rank-card-body { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; }
.rank-card-body strong { display: block; font-size: 1rem; }
.rank-card-body small { display: block; color: var(--muted); font-size: .62rem; margin: 2px 0 6px; }
.rank-image { width: 52px; height: 52px; object-fit: contain; }
.rank-emblem { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--rank-color, #f1bd60) 25%, transparent); color: var(--rank-color, #f1bd60); font-weight: 900; font-size: 1.3rem; }
.rank-tiers { display: flex; gap: 6px; overflow-x: auto; margin: 10px 0 8px; padding-bottom: 4px; }
.rank-tiers span { flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; min-width: 84px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 10px; font-size: .6rem; color: var(--muted); }
.rank-tiers span.current { border-color: var(--rank-color); }
.rank-tiers span b { color: var(--rank-color); font-size: .68rem; }
.rank-tiers span img { width: 28px; height: 28px; object-fit: contain; }
.gacha-box-list { display: flex; gap: 8px; overflow-x: auto; margin: 12px 0 0; padding-bottom: 4px; scrollbar-width: thin; }
.gacha-box-pick { flex: 1 0 88px; display: grid; justify-items: center; gap: 2px; min-width: 88px; padding: 11px 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); cursor: pointer; transition: transform .16s, border-color .16s, box-shadow .16s; }
.gacha-box-pick:hover { transform: translateY(-2px); }
.gacha-box-pick span { display: grid; place-items: center; height: 30px; margin-bottom: 2px; font-size: 1.4rem; line-height: 1; }
.gacha-box-pick strong { font-size: .72rem; }
.gacha-box-pick small { color: var(--muted); font-family: "Manrope", "Anuphan", sans-serif; font-size: .58rem; }
.gacha-box-pick.active { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }

/* Withdrawal confirmation page (manual admin approval / auto payout) */
.withdraw-steps{display:grid;gap:10px;margin:14px 0}
.withdraw-steps>div{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#8d98b0;font-size:.8rem}
.withdraw-steps>div i{width:28px;height:28px;display:grid;place-items:center;flex:none;border-radius:50%;background:rgba(255,255,255,.06);font-style:normal;font-weight:700;font-size:.72rem}
.withdraw-steps>div.active{color:#eaf0ff;border-color:rgba(98,221,255,.35);background:rgba(98,221,255,.06)}
.withdraw-steps>div.done{color:#8fe9c0;border-color:rgba(78,216,160,.3)}.withdraw-steps>div.done i{background:rgba(78,216,160,.18);color:#8fe9c0}
.withdraw-pending .button{margin-top:12px}

/* Lobby: category → provider cards → games */
.provider-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 3px 2px 8px; }
.provider-track[hidden] { display: none; }
.game-shelf.provider-mode .game-track, .game-shelf.provider-mode [data-scroll-track], .game-shelf.provider-mode [data-view-all] { display: none; }
.provider-card { display: grid; grid-template-rows: auto auto; padding: 0; overflow: hidden; text-align: left; border: 1px solid var(--line); border-radius: 16px; background: #101627; box-shadow: 0 12px 35px rgba(0,0,0,.2); cursor: pointer; transition: transform .22s, border-color .22s; }
.provider-card:hover { transform: translateY(-4px); border-color: rgba(105,230,255,.36); }
.provider-art { position: relative; display: grid; place-items: center; height: 96px; overflow: hidden; background: linear-gradient(135deg, rgba(105,230,255,.18), rgba(157,120,255,.18)); }
.provider-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: blur(1px) saturate(1.1); }
.provider-art b { position: relative; z-index: 1; min-width: 52px; height: 52px; display: grid; place-items: center; padding: 0 10px; border-radius: 14px; background: rgba(8,12,24,.82); box-shadow: inset 0 0 0 1px rgba(105,230,255,.45), 0 6px 18px rgba(0,0,0,.4); color: #aeecff; font: 800 1rem "Manrope", sans-serif; letter-spacing: .05em; }
.provider-info { display: grid; gap: 2px; padding: 10px 12px 12px; }
.provider-info strong { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.provider-info small { color: var(--gold); font-size: .64rem; }
@media (max-width: 640px) { .provider-track { grid-template-columns: repeat(3, 1fr); gap: 9px; } .provider-art { height: 74px; } .provider-art b { min-width: 42px; height: 42px; font-size: .85rem; } .provider-info { padding: 8px 9px 10px; } .provider-info strong { font-size: .7rem; } }
@media (max-width: 400px) { .provider-track { grid-template-columns: repeat(2, 1fr); } }
.provider-art-logo { background: #0b1020; padding: 10px; }
.provider-art-logo img { position: static; width: 100%; height: 100%; object-fit: contain; opacity: 1; filter: none; }
.provider-art-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; place-items: stretch; background: #0b1020; }
.provider-art-collage img { position: static; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: none; }
.provider-art-collage.covers-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.provider-art-collage.covers-2 { grid-template-rows: 1fr; }
.provider-art-collage.covers-3 img:first-child { grid-row: span 2; }

/* Image-only hero slides: the picture is the whole banner, shown uncropped — the slider takes the
   picture's aspect ratio (--hero-ratio, from the saved size or the loaded image) while one is active. */
.hero-slide-image { background: #08101f; }
.hero-slide-image .banner-image-link, .hero-slide-image .banner-image { position: absolute; inset: 0; display: block; margin: 0; padding: 0; }
.hero-slide-image img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.hero-slide-image .banner-image-link { cursor: pointer; -webkit-user-drag: none; }
.hero-slide-image picture { position: absolute; inset: 0; display: block; }
.hero-banner.is-image-slide { min-height: 0; aspect-ratio: var(--hero-ratio, 3 / 1); }
/* Separate phone picture (admin: รูปสำหรับมือถือ): text banners swap the background, image-only
   slides swap via <picture> and take the phone picture's shape (--hero-ratio-mobile). */
@media (max-width: 700px) {
  .banner-art { background-image: var(--banner-image-mobile, var(--banner-image, url('/images/hero-portal.png'))); }
  .hero-banner.is-image-slide { aspect-ratio: var(--hero-ratio-mobile, var(--hero-ratio, 3 / 1)); }
}

/* Theme background picture (Theme & Colors → รูปพื้นหลัง). Drawn on a fixed pseudo-element behind
   the page — position:fixed works on iOS where background-attachment:fixed does not — with the
   background colour laid over it at the chosen opacity (--bg-overlay) so copy stays readable. */
body.theme-bg-image { position: relative; z-index: 0; }
body.theme-bg-image::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--bg); background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)), var(--bg-image); background-repeat: no-repeat; background-position: center top; background-size: cover; }
body.theme-bg-top::before { background-size: 100% auto; }
body.theme-bg-tile::before { background-repeat: no-repeat, repeat; background-size: auto; }

/* Lobby tabs/category buttons: admin colour (--tab-accent / --accent) and optional picture icons. */
.lobby-tab { --tab-accent: var(--cyan); }
.lobby-tab > span { border-color: color-mix(in srgb, var(--tab-accent) 22%, transparent); color: var(--tab-accent); background: color-mix(in srgb, var(--tab-accent) 8%, transparent); }
.lobby-tab:hover, .lobby-tab.active { border-color: color-mix(in srgb, var(--tab-accent) 40%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--tab-accent) 13%, transparent), color-mix(in srgb, var(--tab-accent) 5%, transparent)); }
.lobby-tab.active { box-shadow: inset 0 -2px var(--tab-accent); }
.lobby-tab > span img, .category-button span img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lobby-tab > span img { padding: 6px; }
.category-button span:has(img) { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; }
@media (max-width: 640px) { .lobby-tab > span img { padding: 4px; } .category-button span:has(img) { width: 22px; height: 22px; } }

/* Promotion card picture (admin upload) spans the top of the card. */
.promo-card.has-image { grid-template-columns: 180px 1fr; }
@media (max-width: 640px) { .promo-card.has-image { grid-template-columns: 132px 1fr; } }
.promo-image { grid-column: 1; grid-row: 1 / 3; align-self: start; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 12px; }
.promo-card.has-image .promo-icon { display: none; }
.promo-card.has-image .promo-body { grid-column: 2; }
.promo-card.has-image .promo-claim { grid-column: 2; }
@media (max-width: 430px) { .promo-card.has-image { grid-template-columns: 104px 1fr; } }
.promo-item .promo-icon img, .promo-choice-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.promo-item .promo-icon:has(img), .promo-choice-icon:has(img) { overflow: hidden; padding: 0; }

/* Provider cards as tall posters: the uploaded picture fills a 3:4 card with a gold frame, name below. */
.provider-track[data-style="poster"] { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.provider-track[data-style="poster"] .provider-card { border: 1px solid rgba(241,189,96,.55); border-radius: 10px; background: #0b1020; box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), inset 0 0 0 2px rgba(241,189,96,.18), 0 10px 26px rgba(0,0,0,.4); }
.provider-track[data-style="poster"] .provider-card:hover { border-color: rgba(241,189,96,.95); box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), inset 0 0 0 2px rgba(241,189,96,.35), 0 0 18px rgba(241,189,96,.25), 0 14px 30px rgba(0,0,0,.45); }
.provider-track[data-style="poster"] .provider-art { height: auto; aspect-ratio: 3 / 4; border-bottom: 1px solid rgba(241,189,96,.35); }
.provider-track[data-style="poster"] .provider-art-logo { padding: 0; }
.provider-track[data-style="poster"] .provider-art-logo img { object-fit: cover; }
.provider-track[data-style="poster"] .provider-art b { min-width: 44px; height: 44px; font-size: .8rem; }
.provider-track[data-style="poster"] .provider-info { padding: 5px 6px 7px; gap: 0; text-align: center; }
.provider-track[data-style="poster"] .provider-info strong { font-size: .62rem; color: #f3e6c7; }
.provider-track[data-style="poster"] .provider-info small { display: none; }
@media (max-width: 640px) { .provider-track[data-style="poster"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .provider-track[data-style="poster"] .provider-art { height: auto; } }
@media (max-width: 400px) { .provider-track[data-style="poster"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Provider cards per row — admin choice (Theme › ค่ายเกม); 0/absent = auto-fill. */
.provider-track[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.provider-track[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.provider-track[data-columns="1"] { grid-template-columns: 1fr; }
.provider-track[data-columns="2"] .provider-art { height: 130px; }
.provider-track[data-columns="1"] .provider-card { grid-template-columns: 150px 1fr; grid-template-rows: none; align-items: center; }
.provider-track[data-columns="1"] .provider-art { height: 84px; }
.provider-track[data-columns="1"] .provider-info { padding: 10px 14px; }
.provider-track[data-columns="1"] .provider-info strong { font-size: .88rem; white-space: normal; }
@media (max-width: 640px) {
  .provider-track[data-columns="4"] .provider-art { height: 62px; }
  .provider-track[data-columns="4"] .provider-info { padding: 6px 6px 8px; }
  .provider-track[data-columns="4"] .provider-info strong { font-size: .6rem; }
  .provider-track[data-columns="4"] .provider-info small { font-size: .55rem; }
  .provider-track[data-columns="2"] .provider-art { height: 104px; }
  .provider-track[data-columns="1"] .provider-card { grid-template-columns: 120px 1fr; }
  .provider-track[data-columns="1"] .provider-art { height: 72px; }
}
.provider-track[data-style="poster"][data-columns="2"] .provider-art, .provider-track[data-style="poster"][data-columns="4"] .provider-art { height: auto; }
.provider-track[data-style="poster"][data-columns="1"] .provider-art { aspect-ratio: auto; height: 150px; }
/* 1 column, upright ("card"): full-width normal card; art = uploaded picture or the first game's cover. */
.provider-track[data-columns="1"][data-single="card"] { max-width: 440px; margin-inline: auto; }
.provider-track[data-columns="1"][data-single="card"] .provider-card { grid-template-columns: none; grid-template-rows: auto auto; align-items: stretch; }
.provider-track[data-columns="1"][data-single="card"] .provider-art { height: 400px; aspect-ratio: auto; }
.provider-track[data-columns="1"][data-single="card"] .provider-art-collage img { object-position: center 25%; }
.provider-track[data-columns="1"][data-single="card"] .provider-info { padding: 12px 16px 14px; text-align: left; }
.provider-track[data-columns="1"][data-single="card"] .provider-info strong { font-size: .95rem; white-space: normal; }
.provider-track[data-style="poster"][data-columns="1"][data-single="card"] .provider-art { height: 520px; }
.provider-track[data-style="poster"][data-columns="1"][data-single="card"] .provider-info { text-align: center; }
@media (max-width: 640px) {
  .provider-track[data-columns="1"][data-single="card"] { max-width: none; }
  .provider-track[data-columns="1"][data-single="card"] .provider-art { height: 280px; }
  .provider-track[data-style="poster"][data-columns="1"][data-single="card"] .provider-art { height: 420px; }
}

/* News popup (admin → ข่าวสาร): shown right after login. Body text keeps the admin's line breaks. */
.news-modal { position: fixed; z-index: 2150; inset: 0; display: grid; place-items: center; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.news-modal[hidden] { display: none; }
.news-modal .modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(2, 4, 10, .72); backdrop-filter: blur(6px); cursor: pointer; }
.news-modal-card { position: relative; z-index: 1; width: min(560px, 100%); max-height: calc(100dvh - 28px); display: grid; grid-template-rows: auto 1fr auto auto; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: linear-gradient(165deg, #1a2030, #0a0f1a); box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; animation: news-in .25s ease; }
@keyframes news-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.news-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.news-modal-head h2 { margin: 0; font-size: 1.05rem; }
.news-modal-x { width: 34px; height: 34px; border: 0; border-radius: 10px; color: #fff; background: rgba(255,255,255,.08); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.news-modal-track { position: relative; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 16px 18px 6px; }
.news-slide { display: none; text-align: center; }
.news-slide.active { display: block; }
.news-picture { display: block; margin: 0 auto 14px; border-radius: 14px; overflow: hidden; background: #060a13; }
.news-picture img { display: block; width: 100%; max-height: min(62vh, 560px); object-fit: contain; }
a.news-picture { cursor: pointer; }
.news-slide h3 { margin: 0 0 8px; font-size: 1rem; }
.news-slide p { margin: 0; color: #d6dcec; font-size: .86rem; line-height: 1.65; white-space: pre-line; }
.news-dots { display: flex; justify-content: center; gap: 8px; padding: 10px 0 2px; }
.news-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.22); cursor: pointer; }
.news-dots button.active { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.news-modal-actions { display: flex; justify-content: center; gap: 10px; padding: 12px 18px 18px; }
.news-modal-actions .button { min-width: 120px; justify-content: center; }
.news-btn-never { border: 1px solid rgba(255,255,255,.16); color: #cfd6e6; background: rgba(255,255,255,.06); }
@media (max-width: 640px) { .news-modal-card { width: 100%; border-radius: 18px; } .news-modal-track { padding: 12px 12px 4px; } .news-modal-actions { padding: 10px 12px 14px; } .news-modal-actions .button { flex: 1; min-width: 0; } }

/* Member modal: the card scrolls, so clip it to its own rounded shape — otherwise the scrollbar
   pokes out past the rounded corners. Radii mirror the border-radius rules above. */
.member-modal-card { clip-path: inset(0 round 24px); }
.member-modal[data-panel="deposit-detail"] .member-modal-card { clip-path: inset(0 round 23px); }
@media (max-width: 700px) { .member-modal-card { clip-path: inset(0 round 20px); } }
@media (max-width: 430px) { .member-modal[data-panel="deposit-detail"] .member-modal-card { clip-path: inset(0 round 18px); } }

/* =====================================================================================
   Per-section font colour / size (admin Theme › สีและขนาดตัวอักษรตามส่วน).
   --fc-<k> = primary text, --fc-<k>-m = secondary text (unset = the defaults written as fallbacks);
   --fs-<k> = size factor applied with `zoom` on the text elements (1 = unchanged), which scales
   every breakpoint's font-size without restating them.
   ===================================================================================== */
/* header */
.brand-copy strong, .member-identity strong, .wallet-chip strong, .utility-nav span, .button-ghost { color: var(--fc-hdr, var(--text)); }
.member-identity, .wallet-chip { color: var(--fc-hdr, white); }
.brand-copy small { color: var(--fc-hdr-m, var(--cyan)); }
.member-identity small, .wallet-chip small, .utility-nav a, .utility-nav button { color: var(--fc-hdr-m, var(--muted)); }
.brand-copy strong, .brand-copy small, .member-identity strong, .member-identity small, .wallet-chip strong, .wallet-chip small, .utility-nav a, .utility-nav button, .button-ghost, .header-actions .button-primary { zoom: var(--fs-hdr, 1); }
/* announcement bar */
.announcement strong { color: var(--fc-ann, var(--gold)); }
.marquee { color: var(--fc-ann-m, #a6afc3); }
.announcement strong, .marquee { zoom: var(--fs-ann, 1); }
/* hero banner */
.banner-copy h1, .banner-status strong { color: var(--fc-ban, var(--text)); }
.banner-copy p { color: var(--fc-ban-m, #a5afc5); }
.banner-status small { color: var(--fc-ban-m, var(--muted)); }
.banner-copy > span, .banner-copy h1, .banner-copy p { zoom: var(--fs-ban, 1); }
/* section headings */
.promo-head h2, .shelf-head h2 { color: var(--fc-hd, var(--text)); }
.promo-head small, .shelf-head p { color: var(--fc-hd-m, var(--muted)); }
.promo-head .eyebrow, .shelf-head .eyebrow, main > .eyebrow, .page-head .eyebrow { color: var(--fc-hd-m, var(--cyan)); }
.promo-head .eyebrow, .promo-head h2, .promo-head small, .shelf-head .eyebrow, .shelf-head h2, .shelf-head p { zoom: var(--fs-hd, 1); }
/* lobby: tabs, categories, search */
.lobby-tab strong, .category-button strong, .lobby-search input { color: var(--fc-lob, var(--text)); }
.lobby-tab small, .shelf-controls button { color: var(--fc-lob-m, var(--muted)); }
.lobby-search input::placeholder { color: var(--fc-lob-m, rgba(245,247,255,.4)); }
.lobby-tab strong, .lobby-tab small, .category-button strong { zoom: calc(var(--fs-lob, 1) * var(--btn-scale, 1)); }
.lobby-search input { zoom: var(--fs-lob, 1); }
/* game / provider cards */
.game-info strong, .provider-info strong { color: var(--fc-card, var(--text)); }
.provider-track[data-style="poster"] .provider-info strong { color: var(--fc-card, #f3e6c7); }
.game-info small { color: var(--fc-card-m, var(--muted)); }
.provider-info small { color: var(--fc-card-m, var(--gold)); }
.game-info strong, .game-info small, .provider-info strong, .provider-info small { zoom: var(--fs-card, 1); }
/* promotion cards */
.promo-body h3 { color: var(--fc-promo, var(--text)); }
.promo-meta b { color: var(--fc-promo, #5be0a4); }
.promo-body p { color: var(--fc-promo-m, var(--muted)); }
.promo-meta small { color: var(--fc-promo-m, #a6afc3); }
.promo-body h3, .promo-body p, .promo-meta b, .promo-meta small { zoom: var(--fs-promo, 1); }
/* footer */
.footer-intro strong, .license-section h2, .footer-tags span { color: var(--fc-foot, white); }
.footer-section h2 { color: var(--fc-foot, var(--gold)); }
.footer-intro p { color: var(--fc-foot-m, #d5d9e4); }
.copyright { color: var(--fc-foot-m, #596276); }
.footer-intro p, .footer-section h2, .footer-tags span, .copyright { zoom: var(--fs-foot, 1); }
/* mobile dock (only exists below 700px) */
@media (max-width: 700px) {
  .mobile-dock a, .mobile-dock button { color: var(--fc-dock, var(--muted)); }
  .mobile-dock span { color: var(--fc-dock-m, #c5cee0); }
  .mobile-dock .dock-play b { color: var(--fc-dock, var(--dm-light)); }
  .mobile-dock a, .mobile-dock button:not(.dock-play), .mobile-dock .dock-play b { zoom: var(--fs-dock, 1); }
}
/* member modals, drawer and mobile dashboard */
.member-modal-card h2, .modal-card h2, .stat-grid strong, .history-list strong, .drawer-head strong, .balance-row strong { color: var(--fc-mod, var(--text)); }
.history-empty strong { color: var(--fc-mod, white); }
.member-nav a, .member-nav button { color: var(--fc-mod, #c2cada); }
.mhome-balance strong, .mhome-rank-top strong { color: var(--fc-mod, #fff); }
.mhome-tile { color: var(--fc-tile, var(--text)); font-size: calc(.64rem * var(--fs-tile, 1)); }
.mhome-tile span { color: var(--fc-tile-m, inherit); }
.panel-lead, .setting-note, .stat-grid small, .history-list small, .history-list time, .history-empty, .drawer-head small, .balance-row span, .modal-description, .money-choice-note, .panel-tabs button { color: var(--fc-mod-m, var(--muted)); }
.member-form label { color: var(--fc-mod-m, #c1cadb); }
.mhome-balance small, .mhome-rank-body small { color: var(--fc-mod-m, #a6afc3); }
.member-modal-card h2, .modal-card h2, .panel-lead, .modal-description, .setting-note, .stat-grid small, .stat-grid strong, .history-list strong, .history-list small, .history-list time, .member-form label, .member-nav a, .member-nav button, .balance-row span, .balance-row strong, .drawer-head small, .drawer-head strong, .mhome-balance small, .mhome-balance strong { zoom: var(--fs-mod, 1); }

/* Home promotions: launch button + popup (the promo cards moved off the page into this dialog) */
.promo-launch { padding: 0 0 26px; }
.promo-launch-btn { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid rgba(241,189,96,.35); border-radius: var(--theme-radius, 18px); color: var(--text); background: linear-gradient(120deg, rgba(241,189,96,.16), rgba(157,120,255,.12) 60%, rgba(255,255,255,.03)); box-shadow: 0 10px 30px rgba(0,0,0,.25); cursor: pointer; text-align: left; transition: transform .15s, border-color .15s; }
.promo-launch-btn:hover { transform: translateY(-2px); border-color: rgba(241,189,96,.6); }
.promo-launch-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: rgba(241,189,96,.18); font-size: 1.5rem; flex: 0 0 auto; }
.promo-launch-text { display: grid; gap: 2px; min-width: 0; }
.promo-launch-text strong { font-size: 1.05rem; color: var(--fc-hd, var(--text)); }
.promo-launch-text small { color: var(--fc-hd-m, var(--muted)); font-size: .68rem; }
.promo-launch-arrow { margin-left: auto; color: var(--gold); font-size: 1.6rem; line-height: 1; }
.promo-popup { position: fixed; z-index: 2050; inset: 0; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)); background: rgba(3,6,14,.72); backdrop-filter: blur(6px); }
.promo-popup-card { position: relative; width: min(960px, 100%); max-height: calc(100dvh - 32px); padding: 26px 24px 24px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: linear-gradient(155deg, #171d2c, #090e18); box-shadow: var(--shadow); clip-path: inset(0 round 22px); }
.promo-popup-card .promo-head { padding-right: 44px; }
.promo-popup-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.04); font-size: 1.2rem; cursor: pointer; }
@media (max-width: 700px) {
  .promo-launch-btn { padding: 12px 14px; gap: 10px; }
  .promo-launch-icon { width: 40px; height: 40px; font-size: 1.25rem; }
  .promo-launch-text strong { font-size: .95rem; }
  .promo-launch-text small { font-size: .6rem; }
  .promo-popup-card { padding: 20px 14px 18px; border-radius: 18px; clip-path: inset(0 round 18px); }
  .promo-popup-card .promo-grid { grid-template-columns: 1fr; }
}

/* Lotto / 918Kiss / Pussy888 — lobby entry buttons (look from EntryButtonLook) + kiosk member panel (app login, credit in/out) */
.kiosk-entry-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0 0 14px; }
/* Look is set per game in the admin kiosk card: --kiosk-accent / --kiosk-title / --kiosk-sub colours,
   --kiosk-fs text scale, --kiosk-logo icon scale. */
.kiosk-entry { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--kiosk-accent, #69e6ff) 35%, transparent); border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--kiosk-accent, #69e6ff) 12%, transparent), rgba(255,255,255,.02)); color: inherit; text-decoration: none; text-align: left; cursor: pointer; font-size: calc(1em * var(--kiosk-fs, 1)); }
.kiosk-entry-icon { flex: none; width: calc(40px * var(--kiosk-logo, 1)); height: calc(40px * var(--kiosk-logo, 1)); display: grid; place-items: center; font-size: calc(1.6rem * var(--kiosk-logo, 1)); line-height: 1; }
.kiosk-entry-icon img, .kiosk-tile-icon img, .kiosk-panel-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kiosk-entry-text { display: grid; min-width: 0; }
.kiosk-entry-text strong { color: var(--kiosk-title, inherit); overflow-wrap: break-word; }
.kiosk-entry-text small { color: var(--kiosk-sub, #8390aa); overflow-wrap: break-word; }
.kiosk-entry b { flex: none; margin-left: auto; white-space: nowrap; color: var(--kiosk-accent, #69e6ff); }
.mhome-tile.kiosk-tile { border-color: color-mix(in srgb, var(--kiosk-accent, #69e6ff) 35%, var(--line)); color: var(--kiosk-title, var(--fc-tile, var(--text))); font-size: calc(.64rem * var(--fs-tile, 1) * var(--kiosk-fs, 1)); }
.mhome-tile .kiosk-tile-icon { width: calc(1.5rem * var(--kiosk-logo, 1)); height: calc(1.5rem * var(--kiosk-logo, 1)); display: grid; place-items: center; font-size: calc(1.5rem * var(--kiosk-logo, 1)); }
.kiosk-panel-logo { width: 34px; height: 34px; display: inline-grid; place-items: center; vertical-align: middle; margin-right: 6px; font-size: 1.5rem; }
.kiosk-cred { display: grid; gap: 8px; margin: 12px 0; }
.kiosk-cred-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 11px; border: 1px dashed rgba(105,230,255,.3); border-radius: 11px; background: rgba(105,230,255,.04); }
.kiosk-cred-row small { color: #a6afc3; font-size: .68rem; }
.kiosk-cred-row code { min-width: 0; overflow-wrap: anywhere; color: #dffaff; font-size: .9rem; font-weight: 700; letter-spacing: .02em; }
.kiosk-cred-row 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; cursor: pointer; }
.kiosk-balances { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kiosk-balances .points-balance-card { margin: 0 0 12px; min-width: 0; }
.kiosk-balances .points-balance-card strong { font-size: 1.2rem; overflow-wrap: anywhere; }
.kiosk-secondary { margin-top: 8px; }
.kiosk-links { display: flex; flex-wrap: wrap; gap: 8px; }
.kiosk-link { flex: 1 1 120px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.04); color: #dffaff; font-size: .72rem; font-weight: 700; text-align: center; text-decoration: none; }
.kiosk-text-btn { padding: 0; border: 0; background: none; color: #69e6ff; font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 430px) {
  .kiosk-entry-row { grid-template-columns: 1fr; }
  .kiosk-cred-row { grid-template-columns: minmax(0, 1fr) auto; }
  .kiosk-cred-row small { grid-column: 1 / -1; }
  .kiosk-balances .points-balance-card { padding: 12px; }
}
/* Promotion text keeps the line breaks typed in the admin editor. */
.promo-body p, .promo-item small:not(.promo-state) { white-space: pre-line; }
/* Kiosk panel: the "เข้าเกม" link styled as the gold action button under the credit transfer. */
.kiosk-play { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; border-color: rgba(241,189,96,.45); background: rgba(241,189,96,.14); color: #f5cf8d; }
.kiosk-play:hover { background: rgba(241,189,96,.22); }
/* Rejection reason under a rejected deposit/withdrawal in the member's history. */
.history-note { display: block; margin-top: 2px; color: #ff9ba6; font-size: .62rem; line-height: 1.35; white-space: normal; }