:root{
  --bg:#07060f;
  --gold:#ffd34d;
  --green:#16e08a;
  --red:#ff3b5c;
  --cyan:#36e2ff;
  --purple:#a06bff;
  --glass:rgba(16,14,30,.55);
  --glass-strong:rgba(12,10,24,.8);
  --brd:rgba(255,255,255,.12);
  --txt:#f4f2ff;
  --muted:#9b96b8;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  user-select:none;-webkit-user-select:none}
input{user-select:text;-webkit-user-select:text}
.hidden{display:none!important}

/* ---- AR layers ---- */
#cam,#scene,#vignette{position:fixed;inset:0;width:100%;height:100%}
#cam{object-fit:cover;background:#05040a;z-index:0;transform:scaleX(1)}
#scene{z-index:1;pointer-events:none}
#vignette{z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%,transparent 38%,rgba(4,3,10,.45) 78%,rgba(4,3,10,.85) 100%)}

/* ---- start screen ---- */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:24px;background:radial-gradient(80% 60% at 50% 30%,#161236 0%,#07060f 70%)}
.start-card{width:min(420px,100%);text-align:center;display:flex;flex-direction:column;gap:18px;
  padding:34px 26px;border-radius:26px;background:var(--glass);backdrop-filter:blur(20px);
  border:1px solid var(--brd);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.logo{font-size:54px;font-weight:900;letter-spacing:2px;line-height:1;
  background:linear-gradient(120deg,var(--gold),#ff8a3d 60%,var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 24px rgba(255,160,60,.4))}
.logo span{display:inline-block;margin-left:6px;
  background:linear-gradient(120deg,var(--cyan),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{color:var(--muted);font-size:14px;letter-spacing:.5px;margin-top:-6px}
.field{display:flex;flex-direction:column;gap:8px;text-align:left}
.field span{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}
.field input{padding:14px 16px;border-radius:14px;border:1px solid var(--brd);
  background:rgba(0,0,0,.35);color:var(--txt);font-size:17px;outline:none}
.field input:focus{border-color:var(--gold)}
.hint{font-size:12px;color:var(--muted);line-height:1.5}
.start-err{color:var(--red);font-size:13px;min-height:16px}

/* ---- buttons ---- */
.btn{border:none;border-radius:16px;font-weight:800;cursor:pointer;color:#0a0710;transition:transform .08s,filter .2s}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(120deg,var(--gold),#ff9a3d);box-shadow:0 10px 30px rgba(255,170,60,.35)}
.big{padding:18px;font-size:19px;letter-spacing:1px}

/* ---- HUD ---- */
#hud{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;
  padding:max(10px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom));pointer-events:none}
#hud>*{pointer-events:auto}

/* top bar */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.history{display:flex;gap:6px;overflow-x:auto;max-width:62%;scrollbar-width:none;padding:2px}
.history::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;
  background:var(--glass);border:1px solid var(--brd);backdrop-filter:blur(8px)}
.pill.low{color:var(--red)} .pill.mid{color:var(--gold)} .pill.high{color:var(--green)}
.top-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.balance{display:flex;flex-direction:column;align-items:flex-end;padding:8px 14px;border-radius:14px;
  background:var(--glass);border:1px solid var(--brd);backdrop-filter:blur(10px);min-width:120px}
.bal-label{font-size:9px;color:var(--muted);letter-spacing:1.5px}
#balance{font-size:22px;font-weight:900;color:var(--gold);line-height:1.1}
.topbtns{display:flex;gap:6px}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--brd);background:var(--glass);
  backdrop-filter:blur(10px);font-size:18px;cursor:pointer}
.icon-btn:active{transform:scale(.92)}
.icon-btn.off{opacity:.4}

/* center */
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;gap:6px}
.phase-label{font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);
  text-shadow:0 2px 12px #000}
.multiplier{font-size:84px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;
  color:#fff;text-shadow:0 0 30px rgba(54,226,255,.5),0 4px 24px rgba(0,0,0,.6);transition:color .15s}
.multiplier span{font-size:38px;opacity:.7;margin-left:2px}
.multiplier.running{color:var(--green);text-shadow:0 0 40px rgba(22,224,138,.7),0 4px 24px #000}
.multiplier.crashed{color:var(--red);text-shadow:0 0 50px rgba(255,59,92,.8);animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-12px) rotate(-2deg)}
  40%{transform:translateX(10px) rotate(2deg)}60%{transform:translateX(-7px)}80%{transform:translateX(5px)}}
.timer{font-size:15px;color:var(--cyan);font-weight:700;letter-spacing:1px;text-shadow:0 2px 8px #000;height:18px}
.cashout-flash{position:absolute;font-size:30px;font-weight:900;color:var(--gold);
  text-shadow:0 0 30px rgba(255,200,60,.8);animation:rise 1.4s ease-out forwards;pointer-events:none}
@keyframes rise{0%{transform:translateY(20px) scale(.8);opacity:0}
  20%{opacity:1;transform:translateY(0) scale(1.1)}100%{transform:translateY(-90px) scale(1);opacity:0}}

/* live players ticker */
.players{display:flex;gap:8px;overflow-x:auto;padding:4px 2px;scrollbar-width:none;min-height:34px;max-height:34px}
.players::-webkit-scrollbar{display:none}
.ptag{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  font-size:12px;background:var(--glass);border:1px solid var(--brd);backdrop-filter:blur(8px);white-space:nowrap}
.ptag b{font-weight:700;max-width:90px;overflow:hidden;text-overflow:ellipsis}
.ptag.won{border-color:rgba(22,224,138,.6);color:var(--green)}
.ptag .amt{color:var(--muted)}

/* controls */
.controls{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:22px;
  background:var(--glass-strong);border:1px solid var(--brd);backdrop-filter:blur(18px);
  box-shadow:0 -10px 40px rgba(0,0,0,.4)}
.bet-row{display:flex;align-items:center;gap:10px}
.step{width:48px;height:52px;border-radius:14px;border:1px solid var(--brd);background:rgba(255,255,255,.06);
  color:var(--txt);font-size:26px;font-weight:700;cursor:pointer}
.step:active{transform:scale(.94)}
.amount-wrap{flex:1;position:relative;display:flex;align-items:center}
.amount-wrap input{width:100%;height:52px;padding:0 60px 0 16px;border-radius:14px;border:1px solid var(--brd);
  background:rgba(0,0,0,.35);color:#fff;font-size:22px;font-weight:800;text-align:center;outline:none}
.amount-wrap input:focus{border-color:var(--gold)}
.amount-wrap .cur{position:absolute;right:14px;color:var(--muted);font-size:12px;pointer-events:none}
.quick-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.quick{flex:1;min-width:54px;padding:9px 0;border-radius:11px;border:1px solid var(--brd);
  background:rgba(255,255,255,.05);color:var(--txt);font-size:13px;font-weight:700;cursor:pointer}
.quick:active{transform:scale(.95)}
.auto{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:11px;
  border:1px solid var(--brd);background:rgba(255,255,255,.05);font-size:13px;font-weight:700}
.auto input[type=checkbox]{width:18px;height:18px;accent-color:var(--gold)}
.auto input[type=number]{width:50px;background:transparent;border:none;border-bottom:1px solid var(--brd);
  color:var(--gold);font-weight:800;font-size:14px;text-align:center;outline:none}
.auto .x{color:var(--muted)}

/* action button */
.action{width:100%;height:62px;border-radius:18px;border:none;font-size:22px;font-weight:900;letter-spacing:1px;
  cursor:pointer;color:#06120c;background:linear-gradient(120deg,var(--green),#0fd0a0);
  box-shadow:0 10px 30px rgba(22,224,138,.35);transition:transform .08s,filter .2s}
.action:active{transform:scale(.98)}
.action.waiting{background:linear-gradient(120deg,#3a3650,#2a2740);color:var(--muted);box-shadow:none}
.action.cashout{background:linear-gradient(120deg,var(--gold),#ff9a3d);color:#1a0f00;
  box-shadow:0 0 0 0 rgba(255,180,60,.6);animation:pulse 1s infinite}
.action.crashed{background:linear-gradient(120deg,var(--red),#c41e3a);color:#fff}
.action.locked{background:linear-gradient(120deg,#2a2740,#211f33);color:var(--muted);box-shadow:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,180,60,.6)}70%{box-shadow:0 0 0 16px rgba(255,180,60,0)}
  100%{box-shadow:0 0 0 0 rgba(255,180,60,0)}}

/* modals */
.modal{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(4,3,10,.6);backdrop-filter:blur(4px)}
.modal-card{width:min(480px,100%);max-height:80vh;overflow-y:auto;border-radius:24px 24px 0 0;
  padding:22px 20px max(22px,env(safe-area-inset-bottom));background:var(--glass-strong);
  border:1px solid var(--brd);backdrop-filter:blur(24px)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-head h3{font-size:19px}
.close{width:36px;height:36px;border-radius:10px;border:1px solid var(--brd);background:rgba(255,255,255,.06);
  color:var(--txt);font-size:16px;cursor:pointer}
.lb-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.lb-list li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--brd)}
.lb-list .rank{font-size:18px;font-weight:900;width:30px;color:var(--gold)}
.lb-list .lname{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-list .lwon{font-weight:900;color:var(--green)}
.lb-list .lbest{font-size:11px;color:var(--muted)}
.fair-text{color:var(--muted);font-size:13px;line-height:1.6;margin-bottom:16px}
.fair-grid{display:flex;flex-direction:column;gap:12px}
.fair-grid>div{display:flex;flex-direction:column;gap:4px}
.fair-grid span{font-size:11px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
.fair-grid code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;word-break:break-all;
  padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.4);border:1px solid var(--brd);color:var(--cyan)}
#fairCheck.ok{color:var(--green)} #fairCheck.bad{color:var(--red)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(160px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:40;padding:12px 20px;border-radius:14px;background:var(--glass-strong);border:1px solid var(--brd);
  backdrop-filter:blur(14px);font-weight:700;font-size:14px;box-shadow:0 12px 40px rgba(0,0,0,.5);
  animation:toastIn .25s ease}
.toast.win{border-color:rgba(22,224,138,.6);color:var(--green)}
.toast.err{border-color:rgba(255,59,92,.6);color:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

@media(min-width:560px){.multiplier{font-size:104px}}
@media(max-height:680px){.multiplier{font-size:64px}.multiplier span{font-size:30px}}