:root{--bg:#111;--amber:#FFB800;--red:#E63946;--card:#1a1a1a;--line:#2c2c2c}
body{background:radial-gradient(ellipse at top,#1d1710 0%,var(--bg) 60%);color:#eee;font-family:'IBM Plex Mono',monospace;min-height:100vh}
.display{font-family:'Bungee',cursive}
.grain{pointer-events:none;position:fixed;inset:0;opacity:.07;z-index:50;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.card{background:var(--card);border:1px solid var(--line);border-radius:1rem}
.drop{border:2px dashed #444;border-radius:1rem;transition:.2s}
.drop:hover,.drop.over{border-color:var(--amber);box-shadow:0 0 24px #ffb80033}
.btn{background:var(--amber);color:#111;font-weight:700;border-radius:.6rem;padding:.5rem 1rem;transition:.15s}
.btn:hover{box-shadow:0 0 18px #ffb80088}
.btn:disabled{opacity:.4;box-shadow:none}
.btn2{border:1px solid #555;border-radius:.6rem;padding:.35rem .8rem;font-size:.8rem}
.btn2:hover{border-color:var(--amber);color:var(--amber)}
.seg button{padding:.4rem .8rem;font-size:.8rem;border:1px solid #444}
.seg button.on{background:var(--amber);color:#111;font-weight:700}
.strip{background:#000;padding:14px 4px;position:relative;
background-image:radial-gradient(circle,#222 3px,transparent 4px),radial-gradient(circle,#222 3px,transparent 4px);
background-size:16px 14px;background-position:0 0,0 100%;background-repeat:repeat-x}
.reel{animation:spin 3s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.rise{animation:rise .6s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
input[type=range]{accent-color:var(--amber)}