:root{--row-h:110px;--bg:#070a10;--text:#eaf0ff;--muted:#aab6d6;--gold:#d6b36a;}
*{box-sizing:border-box;}
body{margin:0;background:radial-gradient(900px 600px at 20% 0%,#1a2340 0%,var(--bg) 55%);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}
.app{max-width:1300px;margin:0 auto;padding:16px;}
.topbar{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(10,14,24,.75);}
.brand .title{font-weight:900;letter-spacing:2px;font-size:18px;}
.brand .subtitle{color:var(--muted);font-size:12px;margin-top:4px;}
.hud{display:flex;gap:10px;flex-wrap:wrap;}
.hud-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 10px;min-width:110px;}
.hud-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px;}
.hud-value{margin-top:4px;font-size:18px;font-weight:800;}
#betSelect{font:inherit;font-weight:800;background:rgba(0,0,0,.35);color:var(--text);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:4px 8px;}
.toggle{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;user-select:none;}
.marquee{margin-top:14px;padding:12px;border-radius:16px;border:1px solid rgba(214,179,106,.25);background:rgba(14,20,32,.75);}
.marquee-text{text-align:center;font-weight:900;letter-spacing:2px;color:var(--gold);}
.machine{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:14px;margin-top:14px;align-items:start;}
.frame{position:relative;padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(10,14,24,.75);}
.reel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.reel{border-radius:16px;overflow:hidden;border:2px solid rgba(214,179,106,.22);background:rgba(255,255,255,.03);}
.window{height:calc(var(--row-h)*3);overflow:hidden;isolation:isolate;}
.strip{display:flex;flex-direction:column;transform:translate3d(0,0px,0);will-change:transform,filter;}
.reel.spinning .strip{filter:blur(1.2px) saturate(1.05);}
.symbol{height:var(--row-h);padding:10px;transition:transform .18s ease, filter .18s ease;}
.symbol img{width:100%;height:100%;display:block;object-fit:cover;border-radius:14px;background:rgba(255,255,255,.04);}
.symbol.winner{transform:scale(1.03);filter:drop-shadow(0 0 12px rgba(214,179,106,.65));}
.symbol.winner img{outline:3px solid rgba(214,179,106,.88);box-shadow:0 0 18px rgba(214,179,106,.35);}
.payline{position:absolute;left:18px;right:18px;top:14px;height:calc(var(--row-h)*3);pointer-events:none;}
.payline:after{content:"";position:absolute;left:0;right:0;top:var(--row-h);height:var(--row-h);border-top:2px dashed rgba(214,179,106,.55);border-bottom:2px dashed rgba(214,179,106,.55);}
.sidepanel{display:flex;flex-direction:column;gap:12px;}
.panel-card{border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(10,14,24,.75);padding:12px;}
.panel-title{font-weight:900;letter-spacing:1px;text-transform:uppercase;font-size:13px;}
.buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px;}
.btn{border:none;border-radius:14px;padding:12px 10px;cursor:pointer;font-weight:900;letter-spacing:1px;color:var(--text);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
.btn.primary{grid-column:1/-1;font-size:18px;background:linear-gradient(180deg,#2a7cff,#1c4fd6);}
.btn.danger{background:linear-gradient(180deg,#ff5a5a,#cf1e1e);}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.status{color:#cfe0ff;font-size:13px;line-height:1.35;margin-top:8px;}
.status-head{font-size:16px;font-weight:900;color:#fff;}
.status-sub{color:var(--muted);margin-top:4px;}
.win-line-list{display:grid;gap:6px;margin-top:10px;}
.win-line-item{display:flex;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);}
.win-line-left{font-weight:700;}
.win-line-right{font-weight:900;color:var(--gold);}
.small-note{color:var(--muted);font-size:12px;line-height:1.35;margin-top:6px;}
.line-chip-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.line-chip{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);min-width:104px;transition:all .18s ease;}
.line-chip.win{background:rgba(214,179,106,.14);border-color:rgba(214,179,106,.55);box-shadow:0 0 16px rgba(214,179,106,.18);}
.line-chip-name{font-size:11px;font-weight:900;letter-spacing:.4px;}
.line-chip-path{font-size:12px;color:var(--muted);}
.paytable-wrap{overflow:auto;margin-top:10px;}
.paytable-table{width:100%;border-collapse:collapse;font-size:12px;}
.paytable-table th,.paytable-table td{padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.08);text-align:center;}
.paytable-table th:first-child,.paytable-table td:first-child{text-align:left;}
.paytable-table th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px;position:sticky;top:0;background:rgba(10,14,24,.98);}
.pay-symbol{display:flex;align-items:center;gap:8px;font-weight:800;}
.pay-symbol img{width:30px;height:30px;border-radius:8px;object-fit:cover;}
.footer{color:var(--muted);font-size:12px;text-align:center;margin-top:14px;}
@media (max-width:980px){.machine{grid-template-columns:1fr;}}

.icon-key{margin-top:16px;padding:14px;border-radius:14px;background:rgba(10,14,24,.85);border:1px solid rgba(255,255,255,.08);max-width:1100px;}
.icon-key-title{font-weight:900;letter-spacing:1px;text-transform:uppercase;font-size:13px;margin-bottom:10px;color:#d6b36a;}
.icon-key-list{display:flex;flex-wrap:wrap;gap:12px;}
.icon-pill{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);max-width:260px;}
.icon-pill img{width:42px;height:42px;object-fit:cover;border-radius:8px;}
.icon-pill .lbl{font-size:13px;font-weight:700;}
.icon-pill .file{font-size:11px;color:#9aa7c7;}
.icon-pill.glow img{box-shadow:0 0 0 2px rgba(214,179,106,.18),0 0 22px rgba(214,179,106,.18);}