/* 🃏 Casino · Blackjack: an emerald felt with a gold rim, cards dealt from the shoe, a chip, a result banner. */
.cj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.cj-head h1{margin:4px 0;font-size:clamp(34px,4vw,48px)}
.cj-head p{margin:0;color:#d6cfd2;font-size:14px}
.cj-balance{display:grid;justify-items:end;padding:10px 16px;border:1px solid #ffc47855;border-radius:14px;background:#ffc4780f}
.cj-balance small{font-size:11px;color:var(--muted)}
.cj-balance b{font:700 28px/1 Rajdhani,Arial,sans-serif;color:var(--gold);font-variant-numeric:tabular-nums}
.cj-balance span{font-size:11px;color:var(--muted)}
.cj-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px;align-items:start}

/* The table: a wooden rail with a gold edge, the felt lit from above (a spotlight), a fine weave on the cloth. */
.cj-felt{--cw:92px;--ch:129px;position:relative;min-height:500px;padding:24px 22px;border:11px solid #3b1e0f;border-radius:34px;overflow:hidden;
    background:radial-gradient(ellipse 60% 45% at 50% 0%,#ffffff1f,transparent 70%),
        repeating-radial-gradient(circle at 50% 50%,#ffffff05 0 1px,transparent 1px 3px),
        radial-gradient(ellipse 85% 75% at 50% 55%,#1a8a57,#0b5233 55%,#052417);
    box-shadow:inset 0 0 0 2px #e2b04e,inset 0 0 0 7px #0a3a26,inset 0 0 90px #000a,0 0 0 2px #e2b04e,0 22px 50px #000a,0 0 0 16px #1b0d06}
.cj-felt:before{content:"";position:absolute;left:8%;right:8%;top:38%;height:52%;border:2px solid #e8be6466;border-bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0;pointer-events:none}
.cj-side{position:relative;z-index:1;display:grid;justify-items:center;gap:8px}
.cj-player{margin-top:16px}
.cj-label{display:inline-flex;align-items:center;gap:10px;font:700 14px/1 Rajdhani,Arial,sans-serif;letter-spacing:2px;color:#d9eee1;text-shadow:0 1px 2px #000a}
.cj-total{min-width:40px;padding:4px 11px;border:2px solid #e2b04e;border-radius:999px;background:#06160fe6;color:#fff;text-align:center;font-size:18px;box-shadow:0 4px 12px #0007}
.cj-total.is-21{color:#ffe08a}.cj-total.is-bust{color:#ff8a96}
.cj-cards{display:flex;justify-content:center;min-height:var(--ch);padding-right:28px}
.cj-rules{position:relative;z-index:1;display:grid;justify-items:center;gap:3px;margin:16px 0 6px;text-align:center}
.cj-rules strong{font:700 22px/1 Rajdhani,Arial,sans-serif;letter-spacing:2px;color:#f0cd78;text-shadow:0 2px 6px #0009}
.cj-rules span{font:700 11px/1 Rajdhani,Arial,sans-serif;letter-spacing:1.4px;color:#b6dcc4;text-transform:uppercase}

/* A card: face (rank and suit in two corners, the suit or a gold emblem in the middle) or back (Solaryx red and gold). */
.cj-card{position:relative;flex:none;width:var(--cw);height:var(--ch);margin-right:-28px;border-radius:10px;
    box-shadow:0 6px 14px #0007,0 1px 0 #fff3 inset}
/* Face up or face down, one side shown at a time (no 3D: it renders the same in every browser). */
.cj-face,.cj-back{position:absolute;inset:0;border-radius:inherit}
.cj-face{background:#fcfaf6;border:1px solid #d5cfc4;color:#18181f}
.cj-card.is-red .cj-face{color:#d6223a}
.cj-corner{position:absolute;display:grid;justify-items:center;gap:2px;font:700 21px/1 Rajdhani,Arial,sans-serif}
.cj-corner svg{width:14px;height:14px}
.cj-corner.tl{left:7px;top:7px}
.cj-corner.br{right:7px;bottom:7px;transform:rotate(180deg)}
.cj-pip{position:absolute;inset:0;display:grid;place-items:center}
.cj-pip svg{width:43px;height:43px}
.cj-card.is-ace .cj-pip svg{width:54px;height:54px}
.cj-royal{display:grid;place-items:center;width:52%;height:58%;border:1.5px solid #d4a03c;border-radius:6px;background:linear-gradient(180deg,#fff3d6,#ffe2a6);
    font:700 38px/1 Rajdhani,Arial,sans-serif;color:#a8640f;position:relative}
.cj-royal svg{position:absolute;bottom:4px;width:16px;height:16px}
.cj-card.is-red .cj-royal svg{color:#d6223a}.cj-card:not(.is-red) .cj-royal svg{color:#18181f}
.cj-back{display:none;background:repeating-linear-gradient(45deg,#ffffff0a 0 4px,transparent 4px 9px),linear-gradient(180deg,#962216,#460c10);
    border:1px solid #2a0808;place-items:center}
.cj-back:before{content:"";position:absolute;inset:5px;border:2px solid #f2b54a;border-radius:6px}
.cj-back img{width:46%;filter:drop-shadow(0 2px 4px #0008)}
.cj-card.is-down .cj-face{display:none}
.cj-card.is-down .cj-back{display:grid}

.cj-shoe{position:absolute;right:22px;top:20px;z-index:1;width:var(--cw);height:var(--ch)}
.cj-shoe i{position:absolute;inset:0;border-radius:9px;background:linear-gradient(180deg,#962216,#460c10);border:1px solid #2a0808;box-shadow:0 4px 10px #0007}
.cj-shoe i:nth-child(2){transform:translate(3px,-2px)}.cj-shoe i:nth-child(3){transform:translate(6px,-4px)}
.cj-shoe i:after{content:"";position:absolute;inset:5px;border:2px solid #f2b54a;border-radius:6px}

.cj-chip{position:absolute;right:26px;bottom:30px;z-index:1;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
    background:radial-gradient(circle,#8f1418 52%,transparent 53%),repeating-conic-gradient(#c8282a 0 30deg,#fff0d8 30deg 45deg);border:3px solid #fff0d8;box-shadow:0 6px 14px #0008}
.cj-chip b{font:700 18px/1 Rajdhani,Arial,sans-serif;color:#fff5e6}
.cj-chip small{position:absolute;bottom:-20px;font:700 9.5px/1 Rajdhani,Arial,sans-serif;letter-spacing:1px;color:#d9eee1}

.cj-banner{position:absolute;left:0;right:0;top:50%;z-index:3;display:grid;justify-items:center;gap:4px;padding:12px 10px;
    background:linear-gradient(90deg,transparent,#030b07f0 18%,#030b07f0 82%,transparent);border-block:2px solid var(--rc,#ffc83d);
    box-shadow:0 0 40px color-mix(in srgb,var(--rc,#ffc83d) 35%,transparent);backdrop-filter:blur(3px);transform:translateY(-50%)}
.cj-banner strong{font:700 clamp(28px,3.4vw,40px)/1 Rajdhani,Arial,sans-serif;letter-spacing:2px;color:var(--rc,#ffc83d);text-shadow:0 2px 0 #000,0 0 22px color-mix(in srgb,var(--rc,#ffc83d) 60%,transparent)}
.cj-banner span{font:700 16px/1 Rajdhani,Arial,sans-serif;color:#efe9e3}
.cj-banner.is-in{animation:cjBanner .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes cjBanner{from{opacity:0;transform:translateY(-50%) scale(.85)}}

.cj-advice{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:#ffffff08;border:1px solid #ffffff14;font-size:14px;color:#ddd5d9}
.cj-advice b{color:var(--gold)}
.cj-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.cj-controls .button{min-width:130px;justify-content:center}
.cj-hit{background:linear-gradient(180deg,#5c9dff,#2f6fe0)}
.cj-double{background:linear-gradient(180deg,#4fdc9a,#1f9f62)}
.cj-controls .button:disabled{opacity:.45;cursor:default}
/* The bet bar: three parts on one dark rail — the chips, the amount, the deal button. */
.cj-table{container-type:inline-size}
.cj-bet{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:0;margin-top:14px;padding:14px 16px;border:1px solid #ffffff14;border-radius:18px;
    background:linear-gradient(180deg,#1d1a1f,#141217);box-shadow:inset 0 1px 0 #ffffff0d,0 10px 24px #0006}
.cj-bet-part{display:grid;gap:8px;padding:0 22px;border-right:1px solid #ffffff12}
.cj-bet-part:first-child{padding-left:4px}
.cj-bet-label{white-space:nowrap;font:700 11px/1 Rajdhani,Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:#a49ea8}
.cj-chips{display:flex;gap:8px}
/* A chip: striped edge, a dashed inner ring, the value in the middle; lifted with a gold glow when chosen. */
.cj-pick{--c:#c62828;--e:#f6f0e4;--t:#fff;position:relative;display:grid;place-items:center;flex:none;width:48px;height:48px;padding:0;border:0;border-radius:50%;cursor:pointer;
    background:repeating-conic-gradient(var(--e) 0 12deg,var(--c) 12deg 45deg);
    box-shadow:inset 0 0 0 1px #0005,0 3px 0 color-mix(in srgb,var(--c) 55%,#000),0 6px 12px #0009;transition:transform .14s,box-shadow .14s}
.cj-pick:before{content:"";position:absolute;inset:7px;border-radius:50%;border:2px dashed color-mix(in srgb,var(--e) 70%,transparent);
    background:radial-gradient(circle at 38% 30%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 70%)}
.cj-pick span{position:relative;font:700 16px/1 Rajdhani,Arial,sans-serif;color:var(--t);text-shadow:0 1px 2px #0008}
.cj-pick:hover{transform:translateY(-3px)}
.cj-pick.is-on{transform:translateY(-5px);box-shadow:0 0 0 3px #16141a,0 0 0 5px #ffc478,0 0 18px #ffc47888,0 8px 14px #000a}
.cj-pick.c1{--c:#e9e4da;--e:#2f5fb8;--t:#1f1f26}
.cj-pick.c1 span{text-shadow:none}
.cj-pick.c5{--c:#c62828}
.cj-pick.c10{--c:#1f5fc4}
.cj-pick.c25{--c:#1d8a4e}
.cj-pick.c50{--c:#7a3fc0}
.cj-pick.c100{--c:#2a2731;--e:#e2b04e;--t:#ffd98a}
/* The amount: − [ 10 ] + */
.cj-stepper{display:flex;align-items:stretch;height:48px;border:1px solid #ffffff1f;border-radius:12px;background:#0d0c10;overflow:hidden}
.cj-stepper button{flex:none;width:36px;border:0;background:#ffffff08;color:#e9e3dc;font:700 22px/1 Rajdhani,Arial,sans-serif;transition:background .12s}
.cj-stepper button:hover{background:#ffc4781f;color:#ffc478}
.cj-stepper input{flex:none;width:58px;border:0;border-inline:1px solid #ffffff14;background:none;color:#fff;text-align:center;
    font:700 22px/1 Rajdhani,Arial,sans-serif;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.cj-stepper input::-webkit-inner-spin-button,.cj-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.cj-stepper input:focus{outline:none;background:#ffc4780d}
.cj-stepper:focus-within{border-color:#ffc47888}
.cj-bet-range{white-space:nowrap;font-size:11px;color:#8d8792}
/* Deal: the big button, with the bet under the word. */
.cj-deal{display:grid;justify-items:center;gap:3px;justify-self:end;min-width:150px;margin-left:18px;padding:12px 22px;border:0;border-radius:14px;cursor:pointer;
    background:linear-gradient(180deg,#ffb04f,#f2661c);color:#2a1206;box-shadow:inset 0 1px 0 #fff6,0 4px 0 #a8410c,0 10px 22px #f2661c44;transition:transform .12s,filter .12s}
.cj-deal strong{font:700 22px/1 Rajdhani,Arial,sans-serif;letter-spacing:1px;text-transform:uppercase}
.cj-deal small{font:600 12px/1 Noto,Arial,sans-serif;color:#4a2209}
.cj-deal:hover{filter:brightness(1.07);transform:translateY(-1px)}
.cj-deal:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #fff6,0 1px 0 #a8410c,0 4px 10px #f2661c33}
@container (max-width:700px){
    .cj-bet{grid-template-columns:auto 1fr;gap:14px 18px}
    .cj-bet-part{padding:0;border:0}
    .cj-bet-part:first-child{grid-column:1/-1}
    .cj-chips{justify-content:space-between;max-width:400px}
    .cj-stepper{width:max-content}
    .cj-deal{align-self:end;margin:0;min-width:0;width:100%;padding:12px 16px}
}
@container (max-width:380px){.cj-pick{width:42px;height:42px}.cj-pick:before{inset:6px}.cj-pick span{font-size:14px}.cj-chips{gap:6px}}
.cj-error{margin:10px 0 0;text-align:center;color:#ff8a96;font-size:14px}

.cj-info{padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.cj-info h2{margin:0 0 8px;font:700 22px/1 Rajdhani,Arial,sans-serif}
.cj-info h3{margin:14px 0 6px;font:700 16px/1 Rajdhani,Arial,sans-serif;color:var(--gold)}
.cj-info p{margin:0 0 10px;font-size:13px;color:#cfc8cd}
.cj-list{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:13px;color:#cfc8cd}
.cj-note{color:var(--muted)!important;font-size:12px!important}

@media (max-width:1180px){.cj-layout{grid-template-columns:1fr}}
@media (max-width:600px){
    .cj-felt{--cw:66px;--ch:94px;min-height:420px;padding:18px 10px;border-width:8px;border-radius:26px}
    .cj-card{margin-right:-22px}
    .cj-corner{font-size:16px}.cj-corner svg{width:11px;height:11px}.cj-corner.tl{left:5px;top:5px}.cj-corner.br{right:5px;bottom:5px}
    .cj-pip svg{width:30px;height:30px}.cj-card.is-ace .cj-pip svg{width:38px;height:38px}.cj-royal{font-size:26px}
    .cj-shoe{right:12px;top:12px}.cj-chip{right:12px;bottom:26px;width:54px;height:54px}.cj-chip b{font-size:16px}
    .cj-rules strong{font-size:18px}.cj-total{font-size:16px;min-width:36px}
}
.cj-sound{margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#ffffff0a;font-size:18px;cursor:pointer}
.cj-sound:hover{border-color:#ffc47888}

/* The game picker over every casino page: a card per game (icon, name, what it pays); the one open is lit in gold. */
.cg-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:-4px 0 22px}
.cg-game{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:14px;
    background:linear-gradient(180deg,#1b191f,#141317);color:#d8d2dc;transition:border-color .15s,transform .15s,background .15s}
.cg-game:hover{border-color:#ffc47866;color:#fff;transform:translateY(-2px)}
.cg-game-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:#ffffff0a;color:#e8c27a}
.cg-game-icon .cg-icon{width:24px;height:24px}
.cg-game-text{display:grid;gap:3px;min-width:0}
.cg-game-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15px/1 Rajdhani,Arial,sans-serif;letter-spacing:.3px}
.cg-game-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#8f8996}
.cg-game.is-on{border-color:#ffc478;background:radial-gradient(ellipse at top,#ff8a3d2e,transparent 70%),linear-gradient(180deg,#2a1d16,#17120f);color:#fff;
    box-shadow:0 0 0 1px #ffc478 inset,0 8px 22px #ff8a3d22}
.cg-game.is-on .cg-game-icon{background:linear-gradient(180deg,#ffb256,#ff6a1a);box-shadow:0 4px 12px #ff6a1a55;color:#2a1206}
.cg-game.is-on small{color:#ffcf96}
@media (max-width:1600px){.cg-game{flex-direction:column;gap:6px;padding:10px 6px;text-align:center}.cg-game-text{justify-items:center;max-width:100%}.cg-game-text small{display:none}.cg-game-icon{width:34px;height:34px}}
@media (max-width:1100px){
    .cg-nav{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding:2px 4px 4px}
    .cg-nav::-webkit-scrollbar{display:none}
    .cg-game{flex:none;flex-direction:row;gap:10px;padding:9px 12px;text-align:left}
    .cg-game-text{justify-items:start}
    .cg-game-text small{display:block}
}

/* A game's title: its icon in a gold badge; the eyebrow goes back to the lobby. */
.cj-back-link{display:inline-block;transition:color .15s}
.cj-back-link:hover{color:#ffc478}
.cj-head h1{display:flex;align-items:center;gap:14px}
.cj-title-icon{display:grid;place-items:center;flex:none;width:1.15em;height:1.15em;border-radius:.28em;background:linear-gradient(180deg,#2a2016,#17120d);
    box-shadow:inset 0 0 0 1px #e8b64e66,0 6px 16px #0007;color:#ffcf7a}
.cj-title-icon .cg-icon{width:68%;height:68%}

/* 🎰 The lobby: a card per game, each with its own colour. */
.cl-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:16px}
.cl-head h1{margin:3px 0 4px;font-size:clamp(26px,2.4vw,32px)}
.cl-head p{margin:0;color:#a9a2ad;font-size:13px}
.cl-balance{display:flex;align-items:baseline;gap:8px;padding:9px 16px;border:1px solid #ffc47855;border-radius:999px;background:#ffc4780f}
.cl-balance small{font-size:11px;color:var(--muted)}
.cl-balance b{font:700 22px/1 Rajdhani,Arial,sans-serif;color:var(--gold);font-variant-numeric:tabular-nums}
.cl-balance span{font-size:11px;color:var(--muted)}
.cl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.cl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cl-grid{grid-template-columns:1fr}}
.cl-card{--a:#e8b64e;--g1:#2a2016;--g2:#120e0a;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--panel);color:inherit;
    transition:transform .18s,border-color .18s,box-shadow .18s}
.cl-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--a) 70%,transparent);box-shadow:0 16px 36px #0008,0 0 0 1px color-mix(in srgb,var(--a) 35%,transparent);color:inherit}
.cl-art{position:relative;display:grid;place-items:center;height:160px;background:radial-gradient(ellipse 70% 80% at 50% 30%,color-mix(in srgb,var(--a) 28%,transparent),transparent 70%),linear-gradient(160deg,var(--g1),var(--g2))}
.cl-art:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,#ffffff05 0 2px,transparent 2px 9px);pointer-events:none}
.cl-scene{position:relative;z-index:1;width:92%;height:88%;filter:drop-shadow(0 10px 16px #0007);transition:transform .3s ease}
.cl-card:hover .cl-scene{transform:scale(1.06) translateY(-2px)}
.cl-spin{transform-box:fill-box;transform-origin:center}
.cl-card:hover .cl-spin{animation:clSpin 5s linear infinite}
@keyframes clSpin{to{transform:rotate(360deg)}}
.cl-tag{position:absolute;top:12px;right:12px;z-index:1;padding:5px 10px;border-radius:999px;background:#000000a0;border:1px solid color-mix(in srgb,var(--a) 50%,transparent);
    color:var(--a);font:700 12px/1 Rajdhani,Arial,sans-serif;letter-spacing:.6px}
.cl-live{position:absolute;left:12px;bottom:12px;z-index:1;display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;background:#000000b0;color:#e9e3dc;font-size:11.5px}
.cl-live:before{content:"";width:7px;height:7px;border-radius:50%;background:#50dc8c;box-shadow:0 0 8px #50dc8c}
.cl-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:16px 18px 18px}
.cl-body h2{margin:0;font-size:24px}
.cl-body p{margin:0;color:#b9b2bd;font-size:13px;line-height:1.5}
.cl-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;color:var(--a);font:700 15px/1 Rajdhani,Arial,sans-serif;letter-spacing:.5px}
.cl-go i{font-style:normal;transition:transform .18s}
.cl-card:hover .cl-go i{transform:translateX(4px)}
.cl-card.t-blackjack{--a:#5fe0a0;--g1:#0f4a30;--g2:#062016}
.cl-card.t-slots{--a:#c99bff;--g1:#3a1f52;--g2:#140b1e}
.cl-card.t-roulette{--a:#ff7a86;--g1:#4a1218;--g2:#1a0709}
.cl-card.t-rocket{--a:#8fb4ff;--g1:#1d2456;--g2:#0a0c1e}
.cl-card.t-mines{--a:#5fdfe8;--g1:#123c46;--g2:#071619}
.cl-card.t-raffle{--a:#ffae5c;--g1:#4a2a10;--g2:#1a0e06}
.cl-note{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:22px;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--line)}
.cl-note>div{display:grid;gap:3px;padding:14px 18px;background:#17161b}
.cl-note b{font:700 15px/1.2 Rajdhani,Arial,sans-serif;color:#fff}
.cl-note span{font-size:12px;color:var(--muted)}
@media (max-width:700px){.cl-note{grid-template-columns:1fr}.cl-art{height:130px}}