:root {
  color-scheme: dark;
  --bg:#090a0d; --panel:#151719; --gold:#e8c36e;
  --muted:#a3a49f; --green:#07573b; --red:#b93440;
}
* { box-sizing:border-box; }
body {
  margin:0; padding-bottom:88px; background:var(--bg);
  color:#f5f1e8; font-family:Inter,system-ui,sans-serif;
}
button,input { font:inherit; }
button {
  padding:12px 9px; border:1px solid #373b38; border-radius:10px;
  color:#f4f0e7; background:#242825; cursor:pointer;
}
button:disabled { opacity:.35; cursor:not-allowed; }
input {
  width:100%; padding:12px; margin-top:7px; border-radius:9px;
  border:1px solid #383d38; background:#0b0e0d; color:white;
  outline-color:var(--gold);
}
label { display:block; margin:12px 0; font-size:12px; color:#d9d8d0; }
.topbar {
  max-width:520px; margin:auto; padding:13px;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; border-bottom:1px solid #2a2d29; background:#101213;
}
.brand { display:flex; align-items:center; gap:9px; }
.brand-icon { color:var(--gold); font-size:31px; }
.brand b { display:block; font-size:11px; letter-spacing:1.3px; }
.brand small { display:block; color:var(--gold); font-size:8px; letter-spacing:2px; }
.profile { display:flex; align-items:center; justify-content:flex-end; gap:5px; flex-wrap:wrap; font-size:10px; }
.profile strong { width:100%; text-align:right; color:var(--gold); font-size:14px; overflow-wrap:anywhere; }
.profile small { width:100%; text-align:right; color:var(--muted); }
.level { color:var(--gold); border:1px solid #84662d; border-radius:5px; padding:3px 5px; }
main { max-width:520px; margin:auto; }
.page { display:none; padding:12px; }
.page.active { display:block; }
.scene {
  position:relative; height:470px; overflow:hidden; border-radius:17px;
  border:1px solid #654d26; background:radial-gradient(ellipse,#4a3219,#151512 54%,#070808);
}
#casino3d { position:absolute; inset:0; width:100%; height:100%; }
.scene-title { position:absolute; z-index:1; top:12px; width:100%; text-align:center; pointer-events:none; }
.scene-title small,.heading small { color:var(--gold); font-size:9px; letter-spacing:3px; }
.scene-title h1 { margin:5px 0; font-size:23px; letter-spacing:3px; text-shadow:0 2px 12px #000; }
.scene-title p { margin:0; color:#c7c0ae; font-size:10px; }
.felt {
  position:absolute; top:120px; left:4%; width:92%; height:330px;
  border:8px solid #51391d; outline:2px solid #a8823c; outline-offset:-11px;
  border-radius:48% / 27%; background:radial-gradient(ellipse,#18774e,#075037 70%,#043522);
  box-shadow:0 15px 35px #000c,inset 0 0 30px #002719;
}
.dealer { position:absolute; top:8px; width:100%; text-align:center; font-size:10px; }
.avatar {
  display:grid; place-items:center; width:27px; height:27px; margin:auto;
  border-radius:50%; color:#18130b; background:linear-gradient(140deg,#f6d991,#8a6023);
  font-size:16px;
}
.dealer b { display:block; margin-top:3px; }
.dealer small { display:block; color:#ded4bd; font-size:9px; }
.cards { display:flex; justify-content:center; align-items:center; gap:4px; min-height:46px; }
.card {
  width:42px; height:61px; flex:0 1 42px; min-width:0;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  border:2px solid #d5c8a8; border-radius:6px;
  background:linear-gradient(140deg,#fffef7,#e1dac9); color:#171717;
  font-family:Georgia,serif; font-size:20px; box-shadow:0 3px 7px #0009;
}
.card.red { color:#c52b3d; }
.card small { font-size:10px; align-self:flex-start; margin-left:5px; }
.card.back {
  color:#e6c46d; border-color:#d2ab53;
  background:repeating-linear-gradient(45deg,#152a26,#152a26 4px,#9c7537 5px,#152a26 7px);
}
.dealer .cards { min-height:43px; }
.dealer .card { width:35px; height:46px; flex-basis:35px; font-size:15px; }
.total { display:block; min-height:15px; color:#f5d48b; font-size:11px; margin-top:3px; }
.table-center { position:absolute; top:125px; left:0; width:100%; text-align:center; }
.pot-label { color:#e7d5ae; font-size:8px; letter-spacing:2px; }
#betDisplay { color:#ffe5a4; display:block; font-size:17px; margin-top:3px; }
#shoeCards { min-height:10px; }
.player-seat { position:absolute; bottom:10px; width:100%; text-align:center; }
.player-seat>strong { display:block; font-size:9px; letter-spacing:1px; }
.player-seat .card { width:42px; height:60px; }
.player-seat>small { color:#e3c982; font-size:9px; }
.result-banner {
  position:absolute; z-index:3; top:40px; left:4%; width:92%; padding:12px 5px;
  border:1px solid var(--gold); border-radius:12px;
  background:#0a100ef2; box-shadow:0 0 25px #000b;
}
.result-banner strong { display:block; color:var(--gold); font-size:23px; letter-spacing:2px; }
.result-banner span { display:block; margin-top:5px; font-size:12px; }
.panel { margin-top:12px; padding:13px; border:1px solid #2c302c; border-radius:14px; background:var(--panel); }
.bet-row { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:9px; }
.gold { color:#19140a; background:linear-gradient(120deg,#f2d78e,#a7792c); border:0; font-weight:800; }
.danger { background:#76272d; border-color:#a73a40; }
.full { width:100%; }
.quick-bets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.quick-bets button { padding:9px 2px; font-size:10px; }
.actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:10px; }
.actions button { font-size:11px; padding:12px 3px; }
.hint { color:var(--muted); font-size:10px; line-height:1.6; }
.heading { padding:12px 2px 17px; }
.heading h1 { font-size:28px; margin:5px 0; }
.heading p { font-size:12px; color:var(--muted); }
.stats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.stats-grid article { min-width:0; padding:13px 10px; background:var(--panel); border:1px solid #2c302c; border-radius:11px; }
.stats-grid small { display:block; color:var(--muted); font-size:10px; }
.stats-grid strong { display:block; margin-top:7px; color:var(--gold); font-size:16px; overflow-wrap:anywhere; }
h2 { font-size:15px; }
.history { display:grid; gap:7px; }
.history article { padding:12px; border-radius:9px; background:var(--panel); font-size:11px; line-height:1.6; }
.collection { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.collection article { min-width:0; text-align:center; padding:12px 8px; background:var(--panel); border:1px solid #333831; border-radius:12px; }
.collection article.selected { border-color:var(--gold); }
.collection article b { display:block; font-size:12px; }
.collection article p { color:var(--muted); font-size:10px; }
.collection .preview { width:54px; height:77px; margin:9px auto; }
.collection article button { width:100%; font-size:10px; }
.separator { height:1px; background:#353932; margin:23px 0; }
.bottom-nav {
  position:fixed; z-index:10; bottom:0; left:50%; transform:translateX(-50%);
  width:min(100%,520px); display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:2px; padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  border-top:1px solid #35372f; background:#101212f5; backdrop-filter:blur(15px);
}
.nav-button { padding:5px 0; border:0; background:transparent; color:#999e98; font-size:8px; }
.nav-button span { display:block; font-size:19px; margin-bottom:3px; }
.nav-button.selected { color:var(--gold); background:#2a251a; border-radius:8px; }
.toast { display:none; position:fixed; z-index:20; bottom:95px; left:50%; transform:translateX(-50%); width:max-content; max-width:90%; padding:12px; border:1px solid #8c703c; border-radius:10px; background:#202620; color:#ffe3a0; font-size:12px; }
@media(min-width:521px) {
  body { padding-top:12px; }
  .topbar { border-radius:13px 13px 0 0; }
  main { border:1px solid #252925; border-top:0; }
}
@media(max-width:360px) {
  .scene { height:445px; }
  .felt { top:115px; height:315px; }
  .card { height:54px; font-size:17px; }
  .player-seat .card { height:55px; }
  .scene-title h1 { font-size:19px; }
}