:root {
  --bg: #081018;
  --panel: #0b1220;
  --muted: #90a0b3;
  --accent: #66b2ff;
  --accent-2: #8b5cf6;
  --text: #e6eef6;
  --muted-2: #6f7f8f;
  --danger: #ff6b6b;
  --success: #34d399;
  --glass: rgba(255,255,255,0.03);
  --chip-low: #0f1b28;
  --chip-mid: #123f2e;
  --chip-high: #3b1f3b;
}

* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg,var(--bg), #05121a);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container {
  max-width: 920px;
  margin: 20px auto;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 12px;
  border: 1px solid var(--glass);
}

h1 { margin:0 0 12px 0; color:var(--accent); text-align:center; font-weight:700 }
h3 { margin:0 0 10px 0; color:var(--text); font-weight:600 }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.016), rgba(255,255,255,0.01));
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--glass);
}

.profile-circle {
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid var(--glass); color:var(--accent); font-weight:700; font-size:1.2rem;
}

.tabs { display:flex; gap:8px; justify-content:center; margin-top:14px }
.tab { padding:8px 12px; border-radius:10px; color:var(--muted); cursor:pointer; font-weight:600 }
.tab.active { background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:#041026 }

.grid { display:grid; grid-template-columns: repeat(3,1fr); gap:10px }

button {
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color: #041026; border: none; padding:10px 12px; border-radius:10px; cursor:pointer; font-weight:700;
}
button.ghost { background: transparent; color:var(--muted); border:1px solid var(--glass) }
button.small { padding:6px 8px; font-size:0.9rem }

input[type="number"], input[type="text"], textarea {
  width:100%; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.03); background:transparent; color:var(--text);
}

.dice { font-size:2.5rem; text-align:center }

/* Crash specific */
#rocket-area { width:120px; height:220px; border-radius:12px; background:linear-gradient(180deg,#07121a,#081822); display:flex; align-items:flex-end; justify-content:center; border:1px solid var(--glass) }
#rocket-column { width:40px; border-radius:8px; background:linear-gradient(180deg,#ffd66b,#ff8a00); height:10% }
#multiplier { font-weight:800; margin-top:8px; font-size:1.2rem; color:var(--accent) }

.bet-timer { font-weight:700; color:var(--muted-2) }

.players-list { width:100%; max-height:200px; overflow:auto; padding-top:8px }
.player-entry { display:flex; gap:10px; align-items:center; padding:8px 6px; border-bottom:1px solid rgba(255,255,255,0.02) }
.player-avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01)); border:1px solid var(--glass); color:var(--accent); font-weight:800 }
.player-info { flex:1 }
.player-name { font-weight:700 }
.player-bet { color:var(--muted); font-size:0.9rem }
.player-sum { width:80px; text-align:right; font-weight:800 }
.player-entry.lost .player-sum { color:var(--danger) }
.player-entry.won .player-sum { color:var(--success) }
.player-entry.flying { transform: translateX(120%); opacity:0; transition: transform 700ms ease-out, opacity 700ms ease-out }

/* History strip */
.history-strip { display:flex; gap:8px; overflow-x:auto; padding:8px 4px; align-items:center }
.history-chip { padding:6px 10px; border-radius:999px; background:var(--chip-low); color:var(--text); font-weight:700; font-size:0.9rem; border:1px solid rgba(255,255,255,0.02) }
.history-chip.history-mid { background: linear-gradient(90deg,#114833,#1f6e54) }
.history-chip.history-high { background: linear-gradient(90deg,#5b2b5b,#9b5cf6); box-shadow: 0 8px 24px rgba(139,92,246,0.18) }

.message { padding:10px; border-radius:8px; font-weight:700 }
.message.success { background:rgba(52,211,153,0.08); color:var(--success) }
.message.error { background:rgba(255,107,107,0.06); color:var(--danger) }

footer { text-align:center; padding:8px; color:var(--muted); font-size:0.85rem }

@media (max-width:700px) {
  .container { margin:8px; padding:12px; border-radius:8px }
  .grid { grid-template-columns: repeat(2,1fr) }
  .tabs { justify-content:space-between }
  #rocket-area { width:90px; height:180px }
}