/* MAX357 — Black & Gold. All selectors scoped for coexistence with Flatsome. */
html { scroll-behavior: smooth; }
body { margin: 0; background: #060606; }
.max357, .max357 * { box-sizing: border-box; }
.max357 { --black:#060708; --deep:#0b0c0d; --surface:#101112; --gold:#e8c674; --pale:#ffe6a4; --mid:#b88935; --muted:#9a8b70; --line:rgba(222,181,95,.25); color:#efeadc; background: radial-gradient(ellipse at 45% 16%,#1d170c 0%,transparent 30%),radial-gradient(ellipse at 90% 55%,#121008 0%,transparent 30%),#080909; min-height:100vh; position:relative; overflow:clip; font:400 14px/1.6 'Prompt','Kanit',Tahoma,sans-serif; isolation:isolate; }
.max357 a { text-decoration:none; color:inherit; transition: color .22s ease, border-color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease; }
.max357 button,.max357 input { font:inherit; }
.max357 button { cursor:pointer; }
.max357 a:focus-visible,.max357 button:focus-visible,.max357 input:focus-visible { outline:2px solid #fff0ad; outline-offset:3px; }
.max357 .page-glow { position:absolute; top:-230px; left:42%; width:830px; height:540px; pointer-events:none; background:radial-gradient(circle,rgba(184,123,40,.09),transparent 68%); filter:blur(22px); }
.max357 .site-header { position:relative; z-index:20; height:88px; background:linear-gradient(180deg,#10100e 0%,#080909 88%); border-bottom:1px solid rgba(227,181,81,.23); box-shadow:0 5px 30px #000a; }
.max357 .site-header:after { content:''; position:absolute; height:1px; bottom:0; width:55%; left:22%; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.45; }
.max357 .header-inner { max-width:1440px; margin:0 auto; height:100%; display:flex; align-items:center; gap:28px; padding:0 35px; }
.max357 .brand { display:inline-flex; align-items:center; gap:8px; min-width:max-content; line-height:1; }
.max357 .brand-mark { font-size:43px; line-height:.8; font-family:Georgia,serif; color:#edc76d; transform:translateY(-4px); text-shadow:0 2px 6px #000,0 0 25px #aa6a166e; }
.max357 .brand-name { font-family:'Kanit',sans-serif; font-size:39px; font-style:italic; font-weight:800; letter-spacing:-2px; background:linear-gradient(#fff8ca 7%,#d8ab54 40%,#95601d 56%,#fff5ac 75%,#a5772e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 3px 2px #000); display:inline-block; position:relative; }
.max357 .brand-name span { letter-spacing:-3px; }
.max357 .brand-name small { font:600 7.5px/1.2 'Prompt',sans-serif; letter-spacing:3.5px; text-align:center; display:block; -webkit-text-fill-color:#c5a15c; padding-left:5px; margin-top:4px; font-style:normal; }
.max357 .desktop-top-nav { display:flex; align-items:stretch; height:100%; margin-left:auto; gap:4px; }
.max357 .top-nav-link { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:106px; padding:6px 12px; color:#c5b493; border-left:1px solid transparent; border-right:1px solid transparent; font-size:12px; }
.max357 .top-nav-link:hover,.max357 .top-nav-link.is-active { color:#ffe29b; background:linear-gradient(180deg,rgba(211,156,53,.22),rgba(167,103,19,.04)); border-color:rgba(216,170,79,.19); }
.max357 .nav-ico { font-family:Georgia,serif; font-size:23px; line-height:1.1; color:var(--gold); }
.max357 .header-actions { display:flex; align-items:center; gap:12px; }
.max357 .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap; font-weight:600; border-radius:100px; padding:10px 21px; border:1px solid #c8a458; line-height:1.3; font-size:13px; text-align:center; }
.max357 .btn-outline { background:linear-gradient(180deg,#151512,#090a09); color:#e7c579; box-shadow:inset 0 1px 0 #e1bd6726; }
.max357 .btn-outline:hover { background:#302313; color:#ffe7a2; }
.max357 .btn-gold { color:#211603; background:linear-gradient(120deg,#a77424,#f0d588 35%,#d5a94c 60%,#a97622 100%); border-color:#f3d68b; box-shadow:inset 0 1px 0 #fff9ca9c,0 3px 16px #bf7c192b; text-shadow:0 1px #fff7af66; }
.max357 .btn-gold:hover { color:#0b0904; transform:translateY(-2px); box-shadow:inset 0 1px 0 #fff,0 7px 23px #bd8e2f72; }
.max357 .btn-glass { border-color:#b79856; background:rgba(6,6,7,.64); color:#f4d98d; }
.max357 .btn-glass:hover { background:#c5983424; }
.max357 .btn-large { padding:13px 25px; border-radius:9px; font-size:14px; }

/* Desktop floating category rail */
.max357 .side-menu { width:188px; position:fixed; top:151px; left:max(15px,calc((100vw - 1440px)/2 + 17px)); z-index:30; padding:10px; border-radius:17px; background:linear-gradient(145deg,#231c10,#0e0e0b 30%,#080908); border:1px solid rgba(235,193,100,.46); box-shadow:0 22px 45px #000b, inset 0 1px 0 #f1da8845; display:flex; flex-direction:column; gap:7px; }
.max357 .side-head { display:flex; align-items:center; gap:9px; color:#f3d082; font-size:12px; font-weight:700; line-height:1.25; letter-spacing:1.3px; padding:6px 7px 11px; border-bottom:1px solid #d9ac523b; margin-bottom:2px; }
.max357 .side-head-star { display:grid; place-items:center; width:34px; height:34px; color:#0d0903; background:linear-gradient(135deg,#f8df90,#ab7627); clip-path:polygon(50% 0,88% 18%,100% 50%,83% 84%,50% 100%,15% 85%,0 50%,15% 18%); font-size:20px; }
.max357 .side-head small { display:block; letter-spacing:0; font-weight:400; font-size:9px; color:#baa780; margin-top:4px; }
.max357 .side-item { height:58px; display:flex; align-items:center; gap:10px; border:1px solid #be954544; border-radius:10px; padding:7px 9px; background:linear-gradient(105deg,#242115,#10110d); color:#eadbb3; box-shadow:inset 0 1px 0 #eac66816; font-size:11.5px; font-weight:600; line-height:1.3; }
.max357 .side-item:hover,.max357 .side-item.selected { background:linear-gradient(115deg,#5c4219,#29210f 60%,#17150c); border-color:#e5c16e; color:#ffe8a7; transform:translateX(3px); }
.max357 .side-icon { display:grid; place-items:center; width:37px; height:37px; flex:0 0 37px; font-size:23px; color:#edc972; background:radial-gradient(circle,#5b461e,#16150e 66%); border:1px solid #c39c535c; border-radius:10px; text-shadow:0 1px 4px #e6ad5570; font-family:Georgia,serif; }
.max357 .side-item small { display:block; font-size:10px; color:#b1a17e; font-weight:400; margin-top:3px; }
.max357 .side-arrow { color:#c9a45d; margin-left:auto; font-size:20px; opacity:.65; }
.max357 .side-bottom { text-align:center; color:#a88d5e; font-size:8px; letter-spacing:2px; padding:9px 0 2px; border-top:1px solid var(--line); margin-top:5px; }
.max357 .side-bottom strong { display:block; font:italic 800 23px 'Kanit',sans-serif; letter-spacing:-1px; color:#e8c575; line-height:1.2; }
.max357 .side-bottom strong span { color:#f6da8e; }
.max357 .social-rail { position:fixed; z-index:25; top:43%; right:13px; display:flex; flex-direction:column; gap:8px; }
.max357 .social-rail a { width:47px; height:47px; display:grid; place-items:center; border:1px solid #bd963c8c; border-radius:13px; color:#111; background:linear-gradient(140deg,#f8d683,#a67628); box-shadow:0 6px 15px #0008,inset 0 1px #fff7ba90; font-weight:800; font-family:Arial,sans-serif; font-size:28px; }
.max357 .social-rail a:first-child { font-size:10px; border-radius:50%; }
.max357 .social-rail a:hover { transform:translateX(-5px) scale(1.06); }

.max357 .main-content { max-width:1440px; width:100%; padding:14px 71px 0 220px; margin:0 auto; position:relative; z-index:2; }
.max357 .announce { height:40px; background:linear-gradient(90deg,#3b2c10,#17160d 17%,#19170e 82%,#3b2a0e); border:1px solid rgba(221,177,75,.46); border-radius:8px; display:flex; align-items:center; gap:11px; color:#ead7ab; padding:0 17px; overflow:hidden; box-shadow:inset 0 1px 0 #f9e09419,0 6px 16px #0005; }
.max357 .announce-bell { font-size:21px; color:#f3d17e; }
.max357 .announce-tag { font-size:11px; color:#1a1004; font-weight:700; padding:2px 9px; background:linear-gradient(#ffdfa0,#ae782b); border-radius:3px; }
.max357 .announce-marquee { flex:1; overflow:hidden; white-space:nowrap; font-size:11px; color:#dcc28d; text-align:center; }
.max357 .announce-marquee span { display:inline-block; animation:announce-drift 24s linear infinite alternate; }
.max357 .announce-end { font:700 10px Georgia,serif; letter-spacing:1px; color:#be9653; }
@keyframes announce-drift { 0%{transform:translateX(15%)}100%{transform:translateX(-30%)} }

/* Main visual */
.max357 .hero { position:relative; margin-top:13px; height:355px; overflow:hidden; border-radius:13px; border:1px solid #b88b437d; background:#080808; box-shadow:0 22px 34px #0009,inset 0 0 60px #000; }
.max357 .hero-visual { position:absolute; inset:0; background:url('assets/max357-hero.webp') center center / cover no-repeat; transform:scale(1.001); }
.max357 .hero-sheen { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 47%,rgba(0,0,0,.2),rgba(0,0,0,.17) 36%,transparent 78%),linear-gradient(180deg,#0005,transparent 20%,transparent 75%,#000a); }
.max357 .hero-inner { position:absolute; top:8%; right:5%; left:5%; display:flex; flex-direction:column; align-items:center; text-align:center; z-index:2; }
.max357 .hero-eyebrow { color:#b89450; letter-spacing:3.6px; display:flex; gap:13px; align-items:center; font:600 9px 'Prompt',sans-serif; }
.max357 .hero-eyebrow span { width:33px; height:1px; background:linear-gradient(90deg,transparent,#dbbb79); }
.max357 .hero-eyebrow span:last-child { transform:rotate(180deg); }
.max357 .hero-logo { font:italic 900 clamp(56px,6.1vw,94px)/1.1 'Kanit',sans-serif; letter-spacing:-5px; margin:0; color:#f7d78d; background:linear-gradient(180deg,#ffefb0 3%,#cf9c45 40%,#80501a 51%,#ffe4a0 66%,#af782a 92%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 5px 3px #000) drop-shadow(0 0 10px #c8931850); }
.max357 .hero-logo span { letter-spacing:-7px; }
.max357 .hero-kicker { margin:-4px 0 7px; font:600 10px 'Prompt',sans-serif; letter-spacing:6px; color:#e7c67e; text-shadow:0 2px 5px #000; }
.max357 .hero h2 { font-size:23px; font-weight:600; line-height:1.25; margin:4px 0 6px; text-shadow:0 3px 8px #000; color:#fff8e4; }
.max357 .hero h2 em { color:#e9bd5d; font-style:normal; }
.max357 .hero-description { margin:0 0 15px; color:#e2d0ab; font-size:11px; text-shadow:0 2px 4px #000; }
.max357 .hero-buttons { display:flex; gap:10px; }
.max357 .hero-edge { position:absolute; width:46px; height:46px; border:2px solid transparent; z-index:1; }
.max357 .hero-edge-left { top:12px; left:12px; border-top-color:#e7c070;border-left-color:#e7c070; }
.max357 .hero-edge-right { top:12px; right:12px; border-top-color:#e7c070;border-right-color:#e7c070; }
.max357 .hero-floor { position:absolute; bottom:0; left:0; width:100%; height:30px; display:flex; justify-content:space-between; align-items:center; padding:0 20px; background:linear-gradient(90deg,#050505c0,#32220880,#050505c0); border-top:1px solid #e4bb6155; color:#c79d53; letter-spacing:2px; font:600 9px Georgia,serif; }

/* Section bars and cards */
.max357 .section-line { display:flex; align-items:center; min-height:46px; margin:19px 0 12px; gap:10px; border-bottom:1px solid var(--line); position:relative; }
.max357 .section-chip { align-self:stretch; display:inline-flex; align-items:center; gap:8px; padding:7px 18px; background:linear-gradient(95deg,#755019,#3e2d11 63%,#19170e); border:1px solid #b98e475b; border-radius:9px 9px 0 0; border-bottom:0; color:#ffdf9b; font-size:15px; font-weight:600; white-space:nowrap; text-shadow:0 1px 3px #000; }
.max357 .section-chip > span { font-size:22px; line-height:1; font-family:Georgia,serif; }
.max357 .section-chip small { margin-left:4px; color:#dec385; font-weight:500; font-size:9px; letter-spacing:1.2px; align-self:center; }
.max357 .line-fill { flex:1; }
.max357 .live-badge { font:700 9px 'Prompt',sans-serif; letter-spacing:1px; color:#caa65a; }
.max357 .live-badge i { display:inline-block; width:6px; height:6px; background:#f1c764; border-radius:50%; box-shadow:0 0 10px #e2aa44; margin-right:5px; }
.max357 .section-decoration,.max357 .section-note { color:#957b4d; font-size:10px; letter-spacing:.4px; white-space:nowrap; }
.max357 .wins-section .section-line { margin-top:12px; margin-bottom:10px; }
.max357 .winner-window { overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 3%,#000 96%,transparent); }
.max357 .winner-track { display:flex; width:max-content; gap:11px; animation:winner-roll 55s linear infinite; }
.max357 .winner-track:hover { animation-play-state:paused; }
.max357 .winner-card { width:144px; flex:0 0 144px; display:flex; gap:9px; padding:9px; border-radius:10px; background:linear-gradient(145deg,#242014,#0e0e0c 63%); border:1px solid #c0a15f30; min-height:67px; box-shadow:inset 0 1px #ffe39d1a; }
.max357 .winner-medal { display:grid; place-items:center; width:44px; flex:0 0 44px; border-radius:8px; font:700 22px Georgia,serif; color:#edc170; background:radial-gradient(circle at 35% 24%,#795522,#1b1910 70%); border:1px solid #b6934b40; }
.max357 .winner-info { display:flex; flex-direction:column; min-width:0; line-height:1.4; }
.max357 .winner-info strong { font-size:10px; color:#f2dfad; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.max357 .winner-info small { font-size:9px; color:#8b816d; }
.max357 .winner-info b { color:#efc877; font-size:11px; }
@keyframes winner-roll { to { transform:translateX(-50%); } }
.max357 .promo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.max357 .promo-card { height:193px; border-radius:12px; border:1px solid #a4804480; display:block; position:relative; overflow:hidden; box-shadow:0 10px 24px #0008,inset 0 1px #ffeb9c52; isolation:isolate; }
.max357 .promo-card:after { content:''; position:absolute; inset:0; background:linear-gradient(105deg,#0009 0%,transparent 55%,#0004); z-index:-1; }
.max357 .promo-card:hover { transform:translateY(-4px); border-color:#f7d785; box-shadow:0 14px 29px #b37e2335; }
.max357 .promo-card-vault { background:#070707 url('assets/max357-vault.webp') center / cover; }
.max357 .promo-card-crown { background:#070707 url('assets/max357-crown.webp') center / cover; }
.max357 .promo-card-royal { background:radial-gradient(circle at 82% 56%,#bf8b35 0%,#38230a 16%,#14100c 43%,#090909 79%),repeating-linear-gradient(45deg,transparent,transparent 17px,#a9802012 17px,#a9802012 18px); }
.max357 .promo-card-royal:before { content:''; position:absolute; right:-22px; top:-33px; width:165px; height:165px; border:2px solid #deb45d80; border-radius:50%; box-shadow:0 0 0 19px #c6942614,0 0 0 43px #c694260a; }
.max357 .promo-copy { position:relative; z-index:2; height:100%; padding:13px 13px 13px 15px; display:flex; flex-direction:column; align-items:flex-start; color:#fff0c2; text-shadow:0 2px 4px #000c; }
.max357 .promo-number { font:700 9px 'Prompt',sans-serif; letter-spacing:1px; color:#ffe094; border:1px solid #ac874c; border-radius:20px; padding:2px 8px; background:#0706058a; }
.max357 .promo-mini { margin-top:9px; font:600 8px 'Prompt',sans-serif; letter-spacing:1.5px; color:#ceb57d; }
.max357 .promo-copy strong { font:700 23px/1.28 'Kanit',sans-serif; margin-top:1px; }
.max357 .promo-copy em { color:#f9d776; font-style:normal; }
.max357 .promo-cta { margin-top:auto; font-size:10px; color:#f4d381; border-bottom:1px solid #dcb66f8c; }
.max357 .promo-cta span { margin-left:5px; }
.max357 .promo-diamond { font:170px Georgia,serif; color:transparent; background:linear-gradient(130deg,#fff9cc,#af721c,#f0d06e,#654008); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 8px 12px #000); position:absolute; right:0; top:-36px; transform:rotate(19deg); }
.max357 .quick-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:24px; border:1px solid var(--line); background:linear-gradient(90deg,#26200f,#141310 46%,#0d0d0d); border-radius:10px; padding:10px 13px; }
.max357 .quick-title { color:#f3d181; font-size:13px; font-weight:600; }
.max357 .quick-title span { font-family:Georgia,serif; font-size:22px; vertical-align:-2px; margin-right:6px; }
.max357 .quick-right { display:flex; gap:17px; align-items:center; }
.max357 .quick-count { color:#92784c; font:600 9px 'Prompt',sans-serif; letter-spacing:1.4px; }
.max357 .search-box { display:flex; align-items:center; gap:8px; background:#070808; border:1px solid #987743; border-radius:8px; padding:0 11px; height:34px; min-width:176px; }
.max357 .search-box span { font-size:22px; color:#e2bc63; line-height:1; }
.max357 .search-box input { width:135px; color:#fff0cf; background:transparent; border:0; outline:0; font-size:11px; }
.max357 .search-box input::placeholder { color:#847458; }
.max357 .games-section { scroll-margin-top:14px; }
.max357 .games-section .section-line { margin-top:19px; }
.max357 .game-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:11px; }
.max357 .game-card { appearance:none; border:1px solid #b591504f; background:linear-gradient(#1c1b16,#0d0e0e); border-radius:12px; padding:5px 5px 8px; color:inherit; width:100%; min-width:0; text-align:left; overflow:hidden; box-shadow:inset 0 1px #ffdea927,0 8px 15px #0004; transition:transform .25s,border-color .25s,box-shadow .25s; }
.max357 .game-card:hover { transform:translateY(-5px); border-color:#f4d67d; box-shadow:0 12px 25px #b3842835; }
.max357 .game-card:focus-visible { outline:2px solid #ffe4a3; outline-offset:2px; }
.max357 .game-art { border-radius:8px; aspect-ratio:1.15; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 40%,#9d743f30,transparent 60%),linear-gradient(140deg,#1a160e,#040504); border:1px solid #c9a35847; isolation:isolate; }
.max357 .game-art:before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 40%,transparent 20%,#000a 100%),repeating-linear-gradient(115deg,transparent 0 26px,#e7bd4710 27px 28px,transparent 29px 40px); z-index:-1; }
.max357 .game-art:after { content:''; position:absolute; width:78%; aspect-ratio:1; border:1px solid #d7a85570; box-shadow:0 0 0 8px #f1bb2d0b,0 0 0 18px #d8a53b08,inset 0 0 28px #c79a2330; border-radius:50%; z-index:-1; top:10%; }
.max357 .game-card[data-style="dragon"] .game-art,.max357 .game-card[data-style="tiger"] .game-art { background-image:linear-gradient(#05050547,#0505057d),url('assets/max357-hero.webp');background-size:cover; }
.max357 .game-card[data-style="dragon"] .game-art { background-position:0% center; }
.max357 .game-card[data-style="tiger"] .game-art { background-position:100% center; }
.max357 .game-card[data-style="vault"] .game-art { background-image:linear-gradient(#05050547,#0505057d),url('assets/max357-vault.webp');background-size:cover;background-position:84% center; }
.max357 .game-card[data-style="royal"] .game-art { background-image:linear-gradient(#05050547,#0505058b),url('assets/max357-crown.webp');background-size:cover;background-position:78% center; }
.max357 .game-card[data-style="violet"] .game-art { background:radial-gradient(circle at 50% 22%,#7c6336,#282113 47%,#090807); }
.max357 .game-card[data-style="emerald"] .game-art { background:radial-gradient(circle at 50% 22%,#756b44,#222018 47%,#090a08); }
.max357 .game-card[data-style="copper"] .game-art { background:radial-gradient(circle at 50% 22%,#a2773a,#2d1c0e 47%,#090706); }
.max357 .game-card[data-style="blue"] .game-art { background:radial-gradient(circle at 50% 22%,#83724a,#252115 47%,#090908); }
.max357 .game-card[data-style="rose"] .game-art { background:radial-gradient(circle at 50% 22%,#947149,#2d2114 47%,#090807); }
.max357 .game-symbol { font:700 clamp(42px,5vw,78px)/1 Georgia,'Times New Roman',serif; color:#ffe39a; background:linear-gradient(180deg,#fff1bc,#c68c2d 53%,#ffe19b 65%,#805018); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 6px 5px #000a) drop-shadow(0 0 7px #edbe5b90); position:relative; z-index:1; white-space:nowrap; }
.max357 .game-card[data-style="dragon"] .game-symbol,.max357 .game-card[data-style="tiger"] .game-symbol,.max357 .game-card[data-style="vault"] .game-symbol,.max357 .game-card[data-style="royal"] .game-symbol { font-size:45px; opacity:.85; }
.max357 .game-art-name { position:absolute; bottom:10px; z-index:2; text-align:center; font:800 12px/1.1 'Kanit',sans-serif; color:#fff1c9; letter-spacing:.7px; text-shadow:0 2px 4px #000,0 0 9px #000; padding:0 3px; text-transform:uppercase; }
.max357 .game-ribbon { position:absolute; z-index:3; top:6px; left:6px; color:#2a1803; background:linear-gradient(120deg,#ffe49e,#b27d26); border-radius:4px; font:700 8px 'Prompt',sans-serif; padding:2px 6px; box-shadow:0 3px 5px #0008; }
.max357 .game-meta { padding:7px 3px 1px; display:flex; gap:7px; justify-content:space-between; align-items:center; }
.max357 .game-meta strong { color:#f2e6c8; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
.max357 .game-meta span { color:#deb55f; font-size:10px; white-space:nowrap; }
.max357 .game-subtitle { color:#867c69; font-size:9px; margin:0 3px 1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.max357 .empty-games { color:#c1ac81; padding:30px 0; font-size:12px; grid-column:1/-1; text-align:center; border:1px dashed #ae88484a; border-radius:9px; }

.max357 .luxury-strip { margin-top:29px; padding:18px 12px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; background:linear-gradient(100deg,#29200f,#131310 42%,#322711); border-block:1px solid #c99a4c50; border-radius:7px; }
.max357 .luxury-strip > div { display:flex; align-items:center; flex-direction:column; text-align:center; border-right:1px solid var(--line); }
.max357 .luxury-strip > div:last-child { border-right:0; }
.max357 .luxury-strip span { color:#ebc36d; font:30px Georgia,serif; line-height:1.1; }
.max357 .luxury-strip strong { color:#e7c57a; letter-spacing:1px; font-size:11px; font-weight:600; }
.max357 .luxury-strip small { color:#a99d83; font-size:9px; }
.max357 .footer { padding:33px 0 25px; color:#a08e6e; text-align:center; }
.max357 .footer-main { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.max357 .footer-brand .brand-mark { font-size:24px; }
.max357 .footer-brand .brand-name { font-size:31px; }
.max357 .footer-brand .brand-name small { font-size:6px; }
.max357 .footer-main p { margin:0 0 7px; color:#8b764e; font-size:9px; letter-spacing:2px; }
.max357 .footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:22px; margin:13px 0; font-size:11px; }
.max357 .footer-links a:hover { color:#efcc77; }
.max357 .footer-disclaimer { border-top:1px solid #b99e5a24; padding-top:13px; font-size:9px; color:#777063; }
.max357 .mobile-categories,.max357 .mobile-bottom-nav { display:none; }
.max357 .toast { position:fixed; z-index:100; left:50%; bottom:26px; transform:translate(-50%,18px); pointer-events:none; padding:12px 20px; background:#26200f; color:#ffe9ad; border:1px solid #d4b267; box-shadow:0 15px 30px #000c; border-radius:9px; opacity:0; visibility:hidden; transition:opacity .25s,transform .25s,visibility .25s; font-size:12px; text-align:center; max-width:calc(100vw - 35px); }
.max357 .toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }

@media (max-width:1180px) {
  .max357 .main-content { padding-left:213px; padding-right:57px; }
  .max357 .header-inner { padding-inline:22px; gap:12px; }
  .max357 .desktop-top-nav { gap:0; }
  .max357 .top-nav-link { min-width:82px; padding:5px 7px; }
  .max357 .side-menu { width:182px; left:10px; }
  .max357 .hero { height:330px; }
  .max357 .hero-logo { font-size:70px; }
  .max357 .game-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .max357 .game-grid .game-card:nth-child(n+9) { display:none; }
  .max357 .promo-copy strong { font-size:19px; }
}
@media (max-width:860px) {
  .max357 { padding-bottom:70px; }
  .max357 .site-header { height:67px; position:sticky; top:0; z-index:50; }
  .max357 .header-inner { padding:0 15px; justify-content:space-between; }
  .max357 .brand-mark { font-size:30px; }
  .max357 .brand-name { font-size:31px; }
  .max357 .brand-name small { letter-spacing:2px; font-size:6px; }
  .max357 .desktop-top-nav,.max357 .side-menu,.max357 .social-rail { display:none; }
  .max357 .header-actions .btn { font-size:11px; padding:9px 15px; }
  .max357 .main-content { padding:10px 12px 0; max-width:760px; }
  .max357 .mobile-categories { display:flex; align-items:center; gap:7px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; position:sticky; top:67px; z-index:45; padding:8px 12px; background:linear-gradient(180deg,#17140c,#0b0b0b); border-bottom:1px solid var(--line); }
  .max357 .mobile-categories::-webkit-scrollbar { display:none; }
  .max357 .mobile-categories a { flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid #a6823f4c; border-radius:100px; background:#19170f; color:#b9ab8e; font-size:11px; scroll-snap-align:center; white-space:nowrap; }
  .max357 .mobile-categories a.on,.max357 .mobile-categories a:hover { color:#f9dda0; background:linear-gradient(#5a4019,#271f0f); border-color:#d8af5e; }
  .max357 .hero { margin-top:10px; height:370px; }
  .max357 .hero-visual { background-position:center; }
  .max357 .hero-inner { top:10%; }
  .max357 .hero-logo { font-size:76px; }
  .max357 .game-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .max357 .game-grid .game-card:nth-child(n+9) { display:block; }
  .max357 .mobile-bottom-nav { height:66px; padding-bottom:env(safe-area-inset-bottom); box-sizing:content-box; position:fixed; z-index:60; bottom:0; left:0; right:0; display:flex; justify-content:space-around; align-items:center; background:linear-gradient(#252014,#080909 72%); border-top:1px solid #d1a75775; box-shadow:0 -9px 22px #000b; }
  .max357 .mobile-bottom-nav a { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; color:#aaa08d; font-size:10px; height:100%; }
  .max357 .mobile-bottom-nav a.active { color:#ffdc91; }
  .max357 .bottom-icon { font:25px/1.2 Georgia,serif; }
  .max357 .mobile-bottom-nav small { font-size:10px; }
  .max357 .bottom-central { position:relative; transform:translateY(-13px); }
  .max357 .bottom-diamond { width:52px; height:52px; display:grid; place-items:center; background:linear-gradient(130deg,#fff2b2,#c08c30 65%,#91601f); border-radius:17px; color:#201407; font:30px Georgia,serif; border:3px solid #0c0c09; box-shadow:0 3px 15px #db9e4555; }
  .max357 .toast { bottom:87px; }
  .max357 .games-section { scroll-margin-top:120px; }
}
@media (max-width:600px) {
  .max357 .header-actions .btn-outline { display:none; }
  .max357 .header-actions .btn-gold { font-size:11px; padding:9px 12px; }
  .max357 .announce { height:34px; gap:7px; padding:0 10px; }
  .max357 .announce-tag,.max357 .announce-end { display:none; }
  .max357 .announce-marquee { font-size:10px; }
  .max357 .hero { height:343px; border-radius:10px; }
  .max357 .hero-visual { background-image:url('assets/max357-mobile-hero.webp'); background-position:center 62%; opacity:.92; }
  .max357 .hero-sheen { background:radial-gradient(ellipse at 50% 44%,#0006,#0006 35%,#0009 95%); }
  .max357 .hero-inner { top:10%; left:3%; right:3%; }
  .max357 .hero-eyebrow { font-size:8px; letter-spacing:1.9px; }
  .max357 .hero-eyebrow span { width:20px; }
  .max357 .hero-logo { font-size:clamp(61px,16vw,82px); letter-spacing:-3px; }
  .max357 .hero-kicker { font-size:7.5px; letter-spacing:3px; margin:-3px 0 10px; }
  .max357 .hero h2 { font-size:19px; margin:0 0 7px; }
  .max357 .hero-description { font-size:10px; margin-bottom:17px; }
  .max357 .hero-buttons { gap:8px; }
  .max357 .btn-large { padding:10px 14px; font-size:11px; }
  .max357 .hero-floor { padding-inline:12px; height:27px; font-size:7px; letter-spacing:1px; }
  .max357 .section-line { min-height:42px; gap:6px; margin:17px 0 10px; }
  .max357 .section-chip { padding:6px 11px; font-size:13px; }
  .max357 .section-chip > span { font-size:18px; }
  .max357 .section-chip small { font-size:7px; margin-left:2px; letter-spacing:.3px; }
  .max357 .section-note,.max357 .section-decoration { font-size:8px; }
  .max357 .winner-card { width:132px; flex-basis:132px; }
  .max357 .promo-grid { display:flex; overflow-x:auto; gap:10px; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; }
  .max357 .promo-grid::-webkit-scrollbar { display:none; }
  .max357 .promo-card { flex:0 0 76%; scroll-snap-align:start; height:182px; }
  .max357 .promo-copy strong { font-size:22px; }
  .max357 .quick-bar { margin-top:20px; display:block; padding:9px; }
  .max357 .quick-title { font-size:12px; margin-bottom:8px; }
  .max357 .quick-right { justify-content:space-between; }
  .max357 .quick-count { font-size:8px; }
  .max357 .search-box { height:31px; }
  .max357 .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .max357 .game-card { padding:5px; }
  .max357 .game-art { aspect-ratio:1.04; }
  .max357 .game-symbol { font-size:70px; }
  .max357 .game-card[data-style="dragon"] .game-symbol,.max357 .game-card[data-style="tiger"] .game-symbol,.max357 .game-card[data-style="vault"] .game-symbol,.max357 .game-card[data-style="royal"] .game-symbol { font-size:57px; }
  .max357 .game-art-name { font-size:12px; }
  .max357 .game-meta strong { font-size:11px; }
  .max357 .luxury-strip { gap:0; padding:11px 2px; }
  .max357 .luxury-strip span { font-size:22px; }
  .max357 .luxury-strip strong { font-size:8px; letter-spacing:0; }
  .max357 .luxury-strip small { font-size:7px; padding:0 4px; }
  .max357 .footer { padding-bottom:30px; }
}
@media (max-width:360px) {
  .max357 .brand-name { font-size:27px; }
  .max357 .brand-mark { font-size:24px; }
  .max357 .header-actions .btn-gold { padding-inline:9px; }
  .max357 .hero { height:320px; }
  .max357 .hero h2 { font-size:17px; }
  .max357 .hero-logo { font-size:58px; }
  .max357 .btn-large { padding:9px; }
  .max357 .section-chip small { display:none; }
  .max357 .quick-count { display:none; }
  .max357 .search-box { width:100%; }
  .max357 .search-box input { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .max357 *, .max357 *:before, .max357 *:after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* MAX357 v1.1 — portrait gaming lobby inspired by the supplied mobile layout.
   Desktop styles above are intentionally unchanged. */
.max357 .mobile-lobby, .max357 .mobile-search-toggle, .max357 .mobile-search-panel { display:none; }

@media (max-width:860px) {
  .max357 .site-header { height:56px; }
  .max357 .header-inner { padding-inline:10px; gap:8px; }
  .max357 .brand { gap:4px; }
  .max357 .brand-mark { font-size:27px; }
  .max357 .brand-name { font-size:27px; letter-spacing:-1px; }
  .max357 .brand-name span { letter-spacing:-2px; }
  .max357 .brand-name small { font-size:5px; letter-spacing:1.5px; }
  .max357 .mobile-search-toggle { display:grid; place-items:center; margin-left:auto; width:30px; height:34px; padding:0; color:#f3d17e; border:0; background:transparent; font:30px/1 Georgia,serif; }
  .max357 .header-actions { gap:5px; }
  .max357 .header-actions .btn, .max357 .header-actions .btn-outline { display:inline-flex; font-size:10px; padding:8px 10px; min-height:30px; }
  .max357 .header-actions .btn-gold span { display:none; }
  .max357 .mobile-search-panel.is-open { display:flex; align-items:center; gap:8px; position:fixed; top:56px; left:0; right:0; z-index:70; padding:9px 14px; background:#1a130a; border-bottom:1px solid #d6ab5e; box-shadow:0 8px 20px #000a; }
  .max357 .mobile-search-panel label { color:#f1d18b; white-space:nowrap; font-size:11px; }
  .max357 .mobile-search-panel input { flex:1; min-width:0; border:1px solid #ae8745; border-radius:6px; background:#080808; color:#ffe9bb; padding:6px 9px; font-size:12px; }
  .max357 .mobile-categories { top:56px; height:31px; gap:2px; justify-content:flex-start; padding:4px 8px; background:linear-gradient(#211609,#0c0a08); border-color:#bd904d65; }
  .max357 .mobile-categories a { padding:1px 8px; border:0; border-radius:0; background:transparent; font-size:10px; color:#d6bd8e; }
  .max357 .mobile-categories a:not(:last-child):after { content:'•'; position:relative; right:-8px; color:#9e783b; }
  .max357 .mobile-categories a.on, .max357 .mobile-categories a:hover { background:transparent; border:0; color:#ffdf8e; }
  .max357 .main-content { display:flex; flex-direction:column; max-width:760px; padding:7px 8px 0; }
  .max357 .announce, .max357 .wins-section, .max357 .quick-bar, .max357 .games-section { display:none!important; }
  .max357 .hero { order:0; margin-top:0; height:172px; border-radius:9px; box-shadow:0 6px 18px #0008; }
  .max357 .hero-visual { opacity:1; background-image:url('assets/max357-hero.webp'); background-position:73% center; background-size:cover; }
  .max357 .hero-sheen { background:linear-gradient(90deg,#060604ee 0%,#0d0b08ca 39%,#0a080552 70%,transparent 100%); }
  .max357 .hero-inner { top:19%; left:13px; right:42%; align-items:flex-start; text-align:left; }
  .max357 .hero-eyebrow, .max357 .hero-description, .max357 .hero-buttons, .max357 .hero-floor { display:none; }
  .max357 .hero-logo { font-size:clamp(31px,7vw,46px); line-height:1.1; letter-spacing:-1px; }
  .max357 .hero-logo span { letter-spacing:-2px; }
  .max357 .hero-kicker { margin:0 0 5px; font-size:8px; letter-spacing:1px; color:#f8d585; }
  .max357 .hero h2 { font-size:13px; font-weight:500; line-height:1.35; margin:0; }
  .max357 .hero-edge { width:16px; height:16px; }
  .max357 .hero-edge-left { top:7px; left:7px; }
  .max357 .hero-edge-right { top:7px; right:7px; }

  .max357 .mobile-lobby { order:1; display:grid; grid-template-columns:54px minmax(0,1fr); gap:7px; align-items:start; margin-top:9px; scroll-margin-top:100px; }
  .max357 .mobile-vertical-menu { position:sticky; top:94px; display:flex; flex-direction:column; gap:8px; max-height:calc(100dvh - 166px); overflow-y:auto; padding:0 2px 4px 0; scrollbar-width:none; }
  .max357 .mobile-vertical-menu::-webkit-scrollbar { display:none; }
  .max357 .mobile-vertical-menu button { flex:0 0 auto; width:52px; min-height:72px; padding:7px 3px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid #b3894d6b; border-radius:8px; background:linear-gradient(155deg,#291f13,#0d0b09 80%); color:#efd28e; box-shadow:inset 0 1px #f7d78c16; }
  .max357 .mobile-vertical-menu button.is-selected { border-color:#f0c875; background:linear-gradient(150deg,#725019,#22180d); box-shadow:inset 0 1px #fff1b55a,0 3px 13px #d69a2940; }
  .max357 .mobile-vertical-menu button span { font:27px/1.1 Georgia,serif; text-shadow:0 0 8px #bd8f3870; }
  .max357 .mobile-vertical-menu button small { font-size:9px; font-weight:500; line-height:1.2; white-space:nowrap; }
  .max357 .mobile-lobby-content { min-width:0; }
  .max357 .mobile-lobby-heading { height:25px; display:flex; align-items:center; justify-content:space-between; padding:0 3px 5px; color:#e8c674; font-size:11px; font-weight:600; }
  .max357 .mobile-lobby-count { color:#9f895f; font-size:9px; font-weight:400; }
  .max357 .mobile-game-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .max357 .mobile-game-grid .game-card { position:relative; display:block; width:100%; padding:3px; border:1px solid #d2a6608c; border-radius:9px; background:#080807; box-shadow:0 5px 13px #0009; }
  .max357 .mobile-game-grid .game-art { aspect-ratio:.88; border-radius:6px; border:0; }
  .max357 .mobile-game-grid .game-symbol { font-size:clamp(52px,12vw,90px); }
  .max357 .mobile-game-grid .game-card[data-style="dragon"] .game-symbol,
  .max357 .mobile-game-grid .game-card[data-style="tiger"] .game-symbol,
  .max357 .mobile-game-grid .game-card[data-style="vault"] .game-symbol,
  .max357 .mobile-game-grid .game-card[data-style="royal"] .game-symbol { font-size:clamp(45px,10vw,70px); }
  .max357 .mobile-game-grid .game-ribbon { display:none; }
  .max357 .mobile-game-grid .game-art-name { top:7px; bottom:auto; left:6px; max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; padding:3px 6px; border-radius:4px; color:#211505; background:linear-gradient(95deg,#ffdfa0,#c3913b); font:700 9px/1.1 'Kanit',sans-serif; text-shadow:none; }
  .max357 .mobile-game-grid .game-live-badge { position:absolute; bottom:6px; left:6px; z-index:3; padding:2px 6px; border-radius:4px; background:linear-gradient(100deg,#d8a23c,#765013); color:#150d03; font-size:9px; font-weight:700; box-shadow:0 2px 5px #0008; }
  .max357 .mobile-game-grid .game-meta, .max357 .mobile-game-grid .game-subtitle { display:none; }
  .max357 .mobile-game-grid .empty-games { grid-column:1/-1; }

  .max357 .promotions-section { order:2; margin-top:18px; }
  .max357 .luxury-strip { order:3; }
  .max357 .footer { order:4; }
  .max357 .mobile-bottom-nav { height:60px; padding-bottom:env(safe-area-inset-bottom); background:linear-gradient(#1d140c,#070707 82%); }
  .max357 .mobile-bottom-nav a { color:#c3ac7d; }
  .max357 .mobile-bottom-nav a.active { color:#ffe4a4; }
  .max357 .bottom-icon { font-size:24px; }
  .max357 .bottom-diamond { width:52px; height:52px; border-radius:50%; }
  .max357 .toast { bottom:80px; }
}

@media (max-width:600px) {
  .max357 .brand-name { font-size:24px; }
  .max357 .brand-mark { font-size:24px; }
  .max357 .header-actions .btn, .max357 .header-actions .btn-outline { font-size:9px; padding:7px 8px; }
  .max357 .hero { height:146px; }
  .max357 .hero-inner { top:22%; left:11px; right:36%; }
  .max357 .hero-logo { font-size:clamp(31px,8vw,42px); }
  .max357 .hero-kicker { font-size:7px; }
  .max357 .hero h2 { font-size:11px; }
  .max357 .mobile-lobby { grid-template-columns:50px minmax(0,1fr); gap:7px; }
  .max357 .mobile-vertical-menu button { width:48px; min-height:69px; }
  .max357 .mobile-vertical-menu button span { font-size:24px; }
  .max357 .mobile-vertical-menu button small { font-size:8px; }
  .max357 .mobile-game-grid { gap:8px; }
  .max357 .mobile-game-grid .game-art { aspect-ratio:.85; }
}