/* The new Hideout, Section 4d: the Casino's Slots panel (ui/hideout-casino.js). Reuses .hcRoot / .hbPanel / .hbMoney. */
.csPanel { max-width:760px; margin:0 auto; width:100%; }
.csBody { padding:6px 18px 18px; display:flex; flex-direction:column; align-items:center; }
.csMachine { width:100%; max-width:560px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.csSign { font:400 34px var(--fh); letter-spacing:4px; color:#ffd23f; text-shadow:0 0 12px #ff3b6b, 0 0 24px #ff3b6b, var(--so); }
.csReels { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:100%; padding:16px; border-radius:22px; border:4px solid var(--ol); background:linear-gradient(180deg,#5a1630,#2a0b1c); box-shadow:inset 0 0 0 3px #c99a2e, 0 6px 0 var(--ol); }
.csReel { aspect-ratio:1; border-radius:14px; border:3px solid var(--ol); background:linear-gradient(180deg,#fff,#e9e2d0); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.csReel img { width:78%; height:78%; object-fit:contain; }
.csReel.go img { filter:blur(1.5px); transform:translateY(6%); }
.csReel.stop { animation:csStop .25s ease-out; }
@keyframes csStop { 0% { transform:translateY(-8%); } 60% { transform:translateY(4%); } 100% { transform:none; } }
.csLine { position:absolute; left:8px; right:8px; top:50%; height:3px; background:rgba(255,60,90,.65); pointer-events:none; }
.csWin { min-height:40px; font:400 26px var(--fh); text-shadow:var(--so); color:#cfe0f8; }
.csWin b.g { color:#8ff56a; } .csWin .big { display:inline-block; padding:2px 10px; border-radius:10px; background:#ffd23f; color:#0b1a33; text-shadow:none; }
.csBets { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:100%; }
.csBet { padding:10px 6px; border-radius:12px; border:3px solid var(--ol); background:#24426f; color:#fff; font:400 18px var(--fh); text-shadow:var(--so); cursor:pointer; box-shadow:0 3px 0 var(--ol); }
.csBet.on { background:linear-gradient(180deg,#ffd23f,#e8a20f); color:#0b1a33; text-shadow:none; }
.csBet:disabled { opacity:.45; cursor:default; }
#csSpin { height:68px; font-size:28px; }
.csFoot { display:flex; align-items:center; justify-content:space-between; width:100%; }
.csFoot small { color:#bcd6f5; font:800 13px var(--fb); }
.csPays { width:100%; display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.csPay { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; border-radius:12px; border:2px solid var(--ol); background:rgba(8,20,45,.5); }
.csPay span { display:flex; align-items:center; gap:2px; } .csPay img { width:28px; height:28px; object-fit:contain; } .csPay i { font:800 11px var(--fb); color:#bcd6f5; margin-left:4px; font-style:normal; }
.csPay b { font:400 18px var(--fh); color:#ffd23f; text-shadow:var(--so); }
.csNote { grid-column:1 / -1; color:#bcd6f5; font:800 13px var(--fb); text-align:center; margin:6px 0; }
.csOpen { margin:40px 0; font:400 26px var(--fh); text-shadow:var(--so); display:flex; align-items:center; gap:10px; } .csOpen svg { width:26px; height:26px; }
#h2Root.phone .csBody { padding:4px 10px 12px; } #h2Root.phone .csSign { font-size:26px; } #h2Root.phone .csBet { font-size:15px; padding:9px 2px; }
#h2Root.phone .csPays { grid-template-columns:1fr; }