:root{--gold:#ffd23c;--red:#e33028;--wine:#4b0018;--purple:#16052c;--panel:#28003e;--cream:#fff1a8}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,sans-serif;color:#fff;background:#090114}
body{background:radial-gradient(circle at 50% 18%,#6d002e 0,#24003e 38%,#07010f 90%);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;opacity:.24;pointer-events:none;background-image:radial-gradient(circle at 20px 20px,transparent 13px,#b34194 14px,#b34194 15px,transparent 16px);background-size:40px 22px}
.game-shell{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;padding:10px clamp(10px,2vw,34px)}
header{height:122px;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(90deg,transparent,#98000d 28%,#e02b12 50%,#98000d 72%,transparent);border-bottom:3px solid #e96814}
h1{margin:0;font-family:Georgia,serif;font-size:clamp(31px,5vw,72px);letter-spacing:.06em;color:#ffe53b;text-shadow:0 4px 0 #8f2100,0 0 18px #ff2f00,3px 3px 0 #3f0000}
.badge{position:absolute;left:16px;top:14px;background:#171027;border:1px solid #735b8b;border-radius:99px;padding:8px 13px;font-size:11px;font-weight:800;color:#cbb9d7}
.round{width:54px;height:54px;border-radius:50%;font-size:32px}.round.small{position:absolute;right:18px;top:18px;width:48px;height:48px;font-family:Georgia;font-style:italic}
button{border:2px solid #ffe477;color:#fff;background:linear-gradient(#542661,#1c092b);box-shadow:0 3px 12px #0008;cursor:pointer;font-weight:900}button:hover{filter:brightness(1.25)}button:disabled{filter:grayscale(1);cursor:not-allowed}
.game-area{flex:1;display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:14px;padding:14px 0}
.pay-strip{border:5px solid var(--gold);border-radius:12px;background:linear-gradient(150deg,#500017,#21000e);padding:12px;box-shadow:0 0 0 3px #7e2000,0 0 28px #ff8a0038}
.pay-strip h2{text-align:center;font-size:16px;color:#ffe673;letter-spacing:.1em;margin:0 0 8px}
.pay-row{display:grid;grid-template-columns:72px 36px 1fr;align-items:center;min-height:82px;border-bottom:1px solid #c7332e88;gap:3px}.pay-row b{font-size:17px}.pay-row strong{text-align:right;color:#ffe45b;font-size:clamp(21px,2.2vw,35px);text-shadow:2px 3px #000}
.machine{min-width:0;display:flex;flex-direction:column}.reels-frame{position:relative;flex:1;min-height:500px;border:6px solid var(--gold);border-radius:14px;padding:9px;background:#7c1608;box-shadow:0 0 0 3px #8f2500,0 0 38px #ff9e004d;overflow:hidden}
.reels{height:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.reel{display:grid;grid-template-rows:repeat(3,1fr);gap:7px;min-width:0}.symbol{position:relative;overflow:hidden;border:2px solid #f7a724;border-radius:9px;background:#341126;box-shadow:inset 0 0 20px #0008}.symbol:before,.dragon:before{content:"";position:absolute;inset:0;background-image:url('assets/dragon-sprites.png');background-size:300% 200%;background-repeat:no-repeat}.dragon{position:relative;display:block}.gold:before{background-position:0 0}.green:before{background-position:50% 0}.blue:before{background-position:100% 0}.red:before{background-position:0 100%}.purple:before{background-position:50% 100%}.silver:before{background-position:100% 100%}
.symbol.spinning:before{animation:pulse .11s infinite alternate}.symbol.win{z-index:2;border-color:#fff;animation:win 700ms infinite alternate;box-shadow:0 0 35px #fff,0 0 60px #ffe600}
@keyframes pulse{to{transform:translateY(8px);filter:blur(2px) brightness(1.5)}}@keyframes win{to{transform:scale(.94);filter:brightness(1.45) saturate(1.3)}}
.mini{width:68px;height:68px}.status{text-align:center;font-size:clamp(18px,2vw,30px);font-weight:900;color:#ffe863;padding:8px;text-shadow:2px 2px #4b0000}.win-banner{display:none;position:absolute;inset:38% 12%;height:max-content;padding:24px;text-align:center;border:4px solid #fff27b;border-radius:20px;background:#8b0017e8;font-size:clamp(25px,4vw,58px);font-weight:1000;color:#ffe650;text-shadow:3px 3px #5f0000;box-shadow:0 0 60px #ffca00}.win-banner.show{display:block;animation:pop .45s ease-out}@keyframes pop{from{transform:scale(.2) rotate(-5deg);opacity:0}}
footer{min-height:105px;display:flex;align-items:center;justify-content:space-around;gap:14px;border-top:2px solid #8a2b7c;padding:10px;background:#10051fe8}.stat{display:flex;flex-direction:column;min-width:110px}.stat span{color:#e3a832;font-size:13px;font-weight:800}.stat strong{font-size:29px}.bet-controls{display:flex;align-items:center;gap:10px}.spin{width:118px;height:90px;border-radius:50%;border-width:5px;background:radial-gradient(circle,#fff 0 25%,#fada42 27% 43%,#a90019 45%);font-size:54px;color:#7e0013;display:flex;flex-direction:column;align-items:center;justify-content:center}.spin small{font-size:12px;color:#fff;text-shadow:1px 1px #000}.spin span{line-height:42px}.auto,.reset{border-radius:28px;padding:15px 22px}.auto.active{background:#aa1833}
dialog{max-width:520px;border:3px solid var(--gold);border-radius:18px;background:#25042f;color:#fff;padding:30px;box-shadow:0 0 80px #000}dialog::backdrop{background:#08000bd9}.dialog-close{position:absolute;right:10px;top:8px;border:0;background:none;box-shadow:none;font-size:30px}.dialog-close+ h2{color:#ffe14e}
@media(max-width:850px){header{height:88px}.badge{display:none}.game-area{grid-template-columns:1fr}.pay-strip{display:none}.reels-frame{min-height:430px}.reels{gap:3px}.reel{gap:3px}.game-shell{padding:5px}footer{flex-wrap:wrap}.reset{display:none}.spin{width:95px;height:76px}h1{font-size:30px}}
@media(max-width:520px){.reels-frame{min-height:360px;padding:4px}.stat{min-width:72px}.stat strong{font-size:20px}.round{width:43px;height:43px}.auto{padding:11px}.game-area{padding:6px 0}}