:root{--gold:#FFE000;--gold2:#C89A00;--plum:#3D0A4E;--deep:#2A0A54;--purple:#49005B;--orchid:#6F05A0;--spin:#2EDD57;--spin-on:#063318;--spin-shade:#19A53C;--border:rgba(255,255,255,.1)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#0c0420;overflow:hidden}
body{font-family:'Baloo 2',system-ui,-apple-system,sans-serif;color:#f8fafc;display:flex;align-items:flex-start;justify-content:center}
#fit{position:relative;width:100%;max-width:480px;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(120% 80% at 50% 12%,#2C0B57,#160630)}

.layout{width:100%;height:100%;display:grid;grid-template-rows:auto 1fr auto auto;padding:14px 14px 20px;gap:10px;overflow:hidden}

/* top row */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center}
.logo-text{font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:16px;color:#fff;white-space:nowrap}
.logo-bb{color:var(--gold)}
.balance{font-size:.92rem;color:#fff;font-weight:600}

/* middle row */
.wheel-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding-top:22px;min-height:0;position:relative}
.wheel-wrap{position:relative;width:min(420px,100%);aspect-ratio:1/1;flex-shrink:1;min-width:0}
.wheel-glow{position:absolute;inset:-16px;border-radius:50%;background:radial-gradient(circle,rgba(255,224,0,.18) 0%,transparent 62%);pointer-events:none;z-index:0}
.wheel-pointer{position:absolute;top:-34px;left:50%;transform:translateX(-50%);z-index:10;pointer-events:none;filter:drop-shadow(0 0 10px rgba(255,26,26,0.85)) drop-shadow(0 2px 5px rgba(0,0,0,.7))}
#wheel{width:100%;height:100%;display:block;position:relative;z-index:1;filter:drop-shadow(0 0 20px rgba(255,224,0,.22))}
.center-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30%;aspect-ratio:1/1;border-radius:50%;background:rgba(7,2,26,.92);border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-size:clamp(8px,5vw,24px);font-weight:900;line-height:1;letter-spacing:.04em;pointer-events:none;z-index:5;padding:4px;white-space:pre-line;box-shadow:0 0 16px rgba(255,224,0,.3)}

.mult-box{padding:12px 0;border-radius:26px;background:rgba(8,2,20,.55);border:2px solid var(--gold);color:#fff;font-size:24px;font-weight:900;letter-spacing:.04em;box-shadow:0 0 12px rgba(255,224,0,.35),inset 0 2px 6px rgba(0,0,0,.25);min-width:52%;width:fit-content;text-align:center;white-space:nowrap;flex-shrink:0}

/* bottom row */
.bottom-row{display:grid;grid-template-columns:minmax(86px,116px) 1fr;grid-template-rows:1fr;column-gap:10px;background:rgba(255,255,255,.06);border-radius:14px;padding:8px;border:1px solid rgba(255,255,255,.07)}
.stake-col{display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.stake-col label{font-size:.82rem;color:rgba(255,255,255,.55)}
.stake-stepper{position:relative;display:flex;width:100%}
.stake-col input{padding:10px 28px 10px 10px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:#fff;text-align:center;font-size:1rem;width:100%;-moz-appearance:textfield;appearance:textfield}
.stake-col input::-webkit-outer-spin-button,.stake-col input::-webkit-inner-spin-button{-webkit-appearance:none}
.stake-arrows{position:absolute;right:5px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.stake-arrow{background:none;border:none;color:rgba(255,255,255,.35);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:3px;border-radius:3px;line-height:1;transition:color .15s}
.stake-arrow:hover{color:var(--gold)}
/* action area: idle = quick section + spin button */
.action-area{display:flex;gap:8px;align-items:stretch}
.quick-section{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:5px;min-width:0}
.quick-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.45)}
.quick-btns{display:flex;gap:5px;flex:1}
.quick-btn{flex:1;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);font-size:.85rem;font-weight:700;cursor:pointer;transition:background .15s}
.quick-btn:hover{background:rgba(255,255,255,.16);color:#fff}
#spinButton{padding:0 18px;border-radius:12px;border:none;background:linear-gradient(rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 45%),var(--spin);color:var(--spin-on);font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:18px;cursor:pointer;box-shadow:var(--spin-shade) 0 4px 0,rgba(46,221,87,.6) 0 6px 16px;letter-spacing:.04em;transition:box-shadow .2s;white-space:nowrap;position:relative;overflow:hidden}
#spinButton:hover:not(:disabled){box-shadow:var(--spin-shade) 0 4px 0,rgba(46,221,87,.8) 0 8px 22px}
#spinButton:disabled{opacity:.4;cursor:not-allowed}
#cashoutButton{display:none;border-radius:12px;border:none;background:linear-gradient(rgba(255,255,255,.25) 0%,rgba(255,255,255,0) 45%),var(--gold);color:#241038;font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:14px;cursor:pointer;transition:box-shadow .2s;line-height:1.1;box-shadow:var(--gold2) 0 4px 0,rgba(255,224,0,.55) 0 6px 16px;position:relative;overflow:hidden;letter-spacing:.03em}
#cashoutButton strong{display:block;font-size:18px;letter-spacing:.03em}
#cashoutButton:hover:not(:disabled){box-shadow:var(--gold2) 0 4px 0,rgba(255,224,0,.8) 0 8px 22px}
#cashoutButton:disabled{opacity:.4;cursor:not-allowed}
/* active state: hide quick stakes, show both buttons as equal flex items */
.bottom-row.game-active .quick-section{display:none}
.bottom-row.game-active #cashoutButton{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:0}
.bottom-row.game-active #spinButton{flex:1;padding:0}
/* hide cashout when multiplier < 1 */
.bottom-row.game-active.cashout-off #cashoutButton{display:none}

/* ---- Halftone corner decorations (positioned in .wheel-row) ---- */
.ht-corner{position:absolute;pointer-events:none;z-index:0;background-size:11px 11px;-webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%)}
.ht-tl{top:0;left:-20px;width:36%;aspect-ratio:1;background-image:radial-gradient(#D000AA 2.5px,transparent 2.6px);opacity:.5}
.ht-tr{top:0;right:-20px;width:36%;aspect-ratio:1;background-image:radial-gradient(#55A0FC 2.5px,transparent 2.6px);opacity:.4}
.ht-bl{bottom:0;left:-20px;width:36%;aspect-ratio:1;background-image:radial-gradient(#55A0FC 2.5px,transparent 2.6px);opacity:.45}
.ht-br{bottom:0;right:-20px;width:36%;aspect-ratio:1;background-image:radial-gradient(#D000AA 2.5px,transparent 2.6px);opacity:.4}

/* ---- Mode bar ---- */
.mode-bar{display:flex;align-items:flex-start;justify-content:flex-end;gap:10px;padding:18px 4px 16px;min-height:60px}
.auto-cashout-wrap{display:none;align-items:center;gap:8px;margin-right:auto}
.auto-cashout-wrap.visible{display:flex}
.auto-label{font-size:.78rem;color:rgba(255,255,255,.55);white-space:nowrap}
.auto-cashout-ctrl{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:4px 10px}
.x-prefix{color:var(--gold);font-weight:700;font-size:.92rem}
.auto-cashout-input{background:none;border:none;color:var(--gold);font-weight:700;font-size:.92rem;width:52px;text-align:left;padding:0;outline:none;-moz-appearance:textfield}
.auto-cashout-input::-webkit-outer-spin-button,.auto-cashout-input::-webkit-inner-spin-button{-webkit-appearance:none}
.mode-icons{display:flex;gap:9px;flex-shrink:0;margin-right:7%}
.mode-btn{width:52px;height:52px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:var(--gold);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0}
.mode-btn:hover{background:rgba(255,255,255,.18)}
.mode-btn.active{background:rgba(255,224,0,.22);outline:1.5px solid rgba(255,224,0,.5)}

/* ---- Info panel (slide-up) ---- */
.info-panel{position:absolute;inset:0;z-index:200;display:flex;flex-direction:column;background:#120328;transform:translateY(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);overflow:hidden}
.info-panel.open{transform:translateY(0)}
.info-header{flex:0 0 auto;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.info-title{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1}
.info-close{width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.info-close:active{background:rgba(255,255,255,.22)}
.info-body{flex:1;overflow-y:auto;padding:16px 16px 32px;-webkit-overflow-scrolling:touch}
.info-section-title{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:22px 0 8px}
.info-section-title:first-child{margin-top:0}
.info-list{list-style:none;padding:0;margin:0}
.info-list li{font-size:13px;color:rgba(255,255,255,.8);line-height:1.55;padding:6px 0 6px 14px;border-bottom:1px solid rgba(255,255,255,.05);position:relative}
.info-list li::before{content:'–';position:absolute;left:0;color:rgba(255,255,255,.3)}
.info-list--icons{display:flex;flex-direction:column;gap:0}
.info-list--icons li{display:flex;align-items:center;gap:10px;padding-left:0}
.info-list--icons li::before{display:none}
.seg-chip{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.seg-chip--wide{width:auto;height:36px;padding:0 10px;border-radius:12px}
.info-cta{margin-top:28px}
.info-play-btn{background:var(--spin);color:var(--spin-on);border:none;cursor:pointer;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;padding:13px 0;border-radius:12px;width:100%;letter-spacing:.03em;box-shadow:var(--spin-shade) 0 4px 0}

/* ---- Auto mode overrides ---- */
body.auto-mode .quick-section{display:none!important}
body.auto-mode #cashoutButton{display:none!important}
body.auto-mode #spinButton{flex:1;padding:0;min-height:54px}