/* 🎰 Casino Solaryx · the games beside blackjack: slots, roulette, rocket, mines and the raffle. Shares the head,
   the layout, the bet bar and the info panel with casino.css. */
.cg-stage{min-width:0;container-type:inline-size}
.cg-stage>.cj-bet,.cg-stage>.rf-buy,.cg-stage>.cg-options,.cg-stage>.mn-play{margin-top:14px}
/* The result, over the game. */
.cg-banner{position:absolute;left:0;right:0;bottom:18px;z-index:5;display:grid;justify-items:center;gap:4px;padding:12px 10px;
    background:linear-gradient(90deg,transparent,#07060af2 15%,#07060af2 85%,transparent);border-block:2px solid var(--rc,#ffc83d);
    box-shadow:0 0 40px color-mix(in srgb,var(--rc,#ffc83d) 30%,transparent);pointer-events:none}
.cg-banner strong{font:700 clamp(26px,3.2vw,38px)/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) 55%,transparent)}
.cg-banner span{font:700 15px/1 Rajdhani,Arial,sans-serif;color:#efe9e3}
.cg-banner.is-in{animation:cgBanner .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes cgBanner{from{opacity:0;transform:scale(.85)}}
/* Options above the bet: segmented choices. */
.cg-options{display:grid;gap:8px;padding:14px 16px;border:1px solid #ffffff14;border-radius:18px;background:linear-gradient(180deg,#1d1a1f,#141217)}
.cg-seg{padding:10px 14px;border:1px solid #ffffff1c;border-radius:11px;background:#0d0c10;color:#ddd6de;font:700 15px/1 Rajdhani,Arial,sans-serif;cursor:pointer;transition:all .12s}
.cg-seg:hover{border-color:#ffc47866;color:#fff}
.cg-seg.is-on{border-color:#ffc478;background:#ffc4781a;color:#ffd79a;box-shadow:0 0 0 1px #ffc478 inset}
.cg-stage [hidden]{display:none!important}

/* 🎰 The slot machine: three drums behind a gold frame, a pay line between two arrows. */
.sl-machine{position:relative;padding:22px 22px 112px;border-radius:30px;border:2px solid #e8b64e;
    background:radial-gradient(ellipse 70% 50% at 50% 0,#4a2a5a55,transparent 70%),linear-gradient(180deg,#221828,#0e0b12);box-shadow:0 0 0 8px #1a1015,0 20px 50px #0009}
.sl-title{margin-bottom:16px;text-align:center;font:700 26px/1 Rajdhani,Arial,sans-serif;letter-spacing:3px;color:#e8b64e;text-shadow:0 0 18px #e8b64e55}
.sl-window{--cell:118px;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:560px;margin:auto}
.sl-reel{position:relative;height:calc(var(--cell) * 1.7);overflow:hidden;border:3px solid #e8b64e;border-radius:18px;background:#faf6ee}
.sl-reel:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#1e140bcc,transparent 30%,transparent 70%,#1e140bcc);pointer-events:none}
.sl-strip{position:absolute;left:0;right:0;top:0;will-change:transform}
.sl-cell{display:grid;place-items:center;height:var(--cell)}
.sl-cell svg{width:72%;height:72%;filter:drop-shadow(0 3px 2px #0004)}
.sl-reel.is-tense{box-shadow:0 0 0 3px #ffc83d,0 0 30px #ffc83daa;animation:slTense .5s ease-in-out infinite alternate}
@keyframes slTense{to{box-shadow:0 0 0 3px #ffe08a,0 0 46px #ffc83d}}
.sl-reel.is-hit{box-shadow:0 0 0 3px #50dc8c,0 0 26px #50dc8c88}
.sl-arrow{position:absolute;top:50%;width:0;height:0;border-block:11px solid transparent;transform:translateY(-50%)}
.sl-arrow.left{left:-20px;border-left:15px solid #e8b64e}
.sl-arrow.right{right:-20px;border-right:15px solid #e8b64e}

/* 🎡 The roulette: a strip of pockets sliding under a gold marker. */
.rl-table{position:relative;padding:22px 0 96px;border-radius:30px;border:2px solid #e8b64e;background:radial-gradient(ellipse 70% 60% at 50% 0,#3a1d1d66,transparent 70%),linear-gradient(180deg,#1f1518,#0d0a0c);
    box-shadow:0 0 0 8px #1a1015,0 20px 50px #0009;overflow:hidden}
.rl-title{text-align:center;font:700 26px/1 Rajdhani,Arial,sans-serif;letter-spacing:3px;color:#e8b64e;text-shadow:0 0 18px #e8b64e55}
.rl-track{position:relative;height:150px;margin-top:18px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.rl-strip{position:absolute;top:24px;left:0;display:flex;gap:8px;will-change:transform}
.rl-pocket{display:grid;place-items:center;flex:none;width:78px;height:104px;border-radius:12px;border:2px solid #ffffff22;font:700 34px/1 Rajdhani,Arial,sans-serif;color:#fff;box-shadow:inset 0 -10px 20px #0004}
.rl-pocket.red{background:linear-gradient(180deg,#e0303e,#a81c28)}
.rl-pocket.black{background:linear-gradient(180deg,#2c2a33,#141318)}
.rl-pocket.green{background:linear-gradient(180deg,#22b06a,#127a45)}
.rl-pocket.is-under{border-color:#ffc83d99;box-shadow:0 0 0 2px #ffc83d66}
.rl-pocket.is-hit{border-color:#ffc83d;box-shadow:0 0 0 3px #ffc83d,0 0 30px #ffc83daa}
.rl-marker{position:absolute;left:50%;z-index:2;width:0;height:0;border-inline:13px solid transparent;transform:translateX(-50%)}
.rl-marker.top{top:4px;border-top:18px solid #e8b64e}
.rl-marker.bottom{bottom:4px;border-bottom:18px solid #e8b64e}
.rl-history{display:flex;justify-content:center;gap:6px;min-height:30px;margin-top:6px}
.rl-history i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:700 13px/1 Rajdhani,Arial,sans-serif;font-style:normal;color:#fff}
.rl-bets{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.rl-bet{display:grid;justify-items:center;gap:3px;padding:10px 6px;border:1px solid #ffffff1c;border-radius:12px;background:#0d0c10;color:#e8e2ea;cursor:pointer;transition:all .12s}
.rl-bet b{font:700 17px/1 Rajdhani,Arial,sans-serif}
.rl-bet small{font-size:11px;color:#a49ea8}
.rl-bet.is-red{background:linear-gradient(180deg,#b8232f,#7c1520)}
.rl-bet.is-black{background:linear-gradient(180deg,#2a2830,#121116)}
.rl-bet:hover{border-color:#ffc47877}
.rl-bet.is-on{border-color:#ffc478;box-shadow:0 0 0 2px #ffc478 inset,0 0 16px #ffc47844}
.rl-number input{width:62px;padding:3px 4px;border:1px solid #ffffff22;border-radius:7px;background:#000;color:#fff;text-align:center;font:700 15px/1 Rajdhani,Arial,sans-serif}

/* 🚀 The rocket: a chart that climbs, the multiplier large in the middle. */
.rk-sky{position:relative;border-radius:30px;border:2px solid #e8b64e;overflow:hidden;background:radial-gradient(ellipse 80% 60% at 70% 0,#2a2a6a55,transparent 70%),linear-gradient(180deg,#14132a,#08080e);
    box-shadow:0 0 0 8px #11101a,0 20px 50px #0009}
.rk-sky canvas{display:block;width:100%;height:auto;aspect-ratio:900/420}
.rk-read{position:absolute;left:0;right:0;top:12%;display:grid;justify-items:center;gap:4px;pointer-events:none}
.rk-read strong{font:700 clamp(46px,7vw,78px)/1 Rajdhani,Arial,sans-serif;color:#fff;text-shadow:0 3px 0 #000,0 0 30px #ffffff33;font-variant-numeric:tabular-nums}
.rk-read span{font:700 14px/1 Rajdhani,Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:#b8b4d0}
.rk-sky.is-cashed .rk-read strong{color:#50dc8c}
.rk-sky.is-boom .rk-read strong{color:#ff5c6c}
.rk-targets{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rk-custom{height:42px}
.rk-custom span{display:grid;place-items:center;padding:0 4px 0 12px;color:#a49ea8;font:700 18px/1 Rajdhani,Arial,sans-serif}
.rk-custom input{width:80px}
.rk-odds{font-size:12px;color:#a49ea8}
.rk-odds b{color:#ffd79a}

/* 💣 Mines: 4 rows of 5 tiles. */
.mn-board{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:22px;border-radius:30px;border:2px solid #e8b64e;
    background:radial-gradient(ellipse 70% 60% at 50% 0,#1c3a4a55,transparent 70%),linear-gradient(180deg,#141a22,#090b10);box-shadow:0 0 0 8px #0e1116,0 20px 50px #0009}
.mn-cell{position:relative;display:grid;place-items:center;aspect-ratio:1.6;border:0;border-radius:14px;background:linear-gradient(180deg,#2c3442,#1c222c);box-shadow:inset 0 -5px 0 #0006,inset 0 1px 0 #ffffff14;
    cursor:pointer;transition:transform .12s,filter .12s;font-size:clamp(24px,4vw,40px)}
.mn-cell:empty:after{content:"";width:16%;aspect-ratio:1;border:2px solid #ffffff1f;border-radius:4px;transform:rotate(45deg)}
.mn-cell:not(:disabled):hover:after{border-color:#ffc47888}
.mn-cell:not(:disabled):hover{transform:translateY(-3px);filter:brightness(1.25)}
.mn-cell:disabled{cursor:default}
.mn-cell.is-gem{background:radial-gradient(circle,#1d6e4a,#0f3a28);box-shadow:inset 0 0 0 2px #50dc8c88}
.mn-cell.is-mine{background:radial-gradient(circle,#8a2a3a,#4a1220);box-shadow:inset 0 0 0 2px #ff5c6c66}
.mn-cell.is-hit{background:radial-gradient(circle,#ff5c6c,#8a1424);box-shadow:0 0 24px #ff5c6caa}
.mn-cell.is-dim{opacity:.45}
.mn-cell svg{width:52%;height:52%}
.mn-board .cg-banner{bottom:auto;top:50%;transform:translateY(-50%)}
.mn-counts{display:flex;flex-wrap:wrap;gap:8px}
.mn-counts .cg-seg b{font-size:18px;color:#fff}
.mn-play{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:18px;padding:14px 16px;border:1px solid #ffffff14;border-radius:18px;background:linear-gradient(180deg,#1d1a1f,#141217)}
.mn-stat{display:grid;gap:4px}
.mn-stat small{font:700 11px/1 Rajdhani,Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:#a49ea8}
.mn-stat b{font:700 28px/1 Rajdhani,Arial,sans-serif;color:#fff;font-variant-numeric:tabular-nums}
.mn-cash{margin-left:auto;background:linear-gradient(180deg,#5fe39b,#1f9f62)!important;box-shadow:inset 0 1px 0 #fff6,0 4px 0 #13663e,0 10px 22px #1f9f6244!important;color:#062a17!important}
.mn-cash small{color:#0b3b22!important}
.mn-cash:disabled{filter:grayscale(.8) brightness(.7);cursor:default}

/* 🎟 The raffle: a ticket with the pot, the countdown and your chances. */
.rf-ticket{position:relative;display:grid;grid-template-columns:1.1fr 1fr;border-radius:26px;overflow:hidden;border:2px solid #e8b64e;background:linear-gradient(120deg,#2a1d0c,#120d08);box-shadow:0 0 0 8px #17110a,0 20px 50px #0009}
.rf-main{display:grid;align-content:center;justify-items:center;gap:6px;padding:34px 20px;border-right:3px dashed #e8b64e66;
    background:radial-gradient(ellipse 80% 70% at 50% 40%,#ffc83d22,transparent 70%)}
.rf-main small{font:700 13px/1 Rajdhani,Arial,sans-serif;letter-spacing:2px;color:#e8b64e}
.rf-main strong{font:700 clamp(54px,8vw,86px)/1 Rajdhani,Arial,sans-serif;color:#ffd77a;text-shadow:0 3px 0 #000,0 0 30px #ffc83d55;font-variant-numeric:tabular-nums}
.rf-main span{color:#d8cfc0;font-size:14px}
.rf-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e8b64e22}
.rf-facts>div{display:grid;align-content:center;gap:5px;padding:18px;background:#130e09}
.rf-facts small{font:700 11px/1 Rajdhani,Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:#a49a8c}
.rf-facts b{font:700 28px/1 Rajdhani,Arial,sans-serif;color:#fff;font-variant-numeric:tabular-nums}
.rf-mine em{font-style:normal;font-size:12px;color:#50dc8c}
.rf-buy{display:grid;gap:10px;padding:14px 16px;border:1px solid #ffffff14;border-radius:18px;background:linear-gradient(180deg,#1d1a1f,#141217)}
.rf-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rf-pack{margin:0!important;min-width:0!important;justify-self:stretch!important}
.rf-pack.is-alt{background:linear-gradient(180deg,#3a3440,#24202a)!important;color:#f3eef5!important;box-shadow:inset 0 1px 0 #ffffff22,0 4px 0 #120f16!important}
.rf-pack.is-alt small{color:#cfc8d2!important}
.rf-winners{margin-top:22px}
.rf-winners h3{margin-bottom:10px;font-size:18px;color:var(--gold)}
.rf-winner{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:14px}
.rf-winner>b{color:#50dc8c}

@container (max-width:640px){
    .sl-window{--cell:84px;gap:8px}
    .sl-machine{padding-bottom:100px}
    .rl-table{padding-bottom:80px}
    .rl-bets{grid-template-columns:repeat(3,1fr)}
    .rl-pocket{width:60px;height:84px;font-size:26px}
    .rf-ticket{grid-template-columns:1fr}
    .rf-main{border-right:0;border-bottom:3px dashed #e8b64e66}
    .rf-buttons{grid-template-columns:1fr 1fr}
    .mn-board{gap:7px;padding:14px}
    .mn-play{grid-template-columns:1fr 1fr}
    .mn-cash{grid-column:1/-1;width:100%}
}