.game-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; align-self: end; flex-wrap: wrap; gap: .75rem; padding-top: .5rem; }
.jumbo .game-actions { padding-bottom: 1.5rem; }
.jumbo .game-footer { padding-bottom: 0; }
.try-button, .demo-action, .demo-secondary {
  display: inline-flex; justify-content: center; align-items: center; gap: .75rem;
  min-height: 2.875rem; max-width: 100%; padding: .7rem 1.15rem;
  border: 1px solid #a8751f; border-radius: .7rem;
  background: linear-gradient(#f9dfa0, #f2c14e 65%, #dda435); color: #4a3410;
  font: 900 1rem/1.5 var(--body); cursor: pointer;
  box-shadow: 0 3px 0 #a8761e; transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.try-button:disabled, .demo-action:disabled, .demo-secondary:disabled { cursor: default; filter: saturate(.4); opacity: .65; }
.jumbo .try-button { background: #fff5dc; border-color: #fff5dc; color: var(--red); box-shadow: 0 3px 0 #842a17; }
.scratch .try-button { background: #fffdf5; border-color: #b58b3b; }
.numbers .try-button { background: #6158ac; border-color: #51478d; color: white; box-shadow: 0 3px 0 #433b7a; }
.try-button:active:not(:disabled), .demo-action:active:not(:disabled), .demo-secondary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
@media (hover: hover) {
  .try-button:hover:not(:disabled), .demo-action:hover:not(:disabled), .demo-secondary:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-2px); }
  .game .game-art { transition: transform 320ms cubic-bezier(.2,.8,.2,1); }
  .game:has(.try-button:hover) .game-art { transform: translateY(-4px) rotate(-3deg); }
}
html:has(.demo-dialog[open]) { overflow: hidden; }
.demo-dialog {
  container: demo / inline-size;
  width: min(34rem, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem);
  margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 1.25rem;
  background: var(--paper); color: var(--ink); box-shadow: 0 24px 90px #3b2c1b66;
  overflow: auto; overscroll-behavior: contain;
}
.demo-dialog::backdrop { background: #30200fd1; backdrop-filter: blur(5px); }
.demo-header { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--paper); }
.demo-header > div { min-width: 0; }
.demo-header h2 { font-size: 1.5rem; line-height: 1.45; }
.demo-header .eyebrow { font-size: .75rem; margin-bottom: .25rem; letter-spacing: .04em; }
.demo-header form { flex: 0 0 auto; }
.demo-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: white; font-size: 28px; line-height: 1; cursor: pointer; }
.demo-close:hover { background: var(--cream); }
.demo-body { position: relative; padding: clamp(.75rem, 4vw, 1.5rem); }
.demo-intro { text-align: center; font-size: 1rem; line-height: 1.8; text-wrap: pretty; margin-bottom: 1.25rem; }
.demo-fine { margin-top: .9rem; font-size: .8125rem; color: var(--muted); line-height: 1.7; text-align: center; }
.demo-result { min-height: 4rem; display: grid; align-content: center; margin: 1rem 0; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: .75rem; background: white; font-weight: 700; text-align: center; line-height: 1.6; text-wrap: pretty; }
.demo-result.is-win { background: #fff1c1; color: var(--red); border-color: #dab466; }
.demo-action { width: 100%; }
.demo-secondary { background: white; border-color: var(--line); box-shadow: 0 3px 0 #d9c698; color: var(--ink); }
.demo-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.demo-controls button { padding-inline: .5rem; }
.demo-footer { border-top: 1px solid var(--line); padding: 1rem 1.25rem 1.25rem; text-align: center; background: var(--cream); }
.demo-footer a { display: inline-block; padding-top: .6rem; font-size: .9375rem; font-weight: 700; color: var(--red); }
.mini-ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40%; grid-template-areas: 'title art' 'count art' 'note art'; gap: .25rem .5rem; align-items: center; padding: 1.25rem; border: 1px solid #b23a20; border-radius: 1rem; color: #fffdf5; background: linear-gradient(120deg, #c74227, #ab301b); box-shadow: 0 4px 0 #8a2a18; }
.mini-ticket > span { grid-area: title; font-weight: 700; font-size: .9375rem; }
.mini-ticket svg { grid-area: art; width: 100%; height: auto; }
.mini-ticket strong { grid-area: count; font-family: var(--display); font-size: 2rem; line-height: 1.5; }
.mini-ticket small { grid-area: note; font-size: .75rem; }
.demo-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1.25rem 0 0; }
.demo-metrics > div { min-width: 0; padding: .65rem .25rem; text-align: center; border-bottom: 1px solid var(--line); }
.demo-metrics dt { font-size: .8125rem; color: var(--muted); }
.demo-metrics dd { margin: .3rem 0 0; font-weight: 900; font-size: 1.25rem; line-height: 1.6; }
.scratch-surface { position: relative; width: min(100%, 21rem); aspect-ratio: 1; margin-inline: auto; padding: 10px; background: linear-gradient(145deg, #f9dfa0, #edbc50); border: 2px solid #c49a46; border-radius: 1rem; box-shadow: 0 4px 0 #d4ac58; }
.scratch-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; height: 100%; }
.scratch-cell { display: grid; place-items: center; min-width: 0; border-radius: 8px; border: 1px solid #d2ad59; background: #fff9e7; }
.scratch-cell svg { width: 70%; height: 70%; }
.scratch-cell.is-match { background: #fff0ae; border: 2px solid var(--red); }
.scratch-cover { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; border-radius: inherit; }
.drum-scene { display: block; width: min(100%, 19rem); height: auto; margin: -.25rem auto -.5rem; }
.drum-rotor { transform-origin: 119px 77px; }
.draw-ball { opacity: 0; }
.demo-odds { margin-top: 1rem; border-bottom: 1px solid var(--line); }
.demo-odds summary { cursor: pointer; padding: .7rem .25rem; font-size: .875rem; font-weight: 700; }
.demo-odds ul { list-style: none; margin: 0; padding: 0 0 .75rem; }
.demo-odds li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; padding: .4rem .25rem; font-size: .8125rem; }
.demo-odds li span:first-child { display: inline-flex; align-items: center; gap: .5rem; }
.ball-dot { display: inline-block; width: 1rem; height: 1rem; border: 1px solid #997a51; border-radius: 50%; }
.numbers-label { display: block; text-align: center; font-weight: 700; font-size: .875rem; margin-bottom: .5rem; }
.chosen-digits { display: block; width: 100%; min-width: 0; padding: .5rem .75rem; border: 2px solid #aea5d3; border-radius: .8rem; background: white; color: #5a54b0; font: 900 2rem/1.5 var(--body); text-align: center; letter-spacing: .3em; }
.chosen-digits[aria-invalid='true'] { border-color: var(--red); }
.bet-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 0; margin: 1rem 0 0; border: 0; }
.bet-modes legend { padding: 0 0 .5rem; font-size: .875rem; font-weight: 700; }
.bet-modes label { display: flex; align-items: center; gap: .5rem; padding: .65rem; border: 1px solid var(--line); border-radius: .65rem; background: white; cursor: pointer; line-height: 1.5; }
.bet-modes input { accent-color: #5a54b0; flex-shrink: 0; margin: 0; }
.bet-modes label:has(:checked) { border-color: #8b80bb; background: #f3efff; }
.bet-modes label > span { font-size: .875rem; font-weight: 700; }
.bet-modes small { display: block; font-size: .75rem; font-weight: 500; color: var(--muted); }
.winning-digits { text-align: center; margin-top: 1rem; }
.winning-digits > span { display: block; font-size: .8125rem; color: var(--muted); margin-bottom: .5rem; }
.digit-reels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
.digit-reels b { display: grid; place-items: center; padding: .3rem 0; min-width: 0; border: 1px solid #d4cee9; border-radius: .65rem; background: linear-gradient(white, #ebe7ff); color: #5a54b0; font-size: clamp(1rem, 6vw, 1.8rem); line-height: 1.5; font-weight: 900; }
.confetti-bit { pointer-events: none; position: absolute; z-index: 4; width: 6px; height: 10px; border-radius: 1px; }
@container demo (max-width: 18rem) {
  .demo-header { position: static; padding: .75rem; }
  .mini-ticket { grid-template-columns: minmax(0, 1fr) 35%; grid-template-areas: 'title title' 'count art' 'note note'; padding: .75rem; }
  .mini-ticket strong { font-size: 1.65rem; }
  .demo-metrics { grid-template-columns: 1fr; gap: 0; }
  .demo-metrics > div { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .25rem .5rem; text-align: left; }
  .demo-metrics dd { margin: 0; }
  .chosen-digits { font-size: 1.5rem; letter-spacing: .12em; padding-inline: .4rem; }
  .bet-modes, .demo-controls { grid-template-columns: 1fr; }
}
@media (max-width: 45rem) {
  .game-actions { gap: .5rem; }
  .try-button { font-size: .9375rem; }
  .jumbo .game-actions { padding-bottom: 1.25rem; }
  .demo-header { padding: .875rem 1rem; }
  .demo-header h2 { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .try-button, .demo-action, .demo-secondary, .game .game-art { transition: none; }
  .try-button:hover, .try-button:active, .demo-action:hover, .demo-action:active, .demo-secondary:hover, .demo-secondary:active, .game:has(.try-button:hover) .game-art { transform: none; }
}