@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* Shared public-page presentation, based on new.php. Game surfaces are deliberately unscoped. */
:root { --site-bg:#17191e; --site-card:#25292f; --site-input:#1c2026; --site-border:rgba(255,255,255,.1); --site-text:#f3f4f6; --site-muted:#aeb0b8; --site-accent:#ffa326; }
html.site-document { margin:0; min-height:100%; background:var(--site-bg); }
html, body, button, input, select, textarea { font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body.site-theme { margin:0; min-height:100dvh; background:var(--site-bg); color:var(--site-text); color-scheme:dark; }
body.site-game { font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body.site-theme :where(button,input,select,textarea), body.site-game :where(button,input,select,textarea) { font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body.site-theme main, body.site-game :where(.font-sans) { font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body.site-game :where(.chat-overlay,.bet-history-panel,.co-popup,.menu-dropdown,.c-modal-content) { font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.site-header, .site-bottom-nav { box-sizing:border-box; width:100%; max-width:430px; color:#aeb0b8; background:rgba(20,24,36,.97); border-color:#252a3b; font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.site-header { position:sticky; top:0; z-index:50; margin:0 auto; padding:10px 12px; border-bottom:1px solid #252a3b; display:flex; align-items:center; justify-content:space-between; gap:8px; backdrop-filter:blur(12px); }
.site-header a, .site-bottom-nav a { text-decoration:none; }
.site-brand { font-size:20px; font-weight:900; font-style:italic; letter-spacing:1px; color:#ff3b30; flex-shrink:0; }
.site-header-controls { display:flex; align-items:center; gap:6px; min-width:0; }
.site-header-wallet { display:flex; align-items:center; gap:5px; min-width:0; border:1px solid #2d354a; border-radius:999px; background:#1c2233; padding:7px 9px; font-size:10px; color:#aeb0b8; }
.site-header-wallet strong { color:#ffbd63; font-size:12px; max-width:95px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-wallet-plus { border-radius:50%; background:linear-gradient(45deg,#b66b0c,#ffb83d); color:#17191e; font-weight:900; width:18px; height:18px; display:grid; place-items:center; }
.site-icon-link { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; background:#1c2233; border:1px solid #2d354a; border-radius:50%; font-size:12px; color:#d1d5db; cursor:pointer; }
.site-menu { position:relative; }
.site-menu summary { list-style:none; }
.site-menu summary::-webkit-details-marker { display:none; }
.site-menu-panel { position:absolute; right:0; top:40px; width:240px; max-width:calc(100vw - 24px); border:1px solid var(--site-border); border-radius:12px; padding:8px; background:#25292f; box-shadow:0 12px 30px #0006; }
.site-menu-panel a { display:flex; align-items:center; gap:10px; padding:12px; color:#f3f4f6; font-size:13px; border-radius:8px; }
.site-menu-panel a:hover { background:#34383f; }
.site-menu-panel a span { margin-left:auto; color:#ffa326; }
.site-menu-panel p { padding:8px; font-size:11px; line-height:1.6; }
.site-bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); z-index:90; display:flex; align-items:flex-end; justify-content:space-around; padding:8px 6px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid #252a3b; backdrop-filter:blur(12px); }
.site-nav-link { display:flex; align-items:center; flex-direction:column; justify-content:center; gap:4px; min-width:48px; min-height:44px; color:#9ca3af; font-size:10px; font-weight:700; }
.site-nav-icon { font-size:16px; line-height:20px; }
.site-nav-link[aria-current="page"] { color:#ffb550; }
.site-nav-wallet .site-nav-icon { width:48px; height:48px; margin-top:-24px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(45deg,#b86c0b,#f6a31b,#ffd576); color:#211506; box-shadow:0 4px 18px #f59e0b33; font-size:20px; }
.site-theme main { box-sizing:border-box; width:100%; min-width:0; max-width:430px; margin-left:auto; margin-right:auto; min-height:calc(100dvh - 56px); background:var(--site-bg); color:var(--site-text); padding:12px 10px calc(108px + env(safe-area-inset-bottom)); box-shadow:none; }
.site-theme main :where(.flex,.grid) > * { min-width:0; }
.site-theme main :where(p,h1,h2,h3,h4) { overflow-wrap:anywhere; }
.site-theme :where(.rounded-xl,.rounded-2xl,.rounded-3xl) { border-radius:12px; }
.site-theme :where(.shadow-sm,.shadow-lg,.shadow-xl,.shadow-2xl) { box-shadow:0 2px 8px #0002; }
.site-theme :where(input,select,textarea) { min-width:0; max-width:100%; color:var(--site-text); accent-color:var(--site-accent); }
.site-theme :where(input,textarea)::placeholder { color:#90939d; opacity:1; }
.site-theme :where(input,select,textarea):focus { outline:2px solid #f6a52b; outline-offset:2px; }
.site-theme :where(a,button,summary):focus-visible { outline:2px solid #f6a52b; outline-offset:3px; }
.site-theme button:disabled { cursor:not-allowed; }
.site-theme :where(button,a)[class*="py-3"], .site-theme :where(button,a)[class*="py-4"] { min-height:44px; }
.site-theme :where(.border,.border-b,.border-t,.border-2) { border-color:var(--site-border); }
.site-theme main > section:first-child h1 { font-size:24px; line-height:1.2; font-style:normal; }
.site-theme main > section:first-child .h-20 { width:56px; height:56px; flex-shrink:0; }
.site-theme main > section:first-child .text-4xl { font-size:28px; }
.site-theme main > section:first-child .tracking-widest { letter-spacing:.08em; }
.site-theme .fixed.inset-0 { overflow-y:auto; overscroll-behavior:contain; }
.site-theme .fixed.inset-0 > :not(.sticky) { max-height:calc(100dvh - 40px); overflow-y:auto; }
.site-theme #allModal { max-height:100dvh; background:var(--site-bg); color:var(--site-text); }
.site-theme #allModal > * { width:100%; max-width:430px; margin:auto; }
.site-theme #allModal #allGrid { max-height:none; overflow:visible; min-height:calc(100dvh - 64px); }
.site-theme #toast { width:max-content; max-width:calc(100vw - 32px); text-align:center; }
.site-theme #toastBox { z-index:120; }
.site-theme .overflow-x-auto { overscroll-behavior-x:contain; }
.site-theme table { width:100%; }
.site-theme th, .site-theme td { padding:10px; border-color:var(--site-border); }
.site-theme .auth-main { align-items:flex-start; padding-top:24px; }
.site-theme .auth-main > section > div:first-child > img { max-height:64px; padding:10px; }
/* Home-only layout, preserving the original game's handlers and dynamic values. */
.home-welcome { margin-bottom:12px; }
.home-welcome > section { padding:12px; border:1px solid #f4a32d33; }
.home-welcome .h-24 { width:44px; height:44px; flex-shrink:0; }
.home-welcome .text-5xl { font-size:24px; }
.home-welcome h2 { font-size:16px; line-height:1.3; }
.home-welcome p { font-size:11px; }
.home-welcome a { font-size:11px; padding:8px 12px; border-radius:8px; }
.home-welcome .mt-4 { margin-top:10px; }
.home-categories { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; margin:0 0 16px; }
.home-categories::-webkit-scrollbar { display:none; }
.home-categories button { flex-shrink:0; padding:8px 10px; border-radius:999px; background:#292c33; border:1px solid #ffffff1a; color:#babdc5; font-size:10px; font-weight:700; }
.home-categories button:first-child { background:#f5a12c26; border-color:#f5a12c66; color:#ffb550; }
.home-game-section { margin-top:20px; scroll-margin-top:72px; }
.home-section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; min-height:24px; }
.home-section-heading h2 { border-left:3px solid #f3a12a; padding-left:6px; font-size:12px; font-weight:800; }
.home-section-heading h2 i { color:#f9a834; margin-right:4px; }
.home-section-heading button { border-radius:999px; padding:5px 10px; background:#2b2e35; border:1px solid #ffffff0f; color:#c4c5ca; font-size:10px; font-weight:700; }
.home-section-heading > span { font-size:10px; color:#a8aab0; }
.home-game-card { min-width:0; display:block; overflow:hidden; border-radius:10px; border:1px solid #ffffff1a; background:#252931; text-align:left; box-shadow:0 1px 3px #0003; }
.home-game-card:hover { border-color:#f5a12cb3; }
.home-game-card:active { transform:scale(.98); }
.home-game-card img { display:block; aspect-ratio:3/3.55; width:100%; object-fit:cover; background:#34383f; }
.site-home #depositSec { margin-top:20px; }
.home-promotions { margin-top:20px; }
.home-promotions h2 { font-size:18px; }
.home-promotions .text-6xl { font-size:36px; }
@media (max-width:359px) {
 .site-header { padding-left:10px; padding-right:10px; gap:4px; }
 .site-brand { font-size:18px; }
 .site-header-controls { gap:4px; }
 .site-header-wallet { padding:6px; }
 .site-header-wallet strong { max-width:72px; }
 .site-theme main .grid-cols-4 { gap:5px; }
 .site-theme main .grid-cols-4 > :where(a,button) { padding-left:5px; padding-right:5px; }
}
@media (prefers-reduced-motion:reduce) {
 .site-header *, .site-bottom-nav *, .home-game-card { transition:none; }
}

/* Compatibility palette: existing PHP/JS class names remain unchanged, including state classes. */
.site-theme :is([class~="bg-white"],[class~="bg-gray-50"],[class~="bg-gray-100"],[class~="bg-[#e9fff6]"],[class~="bg-[#eafff6]"],[class~="bg-[#eef5ff]"],[class~="bg-[#f1fff8]"],[class~="bg-[#f3e8ff]"],[class~="bg-[#e8f8ff]"],[class~="bg-[#eaffe8]"]) { background-color:#25292f; }
.site-theme :is([class~="bg-[#f6fffb]"],[class~="bg-[#06140f]"],[class~="bg-[#071f16]"]) { background-color:#1c2026; }
.site-theme :is([class~="bg-[#fff8dc]"],[class~="bg-[#d4af37]/20"]) { background-color:#3b3022; }
.site-theme :is([class~="bg-red-50"],[class~="bg-[#ffecec]"]) { background-color:#3a252b; }
.site-theme :is([class~="text-[#102015]"],[class~="text-[#06140f]"],[class~="text-[#06401e]"],[class~="text-gray-800"],[class~="text-gray-900"]) { color:#f3f4f6; }
.site-theme :is([class~="text-gray-400"],[class~="text-gray-500"],[class~="text-gray-600"],[class~="text-gray-700"]) { color:#aeb0b8; }
.site-theme :is([class~="text-[#0e9f5b]"],[class~="text-[#13c878]"],[class~="text-[#20c463]"]) { color:#56d5a7; }
.site-theme :is([class~="text-[#d4af37]"],[class~="text-[#b8860b]"],[class~="text-[#ffd84d]"]) { color:#ffbd63; }
.site-theme :is([class~="text-[#2563eb]"],[class~="text-[#28bfff]"]) { color:#8bbdff; }
.site-theme :is([class~="text-[#9333ea]"]) { color:#c6a4f4; }
.site-theme :is([class~="text-red-500"],[class~="text-red-600"],[class~="text-[#ef4444]"]) { color:#ff929e; }
.site-theme :is([class~="text-yellow-600"],[class~="text-yellow-700"],[class~="text-yellow-800"]) { color:#ffbd63; }
.site-theme :is([class~="bg-yellow-50"],[class~="bg-yellow-100"]) { background-color:#3b3022; }
.site-theme :is([class~="text-green-600"],[class~="text-green-700"]) { color:#56d5a7; }
.site-theme :is([class~="bg-green-50"],[class~="bg-green-100"]) { background-color:#203b33; }
.site-theme :is([class~="border-[#d7eee4]"],[class~="border-[#eef5f0]"],[class~="border-gray-100"],[class~="border-gray-200"],[class~="border-red-200"]) { border-color:#ffffff1a; }
.site-theme :is([class~="border-[#13c878]"],[class~="border-[#d4af37]"]) { border-color:#ffa326; }
.site-theme :is([class~="ring-[#d6eee2]"]) { --tw-ring-color:#ffffff1a; }
.site-theme :is([class~="from-[#053b20]"],[class~="from-[#06401e]"],[class~="from-[#071f16]"],[class~="from-[#08401f]"]) { background-image:linear-gradient(110deg,#382818,#272323,#202329); }
.site-theme :is([class~="bg-[#13c878]"],[class~="bg-[#0e9f5b]"],[class~="bg-[#d4af37]"],[class~="from-[#13c878]"]) { background:#ffa326; color:#291807; }
.site-theme :is([class~="bg-[#13c878]"],[class~="bg-[#0e9f5b]"],[class~="bg-[#d4af37]"],[class~="from-[#13c878]"]) :is(.text-white,.text-white\/80) { color:#291807; }
.site-theme :is(button,a)[class~="text-[#0e9f5b]"] { color:#ffbd63; }
.site-theme :is(input,select,textarea)[class~="focus:border-[#13c878]"]:focus { border-color:#ffa326; }
/* Page-specific fit fixes, without changing the canvas coordinate system or controls. */
.site-theme .wheel-stage { width:min(288px,100%); height:auto; aspect-ratio:1; }
.site-theme #wheelCanvas { width:100%; height:auto; }
.site-theme main { overflow-wrap:anywhere; }
.site-theme [class~="bg-gray-300"] { background-color:#3a3e45; color:#9da2ac; }
.site-theme :is(button,a)[class~="bg-[#2563eb]"] { background:#ffa326; color:#291807; }
.site-theme [class~="bg-[#13c878]"][class~="text-[#0e9f5b]"] { color:#291807; }
.site-theme #chatBox { background:#1c2026; }
.site-theme #gatewayLoader > .min-h-screen { min-height:calc(100dvh - 40px); }
.site-theme #gameLoader, .site-theme #depositModal { z-index:160; }
/* Standalone payment documents retain their status branches, fields and scripts. */
.site-payment .payment-container { width:100%; max-width:430px; background:#17191e; }
.site-payment :is(.bg-zinc-900,.from-zinc-900) { background:#25292f; }
.site-payment .bg-zinc-800 { background:#1c2026; }
.site-payment #submit_btn, .site-payment .bg-green-500 { background:#ffa326; color:#291807; }
.site-payment .tab { min-height:40px; }
.site-payment .tab[class~="bg-yellow-400/20"] { background:#f5a12c26; color:#ffb550; }
.site-payment .bg-white:has(> img) { background:white; }
.site-payment .msg { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); z-index:120; width:max-content; max-width:calc(100vw - 32px); padding:12px 16px; border:1px solid #ffffff1a; border-radius:12px; background:#25292f; color:#f3f4f6; font-size:13px; box-shadow:0 4px 18px #0006; }
/* Game wrapper only: no changes to canvases, bets, controls or in-game dialogs. */
body.site-game { padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
.site-game #siteHeader { flex-shrink:0; }
.site-game #siteBottomNav { line-height:normal; }
.site-game #siteBottomNav .site-nav-link:hover { color:#ffb550; }
/* Keep these shared rules above the specificity of runtime Tailwind utilities. */
body.site-theme :is(.rounded-xl,.rounded-2xl,.rounded-3xl) { border-radius:12px; }
body.site-theme :is(.shadow-sm,.shadow-lg,.shadow-xl,.shadow-2xl) { box-shadow:0 2px 8px #0002; }
.site-home #topMembers { overflow:hidden; border:1px solid #ffffff14; border-radius:12px; background:#24282e; }
body.site-theme .site-home #topMembers > div { margin:0; border-radius:0; border-bottom:1px solid #ffffff0f; padding:10px; }
.site-home #earningsChart { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:8px; }
.site-home #earningsChart > div { grid-column:1 / -1; margin:0; padding:8px 10px; border-radius:8px; background:#1c2026; }
.site-home #earningsChart > div:nth-child(-n+3) { grid-row:1; flex-direction:column; gap:8px; padding:16px 4px 10px; border:1px solid #ffffff12; background:#343b44; text-align:center; }
.site-home #earningsChart > div:nth-child(1) { grid-column:2; padding-top:30px; background:linear-gradient(#a4620b,#60431f); border-color:#ffb14a80; }
.site-home #earningsChart > div:nth-child(2) { grid-column:1; }
.site-home #earningsChart > div:nth-child(3) { grid-column:3; }
.site-home #earningsChart > div:nth-child(-n+3) span { max-width:100%; font-size:10px; }
.site-home #earningsChart > div:nth-child(-n+3) span:last-child { background:#24292e; color:#ffd18b; border-radius:6px; padding:4px 2px; font-size:9px; }
body.site-theme main, body.site-theme main[class] { background:#17191e; box-shadow:none; }
@media (max-width:359px) {
 .site-theme main > .grid-cols-3 { gap:8px; }
 .site-theme main > .grid-cols-3 > :is(div,form,a) { padding-left:8px; padding-right:8px; }
 .site-theme main > .grid-cols-3 .text-sm { font-size:12px; }
 .site-theme main > .grid-cols-2 .text-xl { font-size:16px; }
}
@media (max-width:359px) {
 .site-game .bet-panels-wrapper .bet-panel { min-width:0; }
}

/* Controlled homepage refinements retained after the second-pass rollback. */
.site-home .home-welcome > section { border-radius:14px; box-shadow:0 6px 16px #0002; }
.site-home .home-section-heading { margin-bottom:10px; }
.site-home .home-section-heading h2 { letter-spacing:-.015em; }
.site-home .home-game-card { border-color:#ffffff1c; border-radius:12px; box-shadow:0 4px 12px #0003; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.site-home .home-game-card:active { transform:scale(.985); border-color:#f5a12c88; box-shadow:0 2px 8px #0003; }
.site-home #gameSearch:focus { box-shadow:0 0 0 2px #f5a12c33; }