:root{
  --bg:#0c1022; --panel:#131a33; --royal:#1f3fb8; --gold:#f0b90b; --text:#ffffff; --muted:#93a1bb;
  --danger:#ff4d4f; --success:#22c55e;
}
*{box-sizing:border-box}
html, body {height:100%; overscroll-behavior:none}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.container{max-width:1100px;margin:0 auto;padding:16px;padding-bottom:calc(env(safe-area-inset-bottom) + 12px)}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:12px}
header .right-controls{display:flex;align-items:center;gap:10px}
h1{font-size:20px;margin:0}
.tag{padding:4px 10px;border-radius:999px;background:linear-gradient(90deg,var(--royal),#0f2a8a);color:#fff;font-weight:600}

.stage{
  position:relative;height:240px;border-radius:16px;
  background: radial-gradient(1200px 280px at 30% 120%, #0d1540 0%, #0a0f26 60%, #080c1f 100%);
  overflow:hidden;border:1px solid #263159
}
.grid{position:absolute;inset:0;opacity:.24}
.grid::before,.grid::after{
  content:"";position:absolute;inset:0;background-image:
  linear-gradient(to right, rgba(255,255,255,.12) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:80px 100%, 100% 40px;
}
#multiplier{position:absolute; top:12px; left:12px; font-size:44px; font-weight:800; letter-spacing:1px}
.round-badge{position:absolute; top:14px; right:14px; background:rgba(240,185,11,.14); color:var(--gold); padding:6px 10px;border-radius:10px;font-weight:700;border:1px solid rgba(240,185,11,.35)}
.plane{position:absolute; bottom:36px; left:24px; font-size:40px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); will-change: transform}
.trail{position:absolute; height:4px; background:linear-gradient(90deg, rgba(240,185,11,0), rgba(240,185,11,.9)); border-radius:999px; bottom:55px; left:30px; box-shadow:0 0 12px rgba(240,185,11,.6)}

.status{margin:10px 0 18px;color:var(--muted);font-size:14px;min-height:22px}

.bets{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{
  background:linear-gradient(180deg,#141b35 0%, #0e1530 100%);
  border:1px solid #263159;border-radius:16px;padding:14px;
  box-shadow: inset 0 10px 30px rgba(0,0,0,.25)
}
.card h3{margin:0 0 10px;font-size:16px}
.row{display:flex;gap:10px;align-items:center}
.input{flex:1;display:flex;align-items:center;background:#0c1430;border:1px solid #27325d;border-radius:12px;padding:6px 10px;gap:8px}
.input input{width:100%;background:transparent;border:none;color:#fff;font-size:20px;outline:none;text-align:center}
.preset{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:10px 0}
.preset button{
  padding:10px 0; min-height:44px; font-size:16px;
  border-radius:10px; border:1px solid #2d3a74; background:#13205a; color:#d9e3ff; cursor:pointer; font-weight:700
}
.btn{
  width:100%; min-height:56px; padding:12px; border:none; border-radius:12px; font-size:18px; font-weight:800; cursor:pointer;
  background:linear-gradient(90deg,var(--gold),#ffcc3d); color:#1f273e; box-shadow:0 6px 20px rgba(240,185,11,.35)
}
.btn.alt{background:linear-gradient(90deg,#2045d7,#0f2a8a); color:#fff; box-shadow:0 6px 18px rgba(31,63,184,.35)}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.1)}

.meta{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px}
.stat{text-align:center;background:#0e1530;border:1px dashed #27325d;border-radius:12px;padding:10px}
.stat b{display:block; font-size:18px}

table{width:100%; border-collapse:collapse; margin-top:12px}
thead th{font-size:12px; color:#a9b5d8; font-weight:700; text-align:right; padding:8px}
tbody td{padding:10px 8px; border-top:1px solid #1e274d; font-size:14px}
.win{color:var(--success); font-weight:800}
.lose{color:var(--danger); font-weight:800}
footer{margin:14px 0 6px; color:#7f8db3; font-size:12px}

@media(max-width:860px){
  .container { padding: 12px; }
  #multiplier { font-size: 40px; }
  .bets{grid-template-columns:1fr; gap:12px}
  .stage{height:260px}
}

/* Crash shake */
@keyframes shake {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  25% { transform: translate3d(-4px,2px,0) rotate(-2deg); }
  50% { transform: translate3d(4px,-2px,0) rotate(2deg); }
  75% { transform: translate3d(-3px,2px,0) rotate(-1deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}
.shake{ animation: shake 0.4s ease-in-out; }