/* Full-size symbols: shared rules for stationary cells and animated strips. */
.reels{aspect-ratio:5/3;background:#10232c url('reel-texture.svg') center/96px}
.reel,.spin-strip{background-color:#10232c;background-image:linear-gradient(90deg,#0005,transparent 18%,transparent 82%,#0005),url('reel-texture.svg');background-size:auto,96px 96px}
.reel .cell{padding:0}
.reel .cell>.symbol{height:100%;width:auto;max-width:100%;aspect-ratio:1}
/* Optical sizing includes the transparent margins of each original sprite.
   Shared by stopped symbols, spin strips and held scatter overlays. */
.reel .cell{overflow:visible}
.reel .cell[data-symbol="0"]>.symbol{scale:1.32}
.reel .cell[data-symbol="1"]>.symbol{scale:1.30}
.reel .cell[data-symbol="2"]>.symbol{scale:1.14}
.reel .cell[data-symbol="4"]>.symbol{scale:1.16}
.reel .cell[data-symbol="9"]>.symbol,.locked-overlay[data-symbol="9"]>.symbol{scale:1.16}
.machine{background-image:url('metal-texture.svg'),linear-gradient(110deg,#38535b,#15202a 25%,#201d18 75%,#725238);background-size:80px,auto}
.reel-stage{border-color:#5b513e;border-width:4px;box-shadow:0 0 0 1px #e0c28b,0 0 0 5px #1e1c1b,inset 0 0 10px #000}
.machine .ornament{background:linear-gradient(90deg,transparent,#070e17aa,transparent)}
.spin-actions{display:flex;flex-direction:column;align-items:center;gap:9px}
#autoplay{font:9px Arial;min-height:30px;min-width:78px;padding:5px 8px;background:linear-gradient(#57462a,#282318);border-color:#d9b877;border-radius:15px}
#autoplay[aria-pressed=true]{background:#6c3025;border-color:#ffc18e;color:#fff3d9}
.autoplay-running .bet{opacity:.7}
#auto-status{font:10px Arial;color:#f4dba7;text-align:center;min-height:14px;margin:5px 0 0}
#auto-status:empty{display:none}
#auto-dialog{max-width:520px;padding:24px;background:linear-gradient(150deg,#213640,#091521);border:2px solid #b59861}
#auto-dialog h2{margin:0 0 7px;font-size:28px}#auto-dialog p{font-size:12px;margin:6px 0 15px}
.auto-counts{display:flex;gap:6px;margin:18px 0}.auto-counts button{flex:1;padding:10px 4px;font:700 17px Arial;min-height:44px}
.auto-counts button[aria-pressed=true]{background:#d3ae65;color:#17140e;border-color:#ffe3a5}
.auto-check{display:flex;align-items:center;gap:9px;font:14px Arial;margin:18px 0}.auto-check input{width:20px;height:20px;accent-color:#c9a76a}
.auto-limit{display:grid;grid-template-columns:1fr 110px;gap:12px;align-items:center;margin:12px 0;font:12px/1.4 Arial}.auto-limit input{width:100%;background:#08111b;color:#ffe7b2;border:1px solid #927951;padding:10px;border-radius:4px;font:15px Arial;min-height:44px}
.dialog-actions{display:flex;gap:10px;margin-top:22px}.dialog-actions button{flex:1;min-height:44px}.primary-action{background:linear-gradient(#d1ab63,#9d722e);color:#16120d;font-weight:bold}
#intro{width:min(1050px,96vw);max-width:1050px;max-height:94svh;padding:0;overflow:auto;background:#091320;border:2px solid #b89a64;border-radius:14px;box-shadow:0 20px 100px #000c}
#intro::backdrop{background:#02060eef}
.intro-banner{position:relative;aspect-ratio:2.5;overflow:hidden;border-bottom:1px solid #a18b58}
.intro-banner img{width:100%;height:100%;object-fit:cover;object-position:center 43%;animation:intro-art 14s ease-in-out infinite alternate}
.intro-banner:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#091320,transparent 30%),linear-gradient(110deg,transparent 30%,#7ff3ff14 45%,transparent 55%,#ffbe6014 70%,transparent);background-size:auto,250% 100%;animation:intro-light 9s ease-in-out infinite alternate;pointer-events:none}
.intro-body{padding:18px 28px 24px}.intro-body h2{text-align:center;margin:0 0 6px;font:28px Georgia;color:#ffe5b4}.intro-subtitle{text-align:center!important;margin:0 0 18px!important;font-size:12px!important}
.intro-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.intro-features article{text-align:center;padding:0 10px;border-right:1px solid #a58b4d33}.intro-features article:last-child{border:0}.intro-features img{width:65px;height:65px;object-fit:contain}.intro-features h3{font:16px Georgia;margin:4px 0;color:#f3d9a0}.intro-features p{font:12px/1.5 Arial;margin:5px 0;color:#b9cbd3}
.intro-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px}.intro-actions button{min-width:200px;min-height:46px}.intro-actions label{font:11px Arial;color:#c3c5c6;display:flex;align-items:center;gap:7px}.intro-actions input{width:17px;height:17px;accent-color:#c3a165}
.title img{animation:banner-glow 5s ease-in-out infinite alternate}
@keyframes intro-art{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes intro-light{from{background-position:0 0,100% 0}to{background-position:0 0,0 0}}
@keyframes banner-glow{from{filter:drop-shadow(0 0 2px #f5c36c10)}to{filter:drop-shadow(0 0 7px #f5c36c55)}}
.page-hidden .intro-banner img,.page-hidden .intro-banner:after,.page-hidden .title img,.ambient-paused .title img{animation-play-state:paused}
@media(min-width:701px) and (max-height:850px){.stage{width:clamp(460px,calc((100svh - 365px)*1.667),760px)}.title{height:68px}.spin-actions{gap:7px}#autoplay{min-height:26px}}
@media(max-width:700px){.reels{aspect-ratio:5/3}.spin-actions{grid-column:3;grid-row:1/3;gap:14px;align-self:center}.spin-actions .spin{grid-column:auto;grid-row:auto}#autoplay{min-width:62px;min-height:44px;font-size:8px;padding:6px 4px}.intro-banner{aspect-ratio:1.65}.intro-body{padding:14px}.intro-body h2{font-size:23px}.intro-features{gap:10px;grid-template-columns:1fr}.intro-features article{display:grid;grid-template-columns:48px 1fr;gap:0 12px;text-align:left;border:0;padding:0}.intro-features img{width:48px;height:48px;grid-row:1/3;align-self:center}.intro-features h3{font-size:15px}.intro-features p{font-size:11px}.intro-subtitle{font-size:11px!important;margin-bottom:12px!important}.intro-actions{margin-top:12px}.intro-actions button{min-height:44px}#auto-dialog{padding:20px}.auto-limit{grid-template-columns:1fr 100px}.auto-counts{gap:4px}.auto-counts button{font-size:15px}}
@media(prefers-reduced-motion:reduce){.intro-banner img,.intro-banner:after,.title img{animation:none!important}}

/* Keep the complete artwork and the entry action visible together. */
@media(min-width:701px){#intro{width:min(950px,calc((100svh - 360px)*1.777));min-width:480px}.intro-banner{aspect-ratio:16/9}.intro-banner img{object-position:center}.intro-body{padding:12px 20px 16px}.intro-body h2{font-size:24px}.intro-features{gap:10px}.intro-features img{width:40px;height:40px}.intro-features h3{font-size:14px}.intro-features p{font-size:11px}.intro-subtitle{margin-bottom:10px!important}.intro-actions{margin-top:10px}}
@media(max-width:700px){#intro{width:94vw}.intro-banner{aspect-ratio:16/9}.intro-banner img{object-position:center}}

@media(min-width:701px){.reels{aspect-ratio:1.9}.console{grid-template-columns:1.2fr 1.7fr 1.2fr 86px}.utility-bar>div{flex-wrap:wrap}.utility-bar button{white-space:nowrap}}
@media(min-width:701px) and (max-height:850px){.stage{width:clamp(580px,calc((100svh - 350px)*2.05),850px)}.title{height:52px}}