@import"https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap";@import"https://fonts.googleapis.com/css2?family=Ultra&display=swap";:root{--cell: 70px;--theme-primary: #ebb701;--theme-secondary: #ffffff;--theme-background: #121212;--theme-reels-bg: #3a3a3a;--theme-reels-border: rgba(255,255,255,.2);--top-bar-h: 72px;--bottom-bar-h: 160px}body{background:var(--theme-background);display:flex;justify-content:center;align-items:center;height:100vh;font-family:DM Mono,monospace;overflow:hidden}.slot-machine{text-align:center;padding-top:var(--top-bar-h);padding-bottom:calc(var(--bottom-bar-h) + env(safe-area-inset-bottom));height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.bottom-control-bar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:16px 24px calc(16px + env(safe-area-inset-bottom));background:var(--theme-bottom-bar-bg, linear-gradient(180deg, #1a0a2e, #16213e));border-top:2px solid var(--theme-bottom-bar-border, var(--theme-primary));box-shadow:0 -4px 20px #00000080;z-index:100;flex-wrap:wrap;gap:12px}.control-section{display:flex;align-items:center;flex:1;justify-content:center}.bet-group{display:flex;flex-direction:column;align-items:center;gap:8px}.bet-label{color:var(--theme-secondary);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}.bet-control{display:flex;align-items:center;gap:12px;padding:8px 16px;background:linear-gradient(180deg,color-mix(in srgb,var(--theme-primary) 20%,#000),color-mix(in srgb,var(--theme-primary) 5%,#000));border-radius:20px;border:3px solid var(--theme-primary);box-shadow:0 4px 12px #0000004d,inset 0 1px 3px #ffffff1a}.bet-btn{width:32px;height:32px;border-radius:50%;border:none;background:linear-gradient(180deg,var(--theme-primary),color-mix(in srgb,var(--theme-primary) 70%,#000));color:#fff;font-size:18px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0006,inset 0 1px 2px #fff3;transition:all .2s ease}.bet-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 8px #00000080,inset 0 1px 2px #ffffff4d}.bet-btn:disabled{opacity:.5;cursor:not-allowed}.bet-value{color:#fff;font-size:18px;font-weight:900;min-width:80px;text-align:center}.win-display{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(180deg,color-mix(in srgb,var(--theme-primary) 15%,#000),color-mix(in srgb,var(--theme-primary) 5%,#000));border-radius:20px;border:3px solid var(--theme-primary);box-shadow:0 4px 12px #0000004d,inset 0 1px 3px #ffffff1a}.win-label{color:var(--theme-secondary);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}.win-value{color:#fff;font-size:24px;font-weight:900}.spin-button{--spin-size: 120px;width:var(--spin-size);height:var(--spin-size);border-radius:50%;border:none;background:linear-gradient(180deg,var(--theme-primary),color-mix(in srgb,var(--theme-primary) 70%,#000));color:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 24px #0006,inset 0 2px 6px #ffffff4d,inset 0 -2px 6px #0000004d,0 0 0 4px var(--theme-primary);transition:all .2s ease;position:relative;margin-top:calc(-.2 * var(--spin-size));z-index:101;overflow:hidden}.spin-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px #00000080,inset 0 2px 6px #fff6,inset 0 -2px 6px #0006,0 0 0 5px var(--theme-primary)}.spin-button:active:not(:disabled){transform:translateY(0);box-shadow:0 4px 16px #0000004d,inset 0 2px 6px #fff3,inset 0 -2px 6px #0003,0 0 0 3px var(--theme-primary)}.spin-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.spin-text{font-size:24px;font-weight:900;line-height:1;text-shadow:0 2px 4px rgba(0,0,0,.3)}.spin-subtext{font-size:10px;font-weight:600;line-height:1;margin-top:4px;opacity:.9;text-shadow:0 1px 2px rgba(0,0,0,.3)}.top-header-bar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;padding:16px 24px;background:var(--theme-bottom-bar-bg, linear-gradient(180deg, #1a0a2e, #16213e));border-bottom:2px solid var(--theme-bottom-bar-border, var(--theme-primary));box-shadow:0 4px 20px #00000080;z-index:100}.header-content{display:flex;align-items:center;justify-content:center;flex:1}.game-title{color:var(--theme-primary);font-size:2rem;font-family:Ultra,serif;font-weight:900;margin:0;text-shadow:2px 2px 4px rgba(0,0,0,.5);letter-spacing:2px;text-transform:uppercase}.header p{font-size:1.2em;margin-top:10px;color:var(--theme-secondary)}.reels-container{display:flex;justify-content:center;align-items:stretch;width:calc(100vw - 40px);height:calc(100vh - var(--top-bar-h) - var(--bottom-bar-h) - env(safe-area-inset-bottom));margin:0;padding:10px 20px;background:var(--theme-reels-bg, #2f2f2f);border-radius:16px;border:2px solid var(--theme-reels-border, rgba(255,255,255,.2));box-shadow:0 8px 32px #0000004d;gap:12px;box-sizing:border-box}@media (max-width: 768px){:root{--bottom-bar-h: 140px}.bottom-control-bar{padding:12px 12px calc(12px + env(safe-area-inset-bottom))}.control-section{flex:1 1 45%;justify-content:center}.control-section:last-child{flex-basis:100%;order:3}.control-section:nth-child(1){order:1}.control-section:nth-child(2){order:2}.spin-button{--spin-size: 96px}.bet-display{min-width:140px;padding:6px 12px}.bet-btn{width:30px;height:30px;font-size:16px}.win-value{font-size:20px}}@media (max-width: 480px){:root{--bottom-bar-h: 200px}.control-section{flex:1 1 100%}.spin-button{--spin-size: 88px}.bet-display{min-width:120px;padding:6px 10px}.win-value{font-size:18px}.spin-text{font-size:20px}.spin-subtext{font-size:9px}}.reel{display:block;flex:1;height:96%;background-color:var(--theme-reels-bg);border-radius:15px;overflow:hidden;margin:0 1%;box-shadow:0 14px 15px -5px #0000004d inset,1px -14px 15px -5px #0000004d inset;border:2px solid var(--theme-reels-border);position:relative;will-change:transform}.reel:before{display:none}.symbol{font-size:3em;opacity:.6}.symbol-img{display:block;width:100%;height:100%;object-fit:contain}.reel-strip{will-change:transform;height:100%;display:grid;grid-auto-rows:calc(100% / var(--rows, 3))}.reel-strip.spinning{animation:reel-spin .25s linear infinite}@keyframes reel-spin{0%{transform:translateY(0)}to{transform:translateY(calc(var(--cell) * 1))}}.controls .btn{margin:3em 0 1em}.controls .message{font-size:1.5em;color:#ebb701}.bet-btn{width:36px;height:36px;border-radius:50%;border:2px solid var(--theme-reels-border);background:var(--theme-primary);color:#111;font-size:1.2em;font-weight:900;cursor:pointer;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;box-shadow:0 6px 10px #00000040,inset 0 2px 4px #fff3}.bet-btn:hover:enabled{transform:translateY(-1px);filter:brightness(1.1)}.bet-btn:active:enabled{transform:translateY(0)}.bet-btn:disabled{opacity:.6;cursor:not-allowed}.bet-pill{margin-top:14px;display:inline-flex;align-items:center;gap:10px;padding:6px;border-radius:28px;background:linear-gradient(180deg,color-mix(in srgb,var(--theme-primary) 35%,#000),color-mix(in srgb,var(--theme-primary) 15%,#000));box-shadow:0 8px 16px #00000059,inset 0 2px 6px #ffffff26}.bet-display{min-width:200px;padding:8px 14px;border-radius:16px;background:linear-gradient(180deg,#3d2f6a,#241a40);color:#fff;text-align:center;box-shadow:inset 0 2px 6px #00000059}.bet-title{font-size:12px;letter-spacing:1px;font-weight:800;opacity:.9}.bet-value{font-size:22px;font-weight:900;line-height:1.1}.controls{perspective:900px;perspective-origin:50% 30%}.spin_btn{width:90px;height:90px;border-radius:50%;border:none;cursor:pointer;color:#111;font-weight:800;letter-spacing:1px;background:radial-gradient(ellipse at center,var(--theme-primary) 0%,color-mix(in srgb,var(--theme-primary) 75%,#000) 70%,color-mix(in srgb,var(--theme-primary) 55%,#000) 100%);box-shadow:0 18px 28px #00000059,inset 0 6px 10px #ffffff2e,inset 0 -10px 18px #0000004d;transition:transform .16s cubic-bezier(.2,.7,.2,1),box-shadow .16s ease,filter .16s ease;transform-style:preserve-3d;position:relative;text-shadow:0 1px 0 rgba(255,255,255,.35),0 -1px 0 rgba(0,0,0,.25)}.spin_btn:before{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffffff40,#fff0 60%),radial-gradient(circle at 70% 70%,#00000040,#0000 60%);box-shadow:inset 0 0 0 6px #00000040;transform:translateZ(-6px);pointer-events:none}.spin_btn:after{content:"";position:absolute;left:10%;top:6%;width:80%;height:40%;border-radius:50% 50% 40% 40%/55% 55% 45% 45%;background:linear-gradient(to bottom,#ffffff8c,#ffffff0d);filter:blur(.3px);transform:translateZ(6px) rotateX(12deg);pointer-events:none}.spin_btn:hover:enabled{transform:translateY(-2px) rotateX(8deg);box-shadow:0 20px 30px #00000073,inset 0 8px 12px #fff3,inset 0 -12px 20px #00000059;filter:brightness(1.05)}.spin_btn:active:enabled{transform:translateY(2px) rotateX(0) translateZ(-6px);box-shadow:inset 0 10px 16px #00000073}.spin_btn:disabled{opacity:.6;cursor:not-allowed;filter:grayscale(20%)}