:root{--bg:#eef1f7;--text:#172033;--muted:#667085;--line:#d8deea;--primary:#2563eb;--win:#16a34a;--lose:#9ca3af;--danger:#dc2626;--gold:#fbbf24;--spin-duration:2.5s}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text)}
body{background:radial-gradient(circle at top,#fff,var(--bg) 58%);padding:max(14px,env(safe-area-inset-top)) 14px max(20px,env(safe-area-inset-bottom));overflow-x:hidden}
body.modal-open{overflow:hidden}
button,input,textarea,select{font:inherit}
button{touch-action:manipulation;cursor:pointer}
main{width:min(560px,100%);margin:auto}
.app{background:#fffc;border:1px solid var(--line);border-radius:26px;padding:18px;box-shadow:0 18px 50px #0f172a1f}
.app.lose-hit{animation:loseHit .55s ease}
.header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:14px}
.header h1{margin:0;font-size:25px}
.lead{margin:6px 0 16px;color:var(--muted);font-size:13px;line-height:1.5}
.header-actions{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.build{font-size:10px;line-height:1;color:var(--muted);white-space:nowrap}
.icon-button,.tab,.secondary,.preset,.preset-item,.test-button{border:1px solid var(--line);border-radius:13px;padding:10px;background:#fff;color:var(--text);font-weight:800}
.header-settings{display:inline-flex;align-items:center;justify-content:center;min-width:76px;padding:9px 13px;white-space:nowrap}
.tabs,.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tabs{margin-bottom:16px}
.tab.active{background:var(--text);color:#fff}
.panel{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fbfcfe}
.panel[hidden]{display:none}
label{display:grid;gap:6px;color:var(--muted);font-size:12px;font-weight:800}
input,textarea,select{width:100%;border:1px solid var(--line);border-radius:13px;padding:11px 12px;background:#fff;color:var(--text)}
input[type=number]{font-size:18px}
input[type=color]{padding:4px;height:46px}
input[type=checkbox]{width:18px;height:18px}
textarea{min-height:118px;resize:vertical}
.presets{display:flex;gap:7px;margin-top:10px;overflow:auto}
.preset{white-space:nowrap}
.option-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.switch{display:inline-flex;align-items:center;gap:7px}
.preset-box{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.preset-item{text-align:left;font-size:12px}
.preset-save{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:9px}
.preset-saved-list{display:grid;gap:7px;margin-top:9px}
.saved-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.saved-row button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px}
.saved-row .delete{color:var(--danger)}
.wheel-legend{display:flex;justify-content:center;gap:18px;margin:14px 0 -4px;font-size:13px;font-weight:800}
.legend-item{display:flex;align-items:center;gap:7px}
.legend-dot{width:14px;height:14px;border-radius:4px}
.legend-dot.win{background:var(--win)}
.legend-dot.lose{background:var(--lose)}
.wheel-wrap{position:relative;width:min(350px,84vw);aspect-ratio:1;margin:18px auto 15px}
.pointer{position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:17px solid transparent;border-right:17px solid transparent;border-top:31px solid var(--danger);z-index:4;filter:drop-shadow(0 3px 4px #0004)}
.wheel{width:100%;height:100%;border-radius:50%;border:10px solid #fff;box-shadow:inset 0 0 0 1px var(--line),0 10px 26px #0f172a2e;transform:rotate(0deg);transition:transform var(--spin-duration) cubic-bezier(.12,.76,.18,1)}
.center-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--text);font-weight:900;z-index:3}
.list-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:-2px 0 14px}
.list-legend[hidden]{display:none}
.list-legend-item{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:12px;font-weight:800}
.list-legend-item.active{border-color:var(--primary);box-shadow:0 0 0 2px #2563eb24;background:#eff6ff}
.list-legend-swatch{width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1px #0002}
.list-legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result{min-height:78px;border:1px solid var(--line);border-radius:18px;padding:13px;margin-bottom:12px;background:#f8fafc;text-align:center;display:grid;place-content:center}
.result.lose-result{animation:loseResult .65s ease;background:#f3f4f6}
.result-main{font-size:25px;font-weight:900}
.result-sub{margin-top:4px;color:var(--muted);font-size:12px}
.spin-button{width:100%;border:0;border-radius:16px;padding:15px;background:var(--primary);color:#fff;font-size:18px;font-weight:900;box-shadow:0 9px 20px #2563eb42}
.history{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.history-head{display:flex;justify-content:space-between;align-items:center}
.history h2{margin:0;font-size:16px}
.history-list{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:7px}
.history-list li{display:flex;justify-content:space-between;gap:10px;padding:9px 11px;background:#f8fafc;border-radius:12px;font-size:13px}
.danger-button{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:#fff;color:var(--danger);font-weight:800}
.empty{text-align:center;color:var(--muted)}
.note{text-align:center;color:var(--muted);font-size:11px}
.jackpot-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;pointer-events:none;opacity:0;background:radial-gradient(circle,#fff3,#0d1221ed 65%);transition:.2s}
.jackpot-overlay.show{opacity:1}
.jackpot-overlay.level-standard{background:#0006}
.jackpot-overlay.level-jackpot:before{content:"";position:absolute;inset:-20%;background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#8b5cf6);filter:blur(70px);opacity:.58;animation:spinGlow 1.8s linear infinite}
.jackpot-title{z-index:2;color:#fff;font-size:clamp(44px,14vw,90px);font-weight:1000;text-align:center;text-shadow:0 0 12px #fff,0 0 30px var(--gold);opacity:0}
.jackpot-overlay.show .jackpot-title{animation:pop 1.3s both}
.jackpot-title small{display:block;font-size:clamp(15px,4vw,24px);margin-top:12px}
.particles{position:absolute;inset:0;overflow:hidden}
.particles .piece{position:absolute;display:grid;place-items:center;animation:particleMove var(--fall-time) linear forwards;filter:drop-shadow(0 2px 3px #0005);will-change:transform,opacity}
.particles .piece.confetti{border-radius:3px}
.particles .piece img{width:100%;height:100%;object-fit:contain}
.app.shake{animation:shake .45s linear 2}
.settings-dialog{position:fixed;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);margin:0;width:min(520px,calc(100vw - 24px));height:min(760px,calc(100dvh - 24px));max-width:none;max-height:none;border:0;border-radius:22px;padding:0;box-shadow:0 22px 80px #0f172a55;color:var(--text);overflow:hidden}
.settings-dialog::backdrop{background:#0f172a99}
.settings-shell{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#fff}
.settings-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--line)}
.settings-head h2{margin:0;font-size:20px}
.settings-sections{display:grid;align-content:start;gap:14px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 18px}
.settings-section{border:1px solid var(--line);border-radius:16px;padding:13px;background:#fbfcfe}
.settings-section h3{font-size:14px;margin:0 0 10px}
.range-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.range-value{min-width:58px;text-align:right;font-weight:800;color:var(--text)}
.setting-switches{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.setting-switches .switch{justify-content:center;border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.device-status{display:grid;gap:8px;margin-top:10px}
.status-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:#fff}
.status-copy{font-size:12px}
.status-copy strong{display:block}
.status-copy span,.status-note{color:var(--muted);font-size:11px}
.status-note{line-height:1.5}
.particle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.particle-card{position:relative;border:1px solid var(--line);border-radius:12px;background:#fff;padding:9px;text-align:center;font-weight:800;min-width:0}
.particle-card.active{border-color:var(--primary);box-shadow:0 0 0 2px #2563eb2d;background:#eff6ff}
.particle-check{position:absolute;top:6px;right:7px;width:20px;height:20px;border-radius:50%;display:none;place-items:center;background:var(--primary);color:#fff;font-size:13px}
.particle-card.active .particle-check{display:grid}
.particle-preview{height:52px;display:grid;place-items:center;font-size:34px}
.particle-preview img{max-width:46px;max-height:46px;object-fit:contain}
.particle-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}
.upload-row input[type=file]{font-size:12px}
.custom-particle-list{display:grid;gap:8px;margin-top:10px}
.custom-particle-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:12px;background:#fff}
.custom-particle-row.active{border-color:var(--primary);background:#eff6ff}
.custom-particle-row img{width:46px;height:46px;object-fit:contain}
.custom-particle-row .custom-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 18px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.dialog-actions button{border-radius:13px;padding:12px;font-weight:800}
.save-settings{border:0;background:var(--primary);color:#fff}
.reset-settings{border:1px solid var(--line);background:#fff;color:var(--danger)}
@keyframes pop{0%{transform:scale(.3);opacity:0}40%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes particleMove{0%{transform:translate3d(var(--start-x),var(--start-y),0) rotate(0deg) scale(var(--start-scale));opacity:1}60%{transform:translate3d(calc(var(--start-x) + var(--mid-x)),calc(var(--start-y) + var(--mid-y)),0) rotate(var(--mid-rotate)) scale(var(--mid-scale));opacity:1}100%{transform:translate3d(calc(var(--start-x) + var(--end-x)),calc(var(--start-y) + var(--end-y)),0) rotate(var(--rotate)) scale(var(--end-scale));opacity:var(--end-opacity)}}
@keyframes shake{0%,100%{transform:translate(0)}25%{transform:translate(-5px,2px)}50%{transform:translate(5px,-2px)}75%{transform:translate(-3px,1px)}}
@keyframes loseHit{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes loseResult{0%{transform:scale(1);opacity:1}35%{transform:scale(.96);opacity:.72}65%{transform:scale(1.02);opacity:1}100%{transform:scale(1)}}
@keyframes spinGlow{to{transform:rotate(360deg)}}
@media(max-width:390px){.app{padding:14px}.header{gap:10px}.header h1{font-size:23px}.lead{font-size:12px}.header-actions{gap:6px}.header-settings{min-width:70px;padding:8px 11px}.preset-grid,.settings-grid,.setting-switches{grid-template-columns:1fr}.particle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.list-legend{grid-template-columns:1fr}.preset-save,.upload-row{grid-template-columns:1fr}.settings-dialog{top:0;left:0;right:0;bottom:0;transform:none;width:100vw;height:100dvh;margin:0;border-radius:0}.settings-head{padding:max(14px,env(safe-area-inset-top)) 16px 14px}.settings-sections{padding:12px 14px}.dialog-actions{padding:12px 14px max(12px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.wheel{transition-duration:.01ms}.particles .piece,.jackpot-title,.app.shake,.app.lose-hit,.result.lose-result,.jackpot-overlay.level-jackpot:before{animation:none!important}}