/* Casino game lesson. All rules scoped under .cas-* */
.cas-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cas-room { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 12px; }

/* The wheel: a disc turning under a fixed ball. */
.cas-wheel2 { position: relative; width: 170px; height: 170px; flex: none; }
.cas-wheel2.cas-small { width: 112px; height: 112px; }
.cas-wheel2.cas-small .z { display: none; }
.cas-disc { position: absolute; inset: 0; will-change: transform; }
.cas-disc svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
.cas-disc .rim { fill: #5a3a1e; stroke: #c9a24a; stroke-width: 2; }
.cas-disc path { stroke: rgba(255,255,255,.22); stroke-width: .5; transition: opacity .6s; }
.cas-disc path.r { fill: #c8323a; } .cas-disc path.k { fill: #1b1d24; } .cas-disc path.g { fill: #1aa35a; }
.cas-disc .z { font: 800 19px var(--sans); fill: #fff; text-anchor: middle; dominant-baseline: middle; transition: opacity .6s; }
.cas-disc .hub { fill: #7a5230; stroke: #c9a24a; stroke-width: 2; }
.cas-disc .cap { fill: #e6c463; }
.cas-ball2 { position: absolute; left: 50%; top: -2%; width: 7%; height: 7%; margin-left: -3.5%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #c9c9c9); box-shadow: 0 1px 3px rgba(0,0,0,.6); transition: top .45s cubic-bezier(.5,1.6,.5,1); }
.cas-ball2.in { top: 7%; }
.cas-ptr { position: absolute; left: 50%; top: -9%; margin-left: -6px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--gold); }
.cas-wheel2.cas-nogreen path.g, .cas-wheel2.cas-nogreen .z { opacity: .08; }
.cas-row { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; }

/* The felt: 0 and 00 at the left, 1 to 36 in three rows, the outside bets below. */
.cas-felt { width: 100%; max-width: 360px; padding: 8px; border-radius: 16px; background: radial-gradient(120% 120% at 50% 0%, #1f7a4a, #0f4a2c); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 12px 26px rgba(0,0,0,.4); }
.cas-grid { display: grid; grid-template-columns: 30px 1fr; gap: 2px; }
.cas-zeros { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; }
.cas-nums { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 28px; gap: 2px; }
.cas-cell { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 4px; font: 700 12px/1 var(--sans); color: #fff; transition: opacity .4s, background-color .4s, box-shadow .2s; }
.cas-r { background: #c8323a; }
.cas-k { background: #1b1d24; }
.cas-g { background: #1aa35a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); font-size: 13px; }
.cas-cell.cas-win { box-shadow: inset 0 0 0 2px var(--gold), 0 0 8px rgba(252,192,80,.6); }
.cas-cell.cas-ball { background: #fff !important; color: #111; transform: scale(1.12); z-index: 2; box-shadow: 0 0 12px rgba(255,255,255,.9); }
.cas-cell.cas-done { opacity: .45; }
.cas-cell.cas-win.cas-done { opacity: 1; background-color: rgba(252,192,80,.85); color: #2a1c00; }
.cas-nogreen .cas-g { opacity: .08; transition: opacity .6s; }
.cas-outs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; margin: 2px 0 0 32px; }
.cas-box { position: relative; grid-column: span 2; display: flex; align-items: center; justify-content: center; height: 26px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); font: 700 12px/1 var(--sans); color: #fff; }
.cas-box.cas-half { grid-column: span 1; }
.cas-redbox { background: #c8323a; }
.cas-blkbox { background: #1b1d24; }
.cas-box.cas-win { box-shadow: inset 0 0 0 2px var(--gold); }

/* Chips. */
.cas-chip { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font: 800 10px/1 var(--sans); font-style: normal; color: #fff;
  background: radial-gradient(circle at 35% 30%, #9f86ff, #5b3fd6); box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), inset 0 0 0 5px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.4); }
.cas-cell .cas-chip, .cas-box .cas-chip { position: absolute; right: -4px; top: -6px; z-index: 3; animation: casDrop .45s cubic-bezier(.2,1.3,.4,1) both; }
.cas-chip.cas-mine { background: radial-gradient(circle at 35% 30%, #ffe08a, #e0a020); color: #3a2600; }
.cas-chip.cas-other { background: radial-gradient(circle at 35% 30%, #7fd3ff, #2a7fc0); transition: transform .7s ease-in, opacity .7s ease-in; }
.cas-o1 { animation-delay: .12s !important; } .cas-o2 { animation-delay: .24s !important; } .cas-o3 { animation-delay: .36s !important; } .cas-o4 { animation-delay: .48s !important; } .cas-o5 { animation-delay: .6s !important; }
.cas-chip.cas-swept { transform: translate(-60px, -120px) scale(.4); opacity: 0; }
@keyframes casDrop { from { transform: translateY(-30px) scale(1.4); opacity: 0; } }

/* Bets to tap. */
.cas-bets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 360px; }
.cas-bets.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cas-bet { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 56px; padding: 8px 4px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line-strong); color: var(--text); font: 700 13px var(--sans); cursor: pointer; }
.cas-bet.locked { pointer-events: none; }
.cas-bet.cas-picked { border-color: var(--gold); background: rgba(252,192,80,.16); }
.cas-bet .cas-chip { width: 24px; height: 24px; }

/* The wallet. */
.cas-purse { display: flex; align-items: baseline; gap: 10px; padding: 6px 14px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line-strong); }
.cas-purse small { font: 700 12px var(--sans); color: var(--dim); }
.cas-purse b { font: 800 30px/1 var(--serif); color: var(--gold); font-variant-numeric: tabular-nums; min-width: 62px; text-align: center; }
.cas-purse span { font: 600 12px var(--sans); color: var(--dim); }
.cas-purse em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--text); }
.cas-purse.cas-up b { animation: casUp .35s ease-out; }
@keyframes casUp { 50% { transform: scale(1.18); } }

.cas-score { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 360px; }
.cas-score span { display: flex; flex-direction: column; align-items: center; padding: 5px 2px; border-radius: 10px; background: rgba(255,255,255,.05); font: 600 12px var(--sans); color: var(--dim); }
.cas-score b { font: 800 20px var(--serif); color: var(--text); }
.cas-score.cas-all b { color: var(--gold); }

/* Two wheels. */
.cas-wheels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: 340px; }
.cas-wheel { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cas-wheel svg { width: 100%; max-width: 150px; height: auto; }
.cas-wheel path.r { fill: #c8323a; } .cas-wheel path.k { fill: #1b1d24; } .cas-wheel path.g { fill: #1aa35a; }
.cas-wheel path { stroke: rgba(255,255,255,.25); stroke-width: .3; }
.cas-wheel .hub { fill: #6b4423; stroke: #c9a24a; stroke-width: 1.5; }
.cas-wheel figcaption { display: flex; flex-direction: column; align-items: center; font: 700 14px var(--sans); color: var(--text); }
.cas-wheel figcaption span { font: 600 12px var(--sans); color: #4fd38a; }

/* Cards. */
.cas-lab { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.cas-pile { display: grid; grid-template-columns: repeat(9, minmax(0, 32px)); gap: 4px; justify-content: center; }
.cas-card { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 42px; border-radius: 5px; background: #fbf8f1; color: #1b1d24; box-shadow: 0 2px 4px rgba(0,0,0,.35); animation: casDeal .35s ease-out both; }
.cas-card b { font: 800 13px/1 var(--sans); }
.cas-card i { font: 400 13px/1 var(--sans); font-style: normal; }
.cas-card.red { color: #c8323a; }
.cas-card.back { width: 32px; background: repeating-linear-gradient(45deg, #5b3fd6 0 4px, #7b5cfd 4px 8px); box-shadow: inset 0 0 0 2px #fff, 0 2px 4px rgba(0,0,0,.35); }
@keyframes casDeal { from { transform: translateY(-14px); opacity: 0; } }
.cas-shoe { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cas-backs { display: flex; gap: 4px; }
.cas-backs .cas-card { width: 32px; }
.cas-shoe small { font: 600 12px var(--sans); color: var(--dim); }

/* Blackjack hands and decks. */
.cas-hands { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.cas-hand { display: flex; flex-direction: column; align-items: center; gap: 6px; animation: casDeal .35s ease-out both; }
.cas-hand small { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.cas-hand b { font: 800 17px var(--serif); color: var(--gold); }
.cas-cards { display: flex; gap: 6px; }
.cas-hand .cas-card, .cas-deck .cas-card { width: 42px; height: 58px; }
.cas-hand .cas-card b, .cas-deck .cas-card b { font-size: 17px; }
.cas-hand .cas-card i, .cas-deck .cas-card i { font-size: 16px; }
.cas-decks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 360px; }
.cas-deck { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line-strong); color: var(--text); font: 700 13px/1.25 var(--sans); cursor: pointer; }
.cas-deck .cas-cards { gap: 0; }
.cas-deck .cas-card { width: 34px; height: 50px; margin-left: -8px; }
.cas-deck .cas-card:first-child { margin-left: 0; }
.cas-deck.locked { pointer-events: none; }
.cas-deck.cas-picked { border-color: var(--violet-bright); }
.cas-deck.cas-best { border-color: var(--gold); background: rgba(252,192,80,.14); }
@media (max-height: 700px) {
  .cas-wheel2 { width: 130px; height: 130px; }
  .cas-wheel2.cas-small { width: 96px; height: 96px; }
  .cas-nums { grid-auto-rows: 24px; }
  .cas-box { height: 22px; }
  .cas-card { height: 36px; }
  .cas-pile { grid-template-columns: repeat(9, minmax(0, 30px)); gap: 3px; }
}