/* Casino Playbook: website flagship layer (Oct 18 2026). Additive only; mobile rules stay in index.html. */
:root{--wrap:1280px;--gut:max(24px,calc((100% - var(--wrap))/2));--em:#10B981;--em2:#34D399;--em3:#064E3B;--gd:#F5C542;--ink:#0b0c0e;--elev:0 1px 0 #ffffff0d inset,0 10px 30px #0008;--ease:cubic-bezier(.2,.7,.2,1)}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-feature-settings:"cv11","ss01"}
h1,h2,h3,.hero h2,.row h3{font-family:Montserrat,"Avenir Next",system-ui,sans-serif}
.deco,.deco *{pointer-events:none}
.deco.paused *,.gutter.paused *{animation-play-state:paused!important}
.hx,.deco,.gutter,.carnav{display:none}
#fbar{position:relative}
:focus-visible{outline:2px solid var(--em2);outline-offset:2px}

/* ---------- Tablet + desktop ---------- */
@media (min-width:1024px){
 body{padding-bottom:0;background:radial-gradient(1100px 520px at 85% -120px,#10B98122,transparent 70%),radial-gradient(900px 500px at 0% 10%,#F5C54210,transparent 70%),#0b0c0e!important}
 /* header */
 #stk{background:#0b0c0ee6!important;backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid #ffffff12;box-shadow:0 8px 24px #0006}
 #stk .top{padding:10px var(--gut)!important;gap:18px;border:0!important;background:transparent!important}
 #stk .top>img{width:40px;height:40px;filter:drop-shadow(0 4px 10px #10B98155)}
 .logo{-webkit-text-fill-color:#fff!important;color:#fff!important;font-size:21px!important;font-family:Montserrat,system-ui,sans-serif;letter-spacing:-.01em;line-height:1}
 .tagl{font-size:12px!important;max-width:none!important;letter-spacing:.04em;font-weight:700}
 .dir{margin-left:0!important;white-space:nowrap}
 #gsb{padding:0 var(--gut) 12px!important;border:0!important;background:transparent!important}
 .gsw{max-width:760px;border-radius:14px!important;border:1px solid #F5C54255!important;background:#ffffff0c!important;transition:border-color .2s,box-shadow .2s}
 .gsw:focus-within{border-color:var(--em2)!important;box-shadow:0 0 0 4px #10B98126!important}
 #gq{font-size:16px;padding:12px 14px}
 #gsr{max-width:760px}
 /* tabs move into header (web.js) */
 .top .tabs{position:static!important;display:flex;gap:4px;background:none!important;border:0!important;padding:0!important;margin-left:auto;z-index:auto}
 .top .tabs button{flex:none;flex-direction:row;gap:7px;padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;color:#c9cbd0!important;transition:background .2s,color .2s,box-shadow .2s}
 .top .tabs button span{font-size:16px}
 .top .tabs button:hover{background:#ffffff10;color:#fff!important}
 .top .tabs button.on{color:#fff!important;background:linear-gradient(135deg,#10B98133,#F5C54222);box-shadow:inset 0 0 0 1px #F5C54266}
 .age{padding:7px var(--gut)!important;font-size:12.5px;background:#111214!important;border-bottom:1px solid #ffffff0d}
 /* container */
 .page{max-width:var(--wrap);margin:0 auto;padding:0 24px;box-sizing:content-box}
 .page>.row h3,.row h3{margin:44px 0 14px!important;font-size:26px}
 .car{padding:4px 0 14px!important}
 .sec{padding:0}
 #gall{padding:0!important}
 .bbu{margin:-6px 0 12px!important}
 #p-home>p{margin:6px 0!important}
 .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;padding:0}
 /* hero */
 .hero{margin:28px 0 8px!important;padding:44px 48px!important;min-height:360px;display:block;position:relative;border-radius:28px!important;border:1px solid #F5C54233!important;box-shadow:var(--elev),0 0 0 1px #10B98114;background:radial-gradient(90% 120% at 100% 50%,#0F9D6B55 0%,#064E3B33 40%,transparent 70%),radial-gradient(60% 80% at 0% 0%,#F5C5421a,transparent 60%),linear-gradient(160deg,#141619,#0f1012)!important}
 .hero>svg{display:none}
 .hero h2,.hero>p,.hx{max-width:52%!important;position:relative;z-index:1}
 .hero h2{font-size:52px!important;line-height:1.02;font-weight:900;letter-spacing:-.025em;color:#fff;margin:0 0 14px!important}
 .hero h2 .acc{background:linear-gradient(90deg,#FDE68A,#9FCB5E 40%,#34D399 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
 .hero>p{font-size:18px!important;max-width:560px!important;color:#d6d7da;line-height:1.55}
 .hx{display:block}
 .hxb{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 18px}
 .hxb button{border:1px solid #ffffff22;background:#ffffff0d;color:#f1f1f1;font-weight:700;padding:11px 18px;border-radius:999px;font-size:14.5px;cursor:pointer;transition:transform .15s var(--ease),background .2s,border-color .2s}
 .hxb button:hover{background:#ffffff18;border-color:#F5C54288;transform:translateY(-1px)}
 .hxb button.pri{background:linear-gradient(135deg,#E3C447,#7FC07A 55%,#10B981);color:#0b1a12;border-color:transparent;box-shadow:0 8px 22px #10B98133}
 .hxb button.pri:hover{filter:brightness(1.06)}
 .hxs{display:flex;gap:28px;flex-wrap:wrap;color:#a7a9ae;font-size:13px}
 .hxs b{display:block;color:#fff;font-size:22px;font-family:Montserrat,system-ui,sans-serif;font-weight:800}
 .deco{display:block;position:absolute;right:28px;top:50%;transform:translateY(-50%);width:44%;max-width:500px;height:300px}
 /* filter bar */
 #fbar{position:sticky;top:var(--hdr,118px);z-index:15;margin:30px 0 4px;padding:12px 14px;border-radius:18px;background:#141518f0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #ffffff14;box-shadow:0 10px 26px #0007;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
 #fbar .search{margin:0;flex:1 1 420px}
 #fbar .search input,#fbar .search select{border-radius:12px;padding:10px 12px;font-size:14.5px}
 #fbar .search select{flex:0 0 170px}
 #fbar .chips{padding:0;flex-wrap:wrap;overflow:visible}
 .chip{cursor:pointer}
 .chip:hover{border-color:#F5C54288!important}
 /* carousels: paged grid with arrows */
 .car{display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*18px)/4);gap:18px!important;scroll-snap-type:x mandatory}
 .car>.tile,.car>.bbc{width:auto!important;flex:none}
 .row{position:relative}
 .row.hasnav h3{padding-right:110px}
 .carnav{display:flex;gap:8px;position:absolute;right:0;bottom:12px}
 .carnav button{width:38px;height:38px;border-radius:50%;border:1px solid #ffffff22;background:#ffffff0d;color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
 .carnav button:hover{background:#10B98133;border-color:#34D399}
 /* cards */
 .tile{border-radius:18px!important;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s!important}
 .tile:hover{transform:translateY(-5px)!important}
 .tile .art{height:auto;aspect-ratio:16/9}
 .tile .art img{transition:transform .35s var(--ease)}
 .tile:hover .art img{transform:scale(1.05)}
 .gtile .art,.gt .art{aspect-ratio:4/3;height:auto!important}
 .tb{padding:12px 14px 14px!important}
 .tb b{font-size:16px!important}
 .bbc{border-radius:16px!important;padding:14px!important;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
 .bbc:hover{transform:translateY(-4px);box-shadow:0 14px 30px #0009,0 0 0 1px #F5C54244}
 .bbl{width:48px!important;height:48px!important;border-radius:12px!important;box-shadow:0 4px 12px #0006}
 .money{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
 .saall{min-height:100%!important;border-radius:18px!important}
 /* unauthorized kept visibly separate */
 .row.unrow h3{border-image:linear-gradient(#EF4444,#a85454) 1!important}
 .car.uncar{background:linear-gradient(180deg,#a8545414,transparent);border:1px solid #a8545455;border-radius:18px;padding:14px!important}
 /* games/news */
 .gch{border-radius:14px;padding:12px 14px!important;background:#ffffff06;border:1px solid #ffffff10!important;transition:background .2s}
 .gch:hover{background:#ffffff0d}
 #n{column-count:2;column-gap:36px}.nitem{break-inside:avoid}
 /* modal as centered dialog */
 #m{background:#000b!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:40px 20px}
 #mc{max-width:860px!important;min-height:0!important;border-radius:22px;overflow:hidden;border:1px solid #ffffff1a;box-shadow:0 30px 80px #000c;animation:mIn .28s var(--ease) both}
 #mc>.art{height:240px!important}
 #mc .in{padding:22px 32px 30px!important}
 #mc .in details,#mc .in .f,#mc .in>p,#mc .in>h3,#mc .in>div,#mc .in>ul{max-width:none!important}
 #mc h2{font-size:30px!important}
 #mc details{background:#ffffff07;border:1px solid #ffffff10;padding:12px 16px!important}
 .close{position:sticky!important;float:right;top:12px;margin:12px 12px 0 0}
 #mc>.art .close,#mc>.gart .close{position:absolute!important;float:none;margin:0}
 @keyframes mIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
 /* footer */
 .foot{max-width:var(--wrap)!important;width:auto!important;margin:56px auto 0!important;padding:22px 26px!important;border-radius:20px!important;border:1px solid #ffffff12;background:linear-gradient(160deg,#10B98110,#141518 40%,#F5C5420d)!important;font-size:14px!important;line-height:1.6}
 .foot{box-sizing:border-box;margin-left:max(24px,calc((100% - var(--wrap))/2))!important;margin-right:max(24px,calc((100% - var(--wrap))/2))!important}
 .foot+div{margin:18px auto 0!important;max-width:var(--wrap);padding:18px 24px 40px!important}
 .rgline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid #ffffff12;font-weight:700;color:#e6e7e9}
 .rgline .b18{border:1.5px solid #EF4444;color:#fff;border-radius:999px;padding:2px 10px;font-size:13px}
 /* floating bits no longer need room for the bottom tab bar */
 #chatb{bottom:24px!important;right:24px!important}
 #chat{bottom:88px!important;right:24px!important}
 #prompt{bottom:24px!important}
 #tray{bottom:24px!important;left:50%!important;right:auto!important;transform:translateX(-50%);width:min(760px,calc(100% - 48px))}
}
@media (min-width:1024px) and (max-width:1279px){
 .dir,.tagl{display:none!important}
 .top .tabs button{padding:8px 11px;font-size:13.5px}
 .hero{padding:36px 32px!important}
 .hero h2,.hero>p,.hx{max-width:54%!important}
 .deco{width:42%;right:16px}
 .hxs{gap:20px}
 .hero h2{font-size:42px!important}
 .deco{height:270px}
}
@media (min-width:1280px){
 .car{grid-auto-columns:calc((100% - 4*18px)/5)}
}

/* ---------- Decorative casino stage (aria-hidden, not playable) ---------- */
.deco .rw{position:absolute;right:4%;top:50%;width:240px;height:240px;margin-top:-120px;filter:drop-shadow(0 16px 30px #000a)}
.deco .rw .spin{transform-origin:50% 50%;animation:rwSpin 14s linear infinite}
.deco .rw .ball{transform-origin:50% 50%;animation:rwSpin 5s linear infinite reverse}
@keyframes rwSpin{to{transform:rotate(360deg)}}
.deco .slot{position:absolute;left:2%;top:50%;margin-top:-92px;width:178px;height:184px;border-radius:22px;padding:14px 12px 16px;background:linear-gradient(160deg,#0F9D6B,#064E3B 70%);border:2px solid #F5C542aa;box-shadow:0 18px 34px #000a,inset 0 2px 0 #ffffff22}
.deco .slot:before{content:"";position:absolute;left:18px;right:18px;top:-12px;height:16px;border-radius:10px 10px 0 0;background:linear-gradient(90deg,#B8860B,#FDE68A,#B8860B)}
.deco .slot .lamps{display:flex;justify-content:center;gap:9px;margin-bottom:10px}
.deco .slot .lamps i{width:9px;height:9px;border-radius:50%;background:#FDE68A;box-shadow:0 0 8px #F5C542;animation:lamp 1.6s ease-in-out infinite}
.deco .slot .lamps i:nth-child(2n){animation-delay:.8s}
@keyframes lamp{50%{opacity:.25}}
.deco .reels{display:flex;gap:6px;height:96px;padding:6px;border-radius:12px;background:#04140e;border:1px solid #F5C54266;box-shadow:inset 0 8px 14px #000c,inset 0 -8px 14px #000c}
.deco .reel{flex:1;overflow:hidden;border-radius:8px;background:linear-gradient(#e9efe9,#fff 45%,#dfe7df)}
.deco .strip{display:flex;flex-direction:column;animation:reel 1.1s linear infinite}
.deco .reel:nth-child(2) .strip{animation-duration:.85s}.deco .reel:nth-child(3) .strip{animation-duration:1.35s}
.deco .strip b{height:42px;flex:none;display:flex;align-items:center;justify-content:center;font:900 22px/1 Montserrat,system-ui,sans-serif;color:#064E3B}
.deco .strip b.r{color:#b91c1c}
@keyframes reel{to{transform:translateY(-50%)}}
.deco .slot .lever{position:absolute;right:-16px;top:40px;width:6px;height:70px;border-radius:3px;background:linear-gradient(#ccc,#777);transform-origin:50% 100%;animation:lever 4s ease-in-out infinite}
.deco .slot .lever:before{content:"";position:absolute;left:-6px;top:-12px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fca5a5,#b91c1c)}
@keyframes lever{0%,80%,100%{transform:rotate(0)}88%{transform:rotate(28deg)}}
.deco .slot .tray{height:14px;margin-top:12px;border-radius:6px;background:#04140e;border:1px solid #F5C54255}
/* cards being dealt */
.deco .cards{position:absolute;left:36%;bottom:4px;width:150px;height:96px}
.pc{position:absolute;width:52px;height:74px;border-radius:7px;background:#fff;border:1px solid #d6d3c4;box-shadow:0 6px 14px #0008;font:800 15px/1 Montserrat,system-ui,sans-serif;color:#111;padding:5px 6px}
.pc.h{color:#b91c1c}
.pc:after{content:attr(data-s);position:absolute;right:6px;bottom:6px;font-size:20px}
.pc.back{background:repeating-linear-gradient(45deg,#064E3B 0 5px,#0F9D6B 5px 10px);border:2px solid #F5C542;color:transparent}
.pc.back:after{content:""}
.cards .pc.back{left:0;top:10px}
.cards .d1,.cards .d2,.cards .d3{left:0;top:10px;animation:deal 6s var(--ease) infinite}
.cards .d2{animation-name:deal2;animation-delay:.5s}.cards .d3{animation-name:deal3;animation-delay:1s}
@keyframes deal{0%,6%{transform:translate(0,0) rotate(0);opacity:0}14%{opacity:1}26%,84%{transform:translate(46px,-4px) rotate(-8deg);opacity:1}94%,100%{transform:translate(46px,-4px) rotate(-8deg);opacity:0}}
@keyframes deal2{0%,6%{transform:translate(0,0);opacity:0}14%{opacity:1}26%,84%{transform:translate(72px,0) rotate(2deg);opacity:1}94%,100%{transform:translate(72px,0) rotate(2deg);opacity:0}}
@keyframes deal3{0%,6%{transform:translate(0,0);opacity:0}14%{opacity:1}26%,84%{transform:translate(98px,4px) rotate(10deg);opacity:1}94%,100%{transform:translate(98px,4px) rotate(10deg);opacity:0}}
/* dice */
.dice{position:absolute;display:flex;gap:10px}
.deco .dice{left:30%;top:4px}
.die{width:34px;height:34px;border-radius:8px;background:linear-gradient(145deg,#fff,#e8e8e8);box-shadow:0 6px 12px #0008,inset 0 -2px 0 #0002;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:5px;animation:roll 3.2s var(--ease) infinite}
.die:nth-child(2){animation-delay:.25s}
.die i{width:6px;height:6px;border-radius:50%;background:#064E3B;margin:auto}
@keyframes roll{0%{transform:translate(-30px,-10px) rotate(-200deg)}35%{transform:translate(0,0) rotate(0)}42%{transform:translateY(-6px) rotate(8deg)}50%,100%{transform:none}}
/* chips stacking */
.chips3{position:absolute;width:58px;height:96px}
.deco .chips3{right:-6px;bottom:0}
.chipc{position:absolute;left:0;width:58px;height:16px;border-radius:50%;background:radial-gradient(ellipse at center,#10B981 0 34%,#fff 35% 41%,#0F9D6B 42%);border:2px dashed #FDE68A;box-shadow:0 3px 0 #064E3B,0 6px 10px #0007;animation:chip 4.8s ease-in infinite;opacity:0}
.chipc:nth-child(even){background:radial-gradient(ellipse at center,#F5C542 0 34%,#fff 35% 41%,#B8860B 42%);border-color:#ECFDF5;box-shadow:0 3px 0 #7a5a07,0 6px 10px #0007}
.chipc:nth-child(1){bottom:0;animation-delay:0s}.chipc:nth-child(2){bottom:9px;animation-delay:.6s}.chipc:nth-child(3){bottom:18px;animation-delay:1.2s}.chipc:nth-child(4){bottom:27px;animation-delay:1.8s}.chipc:nth-child(5){bottom:36px;animation-delay:2.4s}
@keyframes chip{0%{transform:translateY(-70px);opacity:0}10%{opacity:1}20%{transform:none}88%{transform:none;opacity:1}100%{transform:none;opacity:0}}
/* side gutters on very wide screens */
@media (min-width:1600px){
 .gutter{display:flex;flex-direction:column;align-items:center;gap:70px;position:fixed;top:300px;width:calc((100% - var(--wrap))/2 - 48px);max-width:220px;z-index:0;opacity:.85}
 .gutter.l{left:24px}.gutter.r{right:24px}
 .gutter .cards{position:relative;width:150px;height:96px}
 .gutter .dice,.gutter .chips3{position:relative}
 .gutter .mini{transform:scale(.8)}
 #stk,.page,.foot,.age{position:relative;z-index:1}
 #stk{position:sticky;z-index:25}
}
@media (prefers-reduced-motion:reduce){.deco *,.gutter *{animation:none!important}.chipc,.cards .pc{opacity:1!important}}
@media (prefers-reduced-motion:reduce){.cards .d1{transform:translate(46px,-4px) rotate(-8deg)}.cards .d2{transform:translate(72px,0) rotate(2deg)}.cards .d3{transform:translate(98px,4px) rotate(10deg)}}
.deco .strip b.bar{font-size:12px;letter-spacing:-.02em}