/* Gambling lesson. All rules scoped under .gm-* */

/* the casino panel, one across the lesson */
.gm-app { width: 100%; display: grid; gap: 10px; padding: 12px 14px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.gm-top { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.gm-top b { font-weight: 800; }
.gm-top em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.gm-logo { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, #1f8a4c 0 34%, transparent 35%), conic-gradient(#c8322a 0 25%, #15151c 0 50%, #c8322a 0 75%, #15151c 0); border: 2px solid var(--gold-deep); }
.gm-you .gm-logo { background: var(--violet); border-color: var(--violet-bright); }

/* stat strip: small caps label over a mono value */
.gm-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.gm-s { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; background: var(--raised); text-align: center; }
.gm-s small { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.gm-s b { font: 600 14px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .3s; }
.gm-s b.up { color: var(--mint); } .gm-s b.gold { color: var(--gold); } .gm-s b.dn { color: #FF8A8A; }

/* beat 1: the wheel beside the numbers, a dollar chip on every pocket */
.gm-deal { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
.gm-side .gm-strip { grid-template-columns: 1fr 1fr; }
.gm-chips { display: grid; grid-template-columns: repeat(19, minmax(0, 13px)); justify-content: center; gap: 3px; }
.gm-chips i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--violet); border: 2px solid var(--violet-deep); transition: background .3s, border-color .3s, transform .3s; }
.gm-chips i.back { background: var(--mint); border-color: #1f8a63; }
.gm-chips i.kept { background: var(--gold); border-color: var(--gold-deep); transform: scale(1.35); box-shadow: 0 0 10px rgba(252, 192, 80, .7); }
.gm-note { text-align: center; font-size: 13px; font-weight: 700; color: var(--dim); min-height: 18px; }
.gm-note b { font-family: var(--mono); color: var(--gold); }

/* the wheel: an SVG disc that turns under a fixed ball;
   clipped so the spinning disc's rotated box does not count as overflow */
.gm-wheel { position: relative; width: 120px; overflow: hidden; }
.gm-disc { width: 100%; height: auto; display: block; transition: transform 2.4s cubic-bezier(.12, .75, .18, 1); will-change: transform; }
.gm-wheel .gm-rim { fill: #3a2414; stroke: var(--gold-deep); stroke-width: 2; }
.gm-wheel .gm-hub { fill: #2a1a0e; stroke: var(--gold-deep); stroke-width: 1.5; }
.gm-wheel .gm-p { stroke: #1b1208; stroke-width: .6; }
.gm-wheel .gm-p.r { fill: #c8322a; } .gm-wheel .gm-p.k { fill: #15151c; } .gm-wheel .gm-p.g { fill: #1f8a4c; }
.gm-wheel .gm-p.hit { stroke: #fff; stroke-width: 2.4; }
.gm-wheel .gm-n { fill: #fff; font: 700 8px var(--sans); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.gm-ball {
  position: absolute; left: 50%; top: 5%; width: 9%; aspect-ratio: 1; margin-left: -4.5%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #b9b9b9); box-shadow: 0 1px 3px rgba(0, 0, 0, .7); transition: transform .3s, opacity .3s;
}
.gm-wheel.spinning .gm-ball { transform: translateY(-40%) scale(.8); opacity: .5; }
.gm-ball.in { animation: gmDrop .4s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes gmDrop { from { transform: translateY(-40%) scale(.6); } }

/* the 37 pockets as one bar: 18 pay a bet on red, 19 pay the casino */
.gm-pk { display: grid; gap: 4px; }
.gm-pkbar { display: grid; grid-template-columns: 18fr 19fr; gap: 6px; }
.gm-pkbar span { display: flex; gap: 1.5px; }
.gm-pkbar i { flex: 1; height: 14px; border-radius: 2px; }
.gm-pkbar i.r { background: #c8322a; } .gm-pkbar i.k { background: #2a2a34; } .gm-pkbar i.g { background: #1f8a4c; }
.gm-pkcap { display: grid; grid-template-columns: 18fr 19fr; gap: 6px; font-size: 11.5px; font-weight: 700; }
.gm-pkcap .them { color: #FF8A8A; } .gm-pkcap .you { color: var(--gold); text-align: right; }

/* beats 2 and 3: a hundred players, one dot each */
.gm-crowd { display: grid; grid-template-columns: repeat(20, minmax(0, 12px)); justify-content: center; gap: 3px; }
.gm-crowd i, .gm-crowdcap i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--raised); transition: background .25s; }
.gm-crowd i.up, .gm-crowdcap i.up { background: var(--mint); }
.gm-crowd i.ev, .gm-crowdcap i.ev { background: var(--faint); }
.gm-crowd i.dn, .gm-crowdcap i.dn { background: var(--red); }
.gm-crowdcap { display: flex; justify-content: center; gap: 14px; font-size: 11.5px; font-weight: 700; color: var(--dim); }
.gm-crowdcap span { display: flex; align-items: center; gap: 5px; }
.gm-crowdcap i { width: 9px; }

/* beat 4: the Golden Nugget's big bets, then one bet drawn to its odds */
.gm-hero { width: min(70%, 260px); margin: 0 auto; }
.gm-hero img { width: 100%; display: block; }
.gm-hero.gone, .gm-hit:not(.on) { display: none; }
.gm-hit { display: grid; gap: 6px; width: 100%; padding: 22px 16px; border-radius: 18px; background: var(--surface); border: 2px solid var(--red); text-align: center; animation: gmPop .4s cubic-bezier(.34, 1.56, .64, 1); }
.gm-hit b { font: 800 34px var(--mono); color: #FF8A8A; }
.gm-hit span { font-size: 15px; font-weight: 700; color: var(--text); }
.gm-hit em { font-style: normal; font-size: 14px; font-weight: 800; color: var(--gold); }
.gm-out { display: grid; gap: 8px; visibility: hidden; }
.gm-app.shown .gm-out { visibility: visible; }
.gm-o { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--dim); }
.gm-o i { display: block; height: 10px; width: 0; border-radius: 999px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.gm-o.them i { background: var(--red); } .gm-o.you i { background: var(--gold); }
.gm-o b { color: var(--text); font-family: var(--mono); font-weight: 600; }

/* beat 5: two plans side by side, a chance under each */
.gm-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gm-plan { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--raised); font-size: 14px; }
.gm-plan > b { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-bright); }
.gm-plan > span { font-weight: 600; flex: 1; }
.gm-odds { display: grid; gap: 4px; visibility: hidden; }
.gm-odds.on { visibility: visible; animation: gmPop .4s cubic-bezier(.34, 1.56, .64, 1); }
.gm-odds strong { font: 800 26px var(--sans); line-height: 1.1; }
.gm-plan.a strong { color: var(--mint); } .gm-plan.b strong { color: #FF8A8A; }
.gm-odds u { display: block; height: 8px; border-radius: 999px; background: rgba(234, 227, 215, .08); overflow: hidden; }
.gm-odds u i { display: block; height: 100%; width: 0; min-width: 3px; border-radius: 999px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.gm-plan.a u i { background: var(--mint); } .gm-plan.b u i { background: var(--red); }
.gm-odds small { font-size: 12px; font-weight: 700; color: var(--dim); min-height: 30px; }
@keyframes gmPop { from { transform: scale(.85); opacity: 0; } }

/* other games' cuts */
.gm-cuts { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; min-height: 96px; }
.gm-cut { display: grid; grid-template-columns: 96px 1fr 44px; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--dim); animation: cardIn .25s both; }
.gm-cut i { display: block; height: 12px; border-radius: 999px; background: #06080f; overflow: hidden; }
.gm-cut b { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--faint); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.gm-cut em { font-style: normal; font-family: var(--mono); font-size: 14px; color: var(--text); text-align: right; }
.gm-cut.gold b { background: var(--gold); } .gm-cut.gold span, .gm-cut.gold em { color: var(--gold); }

@media (max-height: 700px) {
  .gm-app { gap: 8px; padding: 10px 12px 12px; }
  .gm-deal { grid-template-columns: 104px 1fr; }
  .gm-wheel { width: 104px; }
  .gm-plan { padding: 8px 10px; gap: 4px; font-size: 13.5px; }
}