/* the display font of the casino: Chakra Petch (SIL Open Font License, public/fonts/Chakra-Petch-OFL.txt), served from this site (no request to a third party) */
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/chakra-petch-600.ttf') format('truetype') }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/chakra-petch-700.ttf') format('truetype') }

/* CASINO DESIGN (owner, 11 Nov 2026: "refă complet designul jocurilor: modern, logo-ul platformei unde poți, cât mai detaliat pentru a atrage utilizatorii").
   One dark "arena" for the whole casino (lobby, the ten games, the fair page), independent of the light / dark theme of the site: the variables of the site are redefined inside #p-casino and #p-fair, so every game
   that uses var(--surface), var(--fg)… follows. New markup (casino-ui.js): .cxw (arena content; not .cx: that is the close button of the site), .cx-bar / .cx-hud / .cx-pill (game header + wallet), .cx-jp (jackpot), .cx-hero / .cx-pot / .cx-card (lobby), .cx-win (celebration).
   The games keep their own markup and ids; here they only get a new skin (panels, controls, stages with the logo as a watermark, result banners, tables).  Per-game colour: --h (hue) set on .cx-game / .cx-card. */

/* ---------- tokens + arena ---------- */
#p-casino, #p-fair {
  --bg:#050912; --surface:#0b1424; --surface2:#111e35; --line:#1e2f4d; --fg:#eaf1ff; --mut:#8fa4c6;
  --accent:#2dd4bf; --accent2:#38bdf8; --gold:#f5c04a; --ok:#4ade80; --bad:#ff6b7a; --warn:#fcd34d;
  --grad:linear-gradient(135deg,#19d9b9,#0a9fd0); --h:172;
  --glass:linear-gradient(180deg,rgba(22,37,66,.82),rgba(10,18,34,.86)); --edge:rgba(130,170,240,.16); --ease:cubic-bezier(.2,.8,.2,1);
  color:var(--fg);
}
#p-casino { position:relative; isolation:isolate; width:100%; max-width:1240px; margin:0 auto; padding:18px; border-radius:26px; overflow:hidden; background:#050912; border:1px solid rgba(120,160,230,.12); box-shadow:0 30px 80px rgba(0,0,0,.45); }
#p-casino::before { content:''; position:absolute; inset:-30%; z-index:-2; pointer-events:none;
  background:radial-gradient(40% 36% at 14% 12%,rgba(45,212,191,.22),transparent 70%),radial-gradient(38% 40% at 88% 8%,rgba(99,102,241,.20),transparent 70%),radial-gradient(44% 40% at 78% 96%,rgba(245,192,74,.12),transparent 70%),radial-gradient(36% 34% at 6% 90%,rgba(56,189,248,.14),transparent 70%);
  animation:cx-aurora 28s ease-in-out infinite alternate; }
#p-casino::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.9;
  background:linear-gradient(rgba(130,170,240,.035) 1px,transparent 1px) 0 0 / 46px 46px, linear-gradient(90deg,rgba(130,170,240,.035) 1px,transparent 1px) 0 0 / 46px 46px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 60%,transparent 100%); }
/* the logo as a faint watermark behind a game page (the lobby has it in the hero) */
.cx-game::before { content:''; position:absolute; right:-70px; top:60px; width:460px; height:460px; background:url('/logo-mark.png') center / contain no-repeat; opacity:.05; transform:rotate(14deg); pointer-events:none; z-index:-1 }
.cxw { position:relative }
@keyframes cx-aurora { from { transform:translate3d(-2%,-1%,0) scale(1) } to { transform:translate3d(3%,2%,0) scale(1.08) } }
@media (prefers-reduced-motion:reduce) { #p-casino::before { animation:none } }
#p-casino .mut, #p-fair .mut { color:var(--mut) }
#p-casino a { color:#7dd3fc }
#p-casino h2, #p-casino h3 { color:var(--fg) }

/* ---------- panels, forms, buttons (skin of every game) ---------- */
#p-casino .card, #p-fair .card { background:var(--glass); border:1px solid var(--edge); border-radius:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 14px 44px rgba(0,0,0,.38); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--fg); }
#p-casino .state.card { padding:26px; text-align:center }
#p-casino .field > span { font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--mut) }
#p-casino input[type=number], #p-casino input[type=text], #p-casino input:not([type]), #p-casino select, #p-fair input, #p-fair select { background:rgba(4,9,20,.75); border:1px solid #223556; border-radius:12px; color:var(--fg); padding:11px 13px; font-weight:700; font-variant-numeric:tabular-nums; transition:border-color .2s,box-shadow .2s }
#p-casino input:focus, #p-casino select:focus, #p-fair input:focus, #p-fair select:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(45,212,191,.2) }
#p-casino .seg { display:inline-flex; gap:4px; padding:4px; border-radius:14px; background:rgba(4,9,20,.7); border:1px solid #223556 }
#p-casino .seg button { border:0; background:transparent; color:var(--mut); font-weight:800; padding:9px 16px; border-radius:10px; cursor:pointer; transition:background .2s,color .2s,transform .15s }
#p-casino .seg button:hover { color:var(--fg) } #p-casino .seg button.on { background:var(--grad); color:#032a2a; box-shadow:0 4px 16px rgba(45,212,191,.35) }
#p-casino .cfquick { display:flex; flex-wrap:wrap; gap:6px }
#p-casino .cfquick .btn, #p-casino .btn.ghost.sm { background:rgba(17,30,53,.9); border:1px solid #29406a; color:#cfe0ff; border-radius:999px; padding:6px 13px; font-weight:800; font-size:12.5px; box-shadow:none; transition:border-color .2s,transform .15s,box-shadow .2s }
#p-casino .cfquick .btn:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 4px 14px rgba(45,212,191,.2) }
#p-casino .btn:not(.ghost):not(.sm):not(.cfquick *) { background:var(--grad); color:#03292a; border:0; border-radius:14px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; padding:14px 22px; box-shadow:0 8px 26px rgba(45,212,191,.32),inset 0 1px 0 rgba(255,255,255,.45); transition:transform .15s var(--ease),box-shadow .2s,filter .2s; position:relative; overflow:hidden }
#p-casino .btn:not(.ghost):not(.sm):not(.cfquick *)::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%); transform:translateX(-120%); transition:transform .6s var(--ease); pointer-events:none }
#p-casino .btn:not(.ghost):not(.sm):not(.cfquick *):hover:not([disabled]) { transform:translateY(-2px); box-shadow:0 12px 34px rgba(45,212,191,.45),inset 0 1px 0 rgba(255,255,255,.5); filter:saturate(1.1) }
#p-casino .btn:not(.ghost):not(.sm):not(.cfquick *):hover:not([disabled])::after { transform:translateX(120%) }
#p-casino .btn:not(.ghost):not(.sm):not(.cfquick *):active:not([disabled]) { transform:translateY(0) scale(.985) }
#p-casino .btn.green { background:linear-gradient(135deg,#4ade80,#16a34a) !important; color:#042312 !important; box-shadow:0 8px 28px rgba(74,222,128,.4) !important; animation:cx-pulse 1.6s ease-in-out infinite }
#p-casino .btn[disabled], #p-casino .btn.cfbusy { filter:grayscale(.7) brightness(.7); cursor:not-allowed; box-shadow:none !important; animation:none !important }
#p-casino .btn.ghost { background:rgba(17,30,53,.7); border:1px solid #29406a; color:#cfe0ff } #p-casino .btn.ghost:hover { border-color:var(--accent) }
@keyframes cx-pulse { 0%,100% { box-shadow:0 8px 28px rgba(74,222,128,.35) } 50% { box-shadow:0 8px 40px rgba(74,222,128,.7) } }
#p-casino .switch span { color:var(--mut) }
#p-casino .failTxt { color:var(--bad) } #p-casino .okTxt { color:var(--ok) } #p-casino .small { color:var(--mut) }
#p-casino .cr { color:var(--gold); font-weight:800 }

/* result banners of the games */
#p-casino .cfres, #p-casino .plres { display:block; margin:10px 0; padding:11px 16px; border-radius:14px; font-weight:800; text-align:center; background:rgba(4,9,20,.6); border:1px solid #223556; color:var(--fg) }
#p-casino .cfres.win, #p-casino .plres.win { background:linear-gradient(135deg,rgba(74,222,128,.22),rgba(22,163,74,.12)); border-color:rgba(74,222,128,.55); color:#b9ffd1; box-shadow:0 0 30px rgba(74,222,128,.22) }
#p-casino .cfres.lose, #p-casino .plres.lose { background:linear-gradient(135deg,rgba(255,107,122,.16),rgba(120,30,50,.14)); border-color:rgba(255,107,122,.4); color:#ffc2c9 }
#p-casino .cfres.pop, #p-casino .plres.pop { animation:cx-pop .5s var(--ease) }
@keyframes cx-pop { 0% { transform:scale(.88); opacity:.3 } 60% { transform:scale(1.04) } 100% { transform:scale(1); opacity:1 } }

/* history tables */
#p-casino .cfhist h3, #p-casino .cfhist h4 { margin:0 0 10px; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut) }
#p-casino .tablewrap { background:rgba(4,9,20,.5) !important; border:1px solid #1b2c4a !important; border-radius:14px !important }
#p-casino .ltable th { background:rgba(17,30,53,.9); color:var(--mut); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; border-bottom:1px solid #1e2f4d }
#p-casino .ltable td { border-bottom:1px solid rgba(30,47,77,.7); color:var(--fg) } #p-casino .ltable tr:hover td { background:rgba(45,212,191,.05) }
#p-casino .ltable a { color:#7dd3fc }
#p-casino .cfhash { color:#9fd8ff; background:rgba(4,9,20,.6); border:1px solid #223556; border-radius:8px; padding:2px 6px }

/* the provably fair link of every game */
#p-casino .casfairbox { display:flex; justify-content:center; margin:2px 0 }
#p-casino .casfairbox a { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:rgba(45,212,191,.08); border:1px solid rgba(45,212,191,.35); color:#7ff0dc; font-weight:800; font-size:12.5px; text-decoration:none; transition:background .2s,transform .15s }
#p-casino .casfairbox a::before { content:''; width:16px; height:16px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V5l8-3zm-1.2 13.2l5.2-5.2-1.4-1.4-3.8 3.8-1.6-1.6-1.4 1.4 3 3z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V5l8-3zm-1.2 13.2l5.2-5.2-1.4-1.4-3.8 3.8-1.6-1.6-1.4 1.4 3 3z'/%3E%3C/svg%3E") center/contain no-repeat }
#p-casino .casfairbox a:hover { background:rgba(45,212,191,.16); transform:translateY(-1px) }

/* ---------- STAGES: the board of every game gets a frame, a glow in the colour of the game and the logo as a watermark ---------- */
#p-casino .cfslot, #p-casino .plboard, #p-casino .dcboard, #p-casino .sgboard, #p-casino .xgboard, #p-casino .rtboard, #p-casino .rtwheel { position:relative; border-radius:22px; }
#p-casino .plboard, #p-casino .dcboard, #p-casino .sgboard, #p-casino .xgboard, #p-casino .rtboard { background:radial-gradient(120% 90% at 50% 0%,hsl(var(--h) 60% 22% / .55),transparent 62%),linear-gradient(180deg,rgba(9,16,31,.92),rgba(5,10,22,.96)) !important; border:1px solid hsl(var(--h) 70% 55% / .28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),inset 0 0 60px hsl(var(--h) 80% 40% / .12),0 0 44px hsl(var(--h) 80% 50% / .16) !important; overflow:hidden }
#p-casino .plboard::before, #p-casino .dcboard::before, #p-casino .sgboard::before, #p-casino .xgboard::before, #p-casino .rtboard::before, #p-casino .cfmain::before { content:''; position:absolute; inset:0; background:url('/logo-mark.png') no-repeat center / min(46%,260px) auto; opacity:.055; pointer-events:none; filter:grayscale(.2); z-index:0 }
#p-casino .plboard > *, #p-casino .dcboard > *, #p-casino .sgboard > *, #p-casino .xgboard > *, #p-casino .rtboard > * { position:relative; z-index:1 }
#p-casino .cfmain { position:relative; overflow:hidden } #p-casino .cfmain > * { position:relative; z-index:1 }
#p-casino .cfslot { padding:18px 0 4px; background:radial-gradient(60% 70% at 50% 62%,hsl(var(--h) 80% 50% / .20),transparent 70%) }
#p-casino .cx-game .card { position:relative }
/* a card of the game with a thin gradient border in the colour of the game */
#p-casino .cx-game .card::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(160deg,hsl(var(--h) 80% 60% / .45),transparent 40%,hsl(var(--h) 80% 60% / .12)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none }

/* ---------- GAME PAGE: header bar (logo, title, wallet), jackpot pill, strip ---------- */
.cxw { width:100%; min-width:0 }
.cx-game { max-width:1040px; margin:0 auto } .cx-game.wide { max-width:1180px }
.cx-bar { display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap; padding:12px 16px; margin-bottom:12px; border-radius:20px; background:var(--glass); border:1px solid hsl(var(--h) 70% 55% / .32); box-shadow:0 0 36px hsl(var(--h) 80% 50% / .12),inset 0 1px 0 rgba(255,255,255,.05); position:relative }
.cx-back { display:inline-flex; align-items:center; gap:6px; color:#9fc4ff !important; font-weight:800; text-decoration:none; padding:8px 12px; border-radius:12px; background:rgba(17,30,53,.7); border:1px solid #29406a; transition:border-color .2s,transform .15s } .cx-back:hover { border-color:var(--accent); transform:translateX(-2px) }
.cx-brand { display:flex; align-items:center; gap:12px; min-width:0 }
.cx-mark { position:relative; display:grid; place-items:center; width:54px; height:54px; border-radius:16px; background:linear-gradient(145deg,hsl(var(--h) 70% 40%),hsl(var(--h) 80% 22%)); box-shadow:0 8px 24px hsl(var(--h) 80% 40% / .45),inset 0 1px 0 rgba(255,255,255,.35) }
.cx-mark img { width:36px; height:36px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.4) }
.cx-title small { display:block; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mut) } .cx-title small b { color:var(--accent) }
.cx-title h2 { margin:2px 0 0; font-size:24px; line-height:1.1; display:flex; align-items:center; gap:10px; letter-spacing:-.01em }
.cx-gl { display:inline-grid; place-items:center } .cx-gl svg { width:30px; height:30px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)) }
.cx-hud { margin-left:auto; display:flex; flex-direction:column; gap:10px; align-items:flex-end; min-width:0; flex:1 1 380px }
.cx-hudrow { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:stretch; max-width:100% }
.cx-pill { display:flex; flex-direction:column; justify-content:center; gap:1px; padding:7px 14px; border-radius:14px; background:rgba(4,9,20,.65); border:1px solid #223556; min-width:0 }
.cx-pill small { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mut) } .cx-pill b { font-size:17px; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:5px }
.cx-pill.main { background:linear-gradient(135deg,rgba(45,212,191,.2),rgba(14,116,144,.15)); border-color:rgba(45,212,191,.55); box-shadow:0 0 22px rgba(45,212,191,.18) } .cx-pill.main b { color:#eafffb; font-size:19px }
.cx-pill.dim b { color:var(--mut); font-size:15px }
.cx-add { border:0; cursor:pointer; padding:0 16px; min-height:44px; border-radius:14px; font-weight:900; letter-spacing:.04em; background:var(--grad); color:#032a2a; box-shadow:0 6px 20px rgba(45,212,191,.32); transition:transform .15s,box-shadow .2s } .cx-add:hover { transform:translateY(-1px); box-shadow:0 10px 26px rgba(45,212,191,.45) } .cx-add.open { background:rgba(17,30,53,.9); color:#cfe0ff; box-shadow:none; border:1px solid #29406a }
.cx-wpanel { width:100%; padding:14px; border-radius:16px; background:rgba(4,9,20,.6); border:1px solid #223556; display:grid; gap:10px } .cx-wpanel[hidden] { display:none }
.cx-wpanel .cw-form { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap } .cx-wpanel .cw-amt { flex:1 1 150px; display:flex; flex-direction:column; gap:4px; min-width:0 } .cx-wpanel .cw-amt input { width:100%; box-sizing:border-box }
.cx-wpanel .small { margin:0; line-height:1.5 } .cx-wpanel .btn { white-space:nowrap }
.cx-jp { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 12px; padding:10px 16px; border-radius:18px; background:linear-gradient(110deg,rgba(245,192,74,.16),rgba(245,192,74,.04) 55%,rgba(45,212,191,.06)); border:1px solid rgba(245,192,74,.45); box-shadow:0 0 34px rgba(245,192,74,.12) } .cx-jp:empty { display:none }
.cx-jp-ic { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe9a8,#f5c04a 60%,#b9801a); color:#5a3a00; font-size:20px; box-shadow:0 0 22px rgba(245,192,74,.55); animation:cx-glow 2.6s ease-in-out infinite }
@keyframes cx-glow { 0%,100% { box-shadow:0 0 14px rgba(245,192,74,.35) } 50% { box-shadow:0 0 30px rgba(245,192,74,.75) } }
.cx-jp small { display:block; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#e8c46a } .cx-jp b { display:flex; align-items:center; gap:6px; font-size:24px; font-variant-numeric:tabular-nums; color:#fff4cf; text-shadow:0 0 20px rgba(245,192,74,.4) }
.cx-jp-note { flex:1 1 240px; font-size:12px; color:var(--mut); line-height:1.45 } .cx-jp-last { font-size:12px; color:#e8c46a }
#p-casino .casstrip { margin:0 0 14px; border-radius:16px; background:rgba(4,9,20,.6); border:1px solid #1e2f4d } #p-casino .casstrip .cl { color:var(--mut) }
.cx-stage { min-width:0 }
.cx-more { margin-top:22px } .cx-more h3 { margin:0 0 10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut) }
.cx-minis { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px }
.cx-mini { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; text-decoration:none; color:var(--fg) !important; background:linear-gradient(135deg,hsl(var(--h) 60% 22% / .55),rgba(8,14,28,.9)); border:1px solid hsl(var(--h) 60% 50% / .25); transition:transform .2s var(--ease),border-color .2s,box-shadow .2s } .cx-mini:hover { transform:translateY(-3px); border-color:hsl(var(--h) 80% 60% / .7); box-shadow:0 10px 26px hsl(var(--h) 80% 50% / .25) }
.cx-mini-ic svg { width:34px; height:34px; display:block } .cx-mini b { font-size:13.5px }

/* ---------- LOBBY ---------- */
.cx-lobby { max-width:1180px; margin:0 auto; display:grid; gap:18px }
.cx-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:22px; align-items:center; padding:34px; border-radius:28px; overflow:hidden; background:linear-gradient(120deg,rgba(14,60,76,.88),rgba(11,20,40,.92) 55%,rgba(40,28,80,.7)); border:1px solid rgba(45,212,191,.32); box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07) }
.cx-hero::before { content:''; position:absolute; right:-70px; top:-90px; width:420px; height:420px; background:url('/logo-mark.png') no-repeat center / contain; opacity:.10; transform:rotate(14deg); pointer-events:none; animation:cx-float 9s ease-in-out infinite }
.cx-hero::after { content:''; position:absolute; inset:0; background:radial-gradient(60% 80% at 100% 0%,rgba(245,192,74,.14),transparent 60%); pointer-events:none }
@keyframes cx-float { 0%,100% { transform:rotate(14deg) translateY(0) } 50% { transform:rotate(10deg) translateY(-14px) } }
.cx-hero > * { position:relative; z-index:1 }
.cx-kicker { display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 8px; border-radius:999px; background:rgba(4,9,20,.55); border:1px solid rgba(45,212,191,.4); font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:#8ff3df } .cx-kicker img { width:22px; height:22px; border-radius:7px }
.cx-hero h1 { margin:14px 0 10px; font-size:clamp(34px,5vw,56px); line-height:1.02; letter-spacing:-.025em; color:#fff } .cx-hero h1 em { font-style:normal; background:linear-gradient(90deg,#2dd4bf,#38bdf8 60%,#a5b4fc); -webkit-background-clip:text; background-clip:text; color:transparent }
.cx-hero p { margin:0 0 18px; max-width:520px; color:#b9c9e6; line-height:1.6; font-size:15.5px }
.cx-cta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px } .cx-cta .btn { text-decoration:none; min-height:48px; display:inline-flex; align-items:center }
.cx-badges { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0 } .cx-badges li { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; background:rgba(4,9,20,.5); border:1px solid #223556; font-size:12.5px; font-weight:800; color:#cfe0ff } .cx-badges svg { width:16px; height:16px; color:var(--accent) }
.cx-pot { position:relative; text-align:center; padding:26px 20px 22px; border-radius:26px; background:radial-gradient(90% 70% at 50% 0%,rgba(245,192,74,.22),transparent 70%),rgba(6,12,26,.85); border:1px solid rgba(245,192,74,.55); box-shadow:0 0 60px rgba(245,192,74,.18),inset 0 0 40px rgba(245,192,74,.07); overflow:hidden }
.cx-pot::before { content:''; position:absolute; inset:-60%; background:conic-gradient(from 0deg,transparent 0 70%,rgba(245,192,74,.35) 82%,transparent 94%); animation:cx-spin 9s linear infinite; z-index:0 } .cx-pot::after { content:''; position:absolute; inset:2px; border-radius:24px; background:rgba(6,12,26,.92); z-index:0 }
.cx-pot > * { position:relative; z-index:1 }
@keyframes cx-spin { to { transform:rotate(360deg) } }
.cx-pot-logo { width:64px; height:64px; border-radius:18px; box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 0 3px rgba(245,192,74,.5); animation:cx-bob 4s ease-in-out infinite } @keyframes cx-bob { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
.cx-pot small { display:block; margin:12px 0 4px; font-size:11px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:#e8c46a }
.cx-pot b { display:flex; justify-content:center; align-items:center; gap:8px; font-size:clamp(34px,5vw,50px); line-height:1; font-variant-numeric:tabular-nums; color:#fff4cf; text-shadow:0 0 30px rgba(245,192,74,.55) }
.cx-pot .cx-sub { display:block; margin-top:10px; font-size:12.5px; color:#a9b9d6; line-height:1.5 }
.cx-tabs { display:flex; gap:8px; flex-wrap:wrap; align-items:center } .cx-tabs h2 { margin:0 14px 0 4px; font-size:20px }
.cx-tab { border:1px solid #29406a; background:rgba(17,30,53,.7); color:#bcd0f5; padding:8px 16px; border-radius:999px; font:inherit; font-weight:800; font-size:13px; cursor:pointer; transition:all .2s } .cx-tab:hover { border-color:var(--accent); color:#fff } .cx-tab.on { background:var(--grad); color:#032a2a; border-color:transparent; box-shadow:0 6px 18px rgba(45,212,191,.3) }
.cx-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px }
.cx-card { position:relative; display:flex; flex-direction:column; border-radius:22px; overflow:hidden; text-decoration:none; color:var(--fg) !important; background:linear-gradient(180deg,rgba(15,26,48,.95),rgba(7,13,26,.98)); border:1px solid hsl(var(--h) 60% 50% / .28); box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .25s var(--ease),box-shadow .25s,border-color .25s; min-width:0 }
.cx-card:hover { transform:translateY(-6px) scale(1.01); border-color:hsl(var(--h) 85% 62% / .8); box-shadow:0 18px 44px hsl(var(--h) 80% 45% / .38) }
.cx-art { position:relative; height:134px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(90% 100% at 50% 110%,hsl(var(--h) 80% 50% / .55),transparent 70%),linear-gradient(160deg,hsl(var(--h) 65% 26%),hsl(var(--h) 70% 12%)) }
.cx-art::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px); opacity:.6 }
.cx-wm { position:absolute; right:-14px; bottom:-14px; width:84px; height:84px; opacity:.16; transform:rotate(-12deg); transition:transform .4s var(--ease),opacity .3s } .cx-card:hover .cx-wm { transform:rotate(-4deg) scale(1.15); opacity:.28 }
.cx-logo svg { width:76px; height:76px; position:relative; filter:drop-shadow(0 8px 14px rgba(0,0,0,.55)); transition:transform .35s var(--ease) } .cx-card:hover .cx-logo svg { transform:scale(1.14) rotate(-4deg) }
.cx-kind, .cx-rtp { position:absolute; top:10px; z-index:2; padding:3px 10px; border-radius:999px; font-size:10.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase } .cx-kind { left:10px; background:rgba(4,9,20,.7); border:1px solid rgba(255,255,255,.18); color:#e6efff } .cx-rtp { right:10px; background:rgba(74,222,128,.18); border:1px solid rgba(74,222,128,.5); color:#b6ffd0 }
.cx-body { display:flex; flex-direction:column; gap:8px; padding:14px 14px 14px; flex:1; min-width:0 } .cx-body h3 { margin:0; font-size:17px; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cx-body p { margin:0; font-size:12.5px; line-height:1.45; color:var(--mut); min-height:54px }
.cx-meta { display:grid; grid-template-columns:1fr 1fr; gap:6px } .cx-meta span { display:flex; flex-direction:column; padding:6px 9px; border-radius:10px; background:rgba(4,9,20,.6); border:1px solid #1e2f4d } .cx-meta small { font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--mut) } .cx-meta b { font-size:13px; font-variant-numeric:tabular-nums }
.cx-play { margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; border-radius:12px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:13px; background:linear-gradient(135deg,hsl(var(--h) 75% 48%),hsl(var(--h) 80% 36%)); color:#fff; box-shadow:0 6px 18px hsl(var(--h) 80% 40% / .4); transition:filter .2s } .cx-card:hover .cx-play { filter:brightness(1.18) } .cx-play i { font-style:normal; transition:transform .2s } .cx-card:hover .cx-play i { transform:translateX(4px) }
.cx-card.off { opacity:.5; filter:grayscale(.6) } .cx-card.off .cx-play { background:#1b2b47; box-shadow:none; color:var(--mut) } .cx-card[hidden] { display:none }
.cx-trust { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.cx-tile { padding:16px; border-radius:18px; background:var(--glass); border:1px solid var(--edge); display:grid; gap:6px } .cx-tile svg { width:26px; height:26px; color:var(--accent) } .cx-tile b { font-size:14.5px } .cx-tile span { font-size:12.5px; color:var(--mut); line-height:1.5 }
.cx-wins { padding:18px; border-radius:22px; background:var(--glass); border:1px solid var(--edge) } .cx-wins h3 { margin:0 0 10px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#e8c46a }
.cx-win-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid rgba(30,47,77,.7); font-size:13.5px } .cx-win-row:last-child { border-bottom:0 } .cx-win-row .amt { margin-left:auto; color:#ffe9a8; font-weight:900 }
.cx-18 { margin:0; font-size:12px; color:var(--mut); text-align:center; line-height:1.6 }

/* the wallet in the lobby (full width card) */
.cx-lobby .cx-hud { margin:0; flex-direction:column; align-items:stretch; padding:14px 16px; border-radius:22px; background:var(--glass); border:1px solid var(--edge) } .cx-lobby .cx-hudrow { justify-content:flex-start }

/* ---------- CELEBRATION (big win / jackpot): the logo bursts, confetti falls ---------- */
.cx-win { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:radial-gradient(circle at 50% 45%,rgba(4,9,20,.55),rgba(4,9,20,.82)); animation:cx-fade .25s ease-out; cursor:pointer } .cx-win.out { opacity:0; transition:opacity .5s }
@keyframes cx-fade { from { opacity:0 } to { opacity:1 } }
.cx-win canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.cx-win-card { position:relative; display:grid; justify-items:center; gap:4px; padding:34px 46px; border-radius:30px; text-align:center; background:linear-gradient(160deg,rgba(18,34,62,.96),rgba(6,12,26,.97)); border:2px solid rgba(45,212,191,.7); box-shadow:0 0 90px rgba(45,212,191,.45),0 30px 70px rgba(0,0,0,.6); animation:cx-burst .7s var(--ease) }
.cx-win.jackpot .cx-win-card { border-color:rgba(245,192,74,.9); box-shadow:0 0 110px rgba(245,192,74,.6),0 30px 70px rgba(0,0,0,.6) }
@keyframes cx-burst { 0% { transform:scale(.4) rotate(-6deg); opacity:0 } 60% { transform:scale(1.08) rotate(1deg); opacity:1 } 100% { transform:scale(1) } }
.cx-win-logo { width:92px; height:92px; border-radius:26px; box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 4px rgba(45,212,191,.5); animation:cx-bob 2.4s ease-in-out infinite } .cx-win.jackpot .cx-win-logo { box-shadow:0 12px 40px rgba(0,0,0,.55),0 0 0 4px rgba(245,192,74,.7) }
.cx-win-card small { margin-top:10px; font-size:14px; font-weight:900; letter-spacing:.3em; color:#8ff3df } .cx-win.jackpot .cx-win-card small { color:#ffd978 }
.cx-win-card b { font-size:clamp(42px,9vw,72px); line-height:1.05; font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff,#7ff0dc); -webkit-background-clip:text; background-clip:text; color:transparent } .cx-win.jackpot .cx-win-card b { background:linear-gradient(180deg,#fff7d6,#f5c04a) ; -webkit-background-clip:text; background-clip:text }
.cx-win-card span { font-size:13px; color:#a9b9d6 }

/* ---------- logo on the boards (wheel hubs, card backs; NOT on the coin) ---------- */
.cx-cardback { display:grid; place-items:center; background:linear-gradient(145deg,#12c8b0,#0b6fb0) !important; border:3px solid #e9fffb !important } .cx-cardback img { width:56%; height:auto; border-radius:14%; opacity:.95 }

/* ---------- responsive ---------- */
@media (max-width:1180px) { .cx-grid { grid-template-columns:repeat(4,minmax(0,1fr)) } .cx-trust { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:980px) { .cx-hero { grid-template-columns:1fr; padding:26px } .cx-grid { grid-template-columns:repeat(3,minmax(0,1fr)) } .cx-hud { align-items:stretch; flex-basis:100% } .cx-hudrow { justify-content:flex-start } }
@media (max-width:760px) {
  #p-casino { padding:10px; border-radius:20px }
  .cx-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px } .cx-art { height:96px } .cx-logo svg { width:56px; height:56px } .cx-wm { width:60px; height:60px } .cx-body { padding:10px } .cx-body h3 { font-size:14.5px } .cx-body p, .cx-meta { display:none } .cx-kind { font-size:9.5px; padding:2px 8px } .cx-rtp { font-size:9.5px; padding:2px 8px } .cx-play { padding:8px; font-size:12px }
  .cx-hero { padding:20px; gap:16px; border-radius:22px } .cx-hero p { font-size:14px } .cx-pot { padding:18px 14px } .cx-pot-logo { width:50px; height:50px }
  .cx-trust { grid-template-columns:1fr 1fr; gap:8px } .cx-tile { padding:12px } .cx-tile span { display:none }
  .cx-bar { padding:10px 12px; gap:10px } .cx-title h2 { font-size:20px } .cx-mark { width:44px; height:44px; border-radius:13px } .cx-mark img { width:30px; height:30px }
  .cx-hudrow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100% } .cx-pill.dim { display:none } .cx-add { grid-column:1 / -1 }
  .cx-jp { padding:8px 12px } .cx-jp b { font-size:20px } .cx-jp-note { display:none }
  .cx-win-card { padding:24px 26px } .cx-win-logo { width:70px; height:70px }
  .cx-minis { grid-template-columns:repeat(2,minmax(0,1fr)) }
}

/* logo on the boards: the roulette hub when idle, the back of the cards (Hi-Lo, War) */
#p-casino .rw-hub:empty { background:#caa24a url('/logo-mark.png') center / 118% no-repeat; box-shadow:inset 0 0 0 4px #caa24a,inset 0 0 0 6px #6b4a13,0 4px 14px rgba(0,0,0,.5) }   /* the logo fills the round hub: a round logo in the centre of the wheel (owner, 11 Nov 2026) */
#p-casino .pfc.back { background:linear-gradient(145deg,#12c8b0,#0b6fb0); border-color:#e9fffb; box-shadow:0 8px 22px rgba(0,0,0,.45) }
#p-casino .pfc.back span { width:62%; height:auto; aspect-ratio:1; border:0; border-radius:14%; background:url('/logo-mark.png') center / cover no-repeat; box-shadow:0 2px 10px rgba(0,0,0,.4) }
#p-casino .pfc { box-shadow:0 8px 22px rgba(0,0,0,.4) }
#p-casino .xw-svg { filter:drop-shadow(0 14px 30px hsl(var(--h) 80% 40% / .35)) }

/* plinko: the ball is the logo; the pegs glow in the colour of the game */
#p-casino .pl-ball { fill:url(#plLogo); stroke:#e9fffb; stroke-width:1.2; filter:drop-shadow(0 0 7px rgba(45,212,191,.8)) }
#p-casino .pl-peg { fill:#9fc4ff; filter:drop-shadow(0 0 3px rgba(125,190,255,.7)) }

/* tighter header of a game page: the game comes first */
.cx-game .cx-jp { padding:7px 14px; margin-bottom:10px; gap:12px } .cx-game .cx-jp-ic { width:34px; height:34px; font-size:16px } .cx-game .cx-jp b { font-size:20px }
.cx-game .casstrip { padding:6px 12px; margin-bottom:12px }
.cx-bar { padding:10px 14px }
@media (max-width:760px) {
  .cx-hero { padding:16px } .cx-hero h1 { font-size:30px; margin:10px 0 12px } .cx-hero p, .cx-badges { display:none }
  .cx-cta { margin-bottom:0; flex-wrap:nowrap } .cx-cta .btn { flex:1 1 0; justify-content:center; padding:11px 10px; min-height:44px; font-size:13px }
  .cx-pot { padding:14px 12px } .cx-pot small { margin:8px 0 2px } .cx-pot b { font-size:32px }
  .cx-lobby { gap:12px } .cx-tabs h2 { display:none } .cx-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none } .cx-tab { flex:0 0 auto }
}

/* the fair page: the logo in the hero */
#p-fair .fairhero { position:relative; padding-right:120px } #p-fair .fairhero::after { content:''; position:absolute; right:20px; top:18px; width:84px; height:84px; border-radius:22px; background:url('/logo-mark.png') center / cover no-repeat; box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 3px rgba(45,212,191,.45) }
@media (max-width:640px) { #p-fair .fairhero { padding-right:20px; padding-top:92px } #p-fair .fairhero::after { left:20px; right:auto; width:56px; height:56px; top:16px } }

/* never wider than the screen (the rules of the old .cgpage, now for .cx-game) */
.cx-game .card { max-width:100% } .cx-game img, .cx-game svg { max-width:100% } .cx-game .tablewrap { max-width:100%; overflow-x:auto }

/* ---------- Hi-Lo and War: much bigger cards (owner, 11 Nov 2026) ---------- */
#p-casino .pfc { width:96px; height:138px; margin:6px; border-radius:15px } #p-casino .pfc b { font-size:42px } #p-casino .pfc i { font-size:38px }
#p-casino .pfc.big { width:156px; height:224px; border-radius:20px; box-shadow:0 0 0 3px rgba(245,192,74,.5),0 18px 40px rgba(0,0,0,.5) } #p-casino .pfc.big b { font-size:68px } #p-casino .pfc.big i { font-size:60px }
#p-war .pfc { width:150px; height:214px; border-radius:20px } #p-war .pfc b { font-size:64px } #p-war .pfc i { font-size:56px }
#p-war .xhcards, #p-hilo .xhcards { gap:6px } #p-war .xrrow { gap:56px }
@media (max-width:560px) {
  #p-casino .pfc { width:68px; height:98px; margin:3px; border-radius:11px } #p-casino .pfc b { font-size:30px } #p-casino .pfc i { font-size:27px }
  #p-casino .pfc.big { width:124px; height:178px } #p-casino .pfc.big b { font-size:52px } #p-casino .pfc.big i { font-size:46px }
  #p-war .pfc { width:112px; height:160px } #p-war .pfc b { font-size:48px } #p-war .pfc i { font-size:42px } #p-war .xrrow { gap:22px }
}

/* ---------- the display font + a PROGRESSIVE JACKPOT that stands out ---------- */
#p-casino, #p-fair { --display:'Chakra Petch', ui-sans-serif, system-ui, 'Segoe UI', sans-serif }
#p-casino h1, #p-casino h2, #p-casino h3, #p-fair h2, #p-fair h3, .cx-kicker, .cx-tab, .cx-play, .cx-kind, .cx-rtp, .cx-pill b, .cx-pill small, .cx-add, .cx-back, .cx-meta b, .cx-mini b, .cx-title small, .cx-win-card, .cx-badges li, .cx-tile b, #p-casino .btn:not(.ghost):not(.sm), #p-casino .seg button, #p-casino .cfres, #p-casino .plres { font-family:var(--display) }
#p-casino h1, #p-casino h2, .cx-hero h1, .cx-title h2 { font-weight:700; letter-spacing:.01em }
.cx-hero h1 { font-size:clamp(38px,5.6vw,66px); text-transform:uppercase; letter-spacing:.02em; line-height:1 }
.cx-body h3 { font-weight:700; font-size:18px; letter-spacing:.03em; text-transform:uppercase }
.cx-title h2 { text-transform:uppercase; font-size:26px }
.cx-pill b { font-weight:700; letter-spacing:.02em }

/* the progressive jackpot: a gold label, a huge number in the display font, a glow */
.cx-pot small, .cx-jp small { font-family:var(--display); font-weight:700; letter-spacing:.24em; font-size:13px; background:linear-gradient(90deg,#ffe9a8,#f5c04a,#ffe9a8); -webkit-background-clip:text; background-clip:text; color:transparent; text-transform:uppercase }
.cx-pot b, .cx-jp b { font-family:var(--display); font-weight:700; letter-spacing:.03em; font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fffbe8 10%,#ffd978 55%,#f2a900 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 14px rgba(245,192,74,.55)) }
.cx-pot b { font-size:clamp(46px,6.4vw,72px); line-height:1; margin:2px 0 4px }
.cx-pot b img, .cx-jp b img, .cx-pot b .gem, .cx-jp b .gem { filter:none }
.cx-game .cx-jp b { font-size:28px } .cx-game .cx-jp small { font-size:12px }
.cx-win-card b { font-family:var(--display); font-weight:700 } .cx-win-card small { font-family:var(--display); font-weight:700; letter-spacing:.34em }
@media (max-width:760px) { .cx-hero h1 { font-size:34px } .cx-pot b { font-size:44px } .cx-game .cx-jp b { font-size:24px } .cx-title h2 { font-size:21px } }

/* ---------- PHONE: a compact header, the bet options in an expandable bar, the play button centred under it (see cxCompact in casino-ui.js) ---------- */
.cx-optbtn { display:none }
@media (max-width:760px) {
  .cx-game .cx-bar { padding:8px 10px; gap:8px; margin-bottom:8px; border-radius:16px; flex-wrap:nowrap; align-items:center }
  .cx-game .cx-bar:has(.cx-wpanel:not([hidden])) { flex-wrap:wrap }
  .cx-game .cx-back { padding:6px 10px; flex:0 0 auto } .cx-game .cx-back span { display:none }
  .cx-game .cx-brand { flex:1 1 auto; min-width:0 } .cx-game .cx-mark { display:none }
  .cx-game .cx-title { min-width:0 } .cx-game .cx-title small { display:none } .cx-game .cx-title h2 { font-size:17px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .cx-game .cx-gl svg { width:22px; height:22px }
  .cx-game .cx-hud { flex:0 0 auto; margin:0; width:auto; gap:8px } .cx-game .cx-bar:has(.cx-wpanel:not([hidden])) .cx-hud { flex:1 1 100% }
  .cx-game .cx-hudrow { display:flex; flex-wrap:nowrap; gap:6px; width:auto }
  .cx-game .cx-pill { padding:4px 10px; flex:0 0 auto; min-width:0 } .cx-game .cx-pill small { font-size:9px; letter-spacing:.04em; white-space:nowrap } .cx-game .cx-pill b { font-size:15px; white-space:nowrap } .cx-game .cx-pill.main b { font-size:16px }
  .cx-game .cx-pill.dim, .cx-game .cx-pill.cx-wg.none { display:none }
  .cx-game .cx-add { grid-column:auto; flex:0 0 auto; min-height:38px; min-width:38px; padding:0 11px; font-size:12px }
  .cx-game .cx-jp { padding:5px 10px; gap:8px; margin-bottom:8px; flex-wrap:nowrap; border-radius:14px } .cx-game .cx-jp-ic { width:26px; height:26px; font-size:12px; flex:0 0 auto }
  .cx-game .cx-jp > div { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0 } .cx-game .cx-jp small { font-size:10px; letter-spacing:.14em; margin:0 } .cx-game .cx-jp b { font-size:20px }
  .cx-game .cx-more { margin-top:12px }
  /* the controls card: closed = an expandable bar + the centred play button (and the parts that are the game itself); open = all the options above the button */
  .cx-mob .cx-ctl { display:flex; flex-direction:column; gap:10px }
  .cx-mob .cx-ctl:not(.cx-open) { padding:0; border:0; background:none; box-shadow:none; min-height:0; margin:0 }
  .cx-mob .cx-ctl:not(.cx-open)::before { display:none }
  .cx-mob .cx-ctl:not(.cx-open) > *:not(.cx-go):not(.cx-optbtn):not(.cx-keepvis) { display:none !important }
  .cx-mob .cx-ctl > * { order:2 } .cx-mob .cx-ctl > .cx-keepvis { order:0 } .cx-mob .cx-ctl > .cx-optbtn { order:1 } .cx-mob .cx-ctl > .cx-go { order:3 }
  .cx-mob .cx-ctl > .cx-optbtn { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:46px; padding:0 14px; border-radius:14px; border:1px solid #29406a; background:rgba(11,20,36,.9); color:#cfe0ff; font:700 14px/1.2 var(--display,system-ui); text-align:left; cursor:pointer; position:relative !important; z-index:1 !important }
  .cx-mob .cx-ctl > .cx-optbtn b { color:#7ff0dc; font-weight:700 } .cx-mob .cx-ctl > .cx-optbtn i { font-style:normal; color:var(--accent) } .cx-mob .cx-ctl.cx-open > .cx-optbtn { border-color:var(--accent) }
  .cx-mob .cx-ctl > .cx-go { align-self:center; width:min(100%,340px); height:54px; margin:0 auto !important; padding:0 12px; font-size:15px; position:relative !important; z-index:1 !important }
  .cx-mob .cx-ctl > .cx-go[disabled] { opacity:1 !important; background:#16233b !important; color:#7f93b5 !important; filter:none !important; border:1px solid #29406a !important }
}
/* phone: the tower is shorter so that its 8 levels and the play button share the screen */
@media (max-width:760px) {
  #p-tower .sg-tile { aspect-ratio:auto; height:38px; border-radius:9px } #p-tower .sg-row { gap:6px; padding:0 } #p-tower .sg-tower { gap:5px } #p-tower .sg-lvl { flex-direction:row; align-items:baseline; gap:6px; min-width:84px } #p-tower .sg-lvl b, #p-tower .sg-lvl i { font-size:12px }
  #p-mines .sg-tile { border-radius:10px }
}
@media (max-width:760px) {
 
  .cx-game .cx-pill small { letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .cx-game .cx-pill b { white-space:nowrap }
  .cx-game .cx-add { padding:0 10px }
}
@media (max-width:760px) { .cx-l2 { display:none } }
@media (max-width:760px) {
  .cx-mob .cx-ctl > .cx-go[disabled] { opacity:1 !important; background:#16233b !important; color:#7f93b5 !important; filter:none !important; border:1px solid #29406a !important }
  #p-roulette .rtwheel { max-width:230px; margin:0 auto } #p-roulette .cfres { margin:6px 0 }
}
@media (max-width:760px) { #p-roulette .rtwheel { max-width:none; padding:10px } #p-roulette .rwslot { min-height:0; max-width:210px } #p-roulette .rtwheel { gap:4px } }

/* ---------- PHONE: smaller boards so that the game, the bet-options bar and the play button share one screen ---------- */
@media (max-width:760px) {
  .cx-game .cx-stage .card { padding:12px } .cx-game .cx-stage .cfres, .cx-game .cx-stage .plres { padding:7px 10px; margin:6px 0 0; font-size:13px; line-height:1.3 } .cx-game .cx-stage .plres small, .cx-game .cx-stage .plres .small { font-size:11px }
  .cx-game .cx-jp { padding:3px 10px; margin-bottom:6px } .cx-game .cx-jp-ic { width:22px; height:22px; font-size:11px } .cx-game .cx-jp b { font-size:18px } .cx-game .cx-jp small { font-size:9.5px }
  .cx-game .cx-bar { margin-bottom:6px }
  #p-coinflip .cfslot { padding:0 } #p-coinflip .cfmain { gap:8px }
  #p-crash .sgslot { min-height:0 } #p-crash .sgboard { padding:12px }
  #p-mines .sg-host, #p-mines .sgslot { max-width:236px; margin:0 auto; min-height:0 }
  #p-wheel .xw-host, #p-wheel .xw-svg { max-width:208px; margin:0 auto } #p-wheel .xw-legend { display:none }
  #p-plinko .pl-host { max-width:270px; margin:0 auto }
  #p-war .xrrow { gap:30px; margin-bottom:2px } #p-hilo .xhcards, #p-war .xhcards { margin:2px 0 6px }
  #p-tower .sg-tile { height:30px; border-radius:8px } #p-tower .sg-cells { gap:5px } #p-tower .sg-tower { gap:4px }
  #p-roulette .rtwheel { padding:6px } #p-roulette .rwslot { max-width:150px } #p-roulette .cfres { margin:4px 0 }
}
@media (max-width:760px) {
  .cx-game .cx-stage .plres { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
  #p-mines .sg-host, #p-mines .sgslot { max-width:204px }
  #p-tower .sg-tile { height:26px; border-radius:7px } #p-tower .sg-cells { gap:4px } #p-tower .sg-tower { gap:3px }
  #p-roulette .rwslot { max-width:124px }
}

@media (max-width:760px) { .cx-game .cx-addl { display:none } .cx-game .cx-add { font-size:20px; padding:0 14px } .cx-mob .cx-ctl { padding:10px !important } }

/* Hi-Lo: the Higher / Lower buttons hold two lines (the guess and its chance / multiplier): they must grow, not clip */
#p-casino .xhbtn { height:auto !important; min-height:64px; padding:8px 12px !important; overflow:visible !important; gap:3px; line-height:1.2 }
#p-casino .xhbtn b { font-size:15px; letter-spacing:.03em } #p-casino .xhbtn span { font-size:12px; opacity:.9; text-transform:none; letter-spacing:0; font-weight:700 }

/* ---------- the PHONE layout of the controls on a PC too (owner, 11 Nov 2026): the bet options in an expandable bar, the play button centred under it, boards that leave room so that the game and the button share the screen ---------- */
@media (min-width:761px) {
  .cx-mob .cx-ctl { display:flex; flex-direction:column; gap:12px; width:100%; max-width:620px; margin-left:auto; margin-right:auto; padding:14px }
  #p-roulette .cx-ctl { max-width:820px }
  .cx-mob .cx-ctl:not(.cx-open) > *:not(.cx-go):not(.cx-optbtn):not(.cx-keepvis) { display:none !important }
  .cx-mob .cx-ctl > * { order:2 } .cx-mob .cx-ctl > .cx-keepvis { order:0 } .cx-mob .cx-ctl > .cx-optbtn { order:1 } .cx-mob .cx-ctl > .cx-go { order:3 }
  .cx-mob .cx-ctl > .cx-optbtn { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:48px; padding:0 16px; border-radius:14px; border:1px solid #29406a; background:rgba(11,20,36,.9); color:#cfe0ff; font:700 14px/1.2 var(--display,system-ui); text-align:left; cursor:pointer; position:relative !important; z-index:1 !important; transition:border-color .2s }
  .cx-mob .cx-ctl > .cx-optbtn:hover { border-color:var(--accent) } .cx-mob .cx-ctl > .cx-optbtn b { color:#7ff0dc; font-weight:700 } .cx-mob .cx-ctl > .cx-optbtn i { font-style:normal; color:var(--accent) } .cx-mob .cx-ctl.cx-open > .cx-optbtn { border-color:var(--accent) }
  .cx-mob .cx-ctl > .cx-go { align-self:center; width:min(100%,360px); height:56px; margin:0 auto !important; padding:0 14px; font-size:16px; position:relative !important; z-index:1 !important }
  .cx-mob .cx-ctl > .cx-go[disabled] { opacity:1 !important; background:#16233b !important; color:#7f93b5 !important; filter:none !important; border:1px solid #29406a !important }
  /* boards: sized so that the whole game, the options bar and the button fit a laptop screen */
  #p-plinko .pl-host { max-width:420px; margin:0 auto } #p-plinko .plboard { padding:10px }
  #p-mines .sg-host, #p-mines .sgslot { max-width:320px; margin:0 auto; min-height:0 }
  #p-tower .sg-tile { height:34px; border-radius:8px } #p-tower .sg-cells { gap:5px } #p-tower .sg-tower { gap:4px; max-width:460px; margin:0 auto }
  #p-wheel .xw-host, #p-wheel .xw-svg { max-width:290px; margin:0 auto }
  #p-crash .sgslot { min-height:0 }
  #p-roulette .rwslot, #p-roulette .rw-stage { max-width:250px } #p-roulette .rtwheel { padding:10px }
  .cx-game .cx-stage .cfres, .cx-game .cx-stage .plres { padding:8px 14px; margin:8px 0 0; font-size:14px }
  #p-hilo .card:not(.cx-ctl):not(:has(.xhcards, .xrrow, .plres)) { display:none }
  #p-hilo .cx-ctl .xhacts { gap:10px; margin:4px 0 2px } #p-hilo .cx-ctl .xhbtn { flex:1 1 0; min-width:0 }
}

/* ---------- PC: less room spent above the game, so that the game, the options bar and the play button share a laptop screen ---------- */
@media (min-width:761px) {
  body[data-page="casino"] .pagehead { display:none }
  body[data-page="casino"] .content { padding-top:14px }
  #p-casino { padding-top:12px }
  .cx-game .cx-bar { padding:8px 14px; margin-bottom:8px } .cx-game .cx-mark { width:44px; height:44px; border-radius:13px } .cx-game .cx-mark img { width:30px; height:30px } .cx-game .cx-title h2 { font-size:22px }
  .cx-game .cx-jp { padding:5px 14px; gap:12px; margin-bottom:8px; flex-wrap:nowrap } .cx-game .cx-jp-ic { width:28px; height:28px; font-size:13px } .cx-game .cx-jp-note { display:none } .cx-game .cx-jp b { font-size:22px }
  .cx-game .casstrip { padding:4px 12px; margin-bottom:8px }
  #p-coinflip .cfslot { zoom:.78; padding:0 }
  #p-plinko .pl-host { max-width:350px !important }
  #p-casino .cx-game .cx-stage .card { padding-top:12px; padding-bottom:12px }
  /* the roulette is two boards (the wheel and the table): side by side on a PC */
  #p-roulette .rt { grid-template-columns:270px minmax(0,1fr) !important; align-items:start; gap:14px } #p-roulette .rt > .casfairbox, #p-roulette .rt > .cfhist { grid-column:1 / -1 } #p-roulette .rt > .rtwheel, #p-roulette .rt > .card:first-child { order:0 }
  #p-roulette .rwslot, #p-roulette .rw-stage { max-width:230px } #p-roulette .cx-ctl { max-width:none }
}
@media (min-width:761px) {
  body[data-page="casino"] #tuBanner, body[data-page="casino"] #pauseBanner, body[data-page="casino"] #loginErr { display:none !important }
  #p-crash .sgslot { max-width:540px; margin:0 auto }
  #p-tower .sg-tile { height:28px !important; border-radius:7px } #p-tower .sg-cells { gap:4px } #p-tower .sg-tower { gap:3px; max-width:420px }
  #p-wheel .xw-host, #p-wheel .xw-svg { max-width:240px !important } #p-wheel .xw-legend { margin:6px 0 2px }
  #p-mines .sg-host, #p-mines .sgslot { max-width:270px !important }
  #p-plinko .pl-host { max-width:320px !important }
  #p-hilo .pfc.big, #p-war .pfc { width:140px; height:200px } #p-hilo .pfc.big b, #p-war .pfc b { font-size:58px } #p-hilo .pfc.big i, #p-war .pfc i { font-size:50px }
  #p-hilo .pfc:not(.big) { width:84px; height:120px } #p-hilo .pfc:not(.big) b { font-size:36px } #p-hilo .pfc:not(.big) i { font-size:32px }
  #p-casino .dcboard, #p-dice .dc-host { max-width:100% } #p-dice .dcboard > div:first-child { max-width:560px; margin:0 auto }
}

/* ---------- WIDE SCREENS (1000 px and up): the board on the left, the dock (options bar + play button) on the right, so that the game and the button are always on the same screen; the rules of the dock are the same as on a phone ---------- */
@media (min-width:1000px) {
  #p-plinko .pl, #p-dice .dc2, #p-mines .sg, #p-tower .sg, #p-crash .sg, #p-wheel .xg2, #p-war .xg2 { grid-template-columns:minmax(0,1fr) 380px !important; align-items:start; gap:14px; justify-items:stretch }
  #p-plinko .plboard, #p-dice .dcboard, #p-mines .sgboard, #p-tower .sgboard, #p-crash .sgboard, #p-wheel .xgboard, #p-war .xgboard { grid-column:1; grid-row:1 }
  #p-plinko .cx-ctl, #p-dice .cx-ctl, #p-mines .cx-ctl, #p-tower .cx-ctl, #p-crash .cx-ctl, #p-wheel .cx-ctl, #p-war .cx-ctl { grid-column:2; grid-row:1; align-self:center; max-width:none; margin:0 }
  #p-plinko .casfairbox, #p-dice .casfairbox, #p-mines .casfairbox, #p-tower .casfairbox, #p-crash .casfairbox, #p-wheel .casfairbox, #p-war .casfairbox, #p-plinko .cfhist, #p-dice .cfhist, #p-mines .cfhist, #p-tower .cfhist, #p-crash .cfhist, #p-wheel .cfhist, #p-war .cfhist { grid-column:1 / -1 }
  #p-plinko .pl-host { max-width:430px !important } #p-crash .sgslot { max-width:600px } #p-mines .sg-host, #p-mines .sgslot { max-width:330px !important } #p-tower .sg-tower { max-width:460px } #p-tower .sg-tile { height:32px !important }
  #p-wheel .xw-host, #p-wheel .xw-svg { max-width:300px !important } #p-dice .dcboard > div:first-child { max-width:620px }
  #p-war .xrrow { gap:60px }
}
@media (min-width:761px) {
  .cx-game .cx-jp > div { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap } .cx-game .cx-jp small { margin:0 } .cx-game .cx-jp b { font-size:20px; line-height:1.1 }
  #p-casino .cx-game .casstrip { margin:0 0 8px !important; padding:3px 12px !important }
  .cx-game .cx-bar { padding:6px 12px } .cx-game .cx-mark { width:38px; height:38px } .cx-game .cx-mark img { width:26px; height:26px } .cx-game .cx-title small { font-size:10px } .cx-game .cx-title h2 { font-size:20px; margin:0 } .cx-game .cx-pill { padding:4px 12px }
}
@media (min-width:1000px) { #p-tower .sg-tile { height:28px !important } }
@media (min-width:761px) { #p-hilo .pfc.big { width:130px; height:186px } #p-hilo .pfc.big b { font-size:54px } #p-hilo .pfc.big i { font-size:46px } }

/* the small reset button of the quick bets */
#p-casino .cx-reset { min-width:34px; padding:6px 10px !important; font-size:14px; line-height:1; opacity:.9 } #p-casino .cx-reset:hover { opacity:1; border-color:#ff9f7a !important; color:#ffd2bf }
#p-casino .rtchipbtn.cx-reset { min-width:34px }
/* the quick bets stay on ONE row on every screen: +10 +100 +500 Max ½ 2× ↺ (the buttons shrink a little on a narrow phone) */
#p-casino .cfquick:has(.cx-reset) { flex-wrap:nowrap; gap:4px; width:100% }
#p-casino .cfquick:has(.cx-reset) .btn { flex:1 1 auto; min-width:0; padding:7px 4px !important; font-size:12px; text-align:center }
#p-casino .cfquick:has(.cx-reset) .btn.cx-reset { flex:0 0 32px; min-width:32px; padding:7px 0 !important; font-size:14px }

/* the wallet button: an icon + the word, centred */
.cx-add { display:inline-flex; align-items:center; justify-content:center; gap:7px } .cx-add .cx-wico { flex:0 0 auto }

/* ====================================================== Rock Paper Scissors, Dice Duel, Triple Spin, Chicken Road, Balloon Pop (owner, 11 Nov 2026) ====================================================== */
.ng-vs { font:900 18px var(--display,system-ui); letter-spacing:.12em; color:#7f93b5; align-self:center }
.ng-arena { display:flex; justify-content:center; align-items:center; gap:34px; padding:10px 0 4px } .ng-arena > div:not(.ng-vs) { display:flex; flex-direction:column; align-items:center; gap:4px }
.ng-fist { font-size:92px; line-height:1.05; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); transition:transform .25s, opacity .25s } .ng-fist.win { transform:scale(1.14); filter:drop-shadow(0 0 18px rgba(92,203,140,.7)) } .ng-fist.lose { opacity:.45; transform:scale(.9) }
.ng-fist.shake.l { animation:ng-shl .38s ease-in-out infinite } .ng-fist.shake.r { animation:ng-shr .38s ease-in-out infinite } .xg2.noanim .ng-fist { animation:none !important }
@keyframes ng-shl { 0%,100% { transform:translateY(0) rotate(-6deg) } 50% { transform:translateY(-22px) rotate(8deg) } } @keyframes ng-shr { 0%,100% { transform:translateY(0) scaleX(-1) rotate(-6deg) } 50% { transform:translateY(-22px) scaleX(-1) rotate(8deg) } }
.ng-picks { display:flex; justify-content:center; gap:10px; margin:10px 0 6px; flex-wrap:wrap }
.ng-pick { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:92px; padding:8px 14px; border-radius:14px; border:1px solid #29406a; background:rgba(11,20,36,.9); color:#cfe0ff; cursor:pointer; transition:transform .15s, border-color .2s, box-shadow .2s }
.ng-pick span { font-size:34px; line-height:1.1 } .ng-pick small { font-weight:800; font-size:12px } .ng-pick:hover:not([disabled]) { transform:translateY(-2px); border-color:var(--accent) } .ng-pick.on { border-color:var(--accent); box-shadow:0 0 0 2px rgba(45,212,191,.35), 0 8px 22px rgba(45,212,191,.2); background:rgba(20,52,62,.9) } .ng-pick[disabled] { opacity:.6; cursor:default }
.ng-duel { display:flex; justify-content:center; align-items:center; gap:30px; padding:8px 0 2px; flex-wrap:wrap } .ng-side { display:flex; flex-direction:column; align-items:center; gap:6px }
.ng-dice { display:flex; gap:12px } .ng-total { font:900 34px/1 var(--display,system-ui); color:#e7eefa; min-height:34px }
.ng-die { width:70px; height:70px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:9px; border-radius:15px; background:linear-gradient(160deg,#fbfdff,#cfd9ee); box-shadow:0 5px 0 #8fa1c4, 0 10px 20px rgba(0,0,0,.45); transition:transform .25s, opacity .25s }
.ng-die i { border-radius:50%; margin:auto; width:12px; height:12px } .ng-die i.p { background:radial-gradient(circle at 35% 30%,#3a4a70,#0f1a33) }
.ng-die.roll { animation:ng-roll .3s linear infinite } .ng-die.win { transform:translateY(-6px) scale(1.07); box-shadow:0 5px 0 #8fa1c4, 0 0 22px rgba(92,203,140,.7) } .ng-die.lose { opacity:.55 } .xg2.noanim .ng-die { animation:none !important }
@keyframes ng-roll { 0% { transform:rotate(0) translateY(0) } 50% { transform:rotate(20deg) translateY(-8px) } 100% { transform:rotate(0) translateY(0) } }
/* Triple Spin */
.sp-machine { margin:6px auto 4px; width:fit-content; max-width:100%; padding:14px 16px; border-radius:20px; background:linear-gradient(160deg,#17315c,#0c1730); border:2px solid #d9a93a; box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 0 0 3px #6b4a13 }
.sp-reels { position:relative; display:flex; gap:8px } .sp-reel { width:92px; padding:4px 0; border-radius:12px; background:linear-gradient(180deg,#e9efff,#fbfdff 30%,#fbfdff 70%,#e9efff); box-shadow:inset 0 6px 10px rgba(11,20,36,.28), inset 0 -6px 10px rgba(11,20,36,.28); overflow:hidden }
.sp-cell { height:62px; display:flex; align-items:center; justify-content:center; font-size:38px; line-height:1; opacity:.55 } .sp-cell.mid { opacity:1 } .sp-sym.seven { font:900 italic 46px/1 Georgia,serif; color:#d9453d; text-shadow:0 2px 0 #7a1b16 } .sp-sym { display:inline-block }
.sp-reel.spin .sp-cell { filter:blur(1.6px); opacity:.85 } .sp-cell.hit .sp-sym { animation:sp-hit .6s ease-in-out infinite alternate } .xg2.noanim .sp-cell .sp-sym { animation:none !important }
@keyframes sp-hit { from { transform:scale(1) } to { transform:scale(1.28) } }
.sp-line { position:absolute; left:-6px; right:-6px; top:50%; height:3px; margin-top:-1.5px; background:linear-gradient(90deg,transparent,#ff5a4a 12%,#ff5a4a 88%,transparent); box-shadow:0 0 10px rgba(255,90,74,.8); pointer-events:none }
.sp-pay { margin-top:10px } .sp-pay h4 { margin:0 0 6px; font-size:14px } .sp-paygrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px }
.sp-payrow { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:5px 10px; border-radius:10px; background:rgba(11,20,36,.7); border:1px solid #243a5e; font-size:15px } .sp-payrow .sp-sym { font-size:17px } .sp-payrow .sp-sym.seven { font-size:19px } .sp-payrow b { color:#7ff0dc; font-size:14px }
/* Chicken Road */
.ch-wrap { display:flex; flex-direction:column; gap:10px } .ch-scroll { overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; border-radius:14px }
.ch-road { --cw:62px; position:relative; display:flex; width:calc(var(--n,12) * var(--cw)); min-width:100%; border-radius:14px; overflow:hidden; background:#2b2f3a; border:1px solid #3b4358 }
.ch-cell { position:relative; flex:0 0 var(--cw); height:150px; border-left:2px dashed rgba(232,195,74,.45); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:8px; transition:background .25s }
.ch-start { border-left:0; background:linear-gradient(180deg,#2f8f4e,#1d6137); justify-content:center; color:#d6ffe3; font:900 11px var(--display,system-ui); letter-spacing:.08em } .ch-start span { writing-mode:vertical-rl; transform:rotate(180deg) }
.ch-cell b { font:800 12px/1 var(--display,system-ui); color:#9fb3d6; background:rgba(11,20,36,.7); padding:3px 5px; border-radius:7px } .ch-cell.done { background:rgba(47,154,98,.28) } .ch-cell.done b { color:#8ff0b6 } .ch-cell.now { background:rgba(63,138,230,.22); box-shadow:inset 0 0 0 2px rgba(63,138,230,.7) } .ch-cell.now b { color:#fff }
.ch-cell.hit { background:rgba(217,69,61,.4) } .ch-car { position:absolute; top:28px; left:0; right:0; text-align:center; font-size:34px; line-height:1 } .ch-cell.carlane .ch-car { opacity:.5; filter:grayscale(.3) } .ch-cell.hit .ch-car { font-size:40px }
.ch-hen { position:absolute; bottom:44px; left:calc(var(--at,0) * var(--cw) + var(--cw) / 2); transform:translateX(-50%); font-size:38px; line-height:1; transition:left .35s cubic-bezier(.3,1.4,.5,1); filter:drop-shadow(0 4px 4px rgba(0,0,0,.5)); pointer-events:none } .ch-hen.dead { filter:grayscale(1) drop-shadow(0 4px 4px rgba(0,0,0,.5)); transform:translateX(-50%) rotate(90deg) }
.sg.noanim .ch-hen { transition:none } .ch-bar { display:flex; justify-content:center } .ch-go, .bl-go { min-width:200px; height:52px; font-size:17px !important; font-weight:900; letter-spacing:.08em; border-radius:14px !important }
/* Balloon Pop */
.bl-wrap { display:flex; flex-direction:column; align-items:center; gap:8px } .bl-stage { position:relative; width:230px; height:250px } .bl-svg { width:100%; height:100%; display:block; overflow:visible }
.bl-ball { transition:transform .35s cubic-bezier(.3,1.4,.5,1), opacity .15s } .sg.noanim .bl-ball { transition:none } .bl-pop { transition:opacity .1s; transform-origin:120px 110px } .bl-stage.popped .bl-pop { animation:bl-boom .5s ease-out }
@keyframes bl-boom { 0% { transform:scale(.4) } 60% { transform:scale(1.25) } 100% { transform:scale(1) } } .sg.noanim .bl-pop { animation:none !important }
.bl-mult { position:absolute; left:0; right:0; top:84px; text-align:center; font:900 36px var(--display,system-ui); color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.55); pointer-events:none }
.bl-info { min-height:22px; color:#cfe0ff; font-size:14px; text-align:center } .bl-track { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; max-width:340px }
.bl-track i { width:14px; height:14px; border-radius:50%; background:#1a2a4a; border:1px solid #3b5a96 } .bl-track i.ok { background:#2fb386; border-color:#5ccb8c } .bl-track i.now { background:#e8b84a; border-color:#ffe08a; box-shadow:0 0 8px rgba(232,184,74,.7) } .bl-track i.bad { background:#d9453d; border-color:#ff8a80 } .bl-track i.would { border-color:#d9453d }
/* the layout of the five pages: like the other games (board on the left, dock on the right on a wide screen) */
@media (min-width:1000px) {
  :is(#p-rps, #p-duel, #p-spin) .xg2, :is(#p-chicken, #p-balloon) .sg { grid-template-columns:minmax(0,1fr) 380px !important; align-items:start; gap:14px; justify-items:stretch }
  :is(#p-rps, #p-duel, #p-spin) .xgboard, :is(#p-chicken, #p-balloon) .sgboard { grid-column:1; grid-row:1 }
  :is(#p-rps, #p-duel, #p-spin, #p-chicken, #p-balloon) .cx-ctl { grid-column:2; grid-row:1; align-self:center; max-width:none; margin:0 }
  :is(#p-rps, #p-duel, #p-spin, #p-chicken, #p-balloon) :is(.casfairbox, .cfhist) { grid-column:1 / -1 }
}
@media (max-width:760px) {
  .ng-fist { font-size:70px } .ng-arena { gap:20px; padding:2px 0 } .ng-pick { min-width:78px; padding:6px 10px } .ng-pick span { font-size:28px }
  .ng-die { width:56px; height:56px; padding:7px } .ng-die i { width:10px; height:10px } .ng-dice { gap:8px } .ng-duel { gap:12px } .ng-total { font-size:28px; min-height:28px }
  .sp-reel { width:78px } .sp-cell { height:54px; font-size:32px } .sp-sym.seven { font-size:38px } .sp-machine { padding:10px 12px }
  .ch-cell { height:112px } .ch-hen { bottom:34px; font-size:32px } .ch-car { top:20px; font-size:28px } .bl-stage { width:160px; height:174px } .bl-mult { top:54px; font-size:26px }
  .ch-go, .bl-go { min-width:160px; height:46px }
}

.sp-pay summary { cursor:pointer; font-weight:800; font-size:14px; padding:2px 0 6px; color:#cfe0ff } .sp-pay:not([open]) summary { padding-bottom:0 }

/* Chicken Road: the chicken is a picture now (public/hen.png, the owner's art with its glow); it stands on the lane, bottom aligned, and is bigger than a lane so that it can be seen */
.ch-hen { font-size:0; bottom:22px } .ch-hen img { width:92px; height:auto; display:block; max-width:none; pointer-events:none } .ch-hen.dead img { filter:grayscale(1) brightness(.7) }
@media (max-width:760px) { .ch-hen { bottom:12px } .ch-hen img { width:78px } }
/* Chicken Road: the chicken (with its glow) is exactly as wide as a lane, standing above the multiplier of the lane (owner: "se incadreze perfect") */
.ch-hen { bottom:36px } .ch-hen img { width:var(--cw) } @media (max-width:760px) { .ch-hen { bottom:32px } .ch-hen img { width:var(--cw) } }

/* ====================================================== animations of the new games (owner, 11 Nov 2026) ====================================================== */
/* Triple Spin: the reels scroll VERTICALLY like a real slot machine (spReelSpin in newgames.js): the window of a reel is exactly 3 cells, the strip moves inside it */
.sp-reel { --h:62px; padding:0 !important; height:calc(var(--h) * 3); position:relative }
.sp-strip { position:absolute; left:0; right:0; top:0; will-change:transform; backface-visibility:hidden }
.sp-cell { height:var(--h) !important; flex:0 0 var(--h) }
.sp-reel::after { content:''; position:absolute; inset:0; border-radius:12px; pointer-events:none; background:linear-gradient(180deg, rgba(11,20,36,.5), transparent 30%, transparent 70%, rgba(11,20,36,.5)) }
.sp-reel.moving .sp-cell { opacity:1; filter:none } .sp-reel.pull .sp-strip { transform:translateY(-9px); transition:transform .12s ease-out }
.sp-reel.hit .sp-cell.mid .sp-sym { animation:sp-hit .55s ease-in-out infinite alternate } .xg2.noanim .sp-reel .sp-sym { animation:none !important }
.sp-line.hit { animation:sp-line .4s ease-in-out infinite alternate } @keyframes sp-line { from { opacity:.55 } to { opacity:1; box-shadow:0 0 18px rgba(255,90,74,1) } }
.sp-machine.win { animation:sp-glow .9s ease-in-out 3 } @keyframes sp-glow { 0%,100% { box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 0 0 3px #6b4a13 } 50% { box-shadow:0 0 38px rgba(255,200,70,.85), inset 0 0 0 3px #ffd34d } }
.xg2.noanim .sp-machine, .xg2.noanim .sp-line { animation:none !important }
@media (max-width:760px) { .sp-reel { --h:54px } }
/* Dice Duel: the dice tumble, then your pair lands, then the house's */
.ng-die { --end:none } .ng-die.win { --end:translateY(-6px) scale(1.07) } .ng-die.lose { --end:none }
.ng-die.roll { animation:ng-tumble .5s linear infinite } .ng-die.roll.r { animation-direction:reverse; animation-duration:.43s }
@keyframes ng-tumble { 0% { transform:translateY(0) rotate(0) } 25% { transform:translateY(-24px) rotate(110deg) } 50% { transform:translateY(0) rotate(200deg) } 75% { transform:translateY(-13px) rotate(290deg) } 100% { transform:translateY(0) rotate(360deg) } }
.ng-die.land { animation:ng-land .42s ease-out } @keyframes ng-land { 0% { transform:translateY(-38px) rotate(-28deg) scale(1.14) } 55% { transform:translateY(0) rotate(6deg) scale(.96) } 78% { transform:translateY(-7px) rotate(-2deg) } 100% { transform:var(--end) } }
.xg2.noanim .ng-die { animation:none !important }
/* Rock Paper Scissors: the hands pop in when they are revealed */
.ng-fist > span { display:inline-block } .ng-fist.reveal > span { animation:ng-pop .5s cubic-bezier(.3,1.6,.5,1) } .xg2.noanim .ng-fist > span { animation:none !important }
@keyframes ng-pop { 0% { transform:scale(.45) rotate(-14deg); opacity:.15 } 100% { transform:none; opacity:1 } }
/* Chicken Road: the chicken hops from lane to lane, bobs while it waits, a car slams into it on a hit, and the traffic of the road keeps running (decoration: every lane that is still ahead has one) */
.ch-hen { transition:left .35s cubic-bezier(.3,1.4,.5,1), transform .3s ease-out !important } .ch-hen:not(.dead) img { animation:ch-bob 1.1s ease-in-out infinite alternate } .ch-hen.hop img { animation:ch-hop .38s ease-out }
@keyframes ch-bob { from { translate:0 0 } to { translate:0 -4px } } @keyframes ch-hop { 0% { transform:translateY(0) scale(1,1) } 30% { transform:translateY(0) scale(1.1,.88) } 62% { transform:translateY(-30px) scale(.94,1.08) } 100% { transform:translateY(0) scale(1,1) } }
.ch-car.slam { animation:ch-slam .3s ease-in } @keyframes ch-slam { 0% { transform:translateY(-120px) scaleY(1.25); opacity:.2 } 100% { transform:none; opacity:1 } }
.ch-cell b { position:relative; z-index:1 } .ch-amb { position:absolute; left:50%; top:-34px; z-index:0; font-size:26px; line-height:1; opacity:.5; pointer-events:none; text-decoration:none; animation:ch-drive var(--t,3.2s) linear var(--d,0s) infinite }
.ch-amb::before { content:'\1F699' } @keyframes ch-drive { from { transform:translate(-50%,0) } to { transform:translate(-50%,200px) } }
.ch-road.over .ch-amb, .ch-cell.done .ch-amb, .ch-cell.hit .ch-amb { display:none } .sg.noanim .ch-amb, .sg.noanim .ch-hen img, .sg.noanim .ch-car { animation:none !important }
/* Balloon Pop: it sways, squashes with every pump and bursts into pieces */
.bl-svg { transform-origin:50% 100% } .bl-sway { transform-origin:120px 255px; animation:bl-sway 2.6s ease-in-out infinite alternate } @keyframes bl-sway { from { transform:rotate(-2.2deg) } to { transform:rotate(2.2deg) } }
.bl-stage.pumped .bl-svg { animation:bl-pump .34s ease-out } @keyframes bl-pump { 0% { transform:scale(1) } 35% { transform:scale(1.08,.94) } 70% { transform:scale(.98,1.03) } 100% { transform:scale(1) } }
.bl-shard { fill:#e0405a; transform-origin:120px 110px; opacity:0 } .bl-stage.popped .bl-shard { animation:bl-shard .65s ease-out forwards } .bl-stage.popped .bl-sway { animation:none }
@keyframes bl-shard { 0% { opacity:1; transform:rotate(var(--a)) translateY(0) scale(1) } 100% { opacity:0; transform:rotate(var(--a)) translateY(-135px) scale(.4) } }
.sg.noanim .bl-sway, .sg.noanim .bl-svg, .sg.noanim .bl-shard { animation:none !important }

/* ====================================================== SMOOTHNESS (owner, 11 Nov 2026: "foarte lin, ca si cum ar avea foarte multe fps") ======================================================
   What made the games heavy, and what replaced it:
   - every card of the casino had backdrop-filter: blur() over an aurora that moved all the time: the browser had to blur the picture BEHIND every card again on every frame, even when nothing happened -> solid glass now, the aurora is still (a picture);
   - SVG drop-shadow filters on the 100 pegs and the ball of Plinko, the wheel of Fortune, the roulette ball, the ship of Crash and the tiles of Mines: an SVG filter is painted by the CPU again whenever anything under it moves -> removed (static glows are drawn by plain shapes);
   - animations of box-shadow / filter (the pulse of the Cash out button, the glow of the slot machine) repaint on every frame -> they animate only transform and opacity now (the compositor does that on the GPU);
   - the slot reels are a Web Animation on the transform (public/newgames.js), not a script that moves them frame by frame. */
#p-casino .card, #p-fair .card { -webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(180deg,rgba(21,35,63,.97),rgba(10,18,34,.98)) }
#p-casino::before { animation:none }
#p-casino .pl-ball, #p-casino .pl-peg, #p-casino .xw-svg, .cr-ship image, .rw-ball, .sg-logo, #p-casino .plboard::before, #p-casino .dcboard::before, #p-casino .sgboard::before, #p-casino .xgboard::before, #p-casino .rtboard::before, #p-casino .cfmain::before { filter:none !important }
#p-casino .xw-host { border-radius:50%; box-shadow:0 14px 40px hsl(var(--h) 80% 40% / .28) }
@keyframes cx-pulse { 0%,100% { transform:scale(1) } 50% { transform:scale(1.025) } }
@keyframes sp-line { from { opacity:.55 } to { opacity:1 } }
.sp-machine { position:relative } .sp-machine.win { animation:none } .sp-machine.win::after { content:''; position:absolute; inset:-2px; border-radius:inherit; box-shadow:0 0 38px rgba(255,200,70,.85); pointer-events:none; animation:sp-glow2 .9s ease-in-out 3 } @keyframes sp-glow2 { 0%,100% { opacity:0 } 50% { opacity:1 } }
.xg2.noanim .sp-machine.win::after { animation:none }
.cr-num { text-shadow:0 2px 6px rgba(0,0,0,.45) }
.ch-hen img, .ng-fist > span, .sp-strip, .bl-ball, .ng-die { backface-visibility:hidden }
.topbar { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--surface) !important }   /* the sticky header blurred what scrolled under it on every frame of every scroll */
@keyframes cx-glow { 0%,100% { transform:scale(1) } 50% { transform:scale(1.08) } }   /* the jackpot coin pulsed its box-shadow forever: it breathes with transform now (GPU) */

/* the sound switch in the header of a game page: a speaker; the volume opens under it when the mouse is on it (a phone has only the switch) */
.cx-snd { position:relative; display:inline-flex; align-items:center; justify-content:center; height:38px; min-width:42px; padding:0 10px; border-radius:12px; border:1px solid #29406a; background:rgba(17,30,53,.8); color:#cfe0ff; cursor:pointer; flex:0 0 auto; transition:border-color .2s }
.cx-snd:hover, .cx-snd:focus-within { border-color:var(--accent) } .cx-snd.off { opacity:.7 } .cx-snd-ic { font-size:17px; line-height:1 }
.cx-volbox { display:none; position:absolute; top:calc(100% + 4px); right:0; z-index:40; padding:12px 14px; border-radius:12px; border:1px solid #29406a; background:#0f1b30; box-shadow:0 10px 28px rgba(0,0,0,.5) }
.cx-snd:hover .cx-volbox, .cx-snd:focus-within .cx-volbox { display:block } .cx-vol { width:120px; height:4px; accent-color:#2dd4bf; cursor:pointer; margin:0; display:block }
@media (max-width:760px) { .cx-volbox { display:none !important } .cx-snd { height:34px; min-width:38px } }
@media (max-width:760px) { .cx-snd { min-width:28px; height:30px; padding:0 3px; border:0; background:transparent } .cx-game .cx-title h2 { font-size:14px } }   /* on a phone the speaker is just the icon, so that the name of the game keeps its room */