*{box-sizing:border-box}html,body{margin:0;background:#05070c;color:white;font-family:Arial,Helvetica,sans-serif;min-height:100%}body{padding-bottom:72px}
header{height:58px;background:#090d14;border-bottom:1px solid #5c431b;display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:30}
.brand{font-weight:1000;color:#ffd363;letter-spacing:.04em}.brand small{display:block;color:#d6c3ef;font-size:8px}.coin{background:#141923;border:1px solid #6d5322;border-radius:10px;padding:9px;color:#ffe184;font-weight:bold;font-size:11px}
main{max-width:1536px;margin:auto}.screen{display:none}.screen.active{display:block}
.machine{position:relative;width:100%;aspect-ratio:995/625;background:#06080d;overflow:hidden;box-shadow:0 20px 80px #000}
.machine-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none}
.hot,.arrow,.drop{position:absolute;z-index:5;cursor:pointer;border:0;color:white;font-weight:900;background:#0000}.hot span{display:block;font-size:clamp(7px,1vw,15px)}
.rapid{left:1.2%;top:18%;width:9%;height:15%}.boost{left:1.2%;top:34%;width:9%;height:15%}.shake{left:1.2%;top:50%;width:9%;height:15%}
.arrow{bottom:3.2%;width:8%;height:11%;font-size:clamp(18px,4vw,50px);text-shadow:0 0 12px #ff9b00}.left{left:23%}.right{left:58%}
.drop{left:32%;bottom:3%;width:25%;height:11%;font-size:clamp(13px,2.3vw,34px);text-shadow:0 0 12px #ff9b00}.drop small{display:block;font-size:38%}
.score{position:absolute;right:3%;bottom:5%;z-index:4;font-size:clamp(7px,1.2vw,15px);color:#ffd45c}.score b{display:block;font-size:clamp(18px,3vw,45px)}
.coinfx{position:absolute;z-index:3;width:2.4%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7c8 0 8%,#f6cc55 18%,#ad6508 68%,#4d2800 100%);border:1px solid #ffe48b;box-shadow:0 3px 5px #0008,0 0 8px #ffb300;animation:fall .9s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes fall{0%{top:18%;transform:rotateX(70deg) scale(.7)}60%{top:47%}100%{top:57%;transform:rotate(720deg) scale(1)}}
#toast{position:absolute;z-index:8;left:50%;top:48%;transform:translate(-50%,-50%);font-size:clamp(18px,4vw,48px);font-weight:1000;color:#ffe170;text-shadow:0 5px 20px #000,0 0 25px #ff7b00;opacity:0;pointer-events:none}.pop{animation:pop 1s}@keyframes pop{0%{opacity:0;transform:translate(-50%,-20%) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%) scale(1.15)}}
.mobilehud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:9px;background:#0b1018}.mobilehud div{background:#131a24;border:1px solid #2c3745;border-radius:10px;padding:8px;text-align:center;color:#8997aa;font-size:9px}.mobilehud b{display:block;color:#ffd361;font-size:15px}
.poster{width:100%;display:block}.overlay-title{position:fixed;left:50%;top:75px;transform:translateX(-50%);z-index:4;background:#080c12e8;border:1px solid #8b682a;border-radius:12px;padding:10px 25px;color:#ffd45e;font-weight:1000}
nav{position:fixed;bottom:0;left:0;right:0;height:66px;z-index:40;background:#080c12f4;border-top:1px solid #343d4a;display:grid;grid-template-columns:repeat(5,1fr);backdrop-filter:blur(10px)}
nav button{border:0;border-right:1px solid #202833;background:transparent;color:#d8dce3;font-size:20px;cursor:pointer}nav span{display:block;font-size:8px;margin-top:3px}
@media(max-width:650px){header{height:50px;padding:0 8px}.brand{font-size:11px}.coin{font-size:8px;padding:7px}.machine{margin-top:0}.mobilehud{padding:6px}.poster{min-height:calc(100vh - 116px);object-fit:cover;object-position:center top}}